Librerie LVGL UM3236 per display LCD
Manuale d'uso

Introduzione

Nel contesto moderno dell'industria automobilistica, è comune sviluppare GUI sempre più complesse anche per piccoli display LCD. Per soddisfare questa esigenza, è stato creato e aggiunto all'ecosistema AutoDevKit un nuovo componente, AEK-LCD-LVGL.
Questo nuovo componente importa la libreria grafica LVGL e viene utilizzato con il componente AEK-LCD-DT028V1 per sviluppare GUI complesse più velocemente.
LVGL (libreria grafica leggera e versatile) è una libreria grafica gratuita e open source, scritta in linguaggio C, che fornisce strumenti per creare GUI con grafica facile da usare, piacevoli effetti visivi e poca occupazione di memoria.
LVGL è molto potente poiché contiene elementi predefiniti, come pulsanti, grafici, elenchi, cursori e immagini. La creazione di grafica con animazioni, anti-aliasing, opacità e scorrimento fluido è semplificata con LVGL. La libreria è compatibile con molti tipi di dispositivi di input, come touchpad, mouse, tastiere ed encoder. Lo scopo di questo manuale utente è mostrare come creare facilmente una GUI LCD, utilizzando AutoDevKit.
Nota: Per maggiori dettagli su LVGL, fare riferimento alla documentazione ufficiale. Il codice sorgente è disponibile per il download da GitHub.
Architettura AEK-LVGLL'immagine sopra mostra l'architettura software LVGL integrata in AutoDevKit.
L’architettura del software è caratterizzata da:

• Una libreria LVGL: implementa funzioni grafiche avanzate basate sulla libreria grafica base AEK-LCD-DT028V1:
  – aek_ili9341_drawPixel: stampa i pixel sul display LCD AEK-LCD-DT028V1;
  – aek_lcd_get_touchFeedback: rileva il tocco sul touch screen LCD AEK-LCD-DT028V1;
  – aek_lcd_read_touchPos: ottiene le coordinate del punto toccato;
  – aek_lcd_set_touch Feedback: segnala che l'azione touch è stata completata.
• Una libreria grafica di base: implementa funzioni grafiche di base e richiama primitive di driver di basso livello.
• Un driver di basso livello: implementa le periferiche MCU. In questo caso viene utilizzato il protocollo SPI.
• Un AEK-LCD-DT028V1: scheda di valutazione LCD.

Nozioni di base sull'LVGL

La libreria LVGL interagisce con il componente AEK-LCD-DT028V1 attraverso due driver Disprove e IndevDriver, come mostrato nell'immagine sotto.Il Disprove ha il compito di preparare l'immagine buffer e di passarla allo strato inferiore per visualizzarla sul display LCD. Utilizza la seguente struttura tipizzata lv_disp_drv_t:

• draw_buf: punta ad una struttura di buffer di memoria in cui l'LVGL disegna.
•  noleggiatori: risoluzione orizzontale del display in pixel.
• Verres: risoluzione verticale del display in pixel.
• flush_cb: punta alla funzione utilizzata per stampare il buffer di memoria sul display LCD.
•  monitor_cb: monitora il numero di pixel e il tempo necessario per visualizzare i dati.
  D'altro canto, IndevDriver recupera le informazioni touch LCD provenienti dallo strato inferiore. Utilizza la seguente struttura tipizzata lv_indev_drv_t:
  tipo: questo campo contiene il tipo del dispositivo di input. Le macro predefinite disponibili includono:
  – LV_INDEV_TYPE_POINTER (usato nel nostro caso)
  – LV_INDEV_TYPE_KEYPAD
  – LV_INDEV_TYPE_ENCODER
  – LV_INDEV_TYPE_BUTTON
  redact: indica la funzione utilizzata per recuperare le informazioni tattili.
  flush_cb e redact: vengono chiamati periodicamente in base, rispettivamente, al periodo di aggiornamento dello schermo definito dall'utente e all'input di aggiornamento del tocco. La libreria LVGL gestisce i tempi di aggiornamento tramite un orologio interno. Per la gestione del tempo vengono utilizzate due funzioni LVGL di base:
• lv_tick_inc(uint32_t x): lo scopo di questa funzione è sincronizzare l'ora LVGL con l'ora fisica dell'MCU. L'aggiornamento del tick deve essere impostato tra 1 e 10 millisecondi secondo la specifica LVGL. In
  nel nostro caso lo impostiamo su 5 millisecondi.
