Les grands

1
Les grands écrans,écrans multitactiles,interface
s avec stylet,menus et widgetsGTI 745
2
Les grands écrans interactifs
3
Al Gore
4
De grands écrans
http//www.tacc.utexas.edu/resources/visualization
5
Des grands écrans collaboratifs
http//cobweb.sfasu.edu/rball/large20display.jpg
6
Des grands écrans collaboratifs
http//www.tacc.utexas.edu/resources/visualization
7
perceptivepixel.com(Jeff Han acheté par
Microsoft)

• 27 pouces, 2560x1440, détecte la pression et le
  survol des doigts, fonctionne avec stylet et
  plusieurs doigts, 14000

8
perceptivepixel.com

• 82 pouces

9
Multitouchmedia.com / SmartPixel.tv

• Entreprise montréalaise
• Plusieurs modèles décranspeu chers

10
Dautres entreprises à Montréal

• http//www.simbioz.com
• Numerix 3D (défunt?)
• Moment Factory http//www.momentfactory.com 150
  employés (en 2015)

11
SMART Technologies (à Calgary)http//smarttech.co
m

• SMART Board 8084i
• 84 pouces
• 38402160 pixels
• multitactile
• stylets
• 16 000 US (2015)
• Logiciel Meeting Pro pour partager le contenu
  avec dautres dispositifs

12
Microsoft Surface Hub (2015)https//www.youtube.c
om/watch?vFRLDRQePY1o
13
VisMasterhttps//www.youtube.com/watch?vK9Pvskat
hGI http//www.vismaster.eu/
http//www.visual-analytics.eu/
14
Les écrans multitactiles
15
Surface multitactile au Laboratoire multimédia de
lÉTS, développée par Christophe Viau, étudiant
doctoral de Michael McGuffin.19202160 pixels,
11 mètre.
16
Écrans multitactiles de 3M

• 3 modèles décrans 3M au labo
• 19 pouces, 1440900 pixels, 10 doigts
• 22 pouces, 16801050 pixels, 20 doigts
• 32 pouces, 19201080 pixels, 10 doigts
• Voir http//www.3m.com/multitouch pour les
  modèles plus récents
• NB Dell a sorti récemment un écran
  multitactilede 23 pouces, 19201080 pixels, 10
  doigts, pour lt 1000

modèle 19 pouces
17
Quelques informations utiles pour votre travail
pratique concernant un tableau blanc électronique
multitactile multi-utilisateur
18
TUIO (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 dobtenir 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.)

19
TUIO avec notregrande surface multitactile
Grande surface multitactile
Machine Cliente
Écrans LCD
Logiciel Client
Câble vidéo
TuioListener
Caméra IR
libTUIO.jar
Machine serveur qui fait le traitement dimage
Événements TUIO transmissur une connexion réseau
20
TUIO avec un écran 3M
Machine tournant MS Windows 7
Logiciel Client
TuioListener
Câble vidéo
libTUIO.jar
Écran 3M
Câble USB
Événements TUIO
W2TUIO
Événements WM_TOUCH
21
É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 Java
• Malheureusement, au lieu dutiliser un
  listener, on doit interroger (poller)
  activement et fréquemment pour obtenir ces
  événements

