Transcript Interfaces multitactiles 1920×2160 pixel, 90×100 cm multitouch surface at ETS (made with two 1920×1080 pixel, 42inch displays), designed and built by Christophe Viau.

Interfaces multitactiles
1920×2160 pixel, 90×100 cm
multitouch surface at ETS (made
with two 1920×1080 pixel, 42inch displays), designed and
built by Christophe Viau (a Ph.D.
student of McGuffin) and
Jean-François Lahos.
3M Multi-touch Developer Kit
• http://www.3m.com/multitouch
• US $ 1600
• Ancien modèle: écran LCD, 19 pouces,
1440×900 pixels, 10 doigts
• Nouveau modèle: écran LCD, 22 pouces,
1680×1050 pixels, 20 doigts
32 inch, 1920x1080 pixels,
3M multitouch screen at ETS
Multimedia Lab at ETS
Multitouch workstations for undergrad projects
and research projects.
Quelques exemples d’interfaces
multitactiles
Vidéos …
• 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
• 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
• Mur interactif à Cannes 2009
• SLAP Widgets: http://www.youtube.com/watch?v=I2rDHUUkd5Y
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
Exemple de conception 1:
interface bimanuelle /
multitactile pour manipuler une
visualisation de réseau
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 sousensembles du réseau et les
déplacer/tourner en même temps
The Hotbox in Maya
[Kurtenbach et al., 1999]
New Hotbox (IEEE InfoVis 2009)
“chains”
biconnected
components
trees
nodes with common
neighborhoods
Toolglass: bimanual input
http://www.youtube.com/watch?v=fUwYCbhFj1U
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?
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
Comparaison …
Entrée indirecte bimanuelle
• 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
• ne salie pas l’écran
• permet plus d’états, et on peut facilement rajouter des
boutons, pour permettre plus de fonctions et même des
"accords" (combinaisons de boutons)
• plus facile à détecter la rotation
Entrée directe multitactile
• plus que 2 points d'entrée
Hotbox + Toolglass = Hotglass
• Normally used like a toolglass (click-through)
• User can “teleport” it to enter hotbox mode
• Switch tabs by crossing
Alors quels sont les vrais
avantages du multitactile ?
• …
Comment améliorer la précision de
sélection dans les interfaces
multitactiles?
• Vidéo (Benko et al., CHI 2006)
Exemples de gestes multitactiles
• http://images.google.ca/images?q=multitouch+gestures
http://www.geek.com/articles/apple/apple-patents-a-bunch-of-newmultitouch-gestures-20100429/
http://www.slashgear.com/bumptop-adds-exclusive-multitouchgestures-to-3d-desktop-video-0158661/
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
• Exemple: Multitouch Marking Menus
http://www.autodeskresearch.com/publications/multitouchmm
• Exemple: Shadow Guides (Freeman)
• Exemple: OctoPocus (Bau 2008)
Démonstration de logiciels qui
fonctionnent avec les écrans 3M
2D polygons
3D blocks
http://www.michaelmcguffin.com/tmp/multitouchDemos3Mdisplay/3M_multitouch_demo-2Dpolygons.mov
http://www.michaelmcguffin.com/tmp/multitouchDemos3Mdisplay/3M_multitouch_demo-3Dblocks.mov
Exemple de conception 2:
jeu multitactile
Jeu multitactile
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
– …
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.
Exemple de Control Menu
(dans SimplePaint)
Travail pratique sur
tablette Xoom de Motorola
Lasso
1 doigt sur le fond: translation de caméra
Lasso
1 doigt sur le fond: translation de caméra
Lasso
2 doigts sur le fond: zoom et translation de caméra
Lasso
2 doigts sur le fond: zoom et translation de caméra
Lasso
1 doigt sur une forme: translation
Lasso
1 doigt sur une forme: translation
Lasso
2 doigts sur une forme: translation, rotation, changement d’échelle
Lasso
2 doigts sur une forme: translation, rotation, changement d’échelle
Lasso
En mode “lasso”: 1 doigt pour dessiner le lasso
Lasso
La sélection actuelle, après relâchement du lasso
Lasso
Fonctionnalités à rajouter pour
votre travail pratique …
1 doigt sur la sélection actuelle: translation
Lasso
1 doigt sur la sélection actuelle: translation
Lasso
En mode “effacer”: 1 doigt pour supprimer une forme
Lasso
Effacer
En mode “effacer”: 1 doigt pour supprimer une forme
Lasso
Effacer
Bouton “encadrer”: fait un zoom pour centrer la scène
Lasso
Effacer
Encadrer
Bouton “encadrer”: fait un zoom pour centrer la scène
Lasso
Effacer
Encadrer
En mode “créer”: 3 doigts ou plus pour créer un polygone
Lasso
Effacer
Encadrer
Créer
Points alloués pour le travail
pratique
•
•
•
•
Translation de sélection: 1 point
Mode “effacter”: 1 point
Mode “encadrer”: 1 point
Mode “créer”: 2 points
• Une équipe de N personnes doit
compléter des modifications valant
N points
Consignes pour travailler avec
les Xooms
• Le câble d’alimentation est délicat !
Attention s.v.p.
Delicat !
Brise facilement !
Consignes pour travailler avec
les Xooms
• Si vous devez faire un redémarrage de votre Xoom,
tenez le bouton arrière pendant 5-10 secondes
• Si cela ne fonctionne pas, essayez de tenir le bouton
arrière ET le bouton pour augmenter le son en même
temps pendant 5-10 secondes
Quelques classes de base et
routines qui vous seront
disponibles …
public class Point2D {
Point2D
public float [ ] p = new float[2];
public Point2D() {
p[0] = p[1] = 0;
}
// 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() );
}
public Point2D( float x, float y ) {
p[0] = x;
p[1] = 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 Point2D( Vector2D V ) {
p[0] = V.v[0];
p[1] = V.v[1];
}
public float distance( Point2D otherPoint ) {
return diff( this, otherPoint ).length();
}
public void copy( Point2D P ) {
p[0] = P.p[0];
p[1] = P.p[1];
}
static Point2D average( Point2D a, Point2D b ) {
return new Point2D( (a.x()+b.x())*0.5f, (a.y()+b.y())*0.5f );
}
}
public float x() { return p[0]; }
public float y() { return p[1]; }
// 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() );
}
import java.lang.Math;
Vector2D
public class Vector2D {
public float [ ] v = new float[2];
public Vector2D() {
v[0] = v[1] = 0;
}
public Vector2D normalized() {
float l = length();
if ( l > 0 ) {
float k = 1/l; // scale factor
return new Vector2D(k*x(),k*y());
}
else return new Vector2D(x(),y());
}
public Vector2D( float x, float y ) {
v[0] = x;
v[1] = y;
}
public Vector2D( Point2D P ) {
v[0] = P.p[0];
v[1] = P.p[1];
}
// 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();
}
public void copy( Vector2D V ) {
v[0] = V.v[0];
v[1] = V.v[1];
}
// 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() );
}
public float x() { return v[0]; }
public float y() { return v[1]; }
// 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() );
}
public float lengthSquared() {
return x()*x() + y()*y();
}
public float length() {
return (float)Math.sqrt( lengthSquared() );
}
public Vector2D negated() {
return new Vector2D(-x(),-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 );
}
}
Point2DUtil
public class Point2DUtil {
static public Point2D computeCentroidOfPoints( ArrayList<Point2D> points ) {
float x = 0, y = 0;
for ( Point2D p : points ) {
x += p.x();
y += p.y();
}
if ( points.size() > 1 ) {
x /= points.size();
y /= points.size();
}
return new Point2D( x, y );
}
...
}
Point2DUtil
public class Point2DUtil {
...
static public boolean isPointInsidePolygon(
ArrayList< Point2D > polygonPoints,
Point2D q
){
...
}
...
}
• Utile pour réaliser la
sélection en lasso
• Aussi utile pour réaliser la
sélection de polygones
En mode “lasso”: 1 doigt pour dessiner le lasso
Lasso
1 doigt sur une forme: translation
Lasso
1 doigt sur une forme: translation
Lasso
1 doigt sur la sélection actuelle: translation
Lasso
1 doigt sur la sélection actuelle: translation
Lasso
Point2DUtil
public class Point2DUtil {
...
static public ArrayList< Point2D > computeConvexHull(
ArrayList< Point2D > points
){
...
}
...
}
• “Convex hull” = enveloppe convexe
• Utile pour générer un polygone à
partir d’un ensemble de points
Comment rajouter une marge
autour d’un polygone convexe ?
Enveloppe
convexe
Comment ?
Calcul de l’enveloppe convexe
Ensemble
de points
Enveloppe
convexe
avec une
“marge”
rajoutée
Point2DUtil
public class Point2DUtil {
...
static public ArrayList< Point2D > computeExpandedPolygon(
ArrayList< Point2D > points, // input
float marginThickness
){
...
}
...
}
points initials
enveloppe
convexe
marge rajoutée,
méthode naïve
marge rajouté avec
Point2DUtil.
computeExpandedPolygon()
ArrayList< Point2D > points = …;
points = Point2DUtil.computeConvexHull( points );
points = Point2DUtil.computeExpandedPolygon( points, marginThickness );
La sélection actuelle, après relâchement du lasso
Lasso
Point2DUtil
public class Point2DUtil {
...
static public void transformPointsBasedOnDisplacementOfOnePoint(
ArrayList<Point2D> 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] = (cosine*relativeX - sine*relativeY) + translation.x() + centroid.x();
p.get()[1] = (sine*relativeX + cosine*relativeY) + translation.y() + centroid.y();
}
}
...
}
Transformation en fonction du
déplacement de un point
Michel Beaudouin-Lafon, “Novel Interaction Techniques for
Overlapping Windows”, UIST 2001
http://scholar.google.ca/scholar?cluster=11124751816710649387
Transformation en fonction du
déplacement de un point
Pold
Pnew
Composantes de la transformation:
• Translation: Cnew – Cold
• Rotation: l’angle entre Dnew et Dold
Point2DUtil
public class Point2DUtil {
...
static public void transformPointsBasedOnDisplacementOfTwoPoints(
ArrayList<Point2D> points,
Point2D A_old, Point2D B_old,
Point2D A_new, Point2D B_new
){
...
}
...
}
Bold
Anew
Aold
Bnew
Transformation en fonction du
déplacement de deux points
Bold
Bnew
Mold
Dold
Aold
Mnew=(1/2)(Anew+Bnew) [midpoint]
Dnew= (Anew-Bnew) [difference]
Anew
Composantes de la transformation:
• Translation: Mnew – Mold
• Rotation: l’angle entre Dnew et Dold
• Changement d’échelle (“scale”): (Dnew).length() / (Dold).length()
Transformation en fonction du
déplacement de deux points
2 doigts sur une forme: translation, rotation, changement d’échelle
Lasso
2 doigts sur une forme: translation, rotation, changement d’échelle
Lasso