Come accedere ai dati accelerometro / giroscopio da JavaScript?

Question

Recentemente ho incontrato un paio di siti web che sembra accedere l'accelerometro o giroscopio sul mio portatile, rilevare cambiamenti di orientamento o movimento.

Come si fa? Devo abbonarsi a un qualche tipo di evento per l'oggetto window?

Su quali dispositivi (computer portatili, telefoni cellulari, tablet) è noto questo al lavoro?

---

^{NB : Io in realtà già che (in parte) la risposta a questa domanda, e ho intenzione di inviare subito. La ragione per cui sto inviando la domanda qui, è quello di lasciare tutti gli altri sanno che i dati dell'accelerometro è disponibili in Javascript (su alcuni dispositivi) e per sfidare la comunità di inviare nuove scoperte sul soggetto. Attualmente, sembra che ci sia quasi alcuna documentazione di queste caratteristiche.}

Answer 1

Ci sono attualmente tre eventi distinti che può o non può essere attivato quando i dispositivi client si muove. Due di loro sono concentrati intorno a Orientamento e l'ultima il moto :

• ondeviceorientation è noto a lavorare sulla versione desktop di Chrome, e la maggior parte portatili Apple sembra avere l'hardware necessario per far funzionare tutto. Funziona anche su Safari Mobile su iPhone 4 con iOS 4.2. Nella funzione gestore di eventi, è possibile accedere a alpha, beta, valori gamma sui dati degli eventi forniti come unico argomento della funzione.

• onmozorientation è supportato su Firefox 3.6 e versioni successive. Ancora una volta, questo è noto a lavorare sulla maggior parte dei computer portatili di Apple, ma potrebbe funzionare su macchine Windows o Linux con accelerometro pure. Nella funzione gestore di eventi, cercare x, y, campi z sui dati degli eventi forniti come primo argomento.

• ondevicemotion si caratterizza per lavorare su iPhone 3G + 4 e iPad (entrambi con IOS 4.2), e fornisce dati relativi alla attuale accelerazione del dispositivo client. I dati degli eventi passati alla funzione di gestione ha acceleration e accelerationIncludingGravity, che hanno entrambe tre campi per ogni asse: x, y, z

Il "terremoto rilevare" il sito di esempio utilizza una serie di dichiarazioni if per capire quale evento di allegare a (in ordine un po 'di priorità) e passa i dati ricevuti a una funzione comune tilt:

if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function () {
        tilt([event.beta, event.gamma]);
    }, true);
} else if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', function () {
        tilt([event.acceleration.x * 2, event.acceleration.y * 2]);
    }, true);
} else {
    window.addEventListener("MozOrientation", function () {
        tilt([orientation.x * 50, orientation.y * 50]);
    }, true);
}

I fattori costanti 2 e 50 vengono utilizzati per "allineare" le letture ultimi due eventi con quelli del primo, ma questi sono affatto rappresentazioni precise. Per questa semplice "giocattolo" proiettare funziona bene, ma se è necessario utilizzare i dati per qualcosa di leggermente più grave, si dovrà acquisire familiarità con le unità dei valori previsti nei diversi eventi e trattarli con rispetto :)

Answer 2

Non è possibile aggiungere un commento alla eccellente spiegazione in un altro post, ma ha voluto ricordare che una grande fonte di documentazione può essere trovato qui .

E 'sufficiente registrarsi una funzione di evento per accelerometro in questo modo:

if(window.DeviceMotionEvent){
  window.addEventListener("devicemotion", motion, false);
}else{
  console.log("DeviceMotionEvent is not supported");
}

con il gestore:

function motion(event){
  console.log("Accelerometer: "
    + event.accelerationIncludingGravity.x + ", "
    + event.accelerationIncludingGravity.y + ", "
    + event.accelerationIncludingGravity.z
  );
}

E per magnetometro un seguente gestore di eventi deve essere registrato:

if(window.DeviceOrientationEvent){
  window.addEventListener("deviceorientation", orientation, false);
}else{
  console.log("DeviceOrientationEvent is not supported");
}

con un gestore:

function orientation(event){
  console.log("Magnetometer: "
    + event.alpha + ", "
    + event.beta + ", "
    + event.gamma
  );
}

Ci sono anche campi specificati in caso di proposta di giroscopio, ma che non sembra essere universalmente supportato (ad esempio, non ha funzionato su un Samsung Galaxy Note).

C'è un codice di lavoro semplice su GitHub

Answer 3

Il modo per farlo in 2019+ è quello di utilizzare DeviceOrientation API . Questo funziona in maggior parte dei browser moderni sul desktop e mobile .

window.addEventListener("deviceorientation", handleOrientation, true);

     

Dopo la registrazione del listener di eventi (in questo caso, un JavaScript   funzione chiamata handleOrientation ()), la vostra funzione listener   periodicamente viene chiamato con i dati di orientamento aggiornati.

     

L'evento orientamento contiene quattro valori:

     

  
• DeviceOrientationEvent.absolute
  
• DeviceOrientationEvent.alpha
  
• DeviceOrientationEvent.beta
  
• DeviceOrientationEvent.gamma
  

     

La funzione di gestore di eventi può essere simile a questa:

function handleOrientation(event) {
  var absolute = event.absolute;
  var alpha    = event.alpha;
  var beta     = event.beta;
  var gamma    = event.gamma;
  // Do stuff with the new orientation data
}

Answer 4

Utile fallback qui: https://developer.mozilla.org/ it-IT / docs / Web / Eventi / MozOrientation

function orientationhandler(evt){


  // For FF3.6+
  if (!evt.gamma && !evt.beta) {
    evt.gamma = -(evt.x * (180 / Math.PI));
    evt.beta = -(evt.y * (180 / Math.PI));
  }

  // use evt.gamma, evt.beta, and evt.alpha 
  // according to dev.w3.org/geo/api/spec-source-orientation


}

window.addEventListener('deviceorientation',  orientationhandler, false);
window.addEventListener('MozOrientation',     orientationhandler, false);