22
Écran 3M et lecture des événements WM_TOUCH
Machine tournant MS Windows 7
Logiciel Client
Câble vidéo
interrogation
Écran 3M
MT4j
Câble USB
Événements WM_TOUCH
23
Code pour interroger
while (true) if ( multitouchInterface.pollFor
InputEvent() ) client.processMultitouchInp
utEvent( ... ) multitouchPollingThread.sl
eep( ? // millisecondes ) Comment
choisir linterval de sommeil ? Quarrive-t-il si
linterval est trop court ? Et si cest trop long
?
24
Interval de sommeil adaptatif
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.pollFor
InputEvent() ) indexIntoSleepInterva
l 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 lt
sleepInterval.length-1 )
indexIntoSleepInterval
if ( sleepInterval indexIntoSleepInterval
gt 0 ) multitouchPollingThread.sle
ep( sleepInterval
indexIntoSleepInterval // millisecondes
) catch
(InterruptedException e)
Ce code est tiré du framework qui vous sera
fourni.
25
Quelques classes de base et routines qui vous
seront disponibles
26
Point2D
public class Point2D public float p
new float2 public Point2D() p0
p1 0 public Point2D( float x, float
y ) p0 x p1 y
public Point2D( Vector2D V ) p0
V.v0 p1 V.v1 public void
copy( Point2D P ) p0 P.p0
p1 P.p1 public float x() return
p0 public float y() return p1
// used to pass coordinates directly to OpenGL
routines public float get() return p
// return the difference between two given
points static public Vector2D diff( Point2D a,
Point2D b ) return new Vector2D(
a.x()-b.x(), a.y()-b.y() )
// return the sum of the given point and
vector static public Point2D sum( Point2D a,
Vector2D b ) return new Point2D(
a.x()b.x(), a.y()b.y() ) // return
the difference between the given point and
vector static public Point2D diff( Point2D a,
Vector2D b ) return new Point2D(
a.x()-b.x(), a.y()-b.y() ) public float
distance( Point2D otherPoint ) return
diff( this, otherPoint ).length()
static Point2D average( Point2D a, Point2D b )
return new Point2D( (a.x()b.x())0.5f,
(a.y()b.y())0.5f )
27
Vector2D
import java.lang.Math public class Vector2D
public float v new float2 public
Vector2D() v0 v1 0
public Vector2D( float x, float y ) v0
x v1 y public Vector2D(
Point2D P ) v0 P.p0 v1
P.p1 public void copy( Vector2D V )
v0 V.v0 v1 V.v1
public float x() return v0 public
float y() return v1 public float
lengthSquared() return x()x()
y()y() public float length()
return (float)Math.sqrt( lengthSquared() )
public Vector2D negated() return
new Vector2D(-x(),-y())
public Vector2D normalized() float l
length() if ( l gt 0 ) float k
1/l // scale factor return new
Vector2D(kx(),ky()) else return
new Vector2D(x(),y()) // returns the
dot-product of the given vectors // Notez
dot product veut dire produit scalaire
static public float dot( Vector2D a, Vector2D b )
return a.x()b.x() a.y()b.y()
// returns the sum of the given vectors
static public Vector2D sum( Vector2D a, Vector2D
b ) return new Vector2D( a.x()b.x(),
a.y()b.y() ) // returns the difference
of the given vectors static public Vector2D
diff( Vector2D a, Vector2D b ) return new
Vector2D( a.x()-b.x(), a.y()-b.y() ) //
returns the product of the given vector and
scalar static public Vector2D mult( Vector2D
a, float b ) return new Vector2D(
a.x()b, a.y()b )
28
Point2DUtil
public class Point2DUtil static public
Point2D computeCentroidOfPoints(
ArrayListltPoint2Dgt points ) float x 0,
y 0 for ( Point2D p points )
x p.x() y p.y()
if ( points.size() gt 1 ) x /
points.size() y / points.size()
return new Point2D( x, y ) ...
29
Point2DUtil
public class Point2DUtil ... static
public boolean isPointInsidePolygon(
ArrayListlt Point2D gt polygonPoints, Point2D
q ) ... ...

• Utile pour réaliser la sélection en lasso
• Aussi utile pour réaliser la sélection de
  polygones

30
Point2DUtil
public class Point2DUtil ... static
public ArrayListlt Point2D gt computeConvexHull(
ArrayListlt Point2D gt points ) ...
...

• Convex hull enveloppe convexe
• Utile pour générer un polygone à partir dun
  ensemble de points