• lv_timer_handler (void): aggiorna gli oggetti LVGL interni in base al tempo trascorso. Il tempo fisico viene monitorato attraverso la periferica del timer di interruzione programmabile (PIT) dell'MCU.

Interfaccia tra LVGL e il componente AEK-LCD-DT028V1

L'interfaccia tra AEK-LCD-LVGL e il componente AEK-LCD-DT028V1 è implementata da un file denominato lcd_lvgl.c situato nella cartella "aek_lcd_lvgl_component_rla". Questo file contiene funzioni per:

• inizializzare la libreria LVGL,
• gestire il timer interno LVGL,
• interfacciare la libreria LVGL con la libreria grafica base implementata dal componente AEK-LCD-DT028V1.

Le cinque funzioni chiave sono spiegate nei paragrafi seguenti.
 3.1 Inizializzazione display
La funzione aek_lcd_lvgl_display_init inizializza le due strutture chiave LVGL, Disprove e IndevDriver.
 3.1.1 Confutare
L'obiettivo principale della struttura Disprove è contenere il buffer di disegno per LVGL. Il campo Disprove draw_buf punta alla struttura del buffer di memoria in grado di contenere fino a due buffer di memoria diversi. Il campo draw_buf viene inizializzato con la funzione lv_disp_draw_buf_init().Nel codice precedente, i parametri DISP_HOR_RES e DISP_VER_RES rappresentano la dimensione LCD.
Nota:
La dimensione del buffer deve essere personalizzata in base alla memoria disponibile del sistema. La guida ufficiale LVGL consiglia di scegliere la dimensione dei buffer di disegno pari ad almeno 1/10 della dimensione dello schermo. Se viene utilizzato un secondo buffer opzionale, LVGL può attingere a un buffer mentre i dati dell'altro buffer vengono inviati per essere visualizzati in background.Gli altri parametri della struttura sono le dimensioni dello schermo, le due funzioni flush e monitor_cb, che analizzeremo in seguito. Una volta riempita, la struttura deve essere registrata con la funzione dedicata lv_disp_drv_register() per impostare una visualizzazione attiva.
3.1.2 IndevDriver
L'IndevDriver viene inizializzato come segue:I campi chiave definiti sono il tipo di dispositivo utilizzato e la funzione per gestirlo. Anche in questo caso è necessario registrare la struttura inizializzata per rendere attivo il dispositivo.
3.2 a filo
La funzione flush utilizza la libreria grafica base del componente AEK-LCD-DT028V1 per disegnare, sul display LCD, l'immagine presente nel buffer di memoria inizializzato secondo il paragrafo precedente.Lo scheletro della funzione flush è stato fornito dalla funzione LVGL e personalizzato per il driver dello schermo LCD in uso (ad esempio, aek_ili9341_drawPixel – disegno pixel). I parametri di input sono:

• dry: il puntatore al Disprove
• area: buffer che contiene l'area specifica da aggiornare
• colore: buffer che contiene i colori da stampare.

3.3 monitor_cb
La funzione monitor_cb è definita nella guida ufficiale LVGL e non richiede personalizzazioni.3.4 mio_input_letto
La funzione my_input_read è incaricata di gestire ad alto livello l'input proveniente dallo schermo LCD.
Lo scheletro della funzione è definito dalla libreria LVGL. I parametri di input sono:

• drv: puntatore al driver di input inizializzato
• data: contiene le coordinate x,y convertite in pixel dei punti toccati. L'immagine seguente mostra l'implementazione della funzione my_input_read:

3.5 Aggiorna schermata
La funzione aek_lcd_lvgl_refresh_screen aggiorna i timer interni LVGL.
Nota: Questa funzione deve essere inserita correttamente nel codice dell'applicazione per soddisfare i vincoli temporali LVGL.

Ecosistema AutoDevKit

Lo sviluppo dell'applicazione che utilizza AEK-LCD-LVGL richiede un progresso completotage del AutoDevKit ecosistema, le cui componenti fondamentali sono:

• AutoDevKit Studio IDE installabile da www.st.com/autodevkitsw
• Software di debug SPC5-UDESTK per Windows o debugger aperto
•  Azionamento AEK-LCD-LVGL

