{"id":129670,"date":"2025-11-25T13:54:31","date_gmt":"2025-11-25T12:54:31","guid":{"rendered":"https:\/\/riverdi.com\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide"},"modified":"2026-05-11T15:24:27","modified_gmt":"2026-05-11T13:24:27","slug":"getting-started-with-lvgl-on-riverdi-stm32-display-full-guide","status":"publish","type":"post","link":"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide","title":{"rendered":"Come iniziare con LVGL su Riverdi STM32 Display &#8211; guida completa"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #002175;color:#002175\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #002175;color:#002175\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Hardware\" >Hardware<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Connessioni\" >Connessioni<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Software\" >Software<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Clona_il_progetto\" >Clona il progetto<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Opzionale_clona_la_libreria_LVGL_piu_recente\" >Opzionale: clona la libreria LVGL pi\u00f9 recente<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Importare_il_progetto_in_STM32CubeIDE\" >Importare il progetto in STM32CubeIDE<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Costruisci_ed_esegui_lesempio_LVGL\" >Costruisci ed esegui l&#8217;esempio LVGL<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Creare_un_esempio_personale\" >Creare un esempio personale<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Analisi_del_nostro_codice\" >Analisi del nostro codice<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#I_prossimi_passi\" >I prossimi passi<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Sintesi\" >Sintesi<\/a><\/li><\/ul><\/nav><\/div>\n<p>Questa guida mostra come dare vita a un display STM32H7 Riverdi utilizzando <strong>LVGL<\/strong>: dalla clonazione del repository all&#8217;esecuzione della tua prima interfaccia personalizzata con un&#8217;immagine e un pulsante.<br \/>\nImparerai come:<\/p>\n<ul>\n<li>collegare l&#8217;hardware,<\/li>\n<li>apri e costruisci il progetto in <strong>STM32CubeIDE<\/strong>,<\/li>\n<li>eseguire la demo LVGL,<\/li>\n<li>e creare una semplice interfaccia utente personalizzata con il logo Riverdi e un pulsante interattivo.<\/li>\n<\/ul>\n<p>Alla fine, avrai una base funzionante per il tuo progetto GUI basato su LVGL sui display embedded STM32 di Riverdi.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Hardware\"><\/span>Hardware<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"table-wrapper\">\n<table>\n<tbody>\n<tr>\n<td style=\"text-align: left;\">Display Riverdi<\/td>\n<td style=\"text-align: left;\"><strong>RVT101HVLNWC00-B<\/strong><\/td>\n<td style=\"text-align: left;\">Display integrato da 10,1&#8243; IPS, basato su STM32H7<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">Programmatore<\/td>\n<td style=\"text-align: left;\"><strong>ST-Link V3<\/strong><\/td>\n<td style=\"text-align: left;\">Collegato a SWD Molex sul retro del display<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">Alimentazione<\/td>\n<td style=\"text-align: left;\">12 V DC<\/td>\n<td style=\"text-align: left;\">Collegato all&#8217;ingresso di alimentazione Molex<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">Cavi<\/td>\n<td style=\"text-align: left;\">Micro-USB \u00d72<\/td>\n<td style=\"text-align: left;\">Uno per ST-Link, uno per l&#8217;alimentazione (se alimentato via USB)<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">PC<\/td>\n<td style=\"text-align: left;\">Windows\/Linux\/macOS<\/td>\n<td style=\"text-align: left;\">Con STM32CubeIDE installato<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Connessioni\"><\/span>Connessioni<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Il display dell&#8217;STM32H7 utilizza due connettori Molex:<\/p>\n<ul>\n<li><strong>SWD (programmazione)<\/strong> &#8211; collega qui il tuo ST-Link.<\/li>\n<li><strong>Alimentazione (12 V)<\/strong> &#8211; per l&#8217;alimentazione esterna.<\/li>\n<\/ul>\n<p>\u26a0\ufe0f Non alimentare il display e collegare ST-Link contemporaneamente per la prima volta senza aver controllato la corretta polarit\u00e0.<\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-127562\" src=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_Grafika_POMIEDZY-TEKSTY_1_hardware.jpg\" alt=\"\" width=\"826\" height=\"400\" srcset=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_Grafika_POMIEDZY-TEKSTY_1_hardware.jpg 826w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_Grafika_POMIEDZY-TEKSTY_1_hardware-300x145.jpg 300w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_Grafika_POMIEDZY-TEKSTY_1_hardware-768x372.jpg 768w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_Grafika_POMIEDZY-TEKSTY_1_hardware-600x291.jpg 600w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_Grafika_POMIEDZY-TEKSTY_1_hardware-64x31.jpg 64w\" sizes=\"(max-width: 826px) 100vw, 826px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Software\"><\/span>Software<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"table-wrapper\">\n<table>\n<thead>\n<tr>\n<td style=\"text-align: left;\"><strong>Strumento<\/strong><\/td>\n<td style=\"text-align: left;\"><strong>Scopo<\/strong><\/td>\n<td style=\"text-align: left;\"><strong>Scarica<\/strong><\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\"><strong>STM32CubeIDE<\/strong><\/td>\n<td style=\"text-align: left;\">Sviluppo, costruzione e flash<\/td>\n<td style=\"text-align: left;\"><a href=\"https:\/\/www.st.com\/en\/development-tools\/stm32cubeide.html\">STMicroelectronics<\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong>Creatore di progetti LVGL<\/strong><\/td>\n<td style=\"text-align: left;\">Modelli di progetto per display Riverdi<\/td>\n<td style=\"text-align: left;\"><a href=\"https:\/\/lvgl.io\">LVGL.io<\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong>Git<\/strong> (opzionale)<\/td>\n<td style=\"text-align: left;\">Clona i repository<\/td>\n<td style=\"text-align: left;\"><a href=\"https:\/\/git-scm.com\">Git SCM<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Clona_il_progetto\"><\/span>Clona il progetto<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Utilizzando LVGL Project Creator, scarica il progetto per le dimensioni dello schermo che stai utilizzando. Tutto ci\u00f2 che devi fare \u00e8 scrivere Riverdi nella barra di ricerca a sinistra, selezionare il progetto corretto e premere Download come puoi vedere nell&#8217;immagine qui sotto. <\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-127567\" src=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-Project-Creator.png\" alt=\"\" width=\"940\" height=\"508\" srcset=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-Project-Creator.png 940w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-Project-Creator-300x162.png 300w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-Project-Creator-768x415.png 768w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-Project-Creator-600x324.png 600w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-Project-Creator-64x35.png 64w\" sizes=\"(max-width: 940px) 100vw, 940px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Opzionale_clona_la_libreria_LVGL_piu_recente\"><\/span>Opzionale: clona la libreria LVGL pi\u00f9 recente<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Se non sei sicuro che la libreria LVGL che hai nel tuo progetto sia la pi\u00f9 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: <\/p>\n<p><em>cd riverdi-lvgl-101\/Middlewares\/Third_Party\/  <\/em><\/p>\n<p><em>git clone https:\/\/github.com\/lvgl\/lvgl.git lvgl<\/em><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Importare_il_progetto_in_STM32CubeIDE\"><\/span>Importare il progetto in STM32CubeIDE<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>Apri <strong>STM32CubeIDE<\/strong>.<\/li>\n<li>Vai su <strong>File \u2192 Apri progetti dal file system&#8230;<\/strong><\/li>\n<li>Clicca su <strong>Directory&#8230;,<\/strong> seleziona la sottodirectory STM32CubeIDE della tua cartella clonata riverdi-lvgl-101.<\/li>\n<li>Clicca su <strong>Fine<\/strong>.<\/li>\n<\/ol>\n<p>Il progetto apparir\u00e0 ora nell&#8217;<strong>Esplora progetti.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-127575\" src=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-import-to-cube.png\" alt=\"\" width=\"938\" height=\"622\" srcset=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-import-to-cube.png 938w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-import-to-cube-300x199.png 300w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-import-to-cube-768x509.png 768w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-import-to-cube-600x398.png 600w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/LVGL-import-to-cube-64x42.png 64w\" sizes=\"(max-width: 938px) 100vw, 938px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Costruisci_ed_esegui_lesempio_LVGL\"><\/span>Costruisci ed esegui l&#8217;esempio LVGL<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Apri il file main.c che si trova in CM7\/Applicazioni\/Utente\/Core. Dopo tutte le inizializzazioni, dovrebbe esserci una funzione<em> lv_demo_widgets()<\/em> che viene chiamata prima del PWM e del kernel. <\/p>\n<p>Puoi costruire il progetto premendo Ctrl+B o l&#8217;icona del martello in alto a sinistra dello schermo. Il processo di creazione dovrebbe richiedere un po&#8217; 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.  <\/p>\n<p>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 <em>lv_demo_widgets()<\/em>.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Creare_un_esempio_personale\"><\/span>Creare un esempio personale<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Creeremo un esempio personale contenente un&#8217;immagine e un pulsante che cambia il colore dello schermo in uno dei nostri colori Riverdi.<\/p>\n<p><strong>Passo 1 &#8211; Preparare il logo Riverdi<\/strong><\/p>\n<ol>\n<li>Scarica il<strong> logo Riverdi<\/strong> dal <a href=\"https:\/\/riverdi.com\/it\/centro-multimediale\">sito web Riverdi<\/a>.<\/li>\n<li>Apri il <a href=\"https:\/\/lvgl.io\/tools\/imageconverter\">convertitore di immagini LVGL<\/a>.<\/li>\n<li>Scegli il formato del colore: <strong>RGB565<\/strong><\/li>\n<li>Clicca su &#8220;Converti&#8221; e scarica il file .c generato.<\/li>\n<li>Posizionalo accanto al file main.c.<\/li>\n<li>Aggiungi questa riga all&#8217;inizio di main.c:\n<ul>\n<li><em>extern const lv_image_dsc_t riverdi_logo;<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><strong>Nota<\/strong>: se la tua immagine ha uno sfondo nero, ci\u00f2 \u00e8 dovuto al formato .png: nessuno sfondo viene tradotto da Image Converter in 0x00 &#8211; colore nero. Se vuoi renderlo bianco, cambia tutti gli 0x00 in 0xff nel tuo IDE o editor di testo. <\/p>\n<p><strong>Passo 2 &#8211; Aggiungere un nuovo file sorgente<\/strong><\/p>\n<p>In STM32CubeIDE, crea un nuovo file:<\/p>\n<p>Applicazione\/Utente\/Core\/ui_riverdi_logo.c<\/p>\n<pre>#include \"lvgl.h\"\nextern const lv_image_dsc_t riverdi_logo;\n\nstatico lv_color_t colors[3];\nstatico uint8_t color_index = 0;\nstatico lv_obj_t * scr;\n\nvoid statico color_btn_event_cb(lv_event_t * e)\n{\ncolor_index = (color_index + 1) % 3;\nlv_obj_set_style_bg_color(scr, colors[color_index], LV_PART_MAIN);\n}\n\nvoid ui_riverdi_logo_create(void)\n{\ncolors[0] = lv_color_make(0, 0, 255); \/\/ Blu\ncolors[1] = lv_color_make(0, 255, 0); \/\/ Verde\ncolors[2] = lv_color_make(255, 0, 0); \/\/ Rosso\n\nscr = lv_obj_create(NULL);\nlv_obj_set_style_bg_color(scr, colors[color_index], LV_PART_MAIN);\nlv_screen_load(scr);\n\nlv_obj_t * img = lv_image_create(scr);\nlv_image_set_src(img, &amp;riverdi_logo);\nlv_obj_align(img, LV_ALIGN_CENTER, 0, -40);\n\nlv_obj_t * btn = lv_button_create(scr);\nlv_obj_align(btn, LV_ALIGN_CENTER, 0, 100);\nlv_obj_add_event_cb(btn, color_btn_event_cb, LV_EVENT_CLICKED, NULL);\n\nlv_obj_t * label = lv_label_create(btn);\nlv_label_set_text(label, \"Cambia colore\");\nlv_obj_center(label);\n}<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Passo 3 &#8211; Chiamare la funzione<\/strong><\/p>\n<p>Apri nuovamente il file main.c e sostituisci <em>lv_demo_widgets();<\/em> con <em>ui_riverdi_logo_create();<\/em><\/p>\n<p>Quindi costruisci e flasha il progetto.<\/p>\n<p><strong>Nota<\/strong>: se si verifica un errore di compilazione, ricostruisci: CubeIDE a volte indicizza male i nuovi file.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Analisi_del_nostro_codice\"><\/span>Analisi del nostro codice<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><em>void color_btn_event_cb()<\/em> &#8211; questa funzione \u00e8 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&#8217;array colors[]. <\/p>\n<p><em>void ui_riverdi_logo_create()<\/em> &#8211; questa funzione \u00e8 la nostra intera interfaccia utente. Dall&#8217;alto: <\/p>\n<ul>\n<li>Creiamo la schermata con uno dei colori di sfondo.<\/li>\n<li>Mettiamo l&#8217;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.  <\/li>\n<li>Poi creiamo il pulsante: non dandogli alcuno stile, mantiene l&#8217;aspetto e il comportamento predefinito. Lo posizioniamo 100px sotto il centro in modo che non si sovrapponga all&#8217;immagine. <\/li>\n<li>Infine, creiamo l&#8217;etichetta del pulsante: &#8220;Cambia colore&#8221;. Per inserirla nel pulsante, basta passare il pulsante come parametro in lv_label_create. <\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"I_prossimi_passi\"><\/span>I prossimi passi<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ora hai un ambiente LVGL funzionante sulla piattaforma STM32H7 di Riverdi.<br \/>\nDa qui puoi:<\/p>\n<ul>\n<li>Aggiungi altri widget (etichette, cursori, grafici)<\/li>\n<li>Integrare i gesti tattili<\/li>\n<li>Esplora le animazioni e i temi<\/li>\n<\/ul>\n<div class=\"table-wrapper\">\n<table>\n<thead>\n<tr>\n<td style=\"text-align: left;\"><strong>Risorse<\/strong><\/td>\n<td style=\"text-align: left;\"><strong>Link<\/strong><\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\"><strong>Documentazione LVGL<\/strong><\/td>\n<td style=\"text-align: left;\"><a href=\"https:\/\/docs.lvgl.io\">https:\/\/docs.lvgl.io<\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong>Riverdi GitHub<\/strong><\/td>\n<td style=\"text-align: left;\"><a href=\"https:\/\/github.com\/riverdi\">https:\/\/github.com\/riverdi<\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong>Creatore di progetti LVGL<\/strong><\/td>\n<td style=\"text-align: left;\"><a href=\"https:\/\/lvgl.io\/tools\/project-creator\">https:\/\/lvgl.io\/tools\/project-creator<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Sintesi\"><\/span>Sintesi<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Hai appena:<\/p>\n<ol>\n<li>Clona e apri il progetto LVGL per il display STM32H7 Riverdi,<\/li>\n<li>Esegui l&#8217;applicazione demo di LVGL,<\/li>\n<li>Crea la tua schermata personalizzata con un&#8217;immagine e un pulsante.<\/li>\n<\/ol>\n<p>Questo flusso di lavoro \u00e8 la base perfetta per sviluppare <strong>GUI professionali<\/strong> sui display integrati Riverdi utilizzando LVGL.<\/p>\n<p>&nbsp;<\/p>\n<p><iframe style=\"aspect-ratio: 16\/9;\" title=\"\" src=\"https:\/\/www.youtube.com\/embed\/IE_kVkU9eMQ\" width=\"100%\" height=\"auto\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\">&lt;\/ifram<\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Questa guida mostra come dare vita a un display STM32H7 Riverdi utilizzando LVGL: dalla clonazione del repository all&#8217;esecuzione della tua prima interfaccia personalizzata con un&#8217;immagine e un pulsante. Imparerai come: collegare l&#8217;hardware, apri e costruisci il progetto in STM32CubeIDE, eseguire la demo LVGL, e creare una semplice interfaccia utente personalizzata con il logo Riverdi e [&hellip;]<\/p>\n","protected":false},"author":2659,"featured_media":127560,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[4710],"tags":[],"class_list":["post-129670","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visualizza-101"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Come iniziare con LVGL su Riverdi STM32 Display - guida completa - Riverdi<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come iniziare con LVGL su Riverdi STM32 Display - guida completa - Riverdi\" \/>\n<meta property=\"og:description\" content=\"Questa guida mostra come dare vita a un display STM32H7 Riverdi utilizzando LVGL: dalla clonazione del repository all&#8217;esecuzione della tua prima interfaccia personalizzata con un&#8217;immagine e un pulsante. Imparerai come: collegare l&#8217;hardware, apri e costruisci il progetto in STM32CubeIDE, eseguire la demo LVGL, e creare una semplice interfaccia utente personalizzata con il logo Riverdi e [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\" \/>\n<meta property=\"og:site_name\" content=\"Riverdi\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/riverdi.displays\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-25T12:54:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-11T13:24:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_COVER_LVGL.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kacper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@riverdidisplays\" \/>\n<meta name=\"twitter:site\" content=\"@riverdidisplays\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kacper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/it\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/it\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\"},\"author\":{\"name\":\"Kacper\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/it#\\\/schema\\\/person\\\/07605024d6619f9bd872665515d9bbfa\"},\"headline\":\"Come iniziare con LVGL su Riverdi STM32 Display &#8211; guida completa\",\"datePublished\":\"2025-11-25T12:54:31+00:00\",\"dateModified\":\"2026-05-11T13:24:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/it\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\"},\"wordCount\":966,\"image\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/it\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/riverdi.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/BLOG_COVER_LVGL.jpg\",\"articleSection\":[\"Visualizza 101\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/it\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\",\"url\":\"https:\\\/\\\/riverdi.com\\\/it\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\",\"name\":\"Come iniziare con LVGL su Riverdi STM32 Display - guida completa - Riverdi\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/it#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/it\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/it\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/riverdi.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/BLOG_COVER_LVGL.jpg\",\"datePublished\":\"2025-11-25T12:54:31+00:00\",\"dateModified\":\"2026-05-11T13:24:27+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/it#\\\/schema\\\/person\\\/07605024d6619f9bd872665515d9bbfa\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/it\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/riverdi.com\\\/it\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/it\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#primaryimage\",\"url\":\"https:\\\/\\\/riverdi.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/BLOG_COVER_LVGL.jpg\",\"contentUrl\":\"https:\\\/\\\/riverdi.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/BLOG_COVER_LVGL.jpg\",\"width\":1280,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/it\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Front Page\",\"item\":\"https:\\\/\\\/riverdi.com\\\/it\\\/prima-pagina\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Come iniziare con LVGL su Riverdi STM32 Display &#8211; guida completa\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/it#website\",\"url\":\"https:\\\/\\\/riverdi.com\\\/it\",\"name\":\"Riverdi\",\"description\":\"Global TFT LCD Manufacturer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/riverdi.com\\\/it?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/it#\\\/schema\\\/person\\\/07605024d6619f9bd872665515d9bbfa\",\"name\":\"Kacper\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a4711bf691e00761d7de544f816446f9f5a7336cea288862cef92938d19d0e12?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a4711bf691e00761d7de544f816446f9f5a7336cea288862cef92938d19d0e12?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a4711bf691e00761d7de544f816446f9f5a7336cea288862cef92938d19d0e12?s=96&d=mm&r=g\",\"caption\":\"Kacper\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Come iniziare con LVGL su Riverdi STM32 Display - guida completa - Riverdi","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide","og_locale":"it_IT","og_type":"article","og_title":"Come iniziare con LVGL su Riverdi STM32 Display - guida completa - Riverdi","og_description":"Questa guida mostra come dare vita a un display STM32H7 Riverdi utilizzando LVGL: dalla clonazione del repository all&#8217;esecuzione della tua prima interfaccia personalizzata con un&#8217;immagine e un pulsante. Imparerai come: collegare l&#8217;hardware, apri e costruisci il progetto in STM32CubeIDE, eseguire la demo LVGL, e creare una semplice interfaccia utente personalizzata con il logo Riverdi e [&hellip;]","og_url":"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide","og_site_name":"Riverdi","article_publisher":"https:\/\/www.facebook.com\/riverdi.displays\/","article_published_time":"2025-11-25T12:54:31+00:00","article_modified_time":"2026-05-11T13:24:27+00:00","og_image":[{"width":1280,"height":600,"url":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_COVER_LVGL.jpg","type":"image\/jpeg"}],"author":"Kacper","twitter_card":"summary_large_image","twitter_creator":"@riverdidisplays","twitter_site":"@riverdidisplays","twitter_misc":{"Scritto da":"Kacper","Tempo di lettura stimato":"6 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#article","isPartOf":{"@id":"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide"},"author":{"name":"Kacper","@id":"https:\/\/riverdi.com\/it#\/schema\/person\/07605024d6619f9bd872665515d9bbfa"},"headline":"Come iniziare con LVGL su Riverdi STM32 Display &#8211; guida completa","datePublished":"2025-11-25T12:54:31+00:00","dateModified":"2026-05-11T13:24:27+00:00","mainEntityOfPage":{"@id":"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide"},"wordCount":966,"image":{"@id":"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#primaryimage"},"thumbnailUrl":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_COVER_LVGL.jpg","articleSection":["Visualizza 101"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide","url":"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide","name":"Come iniziare con LVGL su Riverdi STM32 Display - guida completa - Riverdi","isPartOf":{"@id":"https:\/\/riverdi.com\/it#website"},"primaryImageOfPage":{"@id":"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#primaryimage"},"image":{"@id":"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#primaryimage"},"thumbnailUrl":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_COVER_LVGL.jpg","datePublished":"2025-11-25T12:54:31+00:00","dateModified":"2026-05-11T13:24:27+00:00","author":{"@id":"https:\/\/riverdi.com\/it#\/schema\/person\/07605024d6619f9bd872665515d9bbfa"},"breadcrumb":{"@id":"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#primaryimage","url":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_COVER_LVGL.jpg","contentUrl":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/11\/BLOG_COVER_LVGL.jpg","width":1280,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/riverdi.com\/it\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Front Page","item":"https:\/\/riverdi.com\/it\/prima-pagina"},{"@type":"ListItem","position":2,"name":"Come iniziare con LVGL su Riverdi STM32 Display &#8211; guida completa"}]},{"@type":"WebSite","@id":"https:\/\/riverdi.com\/it#website","url":"https:\/\/riverdi.com\/it","name":"Riverdi","description":"Global TFT LCD Manufacturer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/riverdi.com\/it?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/riverdi.com\/it#\/schema\/person\/07605024d6619f9bd872665515d9bbfa","name":"Kacper","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/a4711bf691e00761d7de544f816446f9f5a7336cea288862cef92938d19d0e12?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a4711bf691e00761d7de544f816446f9f5a7336cea288862cef92938d19d0e12?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a4711bf691e00761d7de544f816446f9f5a7336cea288862cef92938d19d0e12?s=96&d=mm&r=g","caption":"Kacper"}}]}},"_links":{"self":[{"href":"https:\/\/riverdi.com\/it\/wp-json\/wp\/v2\/posts\/129670","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/riverdi.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/riverdi.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/riverdi.com\/it\/wp-json\/wp\/v2\/users\/2659"}],"replies":[{"embeddable":true,"href":"https:\/\/riverdi.com\/it\/wp-json\/wp\/v2\/comments?post=129670"}],"version-history":[{"count":1,"href":"https:\/\/riverdi.com\/it\/wp-json\/wp\/v2\/posts\/129670\/revisions"}],"predecessor-version":[{"id":129672,"href":"https:\/\/riverdi.com\/it\/wp-json\/wp\/v2\/posts\/129670\/revisions\/129672"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/riverdi.com\/it\/wp-json\/wp\/v2\/media\/127560"}],"wp:attachment":[{"href":"https:\/\/riverdi.com\/it\/wp-json\/wp\/v2\/media?parent=129670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/riverdi.com\/it\/wp-json\/wp\/v2\/categories?post=129670"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/riverdi.com\/it\/wp-json\/wp\/v2\/tags?post=129670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}