- ESP32 e display touch com LittlevGL
- LittlevGL e ESP32 - Portando para um projeto existente
No início de 2019 a Espressif anunciou o suporte oficial da biblioteca gráfica LittlevGL para o ESP32, que permite trabalhar com display touch.
Neste post vou compartilhar os primeiros passos de forma prática para começar a utilizar a biblioteca com um display touch. Todo os passos listados aqui está descrito de forma clara no repositório oficial da biblioteca com port do ESP32.
LittlevGL Possui elementos gráficos em forma de gadgets e objetos fáceis de usar, temas, efeitos visuais, simulador multiplataforma e outras features. Entre os gadgets para criar sua GUI personalizada estão: botões, gráficos, imagens, listas, barras deslizantes e muito mais. A biblioteca é open source e gratuita com licença MIT, que permite uso comercial.
O projeto é sólido e com uma documentação muito clara e bem descrita que pode ser encontrada aqui. O repositório oficial é este e os usuários também podem contar com um fórum.
Considerações Técnicas
Este post não cobre o processo de instalação do ESP-IDF, pois já há um artigo no embarcados a respeito. Para tornar o artigo mais acessível, não faremos o port do projeto para eclipse e afins, caso você opte pela utilização, o processo já foi descrito por mim em outro post aqui no embarcados.
A ferramenta utilizada para editar os códigos é o sublime text, sinta-se livre para utilizar qualquer outro editor ou até mesmo utilizar alguma IDE.
Hardware
O hardware que estou utilizando é o Esp32 devkit V1 e um display touch resistivo 240 x 320 px. O display possui o driver ILI9341 e o controlador Touch XPT2046.
O pinout do projeto ficou da seguinte forma:
ILI9341
| MOSI | CLK | CS | DC | RST | BCKL |
| 13 | 14 | 15 | 22 | 4 | 21 |
Tabela 1: Pinout do ESP32 aos pinos do ILI9341 no display.
No projeto original, o sinal DC é conectado ao pino 2, porém achei mais conveniente colocá-lo ao pino 22 pois mais a frente iremos utilizar o pino 2 para acender o led onboard do ESP.
Devido a esta mudança, mais a frente iremos alterar o pino DC no código.
XPT2046
| MOSI | MISO | CLK | CS | IRQ |
| 23 | 19 | 18 | 5 | 25 |
Tabela 2: Pinout do ESP32 aos pinos do XPT2046 no display.
Clonando o projeto para trabalhar com display touch e LittlevGL
Na data deste artigo o projeto é compatível com a versão 3.X e 4.X do IDF. Portanto você poderá usar o Make ou o CMake - é recomendável que seja utilizado a versão 4.x para utilizar o CMake. Os comandos de build utilizados neste artigo serão usando idf.py (que chama o CMake). Se você for utilizar Make, troque o “idf.py” por “make” nos comandos.
Quem utiliza Windows irá usar o “ESP-IDF Command Prompt” para executar os comandos. Ao abrir o executável, o caminho inicial já é da sua pasta IDF. Quem utiliza o Linux deverá utilizar o terminal e navegar até a pasta de projetos e se atentar as permissões do usuário que utiliza. Se necessário utilize o sudo para executar os comandos como root.
Vamos navegar até a pasta de projetos do IDF e começar clonando o repositório.
1 2 | $ cd projects $ git clone --recurse-submodules https://github.com/littlevgl/lv_port_esp32_ili9341.git |
Aguarde o download e após isto, execute os comandos abaixos.
1 2 | $ cd lv_port_esp32_ili9341 $ idf.py menuconfig |
Ao abrir o menuconfig, utilize as setas para nevegar até “Component config” e pressione enter. Conforme imagem abaixo.
Em “Component Config”, navegue até o “LittlevGL (LVGL)” e pressione enter.
Se houver algum display pré configurado, retire e coloque “none” para aparecer as opções de configuração, pois nós iremos configurar nosso display manualmente.
Utilize os parâmetros conforme imagem abaixo e logo em seguida entre em “Touchpanel Configuration”.
Utilize os parâmetros conforme imagem abaixo.
Obs: você pode mexer nos valores para calibrar o posicionamento e resolução do toque. Esta configuração foi a que melhor se adequou em meus testes.
Agora você já pode clicar em save e salvar todas as suas modificações. Após isto, clique em Exit para sair e confirme que deseja salvar se for perguntado.
Após configurar todos os parâmetros no menuconfig, abra o arquivo ili9341.h que se encontra em: ~\lv_port_esp32_ili9341\components\lvgl_ili9341
Nos defines faça a seguinte alteração do pino DC para o GPIO 22:
#define ILI9341_DC 22
Pronto! Agora é só executar o seguinte comando para build e flash:
1 | $ idf.py -p comX flash |
Troque o X pelo número da porta em que o dispositivo está conectado.
Se você estiver utilizando o IDF 3.X utilize o seguinte comando (neste caso a porta é configurada no próprio menuconfig): $ make flash
O primeiro processo de build do projeto demora alguns minutos. Aguarde.
Resultados no display touch
Esta são as imagens do nosso projeto funcionando! O Exemplo conta com teclado QWERTY, listas, gráfico e alterna automaticamente entre as abas.
Este post foi útil para você? tem sugestões?
Deixe um comentário. Seu feedback é muito importante para mim.
Saiba mais sobre display touch com LittlevGL
Espressif anuncia suporte para bibliotecas gráficas no ESP32
Olá Muriel.
Ótimo post.
Eu tenho uma dúvida em relação a ligação do display na ESP32.
Verifiquei que tanto o display quanto o toutch utilizam o SPI como meio de comunicação, e esse protocolo pode ser usando com mais de um device conetado ao mesmo barramento sendo apenas o pino CS de cada device com GPIO's respectivos no ESP32.
será que o codigo não poderia utilizar esse recurso, para ao invez de utilizar duas SPI, usar apenas uma e assim economizar GPIO's.
DEsde já agradeço pelo excelente post.
Olá Joselito,
Muito bem observado, você está correto!
Este código que rodamos no post é uma demo pronta e os devices usam 2 interfaces.
Mas sim, é facilmente adaptável para o uso do mesmo barramento.