TouchGFX è un framework per interfacce utente grafiche (GUI) fornito da STMicroelectronics, progettato per lo sviluppo di sistemi embedded con microcontrollori STM32 (MCU). Permette di creare display orientati agli oggetti, aiutando gli utenti di MCU STM32 a costruire pagine UI fluide, eleganti e varie.

L’esempio seguente utilizza TouchGFX versione 4.23.2 come riferimento:

Figura 1: Schermata iniziale di TouchGFX con opzioni come Example, Demo, Create Board Chip, ecc.

Panoramica della Struttura di TouchGFX

L’architettura del programma TouchGFX adotta il modello Model-View-Presenter (MVP), come illustrato in Figura 2, con i seguenti vantaggi:

      •   Separazione delle responsabilità (Separation of Concerns): La manutenzione del codice varia a seconda delle diverse fasi, permettendo agli utenti di scrivere interfacce e comunicare con i livelli inferiori, ottenendo strutture chiare e comprensibili con alta riutilizzabilità.
      •   Unit Testing: Lo strato superiore (View) può interagire direttamente con il codice generato da GFX, rendendo più facile la validazione dei risultati in modo indipendente.

Figura 2: Diagramma delle relazioni tra i componenti TouchGFX (MVP)

      •   View: La pagina principale generata da GFX, responsabile della rappresentazione dell’interfaccia. Tipicamente agisce come il livello superiore passivo del modello MVP, gestendo tutte le informazioni di design dell’interfaccia e mostrando le schermate corrispondenti in base alle proprietà degli oggetti utilizzati.
      •   Model: Funziona come centro per l’elaborazione e l’invio dei dati. Alcuni pacchetti di comunicazione vengono elaborati o interpretati e quindi inviati alla View tramite il Presenter per modificare il contenuto visualizzato e lo stato degli oggetti.
      •   Presenter: Agisce come canale di comunicazione tra View e Model, permettendo al Model di rispondere alle richieste di dati e riutilizzare le funzioni.

A causa della filosofia di progettazione del firmware, che enfatizza il Model come centro di elaborazione dei comandi, può essere illustrato un diagramma (Figura 3)

Attraverso l’elaborazione a livello inferiore per diverse interfacce (ad esempio CAN bus, RS485, UART, Bluetooth, Wi-Fi), i dati vengono inoltrati al Model per la comunicazione e poi passati alla View tramite il Presenter, permettendo il cambio di stato degli oggetti.

Figura 3: Comunicazione tra più interfacce e architettura MVP

Due esempi possono illustrare il metodo di scambio dati:

Esempio 1: Supponiamo che l’Host invii un comando CANopen al Device (Figura 4).

CANopen riceve i pacchetti attraverso la porta IF, eventualmente decifra i dati tramite il task CAN e poi inoltra il contenuto al Model. Dopo che il Model aggiorna il database ed esegue il comando corrispondente, invia il risultato alla View tramite il Presenter per aggiornare la pagina.

Figura 4: Esempio di Host che invia un comando

Esempio 2: Se un utente tocca un oggetto UI sul dispositivo, un pacchetto di evento touch viene inviato all’Host (Figura 5).

Quando l’utente clicca su un oggetto interattivo, la View genera un evento click, che viene poi passato al Model tramite un User Event attraverso il Presenter. Il Model risponde in base all’interfaccia utilizzata, inviando il codice al task CAN e infine trasmettendo un pacchetto TX per notificare l’Host.

Figura 5: Evento touch utente inviato all’Host

Panoramica delle Pagine View

Nell’interfaccia software TouchGFX, progettare N pagine genera N set corrispondenti di View e Presenter, mentre un unico Model controlla tutte le pagine.

Quando un utente progetta uno scenario UI—comprese grafica, aspetto, coordinate e testi—premendo "Generate Code" viene prodotto il codice nella pagina view corrispondente.

Le cartelle generate sono divise in ..\generated\ e ..\gui, dove ..\generated\ contiene il codice base della pagina progettata, e ..\gui\ contiene la logica per l’interazione degli oggetti.

Queste informazioni ci permettono di posizionare gli oggetti sulle rispettive pagine e utilizzare il codice generato.

Ecco una spiegazione passo passo.

Per esempio:

      1. Aprire un progetto vuoto e premere "Create New" per creare il progetto (Figura 6).

