Strumenti e approcci per lo sviluppo di GUI embedded

Indice dei contenuti

Introduzione

Un’interfaccia grafica incorporata è spesso intesa semplicemente come “grafica su un display”. In pratica, è molto di più. L’interfaccia grafica integrata è una combinazione di architettura software, strategia di rendering, gestione degli input e capacità hardware, che lavorano insieme per presentare le informazioni e accettare l’interazione dell’utente in modo affidabile e prevedibile.

A differenza delle applicazioni desktop o mobili, le GUI embedded operano sotto stretti vincoli. Le prestazioni limitate della CPU, la memoria ristretta, i requisiti in tempo reale e i lunghi cicli di vita dei prodotti influenzano il modo in cui l’interfaccia utente viene progettata e implementata. Di conseguenza, le soluzioni GUI embedded vanno da interfacce leggere che girano su piccoli microcontrollori ad applicazioni grafiche avanzate che girano su sistemi basati su Linux.

A causa di questa diversità, il termine “GUI integrata” non descrive un’unica tecnologia o flusso di lavoro. Al contrario, copre un ampio spettro di approcci che si differenziano per il luogo in cui avviene il rendering, per quanto la GUI sia strettamente legata alla piattaforma hardware e per la flessibilità che esiste per l’evoluzione futura del sistema.

Tre categorie pratiche di soluzioni GUI embedded

Dal punto di vista del sistema, la maggior parte delle soluzioni GUI embedded possono essere raggruppate in tre categorie pratiche. Questa classificazione non si basa su prodotti o fornitori specifici, ma sul modo in cui la GUI viene integrata nell’architettura generale del sistema.

1. GUI legata a un unico ecosistema hardware

In questa categoria, il framework e gli strumenti dell’interfaccia grafica sono progettati specificamente per una famiglia di processori o per un fornitore di silicio. L’interfaccia utente diventa un’estensione naturale dell’ecosistema hardware, con strumenti strettamente integrati e flussi di lavoro consigliati.

2. Framework e librerie GUI multipiattaforma

In questo caso, il framework dell’interfaccia grafica è ampiamente indipendente dall’hardware sottostante. La stessa base di codice dell’interfaccia utente può essere riutilizzata su diversi microcontrollori o processori, a patto che siano disponibili i driver di visualizzazione e di input adatti.

3. GUI con rendering scaricato su controller grafici esterni

In questo approccio, il processore principale non esegue direttamente il rendering dell’interfaccia grafica. Il rendering viene invece gestito da un controller grafico esterno dedicato, mentre la CPU principale si concentra sulla logica dell’applicazione e sul controllo del sistema.

Questo modello a tre categorie fornisce un modo chiaro e pratico per comprendere il panorama delle GUI embedded. Inoltre, rende più facile posizionare strumenti e framework specifici in base alle scelte architettoniche piuttosto che alle liste di controllo delle funzionalità.

Nelle sezioni seguenti, ogni categoria viene descritta in modo più dettagliato, insieme ad esempi concreti che illustrano come questi approcci vengono utilizzati in sistemi embedded reali.

GUI legata a un unico ecosistema hardware

In questa categoria, l’interfaccia grafica è strettamente legata a una specifica piattaforma hardware o a un fornitore di silicio. Il framework dell’interfaccia grafica, gli strumenti di sviluppo e i flussi di lavoro consigliati sono progettati per lavorare insieme come parte di un ecosistema coerente.

Questo approccio offre in genere un elevato livello di integrazione tra l’interfaccia grafica e l’hardware sottostante. I driver dei display, i controller touch, l’accelerazione grafica e l’utilizzo della memoria sono allineati alle capacità di una particolare famiglia di MCU o SoC. Di conseguenza, la curva di apprendimento è spesso più agevole, soprattutto per i team che hanno già familiarità con l’ambiente di sviluppo del fornitore.

Le soluzioni GUI di questa categoria vengono comunemente scelte per progetti in cui:

• la piattaforma hardware viene fissata nelle prime fasi del progetto,
• Si prevede un supporto a lungo termine all’interno di un singolo ecosistema,
• La velocità di sviluppo e la coerenza della catena di strumenti sono importanti.

Piuttosto che concentrarsi sulla portabilità tra le varie piattaforme, queste soluzioni danno priorità all’accoppiamento stretto e all’ottimizzazione all’interno di un unico ambiente.

