{"id":129634,"date":"2025-12-23T10:51:48","date_gmt":"2025-12-23T09:51:48","guid":{"rendered":"https:\/\/riverdi.com\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui"},"modified":"2025-12-23T10:51:48","modified_gmt":"2025-12-23T09:51:48","slug":"getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui","status":"publish","type":"post","link":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui","title":{"rendered":"Primeros pasos con las pantallas STM32 Nucleo Riverdi con la GUI TouchGFX"},"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-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Hardware_utilizado\" >Hardware utilizado<\/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-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Crear_tu_propio_ejemplo_desde_cero\" >Crear tu propio ejemplo desde cero<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Conectar_el_hardware\" >Conectar el hardware<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Crear_la_interfaz_de_usuario_en_TouchGFX_Designer\" >Crear la interfaz de usuario en TouchGFX Designer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Construir_la_interfaz_de_usuario_de_demostracion\" >Construir la interfaz de usuario de demostraci\u00f3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Anadir_interacciones_en_TouchGFX\" >A\u00f1adir interacciones en TouchGFX<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Generar_codigo_y_abrir_el_proyecto_en_CubeIDE\" >Generar c\u00f3digo y abrir el proyecto en CubeIDE<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Prueba_del_proyecto_simulador_y_programacion_de_objetivos\" >Prueba del proyecto: simulador y programaci\u00f3n de objetivos<\/a><\/li><\/ul><\/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-stm32-nucleo-riverdi-displays-with-touchgfx-gui\/#Resumen\" >Resumen<\/a><\/li><\/ul><\/nav><\/div>\n<p>En esta gu\u00eda, mostramos c\u00f3mo crear una sencilla aplicaci\u00f3n GUI utilizando TouchGFX y ejecutarla en tres placas STM32 Nucleo diferentes emparejadas con pantallas Riverdi. El tutorial es totalmente autocontenido, por lo que puedes seguir cada paso sin ver el v\u00eddeo que lo acompa\u00f1a. <\/p>\n<p>Tanto si est\u00e1s evaluando m\u00f3dulos Riverdi como si est\u00e1s explorando TouchGFX por primera vez, este proyecto de iniciaci\u00f3n demuestra lo r\u00e1pido que puedes crear una l\u00f3gica de interfaz de usuario interactiva, generar c\u00f3digo, integrarlo en STM32CubeIDE y ejecutarlo en hardware.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Hardware_utilizado\"><\/span>Hardware utilizado<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-127947\" src=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_1-1.png\" alt=\"\" width=\"826\" height=\"500\" srcset=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_1-1.png 826w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_1-1-300x182.png 300w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_1-1-768x465.png 768w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_1-1-600x363.png 600w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_1-1-64x39.png 64w\" sizes=\"(max-width: 826px) 100vw, 826px\" \/><\/p>\n<p>Utilizamos tres placas STM32 Nucleo, cada una emparejada con una pantalla Riverdi:<\/p>\n<p><strong>1. Nucleo-C092RC + Riverdi RVA15MD<br \/>\n<\/strong>Una placa STM32 compacta y econ\u00f3mica, ideal para demostraciones b\u00e1sicas de TouchGFX y l\u00f3gica UX sencilla. Combinada con la pantalla redonda RVA15MD de 1,54&#8243;, es una configuraci\u00f3n b\u00e1sica ideal. <\/p>\n<p><strong>2. Nucleo-WBA65RI + Riverdi RVA15MD<br \/>\n<\/strong>Una plataforma inal\u00e1mbrica Nucleo m\u00e1s potente y totalmente nueva que ofrece una conectividad moderna y un mayor rendimiento de la interfaz gr\u00e1fica de usuario, excelente para las aplicaciones de pantalla redonda Riverdi m\u00e1s avanzadas.<\/p>\n<p><strong>3. Nucleo-H563ZI + Riverdi RVA35HI<br \/>\n<\/strong>Una placa Nucleo de gama alta y alto rendimiento, con mucha memoria para gr\u00e1ficos TouchGFX m\u00e1s ricos, que aqu\u00ed impulsa una pantalla RVA35HI de 3,5&#8243;.<\/p>\n<p><strong>No se necesita ST-Link externo: todas las<\/strong>placas llevan ST-Link V3 integrado.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Crear_tu_propio_ejemplo_desde_cero\"><\/span>Crear tu propio ejemplo desde cero<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Conectar_el_hardware\"><\/span>Conectar el hardware<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Conectar las pantallas Riverdi a las placas Nucleo s\u00f3lo lleva un momento:<\/p>\n<ol>\n<li>Enchufa el FFC de la pantalla en el adaptador o conector Nucleo.<br \/>\nEl cable flexible est\u00e1 enchavetado y s\u00f3lo encaja en un sentido.<\/li>\n<li>Conecta la placa mediante el <strong>puerto USB-C ST-LINK<\/strong>.<br \/>\nEl LED verde confirma la alimentaci\u00f3n y la disponibilidad del depurador.<\/li>\n<li>No necesita programador externo, puentes ni adaptadores.<\/li>\n<\/ol>\n<p>Una vez conectados, pasamos directamente al desarrollo de la interfaz de usuario.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Crear_la_interfaz_de_usuario_en_TouchGFX_Designer\"><\/span>Crear la interfaz de usuario en TouchGFX Designer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Abre <strong>TouchGFX Designer<\/strong> y empieza con un proyecto nuevo: <\/p>\n<p><strong>Paso a paso<\/strong><\/p>\n<ol>\n<li>Haz clic en <strong>Crear<\/strong> (el bot\u00f3n m\u00e1s en la pantalla de inicio).<\/li>\n<li>En el <strong>Selector de Placas<\/strong>, busca tu placa (por ejemplo, \u00abH563\u00bb o \u00abWBA65\u00bb).<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-127952\" src=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_2-2.png\" alt=\"\" width=\"826\" height=\"380\" srcset=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_2-2.png 826w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_2-2-300x138.png 300w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_2-2-768x353.png 768w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_2-2-600x276.png 600w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_2-2-64x29.png 64w\" sizes=\"(max-width: 826px) 100vw, 826px\" \/><\/li>\n<li>Elige el <strong>N\u00facleo<\/strong> adecuado con <strong>Pantalla Riverdi<\/strong> (RVA)<\/li>\n<li>Pon un nombre a tu proyecto y conf\u00edrmalo con <strong>CREAR<\/strong>.<\/li>\n<li>El Dise\u00f1ador se abre con un lienzo en blanco que coincide con la resoluci\u00f3n de tu pantalla.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Construir_la_interfaz_de_usuario_de_demostracion\"><\/span>Construir la interfaz de usuario de demostraci\u00f3n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Para crear nuestro sencillo ejemplo de ajuste del brillo:<\/p>\n<ol>\n<li>Desde la barra de herramientas superior, arrastra una <strong>Caja<\/strong> al lienzo.<br \/>\nRedimensi\u00f3nala para que cubra toda la pantalla: actuar\u00e1 como fondo blanco.<\/li>\n<li>A\u00f1ade un widget <strong>Deslizador<\/strong>.<br \/>\nMu\u00e9velo al centro arrastr\u00e1ndolo sobre el lienzo.<\/li>\n<li>Elige uno de los preajustes predeterminados de TouchGFX &#8211; en el v\u00eddeo utilizamos el <strong>peque\u00f1o deslizador amarillo<\/strong>.<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-127957\" src=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-2.png\" alt=\"\" width=\"826\" height=\"480\" srcset=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-2.png 826w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-2-300x174.png 300w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-2-768x446.png 768w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-2-600x349.png 600w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-2-64x37.png 64w\" sizes=\"(max-width: 826px) 100vw, 826px\" \/><\/li>\n<\/ol>\n<p><strong>Configuraci\u00f3n de la corredera<\/strong><\/p>\n<p>En el panel <strong>Propiedades<\/strong>:<\/p>\n<ul>\n<li>Fijar <strong>M\u00ednimo = 0<\/strong><\/li>\n<li>Fijar <strong>M\u00e1ximo = 200<\/strong><\/li>\n<li>(Opcional) Establece el <strong>Valor Inicial = 200<\/strong> para obtener una pantalla de inicio totalmente brillante.<\/li>\n<\/ul>\n<p>Todo lo a\u00f1adido es visible en el \u00e1rbol de widgets de la izquierda.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Anadir_interacciones_en_TouchGFX\"><\/span>A\u00f1adir interacciones en TouchGFX<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ahora vinculamos el deslizador a una llamada a una funci\u00f3n:<\/p>\n<ol>\n<li>Abre la pesta\u00f1a <strong>Interacciones<\/strong>.<\/li>\n<li>Pulsa el icono <strong>+<\/strong> para a\u00f1adir una nueva interacci\u00f3n.<\/li>\n<li>Elige el <strong>valor cambiado del deslizador<\/strong> como activador.<\/li>\n<li>Selecciona deslizador1 como widget.<\/li>\n<li>Para la acci\u00f3n, elige <strong>Llamar a nueva funci\u00f3n virtual<\/strong>.<\/li>\n<li>Nombre de la funci\u00f3n: sliderChanged<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-127962\" src=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-1.png\" alt=\"\" width=\"826\" height=\"420\" srcset=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-1.png 826w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-1-300x153.png 300w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-1-768x391.png 768w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-1-600x305.png 600w, https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_Grafika_POMIEDZY-TEKSTY_3-1-64x33.png 64w\" sizes=\"(max-width: 826px) 100vw, 826px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>TouchGFX generar\u00e1 esto como un m\u00e9todo virtual en Screen1ViewBase.<\/p>\n<p>A continuaci\u00f3n, generamos el c\u00f3digo.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Generar_codigo_y_abrir_el_proyecto_en_CubeIDE\"><\/span>Generar c\u00f3digo y abrir el proyecto en CubeIDE<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Navega hasta:<\/p>\n<p>Aplicaci\u00f3n \u2192 Usuario \u2192 gui \u2192 Screen1View.cpp<\/p>\n<p>&nbsp;<\/p>\n<p>TouchGFX ya ha generado la llamada de retorno en la clase base.<\/p>\n<p>Ahora implementamos la l\u00f3gica en Screen1View.cpp:<\/p>\n<pre>void VistaPantalla1::cambioDeslizador(int valor)\n{\n\/\/ Escala el rango del deslizador (0-200) al rango alfa (0-255)\nuint8_t alfa = (valor * 255) \/ 200;\n\ncaja1.establecerAlfa(alfa);\ncaja1.invalidar();\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>Aseg\u00farate de a\u00f1adir la declaraci\u00f3n en Screen1View.hpp:<\/p>\n<p>virtual void cambioDeslizador(int valor);<\/p>\n<p>\u00c9sta es toda la l\u00f3gica que se necesita, sin controladores de hardware ni c\u00f3digo HAL.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Prueba_del_proyecto_simulador_y_programacion_de_objetivos\"><\/span>Prueba del proyecto: simulador y programaci\u00f3n de objetivos<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Volver a Dise\u00f1ador TouchGFX:<\/p>\n<ul>\n<li>Haz clic en <strong>Ejecutar Simulador<\/strong> (segundo icono rosa)<br \/>\n\u2192 Puedes probar tu deslizador de brillo instant\u00e1neamente sin hardware.<\/li>\n<li>Haz clic en <strong>Programar y Ejecutar Objetivo<\/strong> (tercer icono rosa o <strong>F6<\/strong>)<br \/>\n\u2192 Esto construye, flashea y ejecuta el firmware directamente en tu placa Nucleo.<\/li>\n<\/ul>\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>Esta gu\u00eda demuestra lo r\u00e1pido que puedes hacerlo:<\/p>\n<ul>\n<li>Crear un proyecto TouchGFX<\/li>\n<li>A\u00f1adir elementos de IU<\/li>\n<li>Conectar interacciones de widgets<\/li>\n<li>Implementar l\u00f3gica C++ simple<\/li>\n<li>Generar y construir c\u00f3digo<\/li>\n<li>Flashear directamente desde TouchGFX Designer<\/li>\n<li>Y ejecutarlo en cualquier placa Nucleo emparejada con una pantalla Riverdi<\/li>\n<\/ul>\n<p>Con los m\u00f3dulos basados en STM32 de Riverdi y el ecosistema Nucleo de ST, la creaci\u00f3n de interfaces gr\u00e1ficas interactivas es r\u00e1pida, predecible y f\u00e1cil para el desarrollador.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En esta gu\u00eda, mostramos c\u00f3mo crear una sencilla aplicaci\u00f3n GUI utilizando TouchGFX y ejecutarla en tres placas STM32 Nucleo diferentes emparejadas con pantallas Riverdi. El tutorial es totalmente autocontenido, por lo que puedes seguir cada paso sin ver el v\u00eddeo que lo acompa\u00f1a. Tanto si est\u00e1s evaluando m\u00f3dulos Riverdi como si est\u00e1s explorando TouchGFX por [&hellip;]<\/p>\n","protected":false},"author":2659,"featured_media":127945,"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-129634","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 las pantallas STM32 Nucleo Riverdi con la GUI TouchGFX - 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-stm32-nucleo-riverdi-displays-with-touchgfx-gui\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Primeros pasos con las pantallas STM32 Nucleo Riverdi con la GUI TouchGFX - Riverdi\" \/>\n<meta property=\"og:description\" content=\"En esta gu\u00eda, mostramos c\u00f3mo crear una sencilla aplicaci\u00f3n GUI utilizando TouchGFX y ejecutarla en tres placas STM32 Nucleo diferentes emparejadas con pantallas Riverdi. El tutorial es totalmente autocontenido, por lo que puedes seguir cada paso sin ver el v\u00eddeo que lo acompa\u00f1a. Tanto si est\u00e1s evaluando m\u00f3dulos Riverdi como si est\u00e1s explorando TouchGFX por [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\" \/>\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-12-23T09:51:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_COVER_Guide-Nucleo.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=\"4 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-stm32-nucleo-riverdi-displays-with-touchgfx-gui#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/es\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\"},\"author\":{\"name\":\"Kacper\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/es#\\\/schema\\\/person\\\/07605024d6619f9bd872665515d9bbfa\"},\"headline\":\"Primeros pasos con las pantallas STM32 Nucleo Riverdi con la GUI TouchGFX\",\"datePublished\":\"2025-12-23T09:51:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/es\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\"},\"wordCount\":834,\"image\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/es\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/riverdi.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/BLOG_COVER_Guide-Nucleo.jpg\",\"articleSection\":[\"Pantalla 101\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/es\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\",\"url\":\"https:\\\/\\\/riverdi.com\\\/es\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\",\"name\":\"Primeros pasos con las pantallas STM32 Nucleo Riverdi con la GUI TouchGFX - Riverdi\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/es#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/es\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/es\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/riverdi.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/BLOG_COVER_Guide-Nucleo.jpg\",\"datePublished\":\"2025-12-23T09:51:48+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/es#\\\/schema\\\/person\\\/07605024d6619f9bd872665515d9bbfa\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/riverdi.com\\\/es\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/riverdi.com\\\/es\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/es\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#primaryimage\",\"url\":\"https:\\\/\\\/riverdi.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/BLOG_COVER_Guide-Nucleo.jpg\",\"contentUrl\":\"https:\\\/\\\/riverdi.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/BLOG_COVER_Guide-Nucleo.jpg\",\"width\":1280,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/riverdi.com\\\/es\\\/blog\\\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Front Page\",\"item\":\"https:\\\/\\\/riverdi.com\\\/es\\\/portada\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Primeros pasos con las pantallas STM32 Nucleo Riverdi con la GUI TouchGFX\"}]},{\"@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 las pantallas STM32 Nucleo Riverdi con la GUI TouchGFX - 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-stm32-nucleo-riverdi-displays-with-touchgfx-gui","og_locale":"es_ES","og_type":"article","og_title":"Primeros pasos con las pantallas STM32 Nucleo Riverdi con la GUI TouchGFX - Riverdi","og_description":"En esta gu\u00eda, mostramos c\u00f3mo crear una sencilla aplicaci\u00f3n GUI utilizando TouchGFX y ejecutarla en tres placas STM32 Nucleo diferentes emparejadas con pantallas Riverdi. El tutorial es totalmente autocontenido, por lo que puedes seguir cada paso sin ver el v\u00eddeo que lo acompa\u00f1a. Tanto si est\u00e1s evaluando m\u00f3dulos Riverdi como si est\u00e1s explorando TouchGFX por [&hellip;]","og_url":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui","og_site_name":"Riverdi","article_publisher":"https:\/\/www.facebook.com\/riverdi.displays\/","article_published_time":"2025-12-23T09:51:48+00:00","og_image":[{"width":1280,"height":600,"url":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_COVER_Guide-Nucleo.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":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#article","isPartOf":{"@id":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui"},"author":{"name":"Kacper","@id":"https:\/\/riverdi.com\/es#\/schema\/person\/07605024d6619f9bd872665515d9bbfa"},"headline":"Primeros pasos con las pantallas STM32 Nucleo Riverdi con la GUI TouchGFX","datePublished":"2025-12-23T09:51:48+00:00","mainEntityOfPage":{"@id":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui"},"wordCount":834,"image":{"@id":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#primaryimage"},"thumbnailUrl":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_COVER_Guide-Nucleo.jpg","articleSection":["Pantalla 101"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui","url":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui","name":"Primeros pasos con las pantallas STM32 Nucleo Riverdi con la GUI TouchGFX - Riverdi","isPartOf":{"@id":"https:\/\/riverdi.com\/es#website"},"primaryImageOfPage":{"@id":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#primaryimage"},"image":{"@id":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#primaryimage"},"thumbnailUrl":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_COVER_Guide-Nucleo.jpg","datePublished":"2025-12-23T09:51:48+00:00","author":{"@id":"https:\/\/riverdi.com\/es#\/schema\/person\/07605024d6619f9bd872665515d9bbfa"},"breadcrumb":{"@id":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#primaryimage","url":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_COVER_Guide-Nucleo.jpg","contentUrl":"https:\/\/riverdi.com\/wp-content\/uploads\/2025\/12\/BLOG_COVER_Guide-Nucleo.jpg","width":1280,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/riverdi.com\/es\/blog\/getting-started-with-stm32-nucleo-riverdi-displays-with-touchgfx-gui#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Front Page","item":"https:\/\/riverdi.com\/es\/portada"},{"@type":"ListItem","position":2,"name":"Primeros pasos con las pantallas STM32 Nucleo Riverdi con la GUI TouchGFX"}]},{"@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\/129634","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=129634"}],"version-history":[{"count":0,"href":"https:\/\/riverdi.com\/es\/wp-json\/wp\/v2\/posts\/129634\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/riverdi.com\/es\/wp-json\/wp\/v2\/media\/127945"}],"wp:attachment":[{"href":"https:\/\/riverdi.com\/es\/wp-json\/wp\/v2\/media?parent=129634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/riverdi.com\/es\/wp-json\/wp\/v2\/categories?post=129634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/riverdi.com\/es\/wp-json\/wp\/v2\/tags?post=129634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}