Orientação e movimento do dispositivo

Pete LePage

Os eventos de orientação e movimentação do dispositivo oferecem acesso ao acelerômetro, giroscópio e bússola integrados aos dispositivos móveis.

Esses eventos podem ser usados para muitas finalidades. Em jogos, por exemplo, para controlar a direção ou ação de um personagem. Quando usados com geolocalização, eles podem ajudar a criar uma navegação guiada mais precisa ou fornecer informações sobre um local específico.

Atenção : nem todos os navegadores usam o mesmo sistema de coordenadas e podem informar valores diferentes em situações idênticas. Isso melhorou com o tempo, mas não deixe de testar a sua situação.

Resumo

• Detecta qual lado do dispositivo está para cima e como o dispositivo está girando.
• Saiba quando e como responder a eventos de movimento e orientação.

Qual lado está para cima?

Para usar os dados retornados pelos eventos de orientação e movimento do dispositivo, é importante entender os valores fornecidos.

Frame de coordenada da Terra

O frame de coordenadas da Terra, descrito pelos valores X, Y e Z, é alinhado com base na gravidade e na orientação magnética padrão.

Sistema de coordenadas
X	Representa a direção leste-oeste (onde leste é positivo).
Y	Representa a direção norte-sul, em que o norte é positivo.
Z	Representa a direção para cima e para baixo, perpendicular ao solo (em que "para cima" é positivo).

Frame de coordenada do dispositivo

Ilustração do frame de coordenadas do dispositivo

O frame de coordenadas do dispositivo, descrito pelos valores x, y e z, é alinhado com base no centro do dispositivo.

Sistema de coordenadas
X	No plano da tela, é positivo à direita.
Y	No plano da tela, é positivo em direção à parte superior.
Z	Perpendicular à tela ou teclado, positivo se afastando.

Em um smartphone ou tablet, a orientação do dispositivo é baseada na orientação típica da tela. Em smartphones e tablets, ela é baseada no dispositivo estar no modo retrato. Para computadores desktop ou laptop, a orientação é considerada em relação ao teclado.

Dados de rotação

Os dados de rotação são retornados como um ângulo de Euler, representando o número de graus de diferença entre os frames de coordenada do dispositivo e da Terra.

Alfa

Ilustração de Alfa no frame de coordenadas do dispositivo

A rotação em torno do eixo z. O valor de alpha é 0° quando a parte de cima do dispositivo está apontada diretamente para o norte. À medida que o dispositivo é girado no sentido anti-horário, o valor de alpha aumenta.

Beta

Ilustração da versão Beta no frame de coordenadas do dispositivo

A rotação em torno do eixo x. O valor de beta será 0° quando as partes superior e inferior do dispositivo estiverem equidistantes da superfície da Terra. O valor aumenta conforme o topo do dispositivo é inclinado em direção à superfície terrestre.

Gama

Ilustração de gama no frame de coordenadas do dispositivo

A rotação em torno do eixo Y. O valor de gamma é 0° quando as bordas esquerda e direita do dispositivo estão equidistantes da superfície da Terra. O valor aumenta à medida que o lado direito é inclinado em direção à superfície terrestre.

Orientação do dispositivo

O evento de orientação do dispositivo retorna dados de rotação, que incluem quanto o dispositivo está inclinando de frente para trás, lado a lado e, se o smartphone ou laptop tiver uma bússola, para que direção o dispositivo está voltado.

Use com moderação. Testar o suporte. Não atualize a interface em cada evento de orientação. Em vez disso, sincronize com requestAnimationFrame.

Quando usar eventos de orientação do dispositivo

Existem diversos usos para os eventos de orientação do dispositivo. Os exemplos incluem:

• Atualizar um mapa conforme o usuário se move.
• Pequenos ajustes na interface do usuário, por exemplo, adicionando efeitos de paralaxe.
• Combinados com geolocalização, podem ser usados para navegação guiada.

Verificar o suporte e detectar eventos

Para detectar DeviceOrientationEvent, primeiro verifique se o navegador é compatível com os eventos. Em seguida, anexe um listener de eventos ao objeto window que detecta eventos deviceorientation.

