Gli eventi di movimento e di orientamento del dispositivo consentono di accedere all'accelerometro, al giroscopio e alla bussola integrati nei dispositivi mobili.
Questi eventi possono essere utilizzati per molti scopi, ad esempio nei giochi, per controllare la direzione o l'azione di un personaggio. Se utilizzati con la geolocalizzazione, possono contribuire a creare una navigazione passo passo più precisa o a fornire informazioni su una posizione specifica.
Riepilogo
- Rileva il lato del dispositivo rivolto verso l'alto e il modo in cui il dispositivo sta ruotando.
- Scopri quando e come rispondere agli eventi di movimento e di orientamento.
Quale parte è rivolta verso l\'alto?
Per utilizzare i dati restituiti dagli eventi di movimento e di orientamento del dispositivo, è importante comprendere i valori forniti.
Cornice coordinate di Earth
Il frame delle coordinate della Terra, descritto dai valori X, Y e Z, è allineato
in base alla gravità e all'orientamento magnetico standard.
| Sistema di coordinate | |
|---|---|
X |
Rappresenta la direzione est-ovest (dove est è positiva). |
Y |
Rappresenta la direzione nord-sud (dove nord è positivo). |
Z |
Rappresenta la direzione verso l'alto e verso il basso, perpendicolare al suolo (dove l'alto è positivo). |
Riquadro di coordinate del dispositivo
Il frame delle coordinate del dispositivo, descritto dai valori x, y e z, è allineato
in base al centro del dispositivo.
| Sistema di coordinate | |
|---|---|
X |
Nel piano dello schermo, positivo verso destra. |
Y |
Nel piano dello schermo, positivo verso l'alto. |
Z |
Perpendicolare allo schermo o alla tastiera, positivo se si allontana. |
Su uno smartphone o un tablet, l'orientamento del dispositivo si basa sull'orientamento tipico dello schermo. Per smartphone e tablet, si basa sul fatto che il dispositivo sia in modalità Ritratto. Per i computer desktop o laptop, l'orientamento viene considerato in relazione alla tastiera.
Dati sulla rotazione
I dati di rotazione vengono restituiti come angolo di Eulero, che rappresenta il numero di gradi di differenza tra il sistema di coordinate del dispositivo e il sistema di coordinate della Terra.
Alpha
La rotazione attorno all'asse z. Il valore alpha è 0° quando la parte superiore del
dispositivo è rivolta direttamente a nord. Quando il dispositivo viene ruotato in senso antiorario,
il valore alpha aumenta.
Beta
La rotazione attorno all'asse x. Il valore beta è 0° quando la parte superiore e inferiore del dispositivo sono equidistanti dalla superficie della Terra. Il valore aumenta man mano che la parte superiore del dispositivo viene inclinata verso la superficie terrestre.
Gamma
La rotazione attorno all'asse y. Il valore gamma è 0° quando i bordi sinistro e
destro del dispositivo sono equidistanti dalla superficie della Terra. Il valore aumenta man mano che il lato destro viene inclinato verso la superficie della Terra.
Orientamento del dispositivo
L'evento di orientamento del dispositivo restituisce i dati di rotazione, che includono quanto il dispositivo è inclinato da un lato all'altro e da un lato all'altro e, se lo smartphone o il laptop ha una bussola, la direzione in cui è rivolto il dispositivo.
Utilizza con parsimonia.
Testare l'assistenza.
Non aggiornare l'interfaccia utente a ogni evento di orientamento; sincronizza invece con requestAnimationFrame.
Quando utilizzare gli eventi di orientamento del dispositivo
Gli eventi di orientamento del dispositivo possono essere utilizzati in diversi modi. Ecco alcuni esempi:
- Aggiorna una mappa in base ai movimenti dell'utente.
- Modifiche sottili all'interfaccia utente, ad esempio l'aggiunta di effetti di parallasse.
- Se combinata con la geolocalizzazione, può essere utilizzata per la navigazione passo passo.
Verificare l'assistenza e rimanere in ascolto degli eventi
Per ascoltare DeviceOrientationEvent, controlla innanzitutto se il browser supporta gli eventi. Quindi, collega un listener di eventi all'oggetto window che monitora gli eventi deviceorientation.
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
Gestire gli eventi di orientamento del dispositivo
L'evento di orientamento del dispositivo viene attivato quando il dispositivo si sposta o cambia l'orientamento. Restituisce i dati sulla differenza tra il dispositivo nella sua posizione attuale rispetto al frame delle coordinate di Earth.
In genere l'evento restituisce tre proprietà: alpha,
beta e gamma. Su Safari mobile, viene restituito un parametro aggiuntivo
webkitCompassHeading
con la direzione della bussola.
Movimento del dispositivo
L'evento di orientamento del dispositivo restituisce i dati di rotazione, che includono la quantità di inclinazione del dispositivo in avanti e all'indietro, da un lato all'altro e, se lo smartphone o il laptop ha una bussola, la direzione in cui è rivolto il dispositivo.
Utilizza il movimento del dispositivo per quando è necessario il movimento attuale del dispositivo.
rotationRate è indicato in °/sec.
acceleration e accelerationWithGravity sono forniti in m/sec2.
Tieni presente le differenze tra le implementazioni dei browser.
Quando utilizzare gli eventi di movimento del dispositivo
Gli eventi di movimento dei dispositivi possono essere utilizzati in diversi modi. Ecco alcuni esempi:
- Scuoti il gesto per aggiornare i dati.
- Nei giochi, per far saltare o muovere i personaggi.
- Per app per la salute e l'attività fisica.
Controlla se è disponibile assistenza e ascolta gli eventi
Per ascoltare DeviceMotionEvent, controlla innanzitutto se gli eventi sono supportati nel browser. Quindi collega un listener di eventi all'oggetto window
in ascolto degli eventi devicemotion.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
Gestire gli eventi di movimento del dispositivo
L'evento di movimento del dispositivo si attiva a intervalli regolari e restituisce i dati sulla rotazione (in °/secondo) e sull'accelerazione (in m/secondo)2 del dispositivo in quel momento. Alcuni dispositivi non hanno l'hardware necessario per escludere l'effetto della gravità.
L'evento restituisce quattro proprietà, accelerationIncludingGravity, acceleration, che escludono gli effetti della gravità, rotationRate e interval.
Ad esempio, diamo un'occhiata a un telefono, sdraiato su un tavolo piatto, con lo schermo rivolto verso l'alto.
| Stato | Rotazione | Accelerazione (m/s2) | Accelerazione con gravità (m/s2) |
|---|---|---|---|
| Non in movimento | [0, 0, 0] | [0, 0, 0] | [0, 0, 9,8] |
| Salire verso il cielo | [0, 0, 0] | [0, 0, 5] | [0, 0, 14.81] |
| Spostamento solo verso destra | [0, 0, 0] | [3, 0, 0] | [3, 0, 9,81] |
| Spostandoti verso l'alto e verso destra | [0, 0, 0] | [5, 0, 5] | [5, 0, 14.81] |
Al contrario, se lo smartphone fosse stato tenuto in modo che lo schermo fosse perpendicolare al pavimento e fosse visibile direttamente allo spettatore:
| Stato | Rotazione | Accelerazione (m/s2) | Accelerazione con gravità (m/s2) |
|---|---|---|---|
| Non in movimento | [0, 0, 0] | [0, 0, 0] | [0, 9,81, 0] |
| Salire verso il cielo | [0, 0, 0] | [0, 5, 0] | [0; 14,81; 0] |
| Spostandoti solo a destra | [0, 0, 0] | [3, 0, 0] | [3, 9,81, 0] |
| Spostandoti verso l'alto e verso destra | [0, 0, 0] | [5, 5, 0] | [5, 14,81, 0] |
Esempio: calcolo dell'accelerazione massima di un oggetto
Un modo per utilizzare gli eventi relativi al movimento del dispositivo è calcolare l'accelerazione massima di un oggetto. Ad esempio, qual è l'accelerazione massima di una persona che salta?
if (evt.acceleration.x > jumpMax.x) {
jumpMax.x = evt.acceleration.x;
}
if (evt.acceleration.y > jumpMax.y) {
jumpMax.y = evt.acceleration.y;
}
if (evt.acceleration.z > jumpMax.z) {
jumpMax.z = evt.acceleration.z;
}
Dopo aver toccato il pulsante Vai!, all'utente viene detto di saltare l'annuncio. Durante questo periodo, la pagina memorizza i valori di accelerazione massima (e minima) e, al termine del salto, comunica all'utente l'accelerazione massima.