Mehrstrich Gesten Erkennung - UI Benutzerinteraktion

Der Artikel "A Lightweight Multistroke Recognizer for User Interface Prototypes" von Lisa Anthony und Jacob O. Wobbrock beschreibt eine Mehrstrich-Gestenerkennung, die hauptsächlich für den Einsatz im User Interface Prototyping gedacht ist.  Diesen von den Autoren s.g. "$N Multistroke Recognizer"  habe ich hier zu Experimentierzwecken als ActionScript 3 - Bibliothek realisiert und in der oben zu sehenden Demo-Anwendung eingesetzt.

Das  Verfahren beruht im Grunde darauf, die Gestenstriche in eine Normal-Form zu transformieren und damit für Vergleichbarkeit gegen eine Gesten-Template-Bibliothek zu sorgen. Die Gesten-Normalform ist eine Einstrich-Geste mit den folgenden Eigenschaften ( Farb-Code bezieht sich auf die entsprechende  Darstellung in der Demo-Anwendung):

• Anfangspunkt (blau)
• definierte Anzahl Abtastpunkte (rot)
• geometrischer Schwerpunkt (blau)
• Einheitsskalierung bei
• einem Seitenverhältnis unter einem bestimmten Schwellwert:  Rechteck mit Beibehaltung des Original-Seitenverhältnisses (grau)
• sonst: Skalierung auf ein Quadrat (grau)
• Drehung des Gestenstrich-Anfangspunktes auf einen Winkel von 0° in Bezug zum geometrischen Schwerpunkt und
• Markierung der Gesten-Orientierung in der Ebene durch einen Einheitsvektor ( kurze blaue Linie )

Die Normal-Eigenschaften  einer eingegebenen Geste werden in der Demo-Anwendung in einem kleinen Schaubild angezeigt. Der geometrische Schwerpunkt wird darin in den Koordinaten-Nullpunkt gelegt und der Einheitsvekor in Form eines vom Schwerpunkt ausgehenden kurzen Linienzugs gekennzeichnet. Das graue Rechteck bzw. Quadrat ist der enganliegendste rechtwinklige Linienzug um die Abtastpunkte (rot) und stellt die Einheitsskalierung dar. Die Abtastpunkte fallen in der Darstellung aus diesem enganliedendsten Linienzug lediglich optisch nur deshalb heraus, weil für eine ruhiges Erscheinungsbild die Schwerpunkte beider Geometrien im Koordinaten-Nullpunkt liegen.

Ein einzelnes Gesten-Template enhält alle Permutationen  möglicher Strichführungen der zu Grunde liegenden normalisierten Einstrich-Geste bezogen auf die Anzahl Striche der Original-Geste.  Dies wird in dem Schaubild als "Template-Scan" dargestellt.  Eine Einstrich-Geste hat demnach 2 Permutationen, bei zwei Strichen sind es bereits 8 Permutationen usw. Es ist offensichtlich, dass mit wachsender Strichzahl die Permutationen pro Template schnell ins uferlose ansteigen und die Ausführungsgeschwindigkeit der Erkennung entsprechend abfällt. Deshalb habe ich die maximale Anzahl Striche, aus denen eine Geste bestehen darf, auf 3 begrenzt. Die praktische Grenze der Gesten-Erkennung liegt jedoch höher, wenn man auf "optischen Spielereien", wie in der Demo-Anwendung eingesetzt, verzichtet. Allerdings empfinde ich Gesten mit mehr als drei Strichen praktisch schwer zu handhaben.

Die zu testende Geste wird nach der Normalen-Transformation, bildlich gesprochen, während des Erkennungprozesses sukzessive möglichst passgenau über jede Permutation jedes Templates der Bibliothek gelegt. Die Passgenauigkeit ist dabei über den Abstand der beiden Pfade zueinander definiert und wird im Treffer-Fall in der Demo-Anwendung als "Score" angezeigt. Je höher der "Score", desto geringer war der Pfadabstand, desto genauer passten beide Pfade übereinander.

Kurze Bedienungsanleitung für das Demo-Programm

Durch Klick auf ein Gesten-Template-Feld ( durchnummeriert von 0 .. 5 ), wird der Lernmodus eingeschaltet. Die Gestenstriche werden in das grosse Quadrat gezeichnet. Durch Klick auf den Speicher-Knopf wird der Zeichenflächen-Inhalt in das markierte Template-Feld übernommen. Durch Klick auf den Löschen-Knopf wird die Zeichenfläche geleert. Mit jedem gezeichneten Strich werden die Permutationen der aus allen bereits gezeichneten Strichen resultierenden normalisierten Einstrich-Geste angezeigt.

Im Erkennen-Modus wird 1/2 Sekunde nach Zeichnen eines Strichs automatisch der Vergleich gegen die Bibliothek gestartet. Für eine Mehrstrich-Geste muss man also entsprechend flüssig zeichnen, um innerhalb dieses Zeitfensters zu bleiben. Mit dem Vergleichstart wird die aus der eingebenen Geste resultierende normalisierte Einstrich-Geste angezeigt.

Mit dem Knopf "RotationsInvarianz" lässt sich bestimmen, ob der Gestenvergleich unter Berücksichtigung der Original-Lage der Test-Geste durchgeführt werden soll oder unabhängig davon. Der "RatioSchwellwert" bestimmt, ab welchem Seitenverhältnis der Test-Geste deren Einheitsskalierung in eine Quadrat-Form ( folglich mit Verzerrung ) erfolgen soll und damit über die Differenzierung zwischen linienhaften und flächigen Gestenzügen.