4.1AutoDevKitStudio 
AutoDevKit Studio (STSW-AUTODEVKIT) è un ambiente di sviluppo integrato (IDE) basato su Eclipse progettato per assistere lo sviluppo di applicazioni embedded basate su microcontrollori SPC5 Power Architecture a 32 bit.
Il pacchetto include una procedura guidata dell'applicazione per avviare progetti con tutti i componenti rilevanti e gli elementi chiave necessari per generare il codice sorgente dell'applicazione finale. AutoDevKit Studio dispone inoltre di:

• la possibilità di integrare altri prodotti software dal mercato standard Eclipse
• Componente del compilatore GCC GNU C con licenza gratuita
• supporto per compilatori standard del settore
• supporto per microcontrollori multi-core
•  Editor PinMap per facilitare la configurazione dei pin MCU
•  componenti hardware e software integrati, controllo della compatibilità dei componenti e strumenti di configurazione di MCU e periferiche
• la possibilità di creare nuove soluzioni impiantistiche partendo da quelle esistenti aggiungendo o rimuovendo schede funzionali compatibili
• il nuovo codice può essere generato immediatamente per qualsiasi MCU compatibile
•  API applicative di alto livello per controllare ciascun componente funzionale, comprese quelle per il componente AEK-LCDLVGL.

Per ulteriori informazioni fare riferimento a UM2623 (in particolare, Sezione 6 e Sezione 7) o guardare i video tutorial.
4.2 Componente AEK_LCD_LVGL
I driver AEK-LVGL vengono forniti con l'installazione STSW-AUTODEVKIT (dalla versione 2.0.0 in poi) per facilitare la fase di programmazione.
Aggiorna l'installazione di AutoDevKit per ottenere la versione più recente. Una volta installato correttamente, selezionare il componente denominato AEK_LVGL Component RLA.
4.2.1 Configurazione componente AEK_LCD_LVGL
Per configurare il componente, seguire la procedura seguente.
Passaggio 1. Impostare il tempo Refr_Period. Questo è il periodo di aggiornamento della schermata (il valore consigliato è 30).
Passaggio 2. Impostare il tempo Read_Period. Questo è il tempo minimo tra due rilevamenti di tocco successivi (il valore consigliato è 30).
Passaggio 3. Seleziona la casella Disegna complesso per abilitare widget avanzati come ombre, sfumature, angoli arrotondati, cerchi, archi, linee inclinate e trasformazioni di immagini.
Passaggio 4. Seleziona i caratteri che desideri utilizzare. Considera che ogni carattere richiede memoria flash aggiuntiva per il codice dell'applicazione generato.

Come creare un progetto AutoDevKit con il componente AEK-LCD-LVGL basato su SPC58EC

I passaggi sono:
Passaggio 1. Creare una nuova applicazione AutoDevKit Studio per il microcontroller della serie SPC58EC e aggiungere i seguenti componenti:
– Componente pacchetto di inizializzazione SPC58ECxx RLA
– Componente driver di basso livello SPC58ECxx RLA
Nota:
Aggiungi questi componenti all'inizio, altrimenti i componenti rimanenti non saranno visibili.
Passaggio 2. Aggiungi i seguenti componenti aggiuntivi:
Passaggio 2a. Componente del pacchetto Init AutoDevKit
Passaggio 2b. Componente della piattaforma SPC58ECxx RLA
Passaggio 2c. AEK-LCD-DT028V1 Componente RLA (vedi UM2939 per la configurazione)
Passaggio 2d. Componente AEK-LCD-LVGL RLAPassaggio 3. Fare clic sul pulsante [Assegnazione] nella finestra di configurazione AEK-LCD-LVGL. Questa operazione delega la configurazione AEK-LCD-LVGL ad AutoDevKit.
Passo 4. L'allocazione ha abilitato la periferica timer PIT. Puoi verificarlo nel componente Driver di basso livello.Passaggio 5. Generare e creare l'applicazione utilizzando le icone appropriate in AutoDevKit Studio. La cartella del progetto verrà quindi popolata con new files, incluso main.c. La cartella dei componenti viene quindi popolata con AEKLCD-DT028V1 e
Driver AEK-LCD-LVGL.
Passaggio 6. Apri il maniaco file e includono AEK-LCD-DT028V1.h e AEK_LCD_LVGL.h files.Passaggio 7. Nella mania file, dopo la funzione irqIsrEnable(), inserire le seguenti funzioni obbligatorie:Passaggio 8. Nel main.c, copia e incolla un example dalla libreria LVGL presa dalla guida ufficiale ed inseritelo nel file main().Passaggio 9. Salvare, generare e compilare l'applicazione.
Passaggio 10. Apri la scheda view editor fornito da AutoDevKit Fornisce una guida grafica punto a punto su come cablare le schede.
Passaggio 11. Collegare l'AEK-LCD-DT028V1 a una porta USB del PC utilizzando un cavo da mini-USB a USB.
Passaggio 12. Avviare SPC5-UDESTK-SW e aprire il debug file nella cartella AEK-LCD-LVGL– Applicazione /UDE.
Passaggio 13. Esegui ed esegui il debug del codice.

