HTML5: determinare l'orientamento del device utilizzando le Orientation API



Utilizzando le nuove funzionalità di HTML5 è possibile determinare, oltre alla posizione geografica di un terminale mobile, anche la sua inclinazione e l'orientamento.

Utilizzando le Orientation API  e appoggiandoci all'evento DeviceMotionEvent, che viene scatenato ogni qualvolta risultino modificati i dati di orientamento del device, realizziamo un breve script che legge queste informazioni e le presenta a schermo.




Per prima cosa verifichiamo che il browser che sta visualizzando la pagina sia compatibile con le Orientation API (righe 53-57) e successivamente leghiamo l'evento DeviceMotionEvent alla function motionHandler (righe 10-58).

All'interno della funzione preleviamo dall'evento le coordinate X,Y,Z (righe 14-16) e Alpha, Beta, Gamma (relativi alla rotazione del device e ottenuti dalla bussola, righe 30-35) : con le prime (solo a titolo di esempio) calcoliamo anche l'inclinazione Sinistra-Destra, Fronte-Retro in gradi (righe 18-26), verificando prima di tutto se il terminale è con lo schermo in su o in giu (righe 18-22).



Compatibile con Safari e Firefox Mobile




Published: June 28 2013

  • category: