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 : 435299
  • 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") }} event:

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", répresenté en dégrées sur une échelle de -90° to 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 detecter 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 />";

  // Parceque l'ont ne veux pas avoir l'apareil à l'envers.
  // On restrain les valeurs de x a l'interval [-90,90].
  if (x >  90) { x =  90};
  if (x < -90) { x = -90};
  // Pour rendre le calcul plus simple.
  // On delimite l'interval de x et y sur [0, 180].
  x += 90;
  y += 90;

  // 10 est la moitier de la taille de la balle.
  // Cela centre le point sur le centre de la balle.

  // It center the positionning point to the center of the ball
  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 directections 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 retourné par l'objet {{ domxref("DeviceMotionEvent") }} object pass as parameter of the HandleMotion function.

The motion event contains four properties:

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

Motion values explained

The {{ domxref("DeviceMotionEvent") }} objects provide web developers with information about the speed of changes for the device's position and orientation. The changes are provided along three axis (see Orientation and motion data explained for details).

For {{domxref("DeviceMotionEvent.acceleration","acceleration")}} and {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}, those axis correspond to:

  • x: It represents the axis from West to East
  • y: It represents the axis from South to North
  • z: It represents the axis perpendicular to the ground

For {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}, it's a bit different, the information correspond to:

  • alpha: It represents a rotation rate along the axis perpendicular to the screen (or keyboard for desktop)
  • beta: It represents a rotation rate along the axis going from left to right of the plane of the screen (or keyboard for desktop)
  • gamma: It represents a rotation rate along the axis going from bottom to top of the plane of the screen (or keyboard for desktop)

Finaly, {{domxref("DeviceMotionEvent.interval","interval")}} represents the interval of time, in milliseconds, at which data are obtain from the device.

Specifications

Specification Status Comment
{{SpecName('Device Orientation')}} {{Spec2('Device Orientation')}} Initial specification.

Browser compatibility

{{ CompatibilityTable() }}

Feature 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() }}
Feature 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() }}

Gecko implementation notes

  1. Firefox 3.6, 4, and 5 supported mozOrientation versus the standard {{domxref("DeviceOrientationEvent")}} event

See also

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") }} event:</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", répresenté en dégrées sur une échelle de -90° to 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 detecter 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;";

  // Parceque l'ont ne veux pas avoir l'apareil à l'envers.
  // On restrain les valeurs de x a l'interval [-90,90].
  if (x &gt;  90) { x =  90};
  if (x &lt; -90) { x = -90};
  // Pour rendre le calcul plus simple.
  // On delimite l'interval de x et y sur [0, 180].
  x += 90;
  y += 90;

  // 10 est la moitier de la taille de la balle.
  // Cela centre le point sur le centre de la balle.

  // It center the positionning point to the center of the ball
  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 directections 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 retourné par l'objet {{ domxref("DeviceMotionEvent") }} object pass as parameter of the <em>HandleMotion</em> function.</p>
<p>The motion event contains four properties:</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">Motion values explained</h3>
<p>The {{ domxref("DeviceMotionEvent") }} objects provide web developers with information about the speed of changes for the device's position and orientation. The changes are provided along three axis (see <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 and motion data explained</a> for details).</p>
<p>For {{domxref("DeviceMotionEvent.acceleration","acceleration")}} and {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}, those axis correspond to:</p>
<ul>
  <li><code>x</code>: It represents the axis from West to East</li>
  <li><code>y</code>: It represents the axis from South to North</li>
  <li><code>z</code>: It represents the axis perpendicular to the ground</li>
</ul>
<p>For {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}, it's a bit different, the information correspond to:</p>
<ul>
  <li><code>alpha</code>: It represents a rotation rate along the axis perpendicular to the screen (or keyboard for desktop)</li>
  <li><code>beta</code>: It represents a rotation rate along the axis going from left to right of the plane of the screen (or keyboard for desktop)</li>
  <li><code>gamma</code>: It represents a rotation rate along the axis going from bottom to top of the plane of the screen (or keyboard for desktop)</li>
</ul>
<p>Finaly, {{domxref("DeviceMotionEvent.interval","interval")}} represents the interval of time, in milliseconds, at which data are obtain from the device.</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('Device Orientation')}}</td>
      <td>{{Spec2('Device Orientation')}}</td>
      <td>Initial specification.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</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>Feature</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">Gecko implementation notes</h3>
<ol>
  <li>Firefox 3.6, 4, and 5 supported <a href="/en-US/DOM/MozOrientation" title="MozOrientation">mozOrientation </a>versus the standard {{domxref("DeviceOrientationEvent")}} event</li>
</ol>
<h2 id="See_also">See also</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