TouchGFX per STM32

TouchGFX è un framework di interfaccia grafica sviluppato appositamente per i microcontrollori STM32. È strettamente integrato con l’ecosistema STM32 e costituisce un’estensione naturale del flusso di lavoro di sviluppo della ST.

Dal punto di vista dello sviluppatore, TouchGFX combina uno strumento di progettazione visiva dell’interfaccia utente con un framework C++ ottimizzato per l’hardware STM32. Le schermate, le animazioni e le interazioni dell’interfaccia utente vengono create nel designer, mentre la logica dell’applicazione e la configurazione dell’hardware vengono gestite tramite STM32CubeMX e gli strumenti di sviluppo associati.

Questa stretta integrazione permette di progettare l’interfaccia grafica con una chiara comprensione delle risorse MCU disponibili, delle interfacce di visualizzazione e delle funzioni di accelerazione grafica.

Caratteristiche tipiche

• Framework GUI progettato esclusivamente per STM32
• Designer dell’interfaccia utente visuale combinato con il codice C++ incorporato
• Flusso di lavoro allineato con gli strumenti STM32Cube

TouchGFX - Strumento di selezione delle schede

Se vuoi saperne di più su TouchGFX puoi trovare maggiori informazioni sul sito web di ST.

Guida GUI di NXP

NXP GUI Guider rappresenta un approccio leggermente diverso, ma sempre incentrato sul fornitore. Pur utilizzando LVGL come libreria grafica di base, il flusso di lavoro complessivo rimane strettamente legato all’ecosistema NXP.

GUI Guider offre un’interfaccia drag-and-drop per creare schermate e definire il comportamento dell’interfaccia utente. Lo strumento genera codice sorgente basato su LVGL, che viene poi integrato e costruito all’interno dell’ambiente MCUXpresso SDK. Dal punto di vista dell’utente, la GUI viene creata e gestita come parte di un’unica catena di strumenti forniti dal fornitore.

Sebbene LVGL sia di per sé multipiattaforma, il modo in cui viene utilizzato qui riflette un flusso di lavoro specifico per la piattaforma, ottimizzato per i microcontrollori NXP e il loro stack software consigliato.

Caratteristiche tipiche

• Creazione visiva dell’interfaccia utente tramite uno strumento fornito dal fornitore
• LVGL utilizzato come motore di rendering
• Forte integrazione con l’SDK MCUXpresso e le piattaforme NXP

NXP Gui Guider - Nuova finestra del progetto

Puoi trovare maggiori informazioni su NXP Gui Guider sul sito web di NXP.

Altri approcci specifici per i fornitori

Concetti simili si ritrovano in tutto il settore embedded. Molti produttori di silicio offrono strumenti o framework GUI progettati per funzionare al meglio all’interno dei loro ecosistemi hardware e software.

Anche se gli strumenti specifici sono diversi, l’idea comune rimane la stessa:

• la GUI viene trattata come una parte nativa della piattaforma hardware,
• e gli esempi sono allineati con una specifica famiglia di MCU o SoC,
• l’ottimizzazione e la facilità d’uso all’interno di un ambiente hanno la priorità sulla portabilità.

Questa categoria continua a essere una scelta forte per i progetti in cui la standardizzazione su un unico fornitore semplifica lo sviluppo e la manutenzione a lungo termine.

Framework e librerie GUI multipiattaforma

I framework GUI multipiattaforma adottano un approccio diverso rispetto alle soluzioni specifiche per ogni fornitore. Invece di essere strettamente legati a un unico ecosistema hardware, sono progettati per funzionare su più piattaforme con modifiche minime o nulle alla base di codice dell’interfaccia utente.

In questo modello, l’interfaccia grafica diventa un livello software distinto che si colloca al di sopra dell’astrazione hardware. A patto che vengano forniti driver adeguati per la visualizzazione, l’input e la temporizzazione, lo stesso framework può essere riutilizzato tra diversi microcontrollori, processori, sistemi operativi e persino generazioni di prodotti.

Questa categoria viene comunemente scelta quando:

• Le piattaforme hardware possono cambiare nel tempo,
• più varianti di prodotto condividono un’interfaccia utente comune,
• La manutenibilità e la portabilità a lungo termine sono obiettivi di progettazione importanti.

Piuttosto che ottimizzare per una specifica MCU, i framework multipiattaforma danno priorità alla coerenza e al riutilizzo tra gli ambienti.

