Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Architecture générale des interfaces graphiques

Applications

IHM: Fondements des Interfaces Graphiques Outils de construction d’interfaces

Olivier Chapuis Bibliothèque graphique

chapuis@[Link]

Système de fenêtrage

Périphériques d’entrée/sortie

Système d’exploitation

IHM: Fondements des Interfaces Graphiques O. Chapuis 2/43

Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Plan Plan

1 Périphériques d’entrée et de sortie 1 Périphériques d’entrée et de sortie

2 Système de fenêtrage 2 Système de fenêtrage

3 Librairies graphiques 3 Librairies graphiques

IHM: Fondements des Interfaces Graphiques O. Chapuis 3/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 4/43
Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Périphériques de sortie Périphériques de sortie

Ecrans “bitmap” Cathodique, LCD, Plasma, OLED.

Taille exprimé en la dimenssion de la diagonal en pouce (1 pouce =
2.54 cm, 30 pouces ∼ 76cm) et le ratio largeur sur hauteur (e.g., 16/9).
Résolution exprimé en pixel (e.g., 2560x1600). La taille plus cette
résolution donne une densité exprimé en général en “dpi”: dot[pixel] per[par]
inch[pouce] (typiquement 100 dpi ∼ 40 pixels par cm, c.à.d. 1 pixel ∼ 0.25
mm).
Résolution en couleurs (“profondeur” RGB[A]): 8 bits (256 couleurs),
16 bits (65536 couleurs) ou 24[32] bits (16 millions de couleurs [+256
niveaux de “transluscence”])
Résolution temporelle exprimé en Hz qui est le nombre de trame
[frame] par seconde que l’écran peut afficher (typiquement 60 Hz).
Exemple de bande passante:
videos/output/volumetric_coll.avi videos/output/[Link]
60 img/s * 2560x1600 pixels * 3 octets/pixel ∼ 700 Mo/s
videos/output/[Link]

IHM: Fondements des Interfaces Graphiques O. Chapuis 5/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 6/43

Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Périphériques d’entrée Entrée de texte: Le clavier

claviers, boı̂tes à boutons

potentiomètres (rotatifs, linéaires)

souris, tablettes, joystick, trackball Un problème: Optimisation de la position

des touches
écrans tactiles, crayons optiques
Disposition Dvorak: 10 à 15% de gain de
reconnaissance de la parole vitesse, réduction de la fatigue
capteurs de position et de Clavier Logiciel: optimisation ⇒ pointage
direction
Clavier avec des touches qui possèdent
vision par ordinateur des écrans (oled) ou projection sur le
surfaces interactives clavier.

dispositifs hybrides entrée/sortie

Retour d”effort videos//output/[Link]

videos/force/[Link]

IHM: Fondements des Interfaces Graphiques O. Chapuis 7/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 8/43
Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Entrée de texte: alternative au clavier classique Périphériques 3D, retour tactile et retour de force

Périphériques 3D ... bof, bof ...

Clavier à accords (chord keyboards):

- Peu de touches (4 ou 5)
- Utilisation de plusieurs touches simultanément
- Saisie rapide avec une seule main

Téléphone portable: Retour tactile: vibrations et surface plus ou moins dur. Peu d’exemples
- tape multiple d’applications, vibrations lors que l’on passe sur certaines cibles, peut-on
- tape plus ou moins long reproduire des vraies textures ?
- Système T9: un seul “tape” par lettre le
système découvre le mot

IHM: Fondements des Interfaces Graphiques O. Chapuis 9/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 10/43

Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Type de Contrôle et de Périphérique Une périphérique isotonique et élastique

RubberEdge (Casiez et al. 2007): réduction du débrayage en

combinant un contrôle positionnel et élastique
Ordre 0: déplacement du périphérique d’entrée correspond à un
déplacement d’un objet Exemple: Couple souris - curseur

