Zugriff auf Beschleunigungssensor/Gyroskopdaten von Javascript?

Question

Ich bin kürzlich auf einige Websites gestoßen, die auf den Beschleunigungsmesser oder das Gyroskop meines Laptops zugreifen und Änderungen in der Ausrichtung oder Bewegung erkennen.

Wie wird das gemacht? Muss ich eine Veranstaltung auf dem Objekt window abonnieren?

Auf welchen Geräten (Laptops, Mobiltelefonen, Tablets) funktioniert dies?

---

^{NB: Ich weiß eigentlich schon (teilweise) die Antwort auf diese Frage, und ich werde es sofort veröffentlichen. Der Grund, dass ich die Frage hier schreibe, soll allen anderen mitteilen, dass Beschleunigungsmesserdaten in Javascript vorhanden sind (auf bestimmten Geräten) und die Gemeinschaft herausfordern, neue Entdeckungen auf dem Thema bekannt zu geben. Derzeit scheint es fast keine Dokumentation dieser Funktionen zu geben.}

Answer 1

Derzeit gibt es drei unterschiedliche Ereignisse, die möglicherweise ausgelöst werden, wenn sich die Clientgeräte bewegen. Zwei von ihnen konzentrieren sich um Orientierung und die letzte auf Bewegung:

• ondeviceorientation ist bekannt, auf der Desktop-Version von Chrome zu arbeiten, und die meisten Apple-Laptops scheint für diese Arbeit die erforderliche Hardware haben . Es funktioniert auch auf Mobile Safari auf dem iPhone 4 mit iOS 4.2. In der Ereignisbehandlerfunktion können Sie auf alpha, beta, gamma Werte auf den Ereignisdaten zugreifen, die als das einzige Argument für die Funktion bereitgestellt werden.

• onmozorientation wird unter Firefox 3.6 und neuer unterstützt. Auch dies funktioniert auf den meisten Apple-Laptops, könnte aber auch auf Windows- oder Linux-Rechnern mit Beschleunigungsmesser funktionieren. Suchen Sie in der Ereignishandlerfunktion nach Feldern x, y, z auf den Ereignisdaten, die als erstes Argument angegeben werden.

• ondevicemotion ist bekannt, auf dem iPhone 3GS + 4 und iPad (beide mit iOS 4.2) zu arbeiten, und bietet Daten im Zusammenhang mit der aktuellen Beschleunigung des Client-Geräts. Die Ereignisdaten an die Prozedurfunktion übergeben hat acceleration und accelerationIncludingGravity, die beide für jede Achse drei Felder: x, y, z

Das „erdbebennachweis“ Beispiel-Website eine Reihe von if Anweisungen verwendet, um herauszufinden, welches Ereignis zu befestigen, um (in einer etwas priorisierten Reihenfolge) und übergibt die Daten an eine gemeinsame tilt Funktion erhalten:

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); 
} 

die konstanten Faktoren 2 und 50 verwendet werden, um „align“, um die Messwerte von den beiden letztere Ereignisse mit denen von der ersten, aber diese sind keineswegs präzise Darstellungen.Für dieses einfache "Spielzeug" -Projekt funktioniert es ganz gut, aber wenn Sie die Daten für etwas etwas ernsthafteres verwenden müssen, müssen Sie sich mit den Einheiten der Werte, die in den verschiedenen Ereignissen bereitgestellt werden, vertraut machen und sie mit Respekt behandeln :)

Answer 2

Kann der ausgezeichneten Erklärung in dem anderen Beitrag keinen Kommentar hinzufügen, aber wollte erwähnen, dass eine große Dokumentationsquelle here gefunden werden kann.

Es ist genug, um eine Event-Funktion für Beschleunigungsmesser registrieren wie so:

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

mit dem Handler:

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

Und für Magnetometer eines folgender Event-Handler registriert werden:

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

mit einem Handler:

Es gibt auch Felder, die im Bewegungsereignis für ein Gyroskop spezifiziert sind, aber das scheint nicht universell unterstützt zu werden (z.B. es funktionierte nicht auf einem Samsung Galaxy Note).

Es gibt einen einfachen Arbeits Code auf GitHub

Answer 3

Wert Ausweich hier: https://developer.mozilla.org/en-US/docs/Web/Events/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);