In questa guida ti mostriamo come costruire una semplice applicazione GUI utilizzando TouchGFX ed eseguirla su tre diverse schede STM32 Nucleo abbinate a display Riverdi. La guida è completamente autonoma, quindi puoi seguire ogni passo senza guardare il video di accompagnamento.
Se stai valutando i moduli Riverdi o se stai esplorando TouchGFX per la prima volta, questo progetto iniziale dimostra quanto velocemente puoi creare una logica UI interattiva, generare codice, integrarlo in STM32CubeIDE ed eseguirlo sull’hardware.
Hardware utilizzato
Utilizziamo tre schede STM32 Nucleo, ciascuna abbinata a un display Riverdi:
1. Nucleo-C092RC + Riverdi RVA15MD
Una scheda STM32 compatta ed economica, ideale per le demo TouchGFX di base e per la semplice logica UX. Abbinata al display rotondo da 1,54″ RVA15MD, è una configurazione ideale per l’ingresso.
2. Nucleo-WBA65RI + Riverdi RVA15MD
Una piattaforma Nucleo wireless più potente e nuova di zecca che offre una connettività moderna e prestazioni GUI più elevate, ottime per le applicazioni Riverdi più avanzate con display rotondo.
3. Nucleo-H563ZI + Riverdi RVA35HI
Una scheda Nucleo di fascia alta ad alte prestazioni con molta memoria per una grafica TouchGFX più ricca, che qui pilota un display RVA35HI da 3,5″.
Non è necessario un ST-Link esterno: tutte leschede sono dotate di ST-Link V3 integrato.
Crea il tuo esempio da zero
Collegare l’hardware
Collegare i display Riverdi alle schede Nucleo richiede solo un attimo:
- Collega l’FFC del display all’adattatore o al connettore di Nucleo.
Il cavo flessibile ha una chiave e si inserisce in un solo modo. - Collega la scheda utilizzando la porta USB-C ST-LINK.
Il LED verde conferma l’alimentazione e la disponibilità del debugger. - Non sono necessari programmatori, ponticelli o adattatori esterni.
Una volta collegato, passiamo direttamente allo sviluppo dell’interfaccia utente.
Creare l’interfaccia utente in TouchGFX Designer
Apri TouchGFX Designer e inizia con un nuovo progetto:
Passo dopo passo
- Clicca su Crea (il pulsante più nella schermata iniziale).
- Nel Selettore di schede, cerca la tua scheda (ad esempio “H563” o “WBA65”).
- Scegli il Nucleo corretto con il Display Riverdi (RVA)
- Dai un nome al tuo progetto e conferma con CREA.
- Designer si apre con una tela vuota che corrisponde alla risoluzione del tuo display.
Costruire l’interfaccia utente della demo
Per creare il nostro semplice esempio di regolazione della luminosità:
- Dalla barra degli strumenti superiore, trascina un riquadro sull’area di disegno.
Ridimensionalo in modo che copra l’intero schermo: servirà da sfondo bianco. - Aggiungi un widget Slider.
Spostalo al centro trascinandolo sulla tela. - Scegli uno dei preset predefiniti di TouchGFX: nel video utilizziamo il piccolo cursore giallo.
Configurazione del cursore
Nel pannello Proprietà:
- Imposta minimo = 0
- Imposta il massimo = 200
- (Opzionale) Imposta Valore iniziale = 200 per avere una schermata iniziale completamente luminosa.
Tutto ciò che viene aggiunto è visibile nell’albero dei widget a sinistra.
Aggiungere interazioni in TouchGFX
Ora colleghiamo il cursore a una chiamata di funzione:
- Apri la scheda Interazioni.
- Premi l’icona + per aggiungere una nuova interazione.
- Scegli il valore del cursore modificato come trigger.
- Seleziona slider1 come widget.
- Per l’azione, scegli Chiama nuova funzione virtuale.
- Nome della funzione: sliderChanged
TouchGFX lo genererà come metodo virtuale in Screen1ViewBase.
Successivamente, generiamo il codice.
Generare il codice e aprire il progetto in CubeIDE
Vai a:
Applicazione → Utente → gui → Screen1View.cpp
TouchGFX ha già generato la chiamata di callback nella classe base.
Ora implementiamo la logica in Screen1View.cpp:
void Screen1View::sliderChange(int valore)
{
// Scala l'intervallo del cursore (0-200) all'intervallo alfa (0-255)
uint8_t alpha = (valore * 255) / 200;
box1.setAlpha(alpha);
box1.invalidate();
}
Assicurati di aggiungere la dichiarazione in Screen1View.hpp:
virtual void sliderChange(int value);
Questa è tutta la logica necessaria: nessun driver hardware e nessun codice HAL.
Testare il progetto: simulatore e programmazione del target
Torna a TouchGFX Designer:
- Clicca su Esegui Simulatore (seconda icona rosa)
→ Puoi testare il tuo cursore di luminosità istantaneamente senza hardware. - Clicca su Program and Run Target (terza icona rosa o F6)
→ In questo modo si costruisce, si flasha e si esegue il firmware direttamente sulla scheda Nucleo.
Sintesi
Questa guida dimostra come sia possibile farlo rapidamente:
- Crea un progetto TouchGFX
- Aggiungi elementi dell’interfaccia utente
- Collega le interazioni dei widget
- Implementa una semplice logica in C++
- Generare e costruire codice
- Flash direttamente da TouchGFX Designer
- E puoi eseguirlo su qualsiasi scheda Nucleo abbinata ad un display Riverdi
Con i moduli Riverdi basati su STM32 e l’ecosistema Nucleo della ST, la creazione di GUI interattive diventa veloce, prevedibile e facile da sviluppare.
SCOPRI IL NOSTRO
Carta bianca
Ottieni un’interazione perfetta tra utente e display con il giusto IC per sensore tattile. Hai mai avuto problemi con eventi di tocco fantasma o con la certificazione? Potenzia la tua ricerca e sviluppo come un professionista con il nostro Whitepaper!
Consulta il nostro catalogo prodotti e scopri come puoi risparmiare sulla qualità, non sulla qualità.
