Ihm 09

interfaces homme-machine
eric lecolinet
telecom-paristech
www.enst.fr/~elc
INTERACTION HOMME-MACHINE
! IHM (HCI)
- Conception
- Implémentation
interfaces homme-machine - Evaluation
partie 1 • de systèmes interactifs
• destinés à des humains
eric lecolinet
get / enst THE PEBKAC PROBLEM...
www.enst.fr/~elc
Page 2 IHM > Introduction - Eric Lecolinet - ENST Paris
IHM Conséquences
THE PEBKAC PROBLEM
! Conception, implémentation, évaluation Problem
! Pluridisciplinarité
– de systèmes interactifs Exists – Ingénierie
Between
– destinés à des humains • informatique, génie logiciel, électronique ...
Keyboard
And
– Facteurs humains
Chair
• ergonomie, psychologie cognitive, sociologie ...
– Design
• design industriel, arts graphiques, typographie
! Processus de développement adapté

– méthodes de conception / réalisation / évaluation appropriées
Page 3 IHM > Introduction - Eric Lecolinet - ENST Paris Page 4 IHM > Introduction - Eric Lecolinet - ENST Paris
Enjeux (1) Le cas du Mont Saint Odile
! 1. Les IHMs sont omniprésentes et incontournables Paris 17 janvier 2005 AFP

– Elément de productivité essentiel :
– De nouvelles charges ont été retenues lundi contre un ancien directeur
• coût d’apprentissage technique d'Airbus Industries après un rapport faisant état d'un
dysfonctionnement de l'A-320 dans l'instruction de la catastrophe du
• facilité / rapidité d’exécution
Mont Sainte-Odile.
• exploitation des fonctionnalités avancées
– Bernard Ziegler, 72 ans, avait été mis en examen en janvier 1997 pour
• fatigue, risques d’erreur
"homicide et blessures involontaires" en relation avec "l'ergonomie du
• évolutions futures, maintenance ... mode de descente de l'appareil".
– Selon Me Muriel Brouquet-Canale ces charges sont désormais également

liées au disfonctionnement du DME (Distance measuring equipment) de
l'avion qui s'est écrasé le 20 janvier 1992, faisant 87 morts et laissant 9
survivants.
Enjeux (2) Approche centrée utilisateur
! 1. Les IHMs sont omniprésentes et incontournables ! La science, la technique s’adaptent à l’utilisateur ...
– élément de productivité essentiel ... – et non l’inverse !
– informatiser au lieu d’automatiser
! 2. Le coût de développement des IHMs est très élevé
– souvent 50% (ou plus) du code / du travail total !
! ! Double objectif ! Facteurs humains

– difficiles à intégrer
– concevoir des systèmes fiables et faciles à utiliser
! méthodologies de conception
– en un temps et à un coût raisonnables ...
! optimiser le ratio performances / coût ! Concept d’utilisabilité (usability)
– facilité d’apprentissage et d’utilisation
Méthode classique « en cascade » Conception itérative
conception
analyse
analyse implémentation
conception
évaluation
implémentation
utilisateurs
tests
– réalisation rapide de prototypes ou de « mock ups »
– approche empirique (essais-erreurs): aspect chaotique de la conception...
utilisateurs
Cycle de vie « en spirale” Cycle de vie en étoile
– Dix, Hartson
Conception participative Styles d’interaction
! Utilisateurs
– experts du domaine
concerné
– prennent un rôle actif
dans la conception
! Importance des
facteurs humains ! Conversationnel
– Faire « entrer l’humain – langage de commande (e.g. Shell Unix)
dans la boucle » – dialogue imposé par système
=> utilisateurs « experts »
Styles d’interaction Styles d’interaction
! Manipulation directe
! Menus, formulaires – dialogue contrôlé par l’utilisateur
– dialogue contrôlé par le système – métaphores
– interaction limitée • « métaphore du bureau »
– contrôle a posteriori – représentation permanente
– exemple: Web 1.0
– apprentissage exploratoire
• opérations rapides, incrémentales, réversibles
– WYSIWYG : « what you see is what you get »
Nouvelles techniques d’interaction Un peu d’histoire ...
! 1945: Vannevar Bush (Memex)

– un instrument de mémoire externe
• mots clés, références, indexation, liens, annotation...
– système « hypertexte » basé sur microfilms !
Un peu d’histoire ... Un peu d’histoire ...
! 1963 : Ivan Sutherland (Sketchpad, MIT) ! 1962/64/... : Douglas Engelbart

– logiciel de dessin avec icônes – souris
– manipulation directe – écran « haute résolution »
– programmation OO – traitement de texte,
– PhD thesis ... visionnaire ! – hypertexte et hypermedia
– messagerie électronique
– visio-conférence
! Ecran « haute résolution »
– groupware ...
– oscilloscope
! Manipulation:
– stylo optique
! 1968 : Ted Nelson (Xanadu) ! Xerox PARC (Palo Alto, CA)

– reprend et étend les idées de V. Bush – centre de recherche « historique », fondé en 1970
• transclusion, « zigzag » – photocopie, bureautique...
– invente les termes hypertext et hypermédia
! Alain Kay
! Incontournable MIT... – un des fondateurs du PARC
– Architecture Machine Group, A.I. Lab, Media Lab ... – concept de Personal Computer
– Marvin Minsky, Seymour Papert, Nicholas Negroponte ... (en 1969)
– Exemples: – illustration de l’époque:
• langage Logo, multimodalité, langage naturel, une vision un peu différente...
synthèse / reconnaissance de la parole ..
! Alto Computer (PARC, mi-70’s) ! 1981: Xerox Star

– prototype de la station de travail moderne – 1er modèle commercial de station de travail
• souris – environnement graphique évolué,
• fenêtres, ascenseurs, menus ... Desktop, WYSIWYG
• édition de texte
• courrier électronique,
• réseau local ethernet
• etc.
! 1975: ALTAIR 8800

– un micro-ordinateur pour moins de $400 !
! 1981: Xerox Star ! 1983: Apple Lisa

– orienté professionnels – plus ou moins inspiré du Xerox Star
– trop cher ($15 000 !) – plutôt un ordinateur personnel
– échec commercial – trop cher, échec commercial
! 1984: Apple MacIntosh ! 1985: X Window System (MIT)

– « rien de nouveau » – pour « stations de travail »
– mais bien fait et prix raisonnable • Vax, HP, puis Sun
($ 2500)
– multi-plateformes :
– technologie “mûre”, architecture
• indépendant du matériel
ouverte
et du logiciel
– WYSIWYG, « desktop publishing »,
– en réseau :
impression laser
• architecture client / serveur
– guides de style (consistance)
Un peu d’histoire ... Modèle WIMP, métaphore du bureau
Quoi de neuf ?
! 1990: World Wide Web (CERN)
– modèle d’hypertexte
en réseau
– devient hypermédia et grand

public avec Mosaic (ancêtre
de Netspace puis Mozilla)
– article refusé à la
prestigieuse conférence
« ACM Hypertext » !
! Mac OS X (2002) versus Xerox Star (1981) ?
! Quoi de neuf ? Nouveaux besoins, évolutions futures ?
Présent / futur ? Quelques références

– Réalité virtuelle, réalité augmentée, !! Journaux"
– Visualisation de l’information (accès aux masses de données) –! ACM Interaction"
–! ACM ToCHI"
– Interfaces multimodales, perceptives, tangibles
–! Journal of Visual Languages & Computing"
– collecticiels (groupware), interaction co-localisée ...etc."
– Interaction mobile, ubiquité, interfaces « ambiantes »
– Support multi-cibles, multi-surfaces : !! Conférences"
–! Journées IHM (et références: AFIHM: www.afihm.org)"
– Nouveaux dispositifs & techniques d’interaction
–! ACM CHI, UIST, AVI ...."
• capteurs, multitouch, etc
–! AFIP INTERACT"
– Adaptatibilité et adaptativité (plasticité) –! IEEE Visualization"
• grands et petits écrans ...etc.

Conception Logicielle
! Modèle conceptuel
Architecture Logicielle des IHMs – modèle de fonctionnement du système

– idéalement : correspond au modèle mental de l’utilisateur
Eric Lecolinet
www.enst.fr/~elc
ENST / INFRES
! Exemple de feedback
Page 1 IHM > ArchiLog- Eric Lecolinet - ENST Paris Page 2 IHM > ArchiLog- Eric Lecolinet - ENST Paris
Langages de spécification UAN
! Problème
– spécifier de manière non ambiguë le comportement
– en particulier pour travail en équipe !
– génération de code éventuelle avec certains systèmes
! Langages de description de syntaxe

– UAN : User Action Notations
– PPS: Propositional Production Systems
! PPS
– Color ( Black, White, Red )
– Input ( .MouseDown, .MouseMove, .MouseUp ) // noter le point
– .MouseUp, Shift -> !DoMultipleSelect, InSelectMode
UAN Principe de séparation
! Principe de base de conception des IHMs
! Pas toujours réalisable en toute rigueur

– si manipulation directe / forte interactivité
– exemple : traitement de texte
! Partage de données entre GUI et NF

– modèle MVC, variables actives
Conception itérative / participative Modèles d’architecture logicielle

! Conception itérative
– cycle en spirale conception
! Structure générique de conception
– cycle en étoile
analyse implémentation ! Décrire

– flux de données utilisateur <--> application
– étapes de transformation des données
évaluation – identification et agencement des composants logiciels
utilisateurs
! Conception participative
– les utilisateurs prennent un rôle actif dans la conception
Modèle Langage Modèle de Seeheim
! Vue linguistique de l’interaction

– analogie : IHM <=> dialogue entre individus
! 3 composantes :
– Lexicale: vocabulaire d’entités d’entrée-sortie
• ex: primitives et objets graphiques de base, sons ...
– Syntaxique: construction des phrases

• ex: sélection et modification d’un objet (dessin, texte...)
! Inspiré du modèle langage (groupe de travail SIGGRAPH en 1985)
– Sémantique: signification des phrases
! Cadre de pensée, forme générique
• concepts et objets du domaine d’application
! Contrôleur = notion plutôt floue, centralisation du traitement
Modèle Arch Modèle multi-agents
! Vision: système interactif =

– ensemble d’agents spécialisés
– qui réagissent à / produisent
des événements
! Agent = système de traitement doté

– d’une mémoire
– d’un état
– d’un “processeur” (éventuellement simulé)
! Extension de Seeheim – de récepteurs-émetteurs d’événements
– “Pieds de l’arche” : composants imposés par réalité
– Interaction : objets d’une boîte à outils (Toolkit)
– Présentation : “abstraction” de la boîte à outils (-> boîte à outils virtuelle)
Communication par envoi de messages Caractéristiques et réalisation
! Réalisation
– langage objets, généralement « statiques » : Java, C++, C#
! Message = couple
– parfois plus « dynamiques » : Objective-C (MacOSX)
– sélecteur =
opérateur du destinataire – voire même en C (X-Window)
– données =
paramètres de cet ! Envoi de message
opérateur
– se réduit généralement à de l’appel de méthode
! Encapsulation : ! Caractéristiques
séparation entre: – organisation modulaire (souvent hiérarchique)
– spécifications externes – gestion décentralisée
(filtre ou port d’entrée) – réutilisabilité :
– implémentation interne • héritage, composition, décoration
• peu de classes, beaucoup d’instances
Widgets
! Envoi de message par appel de méthode

– Limitations ! Widget = objet graphique
• destinataire et méthode doivent être connus par avance – ou « control » ou « component »
• distribution, réseau ?
• parallélisme ? (un seul thread de gestion des événements) ! Exemples de toolkits à widgets
– Smalltalk : MVC (historique)
! Autres techniques
– Objective C : Next, MacOSX
– langages objets « dynamiques » (Objective C / Cocoa)
– mécanismes de réflexion (Java) : – Java : AWT, SWT, Swing
• capacité des objets à s’auto-décrire – C++ : Visual C++, Borland C++,
– prise en charge par le système ou le toolkit graphique Qt, ILOG Views
• ex: X-Window – C : Motif, Gtk
Modèles homogènes / hétérogènes Modèle PAC
(Joelle Coutaz, IMAG)
! Modèle multi-agents = modèle général : ! Modèle homogène multi-agents
– pas d’indication sur la manière d’organiser un système interactif
! Objets interactifs multi-facettes
! Modèles homogènes
– GUI = graphe de noeuds multi-facettes (ou multi-composantes)
– modèle PAC ! Structuration PAC
– toolkits Motif, Qt, Gtk ... – Présentation
– Contrôle
– Abstraction
! Modèles hétérogènes
– GUI = graphe de noeuds spécialisés
– modèle MVC
– toolkits Swing, Amulet, Ubit...
Modèle MVC Modèle MVC
! Trois composantes ! But de MVC

