Interfaces multitactiles. De grands écrans

Présentation au sujet: "Interfaces multitactiles. De grands écrans"— Transcription de la présentation:

1 Interfaces multitactiles

2 De grands écrans http://www.tacc.utexas.edu/resources/visualization

3 Al Gore

4 Des grands écrans collaboratifs http://cobweb.sfasu.edu/rball/large%20display.jpg

5 Des grands écrans collaboratifs http://www.tacc.utexas.edu/resources/visualization

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

7 perceptivepixel.com 82 pouces

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

9 François Guimbretière, Maureen Stone, Terry Winograd, ACM UIST 2001; http://www.acm.org/uist/archive/videos/2001/p21-guimbretiere.mov ; http://dx.doi.org/10.1145/502348.502353 http://www.acm.org/uist/archive/videos/2001/p21-guimbretiere.mov http://dx.doi.org/10.1145/502348.502353

10 Sway ( jeu iPhone pour deux pouces ) http://www.youtube.com/watch?v=eQKK9ec1UEs

11 Quelques exemples d’interfaces multitactiles Vidéos … Jeff Han http://www.perceptivepixel.com/, http://www.youtube.com/results?search_query=jeff+han http://www.perceptivepixel.com/ http://www.youtube.com/results?search_query=jeff+han Partridge et al., NIME 2009, “WallBalls” http://www.youtube.com/watch?v=qQmSwuj7DZw http://www.youtube.com/watch?v=mn5sNG_oi3g http://www.youtube.com/watch?v=qQmSwuj7DZw http://www.youtube.com/watch?v=mn5sNG_oi3g Andy Wilson: PlayAnywhere, et simulations de physiques http://research.microsoft.com/en-us/um/people/awilson/publications/WilsonUIST2005/WilsonUIST2005.html http://research.microsoft.com/en-us/um/people/awilson/publications/WilsonUIST2008/WilsonUIST2008.html http://research.microsoft.com/en-us/um/people/awilson/publications/WilsonITS2009/WilsonITS2009.html http://research.microsoft.com/en-us/um/people/awilson/publications/WilsonUIST2005/WilsonUIST2005.html http://research.microsoft.com/en-us/um/people/awilson/publications/WilsonUIST2008/WilsonUIST2008.html http://research.microsoft.com/en-us/um/people/awilson/publications/WilsonITS2009/WilsonITS2009.html Mur interactif à Cannes 2009 SLAP Widgets: http://www.youtube.com/watch?v=I2rDHUUkd5Y http://www.youtube.com/watch?v=I2rDHUUkd5Y

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

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

14 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

15 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.

16 TUIO (http://www.tuio.org/)http://www.tuio.org/ 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.)

17 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

18 É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 http://www.3m.com/multitouch pour les modèles plus récentshttp://www.3m.com/multitouch NB: Dell a sorti récemment un écran multitactile de 23 pouces, 1920×1080 pixels, 10 doigts, pour < 1000$ modèle 19 pouces

19 22 pouces 19 pouces 32 pouces

20 É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 (http://www.mt4j.org/) pour lire les événements WM_TOUCH dans Javahttp://www.mt4j.org/ Malheureusement, au lieu d’utiliser un “listener”, on doit interroger (“poller”) activement et fréquemment pour obtenir ces événements

21 É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

22 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 ?

23 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) { } }

24 Des logiciels multitactiles créés à l’ÉTS Logiciel de dessin de polygones 2D http://www.michaelmcguffin.com/tmp/multitouchDemos- 3Mdisplay/3M_multitouch_demo-2Dpolygons.mov Logiciel de modélisation de blocs 3D http://www.michaelmcguffin.com/tmp/multitouchDemos- 3Mdisplay/3M_multitouch_demo-3Dblocks.mov

25

26 Instruments de musique multitactiles http://www.youtube.com/watch?v=6yH9ifBvK6o

27 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

