Demo Display TFT ILI9341: Grafica e Palla Rimbalzante su Arduino

Introduzione

I display TFT a colori sono un modo fantastico per aggiungere un feedback visivo ricco ai tuoi progetti Arduino. In questo tutorial, piloteremo un TFT 240x320 basato su ILI9341 utilizzando le librerie Adafruit ILI9341 e Adafruit GFX. Imparerai come cablare il display, installare le librerie necessarie e scrivere codice che disegna elementi UI statici e anima una palla rimbalzante. Il tutto funziona direttamente nel tuo browser con il simulatore Velxio, senza bisogno di hardware!

Panoramica del Circuito

Iniziamo esaminando il circuito. Lo schema è semplice: un Arduino Uno comunica con il display ILI9341 tramite SPI (Serial Peripheral Interface).

Ecco l’elenco completo dei collegamenti:

• SCK (Serial Clock) e MOSI (Master Out Slave In) sono le linee dati SPI. Trasportano il clock e i dati dall’Arduino al display.
• CS (Chip Select) dice al display quando ascoltare i comandi SPI. Attivo basso.
• D/C (Data/Command) seleziona se la trasmissione SPI è un comando o dati pixel.
• RST (Reset) resetta il controller del display. Lo colleghiamo a un pin digitale per poter eseguire un reset hardware se necessario.
• LED controlla la retroilluminazione. Lo piloteremo a livello ALTO per accendere la retroilluminazione.

Non sono necessari componenti esterni: il display funziona a logica 5V (la maggior parte dei moduli ILI9341 tollera 5V) e i pin SPI sono collegati direttamente.

Panoramica del Codice

Ora immergiamoci nel codice. Utilizzeremo la libreria Adafruit ILI9341 insieme alla libreria Adafruit GFX per le primitive grafiche. Queste librerie devono essere installate tramite il Library Manager.

Apri il Library Manager (Strumenti > Gestione Librerie) e cerca “Adafruit ILI9341” e “Adafruit GFX Library”. Installa entrambe. La libreria SPI è inclusa automaticamente.

Ecco il codice 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);
}

Punti Chiave nel Codice

• Definizioni dei Pin: Definiamo TFT_CS, TFT_DC, TFT_RST e TFT_LED rispettivamente come pin 10, 9, 8 e 7. Questi corrispondono al nostro cablaggio.
• Inizializzazione della Libreria: Adafruit_ILI9341 tft(TFT_CS, TFT_DC, TFT_RST); crea l’oggetto display. La libreria gestisce internamente la comunicazione SPI.
• Controllo Retroilluminazione: In setup(), impostiamo il pin 7 a HIGH per accendere la retroilluminazione. Senza questo, lo schermo sarebbe scuro.
• UI Statico: drawStaticUI() riempie lo schermo con uno sfondo blu, stampa due righe di testo, disegna tre rettangoli colorati come palette e delinea un rettangolo per il campo di gioco.
• Ciclo di Animazione: In loop(), cancelliamo la palla disegnando un cerchio pieno nel colore di sfondo, aggiorniamo la sua posizione, controlliamo le collisioni con i bordi del campo di gioco e ridisegniamo la palla in arancione. Un delay(30) controlla il frame rate.
• Conversione Colore: tft.color565(r, g, b) converte valori RGB a 8 bit nel formato 16 bit 565 utilizzato dal display.

Concetti Chiave per Studenti

1. Comunicazione SPI: Il display utilizza SPI, un protocollo seriale sincrono. L’Arduino è il master, il display è lo slave. Solo tre fili (SCK, MOSI, CS) sono necessari per i dati; D/C e RST sono linee di controllo aggiuntive.
2. Primitive Grafiche: La libreria Adafruit GFX fornisce funzioni come fillScreen(), fillRect(), drawRect(), fillCircle(), setCursor(), print() e setTextSize(). Queste rendono facile disegnare forme e testo.
3. Doppio Buffer (Concetto): Cancelliamo la vecchia palla prima di disegnarne una nuova. Questo evita lo sbavamento. In progetti più avanzati, potresti usare un frame buffer.
4. Rilevamento Collisioni: La logica della palla rimbalzante controlla se il centro della palla è entro BALL_R pixel dal bordo. Se sì, la direzione viene invertita.
5. Profondità Colore: L’ILI9341 supporta 262K colori (18 bit), ma la libreria utilizza 16 bit (65K colori) per velocità. color565() impacchetta RGB in bit 5-6-5.

Errori Comuni e Suggerimenti per il Debug

• Retroilluminazione Spenta: Se lo schermo rimane scuro, assicurati che il pin 7 sia impostato a HIGH. Nel simulatore, controlla che il filo del pin LED sia collegato.
• Pin Sbagliati: Ricontrolla che CS, DC, RST, MOSI e SCK corrispondano al codice. Un singolo cablaggio errato può causare output distorto o nessun display.
• Libreria Non Installata: Il codice non compilerà senza le librerie Adafruit. Usa il Library Manager per installarle.
• Conflitti SPI: Se hai altri dispositivi SPI, assicurati che i loro pin CS non siano attivi contemporaneamente. Qui, solo il TFT utilizza SPI.
• Palla Scompare: Se la palla esce dal campo di gioco, controlla i limiti di collisione. La condizione usa FX + BALL_R + 1 per tenere conto del raggio della palla.

Estensioni Suggerite

Una volta che la demo di base funziona, prova questi miglioramenti:

• Aggiungi una seconda palla con velocità e colore diversi.
• Mostra dati del sensore (ad esempio, da un potenziometro) come grafico a barre o numero.
• Crea un gioco semplice come Pong o un timer di reazione.
• Usa input tattile se il tuo display ha un controller touch (ad esempio, XPT2046).
• Ottimizza le prestazioni usando startWrite() e endWrite() per raggruppare le transazioni SPI.

Provalo Tu Stesso!

Pronto a vederlo in azione? Apri l’esempio live in Velxio e premi il pulsante Run.

Puoi anche esplorare la barra degli strumenti della tela per zoomare, spostarti e ispezionare la simulazione.

Se vuoi costruirlo da zero, usa il selettore di componenti per aggiungere un Arduino Uno e un display ILI9341.

Clicca il link qui sotto per aprire l’esempio e iniziare a sperimentare:

Apri la Demo Display TFT ILI9341 su Velxio

Buon coding!