– Model : données de l'application – mieux structurer les applications
– View : représentation visuelle – représentations multi-vues:
– Controller : gestion des entrées • un modèle peut être associé à plusieurs vues
• la synchronisation est implicite
! Note
– il existe des variantes de MVC
(voir plus loin) source: enode.com
source: enode.com
MVC et Swing MVC et Swing
! En pratique ! Modèles et multi-vues

– en pratique, V est fortement lié à C ! – le Model d'un JComponent
– peut être "exporté" et partagé avec celui d'un autre JComponent
! Swing est inspiré du modèle MVC

– "Separable Model Architecture"
– View et Controller regroupés dans un ComponentUI
– Model : reste séparé
! Un JComponent encapsule ! Exemple

– JSlider et JScrollbar : même modèle : BoundedRangeModel
– un ComponentUI
– mise commun du modèle => synchronisation automatique
– et un Model (si ça a un sens)
Exemple Pluggable Look and Feel

Dans l’API de JSlider
! "Pluggable Look and Feel"
public BoundedRangeModel getModel();
public void setModel(BoundedRangeModel); – le UIManager peut changer dynamiquement les ComponentUIs
Changer le modèle du JSlider

Java Metal:
JSlider slider = new JSlider();
BoundedRangeModel model = public static void main(String[ ] args) {
new DefaultBoundedRangeModel( ) { try {
public void setValue(int n) {
UIManager.setLookAndFeel(UIManager.getCrossPlatformLookAndFeelClassName());
System.out.println(“SetValue: “+ n);
super.setValue(n); } catch (Exception e) { }
} //Create and show the GUI...
});
slider.setModel(model); .....
scrollbar.setModel(model); }
On peut aussi ignorer l’existence des modèles Windows:

