04.052015

Beschleunigungssensor mit Javascript benutzen

Die meisten Smartphones haben einen Beschleunigungssensor oder auch Accelerolmeter mit eingebaut. Wie man diesen benutzt zeige ich euch heute.

Dabei gibt es drei verschiedene Richtungen, die ausgelesen werden können. Einmal die X, Y und Z Achse, so können wir jede bewegen registrieren und darauf reagieren.

Eine wichtige Frage vorab. Welche Smartphones unterstützen den Beschleunigungssensor überhaupt? Android unterstützt es erst ab Version 4.0 mit dem Chrome. Bei iOS scheint es auf jedem iPhone zu funktionieren.

Damit wir die Veränderungen besser sehen können, benutzen wir für jede Achse eine Headline zum ausgeben.

<h1 id="x-achse"></h1>
<h1 id="y-achse"></h1>
<h1 id="z-achse"></h1>

In diese werden wir dann dynamisch unsere Werte schreiben. Das machen wir mit Hilfe von jQuery und unserem Accelerolmeter.

<script type="text/javascript">
  $(document).ready(function() {
    window.ondevicemotion = function(coords) {
      var x = coords.acceleration.x;
      var y = coords.acceleration.y;
      var z = coords.acceleration.z;

      $('#x-achse').html('X-Achse:' + x);
      $('#y-achse').html('Y-Achse:' + y);
      $('#z-achse').html('Z-Achse:' + z);
    }
  });
</script>

Das wars auch schon. Sollte eurer Testgerät den Beschleunigungsensor unterstützen, könnt euch jetzt so die Beschleunigungen in die jeweiligen Richtungen anzeigen lassen und darauf reagieren.