Les événements de mouvement et d'orientation de l'appareil permettent d'accéder à l'accéléromètre, au gyroscope et à la boussole intégrés des appareils mobiles.
Ces événements peuvent être utilisés à de nombreuses fins ; dans les jeux vidéo, par exemple, pour contrôler la direction ou l'action d'un personnage. Lorsqu'elles sont utilisées avec la géolocalisation, elles peuvent aider à créer une navigation détaillée plus précise ou à fournir des informations sur un lieu spécifique.
Résumé
- Détecte le côté de l'appareil qui est orienté vers le haut et la rotation de l'appareil.
- Découvrez quand et comment réagir aux événements de mouvement et d'orientation.
Quel côté est le sommet ?
Pour utiliser les données renvoyées par l'orientation de l'appareil et les événements de mouvement, il est important de comprendre les valeurs fournies.
Cadre de coordonnées terrestres
Le repère de coordonnées terrestre, décrit par les valeurs X, Y et Z, est aligné en fonction de la gravité et de l'orientation magnétique standard.
| Système de coordonnées | |
|---|---|
X |
Représente la direction est-ouest (l'est étant positif). |
Y |
Représente la direction nord-sud (le nord étant positif). |
Z |
Représente la direction haut-bas, perpendiculaire au sol (où le haut est positif). |
Frame de coordonnées de l'appareil
Le frame de coordonnées de l'appareil, décrit par les valeurs x, y et z, est aligné en fonction du centre de l'appareil.
| Système de coordonnées | |
|---|---|
X |
Dans le plan de l'écran, positif à droite. |
Y |
Dans le plan de l'écran, la valeur positive est vers le haut. |
Z |
Perpendiculaire à l'écran ou au clavier, le positif s'étendant vers l'extérieur. |
Sur un téléphone ou une tablette, l'orientation de l'appareil est basée sur l'orientation typique de l'écran. Pour les téléphones et les tablettes, cela dépend de l'appareil étant en mode portrait. Pour les ordinateurs de bureau ou portables, l'orientation est prise en compte par rapport au clavier.
Données de rotation
Les données de rotation sont renvoyées sous la forme d'un angle d'Euler, qui représente le nombre de degrés de différence entre le frame de coordonnées de l'appareil et le frame de coordonnées de la Terre.
Alpha
Rotation autour de l'axe Z. La valeur alpha est de 0° lorsque le haut de l'appareil est orienté directement vers le nord. Lorsque l'appareil est pivoté dans le sens inverse des aiguilles d'une montre, la valeur alpha augmente.
Bêta
Rotation autour de l'axe X. La valeur beta est de 0° lorsque le haut et le bas de l'appareil sont équidistants de la surface de la Terre. Cette valeur augmente lorsque le haut de l'appareil est incliné vers la surface de la Terre.
Gamma
Rotation autour de l'axe Y. La valeur gamma est de 0° lorsque les bords gauche et droit de l'appareil sont équidistants de la surface de la Terre. La valeur augmente à mesure que le côté droit est incliné vers la surface de la Terre.
Orientation de l'appareil
L'événement d'orientation de l'appareil renvoie des données de rotation, qui incluent l'inclinaison de l'appareil d'avant en arrière, de gauche à droite et, si le téléphone ou l'ordinateur portable est équipé d'une boussole, la direction vers laquelle l'appareil est orienté.
Utilisez-le avec parcimonie.
Tester la compatibilité.
Ne mettez pas à jour l'UI à chaque événement d'orientation. Synchronisez-les plutôt avec requestAnimationFrame.
Quand utiliser les événements d'orientation de l'appareil ?
Les événements d'orientation de l'appareil peuvent être utilisés de différentes manières. Voici quelques exemples :
- Mettez à jour une carte à mesure que l'utilisateur se déplace.
- Ajustements subtils de l'interface utilisateur (ajout d'effets de parallaxe, par exemple)
- Combiné à la géolocalisation, il peut être utilisé pour la navigation détaillée.
Vérifier la compatibilité et écouter les événements
Pour écouter DeviceOrientationEvent, vérifiez d'abord si le navigateur est compatible avec les événements. Associez ensuite un écouteur d'événements à l'objet window qui écoute les événements deviceorientation.
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
Gérer les événements d'orientation de l'appareil
L'événement d'orientation de l'appareil se déclenche lorsque l'appareil bouge ou change d'orientation. Il renvoie des données sur la différence entre l'appareil dans sa position actuelle par rapport au cadre de coordonnées terrestres.
L'événement renvoie généralement trois propriétés : alpha, beta et gamma. Sur Mobile Safari, un paramètre supplémentaire webkitCompassHeading est renvoyé avec le cap de la boussole.
Mouvement de l'appareil
L'événement d'orientation de l'appareil renvoie des données de rotation, qui incluent la position de l'appareil d'avant en arrière ou d'un côté à l'autre et, si le téléphone ou l'ordinateur portable est équipé d'une boussole, la direction vers laquelle l'appareil est tourné.
Utilisez les mouvements de l'appareil lorsque le mouvement actuel de l'appareil est nécessaire.
Les valeurs rotationRate sont indiquées en °/s. Les valeurs acceleration et accelerationWithGravity sont indiquées en m/s2.
Tenez compte des différences entre les implémentations de navigateur.
Quand utiliser les événements de mouvement de l'appareil ?
Les événements de mouvement de l'appareil peuvent être utilisés de différentes manières. Voici quelques exemples :
- Secouer pour actualiser les données
- Dans les jeux, pour faire sauter ou bouger les personnages.
- Pour les applis de santé et remise en forme.
Vérifier la compatibilité et écouter les événements
Pour écouter DeviceMotionEvent, vérifiez d'abord si les événements sont compatibles avec le navigateur. Associez ensuite un écouteur d'événements à l'objet window qui écoute les événements devicemotion.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
Gérer les événements de mouvement de l'appareil
L'événement de mouvement de l'appareil se déclenche à intervalles réguliers et renvoie des données sur la rotation (en °/s) et l'accélération (en m/s2) de l'appareil à ce moment-là. Certains appareils ne disposent pas du matériel nécessaire pour exclure l'effet de la gravité.
L'événement renvoie quatre propriétés, accelerationIncludingGravity, acceleration, qui excluent les effets de la gravité, rotationRate et interval.
Prenons l'exemple d'un téléphone posé sur une table à plat, l'écran orienté vers le haut.
| État | Rotation | Accélération (m/s2) | Accélération avec la gravité (m/s2) |
|---|---|---|---|
| À l'arrêt | [0, 0, 0] | [0, 0, 0]. | [0, 0, 9,8] |
| En route vers le ciel | [0, 0, 0]. | [0, 0, 5] | [0, 0, 14.81] |
| Déplacement vers la droite uniquement | [0, 0, 0] | [3, 0, 0]. | [3, 0, 9,81] |
| En allant vers le haut et vers la droite | [0, 0, 0]. | [5, 0, 5]. | [5, 0, 14,81] |
À l'inverse, si vous tenez le téléphone de sorte que l'écran soit perpendiculaire au sol et qu'il soit directement visible par l'utilisateur:
| État | Rotation | Accélération (m/s2) | Accélération avec la gravité (m/s2) |
|---|---|---|---|
| À l'arrêt | [0, 0, 0] | [0, 0, 0]. | [0, 9,81, 0] |
| En montant vers le ciel | [0, 0, 0] | [0, 5, 0] | [0, 14.81, 0] |
| Déplacement uniquement vers la droite | [0, 0, 0] | [3, 0, 0]. | [3, 9,81, 0] |
| Déplacement vers le haut et vers la droite | [0, 0, 0] | [5, 5, 0]. | [5, 14,81, 0] |
Exemple : Calculer l'accélération maximale d'un objet
Une façon d'utiliser les événements de mouvement de l'appareil consiste à calculer l'accélération maximale d'un objet. Par exemple, quelle est l'accélération maximale d'une personne qui saute ?
if (evt.acceleration.x > jumpMax.x) {
jumpMax.x = evt.acceleration.x;
}
if (evt.acceleration.y > jumpMax.y) {
jumpMax.y = evt.acceleration.y;
}
if (evt.acceleration.z > jumpMax.z) {
jumpMax.z = evt.acceleration.z;
}
Après avoir appuyé sur le bouton "OK", l'utilisateur est invité à sauter. Pendant ce temps, la page stocke les valeurs d'accélération maximale (et minimale), et après le saut, indique à l'utilisateur son accélération maximale.