JSlider slider = new JSlider(); UIManager.setLookAndFeel(
int value = slider.getValue(); “com.sun.java.swing.plaf.windows.WindowsLookAndFeel”
// cohérent car dans l’API de JSlider on a: );
public int getValue() {return getModel().getValue(); }
Une autre vision de MVC Outils de spécification d’interfaces
! Grammaires
– langages de description de syntaxe (ex: UAN vu précédemment)
– production automatique de code avec certains systèmes
! Machines à états finis (FSM)

– méthode simple et efficace pour modéliser les comportements
– outils pour faciliter l'écriture du code (SwingStates, etc.)
– ex: cliquer sur un bouton
(voir détails plus loin) Release / D
Leave / B Enter / C
source: Sun
source: S. Hudson Press-inside / A Release / E
Outils de spécification d’interfaces Outils de génération d’interfaces
! Critique des FSM ! Générateurs d’interface de type "UIMS"

– représentation "plate" => rapidement gigantesque et peu compréhensible! – UIMS = User Interface Management Systems
– également appelés "model-based tools"
! Statecharts ! Objectif : génération automatique du code

– représentation hiérarchique : – de la représentation graphique
• fournir plusieurs – mais aussi de l'interaction
niveaux d'abstraction
• pouvoir cacher les détails
! En pratique
– peu d'outils disponibles sauf pour applications spécifiques
! Remarques • ex: bases de données : MS Access, Sybase PowerDesigner
source: Shneiderman & Plaisant
– supportés par UML et outils connexes – essentiellement des prototypes de labo...
– autre technique : réseaux de Pétri (pour vérification automatique)
Outils interactifs Outils interactifs
! Outils interactifs de construction d’interfaces ! Inconvénients (...)

– programmation visuelle – peu de support pour la manipulation directe
– ex: InterfaceBuilder, Application Frameworks, Qt Designer – génération de code « one way
– gestion du layout et localisation : contraintes ou WYSIWYG ?
! Avantages
– prototypage
– utilisables par des
non informaticiens
! Inconvénients
– gèrent essentiellement
la présentation statique
(....)
Autres outils "interactifs" Outils de programmation
! Mockups d'interfaces ! Langages spécialisés

– prototypes non opérationnels – prototypes, petits outils, pour le Web, etc...
• interfaces papier, post-its – Tcl/Tk
• outils de présentation ou d'animation – Flash
• ex: Powerpoint, Flash, Director... – HTML/JavaScript
source: C.Faure – XML/UIMS
– etc.
! Boîtes à outils (toolkits) graphiques

– grande flexibilité
– mais difficulté d’apprentissage !
• réservés aux professionnels
source: projets IAD
source: P.Baudisch
Programmation événementielle
Programmation Evénementielle ! Programmation classique : l’application a le contrôle
& Interfaces Graphiques
Eric Lecolinet
www.enst.fr/~elc
ENST / INFRES
– l’utilisateur fait ce que lui demande l’application
Page 1 Programmation événementielle et interfaces graphiques - Eric Lecolinet - ENST Paris Page 2 Programmation événementielle et interfaces graphiques - Eric Lecolinet - ENST Paris
Programmation événementielle Programmation événementielle

! Interfaces graphiques : l’utilisateur a le contrôle ! Conséquences
– application toujours prête à réagir
– programmation événementielle
– on peut à tout moment
sélectionner, cliquer,
changer de fenêtre ...
– application “esclave”
de l’utilisateur
– dialogue multi-fils,
programmation
non modale
! Evénement (ou « message »)
– envoyé à l’application ciblée
– à chaque action élémentaire de l’utilisateur
Exemples d’événements Types d’événements
Quelques événements X11 : ! Un événement

– ButtonPress, ButtonRelease – est un objet envoyé à l’application
– appuyer / relâcher un bouton de la souris – contient des infos dépendant du type d’événement
– KeyPress, KeyRelease • par exemple, la position (x, y) de la souris
– appuyer / relâcher une touche du clavier
– MotionNotify
– bouger la souris (avec un bouton enfoncé)
– EnterNotify, LeaveNotify
– la souris entre dans / sort d’une fenêtre
! Technique très générale
– Expose
– pas limitée aux interfaces graphiques
– rafraîchir la fenêtre (la fenêtre redevient visible)
– pour la communication entre objets, entre applications
– ResizeRequest
– la fenêtre a changé de taille • éventuellement via un réseau
– MapNotify, UnmapNotify – autres exemples
– la fenêtre apparaît / disparaît de l'écran • Java Beans
• Signaux Unix ….
Dialogue multi-fils (multi-threads) Gestion des événements

! Principe général
– Etape 1 : créer les principaux objets graphiques
– Etape 2 : lancer la boucle de gestion des événements
! L’application se met en attente des événements

– n’appelle aucune fonction de son propre chef (cas simple)
– elle devient “esclave” de l’utilisateur
! Niveau Desktop :
– chaque application = processus / thread indépendant
! Niveau Application :
– dispatching par boucle de gestion des événements
Boucle de gestion des événements Protocole non embarqué
! Boucle infinie qui ! Principe
– récupère les événements – le programmeur écrit cette boucle!
– appelle les fonctions du programme – (au moins en partie...)
while (True) {
event = GetNextEvent()
switch(event->type) {
case EVENT_E1 sur window_W1: // pseudo-code
foo_E1_W1();
break;
case EVENT_E2 sur window-W2:
! Deux stratégies foo_E2_W2();
– protocole non embarqué (technique de base) break;
– protocole embarqué (tous les toolkits récents) ......
Protocole non embarqué Protocole non embarqué
! En réalité c’est bien plus complexe !

– prendre en compte :
! Conséquences
• tous les objets graphiques – complexité, risques d’erreurs
• tous les événements utiles
• et toutes leurs combinaisons temporelles ! De plus:
! Exemple : cliquer sur un bouton ! Modularité, maintenance

– bouton, menu item, liste, etc. – éviter dépendance entre objets graphiques
– plusieurs centaines de ligne de code ! Release / D

! Ergonomie, utilisabilité
– le comportement doit être homogène pour toutes les applications
Leave / B Enter / C
Press-inside / A Release / E
Protocole embarqué Protocole embarqué
! Principe ! Utilisation
– boucle de gestion des événements prédéfinie – implémenter les listeners ou les callbacks
– contrôle du dialogue embarqué dans les objets graphiques – les associer aux widgets
– appelés automatiquement quand la condition se produit
! Détection des événements
– via des fonctions de callback
– ou des listeners
Exemple: Motif en langage C Pièges et limitations

void MaFonction(Widget w, XtPointer cld, XtPointer cad) // une fonction de callback
.…..
}
int main() {
Widget boite, bouton;
……
bouton = XmCreatePushButton(boite, ”bouton”, NULL, 0); // créer un bouton
XtManageChild(bouton); // le rendre visible
! 1. Optimisation de l’affichage
// y associer un callback (appelé quand on « active » le bouton)
XtAddCallback(bouton, XmNactivateCallback, MaFonction, NULL);
– souvent réalisé au retour dans la boucle (pour minimiser les réaffichages)
……
! 2. Traitement séquentiel des événements
XtAppMainLoop(app); // lancer la boucle de gestion des événements
– dialogue multi-fils simulé par la boucle de gestion des événements
// rien n’est exécuté après cette ligne ! – conséquence ?
Pièges et limitations Pièges et limitations
! Traitement séquentiel des événements ! Solution

=> l’interface perd la main tant que le callback s’exécute – la fonction de callback lance un processus ou un thread
– « vrai » dialogue multi-fils / multi-threads (au niveau système)
! Conséquence
– blocage, plus de rafraîchissement ! Attention !
– si fonctions de callback longues ou « infinies » – synchronisation toujours délicate !
• attention aux communications réseau (sockets, etc.) ! – toolkits graphiques pas toujours multi-threads !
– solution ?
Communication du NF vers la GUI Communication du NF vers la GUI

! Partage de données
! Evénements non graphiques
– variables actives
– arrivée d’une donnée sur un pipe, une socket
– zones tampon partagées (clipboard)
– traitée comme un événement graphique
– Cut and Paste, Drag And Drop
– exemples: Qt, X-Window/Motif
– également pour synchronisation de programmes
! Cas clinique: Time Outs

– mise à jour à intervalle de temps régulier
– également pour les animations
! Evénements ad-hoc
– le NF envoie des événements « clients » à la GUI
– exemple: ClientMessage de X-Window
« Widgets » et « Controls » POO (Programmation Orientée Objet)
! Toolkits graphiques
! Objet graphique interactif
– cas d!école de la POO
– néologisme : widget = window object / window gadget
– historiquement : langage Smalltalk
! Objet informatique réactif

– données = état et aspect visuel ! Encapsulation
– méthodes = comportement – indépendance / implémentation, portabilité
! Réutilisation
– nombreux objets semblables : enrichissement progressif par héritage
! Modularité
– surtout si Protocole Embarqué
Arbre d’héritage Arbre d’instanciation

! Hiérarchie de classes (= de types) ! Hiérarchie d’instances (= d’objets )
– chaque sous-classe hérite des variables et méthodes de sa superclasse – arbre de filiation des objets
– du plus général au plus particulier
– héritage simple (Java) ou multiple (C++)
Exemple: Toolkit Motif

! Attention !
– le manuel suit cette hiérarchie
– en particulier celui du Java SDK !
Arbre d’instanciation Conclusions sur les Toolkits
! Chaque objet « contient » ses enfants ! Avantages
• clipping : enfants (graphiquement) inclus dans parents – Portabilité informatique (matérielle, logicielle)
• superposition : enfants au dessus des parents – Souplesse d’utilisation
– Extensibilité, flexibilité
– Intégration de critères ergonomiques
! Inconvénients
– apprentissage
– effort de développement important
– pas d’indication sur l’architecture logicielle
– seul développeur = programmeur
X-Window (X11) X11: modèle client-serveur
! Système de multi-fenêtrage ! Serveur X = intermédiaire entre

– les clients (applications graphiques)
! Indépendant du matériel et de l!OS – les ressources de la machine locale : clavier, souris, écrans ...
– Unix, Linux, MacOSX, SunOS, ...
– Compatibilité MS-Windows (via Cygwin, Interix...)
! Conçu pour fonctionner en réseau en milieu hétérogène
! Fonctionnement réseau
– {afficher sur / contrôler depuis} une machine locale
– une application qui s'exécute sur une machine distante
– XProtocol : protocole inter-clients normalisé
Protocole X Window Manager
! Gestionnaire de fenêtres
– client X11 (ne fait pas partie du serveur X)
! Fonctionnalités
– décoration des fenêtres
– déplacements
– retaillage
– iconification
! Serveur X = boucle infinie :
– menus
– détecte les actions graphiques (clic souris, touche clavier ...)
– ....
– envoie les événénement correspondants aux clients
! Client X = boucle infinie :

– récupère les événénements
– appelle les fonctions de cette application
Window Manager Toolkits graphiques X11

! Quelques WM usuels sous X11 ! Motif
– mwm : Motif – langage C, «"historique"»
– dtwm : CDE – variantes: CDE, MooTiff, LessTiff
– fvwm, fvmm2, fvwm95-2 : WM virtuel (plusieurs écrans virtuels) ! Qt (TrollTech)
– kwm : KDE (environnement Linux)
– C++, multi-plateforme (Linux/Unix, Windows, MacOSX)
– ...
– base de l'environnement KDE
– assez proche de Java/Swing, un bon compromis
! Configuration ! Gtk
– dans le «"home directory"»
– langage C, divers bindings
– Window Manager: .mwmrc / .fvwmrc ... (noter le .)
– base de l'environnement GNOME
– Session X11: .Xdefaults
– le concurrent (complètement libre) de Qt
! Ubit
– C++, développé à l’ENST, fonctionnalités avancées
! Etc......
Implementing rubber banding What’s wrong with this code?
Scott Hudson - CMU
Accept the press for endpoint p1;
Accept the press for endpoint p1; P2 = P1;
P2 = P1; Draw line P1-P2;
Draw line P1-P2; Repeat
Repeat Erase line P1-P2;
Erase line P1-P2; P2 = current_position();
P2 = current_position(); Draw line P1-P2;
Draw line P1-P2; Until release event;
Until release event; Act on line input;
Act on line input;
1 2
Not event driven Finite state machine controllers

!! Not in the basic event / redraw cycle form
!! One good way to maintain “state” is to use a state machine
–! don’t want to mix event and sampled
–! (deterministic) finite state machine
–! in many systems, can’t ignore events for arbitrary lengths of time
"! FSM
!! How do we do this in a normal event / redraw loop?
3 4
FSM notation FSM notation
!! Circles represent states !! Transitions represented as arcs
–! arrow for start state –! Labeled with a “symbol”
–! double circles for “final states” "! for us an event (can vary)
–! Also optionally labeled with an action
"! notion of final state is a little off for user interfaces (don’t ever
end) Mouse_Down / Draw_Line()
"! but still use this for completed actions
"! generally reset to the start state
A B
5 6
FSM Notation Rubber banding again

(cutting up the code)
Mouse_Dn / Draw_Line()
Accept the press for endpoint p1;
A: P2 = P1;
A B Draw line P1-P2;
Repeat
!! Means:
B: Erase line P1-P2;
–! when you are in state A and you see a mouse down, P2 = current_position();
–! do the action (call Draw_Line), and go to state B Draw line P1-P2;
Until release event;
!! Sometimes also put actions on states
–! same as action on all incoming transitions
C: Act on line input;
7 8
FSM control for Second example: button
rubber banding Move / B
Press inside => highlight

Press / A Release / C
Move in/out => change highlight
Release inside => act
A: P2 = P1; Release outside => do nothing
Draw line P1-P2;
B: Erase line P1-P2;
P2 = current_position();
Draw line P1-P2;
C: Act on line input;

9 10
FSM for a button In general...

Release / E
!! Machine states represent context of interaction
–! “where you are” in control flow
Enter / C Leave / B
!! Transitions indicate how to respond to various events

Press-inside / A Release / D
–! what to do in each context
A: highlight button !! What constitutes an “event” varies

B: unhighlight button –! may be just low level events, or
C: highlight button –! higher level (synthesized) events
D: do button action "! e.g. region-enter, press-inside
E: do nothing
11 12
Guards on transitions FSM are a good way
to do control flow in event driven systems
!! Sometimes also use “guards”
–! predicate (bool expr) before event !! Can do (formal or informal) analysis
–! adds extra conditions required to fire –! are all possible inputs (e.g. errors) handled from each state
–! typical notation: pred: event / action –! what are next legal inputs
"! can use to enable / disable
"! e.g. button.enabled: press-inside / A
!! Can be automated based on higher level specification
–! Note:
FSM augmented with guards is Turing complete
13 14
Implementing FSMs Implementing FSMs

fsm_transition(state, evt)
state = start_state;
switch (state)
for ( ; ; ) {
case 0: // case for each state
raw_evt = wait_for_event();
evt = transform_event(raw_evt);
state = fsm_transition(state, evt);
}
Note that this is basically the normal event loop case 1:
return state;
15 16
Implementing FSMs Move / B
Table driven implementation
fsm_transition(state, evt) Press / A Release / C
!! Very stylized code
switch (state)
case 1: 0 1 2 !! Can be replaced with fixed code + table that represents FSM
switch (evt.kind) –! only have to write the fixed code once
case MouseMove: // trans event –! can have a tool that generates table from something else
action_B(); // trans action

state = 1; // trans target !! Table consists of array of states
case MouseRelease: –! Each state has list of transitions
action_C() –! Each transition has
state = 2; "! event match method
case 0:
"! list of actions (or action method)
switch (evt.kind) etc…
"! target state
return state;
17 18
Table driven implementation

fsm_transition(state, evt)
for each transition TR in table[state]
if TR.match(evt)
TR.action();
state = TR.to_state();
break;
return state
!! Simpler: now just fill in table
19
Toolkits Graphiques 2D Principaux toolkits 2D
Eric Lecolinet Multi-plateformes

Java AWT / Swing
Ecole Nationale Supérieure des Télécommunications
Gtk (-> GIMP, GNOME)
(ENST/INFRES)
Qt (-> KDE)
http://www.infres.enst.fr/~elc -> IHM et Visualisation Tcl/Tk
[premier transparent] ILOG Views
[transparents sur un seul fichier]
X Windows
[index]
Athena
Motif / LessTiff
Principaux toolkits (suite) Principaux toolkits (suite)
MS Windows Divers / Recherche

Visual Basic / Visual C++ (MFC) historiques: MVC / XForms / Suit / Serpent / Interviews / Fresco
Borland: Turbo C++ contraintes: Garnet / Amulet / SubArtic
groupware: Groupkit...
MacIntosh
interfaces zoomables: Pad++ / Jazz / Piccolo
MacOS 9 : MacApp
interfaces avancés: SubArtic / CPN2000 / Ubit (enst)
MacOS X :
Quartz (moteur graphique basé sur OpenGL) Et bien d'autres:
Aqua (look and feel) http://www.geocities.com/SiliconValley/Vista/7184/guitool.html
Cocoa (widgets : en Objective C, héritage de NextStep)
Xt / Motif Gtk (GIMP Toolkit)
Caractéristiques
multi-plateformes (X-Window à la base)
écrit en C
base de l'environnement GNOME (projet GNU)
URLs
http://www.gtk.org/
http://www.gnome.org/
Voir: http://www.infres.enst.fr/~elc/vihm/doc/Motif.pdf
Gtk (suite) Gtk : callbacks et "signaux"

Quand un événement se produit :
Avantages / inconvénients
un "signal" est émis par le widget concerné
principal défaut: orienté objet "simulé" en C
On attache des "signal handlers" aux widgets pour :
principal intérêt: open source sans restriction
appeler une fonction de callback
nombreux "bindings: (ADA, C++, Perl, Python, Eiffel, etc.)
gint gtk_signal_connect( GtkObject *object,
gchar *name,
Remarques GtkSignalFunc func,
gpointer func_data);
à l'origine: toolkit graphique du logiciel GIMP
générateur d'interfaces GLADE void callback_func( GtkWidget *widget,
gpointer callback_data );
Proche de X-Window / Motif

Gtk : widgets Gtk : example
Principe Hello World en Gtk

Widgets écrits en langage C #include <gtk/gtk.h>
Modèle "orienté-objet" :
batterie de macros pour rendre le code C "pseudo-objet" void hello( GtkWidget *widget, gpointer data ) {
g_print("Hello World\n");
techniques ad hoc pour créer de nouvelles sous-classes }
Mécanisme de "casting" gint delete_event( GtkWidget *widget,

GdkEvent *event,
GTK_WIDGET(widget) gpointer data ) {
GTK_OBJECT(object) g_print ("delete event occurred\n");
GTK_SIGNAL_FUNC(function)
GTK_CONTAINER(container) /* Change TRUE to FALSE and the main window will be
GTK_WINDOW(window) * destroyed with a "delete_event"
GTK_BOX(box) */
return(TRUE)
}
void destroy( GtkWidget *widget, gpointer data ) {

gtk_main_quit();
}
gtk_signal_connect(GTK_OBJECT (button), "clicked",

Gtk : example (suite) GTK_SIGNAL_FUNC (hello), NULL);
/* This will cause the window to be destroyed by calling

* gtk_widget_destroy(window) when "clicked"
int main( int argc, char *argv[] ) { */
GtkWidget *window, *button; gtk_signal_connect_object(GTK_OBJECT (button), "clicked",
GTK_SIGNAL_FUNC (gtk_widget_destroy),
gtk_init(&argc, &argv); GTK_OBJECT (window));
window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
/* This packs the button into the window (a gtk container) */
/* When the window is given the "delete_event" signal, we ask gtk_container_add(GTK_CONTAINER (window), button);
* it to call the delete_event () function
*/ /* The final step is to display the newly created widget & window */
gtk_signal_connect(GTK_OBJECT(window), "delete_event", gtk_widget_show(button);
GTK_SIGNAL_FUNC(delete_event), NULL); gtk_widget_show(window);
/* Here we connect the "destroy" event to a signal handler. /* All GTK applications must have a gtk_main(). Control ends here
* This event occurs when we call gtk_widget_destroy() on the window, * and waits for an event to occur
* or if we return FALSE in the "delete_event" callback */
*/ gtk_main();
gtk_signal_connect(GTK_OBJECT(window), "destroy", return(0);
GTK_SIGNAL_FUNC(destroy), NULL); }
/* Sets the border width of the window */
gtk_container_set_border_width(GTK_CONTAINER (window), 10);
/* Creates a new button with the label "Hello World" */

button = gtk_button_new_with_label "Hello World");
/* When the button receives the "clicked" signal, it will call the
* function hello() passing it NULL as its argument
*/
Qt (Troll Tech) Ilog Views
Caractéristiques Caractéristiques
multi-plateformes multi-plateformes
écrit en C++ écrit en C++
base de l'environnement KDE produit commercial "haut de gamme" avec environnement de
développement
URLs nombreux composants spécialisés (graphes, cartes, etc.)
http://www.troll.no/products/qt animation et graphique structuré interactif
http://www.kde.org/ variables actives et contraintes
Avantages / inconvénients URL

relativement simple (ressemble un peu à Java AWT) http://www.ilog.com/products/views/
gratuit sous certaines conditions (produit commercial)
Introduction à Qt: voir plus loin dans ce poly...

cours, doc, pointeurs : http://www.enst.fr/~elc/qt/
Ilog Views: exemples Tcl/Tk
Caractéristiques
multi-plateformes
basé sur langage de script Tcl (ou Python)
idéal pour prototypage
produit commercial mais version gratuite
URL
http://www.tcl.tk
http://www.mapfree.com/sbf/tcl/book/select/Html/11.1.html
Tcl/Tk: exemples UIML
Caractéristiques
langage déclaratif (DTD de XML)
label .example -text "Hellow Orld"
pack .example interfaces multi-supports (PC, PDA, téléphone) => plasticité
spécifie la présentation et actions simples
apparence spécifieé par feuilles de style (même principe que HTML, etc)
rendu implémenté via des widgets Java ou autre (pages HTML...)
proc quit {} {
global Entry URL
destroy .entry .edit_button .quit_button
unset Entry http://www.uiml.org
}
entry .entry -textvariable Entry

