Drei Winkel zur Messung der Device Orientation

Der Winkel, der die Richtung des Gerätes angibt, ist der α-Winkel. Er hat einen Wert zwischen 0° und 360°, wobei bei 0° das Gerät nach Norden zeigt.

Der Winkel, der die Neigung nach vorne beziehungsweise nach hinten angibt, ist der β-Winkel. Er hat einen Wert zwischen –180° und 180°. Bei 90° steht das Gerät normal aufrecht, bei –90° steht das Gerät auf dem Kopf. Bei 0° befindet sich das Gerät in der Waage – zumindest was diesen Neigungswinkel betrifft. Bei 180° beziehungsweise –180° liegt das Gerät so, dass das Display nach unten zeigt.

Der dritte Winkel ist der γ-Winkel. Er gibt die Neigung des Gerätes nach links beziehungsweise rechts an. Er hat einen Wert zwischen –90° und 90°. Bei 90° steht das Gerät auf der rechten Seite, bei –90° steht das Gerät auf der linken Seite.

Mit diesen drei Winkeln lässt sich jede Neigung des Gerätes darstellen.

Device Orientation als JavaScript-Ereignis aufrufen

Um die aktuelle Lage eines Gerätes abzurufen, wird mittels JavaScript das Ereignis „deviceorientation“ aufgerufen, welches immer dann eine anzugebende Funktion ausführt, wenn sich die Lage des Gerätes ändert:

window.addEventListener("deviceorientation",  lagebestimmung, false);

Im Beispiel wird die Funktion „lagebestimmung()“ immer dann aufgerufen, wenn das Gerät bewegt wird und sich so die Lage verändert. Über die Funktion lassen sich nun die drei Winkel auslesen:

function lagebestimmung(ereignis) {
  var winkel_alpha = ereignis.alpha;
  var winkel_beta = ereignis.beta;
  var winkel_gamma = ereignis.gamma;
}

Die Funktion ruft die Werte der drei Winkel ab und übergibt sie jeweils einer Variable. Sie lassen sich nun nutzen.

Anwendungsbeispiel für Device Orientation

Als kleine Spielerei lassen sich beispielsweise Grafiken über Änderung der Neigungswinkel dreidimensional drehen. Dazu werden der β- und der γ-Winkel der CSS-Eigenschaft „transform“ übergeben:

function lagebestimmung(ereignis) {
  var winkel_beta = Math.round(ereignis.beta);
  var winkel_gamma = Math.round(ereignis.gamma);
  document.getElementById("logo").style.webkitTransform = "rotate(" + winkel_gamma + "deg) rotate3d(1, 0, 0, " + winkel_beta + "deg)";
}

Da bisher nur Webkit-Browser wie Chrome und Safari die „rotate3d“ können, funktioniert derzeit nur die Vender-Variante „-webkit-transform“ beziehungsweise „webkitTransform“ in der JavaScript-Schreibweise.

Nutzt ihr bereits die Möglichkeit, die Lage von mobilen Geräten per Device Orientation auszulesen? Welche Anwendungsmöglichkeiten hierfür könnt ihr euch vorstellen?

Weiterführende Links zum Thema mobiles Webdesign:

• Adobe gibt Flash für mobile Geräte auf, setzt auf HTML5
• Mobile HTML5-Entwicklung für iOS mit mehr Features, dank MobiUs
• Spiele für das iPad entwickeln mit Codify
• Responsive Webdesign kann er auch, der Werkzeugkasten Foundation 2.0
• Responsive Webdesign mit HTML5 und CSS3 – Grundlagen