Ordre 1: le périphérique d’entrée contrôle la vitesse d’un objet

Exemples: couple (i) joystick - curseur; (ii) souris - dessin d’un vecteur vitesse

Périphérique isotonique: Contrôle de position – Ordre 0, débrayage

pour les longues distances. Exemples: souris, touchpad, tablette

Périphérique élastique: Possède un état stable avec retour “élastique”

à cet état – Ordre 1. Exemples: joystick (inclinaison ↔ vitesse)
Centre du touchpad: position
Bords du touchpad: un système élastique pour contrôler la vitesse de
déplacement
videos/pointing/[Link]

IHM: Fondements des Interfaces Graphiques O. Chapuis 11/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 12/43
Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Périphériques d’entrée: Control-Display Gain Périphériques d’entrée: Accélération

Problème: Si le CDGain est trop grand il est difficile d’être précis,
mais si il est trop petit on est obligé de débrayer la souris pour
Résolution: nombre d’impulsion que peut envoyer le periphérique parcourir de “grande” distance.
d’entrée pour une distance donné. Souvent expriment en dpi =
dot[impulsion] per[par] inch[pouce]. 1 pouce = 2.54 cm Accélération: modification dynamique du CDGain en fonction de la
Exemple pour une souris: entre 300dpi (lent), 600dpi (typique) et 2400dpi vitesse de la souris. Plus on va vite, plus le CDGain devient grand.
(max?), soit, respectivement une impulsion tous les 0.083, 0.042 et 0.01 mm
Controle-Display Gain [Gain contrôle-écran]:

Distance parcourue à l’écran par le pointeur

CDGain = Pointer Pointer Pointer
Distance parcourue par le périphérique d’entrée

Exemples. Ecran 100 dpi, souris 600 dpi et une impulsion souris ↔ un pixel:
CDGain = 6. Tablette de meme taille que l’écran avec contrôle direct
Souris Souris Souris
tablette-écran: CDGain = 1.
X Window: Mac OS X et Windows:
CDGain Constant Deux valeurs pour Changement progressif
le CDGain du CDGain

IHM: Fondements des Interfaces Graphiques O. Chapuis 13/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 14/43

Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Pointage: Loi de Fitts Loi de Fitts et IHM

TM = a + [Link] où
Design d’interface (clavier logiciel, interface adapté à différent type
W D d’utilisateurs, ...)
ID = log2 ( + 1)
W
D
Technique de Pointage: reduire D ou agrandir W

MT : Temps de Mouvement Comparer les performances entre péripheriques d’entrée (souris,

ID: Indice de Difficulté (de la tâche) touchpad, tablette ...)
a, b: constantes empiriques (qui dépendent des utilisateurs, du
péripherique ...etc.)

TM TM

TM ID ID

La pente de la droite comme un indice de performance

ID

IHM: Fondements des Interfaces Graphiques O. Chapuis 15/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 16/43
Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Techniques de Pointage Plan

W
“Battre la Loi de Fitts” en
réduisant D ou agrandissant W D

1 Périphériques d’entrée et de sortie

Prédiction de la position de la cible pour réduir D
Agrandir la taille des cibles lorsque le curseur se trouve dessus (Mac
OS X Doc) 2 Système de fenêtrage
[Link]
Agrandir W dans l’espace moteur [Blanch et al.] demos/semantic-pointing/
Bubble cursor [Grossman & Balakrishnan] videos/pointing/[Link]
3 Librairies graphiques
DynaSpot [Chapuis & al.] videos/pointing/[Link]

EW (a)
Cursor Center

Activation Area
W
Captured Target

(b) (c) Uncaptured Target

IHM: Fondements des Interfaces Graphiques O. Chapuis 17/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 18/43

Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Système de fenêtrage Modèles de fenêtrage