pack .entry
button .edit_button -text Caps -command { set Entry [string toupper $Entry] }
pack .edit_button
button .quit_button -text Quit -command { quit }
pack .quit_button
Exemple UIML 1: spécification Exemple UIML 1: feuille de style

<UIML> APP.App{
<HEAD> +TOOLKIT: jfc;
<AUTHOR>Stephen Williams</AUTHOR> +RENDERING-PREFIX: java.awt;
<DATE>December 3, 1997</DATE> }
<VERSION>1.0</VERSION> GROUP.Dialog {
</HEAD> +RENDERING: Frame; /* This is an AWT frame */
+LAYOUT: BorderLayout;
<APP CLASS="App" NAME="DialogApp"> +FONT_NAME: "sanserif";
<GROUP CLASS="Dialog" NAME="PrintFinishedDialog"> +FONT_SIZE: "11";
<ELEM CLASS="DialogMessage" NAME="PrintFinishedMsg"/> SIZE: "150,105";
<ELEM CLASS="DialogButton" NAME="OKButton"/> +CONTENT: "Error: No Label";
</GROUP> +BACKGROUND:"lightgray";
</APP> }
ELEM.DialogMessage{
<DEFINE NAME="OKButton"> RENDERING: "Label";
<PROPERTIES> FONT-STYLE: "bold";
<ACTION ALIGNMENT: "Center";
VALUE="DialogApp.EXISTS=false" }
TRIGGER="Selected" ELEM.DialogButton{
/> RENDERING: "Button";
</PROPERTIES> FONT-STYLE: "Plain";
</DEFINE> ALIGNMENT: "South";
</UIML> SIZE: "80,25";
}
XUL XUL: exemple
<?xml version="1.0"?>
Caractéristiques <?xml-stylesheet href="xulnote.css" type="text/css"?>
langage de balises XML pour créer des interfaces (comme UIML) <!DOCTYPE window [
initialement conçu pour Mozilla pour créer des extensions <!ENTITY % xulnoteDTD SYSTEM "chrome://xulnote/locale/xulnote.dtd">
%xulnoteDTD;
apparence spécifiée par des feuilles de style CSS ]>
rendu implémenté par composant Gecko (moteur de rendu de Mozilla) <window

