Le GUIDE ou Graphical User Interface Development Environment en anglais est un environnement de développement d’interfaces graphiques pour MATLAB. Les interfaces graphiques sont programmées de façon à répondre aux événements. Contrairement à la programmation traditionnelle, les événements générés par l’interface utilisateur (qui sont causés par l’interaction de l’utilisateur avec celui-ci) dirigent le comportement du programme.

Interface GUIDE
Interface GUIDE

 

Gestion des événements

Dans GUIDE, chaque événement généré par l’interface graphique génère un appel de fonction. Cette fonction s’appelle : « Callback ». Par exemple, un clic sur un bouton génère un événement qui appelle la fonction liée à ce bouton. La même source d’événements peut générer plusieurs types d’événements. Le bouton peut générer un événement lorsqu’il est appuyé, lorsqu’il est relâché et lors d’un clic. Cliquer sur un bouton génère ainsi les trois événements.

Le code du programme réside principalement dans les fonctions que les sources d’événements appellent. Le programmeur indique au GUIDE les événements pour lesquels il désire effectuer une réponse. GUIDE place une déclaration du Callback dans le fichier *.m pour chaque fonction. Le programmeur ajoute ensuite son code après la déclaration. Le code sera exécuté à partir de la déclaration jusqu’à la ligne précédant la prochaine déclaration.

 

Faire un programme Simple

Je vous propose un cheminement simple démontrant le style de programmation utilisé dans GUIDE.

Le principe est le suivant :

  • Créer l’interface grâce à l’éditeur du GUIDE;
  • Générer un fichier .fig pour la figure et un fichier .m pour le code;
  • Compléter le fichier .m contenant le code.

 

Démarrer GUIDE

Pour démarrer GUIDE, taper GUIDE dans la fenêtre de commande de MATLAB.

Démarrage GUIDE

 

Une fenêtre « GUIDE Quick Start » s’ouvrira vous donnant le choix entre quatre modèles. Choisir le premier et cliquer sur «Ok», car il n’est pas prédéfini et ne contient aucun objet. Les autres vous seront utiles lorsque vous comprendrez davantage le processus.

La fenêtre de l’interface graphique s’ouvrira. C’est dans cette fenêtre que vous placerez les objets avec lesquels l’utilisateur va interagir.

 

Présentation de l’interface du GUIDE

Ci dessous, vous avez l’interface du GUIDE:

Présentation de l’interface de GUIDE

 

À gauche de cette fenêtre se trouve la barre à outils des objets de l’interface.

 

Tailler la figure

Pour modifier la taille de la figure, vous pouvez utiliser la souris en déplaçant le coin en bas à droite de la fenêtre ou utiliser l’explorateur de propriétés (Position).

 

Ajouter des composants

Pour ajouter un composant, il suffit d’appuyer sur le bouton correspondant à l’objet voulu, et en traçer un cadre sur la figure. L’objet sera de la taille du cadre dessiné. Ici on place un bouton poussoir simple. Ici on place un bouton poussoir simple:

Placer un bouton

 

Ensuite pour changer la taille on n’a qu’à enfoncer le bouton gauche de la souris lorsque le curseur se trouve sur le contour de l’objet (le curseur change d’apparence lorsque vous êtes au bon endroit), traîner le curseur et relâcher à la nouvelle position. Si les points noirs aux coins de l’objet ne sont pas visibles, vous devrez cliquer sur l’objet avant d’essayer cette opération.

 

Définir les propriétés de chaque composant

Vous pourrez constater que le texte écrit sur le bouton est en Anglais. Ce texte fait partie des propriétés par défaut du bouton. Double-cliquer sur le bouton.

Propriété du bouton

 

Vous avez maintenant accès aux propriétés modifiables du bouton dans la fenêtre « Inspector ». Parcourrez cette liste jusqu’à atteindre « String » du coté de la liste. La valeur du coté droit est le texte qui apparaît sur le bouton. Changer ce texte pour : « Bouton » et appuyer s »Entrée ». Regarder maintenant le texte sur le bouton.

