mozilla

Comparaison de révisions

Détecter l'orientation de l'appareil

Changer de révision

Révision 435837 :

Révision 435837 par FredB le

Révision 435909 :

Révision 435909 par Fredchat le

Titre :
Detecting device orientation
Détecter l'orientation de l'appareil
Identifiant d'URL :
WebAPI/Detecting_device_orientation
WebAPI/Detecting_device_orientation
Étiquettes :
"Orientation", "Motion", "Firefox OS", "B2G", "Mobile", "WebAPI", "Device Orientation", "Orientation", "Motion", "Firefox OS", "B2G", "Mobile", "WebAPI", "Device Orientation"
"Orientation", "Motion", "Firefox OS", "B2G", "Mobile", "WebAPI", "Device Orientation", "Orientation", "Motion", "Firefox OS", "B2G", "Mobile", "WebAPI", "Device Orientation"
Contenu :

Révision 435837
Révision 435909
n14      De plus en plus d'appareils connectés à Internet sont capabn14      De plus en plus d'appareils connectés à Internet sont capab
>le de déterminer leur <strong>orientation</strong>. <span class=">le de déterminer leur <strong>orientation</strong>. C'est-à-dire 
>long_text" id="result_box" lang="fr"><span class="hps">C'est-à-di>qu'ils peuvent fournir des données indiquant des changements dans
>re qu'ils</span> <span class="hps">peuvent</span> <span class="hp> leur orientation par rapport à la gravité. En particulier les ap
>s">communiquer des données</span> <span class="hps">indiquant des>pareils portables comme les téléphones mobiles, peuvent utiliser 
> changements</span> <span class="hps">de leur</span> <span class=>cette information pour effectuer automatiquement une rotation de 
>"hps">orientation par</span> <span class="hps">rapport à</span> <>l'écran, afin de toujours proposer la meilleure disposition possi
>span class="hps">la force de gravité</span><span>. En particulier>ble pour le contenu à afficher.
> les appareils</span></span> portables comme les téléphones mobil 
>es, peuvent utiliser cette information pour effectuer automatique 
>ment une rotation de l'écran, afin de toujours proposer la plus g 
>rande disposition possible pour le contenu à afficher. 
15    </p>
16    <p>15    </p>
17      Il existe deux évènements JavaScript pour gérer l'orientati
>on : &nbsp; 
18    </p>16    <p>
19    <ul>17      Il existe deux événements JavaScript pour gérer l'orientati
 >on. Le premier est {{domxref("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
 >.
20      <li>Le premier est {{ domxref("DeviceOrientationEvent") }},
> qui est envoyé quand changement d'orientation est détecté. 
21      </li>
22      <li>Le second est {{ domxref("DeviceMotionEvent") }}, qui e
>st envoyé quand un changement d’accélération est détecté. 
23      </li>
24    </ul>
25    <p>18    </p>
26      L'évènement {{ domxref("DeviceMotionEvent") }} est différen
>t de {{ domxref("DeviceOrientationEvent") }} car il écoute les ch 
>angements d'accélération <span class="long_text" id="result_box"  
>lang="fr"><span class="hps">par opposition</span> <span class="hp 
>s">à l'orientation</span><span>. Parmi les</span></span> <span cl 
>ass="long_text short_text" id="result_box" lang="fr"><span class= 
>"hps">capteurs</span></span> capables de détecter {{ domxref("Dev 
>iceMotionEvent") }} on trouve les capteurs des ordinateurs portab 
>les utilisés pour protéger des chutes les périphériques de stocka 
>ges. Les capteurs capables de gérer {{ domxref("DeviceOrientation 
>Event") }} sont communément présents dans les appareils mobiles(t 
>ablettes, téléphone intelligents). 
27    </p>19    <p>
20      Le second événement est {{domxref("DeviceMotionEvent")}}, q
 >ui est envoyé quand un changement d’accélération est ajouté. il e
 >st différent de {{domxref("DeviceOrientationEvent")}} car il écou
 >te les changements d'accélération par opposition à l'orientation.
 > Parmi les capteurs capables de détecter {{domxref("DeviceMotionE
 >vent")}} on trouve les capteurs des ordinateurs portables utilisé
 >s pour protéger des chutes les périphériques de stockages. Ils so
 >nt communément présents dans les appareils mobiles (tablettes, té
 >léphone intelligents).
28    <p>21    </p>
29      En recevant et en traitant des données reportées 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éplaceme 
>nt de l'appareil causé par l'utilisateur. 
30    </p>
31    <h2 id="Traitement_des_.C3.A9v.C3.A8nements_d'orientation">22    <h2 id="Traitement_des_.C3.A9v.C3.A9nements_d'orientation">
32      Traitement des évènements d'orientation23      Traitement des événements d'orientation
33    </h2>
34    <p>24    </h2>
25    <p>
35      Tout ce dont vous avez besoin pour commencer à recevoir les26      Tout ce dont vous avez besoin pour commencer à recevoir les
> changements d'orientation est d’écouter l’évènement&nbsp; {{ eve> changements d'orientation est d’écouter l’événement {{ event("de
>nt("deviceorientation") }} :>viceorientation") }}&nbsp;:
n41      Après enregistré votre « écouteur » d'évènements (<em>eventn32      Après l’enregistrement de votre «&nbsp;écouteur&nbsp;» d'év
> listener</em>) (dans ce casune fonction JS appelée handleOrien>énements (<em>event listener</em> en anglais), dans ce cas, une f
>tation()), votre fonction d'écoute est appelée périodiquement pou>onction JS appelée handleOrientation(), votre fonction d'écoute e
>r récupérer les données de l'orientation mise à jour.>st appelée périodiquement pour récupérer les données de l'orienta
 >tion mise à jour.
42    </p>
43    <p>33    </p>
34    <p>
44      L'évènement d'orientation contient quatre valeurs :35      L'événement d'orientation contient quatre valeurs&nbsp;:
n57      La fonction gérant l’évènement pourrait ressembler à ceci :n48      La fonction gérant l’événement pourrait ressembler à ceci&n
 >bsp;:
n73      La valeur reportée pour chaque axe indique l'angle de rotatn64      La valeur reportée pour chaque axe indique l'angle de rotat
>ion autour d'un axe donné en référence à un <span class="long_tex>ion autour d'un axe donné en référence à un système de coordonnée
>t" id="result_box" lang="fr"><span class="hps">système de coordon>s standard. Ces valeurs sont décrites de façon plus détaillée dan
>nées</span> <span class="hps">standard. Ces valeurs sont décrites>s cet article <a href="/en-US/DOM/Orientation_and_motion_data_exp
> de façon plus détaillée dans cet article</span></span> <a href=">lained" title="Orientation et déplacement expliquée">Orientation 
>/en-US/DOM/Orientation_and_motion_data_explained" title="Orientat>et déplacement expliquée</a>.
>ion et déplacement expliquée">Orientation et déplacement expliqué 
>e</a>.&nbsp; 
74    </p>
75    <ul>65    </p>
66    <ul>
76      <li>La valeur {{ domxref("DeviceOrientationEvent.alpha") }}67      <li>La valeur {{ domxref("DeviceOrientationEvent.alpha") }}
> représente le mouvement de l'appareil, autour de l'axe « z », en> représente le mouvement de l'appareil, autour de l'axe «&nbsp;z&
> dégrés sur une échelle de 0° à 360°.>nbsp;», en degrés sur une échelle de 0° à 360°&nbsp;;
n78      <li>La valeur {{ domxref("DeviceOrientationEvent.beta") }} n69      <li>La valeur {{ domxref("DeviceOrientationEvent.beta") }} 
>représente le mouvement de l'appareil autour de l'axe « y » en dé>représente le mouvement de l'appareil autour de l'axe «&nbsp;y&nb
>grés, sur une échelle de -180° to 180°.&nbsp; Cela représente le >sp;» en degrés, sur une échelle de -180° à 180°.&nbsp; Cela repré
>mouvement d'avant en arrière de l'appareil.>sente le mouvement d'avant en arrière de l'appareil&nbsp;;
n80      <li>La valeur {{ domxref("DeviceOrientationEvent.gamma") }}n71      <li>La valeur {{ domxref("DeviceOrientationEvent.gamma") }}
> représente le mouvement de l'appareil autour de l'axe « x », exp> représente le mouvement de l'appareil autour de l'axe «&nbsp;x&n
>rimée en dégrés sur une échelle de -90° à 90°. Cela représente le>bsp;», exprimée en degrés sur une échelle de -90° à 90°. Cela rep
> mouvement de gauche à droite de l'appareil.>résente le mouvement de gauche à droite de l'appareil.
n87      Cet exemple fonctionne sur tout navigateur supportant l’évèn78      Cet exemple fonctionne sur tout navigateur supportant l’évé
>nement {{event("deviceorientation")}} et sur tout appareil capabl>nement {{event("deviceorientation")}} et sur tout appareil capabl
>e de détecter son orientation.>e de détecter son orientation.
88    </p>
89    <p>79    </p>
80    <p>
90      Imaginons une balle dans un jardin :81      Imaginons une balle dans un jardin&nbsp;:
n100      Ce jardin fait 200 pixels de long (Oui c'est un « petit » jn91      Ce jardin fait 200 pixels de long (Oui c'est un «&nbsp;peti
>ardin !), et la balle est au centre :>t&nbsp;» jardin&nbsp;!), et la balle est au centre&nbsp;:
n122      Maintenant, on définit le déplacement de la balle en fonctin113      Maintenant, on définit le déplacement de la balle en foncti
>on de celui de l'appareil :>on de celui de l'appareil&nbsp;:
n157      Et voici le résultat en temps réel :n148      Et voici le résultat en temps réel&nbsp;:
n160      {{ EmbedLiveSample('Orientation_example', '230', '260') }}n151      {{EmbedLiveSample('Orientation_example', '230', '260')}}
n168      Traiter les évènement de mouvementn159      Traiter les événement de mouvement
169    </h2>
170    <p>160    </h2>
161    <p>
171      Les évènements de mouvement gèrent l'orientation de la même162      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é> façon à l'exception près quils portent un nom d’événement diffé
>rent : {{ event("devicemotion") }}>rent&nbsp;: {{event("devicemotion")}}
n180      Les évènements de mouvement contiennent quatre propriétés :n171      Les événements de mouvement contiennent quatre propriétés&n
 >bsp;:
181    </p>
182    <ul>172    </p>
173    <ul>
183      <li>{{ domxref("DeviceMotionEvent.acceleration") }}174      <li>{{domxref("DeviceMotionEvent.acceleration")}}
n185      <li>{{ domxref("DeviceMotionEvent.accelerationIncludingGravn176      <li>{{domxref("DeviceMotionEvent.accelerationIncludingGravi
>ity") }}>ty")}}
n187      <li>{{ domxref("DeviceMotionEvent.rotationRate") }}n178      <li>{{domxref("DeviceMotionEvent.rotationRate")}}
n189      <li>{{ domxref("DeviceMotionEvent.interval") }}n180      <li>{{domxref("DeviceMotionEvent.interval")}}
190      </li>
191    </ul>181      </li>
182    </ul>
192    <h3 id="Explication_des_Valeurs_de_mouvement">183    <h3 id="Explication_des_valeurs_de_mouvement">
n199      Pour {{domxref("DeviceMotionEvent.acceleration","acceleratin190      Pour {{domxref("DeviceMotionEvent.acceleration","accelerati
>on")}} et {{domxref("DeviceMotionEvent.accelerationIncludingGravi>on")}} et {{domxref("DeviceMotionEvent.accelerationIncludingGravi
>ty","accelerationIncludingGravity")}}, Les axes correspondent à :>ty","accelerationIncludingGravity")}}, Les axes correspondent à&n
 >bsp;:
200    </p>
201    <ul>191    </p>
202      <li>192    <ul>
203        <code>x</code> : représente l'axe d'Ouest en Est.
204      </li>193      <li>
194        <code>x</code>&nbsp;: représente l'axe d'Ouest en Est&nbs
 >p;;
205      <li>195      </li>
206        <code>y</code> : représente l'axe Sud vers Nord.
207      </li>196      <li>
197        <code>y</code>&nbsp;: représente l'axe Sud vers Nord&nbsp
 >;:
208      <li>198      </li>
199      <li>
209        <code>z</code> : représente l'axe perpendiculaire au sol.200        <code>z</code>&nbsp;: représente l'axe perpendiculaire au
 > sol.
n217        <code>alpha</code> : représente le ratio de rotation le ln208        <code>alpha</code>&nbsp;: représente le ratio de rotation
>ong de l'axe perpendiculaire à l'écran (ou du clavier au bureau).> le long de l'axe perpendiculaire à l'écran (ou du clavier au bur
 >eau)&nbsp;;
218      </li>
219      <li>209      </li>
220        <code>beta</code> : représente le ratio de rotation le lo
>ng de l'axe allant de la gauche vers la droite de l'écran (ou du  
>clavier au bureau). 
221      </li>210      <li>
211        <code>bêta</code>&nbsp;: représente le ratio de rotation 
 >le long de l'axe allant de la gauche vers la droite de l'écran (o
 >u du clavier au bureau)&nbsp;;
222      <li>212      </li>
213      <li>
223        <code>gamma</code> : représente le ratio de rotation le l214        <code>gamma</code>&nbsp;: représente le ratio de rotation
>ong de l'axe allant du bas vers le haut de l'écran (ou clavier ve> le long de l'axe allant du bas vers le haut de l'écran (ou clavi
>rs le bureau)>er vers le bureau).
n255            Spécification Initiale.n246            Spécification initiale.
n260    <h2 id="Compatibilit.C3.A9_entre_les_Navigateurs">n251    <h2 id="Compatibilit.C3.A9_des_navigateurs">
261      Compatibilité entre les navigateurs252      Compatibilité des navigateurs
262    </h2>
263    <p>253    </h2>
254    <p>
264      {{ CompatibilityTable() }}255      {{CompatibilityTable()}}
n301              {{ CompatUnknown() }}n292              {{CompatUnknown()}}
302            </td>
303            <td>293            </td>
294            <td>
304              {{ CompatUnknown() }}295              {{CompatUnknown()}}
305            </td>
306            <td>296            </td>
297            <td>
307              {{ CompatUnknown() }}298              {{CompatUnknown()}}
n315              {{ CompatVersionUnknown() }}n306              {{CompatVersionUnknown()}}
t321              {{ CompatUnknown() }}t312              {{CompatUnknown()}}
322            </td>
323            <td>313            </td>
314            <td>
324              {{ CompatUnknown() }}315              {{CompatUnknown()}}
325            </td>
326            <td>316            </td>
317            <td>
327              {{ CompatUnknown() }}318              {{CompatUnknown()}}

Retour à l'historique