title = "&window.title;"
comportement implémenté via JavaScript id = "xulnote-main-window"
xmlns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
multiplateforme width = "640"
height = "480"
URL orient = "vertical"
persist = "screenX screenY width height sizemode">
http://www.xulplanet.com
<script type="application/x-javascript" src="xulnote.js"/>
<commandset id="maincommands">
<command id="menu-file-close:command" oncommand="closeWindow();"/>
</commandset>
<toolbox id="main-toolbox">
<menubar id="menu">
<menu id="menu-file" label="&menu-file:label;" accesskey="&menu-file:accesskey;">
<menupopup id="menu-file-popup">
<menuitem
id = "menu-file-close"
key = "menu-file-close:key"
label = "&menu-file-close:label;"
command = "menu-file-close:command"
accesskey = "&menu-file-close:accesskey;"/>
</menupopup>
</menu>
</menubar>
</toolbox>
<textbox id="document" multiline="true" flex="1"/>
</window>
Nécessite aussi (voir http://xulplanet.com/tutorials/xulapp)
xulnote.js
xcontent.rdf
xulnote.css
xulnote.dtd
Introduction à Qt 4 Liens utiles
Eric Lecolinet A l'ENST

Page Qt ENST
Doc Qt (local)
(ENST/INFRES)
Tutoriel C++
http://www.infres.enst.fr/~elc -> cours -> vihm
Site Troll Tech
[premier transparent]
Site Qt
[index]
Toolkit Qt (TrollTech) Caractéristiques et références
Toolkit graphique complet en C++ Caractéristiques, extensions, outils

Relativement simple (ressemble un peu à Swing) Internationalisation: QString et Unicode
Nombreux outils et extensions Open GL multiplateformes
Gratuit (GPL) pour usage non commercial XML: parseurs SAX et DOM
Base de l'environnement KDE Bases de données SQL
Générateur d'interfaces Qt Designer
Multi-plateformes
Unix, Windows et Mac OS X (Qt version 3) Références
Linux embarqué (avec Frame buffer virtuel) Développé par Troll Tech: http://www.trolltech.com/
Look and feel simulé et paramétrable (comme Swing) Site KDE: http://www.kde.org/
Implémenté sur couches basses des systèmes graphiques Documentation: http://www.trolltech.com/developer/documentation/
A l'ENST: http://www.infres.enst.fr/~elc/qt/doc-html/
Principaux widgets Hello Word! : première version
#include <QApplication>
Arbre d'héritage #include <QLabel>
int main(int argc, char **argv)

{
QApplication* app = new QApplication(argc, argv);
QLabel* hello = new QLabel("Hello Qt!');
hello->show();
return app->exec();
}
Remarques
attention aux -> et aux *
les pointeurs ne sont pas des références !
parent passé en argument ou 0 (NULL) pour "top-level" widgets
texte HTML simplifié (selon version de Qt)
Deuxième version 3e version avec conteneur intermédiaire

#include <QApplication> #include <QApplication>
#include <QLabel> #include <QPushButton>
#include <QWidget>
int main(int argc, char **argv) #include <QFont>
{
QApplication app(argc, argv); int main(int argc, char **argv)
{
QLabel hello("Hello Qt!"); QApplication app(argc, argv);
hello.resize(100, 30);
QWidget box; // ne pas mettre les ()
hello.show(); box.resize(200, 120);
return app.exec();
} QPushButton quitBtn("Quit", &box);
quitBtn.resize(100, 50);
quitBtn.move(50, 35);
Remarques quitBtn.setFont(QFont("Times", 18, QFont::Bold));
objets créés dans la pile -> détruits en fin de fonction ! QObject::connect(&quitBtn, SIGNAL(clicked()), &app, SLOT(quit()));
notation pointée box.show();
Qt3: il faudrait aussi: app.setMainWidget(&hello); return app.exec();
}
Signaux et Slots Philosophie
Signaux un Signal est émis vers le "monde

les objets héritant de QObject (et donc, QWidget) extérieur"
émettent des signaux quand ils recoivent des par un objet quand il change d'état
événements l'émetteur n'a pas besoin de connaitre les
récepteurs
Slots
il ne sait pas si le signal est réçu
les signaux peuvent être connectés à des slots :
le recepteur n'a pas non plus besoin de connaitre
un slot = fonction membre ("méthode") appelée l'emetteur
automatiquement
-> programmation par composants
Connexion
QApplication app(argc, argv);
....
QPushButton quitBtn("Quit", &box);
....
QObject::connect( &quitBtn, SIGNAL(clicked()), &app, SLOT(quit()) );
Propriétés Remarques
Modularité, flexibilité Remarques

le même signal peut être connecté à plusieurs slots aspect central de Qt
plusieurs signaux peuvent être connectés à un même slot diffère de l'habituel mécanisme des "callbacks" (ou Listeners)
Sécurité, typage fort Avantages / inconvénients

les types des paramètres des signaux et des slots doivent être les mêmes SLOT et SIGNAL sont des MACROS
un slot peut avoir moins de paramètres qu'un signal nécessite une phase de précompilation
QObject::connect( &quitBtn, SIGNAL(clicked()), &app, SLOT(quit()) ); plus sur (typage) et plus modulaire
Déclaration de slot Définition de slot
Dans le fichier header (.h, .hh) Dans le fichier source de l'implémentation (.cpp, .cc)
class BankAccount : public QObject { void BankAccount::setBalance(int newBalance) {
Q_OBJECT if ( newBalance != curBalance ) {
private: curBalance = newBalance;
int curBalance; emit balanceChanged(curBalance);
}
public: }
BankAccount() { curBalance = 0; }
int getBalance() const { return curBalance; } mot-clé emit pour précompilateur
public slots: provoque l'"émission"

void setBalance( int newBalance );
du signal "balanceChanged"
signals: avec la nouvelle valeur de "curBalance"
void balanceChanged( int newBalance );
}; Note: on vérifie que la valeur a effectivement changé
sous classe de QObject pour éviter boucles infinies !
mot-clés Q_OBJECT, slots et signals pour précompilateur
les signaux ne sont pas implémentés
les slots doivent être implémentés
Connexion Compilation
BankAccount x, y;
Meta Object Compiler (MOC)
connect( &x, SIGNAL(balanceChanged(int)), &y, SLOT(setBalance(int)) );
pré-processeur C++
x.setBalance( 2450 ); génère du code supplémentaire
x est mis à 2450 tables de signaux /slots
le signal balanceChanged() est émis permet aussi de récupérer le nom de la classe et de faire des test
il est reçu par le slot setBalance() de y d'héritage
y est mis à 2450 attention: ne pas oublier le mot-clé Q_OBJECT
Utilisation de qmake
dans le répertoire contenant les fichiers sources faire:
qmake -project // crée le fichier xxx.pro

qmake // crée le fichier Makefile
make // crée les fichiers moc (un par fichier
// définissant des slots),
// et les fichiers binaires (*.o et exécutable)
Widgets QMainWindow: menus et actions
Emulation du "Look and Feel"

Qt émule (i.e. n'utitilise pas) les widgets natifs Windows ou Motif
rapidité, flexibilité, extensibilité,
pas restreint à un "dénominateur commun"
même principe que Swing mais le contraire d'AWT Components
QStyle
QMenuBar* menubar = menuBar(); // menuBar() est une methode de QMainWindow
QMenu* filemenu = menubar->addMenu( tr("&File") );
QAction* action = new QAction( QIcon(":/images/new.png"), tr("&New..."), this );

action->setShortcut( tr("Ctrl+N") );
action->setStatusTip( tr("New file") );
connect( action, SIGNAL(triggered()), this, SLOT(open()) );
QApplication::setStyle( new MyCustomStyle ); filemenu->addAction( action );
QMainWindow: toolbars, etc. Boîtes de dialogue
QMessageBox, QFileDialog, QProgressDialog
QToolBar
Et aussi: QWizard, QFontDialog, etc.
QToolBar* toolbar = addToolBar( tr("File") );
toolbar->addAction(newAct);
QToolTip
Central widget
QTextEdit* text = new QTextEdit( this );
setCentralWidget( text );
Utilisation d'un dialogue modal Layout
QHBoxLayout, QVBoxLayout, QGridLayout :
QFileDialog dialog( workingDirectory, "", 0, 0, TRUE );
dialog.setFilter( "Text files (*.txt)" );
if ( dialog.exec() == QDialog::Accepted ) {
....
}
Exemple de spécification de Layout window->setLayout(top_layout);

window->show();
QVBoxLayout *v_layout = new QVBoxLayout();
v_layout->addWidget( new QPushButton("OK") );

v_layout->addWidget( new QPushButton("Cancel") );
v_layout->addStretch( 1 );
v_layout->addWidget( new QPushButton("Help") );
QListBox *country_list = new QListBox( this );

countryList->insertItem( "Canada" );
...etc...
QHBoxLayout *h_layout = new QHBoxLayout();

h_layout->addWidget( country_list );
h_layout->addLayout( v_layout );
QVBoxLayout *top_layout = new QVBoxLayout();

topLevelBox->addWidget( new QLabel("Select a country", this) );
topLevelBox->addLayout( h_layout );
Graphique 2D Exemple avec QPainter
QIcon
QPushButton *button = new QPushButton( "&Find Address", parent );

button->setIcon( QIcon(":/images/new.png")) );
Redéfinir la méthode paintEvent
QImage
void BarGraph::paintEvent( QPaintEvent * ) {
QPainter painter( this );
QPainter
draw_bar( &painter, 0, 39, Qt::DiagCrossPattern );
modèle graphique évolué (rotations, indépendance / pilote ...) draw_bar( &painter, 1, 31, Qt::BDiagPattern );
draw_bar( &painter, 2, 44, Qt::FDiagPattern );
équivalent de Graphics2D de Java draw_bar( &painter, 3, 68, Qt::SolidPattern );
exemples de méthodes :
painter.setPen( black );
painter.setPen( QPen(red, 2, DashLine) ); painter.drawLine( 0, 0, 0, height() - 1 );
painter.drawLine( 0, height() - 1, width() - 1, height() - 1 );
painter.drawRect( 25, 15, 120, 60 );
painter.setFont( QFont("Helvetica", 18) );
painter.drawText( rect(), AlignHCenter | AlignTop, "Sales" );
}
Exemple avec QPainter (suite) Graphique Structuré

Qt3 : QCanvas
graphe de scéne (graphique 2D orienté objet)
contient des QCanvasItem
peut avoir plusieurs QCanvasView
void BarGraph::paintEvent( QPaintEvent * ) {
QPainter painter( this ); Qt4 : Graphics View
draw_bar( &painter, 0, 39, Qt::DiagCrossPattern ); QGraphicsScene, QGraphicsView, QGraphicsItem...
draw_bar( &painter, 1, 31, Qt::BDiagPattern );
.....
}
void BarGraph::draw_bar( QPainter *painter,

int month, int barHeight,
BrushStyle pattern ) {
painter->setPen( blue );
painter->setBrush( QBrush(darkGreen, pattern) );
painter->drawRect( 10 + 30 * month, height() - barHeight, 20, barHeight );
}
OpenGL OpenGL 3(suite)
#include <QGLWidget> #include "box3d.h"
class Box3D : public QGLWidget { Box3D::Box3D( QWidget *parent ) : QGLWidget( parent )

Q_OBJECT {
public: object = 0;
Box3D( QWidget *parent = 0); rotX = rotY = rotZ = 0.0;
~Box3D(); }
public slots: Box3D::~Box3D()

void setRotationX( int deg ) { rotX = deg; updateGL(); } {
void setRotationY( int deg ) { rotY = deg; updateGL(); } makeCurrent();
void setRotationZ( int deg ) { rotZ = deg; updateGL(); } glDeleteLists( object, 1 );
}
protected:
virtual void initializeGL(); void Box3D::initializeGL()
virtual void paintGL(); {
virtual void resizeGL( int w, int h ); qglClearColor( darkBlue );
virtual GLuint makeObject(); object = makeObject();
glShadeModel( GL_FLAT );
private: }
GLuint object;
GLfloat rotX, rotY, rotZ; void Box3D::paintGL()
}; {
glClear( GL_COLOR_BUFFER_BIT );
glLoadIdentity();
glTranslatef( 0.0, 0.0, -10.0 );
glRotatef( rotX, 1.0, 0.0, 0.0 );
glRotatef( rotY, 0.0, 1.0, 0.0 );
glRotatef( rotZ, 0.0, 0.0, 1.0 );
}
glCallList( object ); OpenGL (suite)
void Box3D::resizeGL( int w, int h )
{ #include <qapplication.h>
glViewport( 0, 0, w, h ); #include <qslider.h>
glMatrixMode( GL_PROJECTION ); #include <qvbox.h>
glLoadIdentity(); #include "box3d.h"
glFrustum( -1.0, 1.0, -1.0, 1.0, 5.0, 15.0 );
glMatrixMode( GL_MODELVIEW ); void create_slider( QWidget *parent, Box3D *box3d, const char *slot )
} {
QSlider *slider = new QSlider( 0, 360, 60, 0, QSlider::Horizontal, parent );
GLuint Box3D::makeObject() slider->setTickmarks( QSlider::Below );
{ QObject::connect( slider, SIGNAL(valueChanged(int)), box3d, slot );
GLuint list = glGenLists( 1 ); }
glNewList( list, GL_COMPILE );
qglColor( yellow ); int main( int argc, char **argv )
glLineWidth( 2.0 ); {
QApplication::setColorSpec( QApplication::CustomColor );
glBegin( GL_LINE_LOOP ); QApplication app( argc, argv );
glVertex3f( +1.5, +1.0, +0.8 ); if ( !QGLFormat::hasOpenGL() )
glVertex3f( +1.5, +1.0, -0.8 ); qFatal( "This system has no OpenGL support" );
/* ... */
glEnd(); QVBox *parent = new QVBox;
parent->setCaption( "OpenGL Box" );
glEndList(); parent->setMargin( 11 );
return list; parent->setSpacing( 6 );
}
Box3D *box3d = new Box3D( parent );
create_slider( parent, box3d, SLOT(setRotationX(int)) );
create_slider( parent, box3d, SLOT(setRotationY(int)) );
create_slider( parent, box3d, SLOT(setRotationZ(int)) );
Graphique Stratégies de réaffichage
Eric Lecolinet
(ENST/INFRES) Problèmes
http://www.infres.enst.fr/~elc -> cours -> vihm 1) rafraichissement du "dessin"
[premier transparent] chaque fois que la zone de dessin redevient visible
[transparents sur un seul fichier] 2) déplacer un "dessin" interactivement
[index] il faut d'abord l'"effacer" mais comment ?
Réaffichage interactif Réafficher le composant et son contenu
Cas du graphique structuré Principe

dessin composé d'objets a) réafficher le composant (et ses enfants)
exemple: QCanvas de Qt3, QGraphicsScene, QGraphicsView de b) réafficher le dessin
Qt4.2
rafraichissement et désignation automatiques Remarques
pas toujours optimal en termes de performances garder en mémoire la liste des points et primitives
simple et robuste
Cas standard
coûteux (donc lent) si dessin complexe
dessin effectué par appel de fonctions
le rafraichissement doit être programmé explicitement
exemple: Graphics, Graphics2D de Java, QPainter de Qt
plusieurs stratégies...
Réafficher le composant Exemple de Java Swing
public void paintComponent(Graphics g) {
Optimisation super.paintComponent(g); // ne pas oublier !
...
ne réafficher que la sous-partie concernée Insets insets = getInsets();
-> donnée par l'événement ou les paramètres de la fonction de int currentWidth = getWidth() - insets.left - insets.right;
int currentHeight = getHeight() - insets.top - insets.bottom;
réaffichage ...
...// First painting occurs at (x,y), where x is at least
Exemple de Java Swing // insets.left, and y is at least insets.height.
}
classes Graphics et Graphics2D
méthode paint() : réaffiche; appelle (dans l'ordre) : public void paintComponent(Graphics g) {
Rectangle clipRect = g.getClipBounds();
paintComponent() : méthode à redéfinir
if (clipRect != null) {
paintBorder() // If it's more efficient, draw only the area specified by clipRect.
paintChildren() }
else {
// Paint the entire component.
}
}
Remarques sur Java Swing Exemple de Qt
Attention QPainter
repaint() : ajoute une zone à réafficher modèle graphique évolué (rotations, indépendance / pilote ...)
paint() : réaffiche équivalent de Graphics de Java
Swing : redéfinir paintComponent() / AWT : redéfinir paint() exemples de méthodes :
painter.setPen( QPen(red, 2, DashLine) );
Divers
painter.drawRect( 25, 15, 120, 60 );
taille des bords: Insets
opacité des widgets: setOpaque() -> plus rapide
appeler revalidate() dans certains cas (chgt. de taille)
double buffering par défaut (voir plus loin)
Dessin avec Qt Dessin interactif avec Qt
Redéfinir la méthode paintEvent Gestion des événements souris

void BarGraph::paintEvent( QPaintEvent* e) { redéfinir les méthodes:
NomSuperClasse::paintEvent(e);
mousePressEvent(QMouseEvent*)
QPainter painter( this ); mouseReleaseEvent(QMouseEvent*)
painter.setPen(Qt::red); mouseMoveEvent(QMouseEvent*)
painter.drawLine( 0, 0, 0, height() - 1 );
painter.drawLine( 0, height() - 1, width() - 1, height() - 1 );
Dessin
painter.setPen(Qt::blue);
painter.setFont(QFont("Arial", 30)); redéfinir la méthode paintEvent()
painter.drawText(rect(), Qt::AlignCenter, "Qt");
}
seule paintEvent() doit effectuer l'affichage
les mouseXxxEvent() appellent update()
QPaintEvent update() de Qt = repiant() de Java
définit la région à afficher : méthodes rect() et region()
Problèmes et optimisations Manipulation logique des pixels
Flicking Principe
double buffering si le toolkit le permet (e.g. Swing, Qt4) affichage en mode XOR
pointeurs ou recopie de zones mémoire vidéo très efficace pour déplacements interactifs
alternative :
Afficher 2 fois pour effacer
dessiner dans une image, un "pixmap", un "buffer"
1er affichage: pixel = bg ^ fg
puis afficher cette zone en bloc à l'écran
2eme affichage: pixel = (bg ^ fg) ^ fg = bg
Lattence
ne réafficher que la sous-partie concernée
triple buffering
Manipulation logique des pixels (suite) Couches indépendantes (layers)
Problèmes Physiques
couleurs aléatoires "slicing", "overlays": chaque plan utilise une partie des 24 bits
très efficace pour déplacements interactifs pointeur souris
Exemple: Graphics Java Logiques

- setColor(Color c1) exemple: les Glass Pane de Swing
- setPaintMode() : dessine avec c1
- setXORMode(Color c2) : échange c1 et c2
d'ou le fameux: mywindow.getContentpane().add(...)
Primitives graphiques
Exemple: Graphics2D de Java

demos Graphics2D
courbes cubiques, courbes de Bézier
clipping, shapes
modèles de couleurs
composition, transparence
polices, antialiasing
primitives graphiques
gradients, etc
transformations affines
paths
indépendance / résolution
Java 2D Attributs de Graphics2D
Documentation Pen : contour de la forme

http://java.sun.com/docs/books/tutorial/2d/overview/rendering.html — épaisseur (point size), type de tracé (dashing pattern), end-cap style
— setStroke()
Classes
— Graphics2D hérite de (et enrichit) Graphics Fill : intérieur de la forme
— couleur solide, gradient, motif (pattern)
Utilisation — setPaint()
— quand on redéfinit la méthode d!affichage d!un composant Swing
Compositing : superposition (et mélange) d!objets
public void paintComponent(Graphics g) { — setComposite()
Graphics2D g2 = (Graphics2D) g;
... Exemple
} gp = new GradientPaint(0f, 0f, blue, 0f, 30f, green);
g2.setPaint(gp)
Attributs de Graphics2D (2) Fonctions de dessin
Transform : transformations géométriques draw(Shape)

— translation, rotation, scaling, shearing — dessine le contour de n!importe quelle primitive géométrique
— setTransform()
— en fonction des attributs spécifiés par setStroke() et setPaint()
Clip : masque
fill(Shape)
— défini par une Shape
— setClip() — dessine l!intérieur de n!importe quelle primitive géométrique
— en fonction de setPaint()
Font : police de caractères
— pour convertir les chaînes de caractères en glyphs drawString(...)
— setFont() — dessine du texte
— en fonction de setFont() et setPaint() (couleur et motif)
Rendering hints : préférences de rendu
— compromis qualité / rapidité (dépendent de la plateforme)
— exemple : anti-aliasing
— setRenderingHints()
Fonctions de dessin (2) Exemples
drawImage(...) // draw Line2D.Double

g2.draw(new Line2D.Double(x, y+rectHeight-1, x + rectWidth, y));
— dessine une image
et aussi : // draw Rectangle2D.Double

g2.setStroke(stroke);
— drawRect(), fillRect(), drawOval(), fillOval(), etc... g2.draw(new Rectangle2D.Double(x, y,rectWidth, rectHeight));
— fonctions simplifiées héritées de Graphics
// draw RoundRectangle2D.Double
g2.setStroke(dashed);
g2.draw(new RoundRectangle2D.Double(x, y, rectWidth, rectHeight,
10, 10));
// draw Arc2D.Double
g2.setStroke(wideStroke);
g2.draw(new Arc2D.Double(x, y, rectWidth, rectHeight,
90, 135, Arc2D.OPEN));
Exemples (2) Exemples (3)
// draw Ellipse2D.Double // fill Rectangle2D.Double

g2.setStroke(stroke); g2.setPaint(red);
g2.draw(new Ellipse2D.Double(x, y, rectWidth, rectHeight)); g2.fill(new Rectangle2D.Double(x, y, rectWidth, rectHeight));
// draw GeneralPath (polygon)

int x1Points[] = {x, x+rectWidth, x, x+rectWidth}; // fill RoundRectangle2D.Double
int y1Points[] = {y, y+rectHeight, y+rectHeight, y}; g2.setPaint(redtowhite);
g2.fill(new RoundRectangle2D.Double(x, y, rectWidth, rectHeight
GeneralPath polygon = 10, 10));
new GeneralPath(GeneralPath.WIND_EVEN_ODD, x1Points.length);
" "
polygon.moveTo(x1Points[0], y1Points[0]); // fill Arc2D
g2.setPaint(red);
for (int index = 1; index < x1Points.length; index++) { g2.fill(new Arc2D.Double(x, y, rectWidth, rectHeight, 90,
polygon.lineTo(x1Points[index], y1Points[index]); 135, Arc2D.OPEN));
};
polygon.closePath();
g2.draw(polygon);
Clipping Composition
Principe Classe AlphaComposite

— n!importe quelle Shape
peut servir de clipping path — détermine le rendu des objets superposés
— peut avoir une valeur alpha : le degré de transparence

private Ellipse2D ellipse = new Ellipse2D.Float(); alpha = 1.0 : totalement opaque,
private Rectangle2D rect = new Rectangle2D.Float(); alpha = 0.0 : totalement transparent
...
ellipse.setFrame(x, y, ew, eh);
— règles de composition de Porter-Duff
g2.setClip(ellipse); // set the clipping path
rect.setRect(x+5, y+5, ew-10, eh-10);

g2.clip(rect); // shrink the clipping path
Composition (2) Interaction
Source-over (SRC_OVER) If pixels in the object being rendered (the source) have the Exemple
same location as previously rendered pixels (the destination), the source pixels are
rendered over the destination pixels. — teste si la souris est dans le rectangle quand on appuie sur le bouton de la souris
Source-in (SRC_IN) If pixels in the source and the destination overlap, only the source pixels — met à jour la position du rectangle
in the overlapping area are rendered.
Source-out (SRC_OUT) If pixels in the source and the destination overlap, only the source public void mousePressed(MouseEvent e) {
pixels outside of the overlapping area are rendered. The pixels in the overlapping area are
cleared. last_x = rect.x - e.getX();
last_y = rect.y - e.getY();
Destination-over (DST_OVER) If pixels in the source and the destination overlap, only the
source pixels outside of the overlapping area are rendered. The pixels in the overlapping
area are not changed. if (rect.contains(e.getX(), e.getY()))
updateLocation(e);
Destination-in (DST_IN) If pixels in the source and the destination overlap, the alpha from the
source is applied to the destination pixels in the overlapping area. If the alpha = 1.0, the
}
pixels in the overlapping area are unchanged; if the alpha is 0.0, pixels in the overlapping ...
area are cleared.
public void updateLocation(MouseEvent e) {
Destination-out (DST_OUT) If pixels in the source and the destination overlap, the alpha from
the source is applied to the destination pixels in the overlapping area. If the alpha = 1.0, the
rect.setLocation(last_x + e.getX(), last_y + e.getY());
pixels in the overlapping area are cleared; if the alpha is 0.0, the pixels in the overlapping ...
area are unchanged.
repaint();
Clear (CLEAR) If the pixels in the source and the destination overlap, the pixels in the }
overlapping area are cleared.
Interaction (2)
Contains() et intersects()
— méthodes de Shape applicables à n!importe quelle forme (y compris un GeneralPath)
— éventuelle imprécision si formes complexes (cf. doc. de Shape)
Notes sur le rafraichissement

— le rectangle est réaffiché à chaque fois => long si c!est sur un mouse drag/move
— double buffering pour éviter le flicking (scintillement)
— automatique avec Swing, sinon utiliser une BufferedImage
...
public void updateLocation(MouseEvent e) {
rect.setLocation(last_x + e.getX(),
last_y + e.getY());
...
repaint();
}
Perception et GUIs Moniteurs CRT
Eric Lecolinet
(ENST/INFRES)
http://www.infres.enst.fr/~elc -> cours -> vihm
[premier transparent]
[index]
(source: S. Hudson)
Frame Buffer Moniteurs LCD
Avantages / Inconvénients:
+ : stabilité de l'image
Colormap: cas des pseudo-couleurs l'intensité des pixels ne décroit pas entre 2 balayages
- : temps de mise à jour
matrices "actives" et "passives"
- : moins lumineux que les CRT
Autres techniques d'affichage Perception de la couleur
Plasma Rétine
cônes : couleurs, 3 types (sensibilité R, V ou B)
Vidéo-projecteurs
bâtonets : niveaux de gris, large spectre
LCD ou micro miroirs
Direct retinal displays
University of Washington
Perception de la couleur (2)
Mesure indirecte de l'oeil

exple: jaune exite à la fois les cônes R et V
même impression visuelle si : jaune pur ou combinaison R+V
=> modèle RVB/RGB des phosphores des écrans
Modèle RGB la couleur
codage valeur du R, du V, du B
question: combien de valeurs ?
Modèle RGB la couleur (2) Modèle CMY
Sensibilité rétinienne Modèle soustractif

de l'ordre de 64 niveaux C = cyan
6 bits par couleur M = magenta
Y = yellow
Système visuel
pupille, etc : tres grande faculté d'adaptation à l'intensité Quantité de pigments qui absorbent la lumière
exple: en plein soleil / au fond d'une cave pour peinture, impression, etc.
256 valeurs par couleur pour un environnement de bureau modèle CMYK (K = black)
total: 3 x 8 bits = 24 bits par pixel
32 bits pour blending, composition, etc.
Modèle HSV
modèle RGB: approprié pour écrans pas pour humains !

Hue = teinte: longueur d'onde primaire
Value = intensité
Saturation = quantité de couleurs secondaires (= de blanc/gris)
élevée : couleur pure
faible : couleur mélangée à du blanc
Modèle HSV (2) Sensibilité chromatique et GUIs
Exemple Rétine
rouge saturé : apparaît rouge 7 millions de cônes
non saturé : apparaît rose 75 à 150 millions de batonets
démo GIMP
10 fois plus sensible aux variations de V que de H !
-> fortes répercussions sur GUIs
H versus V Dépendance / longueur d'onde (1)
Difficulté à différencier si : Oeil plus efficace :

V équivalentes mais H différentes au centre du spectre (jaune, vert)
rapport minimum de 1/3 (1/10 est préférable) qu'aux bords (rouge foncé, violet)
exple: texte bleu sur fond rouge foncé
Exemples:
-> difficile à lire
texte vert brillant sur fond rouge brillant :
difficile ou désagréable : 90% des ressources perdues !

texte vert sur rouge foncé
lecture plus facile
Dépendance / longueur d'onde (2) Dépendance spatiale
aberration chromatique : Sensibilité bien plus grande

le focus n'est pas le même pour R, V et B au centre de la rétine
-> c'est la zone utilisée pour lire
Focus d'attention
changement continu du point de focus
Défauts de perception Correction Gamma
Concernent 10% des hommes Problème : très grande différence entre :

1% incapables de voir une des 3 couleurs : Luminance : quantité visible de la lumière
protanope (insensible au rouge) => cyan similaire au blanc Brillance : quantité perçue
deutéranope (au vert)
Luminance
tritanope (au bleu), cas rare
quantité de lumière visible par oeil humain
Règle d'or: énergie lumineuse pondérée par sensitivité spectrale
ne pas compter uniquement sur la longueur d'onde pour différencier (à cause de dependance / longueur d'onde)
Correction Gamma (suite) Relation B vs. L (empirique)
Brillance Brillance = luminance ** n

