Demo de pantalla TFT ILI9341: Gráficos y pelota rebotante en Arduino

Introducción

Las pantallas TFT a color son una forma fantástica de añadir retroalimentación visual rica a tus proyectos con Arduino. En este tutorial, manejaremos un TFT basado en ILI9341 de 240x320 usando las librerías Adafruit ILI9341 y Adafruit GFX. Aprenderás a cablear la pantalla, instalar las librerías necesarias y escribir código que dibuje elementos de interfaz estáticos y anime una pelota rebotante. ¡Todo esto funciona directamente en tu navegador con el simulador Velxio, sin necesidad de hardware!

Recorrido del circuito

Empecemos examinando el circuito. El esquema es sencillo: un Arduino Uno se comunica con la pantalla ILI9341 a través de SPI (Interfaz Periférica Serie).

Aquí está la lista completa de conexiones:

• SCK (Reloj Serie) y MOSI (Salida Maestro Entrada Esclavo) son las líneas de datos SPI. Transportan el reloj y los datos desde el Arduino a la pantalla.
• CS (Selección de Chip) le indica a la pantalla cuándo debe escuchar los comandos SPI. Activo en bajo.
• D/C (Datos/Comando) selecciona si la transmisión SPI es un comando o datos de píxel.
• RST (Reinicio) reinicia el controlador de la pantalla. Lo conectamos a un pin digital para poder realizar un reinicio por hardware si es necesario.
• LED controla la retroiluminación. Lo pondremos en ALTO para encender la retroiluminación.

No se requieren componentes externos: la pantalla funciona con lógica de 5V (la mayoría de los módulos ILI9341 toleran 5V) y los pines SPI están conectados directamente.

Recorrido del código

Ahora profundicemos en el código. Usaremos la librería Adafruit ILI9341 junto con la librería Adafruit GFX para primitivas gráficas. Estas librerías deben instalarse a través del Gestor de Librerías.

Abre el Gestor de Librerías (Herramientas > Gestionar Librerías) y busca “Adafruit ILI9341” y “Adafruit GFX Library”. Instala ambas. La librería SPI se incluye automáticamente.

Aquí está el 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);
}

Puntos clave del código

• Definiciones de pines: Definimos TFT_CS, TFT_DC, TFT_RST y TFT_LED como los pines 10, 9, 8 y 7 respectivamente. Coinciden con nuestro cableado.
• Inicialización de la librería: Adafruit_ILI9341 tft(TFT_CS, TFT_DC, TFT_RST); crea el objeto de la pantalla. La librería maneja la comunicación SPI internamente.
• Control de la retroiluminación: En setup(), ponemos el pin 7 en ALTO para encender la retroiluminación. Sin esto, la pantalla estaría oscura.
• Interfaz estática: drawStaticUI() llena la pantalla con un fondo azul, imprime dos líneas de texto, dibuja tres rectángulos de colores como paleta y delinea un rectángulo para el campo de juego.
• Bucle de animación: En loop(), borramos la pelota dibujando un círculo relleno del color de fondo, actualizamos su posición, comprobamos colisiones con los bordes del campo de juego y redibujamos la pelota en naranja. Un delay(30) controla la velocidad de fotogramas.
• Conversión de color: tft.color565(r, g, b) convierte valores RGB de 8 bits al formato de 16 bits 565 usado por la pantalla.

Conceptos clave para estudiantes

1. Comunicación SPI: La pantalla usa SPI, un protocolo serie síncrono. El Arduino es el maestro, la pantalla es el esclavo. Solo se necesitan tres cables (SCK, MOSI, CS) para los datos; D/C y RST son líneas de control adicionales.
2. Primitivas gráficas: La librería Adafruit GFX proporciona funciones como fillScreen(), fillRect(), drawRect(), fillCircle(), setCursor(), print() y setTextSize(). Facilitan el dibujo de formas y texto.
3. Doble búfer (Concepto): Borramos la pelota vieja antes de dibujar la nueva. Esto evita manchas. En proyectos más avanzados, podrías usar un búfer de fotogramas.
4. Detección de colisiones: La lógica de la pelota rebotante comprueba si el centro de la pelota está a menos de BALL_R píxeles del borde. Si es así, se invierte la dirección.
5. Profundidad de color: El ILI9341 admite 262K colores (18 bits), pero la librería usa 16 bits (65K colores) por velocidad. color565() empaqueta RGB en bits 5-6-5.

Problemas comunes y consejos de depuración

• Retroiluminación apagada: Si la pantalla permanece oscura, asegúrate de que el pin 7 esté en ALTO. En el simulador, verifica que el cable del pin LED esté conectado.
• Pines incorrectos: Vuelve a verificar que CS, DC, RST, MOSI y SCK coincidan con el código. Un solo cable mal colocado puede causar una salida distorsionada o que no se muestre nada.
• Librería no instalada: El código no compilará sin las librerías Adafruit. Usa el Gestor de Librerías para instalarlas.
• Conflictos SPI: Si tienes otros dispositivos SPI, asegúrate de que sus pines CS no estén activos simultáneamente. Aquí, solo la pantalla TFT usa SPI.
• La pelota desaparece: Si la pelota sale del campo de juego, verifica los límites de colisión. La condición usa FX + BALL_R + 1 para tener en cuenta el radio de la pelota.

Extensiones sugeridas

Una vez que tengas la demo básica funcionando, prueba estas mejoras:

• Añade una segunda pelota con diferente velocidad y color.
• Muestra datos de sensores (por ejemplo, de un potenciómetro) como un gráfico de barras o un número.
• Crea un juego simple como Pong o un temporizador de reacción.
• Usa entrada táctil si tu pantalla tiene un controlador táctil (por ejemplo, XPT2046).
• Optimiza el rendimiento usando startWrite() y endWrite() para agrupar transacciones SPI.

¡Pruébalo tú mismo!

¿Listo para verlo en acción? Abre el ejemplo en vivo en Velxio y pulsa el botón Ejecutar.

También puedes explorar la barra de herramientas del lienzo para hacer zoom, desplazarte e inspeccionar la simulación.

Si quieres construir esto desde cero, usa el selector de componentes para añadir un Arduino Uno y una pantalla ILI9341.

Haz clic en el enlace de abajo para abrir el ejemplo y empezar a experimentar:

Abrir Demo de Pantalla TFT ILI9341 en Velxio

¡Feliz programación!