Índice
Introducción
Cuando se construyen interfaces gráficas de usuario integradas, la coherencia de estilo y una arquitectura limpia son importantes.
LVGL proporciona una potente forma de controlar todo el aspecto de tu aplicación utilizando estilos globales y un sistema de temas personalizados.
Este artículo explica cómo hacerlo:
- definir estilos globales,
- adjúntalos a un tema personalizado,
- actualizar toda la interfaz con una sola llamada a la función,
- y por qué este enfoque mejora el flujo de trabajo de ingeniería, especialmente en proyectos GUI grandes o en crecimiento.
Y todo utilizando nuestra pantalla estándar Riverdi de 10″.
Cómo funciona
LVGL te permite:
- Definir estilos (lv_style_t),
- Crea un tema personalizado,
- Asigna una llamada de retorno que aplique estilos en función del tipo de objeto,
- Dile a LVGL que reconstruya el tema y actualice todos los objetos.
Se trata de una arquitectura favorable a la ingeniería: un lugar lo cambia todo.
Ejemplo de código - Tema global reutilizable
A continuación se muestra el ejemplo completo de demostración:
- Estilos globales para botones y deslizadores,
- cambio dinámico de paleta,
- Reestilización automática de todos los objetos.
Variables globales de estilo
static lv_style_t style_common_main;
static lv_style_t style_slider_main;
static lv_style_t style_slider_indicator;
static lv_style_t style_slider_knob;
static lv_palette_t current_palette = LV_PALETTE_ORANGE;
Llamada de retorno para aplicar el tema
Aplica automáticamente estilos al widget por clase. Puede ampliarse fácilmente a otros tipos de widgets.
static void theme_apply_cb(lv_theme_t * th, lv_obj_t * obj)
{
if(lv_obj_check_type(obj, &lv_button_class)) {
lv_obj_add_style(obj, &style_common_main, 0);
}
if(lv_obj_check_type(obj, &lv_slider_class)) {
lv_obj_add_style(obj, &style_slider_main, LV_PART_MAIN);
lv_obj_add_style(obj, &style_slider_indicator, LV_PART_INDICATOR);
lv_obj_add_style(obj, &style_slider_knob, LV_PART_KNOB);
}
}
Reconstruir tema (truco de ingeniería del núcleo)
Esto reconstruye los estilos, los asocia a un tema y fuerza una actualización global.
static void rebuild_theme(void)
{
lv_style_reset(&style_common_main);
lv_style_reset(&style_slider_main);
lv_style_reset(&style_slider_indicator);
lv_style_reset(&style_slider_knob);
/* Estilo del botón */
lv_style_init(&style_common_main);
lv_style_set_bg_color(&style_common_main, lv_palette_main(current_palette));
lv_style_set_border_color(&style_common_main, lv_palette_darken(LV_PALETTE_BLUE, 3));
lv_style_set_border_width(&style_common_main, 3);
lv_style_set_radius(&style_common_main, 6);
/* Estilos del deslizador */
lv_style_init(&style_slider_main);
lv_style_set_bg_color(&style_slider_main, lv_palette_lighten(current_palette, 2));
lv_style_set_bg_opa(&style_slider_main, LV_OPA_COVER);
lv_style_init(&style_slider_indicator);
lv_style_set_bg_color(&style_slider_indicator, lv_palette_darken(current_palette, 2));
lv_style_init(&style_slider_knob);
lv_style_set_bg_color(&style_slider_knob, lv_color_blanco());
/* Adjuntar tema */
lv_theme_t * th_act = lv_display_get_theme(NULL);
static lv_theme_t th_new;
th_new = *th_act;
lv_theme_set_parent(&th_new, th_act);
lv_theme_set_apply_cb(&th_new, theme_apply_cb);
lv_display_set_theme(NULL, &th_new);
lv_obj_report_style_change(NULL);
}
Cambiar el color del tema
Aquí tenemos la función que cambia el color del tema actualmente utilizado al pulsar el botón. Es sólo para presentar la facilidad de hacerlo. Para más colores, te recomiendo que utilices un array.
static void color_change_event_cb(lv_event_t * e)
{
if(current_palette == LV_PALETTE_ORANGE)
current_palette = LV_PALETTE_GREEN;
else if(current_palette == LV_PALETTE_GREEN)
current_palette = LV_PALETTE_BLUE;
else
current_palette = LV_PALETTE_ORANGE;
rebuild_theme();
}
Demostración final
Aquí creamos el botón predeterminado en la parte superior del centro de visualización. Luego llamamos a la función rebuild_theme() para cambiar el estilo principal de los widgets que utilizamos. Ahora podemos crear otro botón debajo del primero y también crear un deslizador debajo de él. Deberías poder ver los diferentes estilos entre los botones. Además, tras pulsar el botón, cambiamos el color del estilo de los nuevos widgets, mientras que el predeterminado permanece inalterado.
void lv_example_style_change(void)
{
lv_obj_t * btn_default = lv_button_create(lv_screen_active());
lv_obj_align(btn_default, LV_ALIGN_CENTER, 0, -100);
lv_label_set_text(lv_label_create(btn_default), «Botón por defecto»);
reconstruir_tema();
lv_obj_t * btn_themed = lv_button_create(lv_screen_active());
lv_obj_align(btn_themed, LV_ALIGN_CENTER, 0, 100);
lv_obj_add_event_cb(btn_themed, color_change_event_cb, LV_EVENT_CLICKED, NULL);
lv_label_set_text(lv_label_create(btn_themed), «Cambiar color del tema»);
lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_obj_align(slider, LV_ALIGN_CENTER, 0, 200);
lv_obj_set_width(slider, 250);
lv_slider_set_value(slider, 40, LV_ANIM_OFF);
}
Por qué son útiles los estilos globales
La mayoría de los ingenieros descubren rápidamente que el estilo de la interfaz gráfica de usuario se vuelve desordenado cuando cada botón, control deslizante o widget tiene su propio código de estilo.
Los temas globales resuelven varios problemas de ingeniería:
- Control visual centralizado
Toda la lógica de estilo está en un solo lugar. No necesitas visitar 10 archivos para cambiar un botón o un deslizador.
- Cambios de IU más rápidos
Cambiar los colores de la marca es instantáneo.
Marketing pide «verde en vez de naranja»?
Cambia una variable → toda la interfaz gráfica se actualiza.
- Arquitectura escalable para grandes proyectos
Cuando la IU crece más allá de unas pocas pantallas, el estilo local se vuelve inmanejable.
Garantía de temas globales:
- márgenes consistentes,
- radios consistentes,
- uso coherente de la paleta,
- comportamiento coherente del widget.
- Sin estilo de copiar y pegar
Sin temas, los ingenieros duplican el código de estilo en todas las pantallas.
Los estilos globales eliminan la duplicación y reducen el tamaño del código.
- Cambio de tema en tiempo de ejecución como:
- Modo oscuro/claro,
- Temas seleccionables por el usuario,
- Modos de seguridad (por ejemplo, la IU «Advertencia» utiliza el tema rojo),
- Marca OEM (un firmware, múltiples skins visuales).
Si quieres saber más, visita el sitio web de 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!
Ve a nuestro catálogo de productos y comprueba cómo puedes ahorrar por calidad, no en calidad.