Système de fenêtrage. Bas niveau du rendu (lien avec le matériel),
partage des ressources (sorties vidéos, entrées clavier-souris) grâce au
concept de fenêtre
Fenêtre. Une surface (rectangulaire) d’affichage utilisée par une application
pour réaliser les entrées/sorties. Les fenêtres permettent de partager la
sortie vidéo entre les applications.
Gestionnaire de fenêtres. Haut niveau, placement et ordre en Z des
fenêtres (superposition des fenêtres), décorations des fenêtres, interactions Pavage Recouvrement
avec l’utilisateur (deplacement, redimensionnement, maximisation et
iconification des fenêtres)
Utilitaires de Gestion de fenêtres. Barre de Tâche, Gestionnaire de
bureaux virtuels, notifications ...etc.
Interface Utilisateur Graphique. L’intérieur des fenêtres, le niveau applicatif
visible où se déroule l’interaction
Environnement de Bureau. Ensemble “cohérent” présenté à l’utilisateur
(gestionnaire de fenêtres + utilitaires de gestion de fenêtres + ensemble
Arbre 4 écrans virtuels
d’applications)
IHM: Fondements des Interfaces Graphiques O. Chapuis 19/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 20/43
Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Modèles de fenêtrage: Dessin Modèles de fenêtrage: Entrées

Gestion des entrées: le système passe les événements souris et

clavier à une fenêtre (fenêtre qui à le focus).

Événements du système de fenêtrage aux applications: changement

Dessin sur l’écran: Réaffichage des parties cachées via un de focus, entrée-sortie de fenêtre
évènement du système de fenêtrage à l’application.
Politique de changement de focus:
Clique pour le Focus – clique passé à l’application ou non (non avec
Mais, de plus en plus, on fait différement: on Mac OS X)
dessine “out of screen” fenêtre par fenêtre, puis
Le Focus suit la “souris” – possible avec X Window
on “compose” l’écran avec les fenêtres. Permet,
par exemple, des effets et des fenêtres Y-a-t-il une politique meilleure que l’autre ?
semi-transparentes.
Plus coûteux en mémoire, mais plus rapide et donne Problème connexe: ordre en z des fenêtres.
une interaction plus fluide ... ceci n’est plus un videos/wm/[Link]
problème avec nos GPU acutels ...

IHM: Fondements des Interfaces Graphiques O. Chapuis 21/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 22/43

Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Le Système X Window Remote Desktop / VNC (Virtual Network Computing)

X is a network-oriented windowing system with a Server-Client Model

Display = Keyboard + mouse + screenS

Xvnc renders the “display” in memory, making the desktop image

available to vnc viewers (via the net). The vnc viewers forwards
Applications can run across the network mouse and keyboard events to the Xvnc server.
X Window System architecture

X is extensible (XInput, XRender, XRandr, XComposite, XDamage, MPX ...)

IHM: Fondements des Interfaces Graphiques O. Chapuis 23/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 24/43
Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Metisse Gestion des Fenêtres: Problématiques

application protocole Metisse

X11 Les activités se multiplient traitement de texte, tableur, jeux, courrier
électronique, Web, messagerie instantanée, édition d’images, de sons et de
application Fvwm
X11
Xmetisse FVWM
Compositor vidéos, media players etc.

application protocole X Compositeur Metisse événements De plus en plus de fenêtres !

X11 des périphériques
commandes d'entrée
d'affichage
Exemples de Problèmes de recherches:
Système de
fenêtrage natif Placement des fenêtres
videos/wm/2000-dynamic-space.mp4 videos/wm/[Link]

Pavage, recouvrement et tab

Xmetisse: a X server which does off-screen rendering per window videos/wm/[Link]

FVWM + FvwmCompositor: On-screen rendering (compositing) in Passer d’une fenêtre à l’autre “Window Switching Problem” et
OpenGL (window = textured polygone), Window management and User correspondance tâche ↔ ensemble de fenêtres
interaction videos/wm/[Link] videos/wm/[Link]

