in Programmierung

Shake It Baby

Wenn man mobile HTML5-Apps Entwickelt stößt man schnell an die Grenzen der Eingabemöglichkeiten durch den Nutzer. Ich programmierte im vergangen Jahr ein kleines Minesweeper für einen Softwarewettbewerb. Die Desktop-Version war in ihrer Nutzerinteraktion stark an dem Original von Microsoft angelehnt. Insbesondere die Verwendung von rechter und linker Maustaste. Nun hat man auf einem mobilen Endgerät mit Touch-Eingabe nicht die Möglichkeit zwischen den Fingern zu unterscheiden. Auch Multi-Touch wird von den meisten Browsern nicht unterstützt. Was also machen?

Ich ermöglichte den Nutzer die Eingabe eines Rechte-Maustaste-Klicks, indem er das Gerät schüttelte (und der Klick auf alle möglichen Elemente angewendet wurde). Diese Erleichterung sollte auch den kleineren Bildschirm auf mobilen Endgeräten kompensieren. JavaScript bietet nativ derzeit noch kein „Schüttel-Event“ an. Das habe ich daher selbst programmiert und stelle es nun unter GNU GPL v3 auf Github zur Verfügung.

Wie funktioniert es?

Ich fange in einer  gekapselten Funktion das devicemotion-Event ab. Sobald innerhalb einer gewissen Zeitspanne das Gerät auf einer Achse dreimal in jeweils entgegengesetzter Richtung wird auf dem window-DOM-Element das Element x-deviceagitation getriggert. Dabei wird dem Trigger auch die Achse, auf der das schütteln erkannt wurde, mitgegeben.

Wie binde ich es ein?

Lade die Datei deviceAgitation.js herunter und binde sie ein. Außerdem muss ein EventHandler für window installiert werden.

Du kannst die Datei auch mittels bower installieren:

bower install deviceAgitation

Demo gefälligst?

Rufe diese Demo auf. Je nach Achse, über die geschüttelt wird, ändert sich die Hintergrundfarbe.