Neste Webinar, será apresentado uma visão geral de LVGL (Light and Versatile Graphics Library), uma biblioteca recheada de componentes para montar telas em displays TFT e OLED de maneira profissional em projetos de Sistemas Embarcados. Durante a apresentação abordaremos a parte teórica com o objetivo de conhecer os recursos (Widgets), as limitações e sua API de referência como também a parte prática com importação da mesma para um projeto utilizando o ESP 32 DevKit no framework da Espressif, o IDF.

3. Agenda
● Introdução
● Contribuição
● Requisitos Mínimos
● Interface do Display
● Elementos e Componentes
● Simulador
● SquareLines
● Referências

4. Introdução
● Light and Versatile Graphics Library (LVGL)
● Código aberto e Gratuito (MIT License)
● Documentação disponivel na internet (https://docs.lvgl.io/8.0/ )
● Exemplos de aplicação (botões, objetos e outros)
● Escrita em linguagem C
● Blog e Novidades mensais (https://blog.lvgl.io/)
Figura 1 : Exemplo de aplicação final
Fonte : Site oficial da LVGL

5. Contribuição
Caso deseje contribuir para o projeto, a comunidade oferece diversos canais de comunicação para
divulgar os projetos ou versões atualizadas. Segue abaixo algumas sugestões:
● My Project : site com um compilado de projetos utilizando a LVGL
● GitHub : repositórios da biblioteca para correção de bug ou documentação do projeto
Importante
O guia para realizar um Pull Request (PR) está disponível na documentação, é
importante seguir as etapas para receber a devida validação. Para mais informações acesse :
https://docs.lvgl.io/master/CONTRIBUTING.html.

6. Integração
Aplicação :
Criação proposta para rodar no embarcado
LVGL :
Própria biblioteca gráfica, por meio da HAL(Hardware
Abstraction Layer) para registro do display e do dispositivo de entrada
dentro do embarcado
Drives:
Além de seus drivers específicos (ili9341), ele contém funções
para direcionar seu monitor, opcionalmente para uma GPU e para ler
o touchpad ou botões.
Figura 2 : Camadas de abstração entre biblioteca, drive e
aplicação.
Fonte : Documentação oficial da LVGL

7. Requisitos Mínimos
Quais as configurações mínimas de hardware?
● Microcontroladores de 16, 32 ou 64 bits
● Osciladores (interno ou externo ) acima de 16MHz
● Flash/ ROM com tamanho recomendado de 180 kB
● RAM
○ Static RAM acima de 2 kB
○ Stack acima de 8 kB
Quais displays são suportáveis pela a LVGL?
● TFT 16 ou 24 bit de cores
● Monocromáticos (OLED, SSD1306)
● Matriz de LED
● Monitor com saída HDMI
Figura 3 : Placas Suportáveis
Fonte : Site oficial da LVGL

8. Interface do Display
Ao instalar as diretórios referente aos drivers do display há duas variáveis que necessitam ser
inicializadas:
● lv_disp_draw_buf_t : contém buffer interno do motor gráfico
● lv_disp_drv_t : aponta para as funções de callback que irão interagir com o display e manipular o
comportamento dos elementos
De maneira geral o buffer é simplesmente um array que vai carregar a tela sempre que for chamada.
Outro ponto a destacar é a possibilidade de utilizar até dois buffer, desta forma otimizando a chamada de
telas.

9. Elementos e Componentes
● Objeto (Objects):
Define-se como a parte elementar para implementar as propriedades básicas dos Widgets que são:
○ Posição (lv_obj_set_pos)
○ Tamanho (lv_obj_set_size)
○ Herança (lv_create_obj)
○ Atributos
○ Flags Especificas
○ Estilos
Widgets:
Keyboard, Slider, Lista, Gráfico (Chart)
Figura 4 : Widgets
Fonte : Site oficial da LVGL

10. Elementos e Componentes
● Camadas (Layers):
O conceito de camadas pode ser associado como um livro, onde cada página possui um contexto
específico. Por padrão, o objeto mais antigo move-se para para trás e o mais novo move para frente.
○ lv_obj_move_background
○ lv_obj_move_foreground
Figura 5 : Representação de camadas
Fonte : Site oficial da LVGL

11. Elementos e Componentes
● Event (Evento):
Os eventos são fundamentais para identificar quais elementos foram acionados e comunicar o seu
estado atual. Há diversos eventos que podem ser tratados dado o elemento na aplicação, são:
○ LV_EVENT_CLICKED
○ LV_EVENT_PRESSING
Outro possibilidade é enviar eventos manualmente para a tela deseja e também pegar o tipo de
evento realizado naquela tela
● lv_event_send()
● lv_event_get_data()

12. Simulador
O ambiente de simulação possibilita acessar toda a API para desenvolver telas robustas,
economizando o tempo desenvolvimento e entrando maior grau de liberdade dentro da equipe sem a
necessidade de desenvolver com um hardware. O simulador pode ser utilizado:
● Code Block
● Visual Studio (Ferramentas de Debug)
● Eclipse
● Visual Code (Ferramentas de Debug)
● PlatformIO

13. SquareLines
SquareLine Studio é um editor visual para criar interfaces gráficas apenas arrastando e soltando
seus componentes de maneira rápida e fácil para telas em dispositivos embarcados. Não há restrição
de uso, podendo destinar-se a makers, programadores e designers.
Figura 6 : Tela inicial do SquareLines
Fonte : Autor

14. Referências
Canais no Youtube
● LVGL (Clique Aqui)
● JonathanGonzaga (Clique Aqui)
● Do Bit Ao Byte (Clique aqui)
Artigos e Blogs
● Blog Oficial LVGL
● Documentação Oficial LVGL
● Embarcados
○ LVGL no ESP32 com o RTOS Apache NuttX
○ Espressif anuncia suporte para bibliotecas gráficas no ESP32

15. www.embarcados.com.br
linkedin.com/embarcados
@portalembarcados
youtube/Embarcados TV
OBRIGADO!