Comment faire une interface GUI comme celle ci ? (voir sujet)

Invité · 25/06/2009, 09h27

Bonjour,

J'ai fais un peu le tour du forum mais j'ai pas trouver exactement ce que je voulais.

En fait je voudrais faire une interface comme celle en image joint, pour exploiter mon programme qui est assez complexe. L'utilisateur entre des données (specification de laser et de scanner) et ensuite peut exploiter les résultats dans différentes pages dédies à une partie de la résolution.

Le problème c'est que je commence le GUI et que je ne sais pas quel moyen serait le plus simple et le plus efficace. Pour l'instant j'ai retenue 2 possibilité: uitabpanel qui a l'air d'etre puissant mais aussi super compliqué ou faire apparaitre et disparaitre des panels.

De plus j'aimerais le faire avec GUIDE.

Avez vous des idées ?

**sandrillon** · 25/06/2009, 10h11

Je suis en train de développer une interface un peu comme la tienne. J'ai utiliser des onglets, créer à partir d'un fichier trouvé sur matlab central : simpletab.
Tu garde la même structure pour ce qui est du fonctionnement des onglets, et tu rajoute tout ce qu'il te faut.

**Caro-Line** · 25/06/2009, 10h19

Envoyé par bizounours94

De plus j'aimerais le faire avec GUIDE.