videos/wm/[Link] / videos/wm/[Link]

IHM: Fondements des Interfaces Graphiques O. Chapuis 25/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 26/43

Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Plan Librairies graphiques

Modèle de dessin
Dessin direct (modèle du peintre)
Dessin structuré : description structuré (e.g., via avec du xml)
1 Périphériques d’entrée et de sortie
Définition d’objets graphiques
primitives graphiques lignes, courbes (splines, bezier), Polygones
(triangles, rectangles, etc.), arcs, cercles, ellipses, textes, images
2 Système de fenêtrage bitmap, ... etc.
Géométrie: taille et position
Attributs graphiques: couleur, épaisseur des lignes, fonte, texture,
3 Librairies graphiques gradient, transparence, éclairage ... etc.

Librairies/Modèles graphiques
Dessin direct: Xlib (X Window), Java2D, OpenGL
Dessin structuré: PDF, SVG, Cario

IHM: Fondements des Interfaces Graphiques O. Chapuis 27/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 28/43
Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Librairies graphiques: Autres Fonctions Librairies graphiques: Systèmes de coordonnées

Coordonnées liées au périphérique

unité = pixel
Clipping (dessin limité à une partie de l’écran) par masque bitmap ou
région rectiligne (horizontales et verticales uniquement), polygonale, définie coordonnées écran ou fenêtre ? quelle orientation et origine ?
par des lignes et courbes (ex : PostScript)
Coordonnées physiques
Anti-aliasing, gestion de la transparence unité = cm, pouces, etc.
système indépendant du périphérique mais lié à la technique de
Conversions entre espaces de couleur (RGB, HSV, CMY, etc.) présentation utilisée

Structures de données pour l’affichage (graphe de scène) Coordonnées du modèle

unité = m, km, etc.
Indépendant de l’application

IHM: Fondements des Interfaces Graphiques O. Chapuis 29/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 30/43

Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Librairies graphiques: Événements Outils de construction d’interfaces (boı̂tes à outils)

Objectifs visés : étendre le vocabulaire, faciliter l’apprentissage et la
tantque non fini faire réutilisation de code
attendre jusqu’à file non vide // attente passive
Abstraction atomique: le widget
ev := tête de file // extraire événement
Objet interactif, Composant logiciel
cible := chercherCible(ev)
Bouton, menu, barre de défilement, boı̂te de dialogue, ...
si cible 6= NIL alors [Link](ev)
fin tantque

Un widget = trois facettes

Présentation – Comportement – Interface d’application

Application = arbre de widgets

Style très différent de la programmation algorithmique Noeuds : conteneurs (barre de menus, boı̂te de dialogue, ...)
Feuilles : widgets simples (boutons, barres de défilement, ...)

IHM: Fondements des Interfaces Graphiques O. Chapuis 31/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 32/43
Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Outils de construction d’interfaces (boı̂tes à outils) Exemple de Widgets

Il existe de nombreuses boı̂tes à outils Exemple : les widgets de base du Macintosh (1984)
bouton (button) et label
Xt, Motif, GTK (C) sous Linux
menu déroulant (pull-down menu)
MFC (C++) et ses dérivés sous Window
case à cocher (checkbox), bouton radio (radio button)
Carbon (C), Cocoa (Objective-C) sous OS X
potentiomètre (slider), champ texte (text field)
Tk (Tcl, Python, Perl et autres), Qt (C++) et Swing (Java) sur toutes les
plate-formes boı̂te de dialogue pour les fichiers (file open/save dialog)

Exemples de services : placement des widgets, liens widgets - application, D’autres exemples:
squelettes d’application, générateur de code
Barre de Progression
Ces boı̂tes à outils présentent deux limitations majeures: Bulle d’aide (Tooltips)
la programmation est fastidieuse Arbre d’Icones
l’interaction se limite le plus souvent aux widgets pré-existants Haut Niveau: Sélecteur de Fonte et de Couleur, Calendar