Figura 6: Schermata di apertura progetto TouchGFX

      2. In TouchGFX sarà disponibile la schermata predefinita Screen1. Aggiungiamo un nuovo oggetto bottone, selezioniamo l’immagine desiderata e premiamo "Generate Code" (Figura 7).

Figura 7: Dimostrazione creazione bottone

      3. Passando al percorso del progetto, appariranno due nuove cartelle: gui e generated (Figura 8).

Figura 8: Contenuto cartelle progetto

La cartella generated contiene il codice base relativo ai componenti di Screen1, generato automaticamente da TouchGFX e non modificabile direttamente. Se lo stato degli oggetti cambia e il codice viene ricostruito, la cartella generated viene aggiornata.

Dopo "Generate Code", GFX crea Screen1ViewBase.cpp in ..\generated\gui_generated\src\screen1_screen (Figure 9).

Figura 9: Posizione Screen1ViewBase.cpp

Aprendo Screen1ViewBase.cpp con Notepad++ (Figura 10), possiamo vedere le proprietà e i contenuti relativi alla pagina Screen1 e al bottone:

      •   Imposta coordinate bottone:
             button1.setXY(63, 109);
      •   Imposta ID immagine bottone:
             button1.setBitmaps(TouchGfx::Bitmap(BITMAP_BUTTON_00_00_ID),
            TouchGfx::Bitmap(BITMAP_BUTTON_00_00_ID));
      •   Aggiunge il bottone alla pagina:
             add(button1);

Figura 10: Contenuto Screen1ViewBase.cpp

Il codice XXXBase.cpp viene ricostruito durante "Generate Code" e ogni modifica ai dati degli attributi viene aggiornata. Modificando posizione, immagine ecc. del bottone, anche le funzioni cambiano.

La cartella gui è dove TouchGFX permette di scrivere la logica del programma (Figura 8). Qui viene costruita anche l’architettura MVP (Figure 11 e 12), permettendo di pianificare il codice MVP personalizzato per implementare il design della UI.

Figura 11: Percorso del Model

Figura 12: Percorsi di Presenter e View

      4. Scenario Semplice di Progettazione GUI

      •   Scrivere un controllo logico per l’interazione tra bottone e testo.
      •   Al click del bottone, il valore del testo aumenta di 1.

Ecco come implementare questa funzionalità:

Step 1:

Trascinare due oggetti: un bottone (button1) e un’area testo (textArea1) (Figura 13).

Figura 13: Progetto UI con controllo bottone

Step 2:

Selezionare l’azione interattiva a destra, aggiungere un evento click per il bottone e scegliere la funzione add_number quando l’evento viene eseguito (Figura 14).

Figura 14: Aggiunta evento Interazione1

Step 3:

Osservare Screen1ViewBase.cpp (Figura 15) per trovare il codice relativo alla creazione di button1 e textArea1.

Il nuovo evento genera buttonCallbackHandler per gestire l’evento touch del bottone. Al click, chiama la funzione add_number tramite il callback.

Figura 15: Screen1ViewBase.cpp

Contenuto di Screen1ViewBase.hpp (Figura 16).

Figura 16: Contenuto di Screen1ViewBase.hpp

Step 4:

Nella sezione gui aggiungere Screen1View.cpp e Screen1View.hpp.
Aggiungere la funzione add_number per utilizzare il parametro count come accumulatore (Figure 17 e 18).

Usare Unicode: snprintf(textArea1Buffer, TEXTAREA1_SIZE, "%02d", count); per aggiornare il conteggio in textArea1.

Poi usare textArea1.invalidate() per aggiornare i dati.

Figura 17: Contenuto Screen1View.cpp

Figura 18: Contenuto Screen1View.hpp

Dopo aver avviato il simulatore, si conferma che ogni volta che button1 viene premuto, textArea1 (valore count) inizia a incrementare da 0 (Figura 19).

Figura 19: Risultato simulatore

Questo conferma che le proprietà degli oggetti vengono definite principalmente nella cartella generated, mentre la logica viene scritta nella cartella gui.

Esempi di Proprietà Oggetti Builder e TouchGFX

Il Smart Display GUI Builder di Winstar è un tool drag-and-drop per design UI/UX, che permette lo sviluppo senza codice di prodotti basati su MCU STM32. Costruito come estensione di TouchGFX, supporta più interfacce e protocolli di comunicazione, permettendo di osservare direttamente come i comandi influenzano il controllo dei widget.

