Como configurar e exibir imagens e animações no ESP32-S3 Display 2,8″

Neste projeto, você vai aprender a configurar o ESP32-S3 Display 2,8″ para exibir imagens e animações utilizando a biblioteca Arduino_GFX.

Vamos começar pela configuração da placa na Arduino IDE, selecionar a porta correta e configurar os parâmetros de gravação. Depois, vamos instalar a biblioteca Arduino_GFX, configurar os pinos do display ILI9341 e fazer um primeiro teste com uma animação.

Por fim, você vai aprender como preparar imagens em RGB565, armazená-las na memória Flash do ESP32-S3 e exibi-las no display.

Selecionando a placa na Arduino IDE

Abra a Arduino IDE e selecione a placa correspondente ao ESP32-S3 utilizado no projeto.

Selecionando a porta

Conecte o ESP32-S3 ao computador utilizando um cabo USB e selecione a porta COM correspondente à placa.

Configurações de gravação

No menu Ferramentas, selecione as opções indicadas para este projeto.

Importante: selecione as configurações de acordo com a configuração utilizada neste projeto para garantir que o programa seja compilado e enviado corretamente.

Instalação da biblioteca Arduino_GFX

Na Arduino IDE, acesse:

Sketch → Incluir Biblioteca → Gerenciar Bibliotecas

Pesquise por Arduino_GFX e instale a biblioteca.

No código, utilizamos:

#include <Arduino_GFX_Library.h>

Neste projeto, utilizamos a Arduino_GFX porque podemos configurar o display diretamente no código, sem precisar modificar os arquivos internos da biblioteca.

Observação sobre TFT_eSPI

Caso seu projeto utilize a biblioteca TFT_eSPI.h, será necessário configurar os pinos e o driver nos arquivos de configuração da biblioteca, como o User_Setup.

Esse processo possui etapas adicionais. Neste projeto, utilizamos a Arduino_GFX para manter a configuração diretamente no código.

Configurando os pinos do display

O display ILI9341 utilizado nesta placa possui a seguinte configuração:

Função	GPIO
LCD CS	10
LCD DC	46
LCD SCK	12
LCD MOSI	11
LCD MISO	13
LCD RST	CHIP_PU / EN
Backlight	45

No código:

#define TFT_CS    10
#define TFT_DC    46
#define TFT_SCK   12
#define TFT_MOSI  11
#define TFT_MISO  13
#define TFT_RST   -1
#define TFT_BL    45

Atenção: o DC utiliza o GPIO 46 e o Backlight utiliza o GPIO 45. São funções diferentes e não devem ser confundidas.

Inicializando o display

A comunicação SPI e o controlador ILI9341 são configurados através da biblioteca Arduino_GFX.

Utilizamos:

Arduino_DataBus *bus = new Arduino_ESP32SPI(
  TFT_DC,
  TFT_CS,
  TFT_SCK,
  TFT_MOSI,
  TFT_MISO
);

Arduino_GFX *gfx = new Arduino_ILI9341(
  bus,
  TFT_RST,
  0,
  true
);

Essa configuração permite que o ESP32-S3 envie os dados gráficos para o display.

Primeiro teste: uma animação simples

Antes de trabalhar com imagens, vamos verificar se o display funciona corretamente.

Neste primeiro teste, o ESP32-S3 desenha um círculo e atualiza sua posição continuamente. Assim, conseguimos verificar a inicialização do display e a comunicação gráfica.

Código da animação

Você pode acessar o código completo da animação no Google Drive:

Acessar código da animação

Se a animação aparecer corretamente, o ESP32-S3 conseguiu inicializar o ILI9341 e enviar os dados gráficos para o display.

Exibindo imagens no ESP32-S3 Display

Depois de confirmar que o display funciona, podemos trabalhar com imagens mais complexas.

Uma imagem de 240×320 pixels pode ser armazenada diretamente na memória Flash do ESP32-S3, sem a necessidade de utilizar um cartão SD.

Para isso, precisamos converter a imagem para o formato RGB565.

O que é RGB565?

O RGB565 é um formato de cor de 16 bits.

Ele utiliza:

