exemple d'interface en SVG (illustration extraite de [2])
projet de spécialité image ENSIMAG proposé par Renaud Blanch.
mise à jour : 11 mars 2015.
Interaction Homme-machine, Informatique graphique.
Le format graphique vectoriel SVG permet définir des éléments graphiques riches, indépendamment de leur taille en pixels. Cela en fait un format graphique idéal pour faire spécifier le rendu d'éléments d'interface utilisateur graphique par des designers à l'aide d'outils comme Adobe Illustrator ou son équivalent libre Inkscape.
Au delà d'une simple adaptation du look d'une application, on souhaiterait pouvoir générer les états intermédiaires d'un élément d'interface par interpolation entre des exemples clés fournis par le designer, valant pour des valeurs données de paramètres. Par exemple, un slider est défini pour la valeur nulle (v = 0 à gauche), et la valeur maximale (v = 100 au centre). À partir de ces exemples, on souhaite générer l'état graphique du slider pour toute valeur intermédiaire (e.g., pour v = 50 à droite) :
× .5 +
× .5 =
Pour pouvoir réaliser cette interpolation dans le cas général, il faut doter le graphe de scène SVG d'une structure d'espace vectoriel, c'est-à-dire définir la combinaison linéaire de couleurs, de transformations affines, de formes, etc. Ce problème est partiellement résolu (e.g. pour les transformation affines [1], pour les formes [3]) ou facile à résoudre (pour les couleurs unies) ; et il pourra être réduit à un sous-ensemble de SVG si le problème général s'avère trop compliqué.
Si l'interpolation permet de passer de l'espace des paramètres à la représentation graphique, il est nécessaire de pouvoir faire le chemin inverse pour permettre l'interaction : si l'utilisateur positionne le slider au milieu, on veut pouvoir remonter de cette manipulation graphique à l'espace des paramètres et retrouver v = 50. Pour cela on utilisera des méthodes de cinématique inverse qui sont connues en robotique ou en animation (e.g., on spécifie le déplacement de l'extrémité du bras d'un robot ou d'un personnage et le système doit calculer les paramètres des différentes articulations du bras pour y parvenir). Le fait de travailler en 2D et sur un petit nombre de paramètres simplifie le problème général.
Les objectifs suivants sont modulables en fonction de l'intérêt des étudiants :
Une implémentation de SVG permettant d'expérimenter est fournie : elle est réalisée en Python et le rendu se base sur la bibliothèque graphique OpenGL, d'où les requis suivants :