introduzione

La maggior parte dei moderni dispositivi mobili sono dotati di accelerometri, giroscopi e bussole. Nel mio precedente articolo sull'API di geolocalizzazione, ho descritto come gli sviluppatori possono utilizzare i dati offerti dall'API di geolocalizzazione per migliorare l'esperienza dell'utente. Un'altra API interessante è l'API di orientamento del dispositivo, che è l'obiettivo di questo tutorial.

Rilevare l'orientamento di un dispositivo è utile per un'ampia gamma di applicazioni, dall'applicazione di navigazione ai giochi. Hai mai giocato a un gioco di corse su un dispositivo mobile che ti consente di controllare l'auto inclinando il dispositivo?

Un'altra applicazione dell'API sta aggiornando l'interfaccia utente di un'applicazione quando l'orientamento del dispositivo cambia per offrire all'utente la migliore esperienza possibile sfruttando l'intero schermo. Se sei un fan di YouTube, sicuramente hai sfruttato questa funzionalità.

In questo articolo, ti presenterò all'API Device Orientation, spiegando che tipo di dati può offrirci e come sfruttarlo nelle tue applicazioni.

1. Che cos'è?

Per citare le specifiche W3C dell'API Device Orientation, l'API "[...] definisce diversi nuovi eventi DOM che forniscono informazioni sull'orientamento fisico e sul movimento di un dispositivo di hosting." I dati forniti dall'API sono ottenuti da varie fonti, come il giroscopio del dispositivo, l'accelerometro e la bussola. Ciò differisce da dispositivo a dispositivo, a seconda dei sensori disponibili.

Questa API è una bozza di lavoro W3C, il che significa che le specifiche non sono stabili e potremmo aspettarci dei cambiamenti in futuro. Vale anche la pena notare che questa API presenta alcune incoerenze conosciute in diversi browser e su numerosi sistemi operativi. Ad esempio, l'implementazione su Chrome e Opera, basata sul motore di rendering Blink, presenta un problema di compatibilità con Windows 8 per deviceorientation evento. Un altro esempio è che il intervallo la proprietà non è costante in Opera Mobile.

2. Implementazione

L'API espone tre eventi che forniscono informazioni sull'orientamento del dispositivo:

• deviceorientation
• devicemotion
• compassneedscalibration
  

Questi eventi sono sparati sul finestra oggetto, il che significa che dobbiamo attaccare un gestore al finestra oggetto. Diamo un'occhiata a ciascuno di questi eventi.

deviceorientation

Il deviceorientation l'evento viene attivato quando l'accelerometro rileva una modifica dell'orientamento del dispositivo. Come accennato in precedenza, possiamo ascoltare questo evento e rispondere ad eventuali modifiche associando un gestore di eventi al finestra oggetto. Quando viene richiamato il gestore eventi, riceverà un argomento di tipo DeviceOrientationEvent, che contiene quattro proprietà:

• alfa è l'angolo attorno all'asse z. Il suo valore varia da 0 a 360 gradi. Quando la parte superiore del dispositivo punta al Nord Reale, il valore di questa proprietà è 0.
• beta è l'angolo attorno all'asse x. Il suo valore varia da -180 a 180 gradi. Quando il dispositivo è parallelo alla superficie della Terra, il valore di questa proprietà è 0.
• gamma è l'angolo attorno all'asse y. I suoi valori vanno da -90 a 90 gradi. Quando il dispositivo è parallelo alla superficie della Terra, il valore di questa proprietà è 0.
• assoluto specifica se il dispositivo sta fornendo dati di orientamento relativi al sistema di coordinate della Terra, nel qual caso il suo valore è vero, o a un sistema di coordinate arbitrario.

L'illustrazione seguente, presa dalla specifica ufficiale, mostra gli assi x, ye menzionati rispetto al dispositivo.

devicemotion

Il devicemotion l'evento viene attivato ogni volta che il dispositivo accelera o decelera. Puoi ascoltare questo evento proprio come abbiamo fatto per deviceorientation evento. Quando viene richiamato il gestore eventi, riceve un argomento di tipo DeviceMotionEvent, che ha quattro proprietà:

• accelerazione specifica l'accelerazione del dispositivo rispetto al frame Terra sugli assi x, yez, accessibile attraverso il suo X, y, e z proprietà. I valori sono espressi in m / s².
• accelerationIncludingGravity detiene gli stessi valori del accelerazione proprietà, ma prende in considerazione la gravità della Terra. I valori di questa proprietà devono essere utilizzati in situazioni in cui l'hardware del dispositivo non sappia come rimuovere la gravità dai dati di accelerazione. Infatti, in questi casi il accelerazione la proprietà non dovrebbe essere fornita dallo user agent.
• rotationRate specifica la velocità con cui il dispositivo ruota attorno a ciascuno dei suoi assi in gradi al secondo. Possiamo accedere ai singoli valori di rotationRate attraverso il suo alfa, beta, e gamma proprietà.
  
