Come iniziare con LVGL su Riverdi STM32 Display – guida completa

Questa guida mostra come dare vita a un display STM32H7 Riverdi utilizzando LVGL: dalla clonazione del repository all’esecuzione della tua prima interfaccia personalizzata con un’immagine e un pulsante.
Imparerai come:

• collegare l’hardware,
• apri e costruisci il progetto in STM32CubeIDE,
• eseguire la demo LVGL,
• e creare una semplice interfaccia utente personalizzata con il logo Riverdi e un pulsante interattivo.

Alla fine, avrai una base funzionante per il tuo progetto GUI basato su LVGL sui display embedded STM32 di Riverdi.

Hardware

Connessioni

Il display dell’STM32H7 utilizza due connettori Molex:

• SWD (programmazione) – collega qui il tuo ST-Link.
• Alimentazione (12 V) – per l’alimentazione esterna.

⚠️ Non alimentare il display e collegare ST-Link contemporaneamente per la prima volta senza aver controllato la corretta polarità.

Software

Clona il progetto

Utilizzando LVGL Project Creator, scarica il progetto per le dimensioni dello schermo che stai utilizzando. Tutto ciò che devi fare è scrivere Riverdi nella barra di ricerca a sinistra, selezionare il progetto corretto e premere Download come puoi vedere nell’immagine qui sotto.

Opzionale: clona la libreria LVGL più recente

Se non sei sicuro che la libreria LVGL che hai nel tuo progetto sia la più recente o se vuoi semplicemente aggiornarla, puoi semplicemente cancellare il contenuto della cartella e scaricare la libreria manualmente. Per farlo, basta digitare questo comando nella tua CLI:

cd riverdi-lvgl-101/Middlewares/Third_Party/

git clone https://github.com/lvgl/lvgl.git lvgl

Importare il progetto in STM32CubeIDE

1. Apri STM32CubeIDE.
2. Vai su File → Apri progetti dal file system…
3. Clicca su Directory…, seleziona la sottodirectory STM32CubeIDE della tua cartella clonata riverdi-lvgl-101.
4. Clicca su Fine.

Il progetto apparirà ora nell’Esplora progetti.

Costruisci ed esegui l’esempio LVGL

Apri il file main.c che si trova in CM7/Applicazioni/Utente/Core. Dopo tutte le inizializzazioni, dovrebbe esserci una funzione lv_demo_widgets() che viene chiamata prima del PWM e del kernel.

Puoi costruire il progetto premendo Ctrl+B o l’icona del martello in alto a sinistra dello schermo. Il processo di creazione dovrebbe richiedere un po’ di tempo, fino a qualche minuto. Se vedi degli avvisi, dovrebbe essere tutto a posto: potrebbero essere causati da nuove versioni della libreria LVGL o di CubeIDE.

Se vuoi controllare altri esempi LVGL e analizzarne il codice, non devi fare altro che aprire Middlewares/LVGL/lvgl/examples e chiamare uno degli esempi di tua scelta nel punto in cui viene chiamato lv_demo_widgets().

Creare un esempio personale

Creeremo un esempio personale contenente un’immagine e un pulsante che cambia il colore dello schermo in uno dei nostri colori Riverdi.

Passo 1 – Preparare il logo Riverdi

1. Scarica il logo Riverdi dal sito web Riverdi.
2. Apri il convertitore di immagini LVGL.
3. Scegli il formato del colore: RGB565
4. Clicca su “Converti” e scarica il file .c generato.
5. Posizionalo accanto al file main.c.
6. Aggiungi questa riga all’inizio di main.c:
   • extern const lv_image_dsc_t riverdi_logo;

Nota: se la tua immagine ha uno sfondo nero, ciò è dovuto al formato .png: nessuno sfondo viene tradotto da Image Converter in 0x00 – colore nero. Se vuoi renderlo bianco, cambia tutti gli 0x00 in 0xff nel tuo IDE o editor di testo.

Passo 2 – Aggiungere un nuovo file sorgente

In STM32CubeIDE, crea un nuovo file:

Applicazione/Utente/Core/ui_riverdi_logo.c

#include "lvgl.h"
extern const lv_image_dsc_t riverdi_logo;

statico lv_color_t colors[3];
statico uint8_t color_index = 0;
statico lv_obj_t * scr;

void statico color_btn_event_cb(lv_event_t * e)
{
color_index = (color_index + 1) % 3;
lv_obj_set_style_bg_color(scr, colors[color_index], LV_PART_MAIN);
}

void ui_riverdi_logo_create(void)
{
colors[0] = lv_color_make(0, 0, 255); // Blu
colors[1] = lv_color_make(0, 255, 0); // Verde
colors[2] = lv_color_make(255, 0, 0); // Rosso

scr = lv_obj_create(NULL);
lv_obj_set_style_bg_color(scr, colors[color_index], LV_PART_MAIN);
lv_screen_load(scr);

lv_obj_t * img = lv_image_create(scr);
lv_image_set_src(img, &riverdi_logo);
lv_obj_align(img, LV_ALIGN_CENTER, 0, -40);

lv_obj_t * btn = lv_button_create(scr);
lv_obj_align(btn, LV_ALIGN_CENTER, 0, 100);
lv_obj_add_event_cb(btn, color_btn_event_cb, LV_EVENT_CLICKED, NULL);

lv_obj_t * label = lv_label_create(btn);
lv_label_set_text(label, "Cambia colore");
lv_obj_center(label);
}

Passo 3 – Chiamare la funzione

Apri nuovamente il file main.c e sostituisci lv_demo_widgets(); con ui_riverdi_logo_create();

Quindi costruisci e flasha il progetto.

Nota: se si verifica un errore di compilazione, ricostruisci: CubeIDE a volte indicizza male i nuovi file.

Analisi del nostro codice

void color_btn_event_cb() – questa funzione è una funzione evento che viene chiamata quando il pulsante viene premuto. Nel suo corpo cambiamo il colore di sfondo (bg) con uno dei colori dell’array colors[].

void ui_riverdi_logo_create() – questa funzione è la nostra intera interfaccia utente. Dall’alto:

• Creiamo la schermata con uno dei colori di sfondo.
• Mettiamo l’immagine sullo schermo e la allineiamo al centro. I numeri seguenti sono le coordinate X e Y della posizione di allineamento. In questo esempio -40 significa che la posizioniamo 40px sopra il centro dello schermo.
• Poi creiamo il pulsante: non dandogli alcuno stile, mantiene l’aspetto e il comportamento predefinito. Lo posizioniamo 100px sotto il centro in modo che non si sovrapponga all’immagine.
• Infine, creiamo l’etichetta del pulsante: “Cambia colore”. Per inserirla nel pulsante, basta passare il pulsante come parametro in lv_label_create.

I prossimi passi

Ora hai un ambiente LVGL funzionante sulla piattaforma STM32H7 di Riverdi.
Da qui puoi:

• Aggiungi altri widget (etichette, cursori, grafici)
• Integrare i gesti tattili
• Esplora le animazioni e i temi

Sintesi

Hai appena:

1. Clona e apri il progetto LVGL per il display STM32H7 Riverdi,
2. Esegui l’applicazione demo di LVGL,
3. Crea la tua schermata personalizzata con un’immagine e un pulsante.

Questo flusso di lavoro è la base perfetta per sviluppare GUI professionali sui display integrati Riverdi utilizzando LVGL.

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!

Carta bianca

Consulta il nostro catalogo prodotti e scopri come puoi risparmiare sulla qualità, non sulla qualità.

Scopri subito

Contattaci subito, risparmia con la qualità, non sulla qualità.

Contattaci ora