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 à différentes 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 le côté de l'appareil qui est orienté vers le haut et la rotation de l'appareil.
- 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 de coordonnées terrestres, 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). |
Cadre 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. La valeur augmente à mesure que 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. À la place, synchronisez-la avec requestAnimationFrame.
Quand utiliser des é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.
- Des 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. 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 se déplace 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 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 mouvement de l'appareil lorsque le mouvement actuel de l'appareil est nécessaire.
rotationRate est fourni en °/s. acceleration et accelerationWithGravity sont fournis en m/s2.
Tenez compte des différences entre les implémentations de navigateur.
Quand utiliser des é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 :
- Secouez l'appareil pour actualiser les données.
- Dans les jeux, pour faire sauter ou bouger les personnages.
- Pour les applications 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 plate, avec son écran 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] |
| Montée vers le ciel | [0, 0, 0] | [0, 0, 5] | [0, 0, 14.81] |
| Déplacement uniquement vers la droite | [0, 0, 0] | [3, 0, 0] | [3, 0, 9,81] |
| Déplacement vers le haut et vers la droite | [0, 0, 0] | [5, 0, 5] | [5, 0, 14.81] |
À l'inverse, si le téléphone était tenu de sorte que l'écran soit perpendiculaire au sol et directement visible par le spectateur:
| É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 mouvement 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 "Go!" (Aller !), 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.