Détecter l'orientation de l'appareil

  • Raccourci de la révision : WebAPI/Detecting_device_orientation
  • Titre de la révision : Detecting device orientation
  • ID de la révision : 435319
  • Créé :
  • Créateur : darnuria
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{SeeCompatTable}}

Sommaire

De plus en plus d'appareils connecter à internet son capables de déterminer leur orientation. C'est à dire qu'ils peuvent communiquer des données indiquant des changements de leur orientation par rapport à la force de 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 plus grande disposition possible pour le contenu à afficher.

Il existe deux évènements JavaScript pour gérer l'orientation :  

  • Le premier est {{ domxref("DeviceOrientationEvent") }}, il est envoyer quand changement d'orientation est détecté.
  • Le second est {{ domxref("DeviceMotionEvent") }}, il est envoyer quand un changement d’accélération est détecté.

L'évent {{ domxref("DeviceMotionEvent") }} différé de {{ domxref("DeviceOrientationEvent") }} car il écoute les changements d'accélération par opposition à l'orientation. Les capteurs  capables de détecter {{ domxref("DeviceMotionEvent") }}, incluent les capteurs des ordinateurs portables utilisés pour protéger des chutes les périphériques de stockages. Les capteurs capables de géré {{ domxref("DeviceOrientationEvent") }} sont communément présent dans les appareils mobiles(tablettes, smartphones).

En recevant et en traitant des données reporté par ces évènements d'orientation il est possible d’interagir  en réponse aux changements d'orientation et d'élévation causée par le déplacement de l'appareil causé par l'utilisateur.

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  {{ event("deviceorientation") }} :

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

