TP : Reconnaissance de gestes 1 Préambule 2 Acquisition

Université Lille 1 - Master 1 informatique 2012-2013
IHM
TP : Reconnaissance de gestes
Objectifs
– se familiariser avec la reconnaissance de gestes.
Figure 1 – L’application finale.
1 Préambule
Différentes techniques de reconnaissance de gestes existent parmi lesquelles on peut citer les modèles
de Markov cachés, les réseaux de neurones, les classifieurs statistiques et la programmation dynamique.
Nous proposons ici de mettre en oeuvre la technique de reconnaissance de gestes proposée dans l’article
de recherche "Gestures without Librairies, Toolkits or Training : A $1 Recognizer for User Interface
Prototypes" 1écrit par Wobbrock, Wilson et Li et publié en 2007 à la conférence User Interface Sofware
and Technology (UIST). La technique proposée a l’avantage d’être simple à implémenter comparée aux
autres techniques tout en donnant des taux de reconnaissance élevés pour des gestes simples (Figure 2).
La technique se limite à la reconnaissance de gestes ne comportant qu’un seul tracé (unistroke) et peut se
coder en une centaine de lignes pour à la fois définir un geste et le reconnaître. Chaque geste correspond
à une suite de points ordonnés avec un point de départ et un point d’arrivée.
Figure 2 – Exemples de gestes simples reconnus par le $1 recognizer. Pour chaque geste, le point de
départ est indiqué par un petit disque.
2 Acquisition des événements souris
Pour intégrer la reconnaissance de gestes dans une application, il est nécessaire de distinguer l’inter-
action avec les composants de l’exécution de gestes. La technique de reconnaissance de gestes que nous
1. http://depts.washington.edu/aimgroup/proj/dollar/
1

mettons en oeuvre impose par ailleurs de spécifier le début et la fin d’un geste. Pour cela il est nécessaire
d’utiliser un mode d’interaction spécifique : utilisation d’une touche clavier ou d’un bouton souris autre
que ceux habituellement utilisés dans l’application (utilisation du bouton droit ou celui du milieu).
Afin de pouvoir exécuter des gestes sur n’importe quel composant d’une application, il est nécessaire
d’utiliser le glass pane de Swing. Le glass pane 2correspond à une sorte de vitre placée au dessus des
autres composants qui est complètement transparente par défaut et qui peut intercepter les événements
souris et clavier. Le glass pane permet également d’afficher au dessus des autres composants le geste en
cours de réalisation.
L’utilisation d’un glass pane nécessite de définir une classe qui hérite de JComponent et qui redéfinit
la méthode paintComponent. Pour intercepter les événements souris, il faut y attacher les listeners cor-
respondants. L’intégration du glass pane à l’application se fait en utilisant la méthode setGlassPane de
JFrame. Les fichiers TestGUI.java 3et MyGlassPane.java 4illustrent la mise en oeuvre du glass pane.
Dans l’exemple donné, le geste se spécifie en faisant un drag avec le bouton droit de la souris :
utilisation de e.getButton() == MouseEvent.BUTTON3 dans le code. Il se peut que la version de Java
installée sur votre machine ne permette pas de distinguer les boutons (e.getButton() renvoie toujours 0).
Dans ce cas, remplacez le bouton droit par la touche control par exemple. Remplacez alors l’instruction
précédente par e.isControlDown(). Dans ce cas, vous ne pourrez pas spécifier de geste sur la liste.
Figure 3 – Le glass pane.
3 L’algorithme
L’algorithme de reconnaissance prend en entrée une liste de points qui correspond à la position du
pointeur de la souris à l’écran au cours du temps suite, par exemple, à un geste de drag avec le bouton
droit de la souris. Cette liste de points suit les traitements successifs suivants :
1. Ré-échantillonnage pour avoir un nombre de points constant indépendamment de la fréquence
d’échantillonnage du périphérique (nombre d’acquisition du signal par seconde) et de la vitesse
d’exécution du geste
2. Rotation du geste pour le rendre indépendant de l’angle suivant lequel il est exécuté par rapport à
l’écran
3. Mise à l’échelle du geste pour le rendre indépendant de la taille suivant laquelle il est réalisé
4. Translation du geste pour le rendre indépendant de la position à laquelle il est réalisé
La liste de points obtenue est alors comparée à chacun des templates existants en appliquant une
série d’ajustements angulaires pour trouver l’alignement optimal. Le template correspond à un geste de
référence auquel on associe une liste de points et un nom. Chaque comparaison permet de calculer une
note comprise entre 0 et 1 qui reflète le degré de similarité entre le geste réalisé et le template, calculé
comme une distance euclidienne entre les deux gestes. Le template qui obtient le score le plus élevé est
considéré comme le geste exécuté.
2. http://java.sun.com/docs/books/tutorial/uiswing/components/rootpane.html
3. TestGUI.java
4. MyGlassPane.java
2

