Primeros pasos con LVGL en Riverdi STM32 Display-Guía completa

Esta guía muestra cómo 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ón.
Aprenderás cómo:

• conecta el hardware,
• abre y construye el proyecto en STM32CubeIDE,
• ejecuta la demo LVGL,
• y crear una sencilla interfaz de usuario personalizada con el logotipo de Riverdi y un botón interactivo.

Al final, tendrás una base de trabajo para tu propio proyecto de interfaz gráfica de usuario basada en LVGL en las pantallas embebidas STM32 de Riverdi.

Hardware

Conexiones

La pantalla de la STM32H7 utiliza dos conectores Molex:

• SWD (programación) – conecta aquí tu ST-Link.
• Alimentación (12 V) – para alimentación externa.

⚠️ No alimentes la pantalla y conectes el ST-Link simultáneamente por primera vez sin comprobar la polaridad correcta.

Software

Clonar el proyecto

Utilizando el Creador de Proyectos LVGL, descarga el proyecto para el tamaño de pantalla adecuado que estés utilizando. Todo lo que tienes que hacer es escribir Riverdi en la barra de búsqueda de la izquierda, pulsar el proyecto adecuado y pulsar Descargar como puedes ver en la imagen de abajo.

Opcional: clona la biblioteca LVGL más reciente

Si no estás seguro de si la librería LVGL que tienes en tu proyecto es la más 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:

cd riverdi-lvgl-101/Middlewares/Third_Party/

git clone https://github.com/lvgl/lvgl.git lvgl

Importar el proyecto a STM32CubeIDE

1. Abre STM32CubeIDE.
2. Ve a Archivo → Abrir proyectos desde el sistema de archivos….
3. Haz clic en Directorio…, selecciona el subdirectorio STM32CubeIDE de tu carpeta clonada riverdi-lvgl-101.
4. Haz clic en Finalizar.

El proyecto aparecerá ahora en el Explorador de Proyectos.

Construir y ejecutar LVGL Ejemplo

Abre main.c que se encuentra en CM7/Application/User/Core. Después de todas las inicializaciones, debería haber una función lv_demo_widgets() que se llama antes de PWM y kernel.

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ón debería llevar algún tiempo, hasta unos minutos. Si ves alguna advertencia, no debería pasar nada, puede deberse a nuevas versiones de la biblioteca LVGL o de CubeIDE.

Si quieres consultar más ejemplos de LVGL y analizar su código, todo lo que tienes que hacer es abrir Middlewares/LVGL/lvgl/examples y llamar a uno de los ejemplos de tu elección en el lugar donde se llama a lv_demo_widgets().

Crear nuestro propio ejemplo

Vamos a crear nuestro propio ejemplo que contiene una imagen y un botón que cambia el color de la pantalla a uno de nuestros colores Riverdi.

Paso 1 – Preparar el logotipo de Riverdi

1. Descarga el logotipo de Riverdi del sitio web de Riverdi.
2. Abre el Convertidor de Imágenes LVGL.
3. Elige el formato de color: RGB565
4. Haz clic en «Convertir» y descarga el archivo .c generado.
5. Colócalo junto a tu archivo main.c.
6. Añade esta línea al principio de main.c:
   • extern const lv_image_dsc_t riverdi_logo;

Nota: Si tu imagen tiene un fondo negro – se debe al formato .png – ningún fondo es traducido por el Conversor de Imágenes a 0x00 – color negro. Si quieres hacerlo blanco, simplemente cambia todos los 0x00 a 0xff en tu IDE o editor de texto.

Paso 2 – Añadir un nuevo archivo fuente

En STM32CubeIDE, crea un nuevo archivo:

Aplicación/Usuario/Core/ui_riverdi_logo.c

#include "lvgl.h"
extern const lv_image_dsc_t riverdi_logo;

static lv_color_t colors[3];
static uint8_t color_index = 0;
estático lv_obj_t * scr;

static void color_btn_event_cb(lv_event_t * e)
{
color_index = (color_index + 1) % 3;
lv_obj_set_style_bg_color(scr, colores[color_index], LV_PART_MAIN);
}

void ui_riverdi_logo_crear(void)
{
colors[0] = lv_color_make(0, 0, 255); // Azul
colors[1] = lv_color_make(0, 255, 0); // Verde
colors[2] = lv_color_make(255, 0, 0); // Rojo

scr = lv_obj_create(NULL);
lv_obj_set_style_bg_color(scr, colores[color_index], LV_PART_MAIN);
lv_screen_load(scr);

lv_obj_t * img = lv_image_create(scr);
lv_image_set_src(img, &riverdi_logo);
lv_obj_align(img, LV_ALIGN_CENTER, 0, -40);

lv_obj_t * btn = lv_button_create(scr);
lv_obj_align(btn, LV_ALIGN_CENTER, 0, 100);
lv_obj_add_event_cb(btn, color_btn_event_cb, LV_EVENT_CLICKED, NULL);

lv_obj_t * label = lv_label_create(btn);
lv_label_set_text(etiqueta, "Cambiar color");
lv_obj_center(etiqueta);
}

Paso 3 – Llama a la función

Abre de nuevo main.c y sustituye lv_demo_widgets(); por ui_riverdi_logo_create();

Luego construye y flashea el proyecto.

Nota: Si se produce un error de compilación, reconstruye – CubeIDE a veces indexa mal los archivos nuevos.

Análisis de nuestro código

void color_btn_event_cb() – esta función es una función de evento que se llama cuando se pulsa el botón. En su cuerpo cambiamos el color de fondo (bg) a uno de los colores de la matriz colors[].

void ui_riverdi_logo_create() – esta función es toda nuestra ui. Desde arriba:

• Creamos la pantalla con uno de los colores de fondo.
• Ponemos la imagen en la pantalla y la alineamos al centro. Los siguientes números son las coordenadas X e Y desde el lugar de alineación. En este ejemplo -40 significa que la colocamos 40px por encima del centro de la pantalla.
• A continuación creamos el botón – al no darle ningún estilo, mantiene su aspecto y comportamiento por defecto. Lo colocamos 100px por debajo del centro para que no se solape con la imagen.
• Por último, creamos la etiqueta del botón: «Cambiar color». Para ponerla en el botón, sólo tenemos que pasar el botón como parámetro en lv_label_create.

Próximos pasos

Ya tienes un entorno LVGL operativo en la plataforma STM32H7 de Riverdi.
Desde aquí, puedes

• Añade más widgets (etiquetas, deslizadores, gráficos)
• Integrar gestos táctiles
• Explora animaciones y temas

Resumen

Acabas de hacerlo:

1. Clona y abre el proyecto LVGL para la pantalla Riverdi STM32H7,
2. Ejecuta la aplicación de demostración de LVGL,
3. Crea tu propia pantalla personalizada con una imagen y un botón.

Este flujo de trabajo es la base perfecta para desarrollar interfaces gráficas de usuario profesionales en las pantallas integradas de Riverdi utilizando LVGL.

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!

Libro Blanco

Ve a nuestro catálogo de productos y comprueba cómo puedes ahorrar por calidad, no en calidad.

Compruébalo ahora

Ponte en contacto con nosotros ahora, ahorra con calidad, no en calidad.

Contacta con nosotros