devicemotion - ¿Cómo acceder a los datos de acelerómetro/giroscopio desde Javascript?

orientationchange jquery

Question

Recientemente me encontré con algunos sitios web que parecen acceder al acelerómetro o giroscopio en mi computadora portátil, detectando cambios en la orientación o el movimiento.

¿Cómo se hace esto? ¿Debo suscribirme a algún tipo de evento en el objeto window ?

¿En qué dispositivos (computadoras portátiles, teléfonos móviles, tabletas) se sabe que funciona?

^{NB : Yo ya sé (parte de) la respuesta a esta pregunta, y la voy a publicar de inmediato. La razón por la que estoy publicando la pregunta aquí, es para que todos los demás sepan que los datos del acelerómetro están disponibles en Javascript (en ciertos dispositivos) y para desafiar a la comunidad a publicar nuevos hallazgos sobre el tema. Actualmente, parece que casi no hay documentación de estas características.}

Answer 1

Actualmente hay tres eventos distintos que pueden o no desencadenarse cuando los dispositivos del cliente se mueven. Dos de ellos se centran en la orientación y el último en movimiento :

• ondeviceorientation se sabe que funciona en la versión de escritorio de Chrome, y la mayoría de las computadoras portátiles de Apple parecen tener el hardware necesario para que esto funcione. También funciona en Mobile Safari en el iPhone 4 con iOS 4.2. En la función del controlador de eventos, puede acceder a gamma valores alpha , beta y gamma en los datos de eventos proporcionados como único argumento para la función.

• onmozorientation es compatible con Firefox 3.6 y onmozorientation posteriores. De nuevo, se sabe que esto funciona en la mayoría de las laptops de Apple, pero también podría funcionar en máquinas Windows o Linux con acelerómetro. En la función del controlador de eventos, busque los campos x , y , z en los datos de eventos proporcionados como primer argumento.

• ondevicemotion se sabe que funciona en iPhone 3GS + 4 e iPad (ambos con iOS 4.2) y proporciona datos relacionados con la aceleración actual del dispositivo cliente. Los datos de evento pasados ​​a la función del manejador tienen acceleration y accelerationIncludingGravity , incluida la gravedad, que tienen tres campos para cada eje: x , y , z

El sitio web de muestra "detección de terremotos" utiliza una serie de sentencias if para determinar a qué evento adjuntar (en un orden algo priorizado) y pasa los datos recibidos a una función de tilt común:

if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function () {
        tilt([event.beta, event.gamma]);
    }, true);
} else if (window.DeviceMotionEvent) {
    window.addEventListener(''devicemotion'', function () {
        tilt([event.acceleration.x * 2, event.acceleration.y * 2]);
    }, true);
} else {
    window.addEventListener("MozOrientation", function () {
        tilt([orientation.x * 50, orientation.y * 50]);
    }, true);
}

Los factores constantes 2 y 50 se usan para "alinear" las lecturas de los dos últimos eventos con las del primero, pero estas no son de ninguna manera representaciones precisas. Para este simple proyecto de "juguete" funciona bien, pero si necesita usar los datos para algo un poco más serio, deberá familiarizarse con las unidades de los valores proporcionados en los diferentes eventos y tratarlos con respeto :)

Answer 2

No se puede agregar un comentario a la excelente explicación en la otra publicación, pero quería mencionar que se puede encontrar una gran fuente de documentación here .

Es suficiente registrar una función de evento para el acelerómetro de esta manera:

if(window.DeviceMotionEvent){
  window.addEventListener("devicemotion", motion, false);
}else{
  console.log("DeviceMotionEvent is not supported");
}

con el controlador:

function motion(event){
  console.log("Accelerometer: "
    + event.accelerationIncludingGravity.x + ", "
    + event.accelerationIncludingGravity.y + ", "
    + event.accelerationIncludingGravity.z
  );
}

Y para el magnetómetro, debe registrarse un controlador de eventos siguiente:

if(window.DeviceOrientationEvent){
  window.addEventListener("deviceorientation", orientation, false);
}else{
  console.log("DeviceOrientationEvent is not supported");
}

con un controlador:

function orientation(event){
  console.log("Magnetometer: "
    + event.alpha + ", "
    + event.beta + ", "
    + event.gamma
  );
}

También hay campos especificados en el evento de movimiento para un giroscopio, pero que no parece ser universalmente compatible (por ejemplo, no funcionó en un Samsung Galaxy Note).

Hay un código de trabajo simple en GitHub

Answer 3

Recurso útil aquí: https://developer.mozilla.org/en-US/docs/Web/Events/MozOrientation

function orientationhandler(evt){


  // For FF3.6+
  if (!evt.gamma && !evt.beta) {
    evt.gamma = -(evt.x * (180 / Math.PI));
    evt.beta = -(evt.y * (180 / Math.PI));
  }

  // use evt.gamma, evt.beta, and evt.alpha 
  // according to dev.w3.org/geo/api/spec-source-orientation


}

window.addEventListener(''deviceorientation'',  orientationhandler, false);
window.addEventListener(''MozOrientation'',     orientationhandler, false);