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

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: En realidad ya lo sé (parte de) la respuesta a esta pregunta, y 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 son 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 se mueven los dispositivos del cliente. Dos de ellos se centran en torno orientación y la última el movimiento:

• ondeviceorientation se sabe que funciona en la versión de escritorio de Chrome, y la mayoría de los portátiles de Apple parece 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 los valores alpha, beta, gamma en los datos de eventos proporcionados como único argumento para la función.

• onmozorientation es compatible con Firefox 3.6 y versiones 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. Se sabe que ondevicemotion 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 eventos pasados ​​a la función de controlador tiene acceleration y accelerationIncludingGravity, que ambos tienen tres campos para cada eje: x, y, z

El "terremoto detectar" sitio web de ejemplo utiliza una serie de if declaraciones de averiguar cuyo caso para adjuntar a (en un orden priorizado algo) y pasa los datos recibidos a un tilt función 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); 
} 

las constantes los factores 2 y 50 se utilizan para "alinear" las lecturas de los dos últimos eventos con los de la primera, pero estos 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 explicación excelente en la otra publicación, pero quería mencionar que se puede encontrar una gran fuente de documentación here.

Es suficiente para registrar una función de eventos para el acelerómetro de este modo:

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

con el manejador:

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

Y para magnetómetro de un controlador de eventos siguiente tiene que ser registrado:

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 parecen ser universalmente compatibles (p. no funcionó en un Samsung Galaxy Note).

No es un simple código de trabajo sobre GitHub

Answer 3

repliegue Ú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);