31
Comment rajouter une marge autour dun polygone
convexe ?
Ensemble de points
Enveloppe convexe
Comment ?
Enveloppe convexe avec une marge rajoutée
Calcul de lenveloppe convexe
32
Point2DUtil
public class Point2DUtil ... static
public ArrayListlt Point2D gt computeExpandedPolygon
( ArrayListlt Point2D gt points, // input
float marginThickness ) ...
...
33
points initials
enveloppe convexe
marge rajoutée, méthode naïve
marge rajouté avecPoint2DUtil.computeExpandedPol
ygon()
ArrayListlt Point2D gt points points
Point2DUtil.computeConvexHull( points )points
Point2DUtil.computeExpandedPolygon( points,
marginThickness )
34
Point2DUtil
public class Point2DUtil ... static
public void transformPointsBasedOnDisplacementOfOn
ePoint( ArrayListltPoint2Dgt points,
Point2D P_old, Point2D P_new )
Point2D centroid computeCentroidOfPoints(
points ) Vector2D v1 Point2D.diff(
P_old, centroid ) Vector2D v2
Point2D.diff( P_new, centroid ) float
rotationAngle Vector3D.computeSignedAngle(
new Vector3D(v1.x(),v1.y(),0), new
Vector3D(v2.x(),v2.y(),0), new
Vector3D(0,0,1) ) float
lengthToPreserve v1.length() Point2D
newCentroid Point2D.sum( P_new,
Vector2D.mult( v2.normalized(), -
lengthToPreserve ) ) Vector2D
translation Point2D.diff( newCentroid, centroid
) float cosine (float)Math.cos(
rotationAngle ) float sine
(float)Math.sin( rotationAngle ) for (
Point2D p points ) float relativeX
p.x() - centroid.x() float relativeY
p.y() - centroid.y() p.get()0
(cosinerelativeX - sinerelativeY)
translation.x() centroid.x()
p.get()1 (sinerelativeX cosinerelativeY)
translation.y() centroid.y()
...
35
Transformation en fonction du déplacement de un
point
Michel Beaudouin-Lafon, Novel Interaction
Techniques for Overlapping Windows, UIST
2001http//scholar.google.ca/scholar?cluster1112
4751816710649387
36
Transformation en fonction du déplacement de un
point
Pold
DoldPoldCold difference
Pnew
Dnew (Pnew-Cold)
Cold centroid
CnewPnew(Dold).length()(Dnew).normalized()

• Composantes de la transformation
• Translation Cnew Cold
• Rotation langle entre Dnew et Dold

37
Point2DUtil
public class Point2DUtil ... static
public void transformPointsBasedOnDisplacementOfTw
oPoints( ArrayListltPoint2Dgt points,
Point2D A_old, Point2D B_old, Point2D
A_new, Point2D B_new ) ...
...
Bold
Bnew
Anew
Aold
38
Transformation en fonction du déplacement de deux
points
Bold
Bnew
Mold
Dold
Mnew(1/2)(AnewBnew) midpoint
Aold
Dnew (Anew-Bnew) difference
Anew

• Composantes de la transformation
• Translation Mnew Mold
• Rotation langle entre Dnew et Dold
• Changement déchelle (scale) (Dnew).length() /
  (Dold).length()

39
Transformation en fonction du déplacement de deux
points
40
Les interfaces avec stylet
41
InkSeine (Ken Hinckley, Microsoft
Research)http//research.microsoft.com/en-us/um/r
edmond/projects/inkseine/ https//www.youtube.com
/watch?vDW1PGq4_7eI
42
Pourquoi Apple ne propose pas de stylet pour le
iPad ?

• http//www.quora.com/Why-was-Steve-Jobs-against-th
  e-tablet-pen

