Demonstração do Display TFT ILI9341: Gráficos e Bola Quicando no Arduino

Introdução

Displays TFT coloridos são uma maneira fantástica de adicionar feedback visual rico aos seus projetos com Arduino. Neste tutorial, vamos controlar um TFT ILI9341 de 240x320 usando as bibliotecas Adafruit ILI9341 e Adafruit GFX. Você aprenderá a conectar o display, instalar as bibliotecas necessárias e escrever código que desenha elementos de interface estáticos e anima uma bola quicando. Tudo isso roda diretamente no seu navegador com o simulador Velxio — sem necessidade de hardware!

Passo a Passo do Circuito

Vamos começar examinando o circuito. O esquema é simples: um Arduino Uno se comunica com o display ILI9341 via SPI (Interface Serial Periférica).

Aqui está a lista completa de conexões:

• SCK (Clock Serial) e MOSI (Mestre Saída, Escravo Entrada) são as linhas de dados SPI. Elas transportam clock e dados do Arduino para o display.
• CS (Seleção de Chip) informa ao display quando ouvir comandos SPI. Ativo em nível baixo.
• D/C (Dado/Comando) seleciona se a transmissão SPI é um comando ou dado de pixel.
• RST (Reset) reinicia o controlador do display. Conectamos a um pino digital para realizar um reset de hardware se necessário.
• LED controla a luz de fundo. Vamos colocá-lo em nível ALTO para ligar a luz de fundo.

Nenhum componente externo é necessário — o display opera com lógica de 5V (a maioria dos módulos ILI9341 é tolerante a 5V) e os pinos SPI são conectados diretamente.

Passo a Passo do Código

Agora vamos mergulhar no código. Usaremos a biblioteca Adafruit ILI9341 junto com a biblioteca Adafruit GFX para primitivas gráficas. Essas bibliotecas devem ser instaladas via Gerenciador de Bibliotecas.

Abra o Gerenciador de Bibliotecas (Ferramentas > Gerenciar Bibliotecas) e procure por “Adafruit ILI9341” e “Adafruit GFX Library”. Instale ambas. A biblioteca SPI é incluída automaticamente.

Aqui está o código completo:

// TFT ILI9341 Display Demo (240x320)
// Library: Adafruit ILI9341 + Adafruit GFX
// Connect: CS=10, DC/RS=9, RST=8, LED=7, MOSI=11(SPI), SCK=13(SPI)

#include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>
#include <SPI.h>

#define TFT_CS   10
#define TFT_DC    9
#define TFT_RST   8
#define TFT_LED   7

Adafruit_ILI9341 tft(TFT_CS, TFT_DC, TFT_RST);

// Background color: blue (visible on dark simulator canvas)
#define BG_COLOR 0x001F

// Ball state
int ballX = 120, ballY = 200;
int ballDX = 3, ballDY = 2;
const int BALL_R = 10;

// Play-field boundaries
const int FX = 5, FY = 110, FW = 230, FH = 200;

void drawStaticUI() {
  tft.fillScreen(BG_COLOR);

  // Title
  tft.setTextSize(3);
  tft.setTextColor(tft.color565(255, 220, 0));
  tft.setCursor(20, 10);
  tft.print("VELXIO TFT");

  // Subtitle
  tft.setTextSize(2);
  tft.setTextColor(tft.color565(180, 180, 255));
  tft.setCursor(30, 50);
  tft.print("ILI9341 Demo");

  // Color palette bars
  tft.fillRect(10, 82, 70, 18, tft.color565(220, 50, 50));
  tft.fillRect(85, 82, 70, 18, tft.color565(50, 200, 50));
  tft.fillRect(160, 82, 70, 18, tft.color565(50, 100, 240));

  // Play-field border
  tft.drawRect(FX, FY, FW, FH, tft.color565(80, 80, 130));
}

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

  tft.begin();
  drawStaticUI();
}

void loop() {
  // Erase old ball
  tft.fillCircle(ballX, ballY, BALL_R, BG_COLOR);

  // Update position
  ballX += ballDX;
  ballY += ballDY;

  // Bounce off field borders
  if (ballX < FX + BALL_R + 1 || ballX > FX + FW - BALL_R - 1) ballDX = -ballDX;
  if (ballY < FY + BALL_R + 1 || ballY > FY + FH - BALL_R - 1) ballDY = -ballDY;

  // Draw ball
  tft.fillCircle(ballX, ballY, BALL_R, tft.color565(255, 140, 0));

  delay(30);
}

