lvgl/docs/README_pt_BR.md

NOTA IMPORTANTE A próxima versão principal (v9.0.0) está sendo desenvolvida na branch master. A última versão estável está disponível na branch release/v8.3.

---

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

 

 

LVGL - Biblioteca gráfica leve e versátil

 

   

  Site |   Documentação |   Fórum |   Serviços |   Demonstrações |   Editor SquareLine Studio

🧐 Visão Geral

Maduro e popular

LVGL é a biblioteca gráfica incorporada gratuita e de código aberto mais popular para criar belas interfaces de usuário para qualquer display do tipo MCU, MPU. Ela é suportada por fornecedores e projetos líderes do setor, como ARM, STM32, NXP, Espressif, Nuvoton, Arduino, RT-Thread, Zephyr, NuttX, Adafruit e muitos outros.

Rico em recursos

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

Editor UI profissional

SquareLine Studio é um editor de interface do usuário de (arrasta e solta) profissional para LVGL. Ele roda em Windows, Linux e MacOS também e você pode experimentá-lo sem se registrar no site.

Serviços

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

🚀 Recursos

Gratuito e portátil

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

Widgets, designs, layouts e muito mais

• Mais de 30 widgets integrados: botão, etiqueta (label), controle deslizante (slider), gráfico (chart), teclado, medidor (meter), tabelas e muito mais.
• Sistema de design flexível com pelo menos 100 propriedades de estilo para personalizar qualquer parte dos widgets.
• Mecanismos de layouts Flexbox e Grid 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 (chinês, japonês e coreano), tailandês, hindi, árabe e persa.
• Quebra de palavras (word wrapping), espaçamento entre letras (kerning), rolagem de texto (scrolling), renderização subpixel, entrada em chinês Pinyin-IME e emojis.
• Mecanismo de renderização que suporta animações, anti-aliasing, opacidade, rolagem suave (smooth scroll), sombras, transformação de imagens, etc.
• Suporta mouse, touchpad, teclado, botões externos, dispositivos de entrada codificadores (encoders).
• Suporta vários monitores.

Suporte de vinculação e compilação de arquivos

• Expondo a API do LVGL com o Micropython
• Nenhum sistema de compilação personalizado é usado. Você pode construir o LVGL enquanto constrói os outros arquivos do seu projeto.
• O suporte para Make e CMake já vem incluído.
• Desenvolva no PC e use o mesmo código de interface do usuário em hardwares incorporados (embedded hardware).
• Converta o código C para um arquivo HTML com o Emscripten port.

Documentação, ferramentas e serviços

• Documentação detalhada com +100 exemplos simples
• SquareLine Studio - Um software editor UI profissional e fácil de usar, para acelerar e simplificar o desenvolvimento da interface do usuário.
• Serviços como design de UI, implementação e consultoria para tornar o desenvolvimento de UI mais simples e rápido.

📦 Pacotes

LVGL está disponível para:

• Arduino library
• PlatformIO package
• Zephyr library
• ESP32 component
• NXP MCUXpresso component
• NuttX library
• RT-Thread RTOS
• NXP MCUXpresso library
• CMSIS-Pack

👨‍💻 Exemplos

Veja como criar um botão com um evento de clique em C e MicroPython. Para mais exemplos, veja a pasta examples.

Botão com evento de clique

Código C

lv_obj_t * btn = lv_btn_create(lv_scr_act());                   /* Adiciona o botão a tela atual */
lv_obj_center(btn);                                             /* Define a posição do botão */
lv_obj_set_size(btn, 100, 50);                                  /* Define o tamanho do botão */
lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_CLICKED, NULL); /* Atribui um retorno de chamada (callback) ao botão */

lv_obj_t * label = lv_label_create(btn);                        /* Adiciona um rótulo (label) */
lv_label_set_text(label, "Botão");                              /* Define um texto para o rótulo (label) */
lv_obj_center(label);                                           /* Alinha o texto no centro do botão */
...

void btn_event_cb(lv_event_t * e)
{
  printf("Clicado\n");
}

Código MicroPython | Simulador online

def btn_event_cb(e):
  print("Clicado")

# Cria um botão e um rótulo (label)
btn = lv.btn(lv.scr_act())
btn.center()
btn.set_size(100, 50)
btn.add_event_cb(btn_event_cb, lv.EVENT.CLICKED, None)

label = lv.label(btn)
label.set_text("Botão")
label.center()

Caixas de seleção (chackboxes) com layout

Código em C

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