quantité de lumière perçue par système visuel estimation empirique
pas du tout proportionnelle à la luminance ! n très variable suivant conditions
angle de vision de 5 degrés: n = 0,333
Exemples
vision ponctuelle: n = 0,5
feuille noire en plein soleil : 1000 candéla/m2
etc.
feuille blanche sur bureau : 50 candéla/m2
Correction Gamma des moniteurs En pratique (1)
L = V ** gamma Lumière ambiante

mécanisme correctif : L = V ** gamma + A
L = luminance des phosphores A : prise en compte la lumière ambiente
V = voltage -> gamma moins élevé, typiquemement :
gamma entre 1,4 et 3 gamma = 2,5 dans le noir
gamma = 1,5 dans bureau éclairé
En théorie
relation linéaire entre V et Brillance perçue
exple: si n = 0,33 et gamma = 3 -> correction parfaite
En pratique (2) Source de problèmes
Grande hétéréogenéité Cas typiques

Gamma différent suivant plateformes : applis multiplateformes
TV, PC: gamma = 2,2 Web, manipulation d'images, vidéo, 3D, etc.
Mac, SGI: gamma = 1,8
Pages Web
Unix : souvent aucune correction (gamma = 1) !
attention à la lisibilité du texte !
Correction globale ou locale
tester avec plusieurs plateformes !
écran ou fenêtres
explicite (commande) ou implicite (programme)
démo Mac
CRITÈRES 1.2 Groupement / distinction entre items
❏ Organisation visuelle (localisation, format, couleur)
ERGONOMIQUES ☞ relations entre items
☞ (non-)appartenance à une même classe
D’après C. BASTIEN et D. SCAPIN
Rapport technique INRIA No. 156 - Juin 1993 ❏ Exemples
☞ listes hiérarchiques, menus, groupes, encadrés
➔ 1. Guidage
➔ 2. Charge de Travail
➔ 3. Contrôle Explicite
➔ 4. Adaptabilité
➔ 5. Gestion des Erreurs
➔ 6. Homogénéité / Cohérence
➔ 7. Signifiance des Codes et Dénominations
➔ 8. Compatibilité
➔ Annexe: Présentation et Guides de Style
Eric Lecolinet / ENST Java AWT / Swing Page 2-1 3 Eric Lecolinet / ENST Java AWT / Swing Page 2-1 5
1. Guidage 1.3 Feedback immédiat

❏ Fournir une réponse aussi rapide que possible
1.1 Incitation
❏ Exemples
❏ Identifier l’état du contexte pour amener l’utilisateur
☞ traitement long ➔ retour visuel (horloge, grisés ...)
à faire des actions appropriées: ☞ temps de réponse homogènes
☞ “où suis-je, que puis-je faire, comment sortir ...” ☞ feedback des entrées (password ➔ une étoile ...)
❏ Exemples
☞ indiquer formats, unités, infos d’états, aide en ligne
1.4 Lisibilité 2.2 Densité informationnelle
❏ Caractéristiques de présentation adéquates ❏ Eviter mémorisation de procédures ou d’informations
☞ couleur, contraste, dimension, espacement du texte trop longues ou trop complexes
❏ Exemples ❏ Exemples
☞ curseur facilement repérable, labels capitalisés ☞ écran zen: n’afficher que ce qui est nécessaire
☞ préférer qq. lignes longues à bcp. de lignes courtes ☞ éviter d’avoir à se rappeler des données antérieures
☞ lignes d’au moins 50 caractères, éviter césures ☞ calculer tout ce qui peut l’être
2. Charge de Travail 3. Contrôle Explicite

2.1 Brièveté 3.1 Actions explicites
❏ Limiter travail de lecture et étapes intermédiaires ❏ Le système doit exécuter:
☞ entrées courtes, items succints, actions minimales ☞ seulement les opérations demandées
☞ au moment où elles sont démandées
❏ Exemples
☞ mnémotechniques ❏ Exemples
abreviations, raccourcis ☞ action explicite de validation (touche Enter, bouton OK)
☞ éviter traitements implicites (ex: Print -/-> Save)
☞ limiter niveau de
menus cascadés
3.2 Contrôle utilisateur
4.2 Prise en compte de l’expérience
❏ L’U doit “avoir la main” et contrôler le déroulement
☞ Novices:
❏ Exemples ✔ transactions très guidées, menus cascadés
☞ bouton d’interruption, retour arrière (Undo)
☞ éviter de déplacer le curseur sans contrôle de l’U ☞ Experts:
. ✔ raccourcis clavier, menus contextuels
✔ inhiber guidage automatique, messages + concis
4. Adaptabilité 5. Gestion des Erreurs

4.1 Flexibilité 5.1 Protection
❏ Capacité de l’interface à s’adapter aux Us: ❏ Détecter les erreurs lors de la saisie, avant la validation
☞ personnalisation
☞ plusieurs façons d’atteindre un objectif ❏ Exemples
☞ confirmation de fin de session
❏ Exemples ☞ envisager toutes les actions possibles (accidentelles)
☞ paramétrage des “préférences”
☞ contrôle des affichages
5.2 Qualité des messages 7. Codes et dénominations
❏ Pertinence, facilité de lecture, exactitude
Adéquation objets affichés / référents
❏ Exemples
☞ titres informants et distincts
☞ activation touche non valide
✔ aucune action ou message ad hoc ☞ regles d’abréviation explicites
☞ messages brefs, termes spécifiques, éviter l’humour ! ☞ codes et noms significatifs
✔ exple: M et F plutôt que 1 et 2
5.3 Correction
❏ Pouvoir corriger :
☞ en cours de saisie
☞ juste la partie erronée (ne pas avoir à tout retaper)
6. Homogénéité / Cohérence 8. Compatibilité

