Détecter l'orientation de l'appareil

Pour recevoir les informations de changement d'orientation, il faut écouter l'évènement deviceorientation :

window.addEventListener("deviceorientation", handleOrientation, true);

Après avoir enregistré un gestionnaire d'évènement (ici la fonction handleOrientation()), le gestionnaire d'évènement sera appelé périodiquement avec les données d'orientation à jour.

L'évènement relatif à l'orientation portera quatre valeurs :

• DeviceOrientationEvent.absolute
• DeviceOrientationEvent.alpha (en-US)
• DeviceOrientationEvent.beta (en-US)
• DeviceOrientationEvent.gamma (en-US)

Le gestionnaire d'évènement handleOrientation() pourrait ressembler à ceci :

function handleOrientation(event) {
  const absolute = event.absolute;
  const alpha = event.alpha;
  const beta = event.beta;
  const gamma = event.gamma;

  // Faire quelque chose avec les nouvelles
  // données d'orientation
}

La valeur fournie pour chaque axe indique la rotation autour d'un axe donné dans le système de coordonnées de l'appareil. Bien que ces notions soient abordées plus en détails dans l'article Explication des données d'orientation et de mouvement, voyons un rapide résumé ici.

• DeviceOrientationEvent.alpha (en-US) représente le déplacement de l'appareil autour de l'axe z, exprimé en degrés (de 0, inclus, à 360, exclus). Cela correspond à la rotation de l'appareil sur son plan (comme une toupie qu'on ferait tourner son axe).
• DeviceOrientationEvent.beta (en-US) représente le déplacement de l'appareil autour de l'axe x, exprimé en degrés (de 0, inclus, à 360, exclus). Cela correspond à l'inclinaison de l'appareil d'avant en arrière.
• DeviceOrientationEvent.gamma (en-US) représente le déplacement de l'appareil autour de l'axe y, exprimé en degrés (de 0, inclus, à 360, exclus). Cela correspond à l'inclinaison de l'appareil de droite à gauche.

Cet exemple fonctionnera pour les navigateurs qui prennent en charge l'évènement deviceorientation et pour les appareils capables de détecteur leur orientation.

Prenons une balle dans un jardin :

<div class="garden">
  <div class="ball"></div>
</div>
Tenez l'appareil parallèle au sol. Tournez-le sur les axes x et y pour voir la
balle bouger de haut en bas et de gauche à droite.
<pre class="output"></pre>

Soit un jardin large de 200 pixels, avec la balle en son centre :

.garden {
  position: relative;
  width: 200px;
  height: 200px;
  border: 5px solid #ccc;
  border-radius: 10px;
}

.ball {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 20px;
  height: 20px;
  background: green;
  border-radius: 100%;
}

Si on déplace notre appareil, la balle se déplacera avec le mouvement correspondant :

const ball = document.querySelector(".ball");
const garden = document.querySelector(".garden");
const output = document.querySelector(".output");

const maxX = garden.clientWidth - ball.clientWidth;
const maxY = garden.clientHeight - ball.clientHeight;

function handleOrientation(event) {
  let x = event.beta; // Une valeur en degrés dans l'intervalle [-180,180[
  let y = event.gamma; // Une valeur en degrés dans l'intervalle [-90,90[

  output.textContent = `beta : ${x}\n`;
  output.textContent += `gamma : ${y}\n`;

  // On ne veut pas que l'appareil soit complètement tête en bas
  // donc on contraint la valeur de x sur l'intervalle [-90,90]
  if (x > 90) {
    x = 90;
  }
  if (x < -90) {
    x = -90;
  }

  // Pour faciliter les calculs, on décale x et y sur
  // l'intervalle [0,180]
  x += 90;
  y += 90;

  // 10 correspond à la moitié de la taille de la balle
  // cela permet de centrer le point de positionnement
  // au centre de la balle
  ball.style.left = `${(maxY * y) / 180 - 10}px`; // tourner l'appareil autour de l'axe y déplacera la balle horizontalement
  ball.style.top = `${(maxX * x) / 180 - 10}px`; // tourner l'appareil autour de l'axe x déplacera la balle verticalement
}

window.addEventListener("deviceorientation", handleOrientation);

Cliquez ici pour ouvrir cet exemple dans une nouvelle fenêtre (en effet, deviceorientation ne fonctionne pas pour tous les navigateurs au sein d'une <iframe> embarquant du contenu d'une autre origine).

Les évènements de mouvement se gèrent de façon analogue aux évènements d'orientation, bien entendu avec un nom différent : devicemotion

window.addEventListener("devicemotion", handleMotion, true);

De même, les informations contenues dans l'objet DeviceMotionEvent passé au gestionnaire d'évènement est différent. Un évènement de mouvement contiendra quatre propriétés :

• DeviceMotionEvent.acceleration (en-US)
• DeviceMotionEvent.accelerationIncludingGravity
• DeviceMotionEvent.rotationRate
• DeviceMotionEvent.interval

Les objets DeviceMotionEvent fournissent des informations sur la vitesse de changement de position et d'orientation de l'appareil. Les changements sont fournis sur les trois axes (voir l'article Explication des données d'orientation et de mouvement pour plus de détails).

Pour DeviceMotionEvent.acceleration (en-US) et DeviceMotionEvent.accelerationIncludingGravity, ces axes se décrivent ainsi :

x

Représente l'axe allant d'ouest en est.

y

Représente l'axe allant du sud au nord.

z

Représente l'axe perpendiculaire au sol.

Pour DeviceMotionEvent.rotationRate, ce sont des angles plutôt que des axes qui sont utilisés :

alpha

Représente une vitesse de rotation autour de l'axe perpendiculaire à l'écran (ou au clavier pour les appareils de bureau).

beta

Représente une vitesse de rotation autour de l'axe allant de gauche à droite de l'écran (ou du clavier pour les appareils de bureau).

gamma

Représente une vitesse de rotation autour de l'axe allant du bas vers le haut de l'écran (ou du clavier pour les appareils de bureau).

Enfin, DeviceMotionEvent.interval représente l'intervalle de temps, exprimé en millisecondes, utilisé pour fournir les données de l'appareil.

• DeviceOrientationEvent
• DeviceMotionEvent
• Explication des données d'orientation et de mouvement
• Utiliser l'orientation de l'appareil pour les transformations 3D
• Cyber Orb : un jeu de labyrinthe 2D utilisant l'orientation de l'appareil