ZingTouch: Umfangreiche Gestenerkennung per JavaScript

Die Wahrscheinlichkeit, dass deine Website über ein Smartphone oder Tablet angesteuert wird, wächst beständig. Die mobile Internetnutzung nimmt nach wie vor zu und es wird daher zunehmend wichtig, dass eine Website die besondere Bedienung per Touchdisplay berücksichtigt. Neben einfachen Taps haben sich zahlreiche Gesten etabliert, mit denen Mobilgeräte gesteuert werden. Mit ZingTouch steht dir eine umfangreiche JavaScript-Bibliothek zur Verfügung, die dir die Bedienung deiner Website über Gesten ermöglicht.

Standardgesten auch für mehrere Finger

Grundsätzlich stellt dir JavaScript alle Möglichkeiten zur Verfügung, verschiedene Gesten zu interpretieren. Mit den Touch-Events fragst du zum Beispiel Berührungen auf dem Display ab und zeichnest Bewegungen auf. Dabei ist es möglich, mehrere Finger, die sich gleichzeitig auf dem Display befinden, nachzuhalten.

Um die verschiedenen gängigen Gesten interpretieren zu können, gibt es ZingTouch. Die JavaScript-Bibliothek kann sowohl einfache Taps als auch Taps mit mehreren Fingern interpretieren und unterschiedlich darauf reagieren.

Drehungen auf dem Display oder das Auseinander- und Zusammenziehen von Fingern erkennt ZingTouch ebenfals und ermöglicht so, auf unterschiedliche Gesten reagieren zu können.

ZingTouch einbinden und Gesten abfragen

Um ZingTouch nutzen zu können, muss die Bibliothek zunächst in dein HTML-Dokument eingebunden werden. Anschließend erstellst du eine sogenannte Region, die auf eine bestimmte Geste reagieren soll. Eine solche Region ist ein beliebiges HTML-Element.

var region = ZingTouch.Region(document.getElementById("container"));

Im Beispiel wird der Variablen „region“ per „ZingTouch.Region()“ das HTML-Element mit der ID „container“ zugewiesen. Im nächsten Schritt wird eine Geste definiert, auf die reagiert werden soll.

var geste = new ZingTouch.Tap({
  numInputs: 2,
  maxDelay: 1000
});

Im Beispiel wird per „ZingTouch.Tap()“ ein Tap definiert. Diesem kannst du verschiedene Parameter übergeben. Hier werden per „numInputs“ die Anzahl der Berührungspunkte angegeben, die auf die Region erfolgen müssen. Außerdem wird per „maxDelay“ in Millisekunden angegeben, wie lange der Tap maximal dauern darf.

Im konkreten Fall müssen also zwei Finger für maximal eine Sekunde auf der Region platziert sein. Im letzten Schritt wird die Geste per „bind()“ an die Region gebunden und eine Funktion angegeben, die bei erfolgreich ausgeführter Geste gestartet werden soll.

region.bind(document.getElementById("container"), geste, function(e) {
  console.log("Tapped.");
});

Dieses einfache Beispiel sorgt dafür, dass per Zwei-Finger-Tap auf das Element mit der ID „container“ in der Konsole „Tapped.“ geschrieben wird.

Sechs Gesten individuell konfigurierbar

Neben recht einfachen Tap-Gesten sind noch fünf weitere Gesten möglich. So kannst du Drehungen per Rotate-Geste, Auseinander- und Zusammenschieben per Expand- und Pinch-Geste, Umkreisen per Pan-Geste und klassisches Wischen per Swipe-Geste realisieren.

Für jede Geste stehen dir unterschiedliche Konfigurationsmöglichkeiten zur Verfügung. So gibst du bei der Swipe-Geste beispielsweise die Geschwindigkeit an, mit der die Geste ausgeführt werden muss.

new ZingTouch.Swipe({
  escapeVelocity: 0.25,
});

Für jede Geste gibt es auch Rückgabewerten, die ausgelesen und ausgewertet werden können. So gibt die Swipe-Geste zum Beispiel einen Winkel wieder, der die Richtung der Wischgeste darstellt.

region.bind(document.getElementById("container"), "swipe", function(e) {
  console.log(e.detail.data[0].currentDirection";
});

Im Beispiel wird die Geste ohne zusätzliche Parameter einfach an die „bind()“-Methode übergeben. Bei erfolgreicher Durchführung der Geste wird der Richtungswinkel „currentDirection“ in die Konsole geschrieben.

Umfangreiche Dokumentation

ZingTouch ist ein umfangreiches Werkzeug, mit dem du alle gängigen Gesten abdeckst und diese ohne großen Aufwand in deine eigenen mobilen Webprojekte implementierst. Es gibt eine umfangreiche Dokumentation mit zahlreichen Beispielen auf CodePen.

Die Bibliothek steht unter der freien MIT-Lizenz. Du kannst ZingTouch also auch kommerziell einsetzen.