Les grands écrans,écrans multitactiles,

interfaces avec stylet,menus et widgets

GTI 745

Des grands écrans interactifs

Al Gore (2007): 2560×1600, 30 pouces, ×3

http://content.time.com/time/photogallery/0,29307,1622338_1363003,00.html Time Magazine, “Al Gore’s American Life”

Un grand écran en “tuiles”

http://www.tacc.utexas.edu/resources/visualization

http://cobweb.sfasu.edu/rball/large%20display.jpg

Un grand écran en tuiles ("tiled display")

Un grand écran en tuiles ("tiled display")

http://www.tacc.utexas.edu/resources/visualization

Des grands écrans en tuiles ("tiled display")

• Un client, plusieurs serveurs– Le client a une immense image à faire dessiner.

Cette image est découpée en morceaux qui sont envoyées aux serveurs.

– Chaque serveur pilote typiquement 1 à 4 "tuiles" (écrans ou projecteurs) via une ou deux cartes graphiques.

• Logiciels pour réaliser ce genre d'infrastructure: wiregl, chromium, IBM's Scalable Visual Networking (SVN), Scalable Adaptive Graphics Environment (SAGE) et Scalable Amplified Group Environment (SAGE2)( http://www.sagecommons.org , http://www.youtube.com/user/evltube/videos )

perceptivepixel.com(Jeff Han; acheté par Microsoft en 2012)

• 27 pouces, 2560×1440, détecte la pression et le survol des doigts, fonctionne avec stylet et plusieurs doigts, 14 000$ en 2011

perceptivepixel.com

• 82 pouces,106 000 $ en 2011

Multitouchmedia.com / SmartPixel.tv

• Entreprise montréalaise

• Plusieurs modèles d’écranspeu chers

D’autres entreprises à Montréal

• http://www.simbioz.com (bornes publiques “sans toucher”)

• Numerix 3D (écrans autostéréoscopiques lenticulaires; défunt?)

• Moment Factory (utilisent des grands écrans pour monter des spectacles) http://www.momentfactory.com ≈150 employés (en 2015)

SMART Technologies (à Calgary)http://smarttech.com

SMART Board 8084i•84 pouces•3840×2160 pixels•multitactile•stylets•16 000 $US (2015)•Logiciel Meeting Pro pour partager le contenu avec d’autres dispositifs

Microsoft Surface Hub (2015)https://www.youtube.com/watch?v=FRLDRQePY1o

VisMaster (2010)https://www.youtube.com/watch?v=K9PvskathGI

http://www.vismaster.eu/ ; http://www.visual-analytics.eu/

Les écrans multitactiles

Table 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.2010

Baisse rapide en prix• Table multitactile fait sur mesure par C. Viau:

2010, 1920×2160 pixels, 1×1 metre, 12000$• Écran multitactile de 3M:

2010, 1440×900 pixels, 19 pouces, ≈1700$

• Écran multitactile de Dell:2016, 1920×1080, 23 pouces, < 300$

Comment lire les événements multitactiles?

• TUIO• WM_TOUCH (API natif de Microsoft

Windows); lisible en Java avec MT4j (ancienne librairie) ou bien avec JWinPointer (nouveau)

• Lecture directe des signaux USB

TUIO (http://www.tuio.org/)

• Un protocol réseau pour les surfaces tangibles et/ou multitactiles

• Des librairies 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 ancienne table multitactile de Christophe Viau

• Peut être aussi utilisé pour lire les événements des écrans 3M ou Dell 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

Table multitactile

TUIO avec notretable multitactile

Machine serveur qui fait le traitement d’image

Caméra IR

Écrans LCD

libTUIO.jar

Événements TUIO transmissur une connexion réseau

Câble vidéo TuioListener

Machine tournant MS Windows 7

TUIO avec un écran multitactile (de 3M ou Dell ou autre)

Écran 3M

Événements WM_TOUCH

W2TUIO

Câble vidéo

Câble USB

Logiciel Client

libTUIO.jar

TuioListener

Événements TUIO

"pont" pour traduire

Événements “WM_TOUCH” de Windows 7

• Windows 7 reconnaît automatiquement les écrans de 3M ou Dell 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 utilisait une partie de la librairie MT4j (http://www.mt4j.org/) pour lire les événements WM_TOUCH dans Java

• 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

interrogationCâble vidéo

Câble USB

Code pour interrogerwhile (true) { if ( multitouchInterface.pollForInputEvent() ) { client.processMultitouchInputEvent( ... ); } multitouchPollingThread.sleep( …? // millisecondes );}

Comment choisir l’intervalle de sommeil ?

Qu’arrive-t-il si l’intervalle est trop court ?

Et si c’est trop long ?

À retenir!

Intervalle de sommeil adaptatifpublic 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) { }}

Ce code est tiré du framework anciennement donné aux étudiants.

À retenir!

Écran “Cintiq 22HD touch” de WacomLe pilote Windows de Wacom + API natif de Windows ne permettent pas de lire le toucher + stylet simultanément.Une librairie est fournie par Wacom pour le faire, mais n’est pas disponible en Java.Donc, j’ai décidé de lire les signaux USB directement, me permettant de travailler en Java, et de le faire sur Windows ou bien Linux. Malheureusement, cela m’a demandé de faire du reverse engineering.

Lecture d'événements avec libusb• Un dispositif physique USB peut définir un ou plusieurs devices

virtuelles– Chaque device a un idVendor (exemple: 0x056a==1386 pour Wacom)

et un idProduct

• Chaque device a une ou plusieurs configurations, numérotées 1, 2, ...

• Chaque configuration a une ou plusieurs interfaces, numérotées 0, 1, ...– Chaque interface a un "class" (exemple: class==3 veut dire Human

Interface Device ou HID)

• Chaque interface a une ou plusieurs endpoints – Chaque endpoint a un "address"– Peut être écrit ou lu (input, output)– 4 types de endpoints: Control, Isochronous, Interrupt, Bulk

Lecture d'événements avec libusb (2)4 types de endpoints:•Control•Isochronous

– Bande passante fixe et garantie; peut avoir des erreurs– Exemples: webcam ou microphone

•Interrupt– Bande passante faible, sans erreurs– Exemples: clavier, souris

•Bulk– Volume élevé de données, sans erreurs– Exemples: disque dur externe ou clé USB

Lecture d'événements avec libusb (3)Comment faire le "reverse engineering" pour arriver à lire les événements d'un Wacom Cintiq sur Linux, sans pilote?•Utiliser des commandes diagnostiques du OS (exemples: "lsusb -t", "lsusb -v", "cat /sys/kernel/debug/usb/devices") pour énumérer les devices, les endpoints, et leurs propriétés•Écrire du code libusb pour lire les octets des endpoints et les imprimer sur un console en temps réel; faire générer des événements de toucher ou de stylet et étudier les octets qui sortent; deviner quels octets veulent dire quoi (coordonnées, pression, identifiant du doigt, etc.)•Voir http://www.michaelmcguffin.com/code/cintiq pour les détails et pour des échantillons de code C et Java

Lecture des événements multitactilesLibrairie ou API Langage Plateforme Remarques

APIs natifs

MS Windows API (WM_TOUCH) C++ / C# MS Windows

libusb(version Java:

http://usb4java.org/ )plusieurs plusieurs

• Lecture directe du port USB sans pilote• Nécessite de faire du "reverse engineering"• M'a permis de lire les événements d'un

Wacom Cintiq touch sur Linux et sur MS Windows

• Limité à un dispositif et une application

Android API Java Android• Peut rassembler et transmettre les

mouvements de plusieurs doigts en un seul événement

Librairies multi-

plateforme

MT4j JavaMS Windows

et Android

• Capable de lire événements WM_TOUCH• Demande d'interroger au lieu de définir un

"Listener"• Dernière release en 2011, 32 bits seulement

kivy (anciennement PyMT) Python

MS Windows, OS X,

Android, Linux, iOS

Protocols TUIO plusieurs plusieurs

• Protocol réseau pour transmission d'événements

• Permet de séparer l'implementation du matériel multitactile et de l'application cliente, qui peuvent être sur des machines + OSs + langages différents

• Il existe un pont ("bridge") WM_TOUCH vers TUIO: W2TUIO

Quelques interfaces multitactiles

SandCanvas (2011) http://www.shengdongzhao.com/publication/sandcanvas/

HandyWidgets (2012)https://www.youtube.com/watch?v=jANW0YkQh-s ;

http://scholar.google.ca/scholar?q=Yoshikawa+Shizuki+Tanak+handywidgets+local+widgets

Les interfaces avec stylet

InkSeine (Ken Hinckley, Microsoft Research, 2007)http://research.microsoft.com/en-us/um/redmond/projects/inkseine/

https://www.youtube.com/watch?v=DW1PGq4_7eI

Pourquoi Apple ne propose pas de stylet pour le iPad ?

• http://www.quora.com/Why-was-Steve-Jobs-against-the-tablet-pen

Vignette (2012)http://www.shengdongzhao.com/publication/vignette-interactive-texture-design-and-manipulation-with-

freeform-gestures-for-pen-and-ink-illustration/

Kinematic Templates [Fung et al. 2008]http://hci.uwaterloo.ca/research/kinematic

Kinematic Templates [Fung et al. 2008]

ILoveSketch: esquisses 3D (2008)https://www.youtube.com/watch?v=hSxCZE6PG50

http://www.ilovesketch.com/ http://www.dgp.toronto.edu/~shbae/ilovesketch.htm

http://scholar.google.ca/scholar?q=bae+balakrishnan+singh+ilovesketch

Les interfaces multitactiles avec stylet(“pen + touch”)

“Manual Deskterity” (Ken Hinckley, 2010)https://www.youtube.com/watch?v=9sTgLYH8qWs https://www.youtube.com/watch?v=aD6f6z8kDrM

http://scholar.google.ca/scholar?q=hinckley+yatani+pahud+coddington+manual+deskterity http://scholar.google.ca/scholar?q=hinckley+yatani+pahud+coddington+pen+touch+new+tools

“Manual Deskterity” (Ken Hinckley, 2010)https://www.youtube.com/watch?v=9sTgLYH8qWs https://www.youtube.com/watch?v=aD6f6z8kDrM

http://scholar.google.ca/scholar?q=hinckley+yatani+pahud+coddington+manual+deskterity http://scholar.google.ca/scholar?q=hinckley+yatani+pahud+coddington+pen+touch+new+tools

Jeu de stratégie en temps réel, stylet + multitactile (2012) http://scholar.google.ca/scholar?q=hamilton+kerne+robbins+pen+touch

https://www.youtube.com/watch?v=t4D8atZf2z4 https://www.youtube.com/watch?v=XbkM8jlhW9Y&t=52s

Interface “pen + touch” pour les mathématiques (2010)https://www.youtube.com/watch?v=pYuDTOqFmqc

http://scholar.google.ca/scholar?q=zeleznik+hands-on+math

Multitactile Stylet Souris Deux Souris

Précis Non Oui Oui OuiSans occlusion Non Presque Oui Oui

Bon pour écrire et dessiner

Moyen Oui Non Non

Nombre de points d’entrée

10 1 1 2

Chaque point d’entrée se distingue

Non (normalement on ne sait pas si un contact correspond au majeur, index, etc.)

N/A (seuleument un point)

N/A (seulement un point)

Oui (on sait toujours quelle souris est la première, et laquelle est la deuxième)

Entrées supplémentaires (parfois survol, orientation)

Boutons, efface, pression, survol, (parfois orientation)

Boutons, (parfois orientation)

Boutons, (parfois orientation)

Entrée directe Oui Oui Non NonGarde l’écran propre Non Moyen Oui Oui

Permet plusieurs utilisateurs

Oui (certains écrans permettent à chaque utilisateur d'avoir un stylet)

(certains interfaces permettent à chaque utilisateur d'avoir une souris)

(?)

Rien à tenir dans la main (donc pas de temps pris pour saisir dans la main,

et rien à perdre)

Oui Non Non Non

À retenir!

Les menus et widgets contextuels

Rappel de matière vue en GTI350: les widgets contextuels

pour lancer des commandes (menus contextuels, menus

radiaux, Marking Menus, etc.)

Verbes(actions,commandes,outils,opérations) Noms

(objets,endroits)

Verbes dans un menu déroulant

Noms(objets,endroits)

Noms(objets,endroits)

Verbes dansun menu contextuel

• Les modes créent la possibilité d’avoir des erreurs de mode, où l’utilisateur se croît en un mode lorsqu’il est dans un autre

• Un retour visuel indiquant le mode actuel est bien, mais souvent n’est pas assez pour empêcher les erreurs de mode– Exemples de retours visuels indiquant le mode:

icône d’outil surligné, forme de curseur, barre d’état• Les menus contextuels aided…

– À éviter les erreurs de mode, via des modes temporaires et (parfois) un retour kinesthésique (pression dans le doigt qui tient une touche appuyée)

– À augmenter l’espace d’écran disponible pour montrer le contenu/données (quoique ce contenu/données seront cachés temporairement pendant que le menu est affiché)

– Diminuent la distance à traverser avec le curseur– Peuvent fusionner la sélection de nom et verbe (sélection plus

rapide; meilleur couplage mental (“mental chunking” – Buxton 1986))

Étant donné tous ces avantages des menus contextuels, pouvons-nous améliorer leur conception?

Y a t-il des widgets ou des techniques d’interaction encore

mieux?

Menu radial(“Radial Menu”, “Pie Menu”)

Menus radiaux versusmenus linéaires

• Les directions sont plus mémorables et plus faciles à reproduire que les distances.

Menu radial hiéarchique

« Mouse Gestures » pour Firefox

Marking Menu

• “Scale invariant recognition”: Reconnaissance des gestes (marques) qui ne dépend pas de la longueur des segments; seule les angles des segments importe. Donc, les marques peuvent être dessinées en petit et donc rapidement, de façon balistique.

• Un utilisateur qui sait quelle marque dessiner n’a même pas besoin de voir le menu s’afficher.

Ensemble de marques découvrables (“self-revealing”), contrairement aux interfaces gestuelles habituelles

Présentation graphique améliorée

Marking Menus

• Vidéo• Démonstration (cobaye voluntaire s.v.p.?)

Transition de néophyte en expert

Menus traditionels:Pointage versus racourcis

Marking Menus:Transition graduelleet naturelle !

Les Marking Menus• Permettent une sélection plus rapide

qu’avec les menus linéaires(marques directionnelles et ballistques)

• Peuvent être utilisés sans regarder l’écran(“eyes-free operation”)

• Ont un ensemble de gestes découvrables• Permettent une transition graduelle et naturelle de

novice en expert• Peuvent être utilisés pour sélectionner

nom et verbe• Sont limités à environ 8 commandes par sous-

menu, et à une profondeur d’environ 3 niveaux

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– Travailler avec deux mains

À retenir!(sauf ceux en gris)

Exemple de Control Menu(dans SimplePaint)

À retenir!

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.

Vidéos:•prototype: http://www.youtube.com/watch?v=M0ODskdEPnQ

•version hip-hop: http://www.youtube.com/watch?v=oUVpSY4eBCc

•parodie: http://www.youtube.com/watch?v=kQL9V2dnKFY

•présentation TED: http://www.ted.com/talks/anand_agarawala_demos_his_bumptop_desktop

•version commerciale: http://www.youtube.com/watch?v=6jhoWsHwU7w

BumpTop (Agarawala et Balakrishnan, 2006)http://scholar.google.ca/scholar?q=agarawala+balakrishnan+keepin+%22Pushing+the+desktop+metaphor%22

http://bumptop.com

FlowMenus (Guimbretière et al., 2000)http://www.acm.org/uist/archive/videos/2000/p213-guimbretiere.mov

À retenir!

FlowMenus (Guimbretière et al., 2000)http://www.acm.org/uist/archive/videos/2000/p213-guimbretiere.mov

À retenir!

Scriboli (Hinckley et al., CHI 2005)https://www.youtube.com/watch?v=7YhJ2vGaftY

http://www.patrickbaudisch.com/publications/2005-Hinckley-CHI05-Scriboli.wmvhttp://research.microsoft.com/users/kenh/papers/Scriboli.mov

À retenir!

Encre

Lasso

Lasso +Commande dansun menu radial

Lasso +Commande dansun menu radial +Paramètre

Commande dansun menu radial

Commande dansun menu radial +Paramètre

Gestes possibles avec le menu dans Scriboli:La "queue de cochon" (pigtail) indique la fin d'un lasso et/oule début d'une selection de commande dans le menu radial.

À retenir!

Tracking Menu (Fitzmaurice et al., UIST 2003)http://www.acm.org/uist/archive/videos/2003/p71-fitzmaurice.mov

http://www.autodeskresearch.com/publications/trackingmenus https://www.youtube.com/watch?v=G1jC6jQhcJI

À retenir!

HoverWidgets (Grossman et al., CHI 2006)http://www.dgp.utoronto.ca/~ravin/videos/chi2006_hoverwidgets.mov

https://www.youtube.com/watch?v=WPbiPn1b1zQ https://www.youtube.com/watch?v=KRXfaZ8nqZM

http://www.dgp.toronto.edu/~tovi/videos/hoverwidgets.mov À retenir!

PieCursor (Fitzmaurice et al., CHI 2008)http://www.autodeskresearch.com/publications/piecursor À retenir!

Le « hotbox »: un menu 2D dans Maya

Le Hotbox dans Maya

[Kurtenbach et al., 1999]

Le Hotbox dans Maya

[Kurtenbach et al., 1999]

Le Hotbox dans Maya

[Kurtenbach et al., 1999]

À retenir!

Toolglass: entrée bimanuellehttps://www.youtube.com/watch?v=fUwYCbhFj1U

http://www.autodeskresearch.com/publications/t3

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

À retenir!

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 graphique: états 0, 1, 2• Souris à un bouton: états 1, 2• Écran monotactile: états 0, 1

État 0:hors de portée /

"out of range"(sans coordonnées)

État 1: survol /"hover"

(x,y)

État 2: glissement /"drag"(x,y)

À retenir!

sortir de la portée /"exit range"

entrer dans la portée /"enter range"

bouton relâché /"button up"

bouton appuyé /"button down"

TouchMouse(Hinckley et Sinclair 1999)

États 0, 1, 2

TouchMouse(Hinckley et Sinclair 1999)

Taxonomie de menus2 points d’entrée 1 point d’entrée

+ 1 bouton sous l’autre main

1 point d’entrée

Détection de survol optionnelle Distingue entre l’état “hors de portée” (sans coordonnées) et au moins un état avec coordonnées (x,y). Exemple: écran tactile

Détection de survol nécessaire Distingue entre 2 états avec coordonnées (x,y) (c.-à-d. distingue entre les états de survol et de glissement). Exemples: souris, écran Wacom.

Taxonomie de menus2 points d’entrée 1 point d’entrée

+ 1 bouton sous l’autre main

1 point d’entrée

Détection de survol optionnelle Distingue entre l’état “hors de portée” (sans coordonnées) et au moins un état avec coordonnées (x,y). Exemple: écran tactile

Toolglass Barre de menu fixe;Palette flottante;Marking Menu;Control Menu;FlowMenu;Menu de Scriboli

Détection de survol nécessaire Distingue entre 2 états avec coordonnées (x,y) (c.-à-d. distingue entre les états de survol et de glissement). Exemples: souris, écran Wacom.

Hotbox (notez: la détection de survol est nécessaire pour centrer le hotbox au moment de son affichage)

Tracking Menu;HoverWidget;Pie Cursor

À retenir!

Questions pour discussion

• Dans un logiciel de dessin, quelle technique de menu choisir pour lancer des commandes ?– Pour un petit écran, grand écran ?– Pour un utilisateur vs plusieurs ?– Si chaque utilisateur

• Peut utiliser plusieurs doigts• Peut utiliser un seul stylet