Comment accéder aux données d'accéléromètre / gyroscope à partir de Javascript?

Question

J'ai récemment rencontré quelques sites web qui semble pour accéder à l'accéléromètre gyroscope sur mon ordinateur portable, la détection des changements dans l'orientation ou de la circulation. Exemple: http://isthisanearthquake.com

Comment est-ce fait? Dois-je souscrire à une sorte de cas sur l' window objet?

Sur quels types d'appareils (ordinateurs portables, téléphones mobiles, tablettes) est connu pour travailler?

---

^{NB: en fait, je sais déjà (une partie de) la réponse à cette question, et je vais poster tout de suite. La raison que je suis en affichant la question ici, est de laisser tout le monde sais que l'accéléromètre de données est disponible dans le Javascript (sur certains appareils) et de contester la communauté de publier de nouveaux résultats sur le sujet. Actuellement, il semble y avoir pratiquement aucune documentation de ces fonctions.}

Answer 1

Il existe actuellement trois événements distincts qui peut ou peut ne pas être déclenchée lorsque le client périphériques se déplace. Deux d'entre eux sont axés autour de l'orientation et la dernière sur le mouvement:

• ondeviceorientation est connu pour travailler sur la version de bureau de google Chrome, et la plupart des ordinateurs portables Apple semble avoir le matériel nécessaire pour faire ce travail. Il fonctionne aussi sur Mobile Safari sur l'iPhone 4 avec iOS 4.2. Dans la fonction de gestionnaire d'événement, vous pouvez accéder alpha, beta, gamma valeurs sur le cas des données fournies en tant que le seul argument à la fonction.

• onmozorientation est pris en charge sur Firefox 3.6 et versions plus récentes. Encore une fois, cela est connu de fonctionner sur la plupart des ordinateurs portables Apple, mais pourrait fonctionner sur Windows ou Linux avec l'accéléromètre. Dans la fonction de gestionnaire d'événements, recherchez x, y, z des champs dans le cas des données fournies en tant que premier argument.

• ondevicemotion est connu pour fonctionner sur iPhone 3GS + 4 et iPad (iOS 4.2), et fournit des données liées à l'accélération de l'appareil client. Les données d'événements passés à la fonction de gestionnaire a acceleration et accelerationIncludingGravity, qui ont tous deux des trois champs pour chaque axe: x, y, z

Le "tremblement de terre de la détection" exemple de site web utilise une série d' if des déclarations de comprendre que l'événement à joindre à (dans un certain ordre de priorité) et transmet les données reçues à une commune tilt fonction de:

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);
}

La constante de facteurs 2 et 50 sont utilisés pour "aligner" les lectures de ces deux derniers événements avec ceux de la première, mais ceux-ci sont en aucun cas représenter de façon précise. Pour cette simple "jouet" projet, il fonctionne très bien, mais si vous avez besoin d'utiliser les données pour quelque chose de plus grave, vous aurez à vous familiariser avec les unités de valeurs fournies dans les différents événements et de les traiter avec respect :)

Answer 2

Ne pouvez pas ajouter un commentaire à l'excellente explication dans l'autre post mais je voulais parler du fait qu'une grande source de documentation peut être trouvée ici.

Il suffit de s'inscrire une fonction d'événement pour l'accéléromètre comme suit:

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

avec le gestionnaire de:

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

Et pour magnétomètre un gestionnaire d'événement suivant doit être enregistré:

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

avec un gestionnaire de:

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

Il y a aussi les champs spécifiés dans le mouvement pour un gyroscope, mais qui ne semble pas être universellement pris en charge (par exemple, il ne fonctionne pas sur un Samsung Galaxy Note).

J'ai aussi un travail simple code sur GitHub