Interfaces multitactiles

De grands écrans

Al Gore

Des grands écrans collaboratifs

Des grands écrans collaboratifs

perceptivepixel.com 27 pouces, 2560x1440, détecte la pression et le survol des doigts, fonctionne avec stylet et plusieurs doigts, ~14000$

perceptivepixel.com 82 pouces

Multitouchmedia.com / SmartPixel.tv Entreprise montréalaise Plusieurs modèles d’écrans peu chers

François Guimbretière, Maureen Stone, Terry Winograd, ACM UIST 2001; ;

Sway ( jeu iPhone pour deux pouces )

Quelques exemples d’interfaces multitactiles Vidéos … Jeff Han Partridge et al., NIME 2009, “WallBalls” Andy Wilson: PlayAnywhere, et simulations de physiques Mur interactif à Cannes 2009 SLAP Widgets:

Quelques exemples d’interfaces multitactiles Vidéos … Film: Minority Report Film: Quantum of Solace (James Bond) Film: Iron Man 2

Quels sont les avantages d’une interface multitactile par rapport à une souris ? … (discussion)

Quels sont les avantages d’une interface multitactile par rapport à une souris ? Plus de points d’entrée, plus de degrés de liberté (en théorie, 2 mains->20 degrés de liberté) Interaction directe, donc plus naturel Plus de gestes possibles Interaction “intuitive” Pas besoin d’un dispositif de plus, donc rien de plus à amener ou à perdre Impossible de “perdre” le curseur de souris (sur un écran non-tactile, le curseur est parfois trop petit) Possibilité d’avoir plusieurs utilisateurs qui travaillent en même temps

Surface multitactile au Laboratoire multimédia de l’ÉTS, développée par Christophe Viau, étudiant doctoral de Michael McGuffin. 1920×2160 pixels, 1×1 mètre.

