Introduction à la programmation des interfaces graphiques

Améliorer sa programmation sous MATLAB

Cet article est une introduction au développement des interfaces graphiques sous MATLAB.

Contenu : cet article présente les objets graphiques (hiérarchie, identifiant, propriétés), l'outil GUIDE et la programmation à la main des interfaces graphiques.

Public visé : cet article est destiné aux débutants en développement d'interfaces graphiques sous MATLAB.

Votre avis et vos suggestions sur cet article m'intéressent !
Alors après votre lecture, n'hésitez pas :
6 commentaires Donner une note à l'article (4)

Article lu   fois.

L'auteur

Profil ProSite personnelPage personelle de Jérôme Briot (Dut)

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

Avant-propos

Les interfaces graphiques (ou interfaces homme-machine) sont appelées GUI (pour Graphical User Interface) sous MATLAB. Elles permettent à l'utilisateur d'interagir avec un programme informatique, grâce à différents objets graphiques (boutons, menus, cases à cocher…). Ces objets sont généralement actionnés à l'aide de la souris ou du clavier.

Malgré le fait que les interfaces graphiques semblent secondaires par rapport au développement du coeur d'une application, elles doivent néanmoins être conçues et développées avec soin et rigueur.

Leur efficacité et leur ergonomie sont essentielles dans l'acceptation et l'utilisation de ces outils par les utilisateurs finaux.

Une bonne conception et un développement maitrisé permettent également d'en assurer une meilleure maintenabilité.

I. Les objets graphiques

Avant d'aborder le développement des interfaces graphiques proprement dit, faisons un rapide tour d'horizon des objets disponibles.

I-A. Présentation

Sous MATLAB, les objets graphiques sont classés selon une hiérarchie parent-enfant :

Image non disponible

I-A-1. Objet Root

Au sommet de la hiérarchie se trouve l'objet Root. Cet objet est invisible (on peut se le représenter comme étant la surface de l'écran de l'ordinateur). L'utilisateur n'interagit que très rarement avec cet objet.

I-A-2. Objets Figure

Les objets Figure sont les conteneurs visibles où sont disposés tous les autres objets enfants. Ces objets sont couramment appelés « fenêtres ». Plusieurs objets Figure peuvent être ouverts simultanément et peuvent éventuellement communiquer entre eux.

Image non disponible

I-A-3. Objets Axes

Les objets Axes sont les zones de traçage des graphiques (2D ou 3D). Un objet Figure peut contenir plusieurs objets Axes simultanément.

Image non disponible

Les objets Axes sont parents d'objets graphiques qui ne font pas l'objet de ce tutoriel.
Voir la documentation MATLAB pour plus d'informations.

I-A-4. Objets UI

Au même niveau hiérarchique que les objets Axes, on trouve les objets UI (pour User Interface). Certains de ces objets (comme les boutons, les menus, les cases à cocher) permettent à l'utilisateur d'interagir avec l'interface graphique grâce à la souris ou au clavier. D'autres objets (comme les panels, les tables…) servent à la mise en forme de l'interface graphique.

Image non disponible

I-B. Gestion

A la création d'un objet, MATLAB lui attribue automatiquement un identifiant (ou handle), sous la forme d'une valeur numérique unique qui peut être stockée dans une variable. Ceci permet de retrouver à tout moment un objet graphique au cours du fonctionnement d'une interface. Cet identifiant existe tant que l'objet existe. Dès que l'objet est détruit, cet identifiant disparaît.

Voici par exemple les identifiants renvoyés lors de la création de divers objets :

 
Sélectionnez
>> h = figure

h =

     1

>> ax = axes

ax =

  176.0034

>> u = uicontrol

u =

  177.0034

Quelques fonctions MATLAB permettent de gérer certains identifiants particuliers :

  • gca : récupère l'identifiant de l'objet Axes courant ;
  • gcbf : récupère l'identifiant de l'objet Figure où se trouve l'objet graphique dont l'action est en cours ;
  • gcbo : récupère l'identifiant de l'objet graphique dont l'action est en cours ;
  • gcf : récupère l'identifiant de l'objet Figure courant ;
  • gco : récupère l'identifiant de l'objet graphique courant.

