8.4 Extension, prototypage et développement d'applications

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.

8.4.1.1 Objets graphiques

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.

8.4.1.2 Interactions

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:

1. 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.
2. 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.
3. 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.

8.4.2.1 Dessiner l'interface

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.

1. 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.

   

2. 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.

   

3. 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.

8.4.2.3 Utiliser, améliorer et distribuer l'application

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.

8.4.3 Une plateforme de développement

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.

8.4.3.1 Application à la visualisation d'informations

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:

1. pour le traitement du dessin (les filtres présentés dans la section 4.4);
2. 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.