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
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
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
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
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
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
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
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