43
Vignettehttp//www.shengdongzhao.com/publication/
vignette-interactive-texture-design-and-manipulati
on-with-freeform-gestures-for-pen-and-ink-illustra
tion/
44
Kinematic Templates Fung et al.
2008http//hci.uwaterloo.ca/research/kinematic
45
Kinematic Templates Fung et al. 2008
46
SandCanvas http//www.shengdongzhao.com/publicatio
n/sandcanvas/
47
Les interfaces multitactiles avec stylet(pen
touch)
48
Manual Deskterity (Ken Hinckley)https//www.you
tube.com/watch?v9sTgLYH8qWs https//www.youtube.
com/watch?vaD6f6z8kDrM http//scholar.google.ca/
scholar?qhinckleyyatanipahudcoddingtonmanual
deskterity http//scholar.google.ca/scholar?qhin
ckleyyatanipahudcoddingtonpentouchnewtools
49
Manual Deskterity (Ken Hinckley)https//www.you
tube.com/watch?v9sTgLYH8qWs https//www.youtube.
com/watch?vaD6f6z8kDrM http//scholar.google.ca/
scholar?qhinckleyyatanipahudcoddingtonmanual
deskterity http//scholar.google.ca/scholar?qhin
ckleyyatanipahudcoddingtonpentouchnewtools
50
Jeu de stratégie en temps réel, stylet
multitactile http//scholar.google.ca/scholar?qha
miltonkernerobbinspentouch https//www.youtub
e.com/watch?vt4D8atZf2z4 https//www.youtube.com
/watch?vXbkM8jlhW9Yt52s
51
Interface pen touch pour les
mathématiqueshttps//www.youtube.com/watch?vpYuD
TOqFmqc http//scholar.google.ca/scholar?qzelezn
ikhands-onmath
52
Multitactile Stylet Souris Deux Souris
Précis Non Oui Oui Oui
Sans occlusion Non Presque Oui Oui
Bon pour écrire et dessiner Moyen Oui Non Non
Nombre de points dentrée 10 1 1 2
Chaque point dentrée se distinguee Non N/A N/A Oui
Entrées supplémentaires (survol, orientation) Boutons, efface, pression, survol, (orientation) Boutons, (orientation) Boutons, (orientation)
Entrée directe Oui Oui Non Non
Garde lécran proper Non Moyen Oui Oui
Permet plusieurs utilisateurs Oui (parfois) (parfois) (?)
Rien à tenir (donc pas de temps pris pour le prendre, et impossible à perdre) Oui Non Non Non
53
Les menus et widgets contextuels
54
Rappel de matière vue en GTI350 les widgets
contextuels pour lancer des commandes (menus
contextuels, menus radiaux, Marking Menus, etc.)
55
Verbes(actions,commandes,outils,opérations)
Noms(objets,endroits)
56
Verbes dans un menu déroulant
Noms(objets,endroits)
57
Verbes dansun menu contextuel
Noms(objets,endroits)
58

• Les modes créent la possibilité davoir des
  erreurs de mode, où lutilisateur se croît en un
  mode lorsquil est dans un autre
• Un retour visuel indiquant le mode actuel est
  bien, mais souvent nest pas assez pour empêcher
  les erreurs de mode
• Exemples de retours visuels indiquant le
  modeicône doutil 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 lespace 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))

59
Étant donné tous ces avantages des menus
contextuels, pouvons-nous améliorer leur
conception?Y a t-il des widgets ou des
techniques dinteraction encore mieux?
60
Menu radial(Radial Menu, Pie Menu)
61
Menus radiaux versusmenus linéaires

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

62
Menu radial hiéarchique
63
 Mouse Gestures  pour Firefox
64
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
  na même pas besoin de voir le menu safficher.

65
Ensemble de marques découvrables
(self-revealing), contrairement aux interfaces
gestuelles habituelles
66
Présentation graphique améliorée
67
Marking Menus

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

68
Transition de néophyte en expert
Marking MenusTransition graduelleet naturelle !
Menus traditionelsPointage versus racourcis
69

• Les Marking Menus
• Permettent une sélection plus rapidequavec 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électionnernom et
  verbe
