Introduction à la programmation des interfaces graphiques

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.

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.

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

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.

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.

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 , 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.

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.

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.

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

Flash n'est pas installé, Flash n'est pas à jour 7.0.0, cliquez sur l'image ci-dessous.

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 :

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 :

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));

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.

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.

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));