lvgl

Inglés | 中文 | Portugués de Brasil | 日本語

Biblioteca de gráficos ligera y versátil

Sitio web | Documentos | Foro | Demostraciones | Servicios

? Descripción general

Maduro y Conocido
LVGL es la biblioteca de gráficos integrados de código abierto y gratuita más popular para crear hermosas interfaces de usuario para cualquier MCU, MPU y tipo de pantalla. Cuenta con el respaldo de proveedores y proyectos líderes en la industria como Arm, STM32, NXP, Espressif, Nuvoton, Arduino, RT-Thread, Zephyr, NuttX, Adafruit y muchos más.

Ricas funciones
Tiene todas las características para crear GUI modernas y hermosas: más de 30 widgets integrados, un potente sistema de estilo, administradores de diseño inspirados en la web y un sistema de tipografía compatible con muchos idiomas. Para integrar LVGL en su plataforma, todo lo que necesita es al menos 32 kB de RAM y 128 kB de Flash, un compilador de C, un búfer de cuadros y al menos un búfer de tamaño de pantalla de 1/10 para renderizar.

Servicios
Nuestro equipo está listo para ayudarlo con el diseño gráfico, la implementación de la interfaz de usuario y los servicios de consultoría. Contáctenos si necesita ayuda durante el desarrollo de su próximo proyecto GUI.

Características

Gratis y portátil

• Una biblioteca C (compatible con C++) totalmente portátil sin dependencias externas.
• Se puede compilar en cualquier MCU o MPU, con cualquier sistema operativo (RT).
• Admite pantallas monocromáticas, ePaper, OLED o TFT, o incluso monitores. Pantallas
• Distribuido bajo la licencia MIT, por lo que también puedes usarlo fácilmente en proyectos comerciales.
• Necesita sólo 32 kB de RAM y 128 kB de Flash, un búfer de fotogramas y al menos un búfer de tamaño de pantalla de 1/10 para renderizar.
• El sistema operativo, la memoria externa y la GPU son compatibles, pero no son necesarios.

Widgets, estilos, diseños y más

• Más de 30 widgets integrados: botón, etiqueta, control deslizante, gráfico, teclado, medidor, arco, tabla y muchos más.
• Sistema de estilo flexible con ~100 propiedades de estilo para personalizar cualquier parte de los widgets en cualquier estado.
• Motores de diseño Flexbox y Grid-like para dimensionar y posicionar automáticamente los widgets de forma responsiva.
• Los textos se procesan con codificación UTF-8 y admiten los sistemas de escritura CJK, tailandés, hindi, árabe y persa.
• Ajuste de palabras, interletraje, desplazamiento de texto, representación de subpíxeles, entrada de chino Pinyin-IME, emojis en textos.
• Motor de renderizado que admite animaciones, suavizado, opacidad, desplazamiento suave, sombras, transformación de imágenes, etc.
• Admite mouse, panel táctil, teclado, botones externos y dispositivos de entrada de codificador.
• Soporte para múltiples pantallas.

Soporte de vinculación y compilación

• MicroPython Binding expone la API LVGL
• PikaScript Binding python en MCU es más ligero y sencillo.
• No se utiliza ningún sistema de construcción personalizado. Puede crear LVGL a medida que crea los otros archivos de su proyecto.
• La compatibilidad con Make y CMake se incluye de fábrica.
• Desarrolle en PC y use el mismo código de interfaz de usuario en hardware integrado.
• Convierta el código C UI a un archivo HTML con nuestro puerto Emscripten.

Documentos, herramientas y servicios

• Documentación detallada con más de 100 ejemplos sencillos
• Servicios como diseño, implementación y consultoría de interfaz de usuario para hacer que el desarrollo de UI sea más simple y rápido.

❤️ Patrocinador

Si LVGL le ahorró mucho tiempo y dinero o simplemente se divirtió usándolo, considere apoyar su desarrollo.

¿Cómo gastamos las donaciones?
Nuestro objetivo es proporcionar una compensación financiera a las personas que hacen más por LVGL. Esto significa que no sólo los mantenedores, sino también cualquiera que implemente una gran característica deberían recibir un pago con el dinero acumulado. Utilizamos las donaciones para cubrir nuestros costos operativos, como servidores y servicios relacionados.

