iwtraining

Acelerômetro (Device Motion) Mobile

Acelerômetro (Device Motion)

A API de acelerómetro permite uma aplicação determinar a orientação de um dispositivo num espaço tridimensional (utilizando as coordenadas X , Y e Z). A documentação atual da API do PhoneGap informa que os valores devolvidos pelo acelerômetro indica as mudanças no movimento de um dispositivo através do espaço. Se o acelerômetro realmente medisse apenas movimento através do espaço, então a API acelerômetro não retornaria nenhuma informação quando o dispositivo estivesse parado, o que não é o caso.
Por exemplo, em um dispositivo Android , com o aparelho deitado sobre uma mesa , o acelerômetro retornará aproximadamente os seguintes valores: X : 0, Y: 0, Z : 10 . Como o dispositivo é girado para que fique em pé em sua borda esquerda, os valores irão se ajustar, aproximadamente, X : 10, Y : 0, Z : 0.

Se em vez disso movermos o dispositivo apoiando em sua borda inferior, os valores irão ajustar-se aproximadamente para X : 0, Y : 10, Z : 0. Apoiando em sua borda superior resultará em valores de acelerômetro aproximados X : 0 , Y: -10 , Z : 0 . Um aplicativo utilizaria esses valores para determinar como um usuário está segurando o aparelho e é mais útil para jogos e aplicações interativas.

Desenvolvedores PhoneGap podem consultar uma API para determinar a orientação de um dispositivo em um determinado momento ou pode assistir o acelerômetro para controlar a aceleração do dispositivo repetidamente durante um intervalo de tempo. Determinar movimento através do espaço é simplesmente uma questão de comparar medições de orientação subsequentes e a diferença entre elas.

Plugin

Lembre-se de importar o plugin antes de usar.

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

HTML

Para este projeto, nosso HTML deverá ficar assim, de forma a receber os valores nos locais corretos:

<h1>PhoneGap</h1>
<h2>Device</h2>

<p id="mensagem"></p>

<p id="aceX"></p>
<p id="aceY"></p>
<p id="aceZ"></p>
<p id="timestamp"></p>

<p id="erro"></p>

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 aceX;
var aceY;
var aceZ;
var timestamp;

document.addEventListener("DOMContentLoaded", onContentLoaded);

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

function onDeviceReady( ev ) {
    msg.innerHTML = "O PhoneGap está pronto!";    
    
    msg = document.querySelector("#mensagem");
    erro = document.querySelector("#erro");
    
    aceX = document.querySelector("#aceX");
    aceY = document.querySelector("#aceY");
    aceZ = document.querySelector("#aceZ");
    timestamp = document.querySelector("#timestamp");
}

Com tudo definido, chamamos o método getCurrentAcceleration, passando duas funções de callback, uma para o caso de sucesso, e outra para o caso de falha. Isto deve ser feito dentro da função onDeviceReady.

navigator.accelerometer.getCurrentAcceleration(onAccelerometerSuccess, onAccelerometerFailure); 

Agora, vamos recuperar os valores para exibir para o usuário:

function onAccelerometerSuccess( acceleration ) {
    aceX.innerHTML = 'Accelerometer X: '+ acceleration.x;
    aceY.innerHTML = 'Accelerometer Y: '+ acceleration.y;
    aceZ.innerHTML = 'Accelerometer Z: '+ acceleration.z;
    timestamp.innerHTML = 'Accelerometer Timestamp: '+ acceleration.timeStamp;
}

function onAccelerometerError() {
    erro.innerHTML = 'Erro no Acelerômetro';
}

Observando a orientação do dispositivo

No lugar de consultar periodicamente  o dispositivo para saber se ele se moveu, podemos utilizar uma função que nos retornará um valor diferente sempre que a posição for alterada.

De diferente, faremos agora 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
}

navigator.accelerometer.watchAcceleration(onAccelerometerSuccess, onAccelerometerFailure, options);

A função de sucesso continua igual:

function onAccelerometerSuccess( acceleration ) {
    aceX.innerHTML = 'Accelerometer X: '+ acceleration.x;
    aceY.innerHTML = 'Accelerometer Y: '+ acceleration.y;
    aceZ.innerHTML = 'Accelerometer Z: '+ acceleration.z;
}

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

function onAccelerometerError() {
    erro.innerHTML = 'Erro no Acelerômetro. Limpando pelo ID';
    navigator.accelerometer.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