Exemple d’interaction simple qui reste difficile à programmer : le

[Link]
drag-and-drop
[Link]

IHM: Fondements des Interfaces Graphiques O. Chapuis 33/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 34/43

Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Exemple de service : Placement des widgets Facettes d’un widget

Interface/Application = arbre de widgets ⇒ Placement des widgets

Règles générales Présentation

Imbrication géométrique d’un widget fils dans son parent Apparence graphique
Contrôle par le parent du placement de ses fils Plus ou moins Paramétrable (e.g. Look and Feel Java)

Algorithme de placement Comportement

Taille naturelle de chaque fils
Réaction aux actions de l’utilisateur
Taille et position finales imposées par le parent
Peu ou pas paramétrable
Contraintes : Grille, formulaire, etc.
Placement dynamique Interface d’application (Liens widgets - application)
fonctions de rappel (callbacks)
valeurs actives
envoi de message

videos/toolkit/[Link]
IHM: Fondements des Interfaces Graphiques O. Chapuis 35/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 36/43
Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Interface d’application : fonctions de rappel (callbacks) Interface d’application : valeurs actives

1. Enregistrement lors de la création du widget Une valeur active établit un lien bi-directionnel entre une variable
d’état d’un ou plusieurs widget(s) et une variable du noyau fonctionnel
DoSave (...) ...

0
2. Appel lors de l’activation du widget

DoSave (...) ...

26
Problème : “spaghetti” des callbacks
Partage d’état entre plusieurs call-backs par variables globales
i := 12
12
global string filename;

DoSetFile () filename = ... Problèmes: Limité aux types simples (e.g., entier), Lien de retour
peut être coûteux
DoSave () SaveTo(filename)
Avantages: Vues multiples

IHM: Fondements des Interfaces Graphiques O. Chapuis 37/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 38/43

Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Interface d’application : envoi de message Exemple de service : squelettes d’application

Association d’un objet à un widget et de méthodes de l’objet aux
changements d’état du widget
Principe : “Application à trous”
1. Un objet est associé au widget au moment de sa création
Code d’une application incomplète, à compléter
btnHandler Contient ce que l’on ne peut pas mettre dans une toolkit
Structure globale de l’application
2. Des méthodes de cet objet seront appelées par le widget Fonctionnalités globales (historique, copier-coller, ...)
Interactions “non widgets” (drag-and-drop)
[Link](...);
Trahit l’inadéquation des langages de programmation

Avantage : permet une bonne encapsulation des données

Exemple : MacApp (Apple, 1986)
saveDialog { string filename } Notion de document (contenu d’une fenêtre)
Notion d’action (que l’on peut faire, défaire)
[Link](event)

[Link](event)

IHM: Fondements des Interfaces Graphiques O. Chapuis 39/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 40/43
Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

Générateurs d’interface Générateurs d’interface

Inconvénients : What You See Is All You Get
solutions partielles
But : aider (automatiser ?) la mise en oeuvre d’interfaces il reste tout de même du code à écrire...
placer les widgets, modifier leurs attributs (couleur, etc.) le code généré est souvent difficile à modifier
les connecter à l’application
tester leur comportement

De nombreux noms pour une même famille de systèmes

user interface management systems (UIMS)
user interface builder
user interface development environment

Exemples : Visual* sous Windows, Interface Builder sous OS X

Interface Builder: [Link]
MaggLite: videos/toolkit/[Link]
[Link]
IHM: Fondements des Interfaces Graphiques O. Chapuis 41/43 IHM: Fondements des Interfaces Graphiques O. Chapuis 42/43

Périphériques d’entrée et de sortie Système de fenêtrage Librairies graphiques

A LIRE

doc/[Link]

doc/[Link]

et toujours: doc/[Link]

IHM: Fondements des Interfaces Graphiques O. Chapuis 43/43