¿Cómo donar?
Usamos patrocinadores de GitHub donde puede enviar fácilmente donaciones únicas o recurrentes. También podrás ver todos nuestros gastos de forma transparente.

¿Cómo cobrar tu aporte?
Si alguien implementa o soluciona un problema etiquetado como Patrocinado, recibirá un pago por ese trabajo. Estimamos el tiempo requerido, la complejidad y la importancia del problema y fijamos un precio en consecuencia. Para participar, simplemente comente un problema patrocinado diciendo "Hola, me gustaría solucionarlo. Así es como planeo solucionarlo/implementarlo...". Un trabajo se considera listo cuando es aprobado y fusionado por un mantenedor. Después de eso, puedes enviar el gasto en opencollective.com y recibirás el pago en unos días.

Organizaciones que apoyan a LVGL

Personas que apoyan a LVGL

? Paquetes

LVGL está disponible como:

• biblioteca arduino
• Paquete de plataforma IO
• biblioteca céfiro
• Componente ESP-IDF(ESP32)
• Componente NXP MCUXpresso
• Biblioteca NuttX
• RTOS de subproceso RT
• Paquete CMSIS
• Paquete RIOT OS

? Ejemplos

Vea algunos ejemplos de creación de widgets, uso de diseños y aplicación de estilos. Encontrará código C y MicroPython, y enlaces para probar o editar los ejemplos en un editor MicroPython en línea.

Para obtener más ejemplos, consulte la carpeta Ejemplos.

etiqueta hola mundo

código C

 /*Change the active screen's background color*/
lv_obj_set_style_bg_color ( lv_screen_active (), lv_color_hex ( 0x003a57 ), LV_PART_MAIN );

/*Create a white label, set its text and align it to the center*/
lv_obj_t * label = lv_label_create ( lv_screen_active ());
lv_label_set_text ( label , "Hello world" );
lv_obj_set_style_text_color ( label , lv_color_hex ( 0xffffff ), LV_PART_MAIN );
lv_obj_align ( label , LV_ALIGN_CENTER , 0 , 0 );

Código MicroPython | Simulador en línea

 # Change the active screen's background color
scr = lv . screen_active ()
scr . set_style_bg_color ( lv . color_hex ( 0x003a57 ), lv . PART . MAIN )

# Create a white label, set its text and align it to the center
label = lv . label ( lv . screen_active ())
label . set_text ( "Hello world" )
label . set_style_text_color ( lv . color_hex ( 0xffffff ), lv . PART . MAIN )
label . align ( lv . ALIGN . CENTER , 0 , 0 )

Botón con evento de clic

código C

 lv_obj_t * button = lv_button_create ( lv_screen_active ());                   /*Add a button to the current screen*/
lv_obj_center ( button );                                             /*Set its position*/
lv_obj_set_size ( button , 100 , 50 );                                  /*Set its size*/
lv_obj_add_event_cb ( button , button_event_cb , LV_EVENT_CLICKED , NULL ); /*Assign a callback to the button*/

lv_obj_t * label = lv_label_create ( button );                        /*Add a label to the button*/
lv_label_set_text ( label , "Button" );                             /*Set the labels text*/
lv_obj_center ( label );                                           /*Align the label to the center*/
...

void button_event_cb ( lv_event_t * e )
{
  printf ( "Clickedn" );
}

Código MicroPython | Simulador en línea

 def button_event_cb ( e ):
  print ( "Clicked" )

# Create a Button and a Label
button = lv . button ( lv . screen_active ())
button . center ()
button . set_size ( 100 , 50 )
button . add_event_cb ( button_event_cb , lv . EVENT . CLICKED , None )

label = lv . label ( button )
label . set_text ( "Button" )
label . center ()

Casillas de verificación con diseño

código C

 lv_obj_set_flex_flow ( lv_screen_active (), LV_FLEX_FLOW_COLUMN );
lv_obj_set_flex_align ( lv_screen_active (), LV_FLEX_ALIGN_CENTER , LV_FLEX_ALIGN_START , LV_FLEX_ALIGN_CENTER );