Homogenéité des choix de conception 8.1 Accord entre:
☞ formats d’écrans similaires ☞ caractéristiques / habitudes des utilisateurs
☞ uniformité: ☞ organisation des E/S et du dialogue
✔ des menus
✔ des formats ❏ Exemples
✔ des intitulés ☞ affichage conforme aux conventions papier
✔ des procédures, etc. ☞ termes standard, familiers, internationalisation
☞ procédures de dialogue compatibles avec la représentation de l’U (selon ses habitudes ou ce qu’il
imagine du système)
8.2 Degré de similitude:

❏ Entre environnements ou applis.
➔ guides de style (Motif, Windows, Java...)
Guides de Style Retours Visuels
Menu Bar
Tool Bar ❏ Pour indiquer à tout moment
☞ l’état courant de l’application
Command ☞ ce que l’utilisateur peut / doit faire
Area
❏ Respecter les normes
☞ facilite le transfert des connaissances syntaxiques
Working Principaux types de retours visuels

Area
(scrolled area) ☞ Aspect visuel des widgets
Standardisation ☞ Forme du pointeur (flèche, croix, horloge...)
de la disposition
☞ Dialogues d’alerte, confimation, information
et de l’interaction
☞ Zone de message ou aide contextuelle (bulles, “tips”)
Status Line
❏ MenuBar:
☞ File
☞ Edit Penser aux :
☞ View - Mnémoniques l’encadrement
☞ Help indique le focus
- Accélérateurs
❏ File :
☞ New Aspects visuels d’un Bouton
☞ Open ...
☞ Save
☞ Save As ...
☞ Exit
Status Line de Netscape
❏ Edit :
☞ Undo
☞ Cut
☞ Copy
☞ Paste
☞ Clear
☞ Delete
Focus clavier et navigation Modèle des Entrées
Focus clavier: Multimodalité des entrées
❏ Détermine: ❏ Utilisation
✔ quelle fenêtre ☞ de la souris (ou autre pointeur)
✔ quel composant de cette fenêtre ☞ ou du clavier
reçoit les entrées clavier ❏ Suivant:
☞ le matériel
☞ le type d’action et les préférences de l’utilisateur.
❏ Focus implicite
☞ lieu où se trouve le pointeur
Equivalents clavier
❏ Focus explicite ☞ fonctionnement en l’absence de souris
☞ dans le dernier composant cliqué ☞ accès plus rapide à certaines fonctions
☞ simplification de l’interaction
Navigation
RC texte
❏ Détermine le passage d’une fenêtre ou d’un composant à un autre RC liste
DClic liste
RC Filter
SP Filter
RC liste
DClic liste
RC Ok
SP Ok
ESC
TAB / SHIFT TAB: passage au champ suivant/précédent

➔ touche TAB
➔ par programme, si possible avec vérification de validité
Première partie :
Visualisation de l’information
Visualisation !! « The use of computer-supported, interactive, visual
de l’information representations of abstract data to amplify cognition »

« l’utilisation de représentations informatiques, visuelles et
interactives de données abstraites pour amplifier la cognition »
–! compréhension / comparaison de grandes quantités d’informations
–! découverte de phénomènes / création d’idées
eric lecolinet! –! => décisions / explications
www.enst.fr/~elc!
!! Données abstraites
–! pas de représentations physiques directes
–! contrairement à la visualisation scientifique
TELECOM ParisTech
Page 2 Nouvelles techniques de visualisation et d’interaction - Eric Lecolinet - ENST
« Using vision to think » Mantra de l’infoviz
!! Mieux exploiter les facultés perceptives et cognitives !! Perception d’abord globale puis locale
–! perception pré-attentive, Gestalt... –! Gestalt, Focus/contexte
–! « Overview first, zoom and filter, then details on demand »
!! Aides graphiques externes
–! Vue globale puis zoom et filtrage puis détails à la demande
–! amplifier la cognition via la perception
–! utiliser la vision pour penser (« Using Vision to Think »)
Exemples : papier pour multiplication, schémas, diagrammes, etc. !! Emergence de structures ou comportements
–! représentations graphiques spécifiques
« The power of the unaided mind is highly overrated. Without external aids, memory, •! dimension spatiale
thought, and reasoning are all constrained. But human intelligence is highly flexible –! bouclage entre formes visuelles et contrôle interactif
and adaptive, superb at inventing procedures and objects that overcome its own
•! dimension temporelle
limits. The real powers come from devising external aids that enhance cognitive
abilities. How have we increased memory, thought, and reasoning? By the
inventions of external aids: It is things that make us smart. » !! Conséquence
Norman, 1993 –! visualisation / interaction intrinsèquement liées
Page 3 Nouvelles techniques de visualisation et d’interaction - Eric Lecolinet - ENST Page 4 Nouvelles techniques de visualisation et d’interaction - Eric Lecolinet - ENST
Données > représentations Caractéristiques
!! Modèle de référence !! Structures de données
–! de correspondance des données vers les représentations visuelles –! 1D, 2D, 3D, nD, temporelles
–! arbres, réseaux, documents
–! spécifiques
!! Types de variables
–! nominales, ordinales, quantitatives
!! Types d’interaction
–! filtrage, sélection/détails, navigation, linking/brushing...
!! Types de tâches
–! globaliser, chercher, mettre en relation....
!! Types de représentations
–! ...
Types de représentations Vues multiples

!! Multiplexage spatial !! Brushing+Linking
–! vues multiples –! plusieurs vues liées
•! brushing+linking, overview+detail –! plusieurs attributs
–! focus+contexte
•! fish eye/distorsions, vues hyperboliques !! Overview+Detail
•! métaphores 3D et pseudo-3D –! vue globale + vue(s) de détail
!! But
!! Multiplexage temporel
–! voir le contexte et les détails
–! pan+zoom / interfaces zoomables / zoom sémantique en même temps
–! requêtes dynamiques (filtrage interactif)
!! Inconvénients
!! Autres techniques –! discontinuité spatiale
–! transparence / superposition (multiplexage en profondeur) –! plusieurs focus d’attention
–! hiérarchies, Treemaps... –! encombrement écran
–! représentations spécifiques
Focus+Context Focus+Context
!! Intégration des détails à la vue globale
–! évite les discontinuités, réduit l’encombrement spatial ...
TableLens
Rao & Card 94
!! Mantra:
–! Overview first : représentation graphique de données numériques
–! zoom and filter : tri selon critère (colonnes)
–! then details on demand : représentation textuelle (lignes de focus)
Bifocal display Fish eye géométrique

!! Distorsion géométrique !! Approche
–! contrairement au TableLens (distorsion logique) –! déformation bi-dimensionnelle
–! déformation mono-dimensionnelle sur chacun des 4 cotés du focus non linéaire continue
–! => discontinuités et non préservation de l’aspect ratio gênantes –! imite l’effet des objectifs à très courte
focale (fish eye, oeil de poisson)
–! nombreuses variantes
!! Avantage
Spence, Apperley –! continuité spatiale de la représentation
!! Exemple
–! Sarkar et Brown
•! G(x) = (d+1) x / (d x+1)
•! d: facteur de distorsion
Fish eyes Fish eyes
!! Exemples : !! Vitesse
–! Vernier, Nigay
Moosburg –! carte, colline, cylindre, pyramide, sphère
Schafer
!! Types de distorsions
–! cf. Carpendale, Leung et Apperley ...
Transformation linéaire/non linéaire
contrainte à un domaine spatial
Keahey, Robertson, 1996
!! Inconvénient des fish eyes

–! manque de lisibilité dans la zone de
distorsion
–! plus ou moins brutale selon technique
–! texte particulièrement illisible
Vues hyperboliques Vues hyperboliques

!! Approche
–! effet ressemblant au fish eye
–! pour représenter des arbres
!! Géométrie hyperbolique
–! géometrie non euclidienne
(« 5e postulat » non vérifié)
–! mapping entre l’espace hyperbolique
et l’espace euclidien
(modèles de Poincaré ou de Klein)
!! Principe Lamping et al.

–! disposer l’arbre dans le plan hyperbolique
–! puis mapping sur un disque (cf. également Munzer)
Métaphores 3D Perspective Wall
!! Approche !! Structures et types de données
–! gradualité du niveau de détail obtenue « naturellement » via l’effet de –! 1D, ordonnées
perspective de la vision conique –! données temporelles (Daassi, Nigay)
–! peuvent être vues comme des représentations focus+contexte –! extension 2D (Robert, ENST)
–! souvent en pseudo 3D
!! Exemple :
Perspective Wall
Mackinlay et al 91
–! plan avant : zone de focus, taille nominale

–! cotés : zones de contexte, déformées par effet de perspective
Data Mountains Data Mountains

!! But !! But
–! retrouver facilement les –! retrouver facilement les
signets d’un navigateur Web signets d’un navigateur Web
!! Visualisation
–! représentation pseudo 3D !! Facultés perceptives
d’un plan incliné
–! importance de la mémoire spatiale
(et du geste)
!! Interaction –! => Arts de mémoire
–! considérablement simplifiée
(mapping y / z)
!! Résultats
–! évaluation de Czerwinski
Robertson, Czerwinski, et al (Interact’99) Robertson, Czerwinski, et al
Texte et documents Web Book, Web Forager
!! Exemple: Document Lens !! Web Book
–! métaphore du livre
!! Approche –! feuilletage
–! métaphore 3D
–! pages disposées selon une grille !! Web Forager
–! focus sur une page –! métaphore « réaliste » du bureau
–! distorsion “pyramidale” –! workspace hiérarchique:
–! greeking •! focus
•! mémoire intermédiaire
!! Critique •! étagères
–! faible lisibilité du texte en –! animation
perspective
Robertson & Mackinlay 93 !! Question
–! efficacité par rapport à une
métaphore « abstraite » ?
Card, Robertson, York
Espaces de travail 3D Gestionnaire de fenêtre vs. toolkit

!! Task Gallery !! Ametista / Metisse !! Toolkit Ubit3D
–! interacteurs spécialisés –! gestionnaire de fenêtres 3D –! application = surfaces interactives
–! X Window / VNC / FVWM 2D orientées
Robertson et al.
–! contrôle fin rendu et interaction
(zoom sémantique, interacteurs
!! Looking Glass spécifiques, lisibilité, performances ...)
–! http://www.sun.com/software/looking_glass/
N. Roussel, O. Chapuis - LRI

E. Lecolinet, M. Nottale - ENST
Cone-Trees / Cam-Trees Autres représentations hiérarchiques
!! Représentation d’arbres
–! métaphore 3D du « Rolodex »
–! animation
–! ombres portées => intersections
–! recherche par mot clé => surbrillance
Robertson et al. 91
!! Problèmes typiques de la 3D
–! occlusion
–! interaction non triviale
avec une souris 2D
SGI Navigator Harmony,

10 000 noeuds d’un site Web
Fish eye logique Zoom sémantique

!! A l’origine du Focus+Context !! Approche
–! fish eye « logique » –! zoom géométrique et logique
–! George Furnas, 1981 –! la représentation change en fonction du
niveau de zoom
!! Notion de Degré d’Intéret (DOI)
•! donc du degré d’intérêt de l’utilisateur
–! fonction de la distance au focus et de
l’importance a priori –! le zoom devient une technique de navigation
–! DOI(x) = -dist(x,f) + imp(x) dans un espace 2+1D
•! 3e D = niveau de détail
!! Vue Fisheye
–! afficher les éléments en fonction de leur DOI !! Principe
–! utilisée initialement pour programmes C ... –! multiplexage temporel + fish eye logique
–! base du zoom sémantique –! (pas du focus+context à proprement parler)
(et des TableLens vues au début)
Zomit (Pook, Lecolinet)
Zoom sémantique Pie, Marking et Control Menus
!! Mise en oeuvre
!! Pie menus
–! ne pas calculer indépendamment le zoom et le pan –! D. Hopkins
•! zoom => accroissement exponentiel
•! zoom centré pour éviter perte du focus
–! une solution: space/scale diagrams (Furnas, Bederson)
•! combinaison Pan+Zoom = chemin dans cet espace
!! Toolkits
Pad++ / Jazz / Picolo (Bederson et al.)
•! PhotoMesa, DateLens
!! Marking Menus
Zomit (Pook, Lecolinet) –! Kurtenbach, Buxton
•! bibliothèque virtuelle
•! bases de données biogénétiques
•! client Java en ligne :
http://www.enst.fr/~elc/
Pie, Marking et Control Menus (suite) Filtrage dynamique, Starfield display