Demo disponibili per AEK-LVGL

Sono disponibili diverse demo fornite con il componente AEK-LCD-LVGL:

• SPC582Bxx_RLA AEK_LCD_LVGL Applicazione di prova
• SPC58ECxx_RLA Applicazione di prova AEK-LCD_LVGL
• Demo AVAS a doppio schermo – SPC58ECxx_RLA_MainEcuForIntegratAVASControl – Applicazione di test

Nota: Altre demo potrebbero diventare disponibili con le nuove versioni di AutoDevKit.

Applicazione avanzata esample – demo AVAS a doppio schermo

Un'applicazione avanzata è stata implementata utilizzando LVGL. Questa applicazione disegna un indicatore di giri motore su un display e gestisce le relative animazioni dell'indicatore.
L'applicazione AVAS implementata si basa sulla scheda AEK-AUD-C1D9031 e simula il rumore del motore dell'auto a bassa velocità per avvisare i pedoni dell'avvicinarsi di un veicolo elettrico.
Nella demo, simuliamo l'accelerazione e la decelerazione (ovvero un aumento/diminuzione dei giri) del motore di un'auto e il suo volume attraverso un pannello di controllo implementato sullo schermo LCD dell'AEK-LCD-DT028V1.Abbiamo esteso la demo aggiungendo un secondo LCD AEK-LCD-DT028V1 e utilizzando la libreria LVGL per creare un tachimetro per misurare i valori dei giri del motore.
7.1 Widget LVGL utilizzati
Per sviluppare la demo AVAS a doppio schermo, abbiamo utilizzato i seguenti widget LVGL:

• Un'immagine utilizzata come sfondo del contagiri
• Un arco utilizzato come indicatore del contagiri
• Un'animazione che aggiorna il valore dell'arco in base ai giri del motore

7.1.1 Un widget immagine LVGL
Per utilizzare un'immagine con la libreria LVGL, convertila in un array C utilizzando un servizio online gratuito convertitore.Nota:
Quando converti l'immagine ricordati di spuntare la casella del formato Big-Endian.
Nella demo AVAS a doppio schermo, l'array C che rappresenta l'immagine del contagiri è stato denominato Gauge. Il widget immagine è stato personalizzato come segue:Dove:

• lv_img_declare: viene utilizzato per dichiarare un'immagine chiamata Gauge.
• lv_img_create: viene utilizzato per creare un oggetto immagine e allegarlo alla schermata corrente.
•  lv_img_set_src: questa è l'immagine ottenuta dal convertitore LVGL mostrato in precedenza (si consiglia di utilizzare il formato jpg).
• lv_obj_align: viene utilizzato per allineare l'immagine al centro con un determinato offset.
• lv_obj_set_size: viene utilizzato per impostare la dimensione dell'immagine.

Nota:
Per maggiori dettagli su come gestire un'immagine con la libreria LVGL, fare riferimento alla documentazione ufficiale.
7.1.2 Un widget arco LVGL
È stato creato un arco multicolore per mostrare i giri istantanei del motore. L'arco multicolore è costituito da due colori contigui, rispettivamente rosso e blu.Il codice seguente mostra come creare un file arco:Dove:

• lv_arc_create: crea un oggetto arco.
• lv_arc_set_rotation: imposta la rotazione dell'arco.
•  lv_arc_set_bg_angles: imposta il valore massimo e minimo dell'arco in gradi.
• lv_arc_set_value: imposta il valore iniziale dell'arco a zero.
•  lv_obj_set_size: imposta le dimensioni dell'arco.
• lv_obj_remove_style: rimuove il puntatore finale dell'arco.
• lv_obj_clear_flag: imposta l'arco come non cliccabile.
• lv_obj_align: allinea l'arco al centro con un offset specificato.