lv_obj_t * cb ;
cb = lv_checkbox_create ( lv_screen_active ());
lv_checkbox_set_text ( cb , "Apple" );
lv_obj_add_event_cb ( cb , event_handler , LV_EVENT_ALL , NULL );

cb = lv_checkbox_create ( lv_screen_active ());
lv_checkbox_set_text ( cb , "Banana" );
lv_obj_add_state ( cb , LV_STATE_CHECKED );
lv_obj_add_event_cb ( cb , event_handler , LV_EVENT_ALL , NULL );

cb = lv_checkbox_create ( lv_screen_active ());
lv_checkbox_set_text ( cb , "Lemon" );
lv_obj_add_state ( cb , LV_STATE_DISABLED );
lv_obj_add_event_cb ( cb , event_handler , LV_EVENT_ALL , NULL );

cb = lv_checkbox_create ( lv_screen_active ());
lv_obj_add_state ( cb , LV_STATE_CHECKED | LV_STATE_DISABLED );
lv_checkbox_set_text ( cb , "Melonnand a new line" );
lv_obj_add_event_cb ( cb , event_handler , LV_EVENT_ALL , NULL );

Código MicroPython | Simulador en línea

 def event_handler ( e ):
    code = e . get_code ()
    obj = e . get_target_obj ()
    if code == lv . EVENT . VALUE_CHANGED :
        txt = obj . get_text ()
        if obj . get_state () & lv . STATE . CHECKED :
            state = "Checked"
        else :
            state = "Unchecked"
        print ( txt + ":" + state )


lv . screen_active (). set_flex_flow ( lv . FLEX_FLOW . COLUMN )
lv . screen_active (). set_flex_align ( lv . FLEX_ALIGN . CENTER , lv . FLEX_ALIGN . START , lv . FLEX_ALIGN . CENTER )

cb = lv . checkbox ( lv . screen_active ())
cb . set_text ( "Apple" )
cb . add_event_cb ( event_handler , lv . EVENT . ALL , None )

cb = lv . checkbox ( lv . screen_active ())
cb . set_text ( "Banana" )
cb . add_state ( lv . STATE . CHECKED )
cb . add_event_cb ( event_handler , lv . EVENT . ALL , None )

cb = lv . checkbox ( lv . screen_active ())
cb . set_text ( "Lemon" )
cb . add_state ( lv . STATE . DISABLED )
cb . add_event_cb ( event_handler , lv . EVENT . ALL , None )

cb = lv . checkbox ( lv . screen_active ())
cb . add_state ( lv . STATE . CHECKED | lv . STATE . DISABLED )
cb . set_text ( "Melon" )
cb . add_event_cb ( event_handler , lv . EVENT . ALL , None )

Diseñar un control deslizante

código C

 lv_obj_t * slider = lv_slider_create ( lv_screen_active ());
lv_slider_set_value ( slider , 70 , LV_ANIM_OFF );
lv_obj_set_size ( slider , 300 , 20 );
lv_obj_center ( slider );

/*Add local styles to MAIN part (background rectangle)*/
lv_obj_set_style_bg_color ( slider , lv_color_hex ( 0x0F1215 ), LV_PART_MAIN );
lv_obj_set_style_bg_opa ( slider , 255 , LV_PART_MAIN );
lv_obj_set_style_border_color ( slider , lv_color_hex ( 0x333943 ), LV_PART_MAIN );
lv_obj_set_style_border_width ( slider , 5 , LV_PART_MAIN );
lv_obj_set_style_pad_all ( slider , 5 , LV_PART_MAIN );

/*Create a reusable style sheet for the INDICATOR part*/
static lv_style_t style_indicator ;
lv_style_init ( & style_indicator );
lv_style_set_bg_color ( & style_indicator , lv_color_hex ( 0x37B9F5 ));
lv_style_set_bg_grad_color ( & style_indicator , lv_color_hex ( 0x1464F0 ));
lv_style_set_bg_grad_dir ( & style_indicator , LV_GRAD_DIR_HOR );
lv_style_set_shadow_color ( & style_indicator , lv_color_hex ( 0x37B9F5 ));
lv_style_set_shadow_width ( & style_indicator , 15 );
lv_style_set_shadow_spread ( & style_indicator , 5 );
4
/*Add the style sheet to the slider's INDICATOR part*/
lv_obj_add_style ( slider , & style_indicator , LV_PART_INDICATOR );

