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 aux appareils mobiles.
Ces événements peuvent être utilisés à de nombreuses fins. Dans les jeux, par exemple, ils permettent de contrôler la direction ou l'action d'un personnage. Lorsqu'ils sont utilisés avec la géolocalisation, ils 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 quel côté de l'appareil est orienté vers le haut et comment l'appareil tourne.
- Découvrez quand et comment répondre aux événements de mouvement et d'orientation.
Quel côté est le sommet ?
Pour utiliser les données renvoyées par les événements d'orientation et de mouvement de l'appareil, il est important de comprendre les valeurs fournies.
Système de coordonnées terrestres
Le repère 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 (où l'est est positif). |
Y |
Représente la direction nord-sud (où le nord est positif). |
Z |
Représente la direction haut-bas, perpendiculaire au sol (où le haut est positif). |
Cadre de coordonnées de l'appareil
Le repère de l'appareil, décrit par les valeurs x, y et z, est aligné sur le centre de l'appareil.
| Système de coordonnées | |
|---|---|
X |
Dans le plan de l'écran, positif vers la droite. |
Y |
Dans le plan de l'écran, positif vers le haut. |
Z |
Perpendiculaire à l'écran ou au clavier, extension positive vers l'extérieur. |
Sur un téléphone ou une tablette, l'orientation de l'appareil est basée sur l'orientation standard de l'écran. Pour les téléphones et les tablettes, elle est basée sur l'appareil en mode Portrait. Pour les ordinateurs de bureau ou portables, l'orientation est considérée 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 repère de l'appareil et le repère 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. La 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 lorsque 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, 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 orienté.
À utiliser avec parcimonie.
Tester la compatibilité.
Ne mettez pas à jour l'UI à chaque événement d'orientation. Synchronisez-la 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 plusieurs façons. Voici quelques exemples :
- Mettre à jour une carte lorsque l'utilisateur se déplace
- Ajustements subtils de l'interface utilisateur, par exemple en ajoutant des effets de parallaxe.
- 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. Ensuite, associez 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 système de coordonnées de la Terre.
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 l'orientation de la boussole.
Mouvement 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, 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 orienté.
Utilisez les mouvements de l'appareil lorsque vous avez besoin de connaître le mouvement actuel de l'appareil.
rotationRate est exprimé en °/s.
acceleration et accelerationWithGravity sont exprimés en m/s2.
Tenez compte des différences entre les implémentations des navigateurs.
Quand utiliser les événements de mouvement de l'appareil
Les événements de mouvement de l'appareil peuvent être utilisés de plusieurs façons. Voici quelques exemples :
- Secouez l'appareil pour actualiser les données.
- Dans les jeux, pour faire sauter ou déplacer des personnages.
- Pour les applications de santé et de 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. Ensuite, associez 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 °/seconde) et l'accélération (en m/seconde2) 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 exclut les effets de la gravité), rotationRate et interval.
Par exemple, prenons un téléphone posé sur une table plate, l'écran vers le haut.
| État | Rotation | Accélération (m/s2) | Accélération avec gravité (m/s2) |
|---|---|---|---|
| À l'arrêt | [0, 0, 0] | [0, 0, 0] | [0, 0, 9.8] |
| S'élever vers le ciel | [0, 0, 0] | [0, 0, 5] | [0, 0, 14.81] |
| Se déplacer uniquement vers la droite | [0, 0, 0] | [3, 0, 0] | [3, 0, 9.81] |
| Déplacement vers le haut et la droite | [0, 0, 0] | [5, 0, 5] | [5, 0, 14.81] |
À l'inverse, si le téléphone est tenu de manière à ce que l'écran soit perpendiculaire au sol et directement visible par l'utilisateur :
| État | Rotation | Accélération (m/s2) | Accélération avec gravité (m/s2) |
|---|---|---|---|
| À l'arrêt | [0, 0, 0] | [0, 0, 0] | [0, 9.81, 0] |
| S'élever vers le ciel | [0, 0, 0] | [0, 5, 0] | [0, 14.81, 0] |
| Se déplacer uniquement vers la droite | [0, 0, 0] | [3, 0, 0] | [3, 9.81, 0] |
| Déplacement vers le haut et 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 "C'est parti", 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.