O TFT LCD 3.5" SPI Touch Screen com Slot SD é um componente eletrônico muito interessante para projetos com Arduino ou ESP 32 ou ESP 8266. O display possui uma alta qualidade de ímágem, com resolução de 480x320 pixels e a capacidade de reproduzir até 65 mil cores. Além disso, é uma tela touchscreen permitindo criar botões diretamente na tela.
O módulo utiliza um barramento SPI para comunicação, permitindo uma alta taxa de atualização das imágens. A tela possui slot para Cartão SD que permite que você armazene e acesse facilmente dados e imágens. Esse display funciona tanto no arduino Mega quanto nos ESP 8266 ou ESP 32, entretanto no arduino Mega a atualização das imágens torna-se muito lenta, alem disso o display funciona somente com 3,3 V portanto para utiliza-lo no arduino é necessário utilizar um conversor de nível lógico de 5V para 3,3 V. Para testar o display, primeiro devemos instalar a biblioteca TFT eSPI na IDE do arduino.
Primeiro vamos editar o arquivo User_Setup.h usando bloco de notas ou Notpad++.
Agora vamos editar os pinos que serão usados pelo ESP 8266 para conectar ao display.
// ###### EDIT THE PIN NUMBERS IN THE LINES FOLLOWING TO SUIT YOUR ESP8266 SETUP ######
// For NodeMCU - use pin numbers in the form PIN_Dx where Dx is the NodeMCU pin designation
#define TFT_MISO PIN_D6 // Automatically assigned with ESP8266 if not defined
#define TFT_MOSI PIN_D7 // Automatically assigned with ESP8266 if not defined
#define TFT_SCLK PIN_D5 // Automatically assigned with ESP8266 if not defined
#define TFT_CS PIN_D8 // Chip select control pin D8
#define TFT_DC PIN_D3 // Data Command control pin
//#define TFT_RST PIN_D4 // Reset pin (could connect to NodeMCU RST, see next line)
#define TFT_RST -1 // Set TFT_RST to -1 if the display RESET is connected to NodeMCU RST or 3.3V
Vmos salvar e fechar este arquivo. Agora vamos abrir o arquivo User_Setup_Select.h e descomentar apenas a linha correspondente ao nosso display.
#include <User_Setups/Setup20_ILI9488.h> // Setup file for ESP8266 and ILI9488 SPI bus TFT
Dentro da pasta examples voce vai encontrar varias pastas com arquivos para testar. Vamos abrir o pasta 480x320, nesta pasta vamos abrir o arquivo TFT_graficstest_one_lib usando a IDE do arduino. Vamos carregar este codigo no ESP 8266. Após carregar o codigo vamos conectar o ESP8266 ao display da seguinte forma.
Display ------ESP 8266
vcc-----------3.3V
gnd-----------gnd
CS -----------D8
RST----------3.3V ou D4
DC -----------D3
MOSI--------D7
SCK----------D5
LED----------3.3V
MISO--------D6
O pino RST pode ser conectado ao 3.3V ou ao D4, porem deve ser descomentada a linha correta.
Abaixo temos um código exeplo que pode ser testado no display.
#include <SPI.h>
#include <TFT_eSPI.h> // Biblioteca para o display
TFT_eSPI tft = TFT_eSPI(); // Invoca a biblioteca customizada
void setup(void) {
Serial.begin(9600); // Inicializa o monitor serial
tft.init();
tft.setRotation(1); // 1=posição horizontal do display, 2 vertical
// TELA DE APRESENTAÇÃO
tft.fillScreen(TFT_BLACK); // Preenche a tela inteira na cor preta
tft.fillRect(1, 1, 480, 100, TFT_WHITE); // cria um retangulo começando na coordenada x1, y1 até x480 com 100 linhas de pixels.
tft.setTextColor(TFT_BLUE); // Define a cor das letras do cabeçalho
tft.setTextSize(4); // Define o tamanho das letras
tft.setCursor(100, 10); // Define as coordenadas xy do display onde o texto começa
tft.print("Luz da Ciencia "); // Cabeçalho
tft.setCursor(100, 70);
tft.print("YouTube");
tft.setTextColor(TFT_GREEN);
tft.setTextSize(3);
tft.setCursor(100, 150);
tft.print("Inscreva-se no canal");
delay(5000);
tft.fillScreen(TFT_BLACK);
tft.fillRect(1, 1, 480, 100, TFT_WHITE);
tft.setTextColor(TFT_GREEN);
tft.setTextSize(4);
tft.setCursor(100, 10);
tft.print("Luz da Ciencia ");
tft.setTextColor(TFT_GREEN);
tft.setTextSize(3);
tft.setCursor(100, 150);
tft.print("Leia o tutorial em:");
tft.setCursor(10, 200);
tft.print("https://luzdacienciabrasil.blogspot.com");
delay(5000);
// Adicionando figuras ao final
displayShapes();
}
void loop() {
// Nenhuma ação no loop principal
}
void displayShapes() {
tft.fillScreen(TFT_BLACK);
// Exemplo de retângulo
for (int i = 0; i < 5; i++) {
tft.fillRect(60, 60 + (i * 30), 100, 20, TFT_RED);
delay(300);
}
// Exemplo de círculo
for (int radius = 10; radius < 60; radius += 10) {
tft.drawCircle(300, 100, radius, TFT_YELLOW);
delay(200);
}
// Exemplo de triângulo
for (int i = 0; i < 5; i++) {
tft.fillTriangle(100, 200, 140, 240, 60, 240, TFT_BLUE);
delay(500);
tft.fillTriangle(100, 200, 140, 240, 60, 240, TFT_BLACK);
}
// Exemplo de animação de círculos
for (int x = 0; x < tft.width(); x += 10) {
tft.fillCircle(x, tft.height() / 2, 5, TFT_GREEN);
delay(50);
}
// Exemplo de retângulos piscando
for (int i = 0; i < 5; i++) {
tft.fillRect(220, 150, 80, 50, TFT_CYAN);
delay(300);
tft.fillRect(220, 150, 80, 50, TFT_BLACK);
delay(300);
}
delay(2000);
}
Veja também o vídeo onde mostro o display em funcionamento. Neste momento não vamos testar o funcionamento da função toque na tela e nem da entrada de cartão de memória, porem poderemos abordar isso futuramente em outra publicação.
.webp)