Bureau
Le Bureau est le conteneur de base de toute application MAGGLITE, le nœud racine de tout
graphe de scène d'application. Il étend le MaggLite Container et fournit tous les mécanismes
qui initient les parcours du graphe de scène, en particulier pour l'affichage. C'est un composant
que l'on peut qualifier d'hybride, car il intègre des fonctionnalités de la librairie Swing,
utilisée pour obtenir les ressources nécessaires à l'affichage (fenêtre du système
d'exploitation).
Outre les parcours pour affichage, ce composant initie aussi les parcours lors de l'initialisation
de l'application pour l'accès aux dispositifs particuliers de chaque nœud (manipulateurs et
outils internes), mais aussi pendant l'exécution, pour la sélection de nœuds (pick).
Composant
L'objet Composant concrétise la notion d'objet graphique en définissant une forme pouvant
donc être affichée. Notons toutefois que la géométrie de ces objets reste abstraite dans son
implémentation, celle-ci étant fournie lors de l'instanciation. Cette abstraction de la forme permet
la création de composants graphiques de géométrie quelconque, ce qui est indispensable dans le
contexte de développement des interfaces avancées (qui ne repose pas uniquement sur des objets
rectangulaires ou elliptiques).
Définissant une forme, ces objets définissent aussi une
proximité. La proximité d'un objet graphique
est une zone de forme identique et de taille paramétrable autour de lui. Invisible par défaut, cette
zone peut être rendue visible sous forme d'un halo, comme dans la figure 8.3. Nous
reviendrons sur ce principe des proximités dans la section 8.3.2, celles-ci étant utilisées
dans MAGGLITE pour les interactions de proximité.
|
Enfin, cette classe est étendue par trois autres, offrant des capacités supplémentaires (voir figure 8.4):
|
Label
Enfin, MAGGLITE contient aussi un objet atomique permettant l'affichage simple de texte sur une
seule ligne.
Les calques représentent donc une abstraction pouvant être simplement étendue pour spécifier des propriétés et capacités particulières qui vont être ajoutées sous forme de couches graphiques à un autre objet. Les différents calques que nous proposons, déclinant le calque de base, permettent aussi l'ajout de couches d'interaction lorsqu'ils sont associés à des outils internes adaptés. C'est une réalisation efficace et modulaire (bien que moins complète) du modèle multi-couches proposé dans [Fekete et Beaudouin-Lafon1996,Fekete1996].
Calque de dessin
Les Calques de dessin permettent de dessiner sur un composant graphique (voir figure
8.5). Il faut pour cela que le calque ait bien évidemment été ajouté à un composant
et qu'un outil de dessin approprié lui soit affecté (outil interne de dessin).
Calque 3D
Les Calques 3D permettent l'affichage d'une scène 3D, en utilisant les capacité
d'accélération matérielle des cartes graphique OpenGL. Nous avons pour cela utilisé la librairie
graphique Jogl [Petersen et Russel2004] pour la partie rendu 3D et la librairie Xith3D [Xith3D Project Group2003] afin de
permettre la construction des scène 3D avec des graphes de scène. Ainsi, le calque 3D est un
conteneur de notre graphe de scène qui affiche lui-même un graphe de scène 3D8.3. Il est ainsi possible de développer des
applications de visualisation ou des environnements 3D très avancés et somme toute assez
performants. Nous avons pour cela utilisé les méthodes fournies par la librairie Xith3D, mais aussi
ajouté certaines méthodes de rendu 3D plus évoluées (notamment le rendu non photoréaliste de
la figure 8.6, pour lequel nous avons implémenté la méthode proposée dans
[Gooch et al.1998]).
|
Ces calques sont une approche flexible d'inclusion de scènes 3D dans une boîte à outils 2D avancée. Ils permetent la conception d'interfaces très innovantes, mêlant 2D et « vraie» 3D8.4 dans un modèle d'architecture logicielle unifié. Il reste toutefois à clarifier les possibilités d'interaction avec cette scène 3D. Actuellement, seule une interaction directe sur le point de vue de la scène 3D est possible, par l'intermédiaire du manipulateur du calque 3D (voir figure 8.7(c)). Cela permet tout de même la connexion directe de périphériques d'entrée standards ou avancés à cette manipulation de la vue, mais aussi de techniques d'interaction originales (manipulation de la vue 3D par reconnaissance de gestes ou par commandes vocales). Aller plus loin dans les interactions avec la scène 3D (sélection et déplacement d'objets, par exemple) implique à notre avis l'unification des graphes de scènes 2D et 3D dans l'architecture des graphes combinés. Bien qu'il soit aussi possible d'externaliser ces points d'entrée à l'interaction 3D par l'intermédiaire du manipulateur associé au calque 3D, cela serait beaucoup moins flexible qu'un modèle de graphe combinés étendu à la 3D (un seul graphe de scène 2D/3D associé à un graphe d'interaction).
Gestionnaire de calques
Un troisième composant est lié aux calques: un Gestionnaire de calques, permettant de contenir
et manipuler une pile de calques. Les composants graphiques de la boîte à outils que nous avons
vus jusqu'alors peuvent contenir un nombre indéterminé de calques, mais ne fournissent aucun moyen de
les manipuler, les réordonner, établir une stratégie de sélection des calques. Ce composant de
gestion de calques le permet en proposant les méthodes nécessaires à l'ajout dynamique de calques de
différents types (dessin, 3D ou tout autre type de calque qui sera ajouté à la boîte à outils), mais
aussi les mécanismes permettant de sélectionner un calque actif du point de vue de l'interaction, de
les réordonner dans la pile, d'en supprimer, etc. De plus, il propose une vue miniature de la pile
de calques qu'il contient, ainsi que les notions de calque d'arrière plan et calque de
premier plan, deux calques qui ne peuvent être réordonnés (permettant ainsi l'ajout d'objets
graphiques en fond ou premier plan). Son manipulateur donne accès à ces fonctions de gestion de la
pile de calques.
Ce composant, associé à sa vue miniature, a principalement été conçu pour la réalisation de SVALABARD. Nous l'avons toutefois aussi utilisé pour une application exemple de la boîte à outils, application plus basique de dessin bitmap multi-calques.
Fenêtre
Le composant Fenêtre reprend le principe des fenêtres des boîtes à outils standards, avec en
plus les possibilités de graphismes et d'interactions avancées de MAGGLITE. Son graphe de scène est
composé d'un nœud racine sans aspect graphique, auquel sont ajoutés deux fils: un bord et un
panneau de contenu. Le bord sert à redimensionner la fenêtre, le panneau interne est le conteneur
dans lequel peuvent être ajoutés d'autres objets graphiques. Le composant racine est le modèle de
l'objet fenêtre, il implémente les comportements et interactions entre lui et ses fils (gestion du
redimensionnement global lors de la manipulation du bord, ajout d'autres fils dans le panneau de
contenu, etc.).
Bouton
L'objet composite Bouton, comme son nom l'indique, reprend le principe du widget bien connu
des interfaces standards, présentant tout de même la particularité de ne pas être limité à une
forme géométrique rectangulaire ou elliptique.
Slider
Le Slider est un objet composite qui implémente le widget standard représentant une
glissière. Son graphe de scène associe deux objets, une glissière et une poignée, le comportement de
l'un étant lié à celui de l'autre (les mouvements de la poignée sont contraints sur la
glissière). Son modèle permet de maintenir une valeur entière dépendant de la position de la
poignée.
Zone de texte
La Zone de texte agrège un composant graphique rectangulaire et plusieurs labels. Il définit
un comportement permettant de créer plusieurs labels et d'adapter leur nombre afin d'afficher le
texte voulu dans les limites graphiques du composant.
Mise à part les possibilités graphiques offertes par notre architecture pour la réalisation de ces objets, le principal avantage est qu'ils ne sont pas «câblés» de manière rigide et exclusive comme dans les boîtes à outils usuelles, que ce soit en entrée ou en sortie. Il peuvent alors être manipulés avec des paradigmes d'interaction différents et leurs comportements communs peuvent être définis dynamiquement par leurs manipulateurs qui externalisent l'accès à leur modèle. Par exemple, les comportements des trois widgets de la figure 8.9 sont configurés graphiquement comme suit avec leurs manipulateurs: le slot de sortie value (valeur) de la glissière au centre est connecté au slot d'entrée de la zone de texte à droite par l'intermédiaire d'un adaptateur (conversion de type entier → chaîne de caractères). Lorsque la valeur courante de la glissière change, par manipulation du widget ou par réception d'une nouvelle valeur au slot d'entrée value de son manipulateur, la zone de texte affiche cette valeur. Le slot de sortie action du manipulateur du bouton (à gauche) est connecté à un dispositif pass qui envoie alors la valeur constante du dispositif Init Value au slot d'entrée value du manipulateur de la glissière. Ainsi, actionner le bouton permet de réinitialiser la glissière à une valeur par défaut.
|
Cet exemple simple dénote des possibilités d'expression et de prototypage rapide que permettent les graphes d'interaction avec les manipulateurs d'objets graphiques. Mais nous y voyons aussi des possibilités évidentes pour des domaines tels que l'enseignement de l'IHM, une telle approche visuelle et interactive permettant de concentrer le discours sur les fondements plutôt que sur les techniques de programmation. Enfin, cette possibilité de connexion dynamique des entrées-sorties des états des objets d'intérêt de l'interface peut aussi permettre à l'utilisateur final de composer sa propre interface, de décider de quels objets vont devenir des instruments pour en contrôler d'autres.
D'un point de vue plus général sur les objets composites, il serait intéressant de spécifier leur modèle interne par un graphe d'interaction, à l'aide des manipulateurs des objets qui les composent, plutôt que par programmation comme nous l'avons fait jusqu'alors. Par exemple, les contraintes de déplacement portant sur la poignée du Slider et sa valeur courante pourraient être spécifiées de la sorte. Cette approche, encore plus flexible, permettrait le prototypage rapide d'objets composites et donc d'objets complexes réutilisables. Toutefois, cela soulève le problème à la fois conceptuel et technique d'attacher un graphe d'interaction particulier à un nœud du graphe de scène. En effet, bien qu'ICON permette la création de dispositifs composites, encapsulant une configuration d'entrée, il nous parait à l'heure actuelle complexe d'inclure dans notre modèle d'architecture logicielle des manipulateurs d'objets graphiques basés sur ces principes.
|
Pour une sélection standard, sous le curseur, nous proposons plusieurs stratégies:
Nous avons étendu cette sélection par une méthode de sélection par proximité. Le dispositif de sélection permet de déterminer si la position reçue est dans la proximité d'un objet. De la même manière que précédemment, l'objet, ou la liste d'objets, sélectionné(s) par proximité est alors envoyé(e) par le slot de sortie ml.proxid.
Nous proposons une dernière méthode de sélection assimilable à la notion de focus. Le
dispositif de sélection peut être paramétré pour renvoyer la référence de l'objet le plus proche de
la position reçue. Il y a ainsi toujours un objet sélectionné, quelle que soit la position reçue.
Enfin, ce dispositif permet aussi la sélection de composants de la boîte à outils Swing, ceux-ci
pouvant être ajoutés dans des graphes de scène MAGGLITE. Les références de ces objets sont émises
par le slot swing.id.
Drag (Glisser-Déposer)
Le dispositif de Drag permet la manipulation d'objets graphiques par Glisser-Déposer. Ce
dispositif générique n'implémente que l'action de déplacement des objets, sans fournir une
sémantique particulière telle que le déplacement d'objets dans des conteneurs compatibles ou le
déclenchement d'actions par Drag and Drop. Toutefois, il est envisageable d'étendre cette
technique de base en décomposant justement ces actions de plus haut niveau sous forme de dispositifs
et en les connectant dynamiquement (création d'un dispositif Drop, à connecter à la suite du
dispositif Drag).
Paper sheet
Le dispositif Paper Sheet réalise une interaction de manipulation directe d'objets proposée
dans [Beaudouin-Lafon2001]. Par analogie au déplacement d'une feuille de papier, cette technique permet
d'effectuer simultanément une translation et une rotation sur un objet graphique (voir figure
8.11). Initialement conçue pour effectuer des rotations sur des fenêtres empilées,
cette technique peut s'avérer applicable dans d'autres contextes d'utilisation. Sa réalisation sous
une forme générique applicable à tous les objets graphiques de MAGGLITE facilite son emploi (nous
verrons plus loin un exemple d'utilisation de cette technique).
Pliage
Issue aussi de [Beaudouin-Lafon2001], et associée à une interaction de
franchissement (Crossing-based interaction) dans [Dragicevic2004a], la technique du
Pliage permet de replier un objet graphique, de la même manière qu'une feuille de papier
(voir figure 8.11). Ce dispositif permet une gestion globale du pliage des objets
graphiques compatibles de la librairie: les objets implémentent la capacité de pliage (géométrie et
affichage) et le dispositif permet de paramétrer son déclenchement par l'entrée dans sa proximité ou
le franchissement de sa frontière (il est aussi possible de plier directement les objets par
l'intermédiaire de leur manipulateur).
|
Responsive Handles
Nous proposons dans MAGGLITE une technique originale pour la manipulation d'objets
graphiques: les Responsive handles8.5. Ces poignées
réactives étendent le principe des poignées de manipulation, courantes dans les logiciels de
dessin 2D ou de modélisation 3D, par exemple. Les poignées sont des instruments, dont la
représentation dépend de la fonction, visibles sur le contour de l'objet d'intérêt lorsque celui-ci
est sélectionné et permettant de le transformer. Dans la figure 8.12, l'on peut voir
les deux types de poignées les plus courantes: pour redimensionner ou tourner l'objet. Leur
répartition autour de l'objet permet d'accéder facilement et rapidement à l'interaction. Toutefois,
il est nécessaire de sélectionner l'outil (redimensionnement ou rotation, par exemple), puis l'objet
d'intérêt pour avoir accès aux poignées.
La technique que nous proposons regroupe ces différentes poignées sur un même instrument réactif qui va apparaître et suivre automatiquement le pointeur lorsque celui-ci entre et se déplace dans la proximité d'un objet (voir figure 8.13). Ainsi, l'interaction devient accessible sans sélection explicite de l'objet et sans que l'instrument n'occupe de la place inutilement. De plus, les Responsive Handles permettent plusieurs manipulations avec un seul instrument: déplacement, redimensionnement ou rotation. Il n'est alors plus nécessaire d'opérer à une sélection préalable de la fonction désirée: celle-ci sera déterminée par la manière de manipuler la poignée, dépendant de la connexion de son dispositif aux périphériques d'entrée. Par exemple, les différents modes peuvent être connectés sur les trois boutons d'une souris. Dès lors, le bouton utilisé pour manipuler la poignée par Glisser-Déposer déterminera la transformation appliquée à l'objet correspondant. Enfin, dans le cas d'objets proches (dont les proximités se croisent), ces poignées permettent d'effectuer la sélection et la manipulation de plusieurs objets en un seul geste.
|
L'évaluation de cette nouvelle technique pourra nous permettre de confirmer les apports que nous lui
supposons. Elle est en plus une piste vers d'autres types d'interactions basées sur le même paradigme
d'interactions de proximité.
Mais elle est aussi un exemple concret des apports de MAGGLITE pour le prototypage et l'utilisation de nouvelles techniques:
La boîte à outil fournit les abstractions nécessaires à la réalisation de ces transformation sous la forme d'interfaces et de classes abstraites Java. Le principe d'implémentation est, pour chaque nouvelle transformation, de réaliser un objet graphique calque qui va être le conteneur dans lequel les objets graphiques seront transformés, la transformation en elle-même et le dispositif d'interaction contrôlant la transformation. Pour construire une application permettant une transformation, il suffit d'utiliser le calque correspondant comme conteneur (au niveau de n'importe quel nœud du graphe de scène). Il sera alors possible, par connexion du dispositif approprié, de déclencher et contrôler la transformation.
Fisheyes
La première transformation que nous proposons comme exemple est une déformation de type
Fisheyes [Furnas1981,Furnas1986]. Cette technique, largement utilisée en visualisation
d'informations [Fekete2004] mais aussi pour l'interaction avec les fisheye menus
[Bederson2000] par exemple, applique le principe de déformation des objectifs photographiques
du même nom à la visualisation d'informations.
Le principe est que les objets proches du point d'intérêt (le point focal) sont nets et visibles, et
plus ils s'en éloigne, plus le niveau de détail diminue, selon une déformation sphérique (voir
figure 8.14). Cela permet d'avoir une vue globale sur un grand nombre d'information
(la périphérie), tout en conservant la précision et un haut niveau de détails (autour du point
focal), cela de manière continue.
Nous avons donc réalisé cette transformation et l'interaction associée (changement du point focal), en réutilisant l'implémentation présente dans la boîte à outils InfoVis [Fekete2004]. Ainsi, cette technique de visualisation peut-être connectée selon les besoins et utilisée dans MAGGLITE. Dans la figure 8.14, elle est utilisée pour une application de visualisation d'informations (partie gauche de la figure). Mais nous voyons aussi qu'elle peut être utilisée facilement dans une application standard, avec des widgets (partie droite de la figure). Cette utilisation ne présente pas un grand intérêt du point de vue interaction et utilisabilité, mais elle montre que la généricité et la flexibilité de MAGGLITE encourage l'utilisation de techniques dans des contextes différents, permettant l'exploration et la découverte de nouveaux paradigmes.
|
Zoom adaptatif à la densité
Nous avons utilisé cette architecture pour prototyper une autre transformation, dont le principe est
proche du fisheyes. Celle-ci consiste à appliquer un agrandissement proportionnel à la
quantité d'objets présents autour du point d'intérêt, d'où son appellation adaptatif à la
densité. Ainsi, plus il y a d'objets dans le voisinage, plus l'agrandissement est important,
offrant alors une meilleure vue. Cette visualisation peut être renforcée par un effet visuel de
flou (voir figure 8.15).
|
Outre son application à la visualisation d'informations, cette méthode montre aussi un intérêt pour d'autres applications, comme le composant de visualisation des calques de dessin utilisé dans SVALABARD (voir figure 8.15), même si dans ce cas, l'aspect adaptatif n'est pas pris en compte (les composants à agrandir sont répartis de manière uniforme).
Dans l'exemple de la figure 8.16, la poignée de la glissière est connectée à un dispositif de comportement Surlignage déclenché lorsque celle-ci est sélectionnée. Les deux autres objets graphiques sont connectés à des dispositifs de collage, actifs lorsque les objets ne sont pas sélectionnés.
|
Dessin et gomme
Les outils internes de dessin et de gomme implémentent une action de dessin ou
d'effacement. Ils peuvent être utilisés avec les calques de dessin que nous avons présentés
précédemment, ainsi qu'avec tout autre objet graphique prévu pour (en implémentant l'interface Java
correspondante). Ainsi, comme le montre la figure 8.5, il est très simple de
réaliser des interfaces de dessin, que ce soit sur l'espace de travail ou à l'intérieur de
composants graphique. De plus, cette approche permet de contrôler plusieurs outils simultanément, à
l'aide de dispositifs différents dans le même objet graphique ou non (pointeurs multiples). Cela
promets des possibilités intéressantes pour des interfaces collaboratives, par exemple.
Outil interne générique
L'outil interne générique présente la particularité de ne pas réaliser d'action spécifique sur le
composant graphique auquel il a été ajouté (si l'on exclus évidemment son retour graphique). Il
dispose en effet de trois slots de sortie supplémentaires (inside.use, inside.x et
inside.y) qui propagent les valeurs reçues en entrée uniquement lorsque celles-ci sont dans
les limites du composant graphique associé. Lors de la présentation des outils internes du chapitre
précédent, nous avions évoqué un outil interne nommé gesture InnerTool. Cet outil est en fait
une composition de dispositifs comme illustré dans la figure 8.17.
|
Un outil interne générique est associé à un composant graphique nommé square. Les slots de sortie «inside» de cet outil interne sont connectés aux slots d'entrée d'un dispositif de reconnaissance de gestes. En mode global, lorsque les valeurs reçues en entrée de l'outil interne générique sont dans les limites du composant graphique, le dispositif de reconnaissance de gestes est activé. Sinon, les valeurs sont transmises par les slots de sortie «outside», comme pour tout outil interne en mode global8.6. C'est la technique que nous avons utilisée pour réaliser la zone de reconnaissance de gestes de SVALABARD.
Cet outil interne dit générique permet donc de restreindre une technique d'interaction, ou tout autre dispositif positionnel d'action, à l'intérieur des bornes d'un objet graphique. Il peut être vu comme un filtre de coordonnées, bien que proposant plus de fonctionnalités telles que le retour graphique paramétrable (curseur de l'outil interne), ou les différents modes de fonctionnement (local ou global).
stuf