Voir la documentation MATLAB pour plus d'informations sur ces fonctions.

I-C. Propriétés

Chaque objet graphique possède des propriétés (position, couleur, action, etc.) Elles sont définies à la création de l'objet et peuvent être modifiées dynamiquement au cours du fonctionnement de l'interface graphique. La difficulté principale consiste à apprendre et à maîtriser ces nombreuses propriétés.

Ces propriétés peuvent être récupérées et modifiées en utilisant l'identifiant de l'objet et les fonctions get et set.

Voici les liens vers la documentation en ligne des propriétés des principaux objets :

II. Méthodes de développement

Le développement des interfaces graphiques peut être séparé en deux parties :

  • gestion de la mise en place et des propriétés des objets ;
  • programmation des interactions avec les objets.

Il existe deux méthodes de développement des interfaces graphiques sous MATLAB. La première utilise un outil graphique dédié et la seconde nécessite de programmer entièrement à la main. Nous allons donc aborder chaque méthode dans les chapitres suivants en les illustrant avec un exemple simple.

Pour ce faire, nous allons prendre l'exemple d'une interface graphique contenant un objet Figure, un objet Axes et un objet Uicontrol de type Pushbutton comme le montre la figure ci-dessous.

Image non disponible

Lorsque l'utilisateur clique sur l'objet Pushbutton, l'objet Axes change de couleur de façon aléatoire.

Vous trouverez les codes MATLAB correspondants dans cette archive : Exemples.zip

II-A. L'outil GUIDE

Depuis la version 5.0 (1997), MATLAB possède un outil dédié à la création des interfaces graphiques appelé GUIDE (pour Graphical User Interface Development Environment).

II-A-1. Présentation

Le GUIDE est un constructeur d'interface graphique qui regroupe tous les outils dont le programmeur à besoin pour créer une interface graphique de façon intuitive. Il s'ouvre, soit en cliquant sur l'icône Image non disponible, soit en tapant guide dans le Command Window de MATLAB.

Le placement des objets est réalisé par sélection dans une boite à outils. Leur mise en place et leur dimensionnement se font à l'aide de la souris.

Image non disponible
Fenêtre principale du GUIDE


Un double-clique sur un objet permet de faire apparaître le Property Inspector où les propriétés des objets sont facilement éditables. Leurs modifications et la visualisation de ces modifications sont immédiates.

Image non disponible
Property Inspector


Le GUIDE possède également des outils pour gérer l'alignement des objets et pour créer des barres d'outils ou des menus.

Une fois l'interface graphique terminée, son enregistrement donne deux fichiers portant le même nom mais dont les deux extensions sont .fig et .m.

Le fichier .fig contient la définition des objets graphiques (positions et propriétés). Ce fichier peut être ouvert ultérieurement avec le GUIDE pour modifier les objets graphiques.

Le fichier .m contient les lignes de code qui assurent le fonctionnement de l'interface graphique (actions des objets). Ce fichier peut être édité dans le MATLAB Editor pour y ajouter des actions à la main. C'est ce fichier qui doit être lancé pour utiliser l'interface graphique.

II-A-2. Exemple

La vidéo suivant montre la mise en place de tous les objets et de leurs propriétés avec le GUIDE.


Cliquez pour visualiser la vidéo



Lors de l'enregistrement, le GUIDE génère deux fichiers :

  • un fichier .fig (non éditable) contenant les objets graphiques Figure, Axes et Pushbutton ;
  • un fichier .m contenant le code du fonctionnement de l'interface graphique.

Il reste ensuite à ajouter au fichier .m, le code correspondant à l'action à effectuer lors du clique sur le bouton, à savoir le changement de couleur de l'objet Axes.

