Come eseguire LVGL sul display Riverdi EVE
Eseguire un’interfaccia grafica moderna su un microcontrollore di solito significa avere a che fare con framebuffer, limiti di memoria e compromessi in termini di prestazioni.
Con EVE del nostro partner Bridgetek, il rendering della grafica HMI ad alta qualità, l’audio e la gestione delle funzioni touch vengono trasferiti alla GPU. Allo stesso tempo, LVGL, anch’esso partner di Riverdi, offre un framework UI flessibile e ampiamente utilizzato.
Il risultato: con questa configurazione puoi realizzare interfacce complesse senza spingere l’MCU al limite e permette a processori economici di gestire display a colori avanzati e dall’aspetto professionale con un carico minimo
Questa guida spiega come eseguire LVGL su un display intelligente Riverdi EVE4 utilizzando la scheda di valutazione Riverdi basata su STM32F4.
L’esempio utilizza il display Riverdi RVT70HSBNWC00-B da 7 pollici collegato tramite SPI attraverso l’interfaccia RiBUS.
L’obiettivo di questo tutorial è mostrarti come:
- inizializza LVGL sulla MCU host
- collega LVGL al motore grafico EVE
- visualizza i widget LVGL sullo schermo
- abilita l’interazione tattile
A differenza dei display integrati tradizionali, l’architettura EVE non richiede che la MCU host esegua il rendering di un framebuffer completo. L’host invia invece i comandi di disegno alla GPU EVE, che si occupa di generare l’immagine finale.
Questo riduce notevolmente l’utilizzo della memoria e il carico della CPU sull’MCU.
Hardware utilizzato
In questo tutorial usiamo EVE4 (BT817Q). Secondo la documentazione di LVGL, dovrebbe funzionare anche con altre versioni di EVE, ma non è stato ancora testato.
In questo tutorial vengono utilizzati i seguenti componenti hardware.
Riverdi RVT70HSBNWC00-B
- Display intelligente EVE4 da 7”
- Risoluzione: 1280 × 600
- Motore grafico integrato BT817Q
- Touch capacitivo proiettato
Scheda di valutazione Riverdi
- Microcontrollore STM32F4
ST-Link
- usato per la programmazione e il debug
Cavo piatto RiBUS
- utilizzato per la comunicazione SPI tra l’host e il modulo EVE
Cavi micro-USB
- uno per ST-Link
- uno per alimentare la scheda di valutazione
Requisiti software
Prima di iniziare il processo di integrazione, bisogna preparare diversi componenti software. Il progetto è stato realizzato utilizzando STM32CubeIDE come ambiente di sviluppo, con LVGL che fornisce il framework per l’interfaccia utente grafica. La comunicazione con il motore grafico EVE avviene tramite le librerie di supporto Riverdi EVE, che implementano l’interfaccia di basso livello tra l’MCU host e la GPU BT817.
In questa configurazione, LVGL non rende i pixel direttamente nel framebuffer. Le operazioni di disegno di LVGL vengono invece tradotte in comandi EVE che vengono inviati alla GPU tramite SPI. Il dispositivo EVE esegue poi questi comandi per visualizzare il fotogramma finale sullo schermo.
Sono necessari i seguenti strumenti software:
STM32CubeIDE (o un altro IDE)
- ambiente di sviluppo per progetti STM32
- serve per configurare le periferiche, compilare il progetto e programmare l’MCU
Libreria grafica LVGL
- framework GUI integrato utilizzato per creare l’interfaccia utente
- offre widget, un sistema di layout e la gestione degli eventi
Librerie di supporto per Riverdi EVE
- [garantire una comunicazione di basso livello con la GPU EVE]
- gestire le transazioni SPI e l’accesso al FIFO dei comandi
Git
- si usa per scaricare repository e progetti di esempio
Per trovare il progetto, vai su GitHub di Riverdi e cerca il repository EVE-LVGL.
Capire l’architettura di rendering di EVE
Una differenza fondamentale tra i display EVE e i display embedded tradizionali è il modo in cui vengono generati i frame. Nella maggior parte dei sistemi embedded, l’MCU esegue il rendering dei pixel in un framebuffer, che viene poi letto continuamente dal controller del display per aggiornare lo schermo
I dispositivi EVE seguono un approccio diverso. Invece di inviare un framebuffer, l’MCU host invia comandi di disegno alla GPU. Questi comandi descrivono ciò che deve essere disegnato sullo schermo, mentre il motore grafico EVE genera internamente i pixel finali.
Questo riduce notevolmente l’utilizzo della memoria e i requisiti di larghezza di banda sul microcontrollore.
Il fotogramma renderizzato è definito da una struttura chiamata “Display List”. La Display List è una sequenza di comandi GPU eseguiti ad ogni fotogramma per generare l’immagine finale.
Una pipeline di visualizzazione semplificata si presenta quindi così:
MCU → comandi di disegno → GPU EVE → pannello LCD
È proprio grazie a questa architettura basata su comandi che è possibile eseguire interfacce grafiche complesse su microcontrollori relativamente piccoli.
Blocchi di memoria chiave di EVE
A livello interno, la GPU EVE utilizza diverse aree di memoria per elaborare i comandi grafici.
RAM_DL
- memorizza la Display List utilizzata per il rendering del fotogramma corrente
RAM_G
- memoria grafica generica usata per immagini, caratteri e altre risorse
FIFO di comando
- buffer utilizzato dal coprocessore per ricevere i comandi dall’MCU
L’MCU host scrive i comandi nel FIFO dei comandi. Il coprocessore EVE interpreta questi comandi e crea la Display List memorizzata in RAM_DL. Durante il ciclo di aggiornamento dello schermo, la GPU esegue la Display List e genera il fotogramma finale.
Come si inserisce LVGL nella pipeline
Quando si usa LVGL con i display tradizionali, i pixel vengono renderizzati in un framebuffer nella memoria della MCU. Con i display EVE il processo è diverso.
Le operazioni di disegno LVGL vengono tradotte in comandi GPU EVE, che vengono inviati al dispositivo tramite SPI. La GPU crea quindi la Display List e esegue il rendering del fotogramma internamente.
Il flusso che ne risulta è questo:
Questo permette a LVGL di gestire interfacce utente complesse mantenendo molto basso l’utilizzo della memoria della MCU.
Creazione del progetto STM32
Il prossimo passo è preparare il progetto di sviluppo per la scheda di valutazione Riverdi. L’MCU host eseguirà il framework LVGL e comunicherà con la GPU EVE tramite SPI.
Inizia creando un nuovo progetto STM32 in STM32CubeIDE per il microcontrollore utilizzato sulla scheda di valutazione. Una volta creato il progetto, configura le periferiche necessarie per comunicare con il dispositivo EVE.
L’interfaccia più importante è la SPI, che serve a trasmettere comandi e dati tra la MCU e il controller grafico EVE.
Oltre all’SPI, bisogna configurare diversi segnali di controllo come pin GPIO. Questi segnali servono a gestire lo stato di alimentazione del dispositivo EVE e a gestire la comunicazione con la GPU.
I segnali tipici richiesti dall’interfaccia EVE includono:
CS
- segnale di selezione chip per la comunicazione SPI
PD
- pin di controllo dello spegnimento utilizzato per resettare o riavviare il dispositivo EVE
INT
- linea di interruzione usata dalla GPU per segnalare eventi alla MCU host
Una volta configurati l’interfaccia SPI e i segnali GPIO, puoi compilare il progetto e caricarlo sulla scheda per verificare che la configurazione hardware di base funzioni.
Inizializzazione di LVGL e del driver di visualizzazione EVE
Una volta preparato l’ambiente di progetto, bisogna inizializzare la libreria LVGL. Questo passaggio prepara le strutture interne di LVGL e attiva il framework grafico.
lv_init();
LVGL mette a disposizione un driver di visualizzazione dedicato per le GPU EVE. Questo driver traduce le operazioni di disegno di LVGL in comandi comprensibili dal motore grafico EVE.
Il driver di visualizzazione viene creato usando la funzione lv_draw_eve_display_create().
lv_display_t * disp = lv_draw_eve_display_create( 1280, 600, LV_DISPLAY_RENDER_MODE_DIRECT );
I parametri definiscono la risoluzione del display. In questo esempio usiamo la risoluzione 1280×600 del display Riverdi RVT70HSBNWC00-B.
Attivazione dell’input tattile
Il display Riverdi EVE include un controller touch capacitivo integrato a cui puoi accedere tramite l’interfaccia GPU EVE.
LVGL mette a disposizione una funzione di supporto che crea un driver per dispositivi di input collegato al motore touch EVE.
lv_draw_eve_touch_create(disp);
Una volta chiamata questa funzione, le coordinate dei tocchi rilevate dal controller EVE vengono automaticamente trasmesse a LVGL e convertite in eventi di input.
Questo permette ai widget LVGL, come pulsanti, cursori e elenchi, di reagire alle azioni dell’utente.
Eseguire la prima demo LVGL
Una volta inizializzati i driver di visualizzazione e di input, il sistema è pronto per visualizzare la prima interfaccia grafica.
Un modo semplice per verificare l’integrazione è creare una schermata con diversi widget LVGL standard. Di seguito trovi il codice di esempio:
static void create_test_ui(void)
{
lv_obj_t * scr = lv_screen_active();
/* Contesto */
lv_obj_set_style_bg_color(scr, COLOR_BG, 0);
lv_obj_set_style_bg_opa(scr, LV_OPA_COVER, 0);
/* Titolo */
lv_obj_t * title = lv_label_create(scr);
lv_label_set_text(title, "LVGL su Riverdi EVE");
lv_obj_set_style_text_font(title, &lv_font_montserrat_44, 0);
lv_obj_set_style_text_color(title, COLOR_TEXT, 0);
lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 48);
/* Sottotitolo */
lv_obj_t * subtitle = lv_label_create(scr);
lv_label_set_text(subtitle, "Test di compatibilità di base dei widget");
lv_obj_set_style_text_font(subtitle, &lv_font_montserrat_24, 0);
lv_obj_set_style_text_color(subtitle, COLOR_TEXT, 0);
lv_obj_align(subtitle, LV_ALIGN_TOP_MID, 0, 100);
/* --- ancore di layout --- */
int start_y = 170;
int col_left = 180;
int col_right = 640;
/* Pulsante */
lv_obj_t * btn = lv_button_create(scr);
lv_obj_set_size(btn, 200, 60);
lv_obj_align(btn, LV_ALIGN_TOP_LEFT, col_left, start_y);
lv_obj_set_style_bg_color(btn, COLOR_ACCENT, 0);
lv_obj_t * btn_label = lv_label_create(btn);
lv_label_set_text(btn_label, "Pulsante");
lv_obj_center(btn_label);
/* Slider */
lv_obj_t * slider = lv_slider_create(scr);
lv_obj_set_width(slider, 260);
lv_obj_align(slider, LV_ALIGN_TOP_LEFT, col_right, start_y + 15);
lv_slider_set_value(slider, 45, LV_ANIM_OFF);
lv_obj_set_style_bg_color(slider, COLOR_WIDGET, LV_PART_MAIN);
lv_obj_set_style_bg_color(slider, COLOR_ACCENT, LV_PART_INDICATOR);
/* Interruttore */
lv_obj_t * sw = lv_switch_create(scr);
lv_obj_align(sw, LV_ALIGN_TOP_LEFT, col_left, start_y + 120);
lv_obj_t * sw_label = lv_label_create(scr);
lv_label_set_text(sw_label, "Interruttore");
lv_obj_set_style_text_color(sw_label, COLOR_TEXT, 0);
lv_obj_align_to(sw_label, sw, LV_ALIGN_OUT_RIGHT_MID, 20, 0);
/* Casella di selezione */
lv_obj_t * cb = lv_checkbox_create(scr);
lv_checkbox_set_text(cb, "Casella di selezione");
lv_obj_set_style_text_color(cb, COLOR_TEXT, 0);
lv_obj_align(cb, LV_ALIGN_TOP_LEFT, col_right, start_y + 120);
/* Bar */
lv_obj_t * bar = lv_bar_create(scr);
lv_obj_set_size(bar, 500, 20);
lv_obj_align(bar, LV_ALIGN_TOP_MID, 0, start_y + 220);
lv_bar_set_value(bar, 70, LV_ANIM_OFF);
lv_obj_set_style_bg_color(bar, COLOR_WIDGET, LV_PART_MAIN);
lv_obj_set_style_bg_color(bar, COLOR_ACCENT, LV_PART_INDICATOR);
lv_obj_t * bar_label = lv_label_create(scr);
lv_label_set_text(bar_label, "Bar");
lv_obj_set_style_text_color(bar_label, COLOR_TEXT, 0);
lv_obj_align_to(bar_label, bar, LV_ALIGN_OUT_TOP_MID, 0, -8);
}
Conclusione
In questa guida ti abbiamo mostrato come eseguire LVGL su un display Riverdi EVE4 utilizzando la scheda di valutazione Riverdi come piattaforma host.
Invece di eseguire il rendering di un framebuffer tradizionale sull’MCU, il sistema usa il motore grafico EVE per generare l’immagine finale. Il microcontrollore host invia i comandi di disegno tramite SPI, mentre la GPU BT817 crea la Display List ed esegue il rendering del frame sul display.
Questa architettura permette di eseguire interfacce grafiche complesse su microcontrollori relativamente piccoli, mantenendo bassi sia l’utilizzo della memoria che il carico della CPU.
Una volta che il driver della scheda grafica è stato inizializzato correttamente, puoi usare LVGL per sviluppare applicazioni grafiche complete, proprio come con gli altri driver supportati.
A questo punto, gli sviluppatori possono iniziare a creare le proprie interfacce utilizzando i widget, i layout e i meccanismi di gestione degli eventi di LVGL.
Altri passaggi potrebbero includere:
- Integrazione di schermate personalizzate e logica applicativa
- Aggiungere immagini e font salvati in EVE RAM_G
- Ottimizzazione della comunicazione SPI per migliorare le prestazioni di rendering
Per farlo, dai un’occhiata al sito della documentazione LVGL e esplora il nostro repository Riverdi su GitHub.
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à.
