Une introduction à l'API Orientation du périphérique

introduction

La majorité des appareils mobiles modernes sont équipés d’accéléromètres, de gyroscopes et de compas. Dans mon article précédent sur l'API de géolocalisation, je décrivais comment les développeurs peuvent utiliser les données fournies par l'API de géolocalisation pour améliorer l'expérience utilisateur. Une autre API intéressante est l’API Orientation des périphériques, qui est au centre de ce tutoriel..

La détection de l'orientation d'un appareil est utile pour une large gamme d'applications, des applications de navigation aux jeux. Avez-vous déjà joué à un jeu de course sur un appareil mobile qui vous permet de contrôler la voiture en inclinant l'appareil?

Une autre application de l'API consiste à mettre à jour l'interface utilisateur d'une application lorsque l'orientation de l'appareil change pour offrir à l'utilisateur la meilleure expérience possible en tirant parti de tout l'écran. Si vous êtes un fan de YouTube, alors vous en avez certainement profité..

Dans cet article, je vais vous présenter l’API Orientation des appareils, en expliquant le type de données qu’elle peut nous offrir et la façon de les exploiter dans vos applications..

1. Qu'est-ce que c'est?

Pour citer la spécification W3C de l'API Orientation du périphérique, l'API "[…] définit plusieurs nouveaux événements DOM fournissant des informations sur l'orientation et le mouvement physiques d'un périphérique d'hébergement." Les données fournies par l'API proviennent de diverses sources, telles que le gyroscope du périphérique, l'accéléromètre et le compas. Cela diffère d'un appareil à l'autre, selon les capteurs disponibles.

Cette API est un brouillon de travail du W3C, ce qui signifie que la spécification n'est pas stable et que nous pouvons nous attendre à des changements dans le futur. Il convient également de noter que cette API présente des incohérences connues dans plusieurs navigateurs et sur plusieurs systèmes d'exploitation. Par exemple, les implémentations sur Chrome et Opera, basées sur le moteur de rendu Blink, présentent un problème de compatibilité avec Windows 8 pour dispositif d'orientation un événement. Un autre exemple est que le intervalle propriété n'est pas constante dans Opera Mobile.

2. mise en œuvre

L'API expose trois événements fournissant des informations sur l'orientation du périphérique:

dispositif d'orientation
devicemotion
étalonnage compas

Ces événements sont tirés sur le la fenêtre objet, ce qui signifie que nous devons attacher un gestionnaire à la la fenêtre objet. Jetons un coup d'oeil à chacun de ces événements.

`dispositif d'orientation`

le dispositif d'orientation L’événement est déclenché lorsque l’accéléromètre détecte un changement d’orientation du périphérique. Comme je l’ai dit plus tôt, nous pouvons écouter cet événement et réagir à tout changement en attachant un gestionnaire d’événements à la fenêtre objet. Lorsque le gestionnaire d'événement est appelé, il reçoit un argument de type. DeviceOrientationEvent, qui contient quatre propriétés:

alpha est l'angle autour de l'axe des z. Sa valeur varie de 0 à 360 degrés. Lorsque le haut de l'appareil pointe vers le nord géographique, la valeur de cette propriété est 0.
bêta est l'angle autour de l'axe des x. Sa valeur va de -180 à 180 degrés. Lorsque l'appareil est parallèle à la surface de la Terre, la valeur de cette propriété est 0.
gamma est l'angle autour de l'axe des ordonnées. Ses valeurs vont de -90 à 90 degrés. Lorsque le périphérique est parallèle à la surface de la Terre, la valeur de cette propriété est 0.
absolu spécifie si le périphérique fournit des données d'orientation relatives au système de coordonnées de la Terre, auquel cas sa valeur est vrai, ou à un système de coordonnées arbitraire.

L'illustration suivante, extraite de la spécification officielle, montre les axes x, y et z mentionnés par rapport au périphérique..

`devicemotion`

le devicemotion L'événement est déclenché chaque fois que le périphérique accélère ou décélère. Vous pouvez écouter cet événement comme nous l’avons fait pour le dispositif d'orientation un événement. Lorsque le gestionnaire d'événement est appelé, il reçoit un argument de type. DeviceMotionEvent, qui a quatre propriétés:

accélération spécifie l'accélération du dispositif par rapport au repère Terre sur les axes x, y et z, accessible par son X, y, et z Propriétés. Les valeurs sont exprimées en m / s².
accélérationY compris la gravité détient les mêmes valeurs que le accélération propriété, mais il prend en compte la gravité de la Terre. Les valeurs de cette propriété doivent être utilisées dans les cas où le matériel du périphérique ne sait pas comment supprimer la gravité des données d'accélération. En fait, dans de tels cas, le accélération la propriété ne doit pas être fournie par l'agent utilisateur.
taux de rotation spécifie le taux de rotation de l'appareil autour de chacun de ses axes, en degrés par seconde. Nous pouvons accéder aux valeurs individuelles de taux de rotation à travers ses alpha, bêta, et gamma Propriétés.
intervalle fournit l'intervalle auquel les données sont obtenues. Cette valeur ne doit pas changer une fois définie. Il est exprimé en millisecondes.

