T-Display S3 com TFT_eSPI

A partir desse artigo, teremos uma série de exemplos para manipulação do T-Display S3 com TFT_eSPI. Mas antes, permita-me apresentar essa fantástica placa da LilyGo, que você encontra na CurtoCircuito, um dos parceiros especialistas em ESP32.

T-Display S3

A LilyGo e TTGO tem placas chamadas "T-Display" com ESP32 e com RP2040. Todas, usando o display ST7789, que é RGB565. Agora a novidade é a T-Display S3, uma fantástica placa com ESP32 S3 e display paralelo de 8bits, o que torna o acesso ao display extremamente mais rápido do que o SPI! Mas não é só isso; sua tela de 320 por 170 pixels em um formato onde o circuito é completamente coberto pelo display, dá ideias como um gadget para fazer monitoramento de um computador pessoal, acoplando-o ao gabinete. Mas antes de viajarmos pelos projetos, vamos dominar esse dispositivo primeiro, controlando o T-Display S3 com TFT_e_SPI, que é uma das melhores bibliotecas gráficas existentes para display.

T-Display S3 Pinout

O pinout dessa placa pode ser visto na imagem a seguir:

Usar imagem no T-Display

É um desperdício usar outra coisa que não seja imagem para elaborar uma boa interface, concorda? Mas talvez isso lhe traga preocupação em relação a desempenho e utilização de recursos. Bem, não se preocupe, porque vamos inclusive fazer animação nesse display. De uma maneira grotesca, executei duas sequências separadas de composição de camadas e ainda assim atingi 15 FPS. Nada mal, mas será melhor assim que implementarmos todos os recursos. Os vídeos relacionados estarão sempre em nosso canal DobitaobyteBrasil no Youtube, portanto, não deixe de se inscrever para ver a implementação gradativa. Hora de por a mão na massa.

Preparando a IDE do Arduino

Primeiro, precisamos adicionar uma nova URL para atualizar o repositório de ESP32, que contém o ESP32 S3.

Adicionar ESP32 à IDE do Arduino

Abra a IDE do Arduino, vá no menu Arquivos > Preferências. Adicione a URL a seguir:

https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

Clique em "Ok", então após a auto-atualização dos repositórios, reinicie a IDE do Arduino.

Ao reiniciar a IDE do Arduino, vá ao menu Ferramentas > Gerenciador de placas e procure por ESP32. Instale-o. Outra vez no menu Ferramentas, vá em Placas > ESP32 Arduino. Selecione ESP32S3 Dev Module.

Configurar T-Display S3 na IDE do Arduino

Novamente no menu Ferramentas, finalize a configuração igualando os parâmetros dos demais itens relacionados para que fiquem como o exemplo da própria LilyGo:

Instalar a biblioteca TFT_eSPI

Invés de instalar pela IDE do Arduino, sugiro pegar do repositório da LilyGo. Essa sugestão é porque a biblioteca TFT_eSPI tem um arquivo de configuração chamado User_Setup.h, que precisa ser configurado conforme a placa que for utilizar. Como essa placa usa canais de dados mais rápidos, a configuração pode ser uma "novidade" para muitos. Usando a biblioteca do repositório da LilyGo, a placa deverá estar apta para trabalhar imediatamente. Fiz um fork do repositório, que foi o utilizado no momento desse artigo. Baixe esse arquivo zip para dentro do diretório Arduino . No Windows, esse diretório (por padrão) estará dentro do diretório Documentos. Descomprima-o.

Dentro do diretório criado na descompressão do arquivo, você encontrará outro diretório, chamado lib. Copie todo o conteúdo do diretório T-Display-S3/lib/* para dentro do diretório Arduino/libraries/.

Concluímos a configuração, agora é só diversão!

Criar imagem para display com EasyMaker

Mais uma vez, entra em ação o EasyMaker Image Suite. Com esse programa, podemos criar arrays de imagens para displays monocromáticos, tons de cinza e RGB565. Baixe o programa e siga o tutorial desse vídeo para gerar sua imagem. Mas se tiver preguiça de ver o vídeo, basicamente, abra uma imagem qualquer, faça o redimensionamento e vá para a aba RGB565. Depois, clique na aba Código e copie o array da imagem para um arquivo ".h" ou inclua-o no início do seu sketch.

No vídeo desse artigo mostrarei como fazê-lo.

Sketch para exibir imagem no display

Além da imagem, temos também um sketch para teste na aba Código. Porém o sketch foi feito como base de teste, usando a T-Display menor, não esqueça de mudar as dimensões. Agora vamos começar uma série de artigos mostrando diversos usos da biblioteca TFT_eSPI, começando pelo básico:

#include "Arduino.h"
/* Please use the TFT library provided in the library. */
#include "TFT_eSPI.h" 
#include "Wire.h"
#include "pin_config.h"
//crie o arquivo .h com o nome desejado, mas inclua-o
#include "img2dsp.h" 

//initial background
TFT_eSPI tft = TFT_eSPI();

void setup(){
  tft.init(); //inicializa a instância
  tft.setSwapBytes(true); //RGB para BGR
  tft.setRotation(0); //Com EasyMaker, 0 é como 3

  //repare: x,y é invertido com EasyMaker
  tft.pushImage(0,0,170,320,img2display); 
}

void loop(){
  delay(1);
}

O arquivo criado para comportar o array da imagem foi nomeado aqui como img2dsp.h, mas pode ser qualquer nome, desde que referenciado corretamente.

Use o EasyMaker para criar a imagem, poupando tempo e facilitando a implementação.

No próximo artigo veremos a implementação de uma animação básica, depois melhoraremos gradativamente as implementações.

A imagem de destaque foi produzida com o EasyMaker Image Suite, que é gratuito.

Vídeo do T-Display S3 com TFT_eSPI

O vídeo estará no canal tão logo seja editado. Inscreva-se no canal e ative o sininho para receber notificações!

Inscreva-se no nosso canal Manual do Maker no YouTube.

Também estamos no Instagram.