Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Device Orientation: Neigung und Position von Mobilgeräten in JavaScript nutzen

    Device Orientation: Neigung und Position von Mobilgeräten in JavaScript nutzen

Mobile Geräte wie Smartphones und Tablets besitzen in der Regel Lagesensoren, welche die Neigungswinkel nach vorne und hinten beziehungsweise nach rechts und links des Gerätes messen. Außerdem besitzen sie einen Kompass, der die Richtung des Gerätes in Relation zum magnetischen Nordpol misst. Mit JavaScript lassen sich diese drei Werte auslesen und für Awendungen einer Website nutzen.

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.

Device Orientation: α-Winkel
Device Orientation: α-Winkel

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.

Device Orientation: β-Winkel
Device Orientation: β-Winkel

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.

Device Orientation: γ-Winkel
Device Orientation: γ-Winkel

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

Anzeige

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:

Finde einen Job, den du liebst

4 Reaktionen
Karriereberater

Immer nehr native Controls werden mit HTML5 möglich. bald sind Native Apps völlig überflüssig. Danke für die News

Antworten
Christian Baer

He he, hab's mal mit Safari/iPhone getestet: http://.dev.epom.de

Antworten
Felix
Felix

sehr geil, wenn ich das richtig verstanden habe, dann muss es mir möglich seine, meine Website dem Handy hinterherlaufen zu lassen oder? also wenn ich mein Handy im 36° Winkel halte, dann kann ich die Homepage auch im 36° Winkel darstellen.. oder? :)

werd ich Mal ausprobieren ;)

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot