Interfaces multitactiles LOG 745

1
Interfaces multitactilesLOG 745
2
Rappel de matière vue en LOG350 les widgets
contextuels pour lancer des commandes (menus
contextuels, menus radiaux, Marking Menus, etc.)
3
Verbes(actions,commandes,outils,opérations)
Noms(objets,endroits)
4
Verbes dans un menu déroulant
Noms(objets,endroits)
5
Verbes dansun menu contextuel
Noms(objets,endroits)
6

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

7
É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?
8
Menu radial(Radial Menu, Pie Menu)
9
Exemple utilisant, effectivement, des menus
radiaux
Yatani et al., CHI 2008
10
Menus radiaux versusmenus linéaires

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

11
Menu radial hiéarchique
12
 Mouse Gestures  pour Firefox
13
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.

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

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

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

• 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

19
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

20
Exemple de Control Menu(dans SimplePaint)
21
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.
22
FlowMenus (Guimbretière et al., 2000)
23
Manipulation 2D avec FlowMenus(Guimbretière et
al., 2000)
24
Scriboli
Hinckley et al., CHI 2005http//research.microsof
t.com/users/kenh/papers/Scriboli.mov
25
Tracking Menu
Fitzmaurice et al., UIST 2003 http//www.autodeskr
esearch.com/publications/trackingmenus
26
HoverWidgets
Grossman et al., CHI 2006 http//www.dgp.toronto.e
du/tovi/videos/hoverwidgets.mov
27
Pie Cursor
Fitzmaurice et al., CHI 2008http//www.piecursor.
com/
28
(No Transcript)
29
Le  hotbox  un menu 2D dans Maya
30
Toolglass entrée bimanuelle
Clic-à-travers (click-through) sélection
simultanée dobjet et de commande !
31
Comment analyser et comparer ces différentes
techniques pour lancer des commandes ?
32
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

33
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 numérisante états 0, 1, 2
• Souris états 1, 2
• Écran tactile états 0, 1

34
TouchMouse(Hinckley et Sinclair 1999)
États 0, 1, 2
35
TouchMouse(Hinckley et Sinclair 1999)
36
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)
37
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) 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) Hotbox Tracking Menus HoverWidget Pie Cursor
38
(No Transcript)
39
De grands écrans
http//www.tacc.utexas.edu/resources/visualization
40
Al Gore
41
Des grands écrans collaboratifs
http//cobweb.sfasu.edu/rball/large20display.jpg
42
Des grands écrans collaboratifs
http//www.tacc.utexas.edu/resources/visualization
43
19202160 pixel, 90100 cm multitouch surface at
ETS (made with two 19201080 pixel, 42-inch
displays), designed and built by Christophe Viau
(a Ph.D. student of McGuffin) andJean-François
Lahos.
44
3M Multi-touch Developer Kit

• http//www.3m.com/multitouch
• US 1600
• Ancien modèle écran LCD, 19 pouces, 1440900
  pixels, 10 doigts
• Nouveau modèle écran LCD, 22 pouces, 16801050
  pixels, 20 doigts

45
Écran 32 pouces de 3M

• 5000
• 10 doigts
• 1920x1080

46
perceptivepixel.com

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

47
perceptivepixel.com

• 82 pouces

48
Multitouchmedia.com

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

49
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

50
(No Transcript)
51
Quelques informations utiles pour votre travail
pratique concernant un tableau blanc électronique
multitactile multi-utilisateur
52
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.)

53
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
54
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
55
É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

56
É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
57
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
?
58
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.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.
59
Quelques classes de base et routines qui vous
seront disponibles
60
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 )
61
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 )
62
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 ) ...
63
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

64
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

65
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
66
Point2DUtil
public class Point2DUtil ... static
public ArrayListlt Point2D gt computeExpandedPolygon
( ArrayListlt Point2D gt points, // input
float marginThickness ) ...
...
67
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 )
68
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()
...
69
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
70
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

71
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
72
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()

73
Transformation en fonction du déplacement de deux
points