Gli eventi di movimento e orientamento del dispositivo forniscono l'accesso all'accelerometro, al giroscopio e alla bussola integrati nei dispositivi mobili.
Questi eventi possono essere utilizzati per molti scopi; nei giochi, ad esempio, 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 fornire informazioni su una posizione specifica.
Riepilogo
- Rileva il lato del dispositivo rivolto verso l'alto e la sua rotazione.
- Scopri quando e come rispondere agli eventi di movimento e orientamento.
Quale estremità è in alto?
Per utilizzare i dati restituiti dagli eventi di orientamento e movimento del dispositivo, è importante comprendere i valori forniti.
Sistema di coordinate della Terra
Il sistema di 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 il nord è positivo). |
Z |
Rappresenta la direzione verticale, perpendicolare al terreno (dove la direzione verso l'alto è positiva). |
Sistema di coordinate del dispositivo
Il sistema di 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 che si estende verso l'esterno. |
Su smartphone o tablet, l'orientamento del dispositivo si basa sull'orientamento tipico dello schermo. Per smartphone e tablet, si basa sulla modalità verticale del dispositivo. Per i computer desktop o laptop, l'orientamento viene considerato in relazione alla tastiera.
Dati di 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. Man mano che il dispositivo viene ruotato in senso antiorario,
il valore di alpha aumenta.
Beta
La rotazione attorno all'asse x. Il valore di beta è 0° quando la parte superiore e
inferiore del dispositivo sono equidistanti dalla superficie terrestre. Il valore
aumenta man mano che la parte superiore del dispositivo si inclina verso la superficie terrestre.
Gamma
La rotazione attorno all'asse Y. Il valore di gamma è 0° quando i bordi sinistro e
destro del dispositivo sono equidistanti dalla superficie terrestre. Il valore
aumenta man mano che il lato destro si inclina verso la superficie terrestre.
Orientamento del dispositivo
L'evento di orientamento del dispositivo restituisce i dati di rotazione, che includono l'inclinazione del dispositivo in avanti e indietro, da un lato all'altro e, se lo smartphone o il laptop ha una bussola, la direzione in cui è rivolto il dispositivo.
Utilizza questa categoria con attenzione.
Test per 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. Alcuni esempi sono:
- Aggiorna una mappa man mano che l'utente si sposta.
- Modifiche sottili alla UI, ad esempio l'aggiunta di effetti di parallasse.
- Se combinato con la geolocalizzazione, può essere utilizzato per la navigazione passo passo.
Controlla il supporto e ascolta gli eventi
Per rilevare 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 orientamento. Restituisce dati sulla differenza tra il dispositivo nella sua posizione attuale rispetto al sistema di coordinate della Terra.
L'evento in genere 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 l'inclinazione del dispositivo in avanti e 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 quando è necessario il movimento corrente del dispositivo.
rotationRate è fornito 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 del dispositivo possono essere utilizzati in diversi modi. Alcuni esempi sono:
- Gesto di scuotimento per aggiornare i dati.
- Nei giochi, per far saltare o muovere i personaggi.
- Per le app per la salute e il fitness.
Controlla il supporto e ascolta gli eventi
Per rilevare DeviceMotionEvent, controlla innanzitutto se gli eventi sono
supportati nel browser. Quindi, collega un listener di eventi all'oggetto window
che ascolta gli 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 viene attivato a intervalli regolari e restituisce dati sulla rotazione (in °/secondo) e sull'accelerazione (in m/secondo2) del dispositivo in quel momento. Alcuni dispositivi non dispongono dell'hardware per escludere l'effetto della gravità.
L'evento restituisce quattro proprietà:
accelerationIncludingGravity,
acceleration, che esclude gli effetti di
gravità, rotationRate e interval.
Ad esempio, prendiamo in esame uno smartphone appoggiato su un tavolo piatto con lo schermo rivolto verso l'alto.
| Stato | Rotazione | Accelerazione (m/s2) | Accelerazione con gravità (m/s2) |
|---|---|---|---|
| Attività troppo breve | [0, 0, 0] | [0, 0, 0] | [0, 0, 9.8] |
| Spostamento verso l'alto, verso il cielo | [0, 0, 0] | [0, 0, 5] | [0, 0, 14.81] |
| Spostamento solo a destra | [0, 0, 0] | [3, 0, 0] | [3, 0, 9.81] |
| Spostamento verso l'alto e a destra | [0, 0, 0] | [5, 0, 5] | [5, 0, 14.81] |
Al contrario, se lo smartphone fosse tenuto in modo che lo schermo fosse perpendicolare al terreno e direttamente visibile allo spettatore:
| Stato | Rotazione | Accelerazione (m/s2) | Accelerazione con gravità (m/s2) |
|---|---|---|---|
| Attività troppo breve | [0, 0, 0] | [0, 0, 0] | [0, 9.81, 0] |
| Spostamento verso l'alto, verso il cielo | [0, 0, 0] | [0, 5, 0] | [0, 14.81, 0] |
| Spostamento solo a destra | [0, 0, 0] | [3, 0, 0] | [3, 9.81, 0] |
| Spostamento verso l'alto e a 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 di 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 chiesto di saltare. Durante questo periodo, la pagina memorizza i valori di accelerazione massimo (e minimo) e, dopo il salto, comunica all'utente l'accelerazione massima.