LVGL come framework GUI integrato multipiattaforma

LVGL è uno dei framework GUI multipiattaforma più utilizzati nel mondo embedded. È stato progettato per funzionare su un’ampia gamma di sistemi, dalle piccole MCU con risorse limitate alle piattaforme basate su MPU con Linux.

Dal punto di vista architettonico, LVGL fornisce:

• un modello di oggetti unificato per schermate, widget e stili,
• una pipeline di rendering flessibile che può essere adattata a diversi driver di visualizzazione,
• supporto sia per i sistemi bare-metal che per quelli basati su OS.

Poiché LVGL è indipendente da ogni singolo fornitore di silicio, consente ai team di sviluppo di mantenere la stessa logica dell’interfaccia grafica pur cambiando la piattaforma hardware sottostante. Questo lo rende particolarmente interessante per i prodotti che si evolvono nel tempo o che esistono in diverse configurazioni hardware.

Caratteristiche tipiche

• Un unico framework GUI per sistemi MCU e MPU
• Codice portatile basato su C
• Ampia gamma di display, controller touch e piattaforme supportate

Se vuoi saperne di più, leggi la sezione Come iniziare con LVGL oppure consulta la documentazione su docs.lvgl.io

Qt e Qt Quick nei sistemi embedded

Qt rappresenta un approccio di alto livello allo sviluppo di GUI embedded ed è più comunemente utilizzato nei sistemi basati su MPU con Linux. In questo ambiente, l’interfaccia utente viene trattata come un livello applicativo completo piuttosto che come un’estensione leggera del firmware.

Il cuore delle moderne GUI embedded basate su Qt è Qt Quick, un framework costruito attorno a QML, un linguaggio dichiarativo per la descrizione delle interfacce utente. Qt Quick separa la struttura visiva, le animazioni e la logica di interazione dal codice dell’applicazione sottostante, consentendo all’interfaccia utente di evolversi indipendentemente dalla funzionalità del sistema.

Questo approccio permette di:

• layout flessibili e scalatura dinamica tra le varie dimensioni del display,
• animazioni e transizioni fluide,
• rendering accelerato dall’hardware utilizzando le moderne pipeline grafiche,
• una chiara separazione tra il design dell’interfaccia utente e la logica dell’applicazione.

Qt Quick è quindi la tecnologia principale responsabile di ciò che viene reso sullo schermo nei sistemi embedded contemporanei basati su Qt.

Creazione visiva dell’interfaccia utente con Qt Design Studio

Una parte essenziale del flusso di lavoro della GUI integrata in Qt è Qt Design Studio, che funge da strumento principale per la progettazione e la prototipazione visiva dell’interfaccia utente.

Qt Design Studio permette a progettisti e sviluppatori di creare interfacce utente in modo visivo, definire animazioni e stati e visualizzare l’anteprima delle interazioni senza concentrarsi sul codice dell’applicazione di basso livello. Lo strumento genera risorse QML che possono essere integrate direttamente nell’applicazione incorporata.

Dal punto di vista del flusso di lavoro, Qt Design Studio consente:

• composizione visiva di schermi e componenti,
• progettazione di animazioni basate sulla linea del tempo,
• rapida iterazione del look and feel,
• stretta collaborazione tra i team di progettazione e software.

Qt Design Studio

Nei progetti embedded, Qt Design Studio svolge un ruolo simile a quello dei designer di GUI specifici per i fornitori presenti negli ecosistemi MCU, ma è adattato alle esigenze dei sistemi di classe Linux con capacità grafiche più avanzate. Puoi trovare maggiori dettagli su questo ambiente sul sito web di Qt.

Contesto di integrazione e distribuzione

Le applicazioni embedded basate su Qt sono tipicamente sviluppate e integrate utilizzando Qt Creator, che funge da IDE principale per la gestione di QML, C++ e configurazioni di build. Sebbene Qt Creator non sia uno strumento di progettazione dell’interfaccia grafica, fornisce l’ambiente in cui le risorse dell’interfaccia utente create in Qt Design Studio vengono combinate con la logica dell’applicazione.

Nei prodotti commerciali embedded, Qt viene spesso fornito con Qt for Device Creation, che fornisce un runtime supportato, una toolchain e un’infrastruttura di aggiornamento per i dispositivi Linux embedded. Questo pacchetto semplifica la distribuzione e la manutenzione a lungo termine, ma non influisce direttamente sul modo in cui viene progettata l’interfaccia grafica.

