TFT ILI9341 Display Demo: Grafik & Bouncing Ball auf Arduino

Einleitung

Farb-TFT-Displays sind eine fantastische Möglichkeit, Ihren Arduino-Projekten reichhaltige visuelle Rückmeldungen hinzuzufügen. In diesem Tutorial steuern wir ein 240x320 ILI9341-basiertes TFT mit den Bibliotheken Adafruit ILI9341 und Adafruit GFX. Sie lernen, wie Sie das Display verdrahten, die erforderlichen Bibliotheken installieren und Code schreiben, der statische UI-Elemente zeichnet und einen springenden Ball animiert. All dies läuft direkt in Ihrem Browser mit dem Velxio Simulator – keine Hardware erforderlich!

Schaltungsdurchlauf

Beginnen wir mit der Untersuchung der Schaltung. Der Schaltplan ist unkompliziert: Ein Arduino Uno kommuniziert mit dem ILI9341-Display über SPI (Serial Peripheral Interface).

Hier ist die vollständige Verdrahtungsliste:

• SCK (Serial Clock) und MOSI (Master Out Slave In) sind die SPI-Datenleitungen. Sie übertragen Takt und Daten vom Arduino zum Display.
• CS (Chip Select) teilt dem Display mit, wann es auf SPI-Befehle hören soll. Aktiv Low.
• D/C (Data/Command) wählt aus, ob die SPI-Übertragung ein Befehl oder Pixeldaten sind.
• RST (Reset) setzt den Display-Controller zurück. Wir verbinden es mit einem digitalen Pin, um bei Bedarf einen Hardware-Reset durchführen zu können.
• LED steuert die Hintergrundbeleuchtung. Wir setzen es auf HIGH, um die Hintergrundbeleuchtung einzuschalten.

Es sind keine externen Komponenten erforderlich – das Display arbeitet mit 5V-Logik (die meisten ILI9341-Module sind 5V-tolerant) und die SPI-Pins sind direkt verbunden.

Code-Durchlauf

Tauchen wir nun in den Code ein. Wir verwenden die Bibliothek Adafruit ILI9341 zusammen mit der Bibliothek Adafruit GFX für Grafikprimitive. Diese Bibliotheken müssen über den Bibliotheksverwalter installiert werden.

Öffnen Sie den Bibliotheksverwalter (Werkzeuge > Bibliotheken verwalten) und suchen Sie nach “Adafruit ILI9341” und “Adafruit GFX Library”. Installieren Sie beide. Die SPI-Bibliothek wird automatisch mitgeliefert.

Hier ist der vollständige Code:

// 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);
}

Wichtige Punkte im Code

• Pin-Definitionen: Wir definieren TFT_CS, TFT_DC, TFT_RST und TFT_LED als Pins 10, 9, 8 bzw. 7. Diese entsprechen unserer Verdrahtung.
• Bibliotheksinitialisierung: Adafruit_ILI9341 tft(TFT_CS, TFT_DC, TFT_RST); erstellt das Display-Objekt. Die Bibliothek übernimmt die SPI-Kommunikation intern.
• Hintergrundbeleuchtungssteuerung: In setup() setzen wir Pin 7 auf HIGH, um die Hintergrundbeleuchtung einzuschalten. Ohne dies wäre der Bildschirm dunkel.
• Statische UI: drawStaticUI() füllt den Bildschirm mit einem blauen Hintergrund, gibt zwei Textzeilen aus, zeichnet drei farbige Rechtecke als Palette und umrandet ein Spielfeld-Rechteck.
• Animationsschleife: In loop() löschen wir den Ball, indem wir einen gefüllten Kreis in der Hintergrundfarbe zeichnen, seine Position aktualisieren, auf Kollisionen mit den Spielfeldrändern prüfen und den Ball in Orange neu zeichnen. Ein delay(30) steuert die Bildrate.
• Farbkonvertierung: tft.color565(r, g, b) konvertiert 8-Bit-RGB-Werte in das 16-Bit-565-Format, das vom Display verwendet wird.

