La nostra prima GUI

Nell' Help Center di Matlab al'indirizzo https://it.mathworks.com/help/matlab/creating_guis/create-a-simple-app-or-gui-using-app-designer.html è presente un esempio di creazione di un'applicazione Matlab con una GUI tramite App Designer.

L'app consiste in un slider che varia l'ampiezza di alcune funzioni in un grafico:

Per prima cosa andare nel menù "APPS" e da questo cliccare sulla prima icona a sinistra "Design App" per aprire l'App Designer

Si aprirà una finestra dalla quale è possibile scegliere aprire qualche esempio, partire da una GUI completamente vuota "Blank App" o partire da modelli già preimpostati

Nel nostro caso partiremo da una GUI completamente vuota, quindi selezioneremo "BLANK GUI". Si aprirà l'interfaccia di App Designer.

App Designer dispone di due viste per la creazione di un'app: Design View e Code View selezionabili tramite gli appositi pulsanti ben visibili.

Si cominci da dalla Design View per creare i componenti dell'interfaccia utente e modificarne l'aspetto in modo interattivo.

A sinistra la libreria dei componenti contiene tutti i componenti, i contenitori e gli strumenti che è possibile aggiungere all'app in modo interattivo. Per aggiungere un componente è sufficiente trascinarlo dalla libreria dei componenti nell'area di disegno dell'app.

È quindi possibile modificare l'aspetto del componente impostando le proprietà nel browser dei componenti visibile a destra o modificando alcuni aspetti del componente, come le dimensioni e il testo dell'etichetta, direttamente nell'area di disegno.

STEP 1: Come prima cosa è necessario creare un componenente Axes per visualizzare le funzioni. Trascinare quindi un componente Axes dalla Component Library nell'area di disegno al centro.

STEP 2: Trascinare un componente Slider dalla Component Library nell'area di disegno. Posizionandolo sotto il componente Axes (vedi figura iniziale).

STEP 3: Sostituire il testo dell'etichetta dello slider. Per sostituire fare doppio clic sull'etichetta e sostituire la parola "Slider" con "Amplitude":

Una volta completata l'operazione l'area di disegno in Design View dovrebbe essere simile a questa:

STEP 4: Passare alla vista "Code View" per gestire gli eventi.

Quando un componente viene aggiunto all'app tramite Design View,  App Designer genera automaticamente il codice che viene eseguito quando  l'app va in esecuzione. Il codice contiene l'aspetto dell'app, così come è stata disegnata nell App Designer. In contemporanea App Designer crea alcuni oggetti da utilizzare e modificare per definire il comportamento dell'app:

L'oggetto principale è l'app object, questo oggetto memorizza tutti i dati dell'app, come i componenti dell'interfaccia utente e tutti i dati specificati utilizzando le proprietà. Tutte le funzioni dell'app richiedono questo oggetto come primo argomento. Questo modello consente di accedere ai componenti e alle proprietà dall'interno di tali funzioni.

Gli altri oggetti si chiamano component objects. Ogni volta che viene aggiunto un componente in Design Viev, App Designer memorizza il componente come oggetto utilizzando per riconoscerlo il formato app.ComponentName.

È possibile vedere e modificare i nomi dei componenti nell'app che stiamo creando utilizzando il Component Browser. È inoltre possibile accedere e aggiornare le proprietà di ogni componente, utilizzando il formato app.ComponentName.Property. 

STEP 5: Inserire la funzione di callback per programmare il comportamento dell'app.

Una funzione di callback è una funzione che viene eseguita tutte le volte che l'utente dell'app esegue un'interazione GUI creando un evento. Nell'applicazione che stiamo creando, l'unica interazione possibile è il cambio della posizione dello slider. È dunque necessario scrivere tale funzione.

Per inserire la funzione nel nostro esempio, andare nel Component Browser e posizionarsi sopra la voce app.AmplitudeSlider  quindi premere il tasto destro del mouse e nel menù che appare selezionare Callbacks > Add ValueChangedFcn callback.

Quando viene aggiunta una funzione di callback a un componente, App Designer crea nel codice dell'app una funzione di callback e posiziona il cursore nel corpo di quella funzione. Gli elementi che vengono passati automaticamente alla funzione di callback sono l'oggetto app come primo argomento  e l'oggetto event che contiene maggiori informazioni sul tipo di evento che ha generato l'attivazione della funzione di callback come secondo argomento. In questo modo dall'interno della funzione è possibile accedere a tutti gli elementi della GUI all'interno dell'App e modificarli di conseguenza

Nel caso dell'app che stiamo generando, App Designer genera automaticamente una riga di codice per accedere al valore dello slider:

STEP 6: Disegnare i grafici

Per disegnare un grafico all'interno di un'app generata tramite App Designer è necessario specificare l'axes o l'oggetto padre come argomento della funzione che genera il grafico.

Nel nostro caso l'axes ha nome app.UIAxes e quindi per aggiungere il grafico, come seconda riga della funzione AmplitudeSliderValueChanged è necessario aggiungere

plot(app.UIAxes, value*peaks);

STEP 7: Modificare l'intervallo di visualizzazione

Per accedere e aggiornare le proprietà dei componenti dall'interno del codice dell'app, si è già visto che è necessario utilizzare il formato app.ComponentName:Property.

Nel nostro caso per modificare i limiti di visualizzazione dell'asse y è possibile modificare la proprietà YLim dell'oggetto app.UIAxes aggiungendo come terza riga della funzione di callback

app.UIAxes.YLim = [-1000 1000];

Alla fine di questa modifica la funzione di callback dovrebbe contenere il seguente codice:

function SliderValueChanged(app, event)
    value = app.Slider.Value;
    plot(app.UIAxes, value*peaks);
    app.UIAxes.YLim = [-1000 1000];
end

STEP 8: Avviare l'app

Premere   Run per salvare e avviare l'app.

Dopo aver salvato i cambiamenti, l'app è disponibile per essere avviata nuovamente, sia attraverso l'App Designer, sia attraverso la Command Window di Matlab. Nel secondo caso è sufficiente digitare il nome (senza l'estensione .mlapp) direttamente nella Command Window a patto che l'app si trovi nella cartella corrente o nel path di Matlab.