TUIO ( Un protocol réseau pour les surfaces tangibles multitactiles Des libraries TUIO sont disponibles pour plusieurs langages de programmation En Java, libTUIO.jar permet d’obtenir des événements de toucher, mouvement, et relâchement en définissant un “listener” (écouteur) d’événements Utilisé pour lire les événements de notre grande surface multitactile (Peut être aussi utilisé pour lire les événements des écrans 3M sur Windows 7, si on se sert du “bridge” W2TUIO qui traduit les événements WM_TOUCH en événements TUIO, mais cela ne fonctionne pas aussi bien que lire les événements WM_TOUCH directement.)

Machine Cliente Logiciel Client Grande surface multitactile TUIO avec notre grande surface multitactile Machine serveur qui fait le traitement d’image Caméra IR Écrans LCD libTUIO.jar Événements TUIO transmis sur une connexion réseau Câble vidéo TuioListener

Écrans multitactiles de 3M 3 modèles d’écrans 3M au labo: – 19 pouces, 1440×900 pixels, 10 doigts – 22 pouces, 1680×1050 pixels, 20 doigts – 32 pouces, 1920×1080 pixels, 10 doigts – Voir pour les modèles plus récentshttp:// NB: Dell a sorti récemment un écran multitactile de 23 pouces, 1920×1080 pixels, 10 doigts, pour < 1000$ modèle 19 pouces

22 pouces 19 pouces 32 pouces

Événements “WM_TOUCH”de Windows 7 Windows 7 reconnaît automatiquement les écrans de 3M comme un dispositif multitactile, sans installer de pilote. Le toucher, mouvement, relâchement sur l’écran génère des événements WM_TOUCH On utilise une partie de la librarie MT4j ( pour lire les événements WM_TOUCH dans Javahttp:// Malheureusement, au lieu d’utiliser un “listener”, on doit interroger (“poller”) activement et fréquemment pour obtenir ces événements

Écran 3M et lecture des événements WM_TOUCH Écran 3M Machine tournant MS Windows 7 Événements WM_TOUCH Logiciel Client MT4j interrogation Câble vidéo Câble USB

Code pour interroger while (true) { if ( multitouchInterface.pollForInputEvent() ) { client.processMultitouchInputEvent(... ); } multitouchPollingThread.sleep( …? // millisecondes ); } Comment choisir l’interval de sommeil ? Qu’arrive-t-il si l’interval est trop court ? Et si c’est trop long ?

Interval de sommeil adaptif public void run() { // adaptive sleep interval int [ ] sleepInterval = {0,0,0,1,1,1,2,2,2,3,3,3,5,5,5,10,10,10,20,25}; int indexIntoSleepInterval = 0; try { multitouchInterface.initialize( … ); while (true) { if ( multitouchInterface.pollForInputEvent() ) { indexIntoSleepInterval = 0;... client.processMultitouchInputEvent(... ); } else { // There was no input event waiting for us, // so we can sleep a little bit longer than last time. if ( indexIntoSleepInterval < sleepInterval.length-1 ) { ++ indexIntoSleepInterval; } if ( sleepInterval[ indexIntoSleepInterval ] > 0 ) { multitouchPollingThread.sleep( sleepInterval[ indexIntoSleepInterval ] // millisecondes ); } catch (InterruptedException e) { } }

Des logiciels multitactiles créés à l’ÉTS Logiciel de dessin de polygones 2D 3Mdisplay/3M_multitouch_demo-2Dpolygons.mov Logiciel de modélisation de blocs 3D 3Mdisplay/3M_multitouch_demo-3Dblocks.mov

Instruments de musique multitactiles

Jeu multitactile créé à l’ÉTS Un exemple simple d’interface multitactile, modifié par les étudiants de 1er cycle dans le cadre d’un travail pratique (À droite) Des étudiants du secondaire 2 en visite au laboratoire

Jeu multitactile

Question à discuter: comment désambiguïser l’utilisateur lorsqu’il effectue un geste de lasso ? –… ?

Jeu multitactile Question à discuter: comment désambiguïser l’utilisateur lorsqu’il effectue un geste de lasso ? –Direction du lasso (sens horaire, anti-horaire) –Direction de la fin du mouvement vers l’utilisateur en question –Un menu, par exemple un Control Menu qui apparaît au moment de l’intersection du lasso avec lui même (donc, le menu apparaît même avant que l’utilisateur relâche), ou bien un Control Menu qui apparaît au début du glissement (donc, le lasso commence une fois que l’utilisateur a sortie du menu) –Un bouton virtuel, peut-être appuyé en même temps que le lasso, ou appuyé juste avant le lasso –On impose que chaque jouer joue à tour de rôle, peut-être avec une limite de temps –On commence le glissement de lasso sur un soldat qui appartient au jouer en question –Geste effectué avec un doigt versus deux doigts –…

Tableau blanc électronique multitactile multi-utilisateur

Est-ce qu’on peut faire mieux que des palettes flottantes?

D’autres menus et widgets contextuels Control Menus (Pook et al., 2000) Flow Menus (Guimbretière et Winograd, 2000) ( FaST Sliders (McGuffin et al., 2002) ) Menu radial dans Scriboli (Hinckley et al., 2005) Tracking Menus (Fitzmaurice et al., 2003) ( Trailing Widget (Forlines et al., 2006) ) Hover Widgets (Grossman et al., 2006) PieCursor (Fitzmaurice et al., 2008) Hotbox (Kurtenbach et al., 1999) ToolGlass Ces widgets et techniques d’interaction sont adaptés pour: –Un grand nombre de commandes –Le contrôle de variables continues –L’entrée de texte et de nombres avec des gestes –L’utilisation d’un stylet (par exemple, sur un “tablet PC”) –Travailler avec deux mains

Exemple de Control Menu (dans SimplePaint)

Exemple de Control Menu (dans BumpTop) Anand Agarawala, Ravin Balakrishnan. (2006). Keepin' it real: Pushing the desktop metaphor with physics, piles and the pen. Proceedings of CHI the ACM Conference on Human Factors in Computing Systems. p Keepin' it real: Pushing the desktop metaphor with physics, piles and the pen

FlowMenus (Guimbretière et al., 2000)

Manipulation 2D avec FlowMenus (Guimbretière et al., 2000)

Scriboli Hinckley et al., CHI

Tracking Menu Fitzmaurice et al., UIST

HoverWidgets Grossman et al., CHI

Pie Cursor Fitzmaurice et al., CHI

Le Hotbox dans Maya [Kurtenbach et al., 1999]

Le Hotbox dans Maya [Kurtenbach et al., 1999]

Le Hotbox dans Maya [Kurtenbach et al., 1999]

Toolglass: entrée bimanuelle Clic-à-travers (click-through): sélection simultanée d’objet et de commande !

Comment analyser et comparer ces différentes techniques pour lancer des commandes ?

Modèle à trois états de Buxton (1990) État 0: pas de coordonnées (x,y) États 1 et 2: la position (x,y) est captée Exemples: Tablette numérisante: états 0, 1, 2 Souris: états 1, 2 Écran tactile: états 0, 1

Modèle à trois états de Buxton (1990) État 0: pas de coordonnées (x,y) États 1 et 2: la position (x,y) est captée Exemples: Tablette numérisante: états 0, 1, 2 Souris: états 1, 2 Écran tactile: états 0, 1 État 0: hors de portée sans coordonnées État 1: survol (x,y) État 2: glissement (x,y)

TouchMouse (Hinckley et Sinclair 1999) États 0, 1, 2

Taxonomie de menus 2 points d’entrée1 point d’entrée + 1 bouton sous l’autre main 1 point d’entrée Distingue entre l’état “hors de portée” (sans coordonnées) et au moins un état avec coordonnées (x,y) Distingue entre 2 états avec coordonnées (x,y) (c.-à-d. distingue les états de survol et de glissement)

Taxonomie de menus 2 points d’entrée1 point d’entrée + 1 bouton sous l’autre main 1 point d’entrée Distingue entre l’état “hors de portée” (sans coordonnées) et au moins un état avec coordonnées (x,y) ToolglassBarre de menu fixe Palette flottante Marking Menus ControlMenus Flow Menus Menus de Scriboli Distingue entre 2 états avec coordonnées (x,y) (c.-à-d. distingue les états de survol et de glissement) HotboxTracking Menus HoverWidget Pie Cursor

Lesquelles de ses techniques s’appliquent aux écrans multitactiles de 3M ?

Taxonomie de menus 2 points d’entrée1 point d’entrée + 1 bouton sous l’autre main 1 point d’entrée Distingue entre l’état “hors de portée” (sans coordonnées) et au moins un état avec coordonnées (x,y) ToolglassBarre de menu fixe Palette flottante Marking Menus ControlMenus Flow Menus Menus de Scriboli Distingue entre 2 états avec coordonnées (x,y) (c.-à-d. distingue les états de survol et de glissement) HotboxTracking Menus HoverWidget Pie Cursor

Tableau blanc électronique multitactile multi-utilisateur

Désavantages du multitactile Manque de précision spatiale (les bouts des doigts sont gros) Occlusion par les doigts des données Souvent incapable de distinguer les doigts Souvent incapable de distinguer les états de survol et de glissement Remarque: une interface à deux souris évite tous ces problèmes !

Comparaison … Entrée indirecte bimanuelle (exemple: deux souris) ne cache pas ce qu'il y a en dessous des doigts plus facile à pointer précisément facile à distinguer la main gauche de la main droite distingue le survol et le glissement, et permet plusieurs boutons, et même des « accords » de boutons. Autrement dit, permet plus d’états différents. ne salie pas l’écran fonctionne bien avec le Toolglass Entrée directe multitactile plus que 2 points d'entrée permet plusieurs utilisateurs, mais difficilement distingués

Comment améliorer la précision de sélection dans les interfaces multitactiles? Vidéo (Benko et al., CHI 2006)

Exemples de gestes multitactiles gestures-to-3d-desktop-video / multitouch-gestures /

Comment pouvons nous rendre les gestes multitactiles découvrables (“self-revealing”) ? Exemple: vidéo de Vogel et Balakrishnan Exemple: Multitouch Marking Menus Exemple: Shadow Guides (Freeman) Exemple: OctoPocus (Bau 2008)

fin

blah

fin

blah

Comment naviguer en 3D avec une interface multitactile ? Exemple: vidéo de Yu et al Exemple: SpaceClaim Exemple de comment faire avec une interface bimanuelle à pointage 3D: Un autre exemple multitactile, avec des blocs 3D: Pouvons-nous faire mieux ? (En évitent des gestes ou des modes ou des widgets?) –Exemple: chaque index contrôle le (x,y) d’un curseur 3D, pendant que les pouces contrôlent le z de chaque curseur. Est-ce que cela nous permettrait de faire les mêmes actions que dans ?

Bimanual 3D Navigation Erick Velazquez-Godinez and Michael McGuffin (unpublished, 2010) Having the 3D position of each hand is enough to control the 6 degrees-of-freedom of a 3D camera: translate hands together to translate the camera, rotate hands around each other to rotate the camera, move hands toward or away from each other to zoom.

blah

Comment permettre à un utilisateur de manipuler un graphe (réseau) ? Démonstration d’un ancien prototype qui fonctionne avec une seule souris Dans une nouvelle version de l’interface, on aimerait pouvoir saisir différents sous- ensembles du réseau et les déplacer/tourner en même temps

“chains”trees biconnected components nodes with common neighborhoods

Toolglass: bimanual input Click-through: Simultaneous selection of verb and noun!

Comparaison … Devrait-on utiliser deux souris (avec une Toolglass), ou bien une surface multitactile, pour manipuler un réseau? Est-ce que l’idée de la Toolglass s’applique à une interface multitactile aussi bien qu’à une interface bimanuelle?

Tablettes graphiques Wacom Bamboo 5.8x3.7 pouces; 80$ Wacom Cintiq 21UX avec écran intégré 21.3 pouces (17x12.75); 2500$ Wacom Intuos3 12x19 pouces; 750$ (prix de 2008)

Pointage direct vs indirect Pointage direct: les espaces d’entrée et de sortie coïncident Exemple: une souris, ou une tablette numérisante sans écran intégré, permettent un pointage indirect Exemple: un écran tactile, ou une tablette numérisante avec écran intégré, permettent un pointage direct Lequel est plus “intuitif” ? direct Lequel est plus prévisible ? direct Lequel est moins fatiguant ? indirect Lequel évite de cacher le retour visuel ? indirect Lequel est préféré par les artistes/graphistes ? ça dépend Lequel est plus précis ? ça dépend non de la dimension direct/indirect, mais si on pointe avec notre doigt ou un intermédiaire

Modèle à trois états de Buxton (1990) État 0: pas de coordonnées (x,y) États 1 et 2: la position (x,y) est captée Exemples: Tablette numérisante: états 0, 1, 2 Souris: états 1, 2 Écran tactile: états 0, 1

Démonstration de notre prototype pour manipuler les réseaux avec deux souris (via JInput) et un Toolglass

Alors quels sont les vrais avantages du multitactile ? …

blah

Don’t use