lvgl

Inglês | 中文 | Português do Brasil | 日本語

Biblioteca gráfica leve e versátil

Site | Documentos | Fórum | Demonstrações | Serviços

? Visão geral

Maduro e conhecido
LVGL é a biblioteca gráfica incorporada gratuita e de código aberto mais popular para criar belas UIs para qualquer MCU, MPU e tipo de exibição. É apoiado por fornecedores e projetos líderes do setor, como Arm, STM32, NXP, Espressif, Nuvoton, Arduino, RT-Thread, Zephyr, NuttX, Adafruit e muitos mais.

Rico em recursos
Possui todos os recursos para criar GUIs modernas e bonitas: mais de 30 widgets integrados, um sistema de estilo poderoso, gerenciadores de layout inspirados na web e um sistema de tipografia com suporte para vários idiomas. Para integrar LVGL em sua plataforma, tudo que você precisa é de pelo menos 32kB de RAM e 128kB de Flash, um compilador C, um buffer de quadros e pelo menos um buffer de tamanho de tela de 1/10 para renderização.

Serviços
Nossa equipe está pronta para ajudá-lo com design gráfico, implementação de UI e serviços de consultoria. Contate-nos se precisar de suporte durante o desenvolvimento de seu próximo projeto de GUI.

Características

Gratuito e portátil

• Uma biblioteca C (compatível com C++) totalmente portátil, sem dependências externas.
• Pode ser compilado para qualquer MCU ou MPU, com qualquer sistema operacional (RT).
• Suporta telas monocromáticas, ePaper, OLED ou TFT, ou até mesmo monitores. Exibições
• Distribuído sob a licença do MIT, para que você também possa usá-lo facilmente em projetos comerciais.
• Precisa apenas de 32kB de RAM e 128kB de Flash, um buffer de quadros e pelo menos um buffer de tamanho de tela de 1/10 para renderização.
• SO, memória externa e GPU são suportados, mas não são obrigatórios.

Widgets, estilos, layouts e muito mais

• Mais de 30 widgets integrados: botão, rótulo, controle deslizante, gráfico, teclado, medidor, arco, tabela e muito mais.
• Sistema de estilo flexível com cerca de 100 propriedades de estilo para personalizar qualquer parte dos widgets em qualquer estado.
• Mecanismos de layout Flexbox e Grid-like para dimensionar e posicionar automaticamente os widgets de maneira responsiva.
• Os textos são renderizados com codificação UTF-8, suportando sistemas de escrita CJK, tailandês, hindi, árabe e persa.
• Quebra automática de palavras, kerning, rolagem de texto, renderização de subpixel, entrada em chinês Pinyin-IME, Emojis em textos.
• Mecanismo de renderização com suporte para animações, anti-aliasing, opacidade, rolagem suave, sombras, transformação de imagem, etc.
• Suporta mouse, touchpad, teclado, teclado, botões externos, dispositivos de entrada do codificador.
• Suporte a vários monitores.

Vinculação e suporte de construção

• MicroPython Binding expõe API LVGL
• PikaScript Binding python no MCU é mais leve e fácil.
• Nenhum sistema de construção personalizado é usado. Você pode construir o LVGL enquanto constrói os outros arquivos do seu projeto.
• O suporte para Make e CMake está incluído imediatamente.
• Desenvolva no PC e use o mesmo código de UI em hardware incorporado.
• Converta o código C UI em arquivo HTML com nossa porta Emscripten.

Documentos, ferramentas e serviços

• Documentação detalhada com mais de 100 exemplos simples
• Serviços como design de interface de usuário, implementação e consultoria para tornar o desenvolvimento de UI mais simples e rápido.

❤️ Patrocinador

Se o LVGL economizou muito tempo e dinheiro ou você apenas se divertiu usando-o, considere Apoiar seu Desenvolvimento.

Como gastamos as doações?
Nosso objetivo é oferecer compensação financeira para as pessoas que mais fazem pela LVGL. Isso significa que não apenas os mantenedores, mas qualquer pessoa que implemente um ótimo recurso deverá receber um pagamento com o dinheiro acumulado. Usamos as doações para cobrir nossos custos operacionais, como servidores e serviços relacionados.

Como doar?
Usamos patrocinadores do GitHub, onde você pode facilmente enviar doações únicas ou recorrentes. Você também pode ver todas as nossas despesas de forma transparente.