• Sont limités à environ 8 commandes par sous-menu,
  et à une profondeur denviron 3 niveaux

70
Dautres 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 dinteraction sont
  adaptés pour
• Un grand nombre de commandes
• Le contrôle de variables continues
• Lentrée de texte et de nombres avec des gestes
• Lutilisation dun stylet (par exemple, sur un
  tablet PC)
• Travailler avec deux mains

71
Exemple de Control Menu(dans SimplePaint)
72
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.
73
BumpTop (Agarawala et Balakrishnan,
2006)http//scholar.google.ca/scholar?qagarawala
balakrishnankeepin22Pushingthedesktopmetaph
or22 http//bumptop.com

• Vidéos
• prototype http//www.youtube.com/watch?vM0ODskdE
  PnQ
• version hip-hop http//www.youtube.com/watch?voU
  VpSY4eBCc
• parodie http//www.youtube.com/watch?vkQL9V2dnKF
  Y
• présentation TED http//www.ted.com/talks/anand_a
  garawala_demos_his_bumptop_desktop
• version commerciale http//www.youtube.com/watch?
  v6jhoWsHwU7w

74
FlowMenus (Guimbretière et al.,
2000)http//www.acm.org/uist/archive/videos/2000/
p213-guimbretiere.mov
75
FlowMenus (Guimbretière et al.,
2000)http//www.acm.org/uist/archive/videos/2000/
p213-guimbretiere.mov
76
Scriboli (Hinckley et al., CHI 2005)https//www.y
outube.com/watch?v7YhJ2vGaftY http//www.patrick
baudisch.com/publications/2005-Hinckley-CHI05-Scri
boli.wmvhttp//research.microsoft.com/users/kenh/
papers/Scriboli.mov
77
Tracking Menu (Fitzmaurice et al., UIST
2003)http//www.acm.org/uist/archive/videos/2003/
p71-fitzmaurice.mov http//www.autodeskresearch.c
om/publications/trackingmenus https//www.youtube
.com/watch?vG1jC6jQhcJI
78
HoverWidgets (Grossman et al., CHI
2006)http//www.dgp.utoronto.ca/ravin/videos/chi
2006_hoverwidgets.mov https//www.youtube.com/wat
ch?vWPbiPn1b1zQ https//www.youtube.com/watch?v
KRXfaZ8nqZMhttp//www.dgp.toronto.edu/tovi/video
s/hoverwidgets.mov
79
PieCursor (Fitzmaurice et al., CHI
2008)http//www.autodeskresearch.com/publications
/piecursor
80
(No Transcript)
81
Le  hotbox  un menu 2D dans Maya
82
Le Hotbox dans Maya
Kurtenbach et al., 1999
83
Le Hotbox dans Maya
Kurtenbach et al., 1999
84
Le Hotbox dans Maya
Kurtenbach et al., 1999
85
Toolglass entrée bimanuellehttps//www.youtube.c
om/watch?vfUwYCbhFj1U http//www.autodeskresearc
h.com/publications/t3
Clic-à-travers (click-through) sélection
simultanée dobjet et de commande !
86
Comment analyser et comparer ces différentes
techniques pour lancer des commandes ?
87
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

88
Modèle à trois états de Buxton (1990)
État 0hors de portéesans coordonnées
État 1 survol(x,y)
État 2 glissement(x,y)
É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 états 1, 2
• Écran tactile états 0, 1

89
TouchMouse(Hinckley et Sinclair 1999)
États 0, 1, 2
90
TouchMouse(Hinckley et Sinclair 1999)
91
Taxonomie de menus
2 points dentrée 1 point dentrée 1 bouton sous lautre main 1 point dentré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)
92
Taxonomie de menus
2 points dentrée 1 point dentrée 1 bouton sous lautre main 1 point dentrée
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 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). Exemple souris, tablette graphique. Hotbox Tracking Menus HoverWidget Pie Cursor
93
(No Transcript)
94
Question 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 stylo