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

Immer davon ausgehend, dass Sie das Gerät vor sich in der Hand halten, bezeichnet
die X-Achse die Links-Rechts-Neigung des Geräts, die Y-Achse die Neigung nach
vorne und hinten. Die Z-Achse beschreibt die Beschleunigung von oben nach unten
(Abbildung 6.1). Die Z-Beschleunigung verändert sich z. B., wenn Sie das Gerät über
Kopf halten.

X Y Z

6

Abbildung 6.1 Die verschiedenen Achsen in der Übersicht

Als Nächstes gilt es nun, einige Variablen anzulegen, die die Daten des Bewegungs-
sensors beinhalten. Sie lesen die einzelnen Achsenbewegungen über die Schreib-
weise event.accelerationIncludingGravity.x; aus, wobei x in diesem Fall für die X-
Achsenbewegung steht. Analog dazu können Sie so die drei Achsenbewegungen in
den jeweils passenden Variablen zwischenspeichern. Der Inhalt dieser Variablen
muss mit jeder Gerätebewegung aktualisiert werden, weswegen Sie die Variablenzu-
weisungen in dem vorher definierten EventHandler ondevicemotion anlegen:

window.ondevicemotion = function(event) {
var accelerationX = event.accelerationIncludingGravity.x;
var accelerationY = event.accelerationIncludingGravity.y;
var accelerationZ = event.accelerationIncludingGravity.z;
}

Listing 6.2 Die einzelnen Werte des Bewegungssensors in Variablen speichern

Bis jetzt lesen Sie lediglich den Bewegungssensor aus und speichern die Werte in den
verschiedenen Variablen. Den Inhalt dieser Variablen gilt es nun, in der WebApp
innerhalb bestimmter Container auszugeben. Dazu erstellen Sie zunächst im body -
Bereich einige Container, in die später die Variablen geladen werden. Ein paar Über-
schriften können, zwecks besserer Übersicht, ebenfalls nicht schaden.

<h1>Folgende Werte gibt der Bewegungssensor aus:</h1>
<h2>Die Bewegung auf der X-Achse:</h2>
<p id="accX"></p>

<h2>Die Bewegung auf der Y-Achse:</h2>
<p id="accY"></p>