• 5 bits para vermelho;
• 6 bits para verde;
• 5 bits para azul.

Cada pixel ocupa 2 bytes.

Para uma imagem com resolução de 240×320 pixels:

240 × 320 × 2 = 153.600 bytes

Isso corresponde a aproximadamente 150 KB.

Depois da conversão, a imagem se transforma em uma sequência de valores como:

0x0042, 0x0042, 0x0042,
0x0062, 0x0062, 0x0062,
0x0082, 0x0883, 0x0882,
...

Cada valor representa a cor de um pixel da imagem.

Criando o arquivo .h

Depois de converter a imagem para RGB565, criamos um arquivo .h para armazenar os dados.

Neste exemplo, utilizamos o nome:

SmartKits_Descontos_240x320.h

O arquivo terá uma estrutura semelhante a esta:

#pragma once
#include <Arduino.h>

#define SMART_KITS_IMG_W 240
#define SMART_KITS_IMG_H 320

const uint16_t smart_kits_descontos[240 * 320] PROGMEM = {
  0x0042, 0x0042, 0x0042,
  0x0062, 0x0062, 0x0062,
  0x0082, 0x0883, 0x0882,
  // ...
};

O conteúdo da matriz representa os pixels da imagem que o ESP32-S3 vai enviar para o display.

Exibindo a imagem

No arquivo .ino, inclua a biblioteca Arduino_GFX e o arquivo .h que contém a imagem:

#include <Arduino_GFX_Library.h>
#include "SmartKits_Descontos_240x320.h"

Depois, utilize:

gfx->draw16bitRGBBitmap(
  0, 0,
  smart_kits_descontos,
  240, 320
);

Os dois primeiros parâmetros indicam a posição X e Y onde a imagem será desenhada.

Os dois últimos indicam a largura e a altura da imagem.

Neste caso:

• X = 0
• Y = 0
• Largura = 240 pixels
• Altura = 320 pixels

Assim, a imagem ocupa todo o display.

Imagem estática 1

Para testar uma primeira imagem estática, utilize o código disponibilizado no Google Drive.

Código da imagem estática 1

O código utiliza a mesma configuração do display e carrega os dados da imagem em formato RGB565.

Imagem estática 2

Você também pode utilizar uma segunda imagem estática no projeto.

Código da imagem estática 2

Dessa forma, você pode testar diferentes imagens e utilizar a mesma estrutura para criar outras telas para o seu projeto.

Organização dos arquivos

Coloque o arquivo .h na mesma pasta do arquivo .ino:

SmartKits_Descontos_ESP32S3/
├── SmartKits_Descontos_ESP32S3.ino
└── SmartKits_Descontos_240x320.h

No código:

#include "SmartKits_Descontos_240x320.h"

Os arquivos não precisam ter o mesmo nome.

O nome informado no #include precisa ser exatamente igual ao nome do arquivo .h.

Várias imagens no ESP32-S3

É possível criar vários arquivos .h para armazenar diferentes imagens.

Por exemplo:

SmartKits_Descontos.h
SmartKits_Arduino.h
SmartKits_ESP32.h
SmartKits_Promocao.h

Depois, você pode alternar entre as imagens para criar uma sequência de telas.

Essa estrutura permite criar apresentações, telas informativas, animações e interfaces gráficas sem utilizar um cartão SD.

Problemas comuns

Backlight não acende

Confira se o Backlight está configurado no GPIO 45:

#define TFT_BL 45

Também verifique se o código ativa o pino:

pinMode(TFT_BL, OUTPUT);
digitalWrite(TFT_BL, HIGH);

Backlight acende, mas não há imagem

Confira os pinos utilizados pelo display:

#define TFT_CS    10
#define TFT_DC    46
#define TFT_SCK   12
#define TFT_MOSI  11
#define TFT_MISO  13

Principalmente, verifique se você não confundiu DC, GPIO 46, com Backlight, GPIO 45.

O código não compila

Confira:

• Se a biblioteca Arduino_GFX está instalada.
• Se a placa correta está selecionada.
• Se a porta COM está correta.
• Se o arquivo .h está na pasta do projeto.
• Se o nome utilizado no #include corresponde exatamente ao nome do arquivo.