Vous pouvez ainsi changer les autres propriétés de cette liste. Tous les objets ont une liste de propriétés modifiables à la main, comme on vient de le faire, ou bien par programmation. Les propriétés les plus important pour chaque composant sont : le « String », le « Tag » et le « Callback ».

Insérer maintenant un texte statique et changer aussi sa propriété « String » pour « Tension : »

 

Sauvegarde du GUIDE

Sauvegarder maintenant votre fichier *.fig.

Vous verrez maintenant apparaître un fichier *.m (contient le code) portant le même nom que le fichier *.fig (la figure).

Contenu du .m

Ci dessous les 5 parties du fichier M:

Entête du fichier
  • A éditer pour formaliser l’aide (help);
Initialisation code
  • Ne pas toucher
OpeningFcn
  • Appelée après la création de tous les objets, avant de rendre visible la figure.
OutputFcn
  • Renvoie à la ligne de commande les sorties qui ont été générées par l’exécution de la figure.
Callbacks des composants
  • Exécutés sur interaction avec utilisateurs.

 

Je vous conseille le tutoriel sur les Callbacks sous MATLAB

 

Callback du bouton

Vers la fin de notre programme, vous pourrez trouver le Callback qui a été généré pour un clic du bouton poussoir simple.

% --- Executes on button press in pushbutton2.
function pushbutton1_Callback(hObject, eventdata, handles)
% hObject handle to pushbutton2 (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)

 

La déclaration commence par :

function pushbutton1_Callback(hObject, eventdata, handles)

Ajouter après les commentaires la ligne de code :

set(handles.text1,’String’,’Tension : 0.000V’);

Cette ligne de code changera la propriété « String » du texte statique « text1 » pour la valeur « Tension : 0.000V » lorsque le bouton « Button » sera cliqué.

Sauvegarder le programme.

 

Activer la figure

Pour le lancer figure, cliquer sur le bouton Run tel qu’illustré dans l’image suivante :

Run du GUI

 

Une fenêtre s’ouvrira. C’est l’IHM de votre programme. Vous pouvez identifier les éléments que vous avez placés. Évidemment ce n’est pas très beau. Appuyer tout de même sur le bouton. Le texte changera comme voulu.

Résultat du test

 

Si vous appuyez une deuxième fois sur le bouton il n’y a aucun effet car la propriété a déjà été changée et le code ne fait que le changer au même texte.

 

Ajouter un axe

Déplacer maintenant le bouton et le texte vers le côté et insérer un axe à droite comme suit :

Interface test

 

Ensuite modifier le code du callback en ajoutant les quatre lignes qui suivent :

axes(handles.axes1)
x=0 :1 :10;
y=x.^2;
plot(x,y);

Ce code permet de tracer une courbe y=x² sur l’axe que nous avons ajouter précédemment.

 

Maintenant votre code devrait ressembler à ceci :

% --- Executes on button press in pushbutton2.
function pushbutton2_Callback(hObject, eventdata, handles)
% hObject handle to pushbutton2 (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)
set(handles.text2,'String','Tension : 0.000V');
% Le code suivant dessine yn graphe de y = x2 dans l'axe
axes(handles.axes1)
x=0 :1 :10;
y=x.^2;
plot(x,y);

 

Sauvegarder et exécuter-le. Le code dessine un graphe de y = x2 dans l’axe.

 

Placer un autre bouton poussoir et changer le texte pour : « Quitter » comme illustré ci-dessous :

 

Ensuite modifier le code du Callback correspondant au bouton « Quitter », en ajoutant la ligne suivante :

close(figure1);

 

Votre code doit ressemblé à :

% --- Executes on button press in pushbutton2.
function pushbutton2_Callback(hObject, eventdata, handles)
% hObject handle to pushbutton2 (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)
set(handles.text2,'String','Tension : 0.000V');
% Le code suivant dessine yn graphe de x2 dans l'axe
axes(handles.axes1)
x=0 :1 :10;
y=x.^2;
plot(x,y);