Quando Qt è la scelta giusta

Le GUI embedded basate su Qt sono comunemente scelte quando:

• l’architettura del sistema include già una MPU e Linux,
• l’interfaccia utente è una parte centrale dell’esperienza del prodotto,
• Sono necessari modelli di interazione moderni e immagini ricche,
• La progettazione e lo sviluppo del software procedono in parallelo.

Sebbene Qt richieda un hardware più performante rispetto ai framework incentrati sulle MCU, la combinazione di Qt Quick e Qt Design Studio offre un ambiente maturo e scalabile per la creazione di interfacce utente embedded avanzate.

Altre tecnologie GUI portatili

Oltre a LVGL e Qt, esistono altri approcci portatili utilizzati nei progetti embedded, a seconda dei requisiti del sistema e delle competenze del team.

Questi includono:

• interfacce utente basate sul web, costruite con HTML, CSS e JavaScript e visualizzate con un browser incorporato,
• altre librerie GUI aperte o legacy utilizzate nei prodotti a lungo ciclo di vita,
• framework personalizzati sviluppati internamente per soddisfare requisiti molto specifici.

Sebbene queste soluzioni differiscano nell’implementazione, condividono un principio comune:
la GUI viene trattata come un livello indipendente dalla piattaforma, con i dettagli specifici dell’hardware astratti al di sotto.

GUI con rendering scaricato su controller grafici esterni

La terza categoria di soluzioni GUI embedded si basa su un presupposto architettonico diverso rispetto ai framework specifici e multipiattaforma. In questo approccio, il rendering grafico non viene eseguito dalla MCU o MPU principale, ma viene delegato a un controller grafico esterno dedicato.

Il processore principale comunica con il controller grafico utilizzando comandi di alto livello, mentre il controller stesso è responsabile della generazione dell’output del display e della gestione degli input tattili. In questo modo si separa la logica dell’applicazione dalla presentazione e si elimina la necessità di mantenere un framebuffer nella memoria principale del sistema.

Queste architetture vengono tipicamente scelte quando:

• Le risorse dell’MCU sono limitate o riservate ai compiti in tempo reale,
• è necessario un comportamento di rendering prevedibile e deterministico,
• La complessità del sistema deve essere tenuta sotto stretto controllo.

Piuttosto che scalare le prestazioni aumentando le risorse della CPU o della memoria, questa categoria si basa sull’offloading hardware del carico di lavoro grafico.

Interfacce HMI basate su Bridgetek EVE

La famiglia EVE di Bridgetek è un esempio rappresentativo di questo approccio. I dispositivi EVE agiscono come controller dedicati di display, grafica e touch, gestendo internamente il rendering, la temporizzazione del display e l’elaborazione del touch.

In un sistema basato su EVE:

• l’MCU host invia comandi di disegno e controllo,
• il controller EVE costruisce ed esegue un elenco di visualizzazione,
• l‘input tattile viene elaborato direttamente dal dispositivo EVE,
• il segnale video finale viene generato direttamente dal controller EVE.

Questa architettura permette anche a MCU relativamente piccoli di pilotare interfacce grafiche complesse e di gestire l’interazione con l’utente senza gestire buffer di pixel, implementare algoritmi touch o eseguire operazioni di rendering in tempo reale.

Le caratteristiche tipiche degli HMI basati su EVE includono:

• nessun framebuffer nella memoria dell’MCU,
• gestione integrata del touch (resistivo o capacitivo, a seconda della variante EVE),
• prestazioni di rendering stabili e indipendenti dal carico dell’applicazione,
• una chiara separazione tra presentazione dell’interfaccia utente, elaborazione del tocco e logica dell’applicazione.

Questo fa sì che EVE sia adatto ai classici HMI industriali, ai pannelli di controllo e ai dispositivi in cui l’interazione tattile robusta, il comportamento deterministico e la semplicità del sistema sono requisiti fondamentali.

EVE Screen Designer come parte centrale del flusso di lavoro di EVE

Un elemento fondamentale dell’ecosistema EVE di Bridgetek è EVE Screen Designer (ESE), che svolge un ruolo centrale nella creazione delle interfacce utente basate su EVE.

