Orientation et mouvements de l'appareil

Pete LePage

Les événements de mouvement et d'orientation de l'appareil donnent accès à l'application accéléromètre, gyroscope et boussole 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. Utilisées avec la géolocalisation, elles peuvent permettent de créer une navigation détaillée plus précise ou fournissent un emplacement spécifique.

Résumé

  • Permet de détecter quel côté de l'appareil est en 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 terrestres

Le cadre des coordonnées terrestres, décrit par les valeurs X, Y et Z, est aligné. basé sur la gravité et l'orientation magnétique standard.

Système de coordonnées
X Représente l'est en ouest (l'est étant une valeur positive).
Y Représente le nord-sud (le nord étant positif).
Z Représente le sens de haut en bas, perpendiculaire au sol (où "up" est positif).

Frame de coordonnées de l'appareil

<ph type="x-smartling-placeholder">
</ph> Illustration du cadre de coordonnées de l&#39;appareil <ph type="x-smartling-placeholder">
</ph> Illustration du cadre de coordonnées de l'appareil
.

La trame des coordonnées de l'appareil, décrite par les valeurs x, y et z, est alignée. en fonction du centre de l'appareil.

Système de coordonnées
X Dans le plan de l'écran, positif à droite.
Y À plan de l'écran, positif vers le haut.
Z Perpendiculaire à l'écran ou au clavier, extension positive à distance.

Sur un téléphone ou une tablette, l'orientation de l'appareil est basée sur l'orientation l'orientation de l'écran. Pour les téléphones et les tablettes, il dépend de l'appareil. en mode Portrait. Pour les ordinateurs de bureau ou portables, l'orientation est par rapport au clavier.

Données de rotation

Les données de rotation sont renvoyées sous la forme d'un angle d'Euler, représentant le nombre de degrés de différence entre les coordonnées de l'appareil et le cadre de coordonnées de la Terre.

Alpha

<ph type="x-smartling-placeholder">
</ph> Illustration de la valeur alpha dans le cadre de coordonnées de l&#39;appareil <ph type="x-smartling-placeholder">
</ph> Illustration de la valeur alpha dans le cadre de coordonnées de l'appareil
.

Rotation autour de l'axe Z. La valeur alpha est de 0° lorsque la partie supérieure l'appareil est orienté 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

<ph type="x-smartling-placeholder">
</ph> Illustration d&#39;un cadre de coordonnées de l&#39;appareil <ph type="x-smartling-placeholder">
</ph> Illustration de la version bêta dans le cadre des coordonnées de l'appareil
.

Rotation autour de l'axe X. La valeur beta est de 0° lorsque les parties supérieure et situées sous l'appareil sont équidistantes de la surface de la Terre. La valeur augmente à mesure que la partie supérieure de l'appareil est inclinée vers la surface de la terre.

"Gamma"

<ph type="x-smartling-placeholder">
</ph> Illustration d&#39;un cadre de coordonnées de l&#39;appareil <ph type="x-smartling-placeholder">
</ph> Illustration du gamma dans le cadre des coordonnées de l'appareil
.

Rotation autour de l'axe Y. La valeur gamma est de 0° lorsque le côté gauche et les bords droits 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, y compris la quantité l'appareil est penché à l'avant vers l'arrière, d'un côté à l'autre et, si le téléphone ou l'ordinateur portable qui comporte une boussole, dans la direction vers laquelle l'appareil est orienté.

Utilisez-les avec parcimonie. Testez l'assistance. Ne mettez pas à jour l'UI à 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 différentes manières. Voici quelques exemples :

  • Mettre à jour la 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.

Rechercher de l'aide et écouter les événements

Pour écouter DeviceOrientationEvent, vérifiez d'abord si le navigateur est compatible avec ces é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. l'orientation. Elle renvoie des données sur la différence entre l'appareil dans sa position actuelle par rapport Cadre de coordonnées terrestres :

L'événement renvoie généralement trois propriétés: alpha, beta et gamma. Dans Safari pour mobile, un paramètre supplémentaire webkitCompassHeading est renvoyée avec l'en-tête de la boussole.

Mouvements de l'appareil

L'événement d'orientation de l'appareil renvoie des données de rotation, y compris la quantité l'appareil est penché à l'avant vers l'arrière, d'un côté à l'autre et, si le téléphone ou l'ordinateur portable qui comporte une boussole, dans la direction vers laquelle l'appareil est orienté.

Utilisez les mouvements de l'appareil lorsque le mouvement actuel de l'appareil est nécessaire. La valeur de rotationRate est exprimée 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 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.

Rechercher de l'aide 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 à window Objet écoutant 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 concernant le rotation (en °/seconde) et accélération (en m/seconde2) de l'appareil, à ce moment précis. Certains appareils n'ont pas le matériel pour exclure l'effet de la gravité.

L'événement renvoie quatre propriétés, accelerationIncludingGravity, acceleration, qui exclut les effets 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]
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 le téléphone était tenu de manière à ce que l'écran soit perpendiculaire au au sol et était 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 route vers le ciel [0, 0, 0]. [0, 5, 0] [0, 14,81, 0]
Déplacement vers la droite uniquement [0, 0, 0]. [3, 0, 0]. [3, 9,81, 0]
En allant 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

Pour utiliser les événements de mouvement de l'appareil, vous pouvez calculer l'accélération maximale d'un objet. Par exemple, quelle est l'accélération maximale d'une personne sauter ?

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 "Aller" ! l'utilisateur est invité à sauter. Pendant ce temps, la page stocke les valeurs d'accélération maximales (et minimales) et après la saute, indique à l'utilisateur son accélération maximale.

Commentaires