21. Estación de pantalla TFT con menú navegable

🎯 Qué vas a aprender

A dibujar gráficos a color (texto, rectángulos, resaltado) en una TFT SPI y a construir un menú navegable: el patrón de cualquier interfaz embebida.

📚 Teoría: TFT SPI y dobles búferes mentales

Una TFT es una pantalla de píxeles a color. Se controla por SPI con varios pines (CS, DC, RST además de SCK/MOSI). Las librerías Adafruit_GFX + el driver concreto (ST7789/ILI9341 según el panel) ofrecen funciones como fillRect, setCursor, print.

🔌 Conexiones

💻 Código completo

// Menú navegable en TFT con joystick (driver ST7789, ajustar si procede)
#include 
#include 
#include 

#define TFT_CS 10
#define TFT_DC  9
#define TFT_RST 8
Adafruit_ST7789 tft = Adafruit_ST7789(TFT_CS, TFT_DC, TFT_RST);

const int VRY = A1, SW = 2;
const char* opciones[] = {"Sensores", "Actuadores", "Ajustes", "Acerca de"};
const int N = 4;
int sel = 0;

void dibujarMenu() {
  tft.fillScreen(ST77XX_BLACK);
  tft.setTextSize(2);
  for (int i = 0; i < N; i++) {
    int y = 20 + i * 35;
    if (i == sel) {
      tft.fillRect(5, y - 5, 220, 30, ST77XX_BLUE);  // resaltado
      tft.setTextColor(ST77XX_WHITE);
    } else {
      tft.setTextColor(ST77XX_WHITE);
    }
    tft.setCursor(15, y);
    tft.print(opciones[i]);
  }
}

void setup() {
  pinMode(SW, INPUT_PULLUP);
  tft.init(240, 320);
  tft.setRotation(1);
  dibujarMenu();
}

void loop() {
  int y = analogRead(VRY);
  if (y < 300) { sel = (sel - 1 + N) % N; dibujarMenu(); delay(250); }
  if (y > 700) { sel = (sel + 1) % N;     dibujarMenu(); delay(250); }
  if (digitalRead(SW) == LOW) {
    tft.fillScreen(ST77XX_BLACK);
    tft.setCursor(10, 100);
    tft.setTextColor(ST77XX_GREEN);
    tft.print("> ");
    tft.print(opciones[sel]);
    delay(1200);
    dibujarMenu();
  }
}

🛠️ Montaje paso a paso

1. Cablea la TFT por SPI (CS, DC, RST, MOSI, SCK) y alimentación.
2. Conecta el joystick (VRy→A1, SW→D2).
3. Instala Adafruit_GFX y el driver (ST7789/ILI9341).
4. Sube el sketch; mueve el joystick arriba/abajo y pulsa para elegir.

🧩 Resolución de problemas

🚀 Para ir más lejos

• Conecta cada opción del menú a una pantalla de datos real (sensores).
• Añade iconos con bitmaps a color.