En esta guía, mostramos cómo crear una sencilla aplicación 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ídeo que lo acompaña.
Tanto si estás evaluando módulos Riverdi como si estás explorando TouchGFX por primera vez, este proyecto de iniciación demuestra lo rápido que puedes crear una lógica de interfaz de usuario interactiva, generar código, integrarlo en STM32CubeIDE y ejecutarlo en hardware.
Hardware utilizado
Utilizamos tres placas STM32 Nucleo, cada una emparejada con una pantalla Riverdi:
1. Nucleo-C092RC + Riverdi RVA15MD
Una placa STM32 compacta y económica, ideal para demostraciones básicas de TouchGFX y lógica UX sencilla. Combinada con la pantalla redonda RVA15MD de 1,54″, es una configuración básica ideal.
2. Nucleo-WBA65RI + Riverdi RVA15MD
Una plataforma inalámbrica Nucleo más potente y totalmente nueva que ofrece una conectividad moderna y un mayor rendimiento de la interfaz gráfica de usuario, excelente para las aplicaciones de pantalla redonda Riverdi más avanzadas.
3. Nucleo-H563ZI + Riverdi RVA35HI
Una placa Nucleo de gama alta y alto rendimiento, con mucha memoria para gráficos TouchGFX más ricos, que aquí impulsa una pantalla RVA35HI de 3,5″.
No se necesita ST-Link externo: todas lasplacas llevan ST-Link V3 integrado.
Crear tu propio ejemplo desde cero
Conectar el hardware
Conectar las pantallas Riverdi a las placas Nucleo sólo lleva un momento:
- Enchufa el FFC de la pantalla en el adaptador o conector Nucleo.
El cable flexible está enchavetado y sólo encaja en un sentido. - Conecta la placa mediante el puerto USB-C ST-LINK.
El LED verde confirma la alimentación y la disponibilidad del depurador. - No necesita programador externo, puentes ni adaptadores.
Una vez conectados, pasamos directamente al desarrollo de la interfaz de usuario.
Crear la interfaz de usuario en TouchGFX Designer
Abre TouchGFX Designer y empieza con un proyecto nuevo:
Paso a paso
- Haz clic en Crear (el botón más en la pantalla de inicio).
- En el Selector de Placas, busca tu placa (por ejemplo, «H563» o «WBA65»).
- Elige el Núcleo adecuado con Pantalla Riverdi (RVA)
- Pon un nombre a tu proyecto y confírmalo con CREAR.
- El Diseñador se abre con un lienzo en blanco que coincide con la resolución de tu pantalla.
Construir la interfaz de usuario de demostración
Para crear nuestro sencillo ejemplo de ajuste del brillo:
- Desde la barra de herramientas superior, arrastra una Caja al lienzo.
Redimensiónala para que cubra toda la pantalla: actuará como fondo blanco. - Añade un widget Deslizador.
Muévelo al centro arrastrándolo sobre el lienzo. - Elige uno de los preajustes predeterminados de TouchGFX – en el vídeo utilizamos el pequeño deslizador amarillo.
Configuración de la corredera
En el panel Propiedades:
- Fijar Mínimo = 0
- Fijar Máximo = 200
- (Opcional) Establece el Valor Inicial = 200 para obtener una pantalla de inicio totalmente brillante.
Todo lo añadido es visible en el árbol de widgets de la izquierda.
Añadir interacciones en TouchGFX
Ahora vinculamos el deslizador a una llamada a una función:
- Abre la pestaña Interacciones.
- Pulsa el icono + para añadir una nueva interacción.
- Elige el valor cambiado del deslizador como activador.
- Selecciona deslizador1 como widget.
- Para la acción, elige Llamar a nueva función virtual.
- Nombre de la función: sliderChanged
TouchGFX generará esto como un método virtual en Screen1ViewBase.
A continuación, generamos el código.
Generar código y abrir el proyecto en CubeIDE
Navega hasta:
Aplicación → Usuario → gui → Screen1View.cpp
TouchGFX ya ha generado la llamada de retorno en la clase base.
Ahora implementamos la lógica en Screen1View.cpp:
void VistaPantalla1::cambioDeslizador(int valor)
{
// Escala el rango del deslizador (0-200) al rango alfa (0-255)
uint8_t alfa = (valor * 255) / 200;
caja1.establecerAlfa(alfa);
caja1.invalidar();
}
Asegúrate de añadir la declaración en Screen1View.hpp:
virtual void cambioDeslizador(int valor);
Ésta es toda la lógica que se necesita, sin controladores de hardware ni código HAL.
Prueba del proyecto: simulador y programación de objetivos
Volver a Diseñador TouchGFX:
- Haz clic en Ejecutar Simulador (segundo icono rosa)
→ Puedes probar tu deslizador de brillo instantáneamente sin hardware. - Haz clic en Programar y Ejecutar Objetivo (tercer icono rosa o F6)
→ Esto construye, flashea y ejecuta el firmware directamente en tu placa Nucleo.
Resumen
Esta guía demuestra lo rápido que puedes hacerlo:
- Crear un proyecto TouchGFX
- Añadir elementos de IU
- Conectar interacciones de widgets
- Implementar lógica C++ simple
- Generar y construir código
- Flashear directamente desde TouchGFX Designer
- Y ejecutarlo en cualquier placa Nucleo emparejada con una pantalla Riverdi
Con los módulos basados en STM32 de Riverdi y el ecosistema Nucleo de ST, la creación de interfaces gráficas interactivas es rápida, predecible y fácil para el desarrollador.
DESCUBRE NUESTRA
Libro Blanco
Consigue una interacción perfecta entre el usuario y la pantalla con el CI de sensor táctil adecuado. ¿Te has enfrentado alguna vez a problemas con eventos táctiles fantasma o de certificación? ¡Impulsa tu I+D como un profesional con nuestro Libro Blanco!
Ve a nuestro catálogo de productos y comprueba cómo puedes ahorrar por calidad, no en calidad.