!! Control menus !! Dynamic Queries
–! inspirés des Pie et Marking menus –! recherche multicritère
•! menus circulaires –! par ajustements successifs
•! mode novice: interacteurs visibles –! bouclage entre formes visuelles
•! mode expert: interaction gestuelle et contrôle interactif
–! sélection et contrôle dans un seul geste
•! cf. aussi les Flow menus Ahlberg, Shneiderman, 92...
!! Interfaces zoomables !! Exemples :

versus 3D SpotFire, FilmFinder
–! démos/vidéos
Pook, Lecolinet,
Transparence Transparence
!! Approche !! Exemples(suite)
–! multiplexage en profondeur Vues contextuelles de Zomit
(Pook, Lecolinet)
vidéo
!! Exemples
Palettes transparentes (Harrison et al 95)
!! Problèmes
Translucent patches (Kramer 94)
–! séparabilité des couches
Macroscope (Lieberman)
–! importance du mouvement
Outils transparents Synthèse

!! Magic Lenses, SeeThrough Tools type d’interface multiplexage mode de déformation
–! interaction à deux mains Bier, Fishkin.... pan et zoom temporel optique
fenêtres multiples spatial aucun
basé distorsion temporel & spatial tous
transparence en profondeur positionnel
zoom sémantique temporel optique & logique
!! Une autre approche: !! Deux dimensions

–! mode de présentation : multiplexage
Excentric labeling
–! mode de déformation :
•! logique : comprendre l’information
JD. Fekete / C Plaisant •! positionnel : relations spatiales
•! pseudo-optique : transformations géométrique
Compléments Arbres
!! Structure / Connexions
!! Structures visuelles –! outliner, finder
–! hyperbolic browser
–! arbres
–! ConeTrees
–! 1D, 2D, 3D, nD, temporelles
–! spécifiques
!! Références
Arbres Arbres
!! Imbrication : TreeMaps !! Imbrication : TreeMaps
–! Principe: (B. Shneiderman, U. Maryland)
–! MillionViz (JD. Fekete)
–! Map of the Market: http://www.smartmoney.com/marketmap/
Arbres 1D
!! Divers !! Lignes temporelles, documents textuels, contrôles
–! Perspective Wall (Mackinlay), Fisheye Menus (Bederson)
–! SeeSoft (Eick) : line oriented software statistics
!! Multi-Trees, DAGs (directed acyclic graph)

!! Représentations spécifiques
!! Réseaux, graphes
–! pas traités dans ce cours
Temporel 2D
–! Time Tube : évolution d'un site Web !! Diagrammes, données géographiques, topographies abstraites
(7000 noeuds)
–! Lifestreams
–! Timelines : ligne temporelle dans l'espace 3D
2D 3D
!! Diagrammes, données géographiques, topographies abstraites !! Données physiques :
–! cartes sémantiques intrinsèquement 3D
!! Composition 2D
+ dimension supplémentaire
méta-moteur de recherche Kartoo sur le Web : www.kartoo.com Xerox PARC Lab Toronto Stock Exchange (Visible Decisions)
3D 3D
!! Composition 2D
!! Perspective, métaphores 3D
+ dimension supplémentaire
Task
Gallery
ThemeScape Harmony
nD nD
VIsDB Worlds within worlds Stock Exchange Visualizer (Visible Decisions)
Exemples de toolkits Exemples de toolkits

!! Infovis Toolkit !! Prefuse
(J-D. Fekete, INRIA)
Exemples de toolkits Exemples de toolkits
!! Tulip !! VTK
–! D. Auber (Labri)
Quelques références
Livres, articles, tutoriels
•! Readings in Information Visualization, Card, Mackinlay, Shneiderman
•! The display of quantitative data, Tufte
•! Sémiologie graphique, Bertin
•! Information Visualization: Perception for Design, Colin Ware
•! Graph Visualization and Navigation in Information Visualization : A Survey,
Herman, Melançon, Marshall, IEEE trans on visualization and computer graphics
•! Visualisation interactive d’information, M.Hascoët, M.Beaudouin-Lafon, revue I3
(en ligne sur le Web)
Web
•! Google en entrant les noms indiqués sur les transparents de ces cours ...
www.infres.enst.fr/~elc -> zomit
•! otal.umd.edu./Olive
•! people.cs.vt.edu/~north/infoviz/
•! graphics.stanford.edu/courses/cs348c-96-fall/resources.html
•! www.sims.berkeley.edu/courses/is247/s98/lectures.html
•! www.limsi.fr/Individu/jacquemi/IRI-TR/menu-visu.html
Page 55 Nouvelles techniques de visualisation et d’interaction - Eric Lecolinet - ENST

réalité augmentée
Augmentation du monde réel par des représentations virtuelles
Techniques d’interaction !! exemples
avancées –! aide interactive à la réparation
d’une photocopieuse
–! annotation d’une scène réelle (vidéo)
–! augmentation de plans (papier) en architecture
eric lecolinet!
!! technologies
www.enst.fr/~elc! –! lunettes semi immersives
–! localisation de l’utilisateur dans l’espace
ou
–! vidéoprojection
–! localisation du point ou des surfaces d’interaction
TELECOM ParisTech
Page 2 Techniques d’interaction avancées - Eric Lecolinet - ENST
réalité augmentée tableau augmenté
PDA = « lentille magique » Stylos + gomme tangibles

!! tableau blanc + VDP
!! augmente le papier
!! vidéprojection
!! pour permettre interaction
!! plasma / LCD
et lien tangible / numérique
!! capture tracé + localisation PDA
Capteurs
!! Mimio, Smartboard,
Papier augmenté Promethean…
Missing Link "
!! couple papier / stylo Anoto
(McKay & al. INRIA)
!! micro-tramé augmentation de
cahiers de laboratoire
#$Papier Anoto %
Page 3 Techniques d’interaction avancées - Eric Lecolinet - ENST Page 4 Techniques d’interaction avancées - Eric Lecolinet - ENST
écran augmenté interfaces tangibles
Marqueurs de
Réalité Augmentée
(RA)
!! ARToolkit
et dérivés
!! MagicCube
MagicLand
Paper-Flier Metaphor Technique

d’interaction
pour RA ou RV
Notification Collage
.
Sweep and Point & Shoot
interfaces perceptives interfaces tangibles
Tangible Viewpoints (MIT)
VisionWand Smart laser scanner
Phidgets (U.Toronto)
Synchronous gestures Perceptually supported image editing

retour tactile des dispositifs étonnants...
HapticPen
Logitech IFeel
Autres dispositifs « ensemble » : vêtements tangibles

!! dispositifs haptiques
!! dispositifs pour non-voyants
IOBrush
TactiBall et TactiPen (ENST) MIT Media Lab
terminaux mobiles : capteurs terminaux mobiles: écran tactile

Pointage au pouce Interaction gestuelle
!! précision insuffisante •! exploiter la forme ou la cinématique
!! occultation des gestes
!! difficile proche des bords •!16 gestes différents !
L’orientation contrôle :
!! le zoom et le pan (RealEyes3D)
!! le mode d’affichage (iPhone)
Rubbing
!! l’entrée de texte (TiltText, DGP) Drag (KTH / NIU)
Stane : « grattage » de textures

par analyse audio
"$TapTap et MagStick " MicroRolls "
(U.Glasgow, etc.) (Télécom ParisTech / Alcatel-Lucent)
11 12
terminaux mobiles: visualisation terminaux mobiles: projection, etc.
#$"$'
NanoTouch
&$DateLens et LaunchTile " (U. Maryland)
(Microsoft
"$ FishView et Spiralist "' Research)
(Télécom ParisTech / ALU)
#$'
Clavier projeté
(Lumio)
# Summary Thumbnails
Handheld projector + Pen"
(Microsoft Research) (DGP U.Toronto / MERL)"
14 14
groupware (travail collaboratif) groupware: table augmentée
ClearBoard Dynamo DiammondSpin Java Toolkit

MERL tabletop
Deux cas:
KidPad
!! à distance
!! dans un même lieu
interaction bi-manuelle
(single display groupware)
Multi-Touch groupware: multi-surfaces
En entrée
!! contrôle à distance multi-surfaces
!! PointRight
En sortie
!! réplication graphique
!! Ubit, Campus
FTIR ! "
Frustrated Total Internal Reflexion
Jeff Han (NIU / Perceptive Pixels)
#$Stantum "
JazzMutant
PointRight SpotLight
groupware: télévirtualité interaction ambiante
Espace immersif
communication
gestuelle
Appli partagée
« in-visible » urban information
P.Horain, JM Soares - INT

Ambient Agoras

Ihm 09

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Ihm 09

Transféré par

Droits d'auteur :

Formats disponibles

interfaces homme-machine

Page 2 IHM > Introduction - Eric Lecolinet - ENST Paris

! Processus de développement adapté

! 1. Les IHMs sont omniprésentes et incontournables Paris 17 janvier 2005 AFP

– Selon Me Muriel Brouquet-Canale ces charges sont désormais également

Enjeux (2) Approche centrée utilisateur

! ! Double objectif ! Facteurs humains

Cycle de vie « en spirale” Cycle de vie en étoile

Styles d’interaction Styles d’interaction

– WYSIWYG : « what you see is what you get »

! 1945: Vannevar Bush (Memex)

Un peu d’histoire ... Un peu d’histoire ...

! 1963 : Ivan Sutherland (Sketchpad, MIT) ! 1962/64/... : Douglas Engelbart

! 1968 : Ted Nelson (Xanadu) ! Xerox PARC (Palo Alto, CA)

Un peu d’histoire ... Un peu d’histoire ...

! Alto Computer (PARC, mi-70’s) ! 1981: Xerox Star

! 1975: ALTAIR 8800

! 1981: Xerox Star ! 1983: Apple Lisa

Un peu d’histoire ... Un peu d’histoire ...

! 1984: Apple MacIntosh ! 1985: X Window System (MIT)

– devient hypermédia et grand

Présent / futur ? Quelques références

Page 31 IHM > Introduction - Eric Lecolinet - ENST Paris

Architecture Logicielle des IHMs – modèle de fonctionnement du système

Langages de spécification UAN

! Langages de description de syntaxe

! Pas toujours réalisable en toute rigueur

! Partage de données entre GUI et NF

Conception itérative / participative Modèles d’architecture logicielle

analyse implémentation ! Décrire

! Vue linguistique de l’interaction

– Syntaxique: construction des phrases

Modèle Arch Modèle multi-agents

! Vision: système interactif =

! Agent = système de traitement doté

! Envoi de message par appel de méthode

Modèle MVC Modèle MVC

! Trois composantes ! But de MVC

! En pratique ! Modèles et multi-vues

! Swing est inspiré du modèle MVC

! Un JComponent encapsule ! Exemple

Exemple Pluggable Look and Feel

Changer le modèle du JSlider

On peut aussi ignorer l’existence des modèles Windows:

! Machines à états finis (FSM)

source: S. Hudson Press-inside / A Release / E

Outils de spécification d’interfaces Outils de génération d’interfaces

! Critique des FSM ! Générateurs d’interface de type "UIMS"

! Statecharts ! Objectif : génération automatique du code

! Outils interactifs de construction d’interfaces ! Inconvénients (...)

Autres outils "interactifs" Outils de programmation

! Mockups d'interfaces ! Langages spécialisés

! Boîtes à outils (toolkits) graphiques

Programmation Evénementielle ! Programmation classique : l’application a le contrôle

& Interfaces Graphiques

– l’utilisateur fait ce que lui demande l’application

Programmation événementielle Programmation événementielle

Quelques événements X11 : ! Un événement

Dialogue multi-fils (multi-threads) Gestion des événements

! L’application se met en attente des événements

Protocole non embarqué Protocole non embarqué

! En réalité c’est bien plus complexe !

! Exemple : cliquer sur un bouton ! Modularité, maintenance