/*Add the same style to the KNOB part too and locally overwrite some properties*/
lv_obj_add_style ( slider , & style_indicator , LV_PART_KNOB );

lv_obj_set_style_outline_color ( slider , lv_color_hex ( 0x0096FF ), LV_PART_KNOB );
lv_obj_set_style_outline_width ( slider , 3 , LV_PART_KNOB );
lv_obj_set_style_outline_pad ( slider , -5 , LV_PART_KNOB );
lv_obj_set_style_shadow_spread ( slider , 2 , LV_PART_KNOB );

Código MicroPython | Simulador en línea

 # Create a slider and add the style
slider = lv . slider ( lv . screen_active ())
slider . set_value ( 70 , lv . ANIM . OFF )
slider . set_size ( 300 , 20 )
slider . center ()

# Add local styles to MAIN part (background rectangle)
slider . set_style_bg_color ( lv . color_hex ( 0x0F1215 ), lv . PART . MAIN )
slider . set_style_bg_opa ( 255 , lv . PART . MAIN )
slider . set_style_border_color ( lv . color_hex ( 0x333943 ), lv . PART . MAIN )
slider . set_style_border_width ( 5 , lv . PART . MAIN )
slider . set_style_pad_all ( 5 , lv . PART . MAIN )

# Create a reusable style sheet for the INDICATOR part
style_indicator = lv . style_t ()
style_indicator . init ()
style_indicator . set_bg_color ( lv . color_hex ( 0x37B9F5 ))
style_indicator . set_bg_grad_color ( lv . color_hex ( 0x1464F0 ))
style_indicator . set_bg_grad_dir ( lv . GRAD_DIR . HOR )
style_indicator . set_shadow_color ( lv . color_hex ( 0x37B9F5 ))
style_indicator . set_shadow_width ( 15 )
style_indicator . set_shadow_spread ( 5 )

# Add the style sheet to the slider's INDICATOR part
slider . add_style ( style_indicator , lv . PART . INDICATOR )
slider . add_style ( style_indicator , lv . PART . KNOB )

# Add the same style to the KNOB part too and locally overwrite some properties
slider . set_style_outline_color ( lv . color_hex ( 0x0096FF ), lv . PART . KNOB )
slider . set_style_outline_width ( 3 , lv . PART . KNOB )
slider . set_style_outline_pad ( - 5 , lv . PART . KNOB )
slider . set_style_shadow_spread ( 2 , lv . PART . KNOB )

Textos en inglés, hebreo (LTR-RTL mixto) y chino

código C

 lv_obj_t * ltr_label = lv_label_create ( lv_screen_active ());
lv_label_set_text ( ltr_label , "In modern terminology, a microcontroller is similar to a system on a chip (SoC)." );
lv_obj_set_style_text_font ( ltr_label , & lv_font_montserrat_16 , 0 );
lv_obj_set_width ( ltr_label , 310 );
lv_obj_align ( ltr_label , LV_ALIGN_TOP_LEFT , 5 , 5 );

lv_obj_t * rtl_label = lv_label_create ( lv_screen_active ());
lv_label_set_text ( rtl_label , "מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit)." );
lv_obj_set_style_base_dir ( rtl_label , LV_BASE_DIR_RTL , 0 );
lv_obj_set_style_text_font ( rtl_label , & lv_font_dejavu_16_persian_hebrew , 0 );
lv_obj_set_width ( rtl_label , 310 );
lv_obj_align ( rtl_label , LV_ALIGN_LEFT_MID , 5 , 0 );

lv_obj_t * cz_label = lv_label_create ( lv_screen_active ());
lv_label_set_text ( cz_label ,
                  "嵌入式系统（Embedded System），n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。" );
lv_obj_set_style_text_font ( cz_label , & lv_font_simsun_16_cjk , 0 );
lv_obj_set_width ( cz_label , 310 );
lv_obj_align ( cz_label , LV_ALIGN_BOTTOM_LEFT , 5 , -5 );

