Créer pas à pas une interafce graphique Matlab

Les voyants lumineux

En instrumentation les voyants lumineux, sur une interface graphique utilisateur,
sont utiles pour visualiser l'état d'un capteur ou d'un système.
Avec une large palette de couleurs possible, ce type d'indicateurs sont disponibles
dans App Designer.
L'interface graphique du paragraphe (Les champs d'éditon) précédent permettait de calculer la puissance et d'afficher ce résultat dans un champ d'édition numérique.
Nous allons rajouter à cette interface un voyant lumineux qui va se comporter de la
manière suivante:
Lorsque la valeur de la puissance sera:

            • comprise entre 0 et 200, le voyant sera vert;
            • comprise entre 200 et 1000, le voyant sera orange;
            • au delà de 1000, le voyant sera rouge.


On commence par placer le voyant sur la face avant. Nous cliquons dessus, puis dans les propriétés, nous choisissons sa couleur initiale, le gris par exemple.

L'interface graphique aura l'allure suivante:

 

Capture face avant tuto 3

 

Ensuite on va modifier le callback du programme précédent en ajoutant un test sur la
variable puissance.
Après modifications, le callback devra ressembler à ceci:

 

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

        % Button pushed function: CalculerButton
        function CalculerButtonPushed(app, event)
            resistance = app.RenohmsEditField.Value;
            intensite = app.IenamperesEditField.Value;
            puissance = resistance*intensite^2;
            app.PenwattsEditField.Value = puissance;
            if(puissance >0 && puissance<=200)
                app.Lamp.Color = 'green';
            elseif(puissance > 200 && puissance <= 1000)
                app.Lamp.Color = [0.93,0.69,0.13];
            elseif(puissance > 1000)
                app.Lamp.Color = 'red';
            end
        end
    end

 

L'instruction if teste le contenu de la variable puissance, et le voyant prendra l'une des couleurs verte, orange ou rouge.
Dans Matlab on peut directement nommer les couleurs par des chaînes de caractères;
par exemple pour la couleur verte ce sera 'green', la rouge 'red', la bleue 'blue', la cyan 'cyan', la magenta 'magenta', la jaune 'yellow', la noir 'black', la blanche 'white'.

En revanche la chaîne de caractères 'orange' n'est pas un nom valide pour désigner une couleur. Si nous voulons obtenir la couleur orange il faudra plutôt avoir son code Rouge Vert Bleu.
Aucun calcul n'est nécessaire pour effectuer cette opération, nous pouvons l'obtenir directement dans l'environnement App Designer. Il faut simplement le copier depuis la palette de couleurs (Cliquer sur le voyant, puis aller dans ses propriétés).

Enregistrer puis exécuter le programme. Il suffit de modifier les valeurs de R et de
I pour observer le changement d'état du voyant selon les valeurs de P.


La vidéo ci-après résume les étapes de création de cette interface:


Lorsqu'ils sont utilisés, on peut assigner la couleur des voyants en indiquant le nom
qui correspond par exemple 'green' ou une lettre 'g', par red ou 'r', ou par l'intermédiare d'un code Rouge Vert Bleu.

Ce site web utilise des cookies

Certains d’entre eux sont essentiels pour son fonctionnement et d’autres nous aident à améliorer l’expérience utilisateur (cookies traceurs). Vous pouvez décider vous-même si vous autorisez ou non ces cookies. Merci de noter que, si vous les rejetez, certaines fonctionnalités du site pourront être défaillantes.