Jeder, der sich schon ein wenig damit befasst seine Webseite für mobile Geräte zugänglich zu machen, der wird auch bereits über Web Apps gestolpert sein. Kurz erklärt sind das Webseiten, die sowohl im Webbrowser des Geräts laufen, als auch vom Homescreen aus gestartet werden können. Was viele jedoch nicht wissen: Es ist möglich auf zahlreiche Hardwarefunktionen zuzugreifen. So ist es z.B. möglich das Gyroskop des Apfels auszulesen und damit ein kleines Spiel zu programmieren.

Die Grundfunktionen

Es kann natürlich immer einmal passieren, dass ein Gerät die benötigten Funtkionen nicht unterstützt und so beispielsweise das Gyroskop nicht ausgelesen werden kann. Das Problem ist dabei, dass der Nutzer meist nicht merkt wo das Problem liegt und er geht von einer “schlechten” Web App aus. Deshalb sollte man immer zunächst prüfen, ob das DeviceMotionEvent vorhanden ist, mit anderen Worten, das Gyroskop ausgelesen werden kann.

if (window.DeviceMotionEvent == undefined && deviceorientation.alpha != null) {
    alert ("Gyroskop ist nicht verügbar");
}

Das etwas spannendere

Das Gyroskop lässt sich mit dem folgenden Code auslesen:

window.ondeviceorientation = function(event) { //Gyroskop
  alpha = Math.round(event.alpha);
  beta = Math.round(event.beta);
  gamma = Math.round(event.gamma);
}

Durch ein wenig experimentieren findet ihr sicher schnell heraus, welche Achse ihr für was gebrauchen könnt.

Gib Gas!

Apple wäre ja nicht Apple, wenn nicht auch noch ein Beschleunigungssensor in das Gerät eingebaut wäre. Er kann wie folgt ausgelesen werden:

window.ondevicemotion = function(event) { //Beschleunigungssensor
  if (acceleration != null) {
    ax = event.accelerationIncludingGravity.x
    ay = event.accelerationIncludingGravity.y
    az = event.accelerationIncludingGravity.z
    }
  rotation = event.rotationRate;
  if (rotation != null) { //Rotation
    arAlpha = Math.round(rotation.alpha);
    arBeta = Math.round(rotation.beta);
    arGamma = Math.round(rotation.gamma);
  }
}

Auch hier werdet ihr sicher schnell herausfinden, was was macht. Zusätzlich kann auch – wenn verfügbar – die Rotation des Geräts ausgelesen werden.

Aber Achtung

Je nach Orientierung des Geräts (Portrait- und Landscrape Modus), können die Werte sich anders Verhalten als erwartet. Es ist also unbedingt erforderlich das vorher zu testen. Sollten sich die Werte tatsächlich anders Verhalten, so empfiehlt sich eine Prüfung der Ausrichtung:

Folgt (Monospace)

Erste Tests

Ein eine gut verständliche und übersichtliche “Testvorrichtung” hat Peter Friese in seinem englischsprachigen Blog unter http://demos.peterfriese.de/gyro/gyro.html online gestellt. Zum Artikel geht es hier lang. Ich werde mich darauf beschränken ein Spiel zu basteln 🙂