28 Jeu multitactile

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

30 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 –…

31 Tableau blanc électronique multitactile multi-utilisateur

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

33 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

34 Exemple de Control Menu (dans SimplePaint)

35 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 2006 - the ACM Conference on Human Factors in Computing Systems. p. 1283-1292.Keepin' it real: Pushing the desktop metaphor with physics, piles and the pen

36 FlowMenus (Guimbretière et al., 2000)

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

38 Scriboli Hinckley et al., CHI 2005 http://research.microsoft.com/users/kenh/papers/Scriboli.mov

39 Tracking Menu Fitzmaurice et al., UIST 2003 http://www.autodeskresearch.com/publications/trackingmenus

40 HoverWidgets Grossman et al., CHI 2006 http://www.dgp.toronto.edu/~tovi/videos/hoverwidgets.mov

41 Pie Cursor Fitzmaurice et al., CHI 2008 http://www.piecursor.com/

42

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

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

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

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

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

48 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

49 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)

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

51 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)

52 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

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

54 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

55 Tableau blanc électronique multitactile multi-utilisateur

56 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 !

57 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

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

59 Exemples de gestes multitactiles http://images.google.ca/images?q=multitouch+gestures http://www.slashgear.com/bumptop-adds-exclusive-multitouch- gestures-to-3d-desktop-video-0158661/ http://www.geek.com/articles/apple/apple-patents-a-bunch-of-new- multitouch-gestures-20100429/

60 Comment pouvons nous rendre les gestes multitactiles découvrables (“self-revealing”) ? Exemple: vidéo de Vogel et Balakrishnan 2004 http://www.dgp.utoronto.ca/~ravin/videos/uist2004_ambient.avi http://www.dgp.utoronto.ca/~ravin/videos/uist2004_ambient.avi Exemple: Multitouch Marking Menus http://www.autodeskresearch.com/publications/multitouchmm http://www.autodeskresearch.com/publications/multitouchmm Exemple: Shadow Guides (Freeman) Exemple: OctoPocus (Bau 2008)

61 fin

62 blah

63

64

65 fin

66 blah

67 Comment naviguer en 3D avec une interface multitactile ? Exemple: vidéo de Yu et al. 2010 http://www.youtube.com/watch?v=UxknnsutM0c http://www.youtube.com/watch?v=UxknnsutM0c Exemple: SpaceClaim http://www.youtube.com/watch?v=kdkxqgbXaSI http://www.youtube.com/watch?v=kdkxqgbXaSI Exemple de comment faire avec une interface bimanuelle à pointage 3D: http://www.youtube.com/watch?v=ggoLLnxHwhA http://www.youtube.com/watch?v=ggoLLnxHwhA Un autre exemple multitactile, avec des blocs 3D: http://www.michaelmcguffin.com/tmp/multitouchDemos-3Mdisplay/3M_multitouch_demo-3Dblocks.mov http://www.michaelmcguffin.com/tmp/multitouchDemos-3Mdisplay/3M_multitouch_demo-3Dblocks.mov 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 http://www.youtube.com/watch?v=ggoLLnxHwhA ? http://www.youtube.com/watch?v=ggoLLnxHwhA

68 Bimanual 3D Navigation Erick Velazquez-Godinez and Michael McGuffin (unpublished, 2010) http://www.youtube.com/watch?v=ggoLLnxHwhA 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. http://www.youtube.com/watch?v=ggoLLnxHwhA

69 blah

70

71

72

73 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

74 “chains”trees biconnected components nodes with common neighborhoods

75 Toolglass: bimanual input http://www.youtube.com/watch?v=fUwYCbhFj1U http://www.youtube.com/watch?v=fUwYCbhFj1U Click-through: Simultaneous selection of verb and noun!

76 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?

77 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)

78 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

79 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

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

81 Alors quels sont les vrais avantages du multitactile ? …

82 blah

83 Don’t use