Testando um Display TFT 3.5'' com ESP8266

 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.

Após instalar a bilblioteca, voce deve abrir a pasta de biblioteca do arduino e buscar pela pasta TFT eSPI. Esta pasta contem dois arquivos que devem ser editados. 

Primeiro vamos editar o arquivo User_Setup.h usando bloco de notas ou Notpad++.

Vamos procurar a linha correspondente ao Driver do nosso display, neste caso o driver é o ILI8488 que é chip controlador do display.

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.