JavaScript: DeviceMotionEvent und DeviceOrientationEvent

Mit einigen Browser für mobile Geräte lassen sich inzwischen verschiedene Hardwaresensoren auslesen. So zum Beispiel auch die Bewegungssensoren.

Offiziell gibt es dafür das DeviceMotionEvent und das DeviceOrientationEvent Objekt. Beide werden im Moment jedoch nur teilweise unterstützt. Die Anzahl der Browser, die es unterstützen, nimmt jedoch zu. So unterstützt es zum Beispiel im Moment der Firefox 9.0 auf Android Geräten, jedoch nicht der bei Android 2.3 enthaltene Browser.

Unter Android 4.0 werden die Events auch vom integrierten Browser unterstützt.

Um die Werte auszulesen, müssen zunächst die EventListener hinzugefügt werden. Im folgenden Beispiel ist kurz gezeigt, wie dies gemacht wird. Dabei ist der zweite Parameter eine Funktion, die beim Eintreten des Ereignis aufgerufen wird. Dieser Funktion wird dann eine Instanz des Event Objekts vom Typ DeviceOrientationEvent oder DeviceMotionEvent übergeben.

window.addEventListener("deviceorientation", deviceOrientationHandler, false);
window.addEventListener("devicemotion", deviceMotionHandler, false);

Das DeviceOrientationEvent Objekt liefert Informationen über die aktuelle Position des Gerätes. Sprich wie es gehalten wird. Dabei stehen die Werte absolute, alpha, beta und gamma zur Verfügung. Da das ganze unter anderem auf den Webseiten des Mozilla Developer Networks gut beschrieben ist. Sollen diese Informationen an dieser Stelle nicht noch einmal erfasst werden. Für mehr Informationen siehe die entsprechenden Seiten im MDN zu DeviceOrientationEvent. Im Gegensatz dazu liefert das DeviceMotionEvent Objekt Informationen über die Beschleunigungssensoren des Gerätes. Auch hierfür gibt es Informationen im MDN zum DeviceMotionEvent.

Im ersten Moment sieht es so aus, als wenn eine breiten Menge an Sensorwerten zur Verfügung stehen. Bei einem kurzen Test mit Firefox 9.0 auf einem HTC Desire mit Android 2.3 standen zwar über das DeviceOrientationEvent Objekt alle Werte zur Verfügung, jedoch war die Anzahl der Werte beim DeviceMotionEvent Objekt eher minimalistisch, denn es lieferte lediglich DeviceMotionEvent.accelerationIncludingGravity Werte zurück.

Da ein Beispiel manchmal mehr als 1000 Worte sagt, gibt es zum Abschluss noch ein kleines Beispiel mit Quellcode.