{"id":129674,"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:43","modified_gmt":"2026-05-11T13:24:43","slug":"getting-started-with-lvgl-on-riverdi-stm32-display-full-guide","status":"publish","type":"post","link":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide","title":{"rendered":"Primeros pasos con LVGL en Riverdi STM32 Display-Gu\u00eda 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=\"Alternar tabla de contenidos\"><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\/es\/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\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Conexiones\" >Conexiones<\/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\/es\/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\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Clonar_el_proyecto\" >Clonar el proyecto<\/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\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Opcional_clona_la_biblioteca_LVGL_mas_reciente\" >Opcional: clona la biblioteca LVGL m\u00e1s reciente<\/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\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Importar_el_proyecto_a_STM32CubeIDE\" >Importar el proyecto a 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\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Construir_y_ejecutar_LVGL_Ejemplo\" >Construir y ejecutar LVGL Ejemplo<\/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\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Crear_nuestro_propio_ejemplo\" >Crear nuestro propio ejemplo<\/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\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Analisis_de_nuestro_codigo\" >An\u00e1lisis de nuestro c\u00f3digo<\/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\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Proximos_pasos\" >Pr\u00f3ximos pasos<\/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\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\/#Resumen\" >Resumen<\/a><\/li><\/ul><\/nav><\/div>\n<p>Esta gu\u00eda muestra c\u00f3mo dar vida a una pantalla Riverdi STM32H7 utilizando <strong>LVGL<\/strong>: desde clonar el repositorio hasta ejecutar tu primera interfaz personalizada con una imagen y un bot\u00f3n.<br \/>\nAprender\u00e1s c\u00f3mo:<\/p>\n<ul>\n<li>conecta el hardware,<\/li>\n<li>abre y construye el proyecto en <strong>STM32CubeIDE<\/strong>,<\/li>\n<li>ejecuta la demo LVGL,<\/li>\n<li>y crear una sencilla interfaz de usuario personalizada con el logotipo de Riverdi y un bot\u00f3n interactivo.<\/li>\n<\/ul>\n<p>Al final, tendr\u00e1s una base de trabajo para tu propio proyecto de interfaz gr\u00e1fica de usuario basada en LVGL en las pantallas embebidas STM32 de 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;\">Pantalla Riverdi<\/td>\n<td style=\"text-align: left;\"><strong>RVT101HVLNWC00-B<\/strong><\/td>\n<td style=\"text-align: left;\">10,1&#8243; IPS, pantalla integrada basada en STM32H7<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">Programador<\/td>\n<td style=\"text-align: left;\"><strong>ST-Link V3<\/strong><\/td>\n<td style=\"text-align: left;\">Conectado al Molex SWD de la parte posterior de la pantalla<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">Alimentaci\u00f3n<\/td>\n<td style=\"text-align: left;\">12 V CC<\/td>\n<td style=\"text-align: left;\">Conectada a la entrada de alimentaci\u00f3n Molex<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">Cables<\/td>\n<td style=\"text-align: left;\">Micro-USB \u00d72<\/td>\n<td style=\"text-align: left;\">Uno para ST-Link, otro para alimentaci\u00f3n (si se alimenta por 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 instalado<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conexiones\"><\/span>Conexiones<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La pantalla de la STM32H7 utiliza dos conectores Molex:<\/p>\n<ul>\n<li><strong>SWD (programaci\u00f3n)<\/strong> &#8211; conecta aqu\u00ed tu ST-Link.<\/li>\n<li><strong>Alimentaci\u00f3n (12 V)<\/strong> &#8211; para alimentaci\u00f3n externa.<\/li>\n<\/ul>\n<p>\u26a0\ufe0f No alimentes la pantalla y conectes el ST-Link simult\u00e1neamente por primera vez sin comprobar la polaridad correcta.<\/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>Herramienta<\/strong><\/td>\n<td style=\"text-align: left;\"><strong>Finalidad<\/strong><\/td>\n<td style=\"text-align: left;\"><strong>Descargar<\/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;\">Desarrollo, construcci\u00f3n y flasheo<\/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>Creador de proyectos LVGL<\/strong><\/td>\n<td style=\"text-align: left;\">Plantillas de proyectos para pantallas 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> (opcional)<\/td>\n<td style=\"text-align: left;\">Clonar repositorios<\/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=\"Clonar_el_proyecto\"><\/span>Clonar el proyecto<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Utilizando el Creador de Proyectos LVGL, descarga el proyecto para el tama\u00f1o de pantalla adecuado que est\u00e9s utilizando. Todo lo que tienes que hacer es escribir Riverdi en la barra de b\u00fasqueda de la izquierda, pulsar el proyecto adecuado y pulsar Descargar como puedes ver en la imagen de abajo. <\/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=\"Opcional_clona_la_biblioteca_LVGL_mas_reciente\"><\/span>Opcional: clona la biblioteca LVGL m\u00e1s reciente<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Si no est\u00e1s seguro de si la librer\u00eda LVGL que tienes en tu proyecto es la m\u00e1s reciente o simplemente quieres actualizarla, puedes simplemente borrar el contenido del directorio y descargar la lib manualmente. Para ello simplemente escribe esto en tu 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=\"Importar_el_proyecto_a_STM32CubeIDE\"><\/span>Importar el proyecto a STM32CubeIDE<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>Abre <strong>STM32CubeIDE<\/strong>.<\/li>\n<li>Ve a <strong>Archivo \u2192 Abrir proyectos desde el sistema de archivos&#8230;.<\/strong><\/li>\n<li>Haz clic en <strong>Directorio&#8230;,<\/strong> selecciona el subdirectorio STM32CubeIDE de tu carpeta clonada riverdi-lvgl-101.<\/li>\n<li>Haz clic en <strong>Finalizar<\/strong>.<\/li>\n<\/ol>\n<p>El proyecto aparecer\u00e1 ahora en el <strong>Explorador de Proyectos.<\/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=\"Construir_y_ejecutar_LVGL_Ejemplo\"><\/span>Construir y ejecutar LVGL Ejemplo<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Abre main.c que se encuentra en CM7\/Application\/User\/Core. Despu\u00e9s de todas las inicializaciones, deber\u00eda haber una funci\u00f3n<em> lv_demo_widgets()<\/em> que se llama antes de PWM y kernel. <\/p>\n<p>Puedes construir el proyecto pulsando Ctrl+B o el icono de un martillo en la parte superior izquierda de la pantalla. El proceso de construcci\u00f3n deber\u00eda llevar alg\u00fan tiempo, hasta unos minutos. Si ves alguna advertencia, no deber\u00eda pasar nada, puede deberse a nuevas versiones de la biblioteca LVGL o de CubeIDE.  <\/p>\n<p>Si quieres consultar m\u00e1s ejemplos de LVGL y analizar su c\u00f3digo, todo lo que tienes que hacer es abrir Middlewares\/LVGL\/lvgl\/examples y llamar a uno de los ejemplos de tu elecci\u00f3n en el lugar donde se llama a <em>lv_demo_widgets()<\/em>.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Crear_nuestro_propio_ejemplo\"><\/span>Crear nuestro propio ejemplo<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Vamos a crear nuestro propio ejemplo que contiene una imagen y un bot\u00f3n que cambia el color de la pantalla a uno de nuestros colores Riverdi.<\/p>\n<p><strong>Paso 1 &#8211; Preparar el logotipo de Riverdi<\/strong><\/p>\n<ol>\n<li>Descarga el<strong> logotipo de Riverdi<\/strong> del <a href=\"https:\/\/riverdi.com\/es\/centro-multimedia\">sitio web de Riverdi<\/a>.<\/li>\n<li>Abre el <a href=\"https:\/\/lvgl.io\/tools\/imageconverter\">Convertidor de Im\u00e1genes LVGL<\/a>.<\/li>\n<li>Elige el formato de color: <strong>RGB565<\/strong><\/li>\n<li>Haz clic en \u00abConvertir\u00bb y descarga el archivo .c generado.<\/li>\n<li>Col\u00f3calo junto a tu archivo main.c.<\/li>\n<li>A\u00f1ade esta l\u00ednea al principio de 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>: Si tu imagen tiene un fondo negro &#8211; se debe al formato .png &#8211; ning\u00fan fondo es traducido por el Conversor de Im\u00e1genes a 0x00 &#8211; color negro. Si quieres hacerlo blanco, simplemente cambia todos los 0x00 a 0xff en tu IDE o editor de texto. <\/p>\n<p><strong>Paso 2 &#8211; A\u00f1adir un nuevo archivo fuente<\/strong><\/p>\n<p>En STM32CubeIDE, crea un nuevo archivo:<\/p>\n<p>Aplicaci\u00f3n\/Usuario\/Core\/ui_riverdi_logo.c<\/p>\n<pre>#include \"lvgl.h\"\nextern const lv_image_dsc_t riverdi_logo;\n\nstatic lv_color_t colors[3];\nstatic uint8_t color_index = 0;\nest\u00e1tico lv_obj_t * scr;\n\nstatic void color_btn_event_cb(lv_event_t * e)\n{\ncolor_index = (color_index + 1) % 3;\nlv_obj_set_style_bg_color(scr, colores[color_index], LV_PART_MAIN);\n}\n\nvoid ui_riverdi_logo_crear(void)\n{\ncolors[0] = lv_color_make(0, 0, 255); \/\/ Azul\ncolors[1] = lv_color_make(0, 255, 0); \/\/ Verde\ncolors[2] = lv_color_make(255, 0, 0); \/\/ Rojo\n\nscr = lv_obj_create(NULL);\nlv_obj_set_style_bg_color(scr, colores[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(etiqueta, \"Cambiar color\");\nlv_obj_center(etiqueta);\n}<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Paso 3 &#8211; Llama a la funci\u00f3n<\/strong><\/p>\n<p>Abre de nuevo main.c y sustituye <em>lv_demo_widgets();<\/em> por <em>ui_riverdi_logo_create();<\/em><\/p>\n<p>Luego construye y flashea el proyecto.<\/p>\n<p><strong>Nota<\/strong>: Si se produce un error de compilaci\u00f3n, reconstruye &#8211; CubeIDE a veces indexa mal los archivos nuevos.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Analisis_de_nuestro_codigo\"><\/span>An\u00e1lisis de nuestro c\u00f3digo<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><em>void color_btn_event_cb()<\/em> &#8211; esta funci\u00f3n es una funci\u00f3n de evento que se llama cuando se pulsa el bot\u00f3n. En su cuerpo cambiamos el color de fondo (bg) a uno de los colores de la matriz colors[]. <\/p>\n<p><em>void ui_riverdi_logo_create()<\/em> &#8211; esta funci\u00f3n es toda nuestra ui. Desde arriba: <\/p>\n<ul>\n<li>Creamos la pantalla con uno de los colores de fondo.<\/li>\n<li>Ponemos la imagen en la pantalla y la alineamos al centro. Los siguientes n\u00fameros son las coordenadas X e Y desde el lugar de alineaci\u00f3n. En este ejemplo -40 significa que la colocamos 40px por encima del centro de la pantalla.  <\/li>\n<li>A continuaci\u00f3n creamos el bot\u00f3n &#8211; al no darle ning\u00fan estilo, mantiene su aspecto y comportamiento por defecto. Lo colocamos 100px por debajo del centro para que no se solape con la imagen. <\/li>\n<li>Por \u00faltimo, creamos la etiqueta del bot\u00f3n: \u00abCambiar color\u00bb. Para ponerla en el bot\u00f3n, s\u00f3lo tenemos que pasar el bot\u00f3n como par\u00e1metro en lv_label_create. <\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Proximos_pasos\"><\/span>Pr\u00f3ximos pasos<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ya tienes un entorno LVGL operativo en la plataforma STM32H7 de Riverdi.<br \/>\nDesde aqu\u00ed, puedes<\/p>\n<ul>\n<li>A\u00f1ade m\u00e1s widgets (etiquetas, deslizadores, gr\u00e1ficos)<\/li>\n<li>Integrar gestos t\u00e1ctiles<\/li>\n<li>Explora animaciones y temas<\/li>\n<\/ul>\n<div class=\"table-wrapper\">\n<table>\n<thead>\n<tr>\n<td style=\"text-align: left;\"><strong>Recursos<\/strong><\/td>\n<td style=\"text-align: left;\"><strong>Enlace<\/strong><\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\"><strong>Documentaci\u00f3n 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>Creador de proyectos 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=\"Resumen\"><\/span>Resumen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Acabas de hacerlo:<\/p>\n<ol>\n<li>Clona y abre el proyecto LVGL para la pantalla Riverdi STM32H7,<\/li>\n<li>Ejecuta la aplicaci\u00f3n de demostraci\u00f3n de LVGL,<\/li>\n<li>Crea tu propia pantalla personalizada con una imagen y un bot\u00f3n.<\/li>\n<\/ol>\n<p>Este flujo de trabajo es la base perfecta para desarrollar <strong>interfaces gr\u00e1ficas de usuario profesionales<\/strong> en las pantallas integradas de Riverdi utilizando 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>Esta gu\u00eda muestra c\u00f3mo dar vida a una pantalla Riverdi STM32H7 utilizando LVGL: desde clonar el repositorio hasta ejecutar tu primera interfaz personalizada con una imagen y un bot\u00f3n. Aprender\u00e1s c\u00f3mo: conecta el hardware, abre y construye el proyecto en STM32CubeIDE, ejecuta la demo LVGL, y crear una sencilla interfaz de usuario personalizada con el [&hellip;]<\/p>\n","protected":false},"author":2659,"featured_media":127561,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[787],"tags":[],"class_list":["post-129674","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pantalla-101"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Primeros pasos con LVGL en Riverdi STM32 Display-Gu\u00eda 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\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Primeros pasos con LVGL en Riverdi STM32 Display-Gu\u00eda completa - Riverdi\" \/>\n<meta property=\"og:description\" content=\"Esta gu\u00eda muestra c\u00f3mo dar vida a una pantalla Riverdi STM32H7 utilizando LVGL: desde clonar el repositorio hasta ejecutar tu primera interfaz personalizada con una imagen y un bot\u00f3n. Aprender\u00e1s c\u00f3mo: conecta el hardware, abre y construye el proyecto en STM32CubeIDE, ejecuta la demo LVGL, y crear una sencilla interfaz de usuario personalizada con el [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/riverdi.com\/es\/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:43+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=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kacper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/es\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/es\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\"},\"author\":{\"name\":\"Kacper\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/es#\\\/schema\\\/person\\\/07605024d6619f9bd872665515d9bbfa\"},\"headline\":\"Primeros pasos con LVGL en Riverdi STM32 Display-Gu\u00eda completa\",\"datePublished\":\"2025-11-25T12:54:31+00:00\",\"dateModified\":\"2026-05-11T13:24:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/es\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\"},\"wordCount\":1092,\"image\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/es\\\/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\":[\"Pantalla 101\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/es\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\",\"url\":\"https:\\\/\\\/riverdi.com\\\/es\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\",\"name\":\"Primeros pasos con LVGL en Riverdi STM32 Display-Gu\u00eda completa - Riverdi\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/es#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/es\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/es\\\/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:43+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/es#\\\/schema\\\/person\\\/07605024d6619f9bd872665515d9bbfa\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/es\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/riverdi.com\\\/es\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/es\\\/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\\\/es\\\/blog\\\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Front Page\",\"item\":\"https:\\\/\\\/riverdi.com\\\/es\\\/portada\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Primeros pasos con LVGL en Riverdi STM32 Display-Gu\u00eda completa\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/es#website\",\"url\":\"https:\\\/\\\/riverdi.com\\\/es\",\"name\":\"Riverdi\",\"description\":\"Global TFT LCD Manufacturer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/riverdi.com\\\/es?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/es#\\\/schema\\\/person\\\/07605024d6619f9bd872665515d9bbfa\",\"name\":\"Kacper\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@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":"Primeros pasos con LVGL en Riverdi STM32 Display-Gu\u00eda 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\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide","og_locale":"es_ES","og_type":"article","og_title":"Primeros pasos con LVGL en Riverdi STM32 Display-Gu\u00eda completa - Riverdi","og_description":"Esta gu\u00eda muestra c\u00f3mo dar vida a una pantalla Riverdi STM32H7 utilizando LVGL: desde clonar el repositorio hasta ejecutar tu primera interfaz personalizada con una imagen y un bot\u00f3n. Aprender\u00e1s c\u00f3mo: conecta el hardware, abre y construye el proyecto en STM32CubeIDE, ejecuta la demo LVGL, y crear una sencilla interfaz de usuario personalizada con el [&hellip;]","og_url":"https:\/\/riverdi.com\/es\/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:43+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":{"Escrito por":"Kacper","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#article","isPartOf":{"@id":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide"},"author":{"name":"Kacper","@id":"https:\/\/riverdi.com\/es#\/schema\/person\/07605024d6619f9bd872665515d9bbfa"},"headline":"Primeros pasos con LVGL en Riverdi STM32 Display-Gu\u00eda completa","datePublished":"2025-11-25T12:54:31+00:00","dateModified":"2026-05-11T13:24:43+00:00","mainEntityOfPage":{"@id":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide"},"wordCount":1092,"image":{"@id":"https:\/\/riverdi.com\/es\/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":["Pantalla 101"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide","url":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide","name":"Primeros pasos con LVGL en Riverdi STM32 Display-Gu\u00eda completa - Riverdi","isPartOf":{"@id":"https:\/\/riverdi.com\/es#website"},"primaryImageOfPage":{"@id":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#primaryimage"},"image":{"@id":"https:\/\/riverdi.com\/es\/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:43+00:00","author":{"@id":"https:\/\/riverdi.com\/es#\/schema\/person\/07605024d6619f9bd872665515d9bbfa"},"breadcrumb":{"@id":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/riverdi.com\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/riverdi.com\/es\/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\/es\/blog\/getting-started-with-lvgl-on-riverdi-stm32-display-full-guide#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Front Page","item":"https:\/\/riverdi.com\/es\/portada"},{"@type":"ListItem","position":2,"name":"Primeros pasos con LVGL en Riverdi STM32 Display-Gu\u00eda completa"}]},{"@type":"WebSite","@id":"https:\/\/riverdi.com\/es#website","url":"https:\/\/riverdi.com\/es","name":"Riverdi","description":"Global TFT LCD Manufacturer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/riverdi.com\/es?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/riverdi.com\/es#\/schema\/person\/07605024d6619f9bd872665515d9bbfa","name":"Kacper","image":{"@type":"ImageObject","inLanguage":"es","@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\/es\/wp-json\/wp\/v2\/posts\/129674","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/riverdi.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/riverdi.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/riverdi.com\/es\/wp-json\/wp\/v2\/users\/2659"}],"replies":[{"embeddable":true,"href":"https:\/\/riverdi.com\/es\/wp-json\/wp\/v2\/comments?post=129674"}],"version-history":[{"count":1,"href":"https:\/\/riverdi.com\/es\/wp-json\/wp\/v2\/posts\/129674\/revisions"}],"predecessor-version":[{"id":129681,"href":"https:\/\/riverdi.com\/es\/wp-json\/wp\/v2\/posts\/129674\/revisions\/129681"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/riverdi.com\/es\/wp-json\/wp\/v2\/media\/127561"}],"wp:attachment":[{"href":"https:\/\/riverdi.com\/es\/wp-json\/wp\/v2\/media?parent=129674"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/riverdi.com\/es\/wp-json\/wp\/v2\/categories?post=129674"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/riverdi.com\/es\/wp-json\/wp\/v2\/tags?post=129674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}