iwtraining

Bússola (Device Orientation) Mobile

Bússola (Device Orientation)

A API bússola permite que um programa determine a orientação do dispositivo ao longo de um plano bidimensional que corresponde aproximadamente à superfície da terra. Muitos smartphones modernos têm uma bússola física (em um chip), e a API simplesmente consulta o chip e retorna um ângulo entre 0 e 360, indicando a direção que o dispositivo está a apontar.

O valor 0 indica que o dispositivo está a apontar para o norte, 90 indica que está apontando para o leste, 180 refere-se a sul, e 270 refere-se a oeste.

A API Bússola funciona de maneira muito semelhante à API Acelerômetro descrita anteriormente. Usando a API, os desenvolvedores podem consultar manualmente orientação do dispositivo ou pode configurar um relógio para que o API informar periodicamente orientação.

Plugin

Lembre-se de importar o plugin antes de usar.

$ cordova plugin add org.apache.cordova.device-orientation

Obtendo a orientação do dispositivo

Para obter a orientação a bússola simplesmente utilize a chamada:

navigator.compass.getCurrentHeading(successFunction, errorFunction);

Após solicitarmos a orientação, passaremos duas funções uma para quando a solicitação for bem sucedida e outra para tratamento em caso de erro.

Para a função de sucesso passamos o objeto compassHeading que é composto da seguinte maneira:

  • magneticHeading: Atual orientação do dispositivo em graus que variam 0-359,99.
  • trueHeading: A posição atual do dispositivo de em relação ao polo norte geográfico em graus que variam 0-359,99. Um valor negativo indica que o valor não pôde ser determinada.
  • headingAccuracy: Um valor que indica o desvio, em graus, entre o magneticHeading e valores TrueHeading.
  • timestamp: O tempo em que os valores de título foram medidos (em milisegundos desde a Era Unix, 1, Janeiro 1970).

Como usar

Como base, definimos as variáveis globalmente, de forma a facilitar a comunicação entre os eventos, e adicionamos os listeners base, de DOM e Device.

var msg;
var erro;

var magneticHeading;
var trueHeading;
var headingAccuracy;
var timestamp;

document.addEventListener("DOMContentLoaded", onContentLoaded);

function onContentLoaded(ev) {
    document.addEventListener("deviceready", onDeviceReady);
}

function onDeviceReady( ev ) {
    msg = document.querySelector("#mensagem");
    erro = document.querySelector("#erro");

    msg.innerHTML = "O PhoneGap está pronto!";

    magneticHeading = document.querySelector("#magneticHeading");
    trueHeading = document.querySelector("#trueHeading");
    headingAccuracy = document.querySelector("#headingAccuracy");
    timestamp = document.querySelector("#timestamp");

    if ( navigator.compass ) {
        navigator.compass.getCurrentHeading(onCompassSuccess, onCompassError);
    }
    else {
        msg.innerHTML = "Plugin não encontrado.";
    }
}

Conforme pode ser visto, fizemos um teste para saber se o plugin está instalado. Caso esteja, ele chama o método getCurrentHeading.

function onCompassSuccess( heading ) {
    msg.innerHTML = "Deu certo!";

    magneticHeading.innerHTML = 'Magnetic Heading: ' + heading.magneticHeading;
    trueHeading.innerHTML = 'True Heading: ' + heading.trueHeading;
    headingAccuracy.innerHTML = 'Heading Accuracy: ' + heading.headingAccuracy;
    timestamp.innerHTML = 'Timestamp: ' + heading.timestamp;
}

function onCompassError( error ) {
    if ( error.code == error.COMPASS_NOT_SUPPORTED ) {
        erro.innerHTML = 'Erro: recurso não suportado.';    
    }
    else if ( error.code == error.COMPASS_INTERNAL_ERR ) {
        erro.innerHTML = 'Erro interno.';    
    }
    else {
        erro.innerHTML = 'Erro não definido.';    
    }
}

Observando as mudanças da Bússola

A função watchHeading permite que um aplicativo definir um relógio que dispara várias vezes em um intervalo de tempo específico.

Primeiramente, de forma global, crie uma variável de nome watchID.

var watchID;

Mais uma vez, faremos a chamada com um terceiro parâmetro, options. Ele é um objeto genérico informará a frequência de atualização dos dados.

var options = { 
    frequency: 500 
};
                    
watchID = navigator.compass.watchHeading(onCompassSuccess, onCompassError, options);

Teremos uma leve alteração caso haja algum erro, visto que devemos limpar o observador.

navigator.clearWatch( watchID );

Está com duvidas?

Aluno iwtraining tem acesso a um fórum exclusivo para discutir com os instrutores e outros alunos. Acesse agora mesmo!

Share this article

Em seus 12 anos de experiência, tanto em design como em desenvolvimento, trabalhou em diversos projetos, muitos de grande porte, para clientes como Banco do Nordeste, Sebrae, Anna Pegova, Grupo Deib Otoch, dentre outros. Como designer, trabalha com o Adobe Photoshop desde a versão 3.0, além do Illustrator, sendo certificado pela Adobe (ACE e ACI) nestes softwares. Como desenvolvedor, foca seus esforços atualmente no ActionScript 3.0 (Plataforma Flash) e Objective-C (iOS). Ministra, desde 2005, treinamentos na @iwtraining para estudantes e profissionais, além de grandes empresas como Cagece, TRE, TRT, Esmaltec, Grupo Edson Queiroz, Sebrae, Senac, Correios.

Posts Relacionados

Deixe um comentário