mozilla
Vos résultats de recherche

    Détecter l'orientation de l'appareil

    Cette fonction est expérimentale
    Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
    Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

    Résumé

    De plus en plus d'appareils connectés à Internet sont capable de déterminer leur orientation. C'est-à-dire qu'ils peuvent fournir des données indiquant des changements dans leur orientation par rapport à la gravité. En particulier les appareils portables comme les téléphones mobiles, peuvent utiliser cette information pour effectuer automatiquement une rotation de l'écran, afin de toujours proposer la meilleure disposition possible pour le contenu à afficher.

    Il existe deux événements JavaScript pour gérer l'orientation. Le premier est DeviceOrientationEvent, qui est envoyé quand l'accéléromètre détecte un changement d'orientation de l'appareil. En recevant et en analysant les données fournies par ces événements d'orientation, il est possible de répondre de manière interactive aux changements d'orientation et d'élévation causés par les mouvements imprimés à l'appareil par l'utilisateur.

    Le second événement est DeviceMotionEvent, qui est envoyé quand un changement d’accélération est ajouté. il est différent de DeviceOrientationEvent car il écoute les changements d'accélération par opposition à l'orientation. Parmi les capteurs capables de détecter DeviceMotionEvent on trouve les capteurs des ordinateurs portables utilisés pour protéger des chutes les périphériques de stockages. Ils sont communément présents dans les appareils mobiles (tablettes, téléphone intelligents).

    Traitement des événements d'orientation

    Tout ce dont vous avez besoin pour commencer à recevoir les changements d'orientation est d’écouter l’événement deviceorientation :

    window.addEventListener("deviceorientation", handleOrientation, true);
    

    Après l’enregistrement de votre gestionnaire d'événements (event listener en anglais), dans ce cas, une fonction JS appelée handleOrientation(), votre fonction d'écoute est appelée périodiquement pour récupérer les données de l'orientation mise à jour.

    L'événement d'orientation contient quatre valeurs :

    La fonction gérant l’événement pourrait ressembler à ceci :

    function handleOrientation(event) {
      var absolute = event.absolute;
      var alpha    = event.alpha;
      var beta     = event.beta;
      var gamma    = event.gamma;
    
      // Faites quelque chose avec les données acquises. ;)
    }
    

    Détail des valeurs d'orientation

    La valeur reportée pour chaque axe indique l'angle de rotation autour d'un axe donné, en référence à un système de coordonnées standard. Ces valeurs sont décrites de façon plus détaillée dans cet article Orientation et déplacement expliquée.

    • La valeur DeviceOrientationEvent.alpha représente le mouvement de l'appareil, autour de l'axe « z », en degrés sur une échelle de 0° à 360° ;
    • La valeur DeviceOrientationEvent.beta représente le mouvement de l'appareil autour de l'axe « y » en degrés, sur une échelle de -180° à 180°.  Cela représente le mouvement d'avant en arrière de l'appareil ;
    • La valeur DeviceOrientationEvent.gamma représente le mouvement de l'appareil autour de l'axe « x », exprimée en degrés sur une échelle de -90° à 90°. Cela représente le mouvement de gauche à droite de l'appareil.

    Exemple d'orientation

    Cet exemple fonctionne sur tout navigateur supportant l’événement deviceorientation et sur tout appareil capable de détecter son orientation.

    Imaginons une balle dans un jardin :

    <div class="jardin">
      <div class="balle"></div>
    </div>
    
    <pre class="resultat"></pre>
    

    Ce jardin fait 200 pixels de long (Oui c'est un « petit » jardin !), et la balle est au centre :

    .jardin {
      position: relative;
      width : 200px;
      height: 200px;
      border: 5px solid #CCC;
      border-radius: 10px;
    }
    
    .balle {
      position: absolute;
      top   : 90px;
      left  : 90px;
      width : 20px;
      height: 20px;
      background: green;
      border-radius: 100%;
    }
    

    Maintenant, on définit le déplacement de la balle en fonction de celui de l'appareil :

    var jardin = document.querySelector('.jardin'),
        balle = document.querySelector('.balle'),
        resultat = document.querySelector('.resultat'),
        maxX = jardin.clientWidth  - balle.clientWidth,
        maxY = jardin.clientHeight - balle.clientHeight;
    
    function handleOrientation(event) {
      var x = event.beta,  // En degré sur l'interval [-180,180].
          y = event.gamma; // En degré sur l'interval [-90,90].
    
      resultat.innerHTML  = "beta : " + x + "<br />";
      resultat.innerHTML += "gamma: " + y + "<br />";
    
      // Parce-que l'on ne veut pas avoir l'appareil à l'envers.
      // On restreint les valeurs de x à l'intervalle [-90,90].
      if (x >  90) { x =  90};
      if (x < -90) { x = -90};
      // Pour rendre le calcul plus simple.
      // On délimite l'intervalle de x et y sur [0, 180].
      x += 90;
      y += 90;
    
      // 10 est la moitié de la taille de la balle.
      // Cela centre le point de positionnement au centre de la balle.
    
      balle.style.top  = (maxX * x / 180 - 10) + "px";
      balle.style.left = (maxY * y / 180 - 10) + "px";
    }
    
    window.addEventListener('deviceorientation', handleOrientation);
    

    Et voici le résultat en temps réel :

    Attention : Chrome et Firefox ne gèrent pas les angles de la même façon, certaines directions sur les axes sont inversées.

    Traiter les événement de mouvement

    Les événements de mouvement gèrent l'orientation de la même façon à l'exception près qu’ils portent un nom d’événement différent : devicemotion

    window.addEventListener("devicemotion", handleMotion, true);
    

    Ce qui change réellement est l'information fournie par l'objet DeviceMotionEvent passée comme paramètre par la fonction HandleMotion.

    Les événements de mouvement contiennent quatre propriétés :

    Explication des valeurs de mouvement

    L'objet DeviceMotionEvent fourni aux développeurs Web des informations sur la vitesse de changement d'orientation et de position de l'appareil. Les changements rapportés sont fournis pour les trois axes (voir Orientation et déplacement expliquées pour les détails).

    Pour acceleration et accelerationIncludingGravity, Les axes correspondent à :

    • x : représente l'axe d'Ouest en Est ;
    • y : représente l'axe Sud vers Nord :
    • z : représente l'axe perpendiculaire au sol.

    Pour rotationRate, c'est un peu différent. L'information correspond à :

    • alpha : représente le ratio de rotation le long de l'axe perpendiculaire à l'écran (ou du clavier au bureau) ;
    • bêta : représente le ratio de rotation le long de l'axe allant de la gauche vers la droite de l'écran (ou du clavier au bureau) ;
    • gamma : représente le ratio de rotation le long de l'axe allant du bas vers le haut de l'écran (ou clavier vers le bureau).

    Au final, interval représente l'intervalle de temps, en millisecondes, pour les données générées par l'appareil.

    Spécifications

    Spécification Statut Commentaires
    Device Orientation Events Working Draft Spécification initiale.

    Compatibilité des navigateurs

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    DeviceOrientationEvent 7.0 3.6[1]
    6
    ? ? ?
    DeviceMotionEvent (Oui) 6 ? ? ?
    Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    DeviceOrientationEvent 3.0 3.6[1]
    6
    Pas de support Pas de support 4.2
    DeviceMotionEvent (Oui) 6 ? ? ?

    Notes d'implementation pour Gecko 

    1. Firefox 3.6, 4, et 5 supportent mozOrientation au lieu de l'événement standard DeviceOrientationEvent.

    Voir aussi

    Étiquettes et contributeurs liés au document

    Contributors to this page: darnuria, achraf, Fredchat, tregagnon, FredB
    Dernière mise à jour par : tregagnon,