Como ser pago pela sua contribuição?
Se alguém implementar ou corrigir um problema rotulado como Patrocinado, receberá um pagamento por esse trabalho. Estimamos o tempo necessário, a complexidade e a importância do problema e definimos um preço de acordo. Para começar, basta comentar sobre um problema patrocinado dizendo "Olá, gostaria de resolver isso. É assim que estou planejando consertar/implementar...". Um trabalho é considerado pronto quando é aprovado e mesclado por um mantenedor. Depois disso, você pode enviar e gastar em opencollective.com e receberá o pagamento em alguns dias.

Organizações que apoiam LVGL

Indivíduos apoiando LVGL

? Pacotes

LVGL está disponível como:

• Biblioteca Arduino
• Pacote PlatformIO
• Biblioteca Zéfiro
• Componente ESP-IDF(ESP32)
• Componente NXP MCUXpresso
• Biblioteca NuttX
• RT-Thread RTOS
• Pacote CMSIS
• Pacote RIOT OS

? Exemplos

Veja alguns exemplos de criação de widgets, utilização de layouts e aplicação de estilos. Você encontrará códigos C e MicroPython e links para experimentar ou editar os exemplos em um editor MicroPython online.

Para mais exemplos, verifique a pasta Exemplos.

Olá gravadora mundial

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 On-line

 # 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ão com evento de clique

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 On-line

 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 ()

Caixas de seleção com layout

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 On-line

 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 )

Estilizando um controle 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 On-line

 # 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 em inglês, hebraico (LTR-RTL misto) e chinês

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 On-line

 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 )

▶️ Comece

Esta lista irá guiá-lo para começar a usar o LVGL passo a passo.

Familiarize-se com LVGL

1. Confira as demonstrações online para ver o LVGL em ação (3 minutos).
2. Leia a página de introdução da documentação (5 minutos).
3. Familiarize-se com os conceitos básicos na página Visão geral rápida (15 minutos).

Comece a usar LVGL

4. Configure um Simulador (10 minutos).
5. Experimente alguns exemplos.
6. Porta LVGL para uma placa. Consulte o guia de portabilidade ou confira os projetos prontos para uso.

Torne-se um profissional

7. Leia a página Componentes Principais para entender melhor a biblioteca (2 a 3 horas)
8. Verifique a documentação dos Widgets para ver seus recursos e uso

Obtenha ajuda e ajude outras pessoas

9. Se você tiver dúvidas acesse o Fórum
10. Leia o guia de contribuição para ver como você pode ajudar a melhorar o LVGL (15 minutos)

? Serviços

A LVGL LLC foi criada para fornecer uma base sólida para a biblioteca LVGL e para oferecer diversos tipos de serviços para ajudá-lo no desenvolvimento de UI. Com mais de 15 anos de experiência na indústria de interface de usuário e gráficos, podemos ajudá-lo a levar sua UI para o próximo nível.

• Design gráfico Nossos designers gráficos internos são especialistas na criação de belos designs modernos que se adaptam ao seu produto e aos recursos do seu hardware.
• Implementação da UI Também podemos implementar sua UI com base no design que você ou nós criamos. Você pode ter certeza de que aproveitaremos ao máximo seu hardware e LVGL. Se um recurso ou widget estiver faltando no LVGL, não se preocupe, nós o implementaremos para você.
• Consultoria e Suporte Também podemos apoiá-lo com consultoria para evitar erros caros e demorados durante o desenvolvimento da UI.
• Certificação de placa Para empresas que oferecem placas de desenvolvimento ou kits prontos para produção, fazemos certificação de placa que mostra como a placa pode executar LVGL.

Confira nossas demonstrações como referência. Para mais informações consulte a página Serviços.

Entre em contato conosco e conte como podemos ajudar.

? Contribuindo

LVGL é um projeto aberto e contribuições são muito bem-vindas. Há muitas maneiras de contribuir, desde simplesmente falando sobre seu projeto, escrevendo exemplos, melhorando a documentação, corrigindo bugs ou até mesmo hospedando seu próprio projeto na organização LVGL.

Para obter uma descrição detalhada das oportunidades de contribuição, visite a seção Contribuições da documentação.

Mais de 300 pessoas já deixaram suas impressões digitais no LVGL. Seja um deles! Vejo você aqui! ?

... e muitos outros.