GeForMTjs. GeForMT-Syntax. Testumgebung. Demonstration. Werkstatt Multitouch-Gestenerkennung im Web

Transkript

1 Werkstatt Multitouch-Gestenerkennung im Web GeForMTjs Web-Framework zur Gestenerkennung auf Basis der Beschreibungssprache GeForMT GeForMT-Syntax Atomare Gesten Anzahl der Kontakte Punkt, Linie, Halbkreis, Kreis, Freiform _Bewegungsrichtung _Rotationsrichtung Operationen synchron/ asynchron (*/+), zusammengesetzer Pfad (,), sequentielle Ausführung (;) Relationen parallel, zusammenführend, auseinandergehend, kreuzend, verknüpft, nebeneinander, übereinander, geschlossen Fokus CSS-Selektoren wie z.b. Typselektor body, div Klassenselektor.class Id-Selektor #id 1: definition 2: complex 3: gesture 10: atom 11: identifier 12: vector 13: shape 14: direction 16: rotation 17: integer complex (' ' complex)* gesture (operator gesture)* relation'['gesture (operator gesture)*'] function'('atomfocus(','atomfocus)*')' atomfocus(','atomfocus)* 4: atomfocus 5: focuslist atom atom'('focuslist')' focus(','focus)* 6: focus [A-Za-z0-9#.:=! ^$*~()[] _\s-]+ 7: function 8: operator [integer]'f' [integer]'h' [integer]'b' '*' '+' ',' ';' 9: relation 'SYNC' 'JOIN' 'SPLIT' 'CROSS' 'CONNECT_START' 'CONNECT_END' 'ASIDE' 'AMONG' 'CLOSE' identifier vector['_'direction] shape['_'direction]['_'rotation] 'MOVE' 'POINT' 'HOLD' 'LINE' 'CIRCLE' 'SEMICIRCLE' 'NORTH' 'N' 'NORTHEAST' 'NE' 'EAST' 'E' 'SOUTHEAST' 'SE' 'SOUTH' 'S' 'SOUTHWEST' 'SW' 'WEST' 'W' 'NORTHWEST' 'NW' 'CLOCKWISE' 'CW' 'COUNTERCLOCKWISE' 'CCW' [1-9] [0-9]* Tabelle 1: EBNF-Sprachgrammatik Testumgebung 2F(MOVE) SEMICIRLCE_N_CCW Demonstration CROSS[LINE;LINE] JOIN[2F(LINE)]

2 API GeForMT.init(gestures,settings) Initialisierung des Frameworks. GeForMT.addGesture(gesture) Hinzufügen einer Gestendefinition. GeForMT.removeGesture(identifier) Gestendefinition über die Angabe des eindeutigen Bezeichners entfernen. GeForMT.addRecognitionStartedEventListener(function) Registrierung eines Eventlisteners, der beim Starten der Gestenerkennungsroutine aufgerufen wird. GeForMT.addRecognizedCandidatesEventListener(function) Registrierung eines Eventlisteners, der aufgerufen wird sobald ein Teil der Geste erkannt wurde. Das Event übergibt die Bezeichner der definierten Gesten, die für die Eingabe in Frage kommen. GeForMT.addRecognitionFailedEventListener(function) Registrierung eines Eventlistener, der aufgerufen wird, wenn keine Geste erkannt wurde. GeForMT.setFeedback(bool) Aktivierung/Deaktivierung der visuellen Rückmeldung. Globale Einstellungen (Objektmodell settings) var settings={ feedback: true, preventdefault: false, contiguityinterval: 800 // Visuelle Rückmeldung (default true) // Unterdrückung des Standardverhaltens des Browsers (default true) // Zeitfenster für die Erkennung bei sequentiell ausgeführten Gestenpfaden in Millisekunden (default 1000) Gestendefinition (Objektmodell gesture) var gesture ={ identifier: dragobjects, // Eindeutiger Bezeichner expr: 1F(MOVE(.objects)), // GeForMT-Ausdruck online: true, // Online/Offline (default false) handler: function(e){ // Eventlistener für das GestureRecognizedEvent

3 GestureRecognizedEvent Interface e.identifier Eindeutiger Bezeichner der Geste e.expr GeForMT-Ausdruck der erkannten Geste e.pathes Pfaden der Gesteneingabe repräsentiert durch Koordinatelisten. Liefert eine Liste von Gestensequenzen, die jeweils eine Liste von Template-Objekten sind. Ein Template-Objekt repräsentiert genau einen Pfad eines Fingers, beschrieben durch eine Liste von Koordinaten (points). Bsp: 2F(LINE) var liniezeigefinger = e.pathes[0][0].points ; var liniefinger2 = e.pathes[0][1].points Bsp: 1F(LINE);1F(LINE) var erstelinie = e.pathes[0][0].points; var nachfolgendelinie= e.pathes[1][0].points e.events Alle TouchEvents, die die Gesteneingabe repräsentieren. Liefert eine Liste von Gestensequenzen, in denen jeweils alle aufgetretenen TouchEvent-Objekte gesammelt sind. Deren Spezifikation folgt dem TouchEvent-Interface des W3C (siehe ). Bsp: 2F(LINE) var touchstartevent = e.events[0][0]; Bsp: 1F(LINE);1F(LINE) var touchstarteventerstelinie = e.events[0][0]; var touchstarteventnachfolgendelinie = e.events[1][0]; e.currentevent Aktuelles TouchEvent-Objekt der Gesteneingabe. Siehe W3C TouchEvent Interface: e.duration Dauer der Gesteneingabe in Millisekunden e.getboundingbox() Repräsentation der Rechteckhülle der Eingabe. Gibt ein Objekt mit den Attributen top, right, bottom und left zurück. e.getmidpoint() Gibt das Zentrum der Geste als Koordinate (x,y) zurück.

4 Minimalbeispiel Kreisgeste <head> <script type= text/javascript src= GeForMT.min.js ></script> <script type= text/javascript > window.onload = function(){ var settings = { feedback: true var gestures = { circle: { expr: 1F(CIRCLE), handler: function(e){ // Kreisgeste erkannt GeForMT.init(gestures,settings); GeForMT.addRecognitionFailedEventListener(function(){ // z.b. Hilfe aufrufen ); ; </script> </head>

5 TUIO-Unterstützung Mögliche Tracker- Implementierungen für verschiedene Eingabegeräte werden unter vorgestellt. Im Webkontext ist die Client- Anwendung üblicherweise der Browser. Um die TUIO-Daten in Zusammenhang mit GeForMTjs zu nutzen, sind folgende Erweiterungen zu installieren bzw. einzubinden: 1. Installiere das Browser-Plugin nptuio-client. Weitere Informationen und Anweisungen unter: Um die TUIO-Daten in der Webseite zu empfangen zu können, ist das Plugin im HTML-Dokument als Multimediaelement object einzubetten. (siehe Beispiel-Code unten) 2. Verwende die JavaScript-Bibliothek MagicTouch.js. Sie kann unter heruntergeladen werden. Diese nimmt die TUIO-Daten und verarbeitet sie zu TouchEvents, die GeForMTjs erkennt. Sie wird über den script-tag eingebunden. (siehe Beispiel-Code unten) <head> <script type= text/javascript src= GeForMT.min.js ></script> <script type= text/javascript src= MagicTouch.js ></script> </head> <body> <object id="tuio" type="application/x-tuio"> //optional: Nachricht, wenn das Plugin nicht installiert ist </object> </body>