Créer pas à pas une interafce graphique Matlab

Les graphiques


Les graphiques facilitent la visualisation et l'analyse des données. Ils sont aussi utiles dans une interface graphique.

Comme exemple de représentation, nous allons tracer la fonction y = sin(x), lorsque l'usager de l'interface graphique va cliquer sur le bouton "Tracer".

Une fois ces deux objets placés, il est possible de modifier le titre du graphique et l'aspect en ajoutant une grille, puis un encadré. La face avant ressemblera à ceci:

 

Capture face avant tuto 7 1a

 

Callback du bouton:
Compléter le callback avec les instructions nécessaires pour obtenir:

 

% Callbacks that handle component events
    methods (Access = private)

        % Button pushed function: TracerButton
        function TracerButtonPushed(app, event)
            x = 0:0.01:2*pi;
            y = sin(x);
            plot(app.UIAxes, y);
        end
    end

 

On commence d'abord par définir la variable x; elle est comprise entre 0 et 2π, par pas de 0.01; pi est une constante prédéfinie dans Matlab, ayant pour valeur π.
Puis la fonction y = sin(x). Et pour finir, la représentation graphique à l'aide de la fonction prédéfinie plot().

Si on clique sur le bouton après avoir exécuté le programme, le tracé de la fonction sinus s'affiche.

Remplaçons le bouton par une sorte de variateur à glissière (slider) que l'on surnomme m. Changer la graduation du slider pour avoir des valeurs allant de 0 à 5. Il s'agit de représenter la fonction sin(mx) à présent.

Callback du slider:

Compléter le callback pour obtenir :

 

% Callbacks that handle component events
    methods (Access = private)

        % Value changing function: mSlider
        function mSliderValueChanging(app, event)
            m = event.Value;
            x = 0:0.01:2*pi;
            y = sin(m*x);
            plot(app.UIAxes, y);
            
        end
    end

 

Les données renvoyées par le slider sont stockés dans la variable m. Les valeurs de x ne changent pas. La fonction prend la forme y = sin(m*x).

Après exécution du programme, on obtient la figure suivante lorsqu'on agit avec la souris sur le slider:

 

Capture face avant tuto 7 1b

 

La vidéo ci-après retrace les points abordés au cours de ce paragraphe:

 

 

La librairie App Designer propose un grand nombre d'options de personnalisation pour les graphiques. Ce type de composants tient une place importante dans une interface graphique utilisateur.