% --- Executes on button press in pushbutton3.
function pushbutton3_Callback(hObject, eventdata, handles)
% hObject handle to pushbutton3 (see GCBO)
% eventdata reserved - to be defined in a future version of MATLAB
% handles structure with handles and user data (see GUIDATA)
close(figure1)

 

Faire un programme intermédiaire

Nous cherchons maintenant à visualiser une somme de sinusoïdes dans le temps et dans le domaine fréquentiel. Commencer par produire la figure suivante avec deux axes, trois boîtes d’édition de texte, un bouton poussoir simple et des panneaux de texte pour le texte qui apparaît.

 

Ensuite, dans le Callback « function pushbutton1_Callback(hObject, eventdata, handles) » du bouton poussoir qui est déclaré par défaut, insérer le code suivant après les commentaires. S’assurer de bien le recopier.

% Recueillir les données entrées par l'utilisateur
f1 = str2double(get(handles.edit1,'String'));
f2 = str2double(get(handles.edit2,'String'));
t = eval(char(get(handles.edit3,'String')));

% Calculer la transformée de Fourier rapide de la fonction
x = sin(2*pi*f1*t) + sin(2*pi*f2*t);
y = fft(x,512);
m = y.*conj(y)/512;
f = 1000*(0 :256)/512;

% Créer le graphe du spectre de la fonction
axes(handles.axes1)
plot(f,m(1 :257))
set(handles.axes1,'XMinorTick','on')
grid on

% Créer le graphe de la fonction dans le temps
axes(handles.axes2)
plot(t,x)
set(handles.axes2,'XMinorTick','on')
grid on

Et appuyer ensuite sur le bouton d’activation de la figure (après l’avoir sauvegardée). Vous devriez avoir le résultat suivant :

Si vous n’avez pas obtenu ce résultat et que MATLAB rapporte des erreurs, il se peut que les références aux objets axes1, axes2, edit1, edit2, edit3 soient différentes de celles qui sont dans votre figure. Il faudra ajuster le nom de ces références dans le code pour qu’elles soient identiques à la propriété « TAG » des objets respectifs. Par exemple, si la valeur de la propriété « TAG » de votre axe du temps est « axes3 », il faudra changer les références à « axes2 » dans le code pour qu’il réfère au bon objet, soit : « axes3 ». Il en est de même pour les autres objets. Lorsque vous créez un objet en GUIDE, MATLAB lui assigne une référence (propriété « TAG ») unique. Si vous l’enlevez et que vous le remplacer par un nouveau, ce-dernier aura une référence différente, même si c’est le seul objet dans la figure.

Vous pouvez obtenir de l’aide sur les fonctions FFT et CONJ en inscrivant help fft et help conj respectivement dans la fenêtre de commande de MATLAB .

Gestion des données

Vous avez certainement vu la déclaration d’un callback écrite comme suit :

function pushbutton1_Callback(hObject, eventdata, handles)

La structure de données « handles » est une structure accessible aux utilisateurs. Elle sert à conserver les données propres au programme. Les données placées dans celle-ci sont visibles à tous les callback.  La déclaration d’une nouvelle variable dans la structure « handles » est simple. On n’a qu’à l’initialiser comme suit :

handles.maVariable = 10;

Avant la fin du callback ou cette déclaration est faite, il faut mettre à jour la structure avec la déclaration suivante :

guidata(hObject, handles);

Si on ne la met pas à jour, la variable maVariable sera détruite à la sortie du callback. En le mettant à jour, on peut le récupérer et s’en servir dans un autre callback. À chaque fois que l’on change cette variable, on doit mettre à jour la structure « handles » pour le sauvegarder.

Vous pouvez maintenant l’utiliser comme suit à l’intérieur de vos fonctions :

handles.maVariable = handles.maVariable +10;

guidata(hObject, handles);

 

Pour en savoir plus, sur la gestion données dans une interface graphique, nous vous conseillons ce tutoriel : Ici