Los eventos de movimiento y orientación del dispositivo proporcionan acceso al acelerómetro, al giroscopio y a la brújula de los dispositivos móviles.
Estos eventos se pueden utilizar para muchos fines; en juegos, por ejemplo, para controlar la dirección o la acción de un personaje. Cuando se usan con la ubicación geográfica, pueden ayudar a crear una navegación paso a paso más precisa o proporcionar información sobre una ubicación específica.
Resumen
- Detecta qué lado del dispositivo se encuentra hacia arriba y cómo rota el dispositivo.
- Descubre cuándo y cómo responder a eventos de movimiento y orientación.
¿Qué extremo está orientado hacia arriba?
Para usar los datos que muestran los eventos de movimiento y de orientación del dispositivo, es importante comprender los valores proporcionados.
Marco de coordenadas de la Tierra
El marco de coordenadas de la Tierra, que se describe con los valores X, Y y Z, está alineado en función de la gravedad y la orientación magnética estándar.
| Sistema de coordenadas | |
|---|---|
X |
Representa la dirección de este a oeste (donde el este es positivo). |
Y |
Representa la dirección de norte a sur (donde el norte es positivo). |
Z |
Representa la dirección de arriba abajo, en posición perpendicular al suelo (donde la dirección hacia arriba es positiva). |
Marco de coordenadas del dispositivo
El marco de coordenadas del dispositivo, que se describe con los valores x, y y z, está alineado en función del centro del dispositivo.
| Sistema de coordenadas | |
|---|---|
X |
En el plano de la pantalla, positivo hacia la derecha. |
Y |
En el plano de la pantalla, positivo en la parte superior. |
Z |
Perpendicular a la pantalla o al teclado, positivo al alejarse. |
En un teléfono o una tablet, la orientación del dispositivo se basa en la orientación típica de la pantalla. En teléfonos y tablets, se basa en que el dispositivo esté en modo vertical. En computadoras de escritorio o laptops, la orientación se considera en relación con el teclado.
Datos de rotación
Los datos de rotación se muestran como un ángulo de Euler, que representa la cantidad de grados de diferencia entre el marco de coordenadas del dispositivo y el marco de coordenadas de la Tierra.
Alfa
Es la rotación alrededor del eje z. El valor de alpha es 0° cuando la parte superior del dispositivo apunta directamente al norte. A medida que el dispositivo se rota en sentido contrario a las manecillas del reloj, el valor de alpha aumenta.
Beta
Es la rotación alrededor del eje x. El valor de beta es de 0° cuando la parte superior e inferior del dispositivo se encuentran a la misma distancia de la superficie de la Tierra. El valor aumenta a medida que la parte superior del dispositivo se apunta hacia la superficie de la Tierra.
Gamma
Es la rotación alrededor del eje y. El valor de gamma es de 0° cuando los bordes izquierdo y derecho del dispositivo se encuentran a la misma distancia de la superficie de la Tierra. El valor aumenta a medida que la parte derecha del dispositivo se apunta hacia la superficie de la Tierra.
Orientación del dispositivo
El evento de orientación del dispositivo muestra datos de rotación, que incluyen cuánto se está inclinando el dispositivo de la parte frontal a posterior y de lado a lado y, si el teléfono o la laptop tienen una brújula, la dirección hacia la que está orientado el dispositivo.
Úsalo con moderación.
Prueba la compatibilidad.
No actualices la IU en cada evento de orientación. En su lugar, sincroniza con requestAnimationFrame.
Cuándo usar los eventos de orientación del dispositivo
Los eventos de orientación del dispositivo se pueden usar de diferentes maneras. Estos son algunos ejemplos:
- Actualiza un mapa a medida que el usuario se desplaza.
- Realizar pequeños ajustes en la IU; por ejemplo, agregar efectos de paralaje
- Combinado con la ubicación geográfica, se puede utilizar para la navegación paso a paso.
Verifica la compatibilidad y escucha eventos
Para escuchar DeviceOrientationEvent, primero verifica si el navegador es compatible con los eventos. Luego, adjunta un objeto de escucha de eventos al objeto window que escucha eventos deviceorientation.
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
Cómo controlar los eventos de orientación del dispositivo
El evento de orientación del dispositivo se activa cuando este se mueve o cuando cambia su orientación. Muestra datos sobre la diferencia entre el dispositivo en su posición actual en relación con el marco de coordenadas de la Tierra.
Por lo general, el evento muestra tres propiedades: alpha, beta y gamma. En Mobile Safari, se muestra un parámetro adicional webkitCompassHeading con la orientación según la brújula.
Movimiento del dispositivo
El evento de orientación del dispositivo muestra datos de rotación, que incluyen cuánto se está inclinando el dispositivo de la parte frontal a posterior y de lado a lado y, si el teléfono o la laptop tienen una brújula, la dirección hacia la que está orientado el dispositivo.
Usa la función Movimiento del dispositivo cuando necesites el movimiento actual del dispositivo.
rotationRate se proporciona en °/s.
acceleration y accelerationWithGravity se proporcionan en m/s2.
Ten en cuenta las diferencias entre las implementaciones de navegador.
Cuándo usar los eventos de movimiento del dispositivo
Los eventos de movimiento del dispositivo se pueden usar de diferentes maneras. Estos son algunos ejemplos:
- Gesto de agitación para actualizar los datos.
- En los juegos, para hacer que los personajes salten o se muevan
- En apps de salud y fitness.
Verifica la compatibilidad y escucha eventos
Para escuchar DeviceMotionEvent, primero verifica si los eventos son
compatibles con el navegador. Luego, adjunta un objeto de escucha de eventos al objeto window que escucha los eventos devicemotion.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
Cómo controlar los eventos de movimiento del dispositivo
El evento de movimiento del dispositivo se activa a intervalos regulares y muestra datos sobre la rotación (en °/segundo) y la aceleración (en m/segundo2) del dispositivo en ese momento. Algunos dispositivos no cuentan con el hardware necesario para excluir el efecto de la gravedad.
El evento muestra cuatro propiedades, accelerationIncludingGravity, acceleration, que excluye los efectos de la gravedad, rotationRate y interval.
Por ejemplo, echemos un vistazo a un teléfono apoyado sobre una mesa plana con la pantalla hacia arriba.
| Estado | Rotación | Aceleración (m/s2) | Aceleración con gravedad (m/s2) |
|---|---|---|---|
| No se trasladará | [0, 0, 0] | [0, 0, 0] | [0, 0, 9.8] |
| Subiendo en dirección al cielo | [0, 0, 0] | [0, 0, 5] | [0, 0, 14.81] |
| Se está moviendo solo hacia la derecha | [0, 0, 0] | [3, 0, 0] | [3, 0, 9.81] |
| Con movimiento hacia arriba y hacia la derecha | [0, 0, 0] | [5, 0, 5] | [5, 0, 14.81] |
Por el contrario, si colocas el teléfono de modo que la pantalla quede perpendicular al suelo y sea directamente visible para el usuario, haz lo siguiente:
| Estado | Rotación | Aceleración (m/s2) | Aceleración con gravedad (m/s2) |
|---|---|---|---|
| No se trasladará | [0, 0, 0] | [0, 0, 0] | [0, 9.81, 0] |
| Subiendo en dirección al cielo | [0, 0, 0] | [0, 5, 0]. | [0, 14.81, 0] |
| Se está moviendo solo hacia la derecha | [0, 0, 0] | [3, 0, 0] | [3, 9.81, 0] |
| Con movimiento hacia arriba y hacia la derecha | [0, 0, 0] | [5, 5, 0] | [5, 14.81, 0] |
Ejemplo: Cómo calcular la aceleración máxima de un objeto
Una forma de usar los eventos de movimiento del dispositivo es calcular la aceleración máxima de un objeto. Por ejemplo, ¿cuál es la aceleración máxima de una persona que está saltando?
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;
}
Después de presionar el botón Go!, se le indica al usuario que salte. Durante ese tiempo, la página almacena los valores de aceleración máximos (y mínimos) y, después del salto, le indica al usuario su aceleración máxima.