Wichtige Konzepte für Studierende

1. SPI-Kommunikation: Das Display verwendet SPI, ein synchrones serielles Protokoll. Der Arduino ist der Master, das Display der Slave. Für Daten werden nur drei Leitungen (SCK, MOSI, CS) benötigt; D/C und RST sind zusätzliche Steuerleitungen.
2. Grafikprimitive: Die Bibliothek Adafruit GFX bietet Funktionen wie fillScreen(), fillRect(), drawRect(), fillCircle(), setCursor(), print() und setTextSize(). Diese machen das Zeichnen von Formen und Text einfach.
3. Doppelpufferung (Konzept): Wir löschen den alten Ball, bevor wir den neuen zeichnen. Dies verhindert Verschmieren. In fortgeschritteneren Projekten könnten Sie einen Framebuffer verwenden.
4. Kollisionserkennung: Die Logik des springenden Balls prüft, ob sich der Mittelpunkt des Balls innerhalb von BALL_R Pixeln vom Rand befindet. Wenn ja, wird die Richtung umgekehrt.
5. Farbtiefe: Der ILI9341 unterstützt 262K Farben (18-Bit), aber die Bibliothek verwendet aus Geschwindigkeitsgründen 16-Bit (65K Farben). color565() packt RGB in 5-6-5 Bits.

Häufige Fallstricke & Debugging-Tipps

• Hintergrundbeleuchtung aus: Wenn der Bildschirm dunkel bleibt, stellen Sie sicher, dass Pin 7 auf HIGH gesetzt ist. Überprüfen Sie im Simulator, ob die LED-Pin-Leitung verbunden ist.
• Falsche Pins: Überprüfen Sie, ob CS, DC, RST, MOSI und SCK mit dem Code übereinstimmen. Ein einziger falscher Anschluss kann zu verstümmelter Ausgabe oder keinem Display führen.
• Bibliothek nicht installiert: Der Code lässt sich ohne die Adafruit-Bibliotheken nicht kompilieren. Verwenden Sie den Bibliotheksverwalter, um sie zu installieren.
• SPI-Konflikte: Wenn Sie andere SPI-Geräte haben, stellen Sie sicher, dass deren CS-Pins nicht gleichzeitig aktiv sind. Hier verwendet nur das TFT SPI.
• Ball verschwindet: Wenn der Ball das Spielfeld verlässt, überprüfen Sie die Kollisionsgrenzen. Die Bedingung verwendet FX + BALL_R + 1, um den Radius des Balls zu berücksichtigen.

Vorgeschlagene Erweiterungen

Sobald die grundlegende Demo läuft, versuchen Sie diese Verbesserungen:

• Fügen Sie einen zweiten Ball mit anderer Geschwindigkeit und Farbe hinzu.
• Zeigen Sie Sensordaten (z. B. von einem Potentiometer) als Balkendiagramm oder Zahl an.
• Erstellen Sie ein einfaches Spiel wie Pong oder einen Reaktionstimer.
• Verwenden Sie Touch-Eingabe, wenn Ihr Display einen Touch-Controller hat (z. B. XPT2046).
• Optimieren Sie die Leistung, indem Sie startWrite() und endWrite() verwenden, um SPI-Transaktionen zu bündeln.

Probieren Sie es selbst aus!

Bereit, es in Aktion zu sehen? Öffnen Sie das Live-Beispiel in Velxio und klicken Sie auf die Schaltfläche Ausführen.

Sie können auch die Leinwand-Symbolleiste erkunden, um zu zoomen, zu schwenken und die Simulation zu inspizieren.

Wenn Sie dies von Grund auf neu erstellen möchten, verwenden Sie die Komponentenauswahl, um einen Arduino Uno und ein ILI9341-Display hinzuzufügen.

Klicken Sie auf den untenstehenden Link, um das Beispiel zu öffnen und mit dem Experimentieren zu beginnen:

TFT ILI9341 Display Demo auf Velxio öffnen

Viel Spaß beim Programmieren!