`étalonnage compas`

Cet événement est déclenché lorsque l'agent utilisateur détermine que la boussole nécessite un étalonnage. La spécification indique également que "les agents utilisateurs ne doivent déclencher l’événement que si le calibrage de la boussole augmente la précision des données fournies par le logiciel." dispositif d'orientation "Cet événement doit être utilisé pour informer l'utilisateur que la boussole doit être étalonnée. Il doit également indiquer à l'utilisateur comment procéder..

3. Détecter le support

Pour détecter si le navigateur ou l'agent utilisateur prend en charge l'un des deux premiers événements, dispositif d'orientation et devicemotion, est aussi simple que d'inclure une déclaration conditionnelle triviale. Jetez un coup d’œil à l’extrait de code suivant dans lequel nous détectons la prise en charge du dispositif d'orientation un événement:

if (window.DeviceOrientationEvent) // Nous pouvons écouter les changements d'orientation de l'appareil… else // Non pris en charge

Pour tester le étalonnage compas événement, nous utilisons l'extrait de code suivant:

if (! ('oncompassneedscalibration' dans la fenêtre)) // Evénement pris en charge else // Evénement non pris en charge

4. Support du navigateur

Même si la prise en charge de l'API Orientation des périphériques est bonne, nous devons garder quelques points à l'esprit lorsque nous travaillons avec l'API. Outre les mises en garde mentionnées dans l’introduction, le absolu la propriété est indéfini dans Safari mobile.

Cependant, le vrai problème est que tous les navigateurs prenant en charge l’API d’orientation de périphérique ne le prennent en charge que partiellement. En fait, à l'heure où nous écrivons, très peu de navigateurs supportent la étalonnage compas un événement. Exécutez l'extrait de code ci-dessus dans Chrome ou Firefox pour illustrer le problème..

Dans cet esprit, les navigateurs prenant en charge l’API Orientation des appareils sont Chrome 7+, Firefox 6+, Opera 15+ et Internet Explorer 11. La prise en charge par les navigateurs mobiles est encore meilleure. En plus de celles que j'ai déjà mentionnées, l'API est également prise en charge par les navigateurs BlackBerry 10, Opera Mobile 12+, Mobile Safari 4.2+ et Chrome 3+ sur Android..

Pour une image actualisée et précise de la prise en charge de l’API Orientation des périphériques, je vous recommande de visiter Puis-je utiliser… .

5. Démo

Nous savons maintenant ce dont nous avons besoin pour créer une application de démonstration utilisant l’API d’orientation du périphérique. Le but de cette démonstration est de créer un cube à l'aide de HTML et de CSS simples et de le faire pivoter au fur et à mesure que l'orientation du périphérique change..

Nous afficherons également les informations extraites de l'API, qui indiquent le type de données que nous récupérons à partir de l'API Orientation du périphérique. Nous affichons également les informations en texte brut, car certains navigateurs peuvent prendre en charge l’API Orientation du périphérique mais pas les propriétés CSS pour restituer le cube. C'est le cas pour Opera Mobile, par exemple.

Parce que nous savons que tous les navigateurs ne prennent pas en charge l’API, nous testons également la prise en charge de chaque fonctionnalité de l’API et l’affiche à l’utilisateur..

Le code source de l'application de démonstration est présenté ci-dessous, mais vous pouvez également le voir en action..

      Démo de l'API Orientation des périphériques par Aurelio De Rosa    API d'orientation de périphérique
 événement Deviceorientation non pris en charge événement devicemotion non pris en charge événement compassneedscalibration non pris en charge   1
 2
 3
 4
 5
 6
 
   Coordonnées: (nul, nul, nul) 
 Position absolue? indisponible 
 
   Accélération: (nul, nul, nul) Mme² 
  Accélération y compris gravité: (nul, nul, nul) Mme² 
  Taux de rotation: (nul, nul, nul) 
  Intervalle: 0 millisecondes 
 
 
  Démo créée par Aurelio De Rosa (@AurelioDeRosa)

Conclusion

Dans cet article, nous avons exploré l'API Orientation du périphérique en examinant ses fonctionnalités et ses cas d'utilisation potentiels. La prise en charge de l'API n'est pas excellente au moment de la rédaction, mais je suis sûr que vous êtes d'accord pour dire que cela ouvre de nombreuses possibilités aux développeurs mobiles, en particulier aux développeurs de jeux. N'oubliez pas de jouer avec la démo pour voir l'API en action.

Code