Sous-sections
8.4.1 Extension de la boîte à outils
L'architecture modulaire des graphes combinés employée dans MAGGLITE favorise son extension. Du
point de vue graphique, ajouter un nouvel objet consiste en la réalisation d'un nouveau type de
nœud de graphe de scène. Du point de vue de l'interaction, il suffit de développer un dispositif
approprié. Dans les deux cas, la dérivation de classes abstraites où l'extension des classes de base
de la boîte à outils facilite cette démarche.
La création de nouveaux objets graphiques peut se faire à partir des classes abstraites
MaggLite et MaggLiteContainer, ou par extension des objets existants, en particulier
les calques.
Dans le premier cas (à partir des abstractions), la nouvelle classe d'objets va devoir réaliser
plusieurs méthodes abstraites, en particulier les méthodes concernant son affichage. Le développeur
va aussi pouvoir utiliser le principe de la génération automatique de slots sur le manipulateur de
l'objet (voir l'annexe C, section C.3).
L'utilisation des calques permet d'étendre les capacités des objets graphiques existant de la boîte
à outils, sans pour autant avoir à en développer de nouveaux à partir de rien. En effet, l'ajout
d'un calque dans un objet va permettre de lui ajouter des capacités graphiques, mais aussi d'autres
techniques d'interaction. Cela facilite l'évolution des objets et leur combinaison, tout en évitant
la prolifération de classes dans la librairie. Par exemple, nous avons vu qu'il y avait plusieurs
classes de composants graphiques de base (composants, composants transparents, composants image,
etc...). La création d'un calque de dessin permet de le composer avec ces différentes classes de
composants afin de créer des composants de dessin, des composants transparents de dessin, des composants
image de dessin.
Enfin, la déclaration des capacités des objets graphiques pour leur compatibilité avec les
interactions génériques de MAGGLITE se fait par l'utilisation d'interfaces: MaggLiteMoveable
pour les objets que l'on peut déplacer, MaggLiteDrawable pour les objets sur lesquels il est
possible de dessiner, etc. Il suffit alors de réaliser les interfaces correspondantes aux
fonctionnalités désirées, ou d'en créer de nouvelles pour étendre les capacités et interactions
associées.
De la même manière, l'ajout de nouvelles interactions se fait par l'utilisation des abstractions
adaptées (dispositif d'interaction, comportement ou outil interne). Dans chacun des cas, la méthode
est relativement proche: spécifier les classes d'objets graphiques auxquels peut s'appliquer
l'interaction et implémenter une ou plusieurs méthodes correspondants à l'action à réaliser. Pour
les dispositifs d'interactions, ces méthodes correspondent aux action à effectuer lorsque l'objet
est sélectionné, lorsqu'une action est réalisée alors qu'il est sélectionné, etc. Dans le cas des
comportements, il suffit de spécifier les actions à effectuer sur l'objet graphique à l'activation
et à la désactivation du comportement. Enfin, pour les outils internes, les méthodes à réaliser
correspondent aux différentes actions de l'outil sur l'objet graphique (activation, désactivation,
mouvement ou action).
Nous proposons en annexe D des exemples concrets de la réalisation d'objets
graphiques et de dispositifs d'interaction, de comportement et d'outils internes.
8.4.2 Une plateforme de prototypage: MAGGLITE Interface Builder
Figure 8.18:
Construction d'interfaces avec MAGGLITE Interface Builder. (a) Dessin de l'interface. (b)
Configuration des interaction. (c) Utilisation de l'application.
|
Mais nous proposons aussi avec MAGGLITE une méthode interactive, directe et simple pour prototyper
des interfaces post-WIMP. Nous avons utilisé les possibilité de la boîte à outils pour développer un
système basé sur le dessin et d'autres interactions avancées. Concevoir une interface suit un alors
processus en trois étapes:
- Dessiner l'interface: en utilisant le constructeur d'interfaces basé sur le dessin et
les gestes (MIB pour MaggLite Interface Builder), un concepteur d'interfaces dessine les
composants directement sur l'espace de travail. Ces objets sont immédiatement utilisables et
manipulables après leur création. C'est la construction des graphes de scène.
- Connecter les interactions: avec ICON, les interactions sont décrites graphiquement
avec à disposition toute la palette de dispositifs d'entrée potentiels et d'interaction avancées
proposés. Des maquettes très évoluées peuvent être construites sans écrire une seule ligne de
code. C'est la construction des graphes d'interaction.
- Utiliser l'interface: l'interface est entièrement fonctionnelle pendant la création;
elle peut être testée, raffinée et enregistrée. Une application MAGGLITE générique peut alors
être utilisée pour recharger le couple {Graphe de scène, Graphe d'interaction} qui vient
d'être créé. Le graphe d'interaction peut aussi être réutilisé indépendamment comme base
d'interaction pour d'autres applications.
Pour illustrer cette démarche, nous proposons d'observer Geoffrey, un concepteur d'interfaces qui va
créer une interface de jeu de "puzzle" interactif avec MAGGLITE.
En tant que graphiste et concepteur d'interfaces, Geoffrey a quelques notions de base en
programmation. Il préfère toutefois les outils interactifs pour pouvoir exprimer
toute sa créativité lorsqu'il conçoit une interface. Il doit de plus fournir des applications
fonctionnelles, pas seulement des images de prototypes ou des captures d'écran. C'est une contrainte
forte de la conception d'interfaces post-WIMP et d'interactions avancées afin de pouvoir tester et
évaluer la faisabilité et l'utilisabilité de paradigmes originaux. Dans le scénario que nous
proposons, Geoffrey doit concevoir une interface pour un jeu de puzzle simple et intuitif. Nous
allons montrer comment les outils intégrés à MAGGLITE vont l'aider dans sa tâche.
Pour concevoir la partie graphique de son interface de puzzle, Geoffrey va utiliser les
outils de dessin de MAGGLITE Interface Builder
(MIB). Ce
constructeur d'interfaces pour MAGGLITE a la particularité d'avoir été conçu avec MAGGLITE. Ainsi,
nous avons pu utiliser la vaste palette d'interactions et de techniques avancées de la boîte à outils.
Les différents outils sont sélectionnés à l'aide d'une barre d'outils transparente
(toolglass [Bier et al.1993]). Chaque fois que Geoffrey dessine un trait à partir d'une zone de la
toolglass, un objet du type correspondant est créé ou une commande est appliquée à l'objet graphique
situé en dessous.
- Dessin à main levée: Geoffrey dessine chaque pièce du puzzle en commençant ses traits
dans la zone «Composant» de la toolglass (voir figure 8.19). Cet outil est
utilisé pour dessiner des composants graphiques de forme libre, ce qui est bien adapté à notre
exemple de puzzle.
Figure 8.19:
Dessin d'un composant avec MIB.
|
- Changement de couleur: Geoffrey peut changer la couleur des pièces du puzzle en plaçant
la dernière zone de la toolglass au dessus de l'objet et en cliquant dessus avec son outil de
dessin (voir figure 8.20). Les attributs de cet outil de changement de couleur
(couleur d'avant plan et d'arrière plan de l'objet) peuvent évidemment être changés
interactivement.
Figure 8.20:
Changement de couleur d'un
composant avec MIB.
|
- Reconnaissance de gestes: après avoir dessiné les pièces du puzzle, Geoffrey ajoute un
bouton pour déclencher une action de mélange automatique des pièces sur la zone du jeu. En
réalisant le geste correspondant, il créé un bouton rectangulaire (voir figure
8.21). Lorsqu'un geste est reconnu, il est interprété et l'objet correspondant est
créé ou une action est exécutée (suppression ou déplacement d'un objet, sauvegarde, ouverture du
configurateur d'interactions, etc.). Si les gestes ne sont pas reconnus, les traits dessinés sont
considérés comme des annotations (voir figure 8.21, vignette (c)). Finalement,
Geoffrey souhaite concevoir un bouton moins austère qu'un simple bouton rectangulaire. Il dessine
alors un bouton de forme plus extravagante (voir figure 8.18, vignette (a)) en
utilisant l'outil de dessin à main levée avant d'effacer le précédent avec un geste.
Figure 8.21:
Création de composants par interaction
gestuelle. (a) Début d'un nouveau geste. (b) Le geste est reconnu, le composant correspondant
est créé. (c) Le geste n'est pas reconnu, les traits sont gardés comme annotations.
|
Ces pièces de puzzle sont une application concrète des possibilités qu'offre MAGGLITE pour
la création d'objets graphiques de forme libre. De plus, étant donné que MIB a été développé
avec MAGGLITE, il peut tirer partie des techniques avancées disponibles: la toolglass, le dessin à
main levé et la reconnaissance de gestes sont contrôlés avec une tablette graphique, rendant alors
la conception d'interfaces simple et naturelle (comme le proposait déjà SILK
[Landay et Myers1995,Landay1996]). Bien évidemment, MIB est entièrement reconfigurable pour
l'utilisation d'autres dispositifs et interactions.
8.4.2.2 Configurer et utiliser l'interface
Lorsque Geoffrey ajoute de nouveaux composants, il va pouvoir construire un graphe d'interaction,
comme nous l'avons vu dans la section 7.3. Il commence par connecter les
sorties du dispositif mouse aux entrées d'un dispositif cursor (étape (1) de la figure
8.22). Ensuite, il va connecter les dispositifs d'interaction pick et
Drag afin de pouvoir sélectionner et déplacer les pièces (étapes (1) et (2) de la figure
8.22). Au bout de quelques manipulations de pièces du puzzle, Geoffrey réalise que le
Glisser-Déposer n'est pas une technique bien adapté à son application car il ne peut effectuer que
des translations sur les pièces. Donc il reconfigure l'application et remplace le dispositif
Drag par le dispositif Paper Sheet. Il peut maintenant bouger et tourner les pièces en
un seul geste.
Figure 8.22:
Configuration de l'interaction en 3
étapes.
|
Finalement, Geoffrey doit décrire le comportement du bouton de mélange des pièces du puzzle. Il va
pour cela utiliser le dispositif manipulateur du bouton qui externalise un slot de sortie
Action dont la valeur est vrai lorsque le bouton est enfoncé. Au cours de la première
phase de la conception de l'interface, le bouton n'est connecté à aucune action. En effet, le fait
de mélanger les pièces du puzzle n'est pas une interaction commune pouvant être décrite
simplement par des dispositifs. Cela tient plutôt du noyau fonctionnel de l'application. Geoffrey
demande donc à un programmeur de son équipe de lui créer un dispositif Mix Desk pour
effectuer cette tâche. Une fois ce nouveau dispositif ajouté à la bibliothèque, Geoffrey connecte le
slot de sortie du dispositif manipulateur du bouton au slot d'entrée du dispositif Mix Desk
(voir figure 8.23) et l'action peut être effectuée. Cette fonction de mélange des
pièces est la seule partie de l'application qui a nécessité d'être programmée. Il en serait de même
pour des fonctions très avancées telles qu'une reconstruction automatique du puzzle, un calcul de
score ou une fonction d'aide à la reconstruction. Toutefois, une fois implémentées sous forme de
dispositifs, les comportements de ces fonctions (déclenchement, affichage des résultats, etc.)
seraient spécifiés graphiquement avec le configurateur. De plus, ces nouveaux dispositifs seraient
disponibles pour d'autres applications, une fois incorporés à la bibliothèque. Notons aussi que des
actions plus simples peuvent être construites graphiquement avec les dispositifs déjà existant, ou
en utilisant le dispositif de script inclus dans ICON et qui interprète du code JavaScript.
Figure 8.23:
Configuration d'un widget.
|
Une fois terminé la conception de son application, Geoffrey l'enregistre sous la forme d'un fichier
XML qui pourra être rechargée pour des éditions futures, mais aussi utilisé comme une application
dans l'environnement d'exécution de MAGGLITE. Bien que sauvegardés, les gestes et annotations de
créations ne seront alors plus visibles. Il est évidemment possible pour Geoffrey ou un autre
utilisateur de reconfigurer entièrement les interactions de l'application. Par exemple, il peut
remplacer la souris par une tablette graphique pour le déplacement des pièces, connecter une
commande vocale pour le mélange des pièces. Il est même possible de dupliquer la configuration pour
manipuler les pièces du puzzle à plusieurs utilisateurs avec des pointeurs multiples. Toutes ces
configurations peuvent être sauvegardées et proposées comme des alternatives dépendant des goûts,
capacités ou configurations matérielles.
Nous avons construit nous-mêmes cette application de puzzle en moins d'une dizaine de minutes. Nous
avons mis en scène ce scénario pour montrer comment MAGGLITE et les outils associés peuvent être
utilisés pour le prototypage rapide et interactif d'applications post-WIMP interactives. Il est
évident que cette approche montre ses limites pour le développement d'applications plus complexes,
ce que nous abordons dans la section suivante.
La conception d'interfaces avec le constructeur graphique ne permet actuellement que l'utilisation
d'objets graphiques de la librairie, qui plus est dans une démarche statique (l'application ne peut
pas elle-même créer d'objets graphiques). Il est nécessaire, pour des applications plus complexes,
d'avoir recours à la programmation en Java. Nous présentons dans la suite deux exemples de
développement d'applications: un outil de visualisation d'informations, basée sur la création
dynamique d'objets graphiques, et enfin SVALABARD, le système proposé en première partie de cette
thèse.
MAGGLITE n'est pas une boîte à outil spécialisée dans la construction d'applications de
visualisation d'informations, et ne prétend pas résoudre les problèmes qu'abordent ces outils
dédiés. Toutefois, elle permet le développement et l'exploration rapide de telles techniques. «
MaggLiteVisu» est un exemple d'application qui permet la visualisation de données multivariées
par une technique étendue de «Scatter Plots» [Chambers et al.1983]. Les données manipulées peuvent
par exemple être un ensemble de données telles que des noms de villes, leur population, superficie,
taux de criminalité, etc. Chacune des entrées de l'ensemble, chargé à partir d'un fichier XML, est
représenté par un objet graphique rectangulaire. Ses attributs sont alors assignés aux propriétés
graphiques de l'objet: sa position, sa hauteur, sa largeur, sa couleur (voir figure
8.24).
Figure 8.24:
Une application de
visualisation d'informations construite avec MAGGLITE. Un ensemble de données est affiché,
l'utilisateur peut connecter le dispositif de Fisheyes générique.
|
À partir du squelette d'application de la boîte à outil, la réalisation de cette technique de
visualisation bien connue nous a pris environ une dizaine de minutes, pour une trentaine de lignes
de code écrites (une grande majorité étant d'ailleurs dédiée à la lecture du fichier XML). C'est
relativement peu par rapport à l'implémentation nécessaire pour réaliser une telle application en
utilisant les outils de développement habituels, tout particulièrement si l'on considère
l'utilisation de techniques avancées telle que le Fisheyes.
8.4.3.2 Réalisation de SVALABARD
L'architecture de MAGGLITE et les différents composants qu'elle contient nous a beaucoup facilité la
réalisation de SVALABARD, du point de vue graphique mais surtout pour la définition de ses
interactions.
Les feuilles d'interaction
Les trois feuilles d'interaction étendent chacune différents types de calques de la boîte à
outils.
- La feuille de dessin étend simplement le gestionnaire de calques, afin de le restreindre à
la création de calques de dessin.
- La feuille augmentée est celle qui a demandé le plus d'adaptation. Elle étend le calque
standard pour permettre l'affichage et la manipulation des informations d'interprétation du dessin
(points, segments, plans et contraintes).
- La feuille 3D est tout simplement un calque 3D de MAGGLITE, sans modifications particulières.
Les autres objets graphiques, la vue miniature des calques et la zone de gestes, sont des composants
«standard» de la boîte à outils.
Configurations d'entrée
Du point de vue de l'interaction, SVALABARD repose évidemment sur les configurations d'entrées
d'ICON, associant dispositifs d'entrée et interactions. Il a suffit de connecter les interaction
clefs en main de MAGGLITE (interactions, manipulateurs, comportements et outils internes) pour
spécifier les comportements et modes d'interactions du système.
Il a par contre été indispensable d'introduire quelques dispositifs spécifiques à l'application:
- pour le traitement du dessin (les filtres présentés dans la section 4.4);
- pour la sélection interactive des segments (spécification des contraintes).
Les dispositifs d'interprétation du dessin (cadre bleu de la figure 8.25) sont des
adaptateurs. Ils forment la chaîne de transformation des données émises par les dispositifs
systèmes (périphériques d'entrée) pour leur interprétation et utilisation par le noyau
mathématique (connecté lui aussi par un dispositif).
Les dispositifs de sélection des segments (cadre rouge de la figure 8.25)
correspondent chacun à un type de propriété à saisir (parallélisme, orthogonalité ou
coplanarité). Ils reçoivent simplement une commande et sa zone d'application (provenant de
l'interaction choisie comme par exemple un geste, ou une combinaison parole/pointeur), afin de
sélectionner et transmettre au noyau mathématique les éventuels segments auxquels appliquer la
propriété.
Figure 8.25:
Filtres de
dessin. Les filtres de dessin sont réalisés sous la forme de dispositifs ICON. Ils peuvent
être connectés, déconnectés et configurés graphiquement.
|
Nous avons définis plusieurs configurations d'entrée pour utiliser SVALABARD, de la plus
complète qui spécifie les interactions décrites dans le chapitre 4, à la plus
simple basée uniquement sur l'utilisation d'une souris et d'un clavier, réduisant alors les
fonctionnalités et les interactions.
Ces configurations peuvent être utilisées telles quelles, ou modifiées par l'utilisateur à tout
moment selon ses envies ou ses besoins. Il est toutefois nécessaire de discuter la lisibilité et la
complexité de ces configuration. La complexité de SVALABARD implique des configurations d'une
densité importante, comportant un grand nombre de dispositifs et de connexions (voir figure
8.26). Nous avons, dans un premier temps, appliqué les recommandations de structuration
spatiales et les possibilités avancées du configurateur graphique d'ICON pour améliorer la
lisibilité des configurations que nous proposons (utilisation de liens pour éviter le
croisement des connexions, renommage et dimensionnement des dispositifs, etc).
Figure 8.26:
Configurations d'entrée de
SVALABARD. Ces deux configurations représentent le même graphe d'interaction (une partie de
la configuration globale de SVALABARD), seule leur représentation change. Dans la figure (b),
l'utilisation des liens et des sous-configurations permettent une meilleure lisibilité
(regroupement par fonctionnalités), ainsi que plusieurs niveaux de configurabilité du
système.
|
Mais nous avons aussi utilisé le principe d'encapsulation de sous-configurations pour définir
plusieurs niveaux de configurabilité du système. ICON permet de créer des configuration-filles qui
seront chargées par un dispositif composite dans une configuration globale. La lisibilité est
alors améliorée (voir figure 8.26(b)). Mais cette approche permet en plus une
décomposition logique des fonctionnalités et des interactions du système, offrant alors plusieurs
niveaux de configurabilité. Pour SVALABARD, nous avons définis plusieurs sous configurations,
indépendantes des entrées: définition des marking menus, adaptation des dispositifs, comportements
des feuilles, etc. Ces sous-configurations représentent le noyau de l'application. L'utilisateur
novice se contentera de changer les dispositifs d'entrée connectés à ces modules. L'utilisateur
expert pourra modifier ces sous-configurations pour redéfinir plus profondément les comportements du
système.
stuf
2005-09-06