4 Mise en oeuvre
4.1 Les templates
Les templates sont définis par la classe Template du fichier Template.java 5. Ils comprennent un nom
et une liste de points. Les templates sont gérés par la classe TemplateManager (TemplateManager.java 6)
qui stocke les templates par défaut correspondants aux gestes représentés sur la figure 2et qui permet
l’ajout de nouveaux templates. Les gestes par défaut sont stockés dans le fichier gestures.xml 7, chargé
par TemplateManager (vous avez pour cela besoin d’installer la librairie jdom.jar 8).
Les étapes suivantes décrivent les traitements que subissent les points d’un geste. A chaque traite-
ment correspond une ou plusieurs méthodes de la classe OneDollarRecognizer (fichier OneDollarReco-
gnizer.java 9).
4.2 Etape 1 : Ré-échantillonnage
Le nombre de points d’un geste dépend de la fréquence d’échantillonnage du périphérique d’entrée
et de la vitesse à laquelle le geste est exécuté. Pour rendre les gestes directement comparables, même
à différentes vitesses, les M points d’un chemin sont ré-échantillonnés en N points espacés à intervalles
réguliers. L’article propose d’utiliser la valeur 64 pour N.
Figure 4 – Illustration de l’influence de la vitesse d’exécution d’un geste sur le nombre de points.
L’algorithme de ré-échantillonnage consiste à calculer la longueur totale du chemin puis à la diviser par
63 pour obtenir la nouvelle distance entre deux points. Le chemin est ensuite reparcouru et les nouveaux
points sont déterminés par interpolation linéaire. Cette étape est codée dans la méthode resample de la
classe oneDollarRecognizer.
Figure 5 – Algorithme de rééchantillonage.
5. Template.java
6. TemplateManager.java
7. gestures.xml
8. jdom.jar
9. OneDollarRecognizer.java
3

4.3 Etape 2 : Rotation basée sur l’"angle indicatif"
Afin de rendre les gestes indépendants de l’angle suivant lequel ils sont exécutés par rapport à l’écran,
ils doivent être ré-orientés avant de pouvoir être comparés.
L’algorithme consiste d’abord à trouver le centre du geste (valeur moyenne des abscisses et des ordon-
nées des points) puis à utiliser le premier point pour effectuer une rotation de l’ensemble des points afin
que le premier point du geste et le centre soient alignés suivant l’horizontal. Cette rotation sera affinée
lors de l’étape de reconnaissance.
Figure 6 – Algorithme de rotation.
Question 1. Ecrivez les méthodes rotateToZero et rotateBy correspondantes à l’algorithme.
4.4 Etape 3 et 4 : Mise à l’échelle et translation
Après rotation, le geste est mis à l’échelle pour tenir dans un carré de référence afin de le rendre
invariant à la taille suivant laquelle il est exécuté. Cette mise à l’échelle est non uniforme si bien qu’un
rectangle et un carré seront considérés comme identiques. Après mise à l’échelle, le geste est translaté à un
point de référence pour être indépendant de la position à laquelle il est exécuté. Par soucis de simplicité,
la centre du geste est translaté à l’origine.
Figure 7 – Mise à l’échelle et translation.
Question 2. Ecrivez les méthodes scaleToSquare et translateToOrigin correspondantes à l’algo-
rithme.
4.5 Reconnaissance
Le geste réalisé est maintenant prêt à être comparé aux templates. La comparaison consiste à calculer
la somme des distances entre les points pris deux à deux des deux gestes. Cette comparaison est faite
en déterminant l’angle de rotation entre les deux figures qui minimise cette distance. Cette recherche de
l’angle optimal est obtenue par l’utilisation de la technique Golden Section Search 10 pour minimiser le
nombre d’itérations vers la solution optimale (10 itérations au maximum avec cette technique).
10. http://en.wikipedia.org/wiki/Golden_section_search
4

Question 3. Ecrivez les méthodes distanceAtBestAngle et recognize correspondantes à l’algorithme.
Pour le calcul du score, vous utiliserez la variable d’instance HalfDiagonal.
Figure 8 – Reconnaissance.
5 Ajout de nouveaux templates
Question 4. Ajoutez vos propres templates au TemplateManager et testez-les !
5