Après l'enregistrement de l'écoute de évènement (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'évent d'orientation contient quatre valeurs :

  • {{ domxref("DeviceOrientationEvent.absolute") }}
  • {{ domxref("DeviceOrientationEvent.alpha") }}
  • {{ domxref("DeviceOrientationEvent.beta") }}
  • {{ domxref("DeviceOrientationEvent.gamma") }}

La fonction gérant l’évènement pourrais 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é 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écrits de façon plus détaillée dans cet article Orientation et déplacement expliquée

  • La valeur {{ domxref("DeviceOrientationEvent.alpha") }} représente le mouvement de l'appareil, autour de l'axe "z", en dégrées sur une échelle de 0° à 360°.
  • La valeur {{ domxref("DeviceOrientationEvent.beta") }} représente le mouvement de l'appareil autour de l'axe "y" en dégrées, sur une échelle de -180° to 180°.  Cela représente le mouvement d'avant arrière de l'appareil.
  • La valeur {{ domxref("DeviceOrientationEvent.gamma") }} représente le mouvement de l'appareil autour de l'axe "x", exprimée en dégrées sur une échelle de -90° à 90°. Cela représente le mouvement de gauche à droite de l'appareil.

Exemple d'orientation

Cet exemple fonctionnant sur tout navigateur supportant : {{event("deviceorientation")}} l’évènement et sur tout appareil capable de détecter son orientation.

Imaginons une balle dans un jardin:

<div class="garden"> <!-- Le Jardin -->
  <div class="ball"></div> <!-- Le balle -->
</div>

<pre class="output"></pre>

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

.garden {
  position: relative;
  width : 200px;
  height: 200px;
  border: 5px solid #CCC;
  border-radius: 10px;
}

.ball {
  position: absolute;
  top   : 90px;
  left  : 90px;
  width : 20px;
  height: 20px;
  background: green;
  border-radius: 100%;
}

Maintenant, si l'ont déplace l'appareil, la balle, en fonction de ce déplacement :

var ball   = document.querySelector('.ball'),
    garden = document.querySelector('.garden'),
    output = document.querySelector('.output'),
    maxX = garden.clientWidth  - ball.clientWidth,
    maxY = garden.clientHeight - ball.clientHeight;

function handleOrientation(event) {
  var x = event.beta,  // En dégrée sur l'interval [-180,180].
      y = event.gamma; // En dégrée sur l'interval [-90,90].

  output.innerHTML  = "beta : " + x + "<br />";
  output.innerHTML += "gamma: " + y + "<br />";

  // Parce-que l'ont ne veux 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 moiter de la taille de la balle.
  // Cela centre le point de positionnement au centre de la balle.

  ball.style.top  = (maxX * x / 180 - 10) + "px";
  ball.style.left = (maxY * y / 180 - 10) + "px";
}

window.addEventListener('deviceorientation', handleOrientation);

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

{{ EmbedLiveSample('Orientation_example', '230', '260') }}

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 : {{ event("devicemotion") }}

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

Ce qui change réellement est l'information fourni par l'objet {{ domxref("DeviceMotionEvent") }} passé comme paramètre par la fonction HandleMotion.

Les évènement de mouvement contient quatre propriétés :

  • {{ domxref("DeviceMotionEvent.acceleration") }}
  • {{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}
  • {{ domxref("DeviceMotionEvent.rotationRate") }}
  • {{ domxref("DeviceMotionEvent.interval") }}

Explication des Valeurs de mouvement

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

Pour {{domxref("DeviceMotionEvent.acceleration","acceleration")}} et {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}, Les axes correspondent à :

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

Pour {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}, c'est un peu différente l'information correspond a :

  • alpha: Représente le ratio de rotation le long de l'axe perpendiculaire a l'écran (ou du clavier au bureau).
  • beta: 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, {{domxref("DeviceMotionEvent.interval","interval")}} représente l'intervalle de temps, en  millisecondes, pour les données générées par l'appareil.

Spécifications

Spécification Statuts Commentaire
{{SpecName('Device Orientation')}} {{Spec2('Device Orientation')}} Spécification Initiale.

Compatibilité entre les Navigateurs

{{ CompatibilityTable() }}

Technologie Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
{{domxref("DeviceOrientationEvent")}} 7.0 3.6[1]
6
{{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
{{domxref("DeviceMotionEvent")}} {{ CompatVersionUnknown() }} 6 {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Technologie Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
{{domxref("DeviceOrientationEvent")}} 3.0 3.6[1]
6
{{ CompatNo() }} {{ CompatNo() }} 4.2
{{domxref("DeviceMotionEvent")}} {{ CompatVersionUnknown() }} 6 {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Notes d'implementation pour Gecko 

  1. Firefox 3.6, 4, et 5 supportent mozOrientation au lieu de l'événement standard {{domxref("DeviceOrientationEvent")}}.

Voir aussi

Source de la révision

<p>{{SeeCompatTable}}</p>
<h2 id="Sommaire">Sommaire</h2>
<p>De plus en plus d'appareils connecter à internet son capables de déterminer leur <strong>orientation</strong>. <span class="long_text" id="result_box" lang="fr"><span class="hps">C'est à dire qu'ils</span> <span class="hps">peuvent</span> <span class="hps">communiquer des données</span> <span class="hps">indiquant des changements</span> <span class="hps">de leur </span><span class="hps">orientation par</span> <span class="hps">rapport à</span> <span class="hps">la force de gravité</span><span>. En particulier les appareils</span></span> portables comme les téléphones mobiles, peuvent utiliser cette information pour effectuer automatiquement une rotation de l'écran, afin de toujours proposer la plus grande disposition possible pour le contenu à afficher.</p>
<p>Il existe deux évènements JavaScript pour gérer l'orientation : &nbsp;</p>
<ul>
  <li>Le premier est {{ domxref("DeviceOrientationEvent") }}, il est envoyer quand changement d'orientation est détecté.</li>
  <li>Le second est {{ domxref("DeviceMotionEvent") }}, il est envoyer quand un changement d’accélération est détecté.</li>
</ul>
<p>L'évent {{ domxref("DeviceMotionEvent") }} différé de {{ domxref("DeviceOrientationEvent") }} car il écoute les changements d'accélération <span class="long_text" id="result_box" lang="fr"><span class="hps">par opposition</span> <span class="hps">à l'orientation</span><span>. Les</span></span> <span class="long_text short_text" id="result_box" lang="fr"><span class="hps">capteurs</span></span>&nbsp; capables de détecter {{ domxref("DeviceMotionEvent") }}, incluent les capteurs des ordinateurs portables utilisés pour protéger des chutes les périphériques de stockages. Les capteurs capables de géré {{ domxref("DeviceOrientationEvent") }} sont communément présent dans les appareils mobiles(tablettes, smartphones).</p>
<p>En recevant et en traitant des données reporté par ces évènements d'orientation il est possible d’interagir&nbsp; en réponse aux changements d'orientation et d'élévation causée par le déplacement de l'appareil causé par l'utilisateur.</p>
<h2 id="Traitement_des_.C3.A9v.C3.A8nements_d'orientation">Traitement des évènements d'orientation</h2>
<p>Tout ce dont vous avez besoin pour commencer à recevoir les changements d'orientation est d’écouter l’évènement&nbsp; {{ event("deviceorientation") }} :</p>
<pre class="brush: js">
window.addEventListener("deviceorientation", handleOrientation, true);
</pre>
<p>Après l'enregistrement de l'écoute de évènement (dans ce cas, une fonction JS appelée handleOrientation()),&nbsp; votre fonction d'écoute est appelée périodiquement pour récupérer les données de l'orientation mise à jour.</p>
<p>L'évent d'orientation contient quatre valeurs :</p>
<ul>
  <li>{{ domxref("DeviceOrientationEvent.absolute") }}</li>
  <li>{{ domxref("DeviceOrientationEvent.alpha") }}</li>
  <li>{{ domxref("DeviceOrientationEvent.beta") }}</li>
  <li>{{ domxref("DeviceOrientationEvent.gamma") }}</li>
</ul>
<p>La fonction gérant l’évènement pourrais ressembler à ceci :</p>
<pre class="brush: js">
function handleOrientation(event)&nbsp;{
&nbsp; var absolute = event.absolute;
&nbsp; var alpha    = event.alpha;
&nbsp; var beta     = event.beta;
&nbsp; var gamma    = event.gamma;

&nbsp; // Faites quelque chose avec les données acquises. ;)
}
</pre>
<h3 id="D.C3.A9tail_des_valeurs_d'orientation">Détail des valeurs d'orientation</h3>
<p>La valeur reporté pour chaque axe indique l'angle de rotation autour d'un axe donné en référence à un <span class="long_text" id="result_box" lang="fr"><span class="hps">système de coordonnées</span> <span class="hps">standard. Ces Valeurs sont décrits de façon plus détaillée dans cet article</span></span> <a href="/en-US/DOM/Orientation_and_motion_data_explained" title="Orientation et déplacement expliquée">Orientation et déplacement expliquée</a>.&nbsp;</p>
<ul>
  <li>La valeur {{ domxref("DeviceOrientationEvent.alpha") }} représente le mouvement de l'appareil, autour de l'axe "z", en dégrées sur une échelle de 0° à 360°.</li>
  <li>La valeur {{ domxref("DeviceOrientationEvent.beta") }} représente le mouvement de l'appareil autour de l'axe "y" en dégrées, sur une échelle de -180° to 180°.&nbsp; Cela représente le mouvement d'avant arrière de l'appareil.</li>
  <li>La valeur {{ domxref("DeviceOrientationEvent.gamma") }} représente le mouvement de l'appareil autour de l'axe "x", exprimée en dégrées sur une échelle de -90° à 90°. Cela représente le mouvement de gauche à droite de l'appareil.</li>
</ul>
<h3 id="Orientation_example">Exemple d'orientation</h3>
<p>Cet exemple fonctionnant sur tout navigateur supportant : {{event("deviceorientation")}} l’évènement et sur tout appareil capable de détecter son orientation.</p>
<p>Imaginons une balle dans un jardin:</p>
<pre class="brush: html">
&lt;div class="garden"&gt; &lt;!-- Le Jardin --&gt;
  &lt;div class="ball"&gt;&lt;/div&gt; &lt;!-- Le balle --&gt;
&lt;/div&gt;

&lt;pre class="output"&gt;&lt;/pre&gt;
</pre>
<p>Ce jardin fait 200 pixels de long(Oui c'est un "petit" jardin!), et la balle est au centre:</p>
<pre class="brush: css">
.garden {
  position: relative;
  width : 200px;
  height: 200px;
  border: 5px solid #CCC;
  border-radius: 10px;
}

.ball {
  position: absolute;
  top   : 90px;
  left  : 90px;
  width : 20px;
  height: 20px;
  background: green;
  border-radius: 100%;
}
</pre>
<p>Maintenant, si l'ont déplace l'appareil, la balle, en fonction de ce déplacement :</p>
<pre class="brush: js">
var ball   = document.querySelector('.ball'),
    garden = document.querySelector('.garden'),
    output = document.querySelector('.output'),
    maxX = garden.clientWidth  - ball.clientWidth,
    maxY = garden.clientHeight - ball.clientHeight;

function handleOrientation(event) {
  var x = event.beta,  // En dégrée sur l'interval [-180,180].
      y = event.gamma; // En dégrée sur l'interval [-90,90].

  output.innerHTML  = "beta : " + x + "&lt;br /&gt;";
  output.innerHTML += "gamma: " + y + "&lt;br /&gt;";

  // Parce-que l'ont ne veux pas avoir l'appareil à l'envers.
  // On restreint les valeurs de x à l'intervalle [-90,90].
  if (x &gt;  90) { x =  90};
  if (x &lt; -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 moiter de la taille de la balle.
  // Cela centre le point de positionnement au centre de la balle.

  ball.style.top  = (maxX * x / 180 - 10) + "px";
  ball.style.left = (maxY * y / 180 - 10) + "px";
}

window.addEventListener('deviceorientation', handleOrientation);
</pre>
<p>Et voici le résultat en temps réel :</p>
<div>
  {{ EmbedLiveSample('Orientation_example', '230', '260') }}</div>
<div class="warning">
  <p><strong>Attention :</strong> Chrome et Firefox ne gèrent pas les angles de la même façon, certaines directions sur les axes sont inversées.</p>
</div>
<h2 id="Processing_motion_events">Traiter les évènement de mouvement</h2>
<p>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 : {{ event("devicemotion") }}</p>
<pre class="brush: js">
window.addEventListener("devicemotion", <em>handleMotion</em>, true);</pre>
<p>Ce qui change réellement est l'information fourni par l'objet {{ domxref("DeviceMotionEvent") }} passé comme paramètre par la fonction <em>HandleMotion</em>.</p>
<p>Les évènement de mouvement contient quatre propriétés :</p>
<ul>
  <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li>
  <li>{{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}</li>
  <li>{{ domxref("DeviceMotionEvent.rotationRate") }}</li>
  <li>{{ domxref("DeviceMotionEvent.interval") }}</li>
</ul>
<h3 id="Motion_values_explained">Explication des Valeurs de mouvement</h3>
<p>L'objet {{ domxref("DeviceMotionEvent") }} fourni aux développeurs Web des information sur la vitesse de changement d'orientation et de position de l'appareil. Les changements rapportées sont fourni pour les trois axes (voir <a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Orientation et déplacement expliquées</a> pour les détails).</p>
<p>Pour {{domxref("DeviceMotionEvent.acceleration","acceleration")}} et {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}, Les axes correspondent à :</p>
<ul>
  <li><code>x</code>: Représente l'axe d'Ouest en Est.</li>
  <li><code>y</code>: Représente l'axe Sud en Nord.</li>
  <li><code>z</code>: Représente l'axe perpendiculaire au sol.</li>
</ul>
<p>Pour {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}, c'est un peu différente l'information correspond a :</p>
<ul>
  <li><code>alpha</code>: Représente le ratio de rotation le long de l'axe perpendiculaire a l'écran (ou du clavier au bureau).</li>
  <li><code>beta</code>: 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).</li>
  <li><code>gamma</code>: 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)</li>
</ul>
<p>Au final, {{domxref("DeviceMotionEvent.interval","interval")}} représente l'intervalle de temps, en&nbsp; millisecondes, pour les données générées par l'appareil.</p>
<h2 id="Specifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">Statuts</th>
      <th scope="col">Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('Device Orientation')}}</td>
      <td>{{Spec2('Device Orientation')}}</td>
      <td>Spécification Initiale.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Compatibilité entre les Navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Technologie</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>{{domxref("DeviceOrientationEvent")}}</td>
        <td>7.0</td>
        <td>3.6<sup>[1]</sup><br />
          6</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>{{domxref("DeviceMotionEvent")}}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>6</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Technologie</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>{{domxref("DeviceOrientationEvent")}}</td>
        <td>3.0</td>
        <td>3.6<sup>[1]</sup><br />
          6</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>4.2</td>
      </tr>
      <tr>
        <td>{{domxref("DeviceMotionEvent")}}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>6</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Gecko_implementation_notes">Notes d'implementation pour Gecko&nbsp;</h3>
<ol>
  <li>Firefox 3.6, 4, et 5 supportent <a href="/en-US/DOM/MozOrientation" title="MozOrientation">mozOrientation </a>au lieu de l'événement standard {{domxref("DeviceOrientationEvent")}}.</li>
</ol>
<h2 id="See_also">Voir aussi</h2>
<ul>
  <li>{{domxref("DeviceOrientationEvent")}}</li>
  <li>{{domxref("DeviceMotionEvent")}}</li>
  <li>The legacy <code><a href="/en-US/DOM/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a></code> event.</li>
  <li><a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li>
  <li><a href="/en-US/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li>
</ul>
Revenir à cette révision