Introduzione al Builder:
https://www.youtube.com/watch?v=zL72k_qZrTc&t=1s

La filosofia di progettazione di SmartDisplay è collegata alle funzionalità di TouchGFX settings, con firmware basato su MCU STM32 secondo l’architettura MVP. Gli oggetti sono progettati usando componenti esistenti combinati con logica.

Alcuni oggetti del GUI Builder possono essere implementati con componenti UI TouchGFX per ottenere risultati simili.

*Sezione Esplicativa Supplementare

Ecco un semplice esempio che utilizza lo slider del Builder (Figura 20):

Figure 20: Builder slider property page

Le proprietà dello slider del Builder sono le seguenti:

      •   Dimensioni:
          ○ Larghezza: 618
          ○ Altezza: 20
      •   Posizioni:
          ○ Background X: 0
          ○ Background Y: 4
      •   Posizione dell'Indicatore:
          ○ Min: 0
          ○ Max: 580
          ○ Pos: 0

Questi parametri corrispondono alle impostazioni dello Slider in TouchGFX (Figura 21).

Figura 21: Proprietà Slider TouchGFX

Le proprietà dello slider di TouchGFX sono le seguenti:

      •   Dimensioni:
          ○ Larghezza: 618
          ○ Altezza: 20
      •   Posizioni:
          ○ Background X: 0
          ○ Background Y: 4
      •   Posizione dell'Indicatore:
          ○ Min: 0
          ○ Max: 580
          ○ Y: 0

Gli utenti possono modificare il valore Start in GFX per replicare i risultati in Builder (Figura 22). Impostando il valore a 100, si ottiene lo stesso risultato (Figura 23).

Figura 22: Modifica Start = 100 in TouchGFX

Figura 23: Modifica Test Value = 100 in Builder

Se osserviamo il file Screen1ViewBase.cpp generato da GFX (Figura 24):

Figura 24: Funzione in Screen1ViewBase.cpp

Possiamo capire come i parametri sopra menzionati possano essere utilizzati e modificati nel codice. Questi valori sono direttamente collegati al design del progetto GFX. Quando il Builder carica il progetto, vengono reimpostati i parametri iniziali dello slider del dispositivo.

Se l’Host invia un comando per modificare il valore dello slider, nella View verrà eseguito slider1.setValue() per completare la modifica dell’oggetto (Figura 25).

Figura 25: Host invia comando slider

Questa è una semplice spiegazione della relazione tra gli oggetti del Builder e quelli di TouchGFX.

Estensioni Future e Valutazione Builder

Con TouchGFX 4.24.0, sono disponibili nuovi oggetti e funzionalità. Per valutare l’integrazione del Builder, si possono usare gli esempi di default da GFX per demo e test (Figura 26):

Figura 26: Vari progetti di esempio

La versione 4.24.0 supporta nuovi oggetti come il QR code, permettendo di valutare i parametri e le funzioni utilizzabili nel Builder.

Esempio QR Code:

      1. Selezionare BlankUI.
      2. Trascinare il Container QR code.
      3. Osservare le proprietà configurabili (Figura 27):
      •   Posizione: (X, Y)
      •   Configurazione:
          ○ QRVersion
          ○ Scale
          ○ Text
          ○ Error Correction Code…

Figura 27: Proprietà QR code

Questi parametri QR code sono consultabili sul sito ufficiale (Figura 28).

Figura 28: Spiegazione sito ufficiale

Nel file generato Screen1ViewBase.cpp, confermare i parametri e le impostazioni disponibili (Figura 29):

      1. Imposta coordinate: qrCode1.setXY(208, 224);
      2. Imposta versione QR: qrCode1.setQRCodeVersion(3);
      3. Imposta scala QR: qrCode1.setScale(5);
      4. Inserisci testo per generare il QR code:
          qrCode1.convertStringToQRCode("https://www.winstar.com.tw/zh-tw/");

Figura 29: Codice generato Screen1ViewBase.cpp

Se in futuro il QR code viene integrato nel Builder, gli utenti potranno impostare questi parametri modificabili.

Riferimenti

https://support.touchgfx.com/docs/category/introduction
https://www.eettaiwan.com/20200203np21/
https://en.wikipedia.org/wiki/STMicroelectronics