Introduction Matlab - Complments GUI 1

Cration d'une interface graphique

Une interface graphique permet de contrler une application interactivement avec la souris ,
plutt que par lancement des commandes au clavier.

Une interface graphique comprend des menus, des boutons, des "ascenseurs", des cases
cocher, des listes de choix, des zones de texte. Exemple d'interface :

Elle permet de "cliquer" directement sur des images, des graphiques ou des objets pour
modifier la valeur d'une variable, dclencher des fonctions ou simplement faire apparatre des
informations lors d'un survol la souris.

Matlab permet d'crire assez simplement une interface graphique pour faire une application
interactive utilisable par des utilisateurs non forms Matlab.

Les notions principales d'une interface graphique sont :

- les divers objets graphiques, auxquels sont attribus des noms symboliques; ces "poignes
de main" ou "handles" permettent de les reprer dans l'interface; pour envisager par exemple une
modification dynamique (gris d'un bouton provisoirement non utilisable, changement du texte d'un
bouton, modification d'une liste de choix...)

- les proprits des objets (couleur, disposition, taille, variable associe)

- les fonctions excutes par les clic souris sur les lments ou "callbacks" (dcrites en ligne
de commande Matlab ).

Les versions actuelles de Matlab permettent de construire ces interfaces directement avec la
souris grce au GUIDE (Graphical User Interface Development Environment). Cet outil est capable
de construire des applications de trs haut niveau. Cependant, son approche est trs dlicate pour un
utilisateur peu expriment. L'approche classique par description textuelle de l'interface, moins
performante mais comprhensible, permet de se familiariser avec les principales notions.

Ce polycopi permet de faire une approche progressive du GUI; les exemples sont
oprationnels et sont tester pour se familiariser.

Pierre Bonnet - USTL

 Introduction Matlab - Complments GUI 2

I - Elements de base de l'interface graphique

Pour crer une interface, il faut disposer d'une fentre de base dans laquelle seront insrs les
lments graphiques (objets).

A noter que tout dessin graphique ou affichage d'image (rsultat de plot, mesh, imshow) peut
servir de fentre de base.

Cration d'une nouvelle fentre pour application:

fig1 = figure
Le paramtre fig1 est le handle de la fentre, c'est dire le numro de repre de la fentre
attribu par Matlab sa cration. Il est possible d'appliquer des fonctions sur cette fentre
(redimensionnement, ajout de menus, boutons, ...) en prcisant dans les fonctions le handle auquel
elle s'applique. La fentre active un instant donn a pour handle implicite gcf .

De faon gnrale, tout objet graphique se voit attribu un handle; ce handle sert de
rfrence cet objet dans l'application.

Proprits d'une fentre graphique (ou d'un objet)

get(fig1)

Les principales proprits sont : le titre, la position et la dimension dans l'cran, la couleur de
fond, la prsence et le type de menus, le redimensionnement...

Toute proprit particulire est obtenu par :

valeur_proprit = get( fig1, 'nom_proprit' )

Toute proprit (modifiable!) peut tre modifie en dfinissant une nouvelle valeur pour la
proprit considre (valeur numrique, chane, liste de valeur, tableau...)
set(fig1, 'nom_proprit' , valeur_proprit )
Ex : set( fig1 , 'Name' , 'Demo GUI' , 'NumberTitle' , 'off' );
La fentre de base est l'cran qui a pour handle "0". Par get (0 , 'ScreenSize' ), on obtient la
taille de l'cran physique de l'cran. Ces valeurs permettent de fixer la taille d'une fentre en rapport
avec la dimension physique de l'cran et d'viter de crer une application qui "dborde" de l'cran!