lv_obj_t * cb;
cb = lv_checkbox_create(lv_scr_act());
lv_checkbox_set_text(cb, "Maça");
lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

cb = lv_checkbox_create(lv_scr_act());
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_scr_act());
lv_checkbox_set_text(cb, "Limão");
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_scr_act());
lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED);
lv_checkbox_set_text(cb, "Melão\ne uma nova linha");
lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

Código MicroPython | Online Simulator

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


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

cb = lv.checkbox(lv.scr_act())
cb.set_text("Maça")
cb.add_event_cb(event_handler, lv.EVENT.ALL, None)

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

cb = lv.checkbox(lv.scr_act())
cb.set_text("Limão")
cb.add_state(lv.STATE.DISABLED)
cb.add_event_cb(event_handler, lv.EVENT.ALL, None)

cb = lv.checkbox(lv.scr_act())
cb.add_state(lv.STATE.CHECKED | lv.STATE.DISABLED)
cb.set_text("Melão")
cb.add_event_cb(event_handler, lv.EVENT.ALL, None)

Estilizando um controle deslizante (slider)

Código C

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

/* Adiciona estilos locais à parte MAIN (retângulo de fundo) */
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);

/* Crie uma folha de estilo reutilizável para a parte do (INDICADOR) */
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);

/* Adicione a folha de estilo à parte do INDICATOR do controle deslizante (slider) */
lv_obj_add_style(slider, &style_indicator, LV_PART_INDICATOR);

/* Adicione o mesmo estilo à parte do KNOB e sobrescreva localmente algumas propriedades */
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 online

# Crie um controle deslizante (slider) e adicione o estilo
slider = lv.slider(lv.scr_act())
slider.set_value(70, lv.ANIM.OFF)
slider.set_size(300, 20)
slider.center()

# Adicione estilos locais à parte MAIN (retângulo de fundo)
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)

# Crie uma folha de estilo reutilizável para a parte do INDICATOR
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)

# Adicione a folha de estilo à parte do INDICATOR do controle deslizante (slider)
slider.add_style(style_indicator, lv.PART.INDICATOR)
slider.add_style(style_indicator, lv.PART.KNOB)

# Adicione o mesmo estilo à parte do KNOB e sobrescreva localmente algumas propriedades
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 (LRT-RTL misto) e chinês

Código C

lv_obj_t * ltr_label = lv_label_create(lv_scr_act());
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_scr_act());
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_scr_act());
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 online

ltr_label = lv.label(lv.scr_act())
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.scr_act())
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.scr_act())
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)

▶️ Começando

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

Familiarize-se com o LVGL

1. Confira as demos on-line 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 o básico na página de visão geral rápida (~15 minutos)

Começando a usar o LVGL

4. Configure um simulador (~10 minutos)
5. Experimente alguns exemplos
6. Porte o LVGL para uma placa. Veja o guia portando o LVGL ou veja um projeto pronto para usar em projetos

Torne-se um profissional

7. Leia a página visão geral para entender melhor a biblioteca (~2-3 horas)
8. Verifique a documentação dos widgets para ver seus recursos e usabilidade

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)

E mais

11. Baixe e experimente o editor SquareLine Studio.
12. Entre em contato conosco para serviços e consultoria.

🤝 Serviços

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

• Design gráfico: Nossos designers gráficos internos são especialistas em criar belos designs modernos que se adaptam ao seu produto e aos recursos do seu hardware.
• Implementação da interface do usuário: Também podemos implementar sua interface do usuário com base no design que você ou nós criamos. Você pode ter certeza de que tiraremos o máximo proveito de seu hardware e do 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 que podem te custar caros durante o desenvolvimento da sua interface do usuário.
• Certificação: Para empresas que oferecem placas para desenvolvimento ou kits prontos para produção, fazemos certificação que mostram como uma placa pode executar o LVGL.

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

Fale conosco e conte como podemos ajudar.

🌟 Contribuindo

O LVGL é um projeto aberto e sua contribuição é muito bem-vinda. Há muitas maneiras de contribuir, desde simplesmente falando sobre seu projeto, escrevendo exemplos, melhorando a documentação, corrigindo bugs até hospedar seu próprio projeto sob a organização LVGL.

Para obter uma descrição detalhada das oportunidades de contribuição, visite a página de contribuição da documentação.

Mais de 300 pessoas já deixaram sua impressão digital no LVGL. Seja um deles! Veja o seu aqui! 🙂

... e muitos outros.