Der Accelerometer (oder auch G-Sensor) lässt sich normal über Events und Javascript abfangen und auslesen. Allerdings funktioniert dies nicht auf allen mobilen Browsern. Der Stock Browser meines Galaxy untertützt onDeviceMotion leider nicht. Dafür andere Browser - darunter google Chrome, Firefox und wohl der Safari für das iPhone. Der Stock-Browser unterstützt dafür Device Orientation (Beispiel siehe unten). Damit lässt sich ohnehin viel besser hantieren und ist unter allen von mir gestesteten Browsern gelaufen.

Da ich mich in letzter Zeit wieder häufiger mit Webdesign, HTML5 und Programmierung für mobile Geräte beschäftige, ist mir der Beschleunigungssensor für mobile Geräte ins Blickfeld geraten. Mit dem Sensor lassen sich doch ein paar nette Sachen umsetzen.

Grundsätzliches kann man auf mozilla.org nachlesen:


onDeviceMotion

Hier ein Quick and Dirty Code Schnipsel zum Umgang mit dem Beschleunigungssensor. Wer sich fragt, was die ganzen IF Abragen sollen, der Sensor ist verdammt empfindlich und schmeisst selbst dann Werte <> 0 raus, wenn das Smartphone flach auf dem Tisch liegt. Außerdem ist nicht jede abrupte Bewegung des Smartphones/iPhones auch gleich eine Schüttelbewegung.

Schüttelt man das Smartphone nach link oder rechts, wird das aktuell angezeigte Bild gewechselt:

  1. HTML


    <img id="shaker-img" src="my-image.1.jpg">

  2. JAVASCRIPT Quick and Dirty Part I

    Über die Variablen sensibility und minTime lässt sich die Empfindlichkeit der Abfrage (Schüttelbewegung) beeinflussen.

    1. var pos = 0;
    2. var lastAction=new Date();
    3. var images = ['my-image-1.jpg','my-image-2.jpg','my-image-3.jpg'];
    4. function shakeIt()
    5. {
    6. window.ondevicemotion = function(coords) {
    7. var sensibility = 3;
    8. var minTime = 500;
    9. var accX = coords.acceleration.x;
    10. var time = new Date();
    11. if (time-lastAction<minTime) return;
    12. if (accX>=sensibility || accX<=-sensibility) {
    13. pos += accX > 0 ? 1 : -1;
    14. pos = pos > images.length-1 ? 0 : pos < 0 ? images.length-1 : pos;
    15. document.getElementById('shaker-img').src=images[pos];
    16. lastAction=time;
    17. }
    18. }
    19. }
    20. shakeIt();


Device Orientation

Dasselbe lässte sich auch mit dem Device Orientation Event umsetzen. Hier wird nicht geschüttelt oder gerührt, sondern einfach das Smartphone nach links oder rechts (hinten) gekippt. Finde ich persönlich angenehmer.

Auch wenn diese Methode noch als "experimentelle Technologie" bezeichnet wird, funktioniert Sie doch bereits ganz brauchbar.

JAVASCRIPT Quick and Dirty Part II


Über die Variablen minGamma und resetGamm, kann man wieder die Empfindlichkeit der Abfrage steuern.

Die IF Abragen dienen dazu, die Befehlsfolge erst auszuführen, wenn das Smartphone nach einer Kippbewegung wieder in seiner Ausgangslage angekommen ist und nicht, wenn die Hand anfängt zu zittern. Lässt sich sicher eleganter lösen.

  1. var pos = 0;
  2. var lastGamma=0;
  3. var images = ['my-image-1.jpg','my-image-2.jpg','my-image-3.jpg'];
  4. function turnIt(event)
  5. {
  6. var minGamma = 25;
  7. var resetGamma = 15;
  8. var gamma = event.gamma;
  9. if (gamma>=-resetGamma && gamma <= resetGamma) lastGamma=0;
  10. if (lastGamma<=-minGamma && gamma <=-minGamma) return;
  11. if (lastGamma>=minGamma && gamma >=minGamma) return;
  12. if (gamma>=minGamma || gamma<=-minGamma) {
  13. pos += gamma > 0 ? 1 : -1;
  14. pos = pos > images.length-1 ? 0 : pos < 0 ? images.length-1 : pos;
  15. document.getElementById('shaker-img').src=images[pos];
  16. lastGamma=gamma;
  17. }
  18. }
  19. window.addEventListener("deviceorientation", turnIt, true);

Demos

Demo 1 - Schüttelbewegung nach links oder rechts

Demo 2 - Kippbewegung nach links oder rechts hinten

Demo 3 - Kippbewegung nach vorne oder hinten

Sicherlich lassen sich mit dem Bewegungssensor grundsätzlich ein paar nette Sachen anstellen. Funktionert auch wunderbar, solange das Smartphone flach in der Hand liegt und nicht aufrecht gehalten wird. Dafür müsste man ein paar mehr Berechnungen mit einfließen lassen.


Update

Mittlerweile gibt es ein jQuery plugin für die Accelerolmeter Funktionalität. Inklusive Anything Slider für responsive Internetseiten.

jQuery Plugin Homepage

teile diesen Beitrag

0 Kommentare

Diskutiere mit!

 
Kommentar senden