A imagem não aparece

Primeiro, teste a animação.

Se a animação funcionar, a comunicação com o display está funcionando. Nesse caso, verifique:

• O arquivo .h.
• A conversão para RGB565.
• As dimensões da imagem.
• O nome utilizado no #include.
• O nome da matriz utilizada no draw16bitRGBBitmap().

Código completo: animação

O código abaixo inicializa o display e cria uma animação simples com um círculo:

#include <Arduino_GFX_Library.h>

#define TFT_CS 10
#define TFT_DC 46
#define TFT_SCK 12
#define TFT_MOSI 11
#define TFT_MISO 13
#define TFT_RST -1
#define TFT_BL 45

#define PRETO 0x0000
#define VERMELHO 0xF800

Arduino_DataBus *bus = new Arduino_ESP32SPI(
  TFT_DC,
  TFT_CS,
  TFT_SCK,
  TFT_MOSI,
  TFT_MISO
);

Arduino_GFX *gfx = new Arduino_ILI9341(
  bus,
  TFT_RST,
  0,
  true
);

int x = 120;
int y = 50;
int velocidadeX = 3;
int velocidadeY = 0;

const int raio = 15;
const int gravidade = 1;

void setup() {
  Serial.begin(115200);

  pinMode(TFT_BL, OUTPUT);
  digitalWrite(TFT_BL, HIGH);

  if (!gfx->begin()) {
    while (1) {
      delay(1000);
    }
  }

  gfx->setRotation(0);
  gfx->fillScreen(PRETO);
}

void loop() {
  gfx->fillCircle(x, y, raio + 2, PRETO);

  velocidadeY += gravidade;

  x += velocidadeX;
  y += velocidadeY;

  if (x + raio >= 240) {
    x = 240 - raio;
    velocidadeX = -velocidadeX;
  }

  if (x - raio <= 0) {
    x = raio;
    velocidadeX = -velocidadeX;
  }

  if (y + raio >= 320) {
    y = 320 - raio;
    velocidadeY = -18;
  }

  gfx->fillCircle(x, y, raio, VERMELHO);

  delay(20);
}

Código disponível para download: Google Drive – Animação

Código completo: imagem

Para exibir uma imagem em RGB565, utilize a estrutura abaixo:

#include <Arduino_GFX_Library.h>
#include "SmartKits_Descontos_240x320.h"

#define TFT_CS 10
#define TFT_DC 46
#define TFT_SCK 12
#define TFT_MOSI 11
#define TFT_MISO 13
#define TFT_RST -1
#define TFT_BL 45

Arduino_DataBus *bus = new Arduino_ESP32SPI(
  TFT_DC,
  TFT_CS,
  TFT_SCK,
  TFT_MOSI,
  TFT_MISO
);

Arduino_GFX *gfx = new Arduino_ILI9341(
  bus,
  TFT_RST,
  0,
  true
);

void setup() {
  pinMode(TFT_BL, OUTPUT);
  digitalWrite(TFT_BL, HIGH);

  if (!gfx->begin()) {
    while (1) {
      delay(1000);
    }
  }

  gfx->setRotation(0);

  gfx->draw16bitRGBBitmap(
    0,
    0,
    smart_kits_descontos,
    240,
    320
  );
}

void loop() {}

Os códigos completos das duas imagens estáticas estão disponíveis nos links abaixo:

Imagem estática 1: Acessar código no Google Drive

Imagem estática 2: Acessar código no Google Drive

Conclusão

Com essa configuração, você pode utilizar o ESP32-S3 Display 2,8″ 240×320 para desenhar formas, exibir textos, criar animações e armazenar imagens na memória Flash sem utilizar um cartão SD.

A ideia é começar pelo básico: primeiro faça o display funcionar, depois teste uma animação e, por fim, avance para as imagens em RGB565.

A partir dessa estrutura, você pode criar diferentes telas, animações e interfaces gráficas para seus projetos com ESP32-S3.

Projeto realizado por Emanuel Sousa – Graduando em Engenharia Mecatrônica