Dans notre cas, il faut ajouter la ligne suivante :

 
Sélectionnez
set(handles.axes1, 'color', rand(1,3));

Elle se place à la fin du code dans la fonction pushbutton1_Callback

Le contenu du fichier .m créé par le GUIDE devient donc :

 
Sélectionnez
function varargout = exemple_guide(varargin)
% EXEMPLE_GUIDE MATLAB code for exemple_guide.fig
%      EXEMPLE_GUIDE, by itself, creates a new EXEMPLE_GUIDE or raises the existing
%      singleton*.
%
%      H = EXEMPLE_GUIDE returns the handle to a new EXEMPLE_GUIDE or the handle to
%      the existing singleton*.
%
%      EXEMPLE_GUIDE('CALLBACK',hObject,eventData,handles,...) calls the local
%      function named CALLBACK in EXEMPLE_GUIDE.M with the given input arguments.
%
%      EXEMPLE_GUIDE('Property','Value',...) creates a new EXEMPLE_GUIDE or raises the
%      existing singleton*.  Starting from the left, property value pairs are
%      applied to the GUI before exemple_guide_OpeningFcn gets called.  An
%      unrecognized property name or invalid value makes property application
%      stop.  All inputs are passed to exemple_guide_OpeningFcn via varargin.
%
%      *See GUI Options on GUIDE's Tools menu.  Choose "GUI allows only one
%      instance to run (singleton)".
%
% See also: GUIDE, GUIDATA, GUIHANDLES

% Edit the above text to modify the response to help exemple_guide

% Last Modified by GUIDE v2.5 16-Nov-2012 21:56:29

% Begin initialization code - DO NOT EDIT
gui_Singleton = 1;
gui_State = struct('gui_Name',       mfilename, ...
                   'gui_Singleton',  gui_Singleton, ...
                   'gui_OpeningFcn', @exemple_guide_OpeningFcn, ...
                   'gui_OutputFcn',  @exemple_guide_OutputFcn, ...
                   'gui_LayoutFcn',  [] , ...
                   'gui_Callback',   []);
if nargin && ischar(varargin{1})
    gui_State.gui_Callback = str2func(varargin{1});
end

if nargout
    [varargout{1:nargout}] = gui_mainfcn(gui_State, varargin{:});
else
    gui_mainfcn(gui_State, varargin{:});
end
% End initialization code - DO NOT EDIT


% --- Executes just before exemple_guide is made visible.
function exemple_guide_OpeningFcn(hObject, eventdata, handles, varargin)
% This function has no output args, see OutputFcn.
% hObject    handle to figure
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
% varargin   command line arguments to exemple_guide (see VARARGIN)

% Choose default command line output for exemple_guide
handles.output = hObject;

% Update handles structure
guidata(hObject, handles);

% UIWAIT makes exemple_guide wait for user response (see UIRESUME)
% uiwait(handles.figure1);


% --- Outputs from this function are returned to the command line.
function varargout = exemple_guide_OutputFcn(hObject, eventdata, handles) 
% varargout  cell array for returning output args (see VARARGOUT);
% hObject    handle to figure
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)

% Get default command line output from handles structure
varargout{1} = handles.output;


% --- Executes on button press in pushbutton1.
function pushbutton1_Callback(hObject, eventdata, handles)
% hObject    handle to pushbutton1 (see GCBO)
% eventdata  reserved - to be defined in a future version of MATLAB
% handles    structure with handles and user data (see GUIDATA)
set(handles.axes1, 'color', rand(1,3));

II-B. Programmation à la main

II-B-1. Présentation

Il est possible de programmer une interface graphique entièrement à la main sous MATLAB. Bien que cette seconde méthode semble beaucoup moins intuitive que celle utilisant le GUIDE, il est important de l'aborder dans cet article.

Du fait du nombre important d'objets et surtout du nombre des propriétés associées, la programmation « à la main » est généralement déroutante au début. Il est nécessaire de se servir de la documentation MATLAB et de savoir en tirer les bonnes informations.