Pontos-Chave no Código

• Definições de Pinos: Definimos TFT_CS, TFT_DC, TFT_RST e TFT_LED como pinos 10, 9, 8 e 7, respectivamente. Eles correspondem à nossa fiação.
• Inicialização da Biblioteca: Adafruit_ILI9341 tft(TFT_CS, TFT_DC, TFT_RST); cria o objeto do display. A biblioteca lida com a comunicação SPI internamente.
• Controle da Luz de Fundo: Em setup(), colocamos o pino 7 em ALTO para ligar a luz de fundo. Sem isso, a tela ficaria escura.
• Interface Estática: drawStaticUI() preenche a tela com um fundo azul, imprime duas linhas de texto, desenha três retângulos coloridos como uma paleta e delineia um retângulo para o campo de jogo.
• Loop de Animação: Em loop(), apagamos a bola desenhando um círculo preenchido na cor de fundo, atualizamos sua posição, verificamos colisões com as bordas do campo e redesenhamos a bola em laranja. Um delay(30) controla a taxa de quadros.
• Conversão de Cores: tft.color565(r, g, b) converte valores RGB de 8 bits para o formato 565 de 16 bits usado pelo display.

Conceitos-Chave para Estudantes

1. Comunicação SPI: O display usa SPI, um protocolo serial síncrono. O Arduino é o mestre, o display é o escravo. Apenas três fios (SCK, MOSI, CS) são necessários para dados; D/C e RST são linhas de controle adicionais.
2. Primitivas Gráficas: A biblioteca Adafruit GFX fornece funções como fillScreen(), fillRect(), drawRect(), fillCircle(), setCursor(), print() e setTextSize(). Elas facilitam o desenho de formas e texto.
3. Double Buffering (Conceito): Apagamos a bola antiga antes de desenhar a nova. Isso evita borrões. Em projetos mais avançados, você pode usar um buffer de quadro.
4. Detecção de Colisão: A lógica da bola quicando verifica se o centro da bola está a BALL_R pixels da borda. Se sim, a direção é invertida.
5. Profundidade de Cor: O ILI9341 suporta 262K cores (18 bits), mas a biblioteca usa 16 bits (65K cores) para velocidade. color565() empacota RGB em bits 5-6-5.

Armadilhas Comuns e Dicas de Depuração

• Luz de Fundo Desligada: Se a tela permanecer escura, certifique-se de que o pino 7 está em ALTO. No simulador, verifique se o fio do pino LED está conectado.
• Pinos Errados: Verifique novamente se CS, DC, RST, MOSI e SCK correspondem ao código. Um único fio errado pode causar saída distorcida ou nenhum display.
• Biblioteca Não Instalada: O código não compilará sem as bibliotecas Adafruit. Use o Gerenciador de Bibliotecas para instalá-las.
• Conflitos SPI: Se você tiver outros dispositivos SPI, certifique-se de que seus pinos CS não estejam ativos simultaneamente. Aqui, apenas o TFT usa SPI.
• Bola Desaparece: Se a bola sair do campo, verifique os limites de colisão. A condição usa FX + BALL_R + 1 para levar em conta o raio da bola.

Extensões Sugeridas

Depois de ter a demonstração básica funcionando, tente estas melhorias:

• Adicione uma segunda bola com velocidade e cor diferentes.
• Exiba dados de sensores (por exemplo, de um potenciômetro) como um gráfico de barras ou número.
• Crie um jogo simples como Pong ou um temporizador de reação.
• Use entrada por toque se seu display tiver um controlador de toque (por exemplo, XPT2046).
• Otimize o desempenho usando startWrite() e endWrite() para agrupar transações SPI.

Experimente Você Mesmo!

Pronto para ver em ação? Abra o exemplo ao vivo no Velxio e clique no botão Executar.

Você também pode explorar a barra de ferramentas da tela para ampliar, mover e inspecionar a simulação.

Se quiser construir isso do zero, use o seletor de componentes para adicionar um Arduino Uno e um display ILI9341.

Clique no link abaixo para abrir o exemplo e começar a experimentar:

Abrir Demonstração do Display TFT ILI9341 no Velxio

Boa programação!