Pourquoi ?
A mon avis ça doit être difficile de placer les objets les uns par dessus les autres dans GUIDE, non ? (enfin je dis ça je ne l'utilise pas).

As-tu été lire les différents tutoriels sur le sujet ?

Mais bon c'est sur que les onglets sous MATLAB ce n'est pas ce qu'il y a de plus évident.

Invité · 25/06/2009, 10h29

@caroline
Sous guide parce que je trouve ça simple, c'est un peu du WYSIWYG et c'est cool quand ça fait qu'une journée que tu as rencontré le GUI.

Sinon oui j'ai été voir les tuto, et j'en ai trouvé des super mega giga bien chez http://blinkdagger.com/matlab
mais y'en a pas qui traitent de plusieurs interfaces

@ sandrillon
Sinon, effectivement simpletab a l'air d'être a mi-chemin entre les 2 solutions que j'avais trouvé, je vais regarder un peu plus en detail. J'aimerais bien voir ce que tu as réussi à faire avec

**duf42** · 25/06/2009, 10h38

Franchement je pense que pour développer ton interface tu aurais plutôt intérêt à te passer de GUIDE, d'autant plus si tu n'es pas encore très familier avec les interfaces via MATLAB: tu vas gagner un peu de temps pour la mise en place des objets mais après tu risques d'en perdre pas mal (et des cheveux avec) pour la gestion de l'interface et des variables...

Invité · 25/06/2009, 11h17

oué enfin ça n'a pas l'air évident de le faire sans guide ... ça me fait un peu peur de tout faire à l'aveugle

Invité · 25/06/2009, 13h34

Bon, je veux bien essayer sans le GUIDE, mais j'utilise quoi a ce moment la ?

**duf42** · 25/06/2009, 14h08

Tu peux utiliser ce tutoriel pour commencer

Invité · 25/06/2009, 14h26

a priori c'est plutôt la méthode SETAPPDATA, GETAPPDATA et FINDOBJ qui serait adapté dans mon cas nan ?

PS: finalement c'est pas si dur, mais bon c'est quand même beaucoup plus long de créer un bouton

**duf42** · 25/06/2009, 15h24

A priori oui

Tu perds un peu de temps à créer tes composants mais au final tu comprendras mieux le fonctionnement de ton interface et tu éviteras bien des problèmes

Invité · 25/06/2009, 16h08

d'ailleurs pourquoi ça, ça ne marche pas ? j'ai l'impression que les tag ne servent a rien en manuel ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
function calculatrice
 
figure ('units','pixels',...
        'Position',[500 200 800 600],...
        'color',rand(1,3),...
        'tag','fenetre');
 
uicontrol('style','Text',...
          'string','0',...
          'fontsize',20,...
          'units','pixels',...
          'Position',[650 300 100 50 ],...
          'tag','resultat');
 
uicontrol('style','edit',...
        'string','0',...
        'fontsize',20,...
        'Units','pixels',...
        'position',[50 300 100 50],...
        'tag','donnee1');
 
uicontrol('style','edit',...
        'string','0',...
        'fontsize',20,...
        'Units','pixels',...
        'position',[300 300 100 50],...
        'tag','donnee2');
 
uicontrol('style','Text',...
          'string','+',...
          'fontsize',20,...
          'units','pixels',...
          'Position',[175 300 100 35 ],...
          'tag','+');
 
uicontrol('style','Text',...
          'string','=',...
          'fontsize',20,...
          'units','pixels',...
          'Position',[500 300 100 35 ],...
          'tag','=');
 
uicontrol('style','pushbutton',...
        'string','Add',...
        'fontsize',20,...
        'Units','pixels',...
        'position',[400 150 100 50],...
        'tag','add',...
        'callback',@addition);
 
function addition(objet,event)
a=get(donnee1,'string');
b=get(donnee2,'string');
c= str2double(a) + str2double(b);
set('resultat','string',double2str(c));
guidata(hObject, handles);

Vais je pouvoir utiliser tout les truc cool que j'ai vu sur des tutos qui se programmaient à partir du fichier .m editer par GUIDE, pcq j'ai l'impression que ça ne se code pas du tout pariel.

Est ce que je peux melanger les 2, genre faire du GUIDE et rajouter des bouton par uicontrol('style',.....)

**duf42** · 25/06/2009, 16h29

Vais je pouvoir utiliser tout les truc cool que j'ai vu sur des tutos qui se programmaient à partir du fichier .m editer par GUIDE

Oui sans aucun problème.

Est ce que je peux melanger les 2, genre faire du GUIDE et rajouter des bouton par uicontrol('style',.....)

Oui aussi même si personnellement je trouve que c'est plutôt une source d'ennui (ca n'engage que moi)

d'ailleurs pourquoi ça, ça ne marche pas ? j'ai l'impression que les tag ne servent a rien en manuel ...

La différence c'est qu'avec GUIDE la structure handles est générée automatiquement à partir des Tag alors que "à la main", il faut la créé soit même, par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
handles.resultat = uicontrol('style','Text',...
          'string','0',...
          'fontsize',20,...
          'units','pixels',...
          'Position',[650 300 100 50 ],...
          'tag','resultat');

Et n'oublie pas la ligne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

guidata(handles.figure, handles);

à la fin de la création de ta figure (et de ta structure handles)
ainsi que la ligne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
handles = guidata(obj);

Ce qui devrait donner pour toi:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
function calculatrice
 
handles.fenetre = figure ('units','pixels',...
        'Position',[500 200 800 600],...
        'color',rand(1,3),...
        'tag','fenetre');
 
handles.resultat = uicontrol('style','Text',...
          'string','0',...
          'fontsize',20,...
          'units','pixels',...
          'Position',[650 300 100 50 ],...
          'tag','resultat');
 
handles.donnee1= uicontrol('style','edit',...
        'string','0',...
        'fontsize',20,...
        'Units','pixels',...
        'position',[50 300 100 50],...
        'tag','donnee1');
 
handles.donnee2= uicontrol('style','edit',...
        'string','0',...
        'fontsize',20,...
        'Units','pixels',...
        'position',[300 300 100 50],...
        'tag','donnee2');
 
handles.plus= uicontrol('style','Text',...
          'string','+',...
          'fontsize',20,...
          'units','pixels',...
          'Position',[175 300 100 35 ],...
          'tag','+');
 
handles.equal= uicontrol('style','Text',...
          'string','=',...
          'fontsize',20,...
          'units','pixels',...
          'Position',[500 300 100 35 ],...
          'tag','=');
 
handles.add= uicontrol('style','pushbutton',...
        'string','Add',...
        'fontsize',20,...
        'Units','pixels',...
        'position',[400 150 100 50],...
        'tag','add',...
        'callback',@addition);
 
guidata(handles.fenetre, handles);
 
function addition(objet,event)
 
handles = guidata(objet);
 
a=get(handles.donnee1,'string');
b=get(handles.donnee2,'string');
c= str2double(a) + str2double(b);
set(handles.resultat,'string',double2str(c));
guidata(objet, handles);

**Caro-Line** · 25/06/2009, 16h42

Envoyé par duf42

La différence c'est qu'avec GUIDE la structure handles est générée automatiquement à partir des Tag alors que "à la main", il faut la créé soit même

Il me semble qu'il y a GUIHANDLES pour faire ça justement.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
h=uicontrol('tag','truc');
handles=guihandles(gcf)

crée bien handles.truc=le handle de mon pushbutton.

Donc soit on le fait "à la main" en faisant à chaque fois handles.<chp>=uicontrol(...) (dans ce cas les Tag sont inutiles, soit on met des Tag pouvant servir de champ (par exemple + n'est pas un "bon" Tag, il faut de l'alphanumérique et underscore, et forcément une lettre en 1ere place) et il suffit de lancer à la fin GUIHANDLES.

Invité · 25/06/2009, 16h53

Merci Dut, effectivement ça marche, j'ai juste du changer double2str en num2str, je pige pas pourquoi str2double existe mais pas l'inverse, enfin bon la logique des fois ...;

sinon caro-line pourquoi doit on mettre h=uimachin il sert à quoi le h ? pourquoi pas juste mettre uimachin('bidule',.....'tag','truc') puis après a=get(handles.truc,'string') ?

Sinon, mis à part ça, pour en revenir au problème initiale, car j'ai très peu de temps pour le faire alors faudrait que je commence la premiere page et comme j'ai pas envie de recommencer 50x, j'aimerais bien attaquer par la bonne méthode. Donc pour créer un GUI avec plusieurs interfaces a onglets que peut on faire ?

EDIT= j'ai commencer a explorer uitabpanel comme je suis passé sur des gui à la main, c'est bien dense quand même

**Caro-Line** · 25/06/2009, 17h16

Le problème dans ton cas c'est que tu veux faire rapidement une interface qui est déjà d'un niveau élaboré.
Tu es vraiment obligé d'avoir des onglets ?

Le concept des handles (numéro identifiant unique d'un objet) est très important à comprendre car c'est ce qui permet la manipulation des objets.
L'objectif principal est donc au moment où tu crées tes objets de pouvoir enregistrer d'une façon ou d'un autre (et il y a beaucoup de façons) ces handles pour pouvoir les réutiliser ensuite dans des sous-fonctions ou dans d'autres fonctions.

Ce que j'essayais d'expliquer dans mon précédent post c'est 2 des possibilités.

Donc soit t'appuyer sur les tags et les fonctions GUIHANDLES/GUIDATA (donc dans ce cas tu n'as pas besoin de mettre d'argument de sortie à uimachin), soit créer "à la main" la structure et utiliser uniquement GUIDATA (dans ce cas les Tag sont inutiles mais il faut bien gérer les arguement de sortie des uimachin en mettant handles.<nom du champ>).

Et pour en revenir au sujet initial, pour les onglets le mieux est effectivement d'utiliser les panels avec leur propriété Visible (il y a plusieurs exemples sur le FEX, par exemple celui-ci qui se passe de GUIDE).

Invité · 25/06/2009, 17h51

pour les données de l'utilisateur je pensais les sauver dans un fichier et travailler ensuite avec ce fichier comme ça tant que l'utilisateur n'a pas cliquer sur le bouton, il peut changer tout les champs sans que le calcul ne soit perturbé.

Mais sinon c'est pas si compliqué que ça finalement uitabpanel, faut prendre ligne par ligne et voir les impacts et puis ça vient tout seul.

Bon après l'integration de mon code de calcul et de l'interface risque d'etre assez tendu, avec ce que tu expliques mais bon j'y arriverais bien avec un peu d'aide parfois surement

EDIT: Ayé j'arrive a faire ce que je veux avec uitabpanel, ça claque sa chatte ce programme, je peut faire exactement l'interface que j'avais prévue

voir image jointe

Invité · 26/06/2009, 11h07

Bon, pour l'interface c'est bon [j'ai bien pigé la logique]

par contre j'ai toujours des problèmes avec la gestion des variables et la récupération des valeurs [j'ai pas du tout pigé la logique]

J'ai mis en pièces jointes mon fichier .m, le problème est sur la dernière fonction quand j'essaie de faire des actions dans mon interfaces.

Pourtant j'ai l'impression d'avoir exactement repris ce que vous m'avez dit, mais j'arrive à rien.

Pouvez vous me montrer comment (dans ce code, pcq dans le cas generale je sais faire)
-ploter une courbe dans l'axe
-jouer avec les boutons
-récupérer une valeur de l'utilisateur d'une autre fonction (genre "longueur d'onde")
-creer des variables globales (pas frapper) ou un truc qui peut s'utiliser pareil pour avoir des variables qui sont utilisable par toute les fonctions.
Par ex: j'aimerai sauvegarder la valeur "longueur d'onde" dans "Lambda_laser", puis dans n'importe quelle fonction taper juste "Lambda_laser" pour l'utiliser

Je pense qu'en voyant des exemples comme ceux ci ça devrait m'aider à piger la "logique" du GUI.

PS: j'ai renomé mon programme (pannel) en .txt pour pouvoir l'uploader mais faut le rerenommer en .m

**Caro-Line** · 26/06/2009, 11h24

Ben là je ne vois vraiment pas comment t'expliquer autrement que je ne l'ai déjà fait

Je te conseillerais d'utiliser vu ton code plutôt la méthode où on instancie la structure handles directement en sortie du UICONTROL car tu n'as pas besoin de tout (Par exemple les objets de style text on s'en fiche).

Donc pour chaque objet dont tu veux conserver le handle tu fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

handles.(un nom logique) = figure/uicontrol/axes...

A la fin de chaque fonction tu enregistres cette structure handles dans ta figure :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

guidata(gcf,handles)

Au début de chaque sous-fonction tu récupères la structure handles (soit parce que tu vas la modifier en rajoutant des objets, soit parce que tu vas avoir besoin de données qui sont dedans) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

handles = guidata(gcf)

Pour ceci :

-creer des variables globales (pas frapper) ou un truc qui peut s'utiliser pareil pour avoir des variables qui sont utilisable par toute les fonctions.
Par ex: j'aimerai sauvegarder la valeur "longueur d'onde" dans "Lambda_laser", puis dans n'importe quelle fonction taper juste "Lambda_laser" pour l'utiliser

Je n'en vois pas l'intérêt puisque une fois que tu as accès à ta structure handles tu peux accéder "en live" aux données de tes objets.
Donc par exemple pour l'objet edit contenant la lognueur d'onde.
Au moment de la création :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
handles.longueur_onde = uicontrol(...
    'parent',laser_panel',...
    'style','edit',...
    'units','normalized',...
    'String','0',...
    'fontsize',laser_fontsize,...
    'backgroundcolor',laser_backgroundcolor,...
    'position',[0.6,1/24+4/6+4/48, 5/20,1/6],...
    'HorizontalAlignment','right');

Note : j'ai supposé que c'était celui-là à cause de la position par rapport au text

Le fait de mettre handles.<nom qui veut dire quelquechose> te permettra aussi de t'y retrouver dans ton code sans être obligé de mettre trop de commentaires.

Ensuite quand tu veux récupérer la valeur depuis n'importe où :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
handles = guidata(gcf);
longueur_onde = get(handles.longueur_onde,'String');
%attention c'est du type char donc utiliser str2double pour mettre en numérique

J'espère que c'est un peu plus clair.

Invité · 26/06/2009, 11h39

Effectivement c'est très clair merci

Par contre pour l'interet des variables que je voulais, c'est justement de pas devoir les redeclarer dans chaque fonction, j'ai bien une trentaine de scalaire qui sont des données de bases et qui ne sont jamais modifier alors c'est un peu chier de devoir faire 30 declaration au debut de chaque fonction (X2 en plus puisqu'il faut les transformer en scalaire)

Moi j'aurais bien crée une fonction qui fait toute ces déclaration une fois pour toute l'intégralité des données utilisateur.

**Caro-Line** · 26/06/2009, 11h54

Ah je pensais que c'était les données que tu voulais récupérer de l'IHM, désolée.

Si ce sont des constantes tu peux aussi les enregistrer dans la structure handles (cela permet de n'avoir qu'une seule variable à "balader" d'une fonction à l'autre).
Au début de ta fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
handles.var1=5;
handles.var2=8;
...

Comment faire une interface GUI comme celle ci ? (voir sujet)

Interfaces Graphiques

Discussions similaires

Partager

Partager