Création d'une IHM

Complément : Présentation de AppDesigner (programmation événementielle un peu comme AppInventor)

Le designer présente deux vues

une vue "design" pour l'IHM, on ajoute sur une grille des composants (image, bouton, liste déroulante etc.)
une vue "code" avec le code Matlab.

On peut ensuite associer du code (action) à des événements (quand on clique sur un bouton par exemple). La programmation est orientée objet, on parlera de propriétés plutôt que de variables et de méthodes plutôt que des fonctions.

Design View

Code View

Méthode : Ouvrir le fichier de démarrage Matlab App Designer

Ouvrir le fichier 'VigneNetteStart.mlapp' sous Matlab AppDesigner. (C'est une version simplifiée de l'exemple 'Analyze an Image'

Icône pour lancer le App Designer dans Matlab

Modifier l'interface (layout)⚓

Méthode : Changer le titre de l'application

Changer le nom qui apparaît sur l'application

Attention : « label » sous AppDesigner

une zone de texte courte est appelée « label » sous AppDesigner, ce qui peut prêter à confusion avec le « label » de l'image à trouver (sa catégorie).

Méthode : Ajouter le label

Se mettre en « Design View »
Ajouter un composant texte pour l'affichage du label (qui sera modifié par le programme)
Ajouter un composant texte à afficher à côté (non modifiable)

Méthode : Facultatif : supprimer le menu déroulant avec les deux images préchargées

Cela permet de simplifier l'interface.

Pour ne pas avoir d'erreur, il faut aussi supprimer le code correspondant.

% Callback function
        function DropDownValueChanged(app, event)
            
           
        end

% Callback function
        function DropDownValueChanged(app, event)
            
           
        end

Modification du code ⚓

Méthode : Accéder rapidement à une méthode

Le menu « Go To permet d'accéder rapidement à une méthode.

Une autre possiblité est de choisir à droite le composant (ici l'application) et de cliquer à gauche sur 'Callbacks'. La méthode 'statupFcn' apparaît dans la liste et il suffit de cliquer dessus

Accéder rapidement à la fonction startupFcn

Zones blanches / zones grises

Les zones grises ne sont pas éditables, elles sont générées automatiquement Matlab.

Méthode : Chargement du cnn

Se placer en 'Code View'

Créer une propriété avec le menu dans l'éditeur. Ainsi le réseau sera accessible dans toute l'application.

Définir le réseau

properties (Access = private)
        net  % le cnn
end

properties (Access = private)
        net  % le cnn
end

Les propriétés définies pour l'application sont accessibles dans tout le code en préfixant avec

app.

Ici le réseau sera donc accessible avec

app.net

Charger le réseau au démarrage de l'application (startupFcn)

function startupFcn(app)
            % Configure image axes
            app.ImageAxes.Visible = 'off';
            app.ImageAxes.Colormap = gray(256);
            axis(app.ImageAxes, 'image');
            
            % Chargement du cnn
            app.net = alexnet;
            
            % Update the image and histograms
            updateimage(app, 'peppers.png');
        end

function startupFcn(app)
            % Configure image axes
            app.ImageAxes.Visible = 'off';
            app.ImageAxes.Colormap = gray(256);
            axis(app.ImageAxes, 'image');
            
            % Chargement du cnn
            app.net = alexnet;
            
            % Update the image and histograms
            updateimage(app, 'peppers.png');
        end

Affichage du label

Le calcul et l'affichage du libellé se fait quand l'utilisateur a sélectionné une image. Code sur l'action "loadButton"

function LoadButtonPushed(app, event)
               
            % Display uigetfile dialog
            filterspec = {'*.jpg;*.tif;*.png;*.gif','All Image Files'};
            [f, p] = uigetfile(filterspec);
            
            % Make sure user didn't cancel uigetfile dialog
            if (ischar(p))
               fname = [p f];
               updateimage(app, fname);
            end
        end

function LoadButtonPushed(app, event)
               
            % Display uigetfile dialog
            filterspec = {'*.jpg;*.tif;*.png;*.gif','All Image Files'};
            [f, p] = uigetfile(filterspec);
            
            % Make sure user didn't cancel uigetfile dialog
            if (ischar(p))
               fname = [p f];
               updateimage(app, fname);
            end
        end

On peut donc afficher le label juste sous l'affichage de l'image, dans "updateimage"

%crée le label 
img = imresize(im, [227 227]);
label = classify(app.net, img);
% le composant "Label" reçoit comme propriété Text le label prédit par le réseau
app.Label.Text = label;

%crée le label 
img = imresize(im, [227 227]);
label = classify(app.net, img);

% le composant "Label" reçoit comme propriété Text le label prédit par le réseau
app.Label.Text = label;

Exporter l'application ⚓

Créer une application standalone

Le menu "Share" permet de créer une application autonome, qui pourra s'exécuter sur un autre PC, même si Matlab n'est pas installé.

Share > Standalone Desktop App

permet de créer un exécutable qui installera une application sous Windows.