• intervallo fornisce l'intervallo in cui vengono ottenuti i dati. Questo valore non deve cambiare una volta impostato. È espresso in millisecondi.

compassneedscalibration

Questo evento viene generato quando il programma utente determina che la bussola richiede la calibrazione. La specifica afferma inoltre che "i programmi utente dovrebbero attivare l'evento solo se la calibrazione della bussola aumenterà l'accuratezza dei dati forniti da deviceorientation evento. "Questo evento dovrebbe essere usato per informare l'utente che la bussola necessita di calibrazione e dovrebbe anche istruire l'utente su come farlo.

3. Rilevazione del supporto

Per rilevare se il browser o il programma utente supporta uno dei primi due eventi, deviceorientation e devicemotion, è semplice come includere una banale dichiarazione condizionale. Dai uno sguardo al seguente frammento di codice in cui rileviamo il supporto per deviceorientation evento:

if (window.DeviceOrientationEvent) // Possiamo ascoltare le modifiche nell'orientamento del dispositivo ... else // Not supported

Testare per il compassneedscalibration evento, utilizziamo il seguente frammento di codice:

if (! ('oncompassneedscalibration' in window)) // Event support else // Evento non supportato

4. Supporto per browser

Anche se il supporto per l'API Device Orientation è valido, è necessario tenere a mente alcune cose quando si lavora con l'API. Oltre ai caveat menzionati nell'introduzione, il assoluto la proprietà è non definito in Safari mobile.

Tuttavia, il vero problema è che tutti i browser che supportano l'API Device Orientation lo supportano solo parzialmente. Infatti, al momento della scrittura, pochissimi browser supportano il compassneedscalibration evento. Esegui lo snippet di codice sopra indicato in Chrome o Firefox per illustrare il problema.

Con questo in mente, i browser che supportano l'API Device Orientation sono Chrome 7+, Firefox 6+, Opera 15+ e Internet Explorer 11. Il supporto dei browser mobili è ancora migliore. Oltre a quelli che ho già menzionato, l'API è supportata anche dal browser di BlackBerry 10, Opera Mobile 12+, Mobile Safari 4.2+ e Chrome 3+ su Android.

Per un'immagine aggiornata e accurata del supporto per l'API di Orientamento dispositivo, ti consiglio di visitare Posso usare ... .

5. Demo

Ora sappiamo di cosa abbiamo bisogno per creare un'applicazione demo che sfrutti l'API Device Orientation. Lo scopo di questa demo è creare un cubo, usando semplici HTML e CSS, e ruotarlo mentre cambia l'orientamento del dispositivo.

Visualizzeremo anche le informazioni che recuperiamo dall'API, che mostra il tipo di dati che otteniamo dall'API Device Orientation. Mostriamo anche le informazioni in testo non elaborato poiché alcuni browser potrebbero supportare l'API di Orientamento dispositivo ma non le proprietà CSS per il rendering del cubo. Questo è il caso di Opera Mobile, per esempio.

Perché sappiamo che non tutti i browser supportano l'API, ma testiamo anche il supporto di ogni funzionalità dell'API e lo mostriamo all'utente.

Il codice sorgente per l'applicazione demo è mostrato sotto, ma puoi anche vederlo in azione.

          
API di orientamento del dispositivo
 evento di orientazione del dispositivo non supportato evento di devicemotion non supportato evento di compensazione del bilanciamento non supportato 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
 
 
 Coordinate: (nullo, nullo, nullo) 
 Posizione assoluta? non disponibile 
 
 
 
 Accelerazione: (nullo, nullo, nullo) Signorina2 
 
 Accelerazione inclusa gravità: (nullo, nullo, nullo) Signorina2 
 
 Velocità di rotazione: (nullo, nullo, nullo) 
 
 Intervallo: 0 millisecondi 
 
 
  Demo creato da Aurelio De Rosa (@AurelioDeRosa)    

Conclusione

In questo articolo abbiamo esplorato l'API di Orientamento dispositivo esaminando le sue funzionalità e i possibili casi d'uso. Il supporto dell'API non è eccezionale al momento della scrittura, ma sono sicuro che sei d'accordo che apre molte possibilità agli sviluppatori di dispositivi mobili, in particolare agli sviluppatori di giochi. Non dimenticare di giocare con la demo per vedere l'API in azione.