La taille et la position de la fentre (ou d'un objet) se fixent par modification de sa proprit
ou contrle "position", comprenant les coordonnes (Xor,Yor) du coin infrieur gauche et ses
dimensions (Xfen,Yfen):
set( fig1 , 'position' , [ 10 , 10 , 300 , 200 ])
L'ensemble des proprits modifiables d'un objet est donn par set(handle_objet) . La liste
s'affiche avec les valeurs possibles pour les diffrentes proprits; les valeurs par dfaut sont
signales par des crochets { } . Exemple :
set( fig1 )

Tout objet graphique cr pourra tre supprim par :

delete (handle_objet)

La suppression d'un objet entrane la suppression des objets qui lui sont lis (objets fils).

Pierre Bonnet - USTL

 Introduction Matlab - Complments GUI 3

Insertion d'un Objet dans la fentre

L'insertion d'un objet dans une fentre se fait par la fonction "uicontrol" , dont le premier
paramtre est le handle de la figure de rfrence. Le deuxime paramtre prcise le "style" ou type
d'objet insrer.

Exemple le "texte fixe" est l'objet le plus simple; il permet de placer un texte dans la fentre.
text1 = uicontrol( fig1 , 'style' , 'text' , 'position' , [100,150,170,30] ,...
'string' , 'Bonjour' , 'fontsize' , 15 )

Toutes les proprits de cet objet peuvent tre modifies par la commande "set" . Par
exemple, le texte en lui-mme ('string') tant une proprit, il peut tre modifi:
set( text1 , 'string' , 'Au revoir' );

Autre exemple : insertion d'un bouton-radio :

radio1 = uicontrol( fig1 , 'style' , 'radio' , 'String' , 'Option1' , 'Position' , [30,30,60,30] )

A la diffrence du "texte" , on remarque que cet objet est "cliquable" la souris, avec
modification de son aspect (cet fonction est prise en charge sans aucune programmation par
l'utilisateur).

II - Principe de l'interaction avec la souris

La presque totalit des objets de l'interface graphique (curseur, case cocher...) peut
interagir avec la souris.

La fonctionnalit la plus courante est la modification de la valeur associe l'objet (si elle
existe): pour les objets destins faire une saisie (case cocher, curseur, champ de saisie, choix de
liste...), Matlab gre automatiquement la valeur associe. Cette valeur est rcuprable par toute
partie de l'application par la fonction "get" :
valeur = get (handle_objet , 'value');

Cette fonctionnalit permet de saisir la valeur d'une variable par l'interface graphique plutt
que par le clavier.

La deuxime interaction courante est une action dclenche par le "clic" souris sur l'objet
(appuy puis relch): la fonction associe est dcrite dans la proprit "callback" de l'objet. Cette
fonction peut tre une instruction de base Matlab ou une fonction dfinie par l'utilisateur (stocke en
fichier .m)
Pierre Bonnet - USTL
 Introduction Matlab - Complments GUI 4
set( radio1 , 'callback' , 'get( radio1 , ' 'value' ' ) ' );

Remarquer que la fonction est dcrite en chane de caractres avec des " ' " en dbut et fin, ce
qui oblige doubler les " ' " pour ceux qui sont inclus dans la chane principale.

Cette description en chane permet de dfinir en callback une liste d'instruction, ce qui vite
d'crire une multitude de petites fonctions externes ddies aux callbacks.