7.1.3 Animazione associata al widget
Una specifica funzione di animazione dell'arco viene creata e passata al motore LVGL per visualizzare le modifiche del numero di giri. Il codice funzione è the seguente:Dove:

• arc: è il puntatore al widget arco corrente
•  ritardo: è il tempo di ritardo prima dell'avvio dell'animazione
• inizio: è la posizione iniziale dell'arco
•  end: è la posizione finale dell'arco
• speed: è la velocità dell'animazione in unità/sec.

Nota: Per maggiori dettagli sulle funzioni di animazione utilizzate, fare riferimento alla documentazione LVGL. Considerando che l'arco completo è composto da due archi contigui, abbiamo dovuto gestire adeguatamente la funzione di animazione. A questo scopo analizziamo due diversi scenari:

1. Caso: l'animazione coinvolge un arco In questo semplice caso, assegniamo una singola animazione all'arco.
2. Caso: l'animazione coinvolge due archi. In questo caso l'animazione del secondo arco inizia alla fine dell'animazione del primo.

Una funzione LVGL specifica (lv_anim_speed_to_time) calcola il tempo di animazione. Questo tempo di esecuzione viene utilizzato per calcolare il ritardo dell'animazione del secondo arco.7.2 Implementazione dual-core
Nella demo AVAS a doppio schermo, le attività di visualizzazione e riproduzione audio vengono eseguite contemporaneamente in un sistema integrato in tempo reale. Per sopperire ad una possibile perdita di reattività del sistema, abbiamo deciso di utilizzare due core diversi: uno dedicato al display ed uno alla riproduzione audio.
La scheda AEK-MCU-C4MLIT1 ospita un microcontrollore SPC58EC80E5 con processore dual core, la soluzione migliore per il caso sopra descritto.
Nel dettaglio:

• Core 2: è il primo ad avviarsi, inizializza la libreria e poi esegue il codice dell'applicazione.
• Core 0: chiama la funzione aek_lcd_lvgl_refresh_screen() all'interno del loop principale, per aggiornare continuamente il display e leggere l'input touch.

Le funzioni PIT e aek_lcd_lvgl_refresh_screen() devono essere posizionate nello stesso core.
Cronologia delle revisioni
Tabella 1. Cronologia delle revisioni del documento

Data	Revisione	Cambiamenti
4-Ott-23	1	Versione iniziale.

AVVISO IMPORTANTE – LEGGERE ATTENTAMENTE
STMicroelectronics NV e le sue consociate ("ST") si riservano il diritto di apportare cambiamenti, correzioni, miglioramenti, modifiche e migliorie ai prodotti ST e/o al presente documento in qualsiasi momento senza preavviso. Gli acquirenti devono ottenere le ultime informazioni pertinenti sui prodotti ST prima di effettuare ordini. I prodotti ST sono venduti secondo i termini e le condizioni di vendita di ST in vigore al momento della conferma dell'ordine. Gli acquirenti sono gli unici responsabili della scelta, della selezione e dell'uso dei prodotti ST e la ST non si assume alcuna responsabilità per l'assistenza all'applicazione o la progettazione dei prodotti degli acquirenti.
Nel presente documento ST non concede alcuna licenza, espressa o implicita, su alcun diritto di proprietà intellettuale.
La rivendita di prodotti ST con disposizioni diverse dalle informazioni qui stabilite invaliderà qualsiasi garanzia concessa da ST per tale prodotto.
ST e il logo ST sono marchi di ST. Per ulteriori informazioni sui marchi ST, fare riferimento a www.st.com/trademarksTutti gli altri nomi di prodotti o servizi sono di proprietà dei rispettivi proprietari.
Le informazioni contenute in questo documento sostituiscono e sostituiscono le informazioni precedentemente fornite in qualsiasi versione precedente di questo documento. © 2023 STMicroelectronics – Tutti i diritti riservati

UM3236 – Rev 1 – ottobre 2023
Per ulteriori informazioni contattare l'ufficio vendite locale della STMicroelectronics

Documenti / Risorse

Librerie LVGL UM3236 STMicroelectronics per display LCD [pdf] Manuale d'uso AEK-LCD-DT028V1, UM3236, UM3236 Librerie LVGL per display LCD, Librerie LVGL per display LCD, Librerie per display LCD, Display LCD

Riferimenti

• Manuale d'uso