Código MicroPython | Simulador en línea

 ltr_label = lv . label ( lv . screen_active ())
ltr_label . set_text ( "In modern terminology, a microcontroller is similar to a system on a chip (SoC)." )
ltr_label . set_style_text_font ( lv . font_montserrat_16 , 0 );

ltr_label . set_width ( 310 )
ltr_label . align ( lv . ALIGN . TOP_LEFT , 5 , 5 )

rtl_label = lv . label ( lv . screen_active ())
rtl_label . set_text ( "מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit)." )
rtl_label . set_style_base_dir ( lv . BASE_DIR . RTL , 0 )
rtl_label . set_style_text_font ( lv . font_dejavu_16_persian_hebrew , 0 )
rtl_label . set_width ( 310 )
rtl_label . align ( lv . ALIGN . LEFT_MID , 5 , 0 )

font_simsun_16_cjk = lv . font_load ( "S:../../assets/font/lv_font_simsun_16_cjk.fnt" )

cz_label = lv . label ( lv . screen_active ())
cz_label . set_style_text_font ( font_simsun_16_cjk , 0 )
cz_label . set_text ( "嵌入式系统（Embedded System）， n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。" )
cz_label . set_width ( 310 )
cz_label . align ( lv . ALIGN . BOTTOM_LEFT , 5 , - 5 )

▶️ empezar

Esta lista lo guiará para comenzar con LVGL paso a paso.

Familiarícese con LVGL

1. Consulte las demostraciones en línea para ver LVGL en acción (3 minutos).
2. Lea la página de Introducción de la documentación (5 minutos).
3. Familiarícese con los conceptos básicos en la página de descripción general rápida (15 minutos).

Comience a utilizar LVGL

4. Configurar un simulador (10 minutos).
5. Pruebe algunos ejemplos.
6. Puerto LVGL a una placa. Consulte la guía de portabilidad o consulte los proyectos listos para usar.

Conviértete en un profesional

7. Lea la página de Componentes principales para comprender mejor la biblioteca (2-3 horas)
8. Consulta la documentación de los Widgets para ver sus características y uso.

Obtenga ayuda y ayude a otros

9. Si tienes dudas entra al Foro
10. Lea la guía de contribución para ver cómo puede ayudar a mejorar LVGL (15 minutos)

? Servicios

LVGL LLC se estableció para proporcionar una sólida experiencia para la biblioteca LVGL y ofrecer varios tipos de servicios para ayudarlo en el desarrollo de la interfaz de usuario. Con más de 15 años de experiencia en la industria de gráficos e interfaces de usuario, podemos ayudarlo a llevar su interfaz de usuario al siguiente nivel.

• Diseño gráfico Nuestros diseñadores gráficos internos son expertos en crear hermosos diseños modernos que se adaptan a su producto y a los recursos de su hardware.
• Implementación de UI También podemos implementar su UI según el diseño que usted o nosotros hayamos creado. Puede estar seguro de que aprovecharemos al máximo su hardware y LVGL. Si falta una función o widget en LVGL, no se preocupe, lo implementaremos por usted.
• Consultoría y soporte También podemos ayudarlo con consultoría para evitar errores costosos y que consumen mucho tiempo durante el desarrollo de la interfaz de usuario.
• Certificación de placa Para las empresas que ofrecen placas de desarrollo o kits listos para producción, realizamos una certificación de placa que muestra cómo la placa puede ejecutar LVGL.

Consulte nuestras Demos como referencia. Para obtener más información, consulte la página de Servicios.

Contáctanos y cuéntanos cómo podemos ayudarte.

? Contribuyendo

LVGL es un proyecto abierto y la contribución es bienvenida. Hay muchas maneras de contribuir, desde simplemente hablar sobre su proyecto, escribiendo ejemplos, mejorando la documentación, corrigiendo errores o incluso alojando su propio proyecto bajo la organización LVGL.

Para obtener una descripción detallada de las oportunidades de contribución, visite la sección Contribución de la documentación.

Más de 300 personas ya dejaron su huella en LVGL. ¡Sé uno de ellos! ¡Nos vemos aquí! ?

... y muchos otros.