Auslesen Lagesensoren mobiler Geräte (Handy/Tablet)
Lagesensoren sind in den meisten mobilen Geräten wie Handys und Tablets verbaut. Diese können über JavaScript ausgelesen werden und somit hat man Zugriff auf:
- aktuellen Neigungswinkel nach vorne und hinten
- aktuellen Neigungswinkel nach rechts und links
- Kompass um auf Ausrichtung zu schließen (der Kompass gibt die Richtung zum Nordpol an).
Im folgenden JavaScript-Programm wollen wir diese 3 Sensoren auslesen und uns diese Werte ausgeben lassen. Den „Kompass“-Wert übertragen wir auf eine Grafik, die je nach Wert entsprechend gedreht wird.
EventListener deviceorientation
Im ersten Schritt aktivieren wir in JavaScript einen EventListener für das Ereignis deviceorientation.
window.addEventListener("deviceorientation", handleOrientation, false);
Um sicherzustellen, dass dieser aktiv wird und alle benötigten Elemente bereits geladen sind, packen wir diesen ans Ende unseres Quellcodes in den Bereich „window.onload“:
window.onload = function() {
window.addEventListener("deviceorientation", ausrichtungAuslesen, false);
}
Jetzt können wir unsere Funktion „ausrichtungAuslesen“ integrieren:
function ausrichtungAuslesen(ereignis) {
var winkelAlpha = ereignis.alpha;
var winkelBeta = ereignis.beta;
var winkelGamma = ereignis.gamma;
}
window.onload = function() {
window.addEventListener("deviceorientation", ausrichtungAuslesen, false);
}
Noch passiert nichts Sichtbares. Unsere ermittelten Werte sollen nun auf dem Display ausgegeben werden. Wir benötigen 3 Bereiche in HTML mit jeweils einer ID, auf die wir mit getElementById zugreifen können.
<p>alpha: <span id="datenAlpha"></span></p>
<p>beta: <span id="datenBeta"></span></p>
<p>gamma: <span id="datenGamma"></span></p>
Und nun noch unsere Funktion um die Ausgabe erweitern:
function ausrichtungAuslesen(ereignis) {
var winkelAlpha = ereignis.alpha;
var winkelBeta = ereignis.beta;
var winkelGamma = ereignis.gamma;
document.getElementById('datenAlpha').innerHTML = winkelAlpha;
document.getElementById('datenBeta').innerHTML = winkelBeta;
document.getElementById('datenGamma').innerHTML = winkelGamma;
}
Das Ganze auf einen Webserver packen und testen!
Zahlen „beruhigen“
Bei der Nutzung auf dem Handy fällt auf, dass die Zahlen sehr rege sich ändern. Es ist übersichtlicher, wenn die Zahlenwerte nicht so heftig springen – also beschränken wir die Ausgabe auf 2 Nachkommastellen.
var winkelAlpha = Math.round(ereignis.alpha * 100) / 100;
var winkelBeta = Math.round(ereignis.beta * 100) / 100;
var winkelGamma = Math.round(ereignis.gamma * 100) / 100;
Kompass anzeigen und nach ermitteltem Wert des Lagesensors drehen
Nachdem unser Wert „winkelAlpha“ nichts anderes ist, wie die Ausrichtung des Kompasses in Richtung Norden lassen wir uns eine Grafik eines Kompasses anzeigen und drehen diese abhängig vom Winkel. Das wird über die CSS3-Anweisung webkitTransform erledigt:
function ausrichtungAuslesen(ereignis) {
var winkelAlpha = Math.round(ereignis.alpha * 100) / 100;
var winkelBeta = Math.round(ereignis.beta * 100) / 100;
var winkelGamma = Math.round(ereignis.gamma * 100) / 100;
document.getElementById('datenAlpha').innerHTML = winkelAlpha;
document.getElementById('datenBeta').innerHTML = winkelBeta;
document.getElementById('datenGamma').innerHTML = winkelGamma;
document.getElementById("kompass").style.webkitTransform = "rotate(" + winkelAlpha + "deg)";
}
Im HTML-Code muss natürlich noch unsere Grafik für den Kompass integriert werden:
<img id="kompass" src="bilder/kompass.png">
Folgend der komplette Quellcode, falls beim nachvollziehen des Tutorials etwas verloren gegangen ist:
<html>
<head>
<style>
body{font-size:2em;}
</style>
<img id="kompass" src="https://www.javascript-kurs.de/bilder/kompass.png">
<h1>Sensoren von mobilen Geräten auslesen</h1>
<p>alpha: <span id="datenAlpha"></span></p>
<p>beta: <span id="datenBeta"></span></p>
<p>gamma: <span id="datenGamma"></span></p>
<script>
function ausrichtungAuslesen(ereignis) {
var winkelAlpha = Math.round(ereignis.alpha * 100) / 100;
var winkelBeta = Math.round(ereignis.beta * 100) / 100;
var winkelGamma = Math.round(ereignis.gamma * 100) / 100;
document.getElementById('datenAlpha').innerHTML = winkelAlpha;
document.getElementById('datenBeta').innerHTML = winkelBeta;
document.getElementById('datenGamma').innerHTML = winkelGamma;
document.getElementById("kompass").style.webkitTransform = "rotate(" + winkelAlpha + "deg)";
}
window.onload = function() {
window.addEventListener("deviceorientation", ausrichtungAuslesen, false);
}
</script>
</body>
</html>
Zum Testen einfach diese URL auf dem Handy oder Tablet aufrufen:
https://www.javascript-kurs.de/beispielcode/kompass.htm