if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', deviceOrientationHandler, false);
  document.getElementById('doeSupported').innerText = 'Supported!';
}

Processar eventos de orientação do dispositivo

O evento de orientação do dispositivo é acionado quando ele se move ou muda de orientação. Ela retorna dados sobre a diferença entre o dispositivo na posição atual em relação ao Frame de coordenada terrestre.

O evento normalmente retorna três propriedades: alpha, beta e gamma. No Mobile Safari, um parâmetro adicional webkitCompassHeading é retornado com a bússola.

Movimento do dispositivo

O evento de orientação do dispositivo retorna dados de rotação, que incluem quanto o dispositivo está inclinando de frente para trás, lado a lado e, se o smartphone ou laptop tiver uma bússola, para que direção o dispositivo está voltado.

Use a movimentação do dispositivo para quando o movimento atual for necessário. rotationRate é fornecido em °/s. acceleration e accelerationWithGravity são fornecidos em m/s². Esteja ciente das diferenças entre as implementações do navegador.

Quando usar os eventos de movimento do dispositivo

Existem diversos usos para os eventos de movimentação do dispositivo. Os exemplos incluem:

• Gesto de balançar para atualizar os dados.
• Em jogos, para fazer com que as personagens pulem ou se movam.
• Para apps de saúde e fitness.

Verificar o suporte e detectar eventos

Para detectar DeviceMotionEvent, primeiro verifique se os eventos têm suporte no navegador. Em seguida, anexe um listener de eventos ao objeto window que detecta eventos devicemotion.

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler);
  setTimeout(stopJump, 3 * 1000);
}

Processar eventos de movimento do dispositivo

O evento de movimento do dispositivo é disparado em um intervalo regular e retorna dados sobre a rotação (em °/segundo) e a aceleração (em m/segundo²) do dispositivo naquele momento. Alguns dispositivos não têm o hardware para excluir o efeito da gravidade.

O evento retorna quatro propriedades, accelerationIncludingGravity, acceleration, que exclui os efeitos da gravidade, rotationRate e interval.

Por exemplo, vamos analisar um smartphone deitado sobre uma mesa plana, com a tela virada para cima.

Estado	Rotation	Aceleração (m/s^2)	Aceleração com gravidade (m/s^2)
Não se mexa	[0, 0, 0]	[0, 0, 0]	[0, 0, 9,8]
Movendo para o céu	[0, 0, 0]	[0, 0, 5]	[0, 0, 14,81]
Movendo apenas para a direita	[0, 0, 0]	[3, 0, 0]	[3, 0, 9,81]
Indo para cima e para a direita	[0, 0, 0]	[5, 0, 5]	[5, 0, 14,81]

Por outro lado, se o smartphone fosse segurado com a tela perpendicular ao chão e diretamente visível para o espectador:

Estado	Rotation	Aceleração (m/s^2)	Aceleração com gravidade (m/s^2)
Não se mexa	[0, 0, 0]	[0, 0, 0]	[0, 9,81, 0]
Movendo para o céu	[0, 0, 0]	[0, 5, 0]	[0, 14,81, 0]
Movendo apenas para a direita	[0, 0, 0]	[3, 0, 0]	[3, 9,81, 0]
Indo para cima e para a direita	[0, 0, 0]	[5, 5, 0]	[5, 14,81, 0]

Amostra: cálculo da aceleração máxima de um objeto

Uma maneira de usar eventos de movimento do dispositivo é calcular a aceleração máxima de um objeto. Por exemplo, qual é a aceleração máxima de uma pessoa pulando?

if (evt.acceleration.x > jumpMax.x) {
  jumpMax.x = evt.acceleration.x;
}
if (evt.acceleration.y > jumpMax.y) {
  jumpMax.y = evt.acceleration.y;
}
if (evt.acceleration.z > jumpMax.z) {
  jumpMax.z = evt.acceleration.z;
}

Depois de tocar no botão Go!, o usuário é instruído a pular. Durante esse período, a página armazena os valores de aceleração máximo (e mínimo) e, após o pulo, informa ao usuário a aceleração máxima.

Feedback