Auslesen des Bewegungssensors mit JavaScript - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 242

6.1 Diese Daten liefert der Bewegungssensor
Bevor Sie genauer in die Programmierung und Konzeption der App einsteigen, lohnt
es sich, einen Blick auf die Funktionsweise des Bewegungssensors zu werfen.
Der Sensor in mobilen Geräten misst die Bewegung immer relativ zur Gravitation. Die
Werte, die der Sensor ausgibt, geben dabei die Geschwindigkeit in Metern pro Sekunde
zum Quadrat an (m/s 2 ), also die Beschleunigung, mit der das Gerät bewegt wird.
Um dies zu verdeutlichen, programmieren Sie eine kleine WebApp, die die Daten des
Bewegungssensors ausgibt. Das Auslesen des Bewegungssensors via JavaScript wird von
Android erst ab Version 4.0 unterstützt. Aktualisieren Sie daher ggf. Ihr Android-Gerät.
Sie starten, wie bereits aus den vorhergehenden Kapiteln gewohnt, mit einer Basis-
HTML5-Seite und ergänzen dann den Code wie folgt. Um die ausgelesenen Werte spä-
ter einfach in einem Container ausgeben zu können, laden Sie zunächst jQuery vor
dem schließenden body -Tag.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/
jquery.min.js"></script>
Listing 6.1 Die Verknüpfung der jQuery-Bibliothek
Sie benötigen jQuery im weiteren Verlauf sowieso noch häufiger, deswegen können
Sie auch an dieser Stelle schon damit arbeiten. Bitte bedenken Sie, dass Sie in diesem
Fall die jQuery-Bibliothek von den Google-Servern laden. Dazu benötigen Sie natür-
lich einen Internetzugang.
Als Nächstes definieren Sie darunter die jQuery-Funktion $(function(){}); , die aus-
geführt wird, wenn das Dokument fertig geladen ist:
<script>
$(function(){
});
</script>
Innerhalb dieser Funktion platzieren Sie nun den Code zum Auslesen des Bewegungs-
sensors:
window.ondevicemotion = function(event) {
// Hier der Code, der ausgeführt werden soll, wenn das Gerät bewegt wird.
};
Zunächst definieren Sie also den EventHandler ondevicemotion , der angibt, einen
bestimmten Code auszuführen, wenn das Gerät bewegt wird.