EVE Screen Designer è uno strumento visivo e indipendente dall’hardware utilizzato per progettare schermate e interazioni complete dell’interfaccia utente senza dover accedere all’hardware finale. Le schermate sono composte utilizzando primitive grafiche e widget che corrispondono direttamente ai comandi dell’elenco di visualizzazione di EVE.

Dal punto di vista del flusso di lavoro di sviluppo, EVE Screen Designer permette di:

• composizione visiva delle schermate dell’interfaccia utente e del flusso di navigazione,
• definizione delle interazioni tattili e del comportamento dello schermo,
• anteprima e validazione della logica dell’interfaccia utente prima dell’integrazione del firmware,
• generazione di risorse dell’interfaccia utente che vengono poi controllate dal codice dell’applicazione.

Poiché ESE riflette il modello di rendering di EVE, gli sviluppatori lavorano all’interno di vincoli ben definiti, il che aiuta a garantire prestazioni prevedibili e a evitare problemi di ottimizzazione in fase avanzata.

Designer dello schermo di EVE

LVGL in esecuzione su EVE: un approccio ibrido

Un’interessante estensione del concetto di EVE è il progetto di riferimento comunemente chiamato “LVGL running on EVE”. In questo approccio ibrido, LVGL viene utilizzato come framework GUI di alto livello, mentre l’effettivo backend di rendering è gestito dal controller di EVE.

Questo concetto è dimostrato in un repository di riferimento pubblico, dove LVGL è adattato per funzionare con i dispositivi Bridgetek EVE.

Da un punto di vista architettonico:

• LVGL offre un modello di interfaccia utente portatile e familiare,
• EVE agisce come motore di rendering e interfaccia di visualizzazione,
• l’MCU host coordina la logica dell’applicazione e gli aggiornamenti dell’interfaccia utente.

Questo modello ibrido illustra che le tre categorie di GUI descritte in questo articolo non sono confini rigidi, ma elementi architettonici che possono essere combinati quando i requisiti del progetto lo giustificano.

Una piattaforma di visualizzazione, più approcci alla GUI

Dal punto di vista della visualizzazione, le differenze architettoniche descritte finora non richiedono necessariamente un hardware di visualizzazione diverso.

La stessa piattaforma fisica di visualizzazione può essere utilizzata con:

• soluzioni GUI basate su MCU specifiche del fornitore,
• framework multipiattaforma che funzionano su MCU o MPU,
• sistemi che utilizzano controller grafici esterni,
• Piattaforme basate su Linux con interfacce utente Qt o web.

Finché l’interfaccia del display e le caratteristiche elettriche sono compatibili, la scelta della tecnologia GUI rimane una decisione a livello di sistema, non un vincolo a livello di display.

Questa flessibilità è particolarmente preziosa nei prodotti a lungo ciclo di vita e nelle famiglie di prodotti che si evolvono nel tempo.

Dove si inserisce Riverdi in questo panorama

Riverdi si concentra sulla fornitura di soluzioni di visualizzazione che si integrano perfettamente con un’ampia gamma di architetture di sistemi embedded.

Piuttosto che essere legati a un singolo framework GUI o approccio di rendering, i display Riverdi sono progettati per supportare:

• Sistemi basati su MCU che utilizzano framework GUI specifici o multipiattaforma,
• Architetture basate su EVE con rendering offloaded,
• MPU e piattaforme basate su Linux utilizzando Qt o tecnologie web.

In questo modo i team di sviluppo possono scegliere o cambiare l’approccio all’interfaccia grafica mantenendo la piattaforma di visualizzazione coerente tra i diversi progetti e le diverse generazioni di prodotti.

Conclusione: scegliere un'architettura, non una limitazione

Lo sviluppo di GUI embedded non è definito da un singolo strumento o framework, ma da un insieme di scelte architettoniche che bilanciano prestazioni, complessità e flessibilità a lungo termine.

Le soluzioni specifiche per i fornitori offrono una stretta integrazione e un rapido onboarding.
I framework multipiattaforma consentono la portabilità e il riutilizzo.
I controller grafici esterni offrono prestazioni prevedibili con un carico minimo sull’MCU.

Con una piattaforma di visualizzazione ben scelta, questi approcci possono coesistere ed evolvere nel tempo, consentendo ai team di concentrarsi sull’architettura del sistema e sull’esperienza utente piuttosto che sui vincoli tecnici.