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, pour contrôler la direction ou l'action d'un personnage. Lorsqu'elles sont utilisées avec la géolocalisation, elles peuvent contribuer à créer une navigation détaillée plus précise ou fournir des informations sur un lieu spécifique.
Résumé
- Détectez quel côté de l'appareil est vers le haut et comment il pivote.
- 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 terrestre
Le cadre 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 (où l'est est positif). |
Y |
Représente la direction nord-sud (où le nord est positif). |
Z |
Représente la direction du haut vers le bas, perpendiculaire au sol (où le niveau haut est positif). |
Frame de coordonnées de l'appareil
Le cadre des coordonnées de l'appareil, décrit par les valeurs x, y et z, est aligné par rapport au centre de l'appareil.
| Système de coordonnées | |
|---|---|
X |
Sur le plan de l'écran, positif à droite. |
Y |
Dans le plan de l'écran, positif vers le haut. |
Z |
Perpendiculaire à l'écran ou au clavier, 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 habituelle 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 et représentent le nombre de degrés de différence entre le cadre de coordonnées de l'appareil et celui de la Terre.
Alpha
Rotation autour de l'axe Z. La valeur alpha est de 0 ° lorsque le haut de l'appareil pointe directement vers le nord. Lorsque vous faites pivoter l'appareil 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 à égale distance de la surface de la Terre. La valeur augmente à mesure que le haut de l'appareil penche 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 penche 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 la position de l'appareil d'un côté à l'autre, 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 il est orienté.
Utilisez-les avec parcimonie.
Testez l'assistance.
Ne mettez pas à jour l'interface utilisateur à chaque événement d'orientation. Synchronisez 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 manières. Voici quelques exemples :
- Met à jour une carte lorsque l'utilisateur se déplace.
- Modifications subtiles de l'interface utilisateur, par exemple des effets de parallaxe
- Combiné à la géolocalisation, peut être utilisé pour la navigation détaillée.
Rechercher de l'aide et écouter les événements
Pour écouter DeviceOrientationEvent, vérifiez d'abord si le navigateur accepte 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 se déplace ou change d'orientation. Elle renvoie des données sur la différence entre l'appareil et sa position actuelle par rapport au cadre de coordonnées Earth.
L'événement renvoie généralement trois propriétés: alpha, beta et gamma. Dans Safari sur mobile, un paramètre supplémentaire webkitCompassHeading est renvoyé avec l'en-tête 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'un côté à l'autre, 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 il est orienté.
Utiliser 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 d'implémentation entre les navigateurs.
Quand utiliser les événements de mouvement de l'appareil
Les événements de mouvement de l'appareil ont plusieurs cas d'utilisation. Voici quelques exemples :
- Secouez pour actualiser les données.
- Dans les jeux, pour faire sauter ou déplacer les personnages.
- Pour les applications de santé et de remise en forme.
Rechercher de l'aide et écouter les événements
Pour écouter DeviceMotionEvent, vérifiez d'abord si les événements sont acceptés dans 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 à intervalle régulier et renvoie des données sur la rotation (en °/seconde) et l'accélération (en m/seconde2) de l'appareil, à cet instant précis. 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, avec l'écran tourné vers le haut.
| État | Rotation | Accélération (m/s2) | Accélération avec gravité (m/s2) |
|---|---|---|---|
| Aucune migration | [0, 0, 0] | [0, 0, 0] | [0, 0, 9,8] |
| Se déplacer vers le ciel | [0, 0, 0] | [0, 0, 5] | [0, 0, 14,81] |
| En mouvement uniquement vers la droite | [0, 0, 0] | [3, 0, 0] | [3, 0, 9,81] |
| En mouvement 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 soit directement visible par le spectateur:
| État | Rotation | Accélération (m/s2) | Accélération avec gravité (m/s2) |
|---|---|---|---|
| Aucune migration | [0, 0, 0] | [0, 0, 0] | [0, 9,81, 0] |
| Se déplacer vers le ciel | [0, 0, 0] | [0, 5, 0] | [0, 14,81, 0] |
| En mouvement uniquement vers la droite | [0, 0, 0] | [3, 0, 0] | [3, 9,81, 0] |
| En mouvement vers le haut et vers la droite | [0, 0, 0] | [5, 5, 0] | [5, 14,81, 0] |
Exemple: Calcul de 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!, 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.