Certains objets n'ont pas de callback (cas des figures) mais possdent d'autres actions
associes la souris. Leur emploi est identique au callback classique (description de la fonction en
liste d'instructions). Les principales sont :
WindowButtonUpFcn WindowButtonDownFcn WindowButtonMotionFcn

Exemple : rcupration des coordonnes en pixels de la souris au clic

fig1 = figure ;
set( fig1 , 'WindowButtonDownFcn' , 'get( fig1 , ' 'CurrentPoint ' ' ) ' );

Si on dsire obtenir des coordonnes dans l'espace de mesure des axes d'un graphique, plutt
qu'en pixels de la figure, il faut faire rfrence aux axes ( gca ) dans la fonction de clic :
plot( 20 , 20 , ' r+ ' ) % trac d'une croix rouge au centre
set( gcf , 'WindowButtonDownFcn' , 'get( gca , ' 'CurrentPoint' ' ) ' )

Certains objets possdent une fonction callback et une fonction associe au clic souris (par
exemple : ButtonDownFcn )

III - Principaux Objets Graphiques

Bouton poussoir

Un bouton poussoir se cre par :

bp1= uicontrol ( fig1 , 'style' , 'push' , 'position' , [10 100 60 30 ] ,...
'string' , 'Dbut' , 'callback' , 'plot(T,X)' )
Lorsqu'on clique sur le bouton poussoir, il provoque l'excution de la fonction indique dans
le 'callback'. Cette fonction peut tre une instruction de base Matlab ou une liste d'instruction, ce qui
vite d'crire une multitude de petites fonctions excutes pat les callbacks.

Un bouton-poussoir s'inactive par la commande :

set(bp1 , 'enable' , 'off' )
Par cette commande, on peut rendre inactif certaines commandes, par exemple lorsqu'il
manque des informations pour traiter un problme.

Pierre Bonnet - USTL

 Introduction Matlab - Complments GUI 5

Menus

Gnralement, les menus de la fentre d'application ne sont pas les menus standard (voir vue
ci-dessus mais des menus spcifiques. Un menu est un titre complt par une liste de sous-menu.
Les actions (callbacks)sont gnralement lancs partir des sous-menus. L'ajout de menus
spcifique se fait par :
menu1 = uimenu( fig1 , 'label' , ' Statist.' );
Un sous-menu est un lment du menu principal, donc de l'entit pre. Il est donc dclar car
menu du menu principal.
smenu1 = uimenu( menu1 , 'label' , 'Normale' , 'callback' , 'methode_normale' )
smenu2 = uimenu( menu1 , 'label' , 'Binomiale' , 'callback' , 'methode_binomiale' );
Pour enlever les menus standards de la fentre, il faut fixer la proprit "Menubar" la
valeur par dfaut menubar :
set(fig1,'menubar',menubar);

Ascenseur ou slider

L'ascenseur a pour objectif de fixer la valeur d'un paramtre entre deux bornes fixes. La
valeur prise par la variable est reprsente par la position du curseur .
slid1=uicontrol(fig1,'style','slider','position', [100,50,150,20] , 'Min' , -1 , 'Max' , 1 , ...
'callback' , 'val_variable = get(slid1 , ''value'' )' );
Les textes (variable affecte, valeurs..) ne sont pas dfinis par le slider. Il faut le complter
par des lments textes convenablement placs et paramtrs; leur valeur est modifier par le
callback du slider.

Exemple d'ascenseur avec affichage de la valeur:

fig1=figure;
texte1=uicontrol(fig1,'Style','text','String',0,'Position', [140,70,80,20],'BackGroundcolor','w');
slid1=uicontrol(fig1,'style','slider','position', [100,50,150,20] , 'Min' , -1 , 'Max' , 1 , ...
'callback' , 'set(texte1,''String'', get(slid1 , ''value'' ))' );

Pierre Bonnet - USTL

 Introduction Matlab - Complments GUI 6

Texte Editable

Permet l'utilisateur de saisir une valeur. C'est une fonction importante.

Text1 = uicontrol ( fig1 , 'style' , ' edit' , 'position', [100,50,150,20] , 'Max' , 1 , 'string' , '0' );
Gnralement, Il faut associer un texte fixe pour prciser le rle de la fentre de saisie
l'utilisateur. Exemple : le texte est plac gauche de la fentre de saisie
uicontrol ( fig1 , 'style' , ' texte' , 'position', [10,50,90,20] , 'string' , 'Valeur A' );

Liste de choix
La liste de choix ou pop-up menu permet de slectionner une valeur parmi une liste.
Gnralement, cette valeur est un texte . La valeur retourne lors du choix (paramtre 'Value') est le
numro de ligne du choix.
choix1 = uicontrol ( gcf , 'Style' , 'popup' , 'String' , 'Pierre|Paul|Jacques' , 'Position' , [10 10 100 80] );

La liste des texte est modifiable aprs la cration de la fentre de choix, en modifiant la
proprit 'String' .

Bouton Radio

Le bouton Radio permet de fixer un paramtre binaire ( 0 ou 1 ), reprsentant souvent un

choix ou une option dans une application.
fig1 = figure ;
radio1 = uicontrol( fig1 , 'style' , 'Radio' , 'Position' , [ 30 20 130 25 ] , 'String' , ' OptionA ' );
radio2 = uicontrol( fig1 , 'style' , 'Radio' , 'Position' , [ 30 45 130 25 ] , 'String' , ' OptionB ' );
uicontrol( fig1 , 'style' , 'Text' , 'Position' , [ 30 70 130 30 ] , 'String' , ...
' Choix des Options ' , 'FontWeight', 'bold' );

Pierre Bonnet - USTL

 Introduction Matlab - Complments GUI 7
Remarquer que les choix ne sont pas exclusifs (chaque choix peut tre slectionner). Pour
obtenir l'exclusion mutuelle, il faut agir sur les valeurs de choix par les callbacks.
set( bradio1 , ' Value' , 1 );
set( radio1 , 'callback' , 'set( radio2 , ' ' Value' ' , 0 ) ' ) ;
set( radio2 , 'callback' , 'set( radio1 , ' ' Value' ' , 0 ) ' ) ;

Cadre

Le cadre permet de dessiner un rectangle de prsentation (par exemple regroupement de

diverses entits graphiques dans un rectangle).

Le cadre se dclare par :

cadre1 = uicontrol ( fig1 , 'style' , 'frame' , 'position' , [ posX ,posY,tailleX,tailleY])

Graphiques

Les graphiques se dessinent dans une partie de la fentre dfinie par la fonction 'subplot',
dont les paramtres sont diffrents de l'emploi classique (division de la fentre en sous-fentres de
taille gale)

subplot( 'Position' , [ Xpos Ypos Xtaille Ytaille])

Les paramtres se dfinissent en % de la fentre (redimensionnement automatique des zones

graphiques avec le redimensionnement de la fentre). Il est possible d'ouvrir plusieurs zones
graphiques dans une mme fentre. Les zones ne doivent pas se chevaucher, sous peine
d'effacement de la zone situe sous la nouvelle zone.
fig1 = figure ;
z1 = subplot ( 'Position' , [ .05 .1 .4 .4 ] ) ;
plot ( sin( 0: 10))
z2 = subplot ( 'Position' , [ .55 .1 .4 .4 ] ) ;
plot ( exp( 0 : 10))

Pierre Bonnet - USTL