Device orientation

by toubia95

HTML

<h2>Orientation HTML5</h2>
  <small>Activer l'accéléromètre<br>You can test this stuff in Chrome using the emulation panel in the dev tools:<br>F12 -> ESC -> Emulation Tab -> Sensors</small>
  <p>Détection active:<br><span id="detect"></span></p>
  <p>alpha<br>direction de la boussole<br><span id="alpha"></span></p>
  <p>beta<br>angle avant-arrière en degrés<br>avant = positif<br><span id="beta"></span></p>
  <p>gamma<br>angle gauche-droite en degrés<br>droite = positif<br><span id="gamma"></span></p>

CSS

/*
 * http://stackoverflow.com/questions/13934926/phonegap-device-orientation-in-degrees-magnetic-field
 * http://www.onlywebpro.com/2011/06/11/introduction-to-device-orientation-with-html5/
 */

JavaScript

if (window.DeviceOrientationEvent) {
  document.getElementById("detect").innerHTML = "oui";
  window.addEventListener('deviceorientation', function(eventData) {
    console.log(eventData);
        document.getElementById("alpha").innerHTML = eventData.alpha ? eventData.alpha : "inconnu";
        document.getElementById("beta").innerHTML = eventData.beta ? eventData.beta : "inconnu";
        document.getElementById("gamma").innerHTML = eventData.gamma ? eventData.gamma : "inconnu";
        }, false);
} else {
   document.getElementById("detect").innerHTML = "non";
}