54.1 L'orientation du téléphone (attitude)

Avant de se lancer dans le développement d'une application mobile qui réagit aux capteurs, prenons le temps de comprendre comment déterminer l'orientation du téléphone.

Axes par rapport au téléphone

Normalement, on illustre les axes X, Y et Z avec un téléphone debout.

• L'axe des X (rouge) traverse le téléphone de gauche à droite.
• L'axe des Y (vert) traverse le téléphone de bas en haut.
• L'axe des Z (bleu) traverse l'écran de l'arrière vers l'avant.

Pour facilement retenir la couleur de chaque axe, rappelez-vous qu'on a l'habitude de dire dans l'ordre XYZ et RVB donc X est rouge, Y est vert et Z est bleu.

Orientation

L'orientation (en anglais : attitude) permet de déterminer comment le téléphone est positionné.

Elle est définie à l'aide de trois valeurs qui empruntent des termes au monde nautique : le tangage, le roulis et la direction (anglais pitch, roll, yaw).

Les angles d'orientation sont plus faciles à comprendre avec le téléphone couché afin de visualiser les mêmes angles sur un bateau.

• Le tangage (pitch) est l'angle par rapport à l'axe qui traverse le téléphone de gauche à droite.
• Le roulis ou l'inclinaison (roll) est l'angle par rapport à l'axe longitudinal.
• La direction ou lacet (yaw) est l'angle par rapport à l'axe qui transperce l'écran.

Sens de la rotation positive

Pour savoir si l'angle est positif ou négatif, on peut s'aider du truc de la main droite.

On place le pouce de la main droite dans le sens positif de l'axe et les doigts indiquent le sens positif de la rotation.

Animation pour illustrer ces valeurs

Sur le site, de React Native Animated (je sais, on n'utilise pas ici cette bibliothèque mais c'est tout de même utile ;-)), une petite animation vous permet de bien visualiser les valeurs retournées par les différents capteurs lorsque le téléphone est manipulé : https://docs.swmansion.com/react-native-reanimated/docs/device/useAnimatedSensor/

Attention cependant : le sens du lacet (yaw) pourrait être différent de celui utilisé par iOS.

Pour plus d'information

« Axes de rotation d'un aéronef ». Wikipédia. https://fr.wikipedia.org/wiki/Axes_de_rotation_d%27un_a%C3%A9ronef