Cómo ejecutar LVGL en la pantalla Riverdi EVE
Ejecutar una interfaz gráfica moderna en un microcontrolador suele implicar lidiar con los framebuffers, los límites de memoria y las concesiones en cuanto al rendimiento.
Con EVE, de nuestro socio Bridgetek, el procesamiento de gráficos HMI de alta calidad, el audio y la gestión táctil pasan a la GPU. Al mismo tiempo, LVGL, también socio de Riverdi, ofrece un marco de trabajo de interfaz de usuario flexible y muy utilizado.
El resultado: con esta configuración puedes crear interfaces complejas sin llevar la MCU al límite, y permite que procesadores económicos controlen pantallas a color avanzadas y de aspecto profesional con una carga mínima.
En esta guía te explicamos cómo ejecutar LVGL en una pantalla inteligente Riverdi EVE4 utilizando la placa de evaluación Riverdi basada en STM32F4.
En este ejemplo se utiliza la pantalla Riverdi RVT70HSBNWC00-B de 7 pulgadas, conectada a través de SPI mediante la interfaz RiBUS.
El objetivo de este tutorial es enseñarte a:
- inicializar LVGL en la MCU del host
- conectar LVGL con el motor gráfico EVE
- mostrar los widgets LVGL en la pantalla
- activar la interacción táctil
A diferencia de las pantallas integradas tradicionales, la arquitectura EVE no necesita que la MCU principal genere un búfer de trama completo. En su lugar, la MCU principal envía comandos de dibujo a la GPU EVE, que es la que genera la imagen final.
Esto reduce considerablemente el consumo de memoria y la carga de la CPU en la MCU.
Hardware utilizado
En este tutorial usamos EVE4 (BT817Q). Según la documentación de LVGL, esto también debería funcionar en otras versiones de EVE, pero aún no se ha probado.
En este tutorial se utilizan los siguientes componentes de hardware.
Riverdi RVT70HSBNWC00-B
- Pantalla inteligente EVE4 de 7”
- Resolución: 1280 × 600
- Motor gráfico integrado BT817Q
- Pantalla táctil capacitiva proyectada
Placa de evaluación Riverdi
- Microcontrolador STM32F4
ST-Link
- se usa para programar y depurar
Cable plano RiBUS
- se utiliza para la comunicación SPI entre el host y el módulo EVE
Cables micro-USB
- uno para ST-Link
- uno para alimentar la placa de evaluación
Requisitos de software
Antes de empezar con el proceso de integración, hay que preparar varios componentes de software. El proyecto se desarrolla utilizando STM32CubeIDE como entorno de desarrollo, y LVGL proporciona el marco de la interfaz gráfica de usuario. La comunicación con el motor gráfico EVE se gestiona a través de las bibliotecas de soporte de Riverdi EVE, que implementan la interfaz de bajo nivel entre la MCU host y la GPU BT817.
En esta configuración, LVGL no renderiza los píxeles directamente en un framebuffer. En su lugar, las operaciones de dibujo de LVGL se traducen en comandos EVE que se envían a la GPU a través de SPI. A continuación, el dispositivo EVE ejecuta estos comandos para renderizar el fotograma final en la pantalla.
Se necesitan las siguientes herramientas de software:
STM32CubeIDE (u otro IDE)
- entorno de desarrollo para proyectos STM32
- se utiliza para configurar los periféricos, compilar el proyecto y programar la MCU
Biblioteca gráfica LVGL
- marco de trabajo de interfaz gráfica de usuario (GUI) integrado que se usa para crear la interfaz de usuario
- ofrece widgets, un sistema de maquetación y gestión de eventos
Bibliotecas de apoyo de Riverdi EVE
- [proporcionar comunicación de bajo nivel con la GPU EVE]
- gestionar las transacciones SPI y el acceso al FIFO de comandos
Git
- se usa para descargar repositorios y proyectos de ejemplo
Para encontrar el proyecto, entra en el GitHub de Riverdi y busca el repositorio EVE-LVGL.
Entender la arquitectura de renderizado de EVE
Una diferencia clave entre las pantallas EVE y las pantallas integradas tradicionales es la forma en que se generan los fotogramas. En la mayoría de los sistemas integrados, la MCU procesa los píxeles en un búfer de fotogramas, que luego el controlador de pantalla lee continuamente para actualizar la pantalla
Los dispositivos EVE siguen un enfoque diferente. En lugar de enviar un framebuffer, la MCU principal envía comandos de dibujo a la GPU. Estos comandos describen lo que se debe dibujar en la pantalla, mientras que el motor gráfico de EVE genera los píxeles finales internamente.
Esto reduce considerablemente el consumo de memoria y las necesidades de ancho de banda en la MCU.
El fotograma renderizado viene definido por una estructura llamada «lista de visualización». La lista de visualización es una secuencia de comandos de la GPU que se ejecutan en cada fotograma para generar la imagen final.
Así pues, un proceso de visualización simplificado quedaría así:
MCU → comandos de dibujo → GPU EVE → pantalla LCD
Esta arquitectura basada en comandos es la razón por la que se pueden ejecutar interfaces gráficas complejas en microcontroladores relativamente pequeños.
Bloques de memoria clave de EVE
A nivel interno, la GPU EVE utiliza varias áreas de memoria para procesar los comandos gráficos.
RAM_DL
- almacena la lista de visualización que se usa para renderizar el fotograma actual
RAM_G
- memoria gráfica de uso general que se usa para imágenes, fuentes y otros recursos
FIFO de comandos
- búfer que usa el coprocesador para recibir comandos de la MCU
La MCU principal escribe los comandos en la FIFO de comandos. El coprocesador EVE interpreta estos comandos y crea la lista de visualización almacenada en RAM_DL. Durante el ciclo de actualización de la pantalla, la GPU ejecuta la lista de visualización y genera el fotograma final.
Cómo encaja LVGL en el proceso
Cuando se usa LVGL con pantallas tradicionales, renderiza los píxeles en un búfer de fotogramas en la memoria de la MCU. Con las pantallas EVE, el proceso es diferente.
Las operaciones de dibujo de LVGL se traducen en comandos EVE para la GPU, que se envían al dispositivo a través de SPI. A continuación, la GPU crea la lista de visualización y renderiza el fotograma internamente.
El flujo resultante queda así:
Esto permite que LVGL ejecute interfaces de usuario complejas sin que el consumo de memoria de la MCU aumente demasiado.
Crear el proyecto STM32
El siguiente paso es preparar el proyecto de desarrollo para la placa de evaluación Riverdi. La MCU principal ejecutará el marco LVGL y se comunicará con la GPU EVE a través de SPI.
Empieza creando un nuevo proyecto STM32 en STM32CubeIDE para el microcontrolador que se usa en la placa de evaluación. Una vez creado el proyecto, configura los periféricos necesarios para comunicarte con el dispositivo EVE.
La interfaz más importante es la SPI, que se utiliza para transmitir comandos y datos entre la MCU y el controlador gráfico EVE.
Además de SPI, hay que configurar varias señales de control como pines GPIO. Estas señales se usan para controlar el estado de alimentación del dispositivo EVE y gestionar la comunicación con la GPU.
Entre las señales típicas que requiere la interfaz EVE se incluyen:
CS
- señal de selección de chip para la comunicación SPI
PD
- pin de control de apagado que se usa para reiniciar o apagar y volver a encender el dispositivo EVE
INT
- línea de interrupción que usa la GPU para enviar señales de eventos a la MCU del host
Una vez configuradas la interfaz SPI y las señales GPIO, puedes compilar el proyecto y grabarlo en la placa para comprobar que la configuración básica del hardware funciona.
Inicialización de LVGL y del controlador de pantalla EVE
Una vez que el entorno del proyecto esté listo, hay que inicializar la biblioteca LVGL. Este paso prepara las estructuras internas de LVGL y activa el marco de trabajo gráfico.
lv_init();
LVGL ofrece un controlador de pantalla específico para las GPU de EVE. Este controlador convierte las operaciones de dibujo de LVGL en comandos que el motor gráfico de EVE entiende.
El controlador de pantalla se crea mediante la función lv_draw_eve_display_create().
lv_display_t * disp = lv_draw_eve_display_create( 1280, 600, LV_DISPLAY_RENDER_MODE_DIRECT );
Estos parámetros definen la resolución de la pantalla. En este ejemplo usamos la resolución de 1280×600 de la pantalla Riverdi RVT70HSBNWC00-B.
Activar la entrada táctil
La pantalla Riverdi EVE incluye un controlador táctil capacitivo integrado al que se puede acceder a través de la interfaz de la GPU de EVE.
LVGL ofrece una función auxiliar que crea un controlador de dispositivo de entrada conectado al motor táctil EVE.
lv_draw_eve_touch_create(disp);
Una vez que se llama a esta función, las coordenadas táctiles que detecta el controlador EVE se pasan automáticamente a LVGL y se convierten en eventos de entrada.
Esto permite que los widgets de LVGL, como los botones, los controles deslizantes y las listas, reaccionen a la interacción del usuario.
Ejecutar la primera demostración de LVGL
Una vez inicializados los controladores de pantalla y de entrada, el sistema ya está listo para mostrar la primera interfaz gráfica.
Una forma sencilla de comprobar que todo funciona bien es crear una pantalla con varios widgets estándar de LVGL. Aquí abajo tienes el código de demostración:
static void create_test_ui(void)
{
lv_obj_t * scr = lv_screen_active();
/* Antecedentes */
lv_obj_set_style_bg_color(scr, COLOR_BG, 0);
lv_obj_set_style_bg_opa(scr, LV_OPA_COVER, 0);
/* Título */
lv_obj_t * title = lv_label_create(scr);
lv_label_set_text(title, "LVGL en Riverdi EVE");
lv_obj_set_style_text_font(title, &lv_font_montserrat_44, 0);
lv_obj_set_style_text_color(title, COLOR_TEXT, 0);
lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 48);
/* Subtítulo */
lv_obj_t * subtitle = lv_label_create(scr);
lv_label_set_text(subtitle, «Prueba básica de compatibilidad de widgets»);
lv_obj_set_style_text_font(subtítulo, &lv_font_montserrat_24, 0);
lv_obj_set_style_text_color(subtítulo, COLOR_TEXT, 0);
lv_obj_align(subtítulo, LV_ALIGN_TOP_MID, 0, 100);
/* --- anclajes de diseño --- */
int start_y = 170;
int col_left = 180;
int col_right = 640;
/* Botón */
lv_obj_t * btn = lv_button_create(scr);
lv_obj_set_size(btn, 200, 60);
lv_obj_align(btn, LV_ALIGN_TOP_LEFT, col_left, start_y);
lv_obj_set_style_bg_color(btn, COLOR_ACCENT, 0);
lv_obj_t * btn_label = lv_label_create(btn);
lv_label_set_text(btn_label, "Botón");
lv_obj_center(btn_label);
/* Slider */
lv_obj_t * slider = lv_slider_create(scr);
lv_obj_set_width(slider, 260);
lv_obj_align(slider, LV_ALIGN_TOP_LEFT, col_right, start_y + 15);
lv_slider_set_value(slider, 45, LV_ANIM_OFF);
lv_obj_set_style_bg_color(slider, COLOR_WIDGET, LV_PART_MAIN);
lv_obj_set_style_bg_color(slider, COLOR_ACCENT, LV_PART_INDICATOR);
/* Cambiar */
lv_obj_t * sw = lv_switch_create(scr);
lv_obj_align(sw, LV_ALIGN_TOP_LEFT, col_left, start_y + 120);
lv_obj_t * sw_label = lv_label_create(scr);
lv_label_set_text(sw_label, "Interruptor");
lv_obj_set_style_text_color(sw_label, COLOR_TEXT, 0);
lv_obj_align_to(sw_label, sw, LV_ALIGN_OUT_RIGHT_MID, 20, 0);
/* Casilla de selección */
lv_obj_t * cb = lv_checkbox_create(scr);
lv_checkbox_set_text(cb, "Casilla de selección");
lv_obj_set_style_text_color(cb, COLOR_TEXT, 0);
lv_obj_align(cb, LV_ALIGN_TOP_LEFT, col_right, start_y + 120);
/* Bar */
lv_obj_t * bar = lv_bar_create(scr);
lv_obj_set_size(bar, 500, 20);
lv_obj_align(bar, LV_ALIGN_TOP_MID, 0, start_y + 220);
lv_bar_set_value(bar, 70, LV_ANIM_OFF);
lv_obj_set_style_bg_color(bar, COLOR_WIDGET, LV_PART_MAIN);
lv_obj_set_style_bg_color(bar, COLOR_ACCENT, LV_PART_INDICATOR);
lv_obj_t * bar_label = lv_label_create(scr);
lv_label_set_text(bar_label, "Bar");
lv_obj_set_style_text_color(bar_label, COLOR_TEXT, 0);
lv_obj_align_to(bar_label, bar, LV_ALIGN_OUT_TOP_MID, 0, -8);
}
Conclusión
En esta guía te hemos enseñado cómo ejecutar LVGL en una pantalla Riverdi EVE4 utilizando la placa de evaluación Riverdi como plataforma host.
En lugar de renderizar un framebuffer tradicional en la MCU, el sistema utiliza el motor gráfico EVE para generar la imagen final. El microcontrolador principal envía comandos de dibujo a través de SPI, mientras que la GPU BT817 crea la lista de visualización y renderiza el fotograma en la pantalla.
Esta arquitectura permite que se ejecuten interfaces gráficas de usuario complejas en microcontroladores relativamente pequeños, manteniendo a la vez un bajo consumo de memoria y una carga reducida de la CPU.
Una vez que el controlador de pantalla esté correctamente inicializado, puedes usar LVGL para crear aplicaciones gráficas completas, igual que con otros controladores de pantalla compatibles.
A partir de aquí, los desarrolladores pueden empezar a crear sus propias interfaces utilizando los widgets, los diseños y los mecanismos de gestión de eventos de LVGL.
Otros pasos podrían ser:
- Integración de pantallas personalizadas y lógica de aplicación
- Añadir imágenes y fuentes almacenadas en EVE RAM_G
- Optimizar la comunicación SPI para mejorar el rendimiento del renderizado
Para ello, echa un vistazo a la página web de documentación de LVGL y echa un vistazo a nuestro repositorio de Riverdi en GitHub.
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.