On peut également s'aider du GUIDE et du Property Inspector pour explorer les propriétés des différents objets.

Le code peut être écrit dans un ou plusieurs fichiers .m (conception modulaire) et l'ouverture de l'interface graphique se fait en lançant simplement le fichier .m principal comme une fonction MATLAB.

II-B-2. Exemple

La même interface graphique que précédemment mais programmée « à la main » est écrite dans un seul fichier .m.

Ce fichier contient à la fois la gestion des objets et de leurs actions.

 
Sélectionnez
function exemple_main
%EXEMPLE_MAIN Exemple d'une interface graphique codée à la main

% Création de l'objet Figure
fig = figure('units', 'pixels', ...
    'position', [520 380 300 200], ...
    'name', 'example_main');

% Création de l'objet Uicontrol Pushbutton
uicontrol('style', 'pushbutton', ...
    'units', 'pixels', ...
    'position',[75 10 150 20], ...
    'callback', @cb);

% Création de l'objet Axes
axes('units', 'pixels', ...
    'position', [25 40 250 150], ...
    'tag','axes1');

% Stockage des identifiants utiles
handles = guihandles(fig);
guidata(fig,handles)

function cb(obj,event)
% Fonction associée au Callback de l'objet Pushbutton
% obj : identifiant de l'objet Pushbutton
% event : événement liés à l'objet Pushbutton

% Récupération des identifiants utiles
fig = get(obj,'parent');
handles = guidata(fig);

% Modification de la couleur de l'objet Axes
set(handles.axes1, 'color', rand(1,3));

V. Conclusion

Les interfaces graphiques sous MATLAB sont constituées d'objets graphiques répartis selon une hiérarchie parent-enfant. Chacun de ces objets possède de nombreuses propriétés que le programmeur doit apprendre à maîtriser.

De part son utilisation visuelle et intuitive, le GUIDE est un bon outil pour débuter la programmation des interfaces graphiques sous MATLAB.

Seul bémol, le contenu des fichiers générés automatiquement est assez déroutant au début (certaines actions sont cachées). La génération automatique du code permet certes d'éviter les erreurs de syntaxe (généralement périlleuses à corriger pour le débutant), mais elle masque une grande partie du code. La compréhension du fonctionnement interne de l'interface demande donc au final une lecture attentive de la documentation MATLAB.

On peut aussi noter, même si c'est plus anecdotique, que la compatibilité des fichiers .fig (qui sont en fait des fichiers .mat) n'est pas assurée entre les différentes versions de MATLAB.

La programmation des interfaces graphiques à la main est moins intuitive et demande plus d'efforts qu'en utilisant le GUIDE.

En contre partie, le programmeur a le contrôle total sur le code. Il n'est pas limité par les automatismes du GUIDE.

Le codage à la main permet entres autres :

  • d'utiliser une programmation modulaire (lisibilité et maintenabilité améliorées) ;
  • d'utiliser des fonctions imbriquées (nested functions) comme proposé dans ce tutoriel ;
  • d'utiliser des objets non documentés ou du code Java pour dépasser les limites fixées par MATLAB (voir Undocumented MATLAB).

Vous pouvez poser vos questions relatives au développement des interfaces graphiques sous MATLAB sur le forum dédié de Developpez.com : MATLAB - Interfaces Graphiques

Votre avis et vos suggestions sur cet article m'intéressent !
Alors après votre lecture, n'hésitez pas : 6 commentaires Donner une note à l'article (4)

Remerciements

L'auteur tient à remercier Fleur-Anne.Blain, Caro-Line, Winjerome, et duf42 pour la correction orthographique et leur aide pendant la rédaction de cet article.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Autres articles sur les Interfaces Graphiques en MATLAB:
Présentation des objets graphiques
Développement efficace des interfaces graphiques
Introduction à la programmation des interfaces graphiques
  

Copyright © 2007-2014 Jérôme Briot. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.