- Learn
- Guida Apache Cordova
- Gestire accelerometro e bussola
Gestire accelerometro e bussola
La gestione della strumentazione che consente di individuare la direzione verso cui punta un dispositivo mobile e i suoi movimenti è affidata a due oggetti compass e accelerometer, entrambi figli di navigator
.
Compass, la bussola
L’oggetto compass consente di individuare la direzione verso cui sta puntando l’apposito sensore del dispositivo, implementando di fatto una bussola. L’approccio per la rilevazione della direzione è analogo a quello che abbiamo visto per la geolocalizzazione, abbiamo a disposizione:
- getCurrentHeading(), un metodo per la rilevazione della direzione corrente
o in alternativa la possibilità di creare dei
watch
; - watchHeading(), che in alternativa ci consente di creare dei watch ovvero di intercettare il cambio di direzione tramite eventi e di rimuoverli con
clearWatch()
quando non ne abbiamo più bisogno.
Il seguente esempio mostra come rilevare la direzione corrente tramite watch
:
var options = { frequency: 5000 };
var watchID = navigator.compass.watchHeading(onSuccess, onError, options);
function onSuccess(heading) {
var direzione = document.getElementById("direzione");
direzione.innerHTML = heading.magneticHeading + " gradi da Nord";
}
function onError(error) {
if (error.code == CompassError.COMPASS_NOT SUPPORTED) alert ("Rilevazione direzione non supportata!");
if (error.code == CompassError.COMPASS_INTERNAL_ERR) alert("Errore interno al rilevatore di direzione!");
}
Dopo aver impostato a 5 secondi la frequenza di rilevazione del cambio di direzione, il sistema invocherà la funzione onSuccess()
in caso di successo e onError()
in caso di errore. Alla callback di successo sarà passato un oggetto di tipo CompassHeading
che contiene le informazioni sulla direzione attuale espresse in gradi rispetto al nord.
Nell’esempio abbiamo utilizzato la proprietà magneticHeading
per far riferimento al nord magnetico; in alternativa possiamo utilizzare la proprietà trueHeading
per far riferimento al nord geografico, cioè il Polo Nord.
L’accelerometro
Con un approccio simile possiamo acquisire informazioni sul movimento nello spazio del dispositivo sfruttando l’accelerometro:
var options = { frequency: 5000 };
var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
function onSuccess(acceleration) {
var accelerazione = document.getElementById("accelerazione");
accelerazione.innerHTML = "X: " + acceleration.x + "<br/>" +
"Y: " + acceleration.y + "<br/>" +
"Z: " + acceleration.z + "<br/>";
}
function onError() {
alert ("Si è verificato un errore!");
}
Al variare dell’accelerazione nell’arco dei 5 secondi dell’intervallo di rilevazione impostato viene chiamata la funzione di callback onSuccess()
a cui viene passato un oggetto di tipo Acceleration. Questo oggetto contiene i valori delle accelerazioni nelle tre coordinate spaziali espressi in m/sec2.
Combinando i dati sulla direzione ed accelerazione del dispositivo possiamo ottenere informazioni su come il dispositivo si sta muovendo e sfruttarlo per realizzare applicazioni specializzate o per creare effetti particolari.
Se vuoi aggiornamenti su mobile inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
CSS, come creare bottoni personalizzati con i fogli di stile
In questo video verrà mostrato come creare lo stile della classe bottoni nel file CSS, in modo da riutilizzare lo […]