Arduino UNO Q - TFT LCD Touch-Display SPI
Möchten Sie Ihrem Arduino-UNO-Q-Projekt mit nur wenigen Drähten einen farbigen Bildschirm hinzufügen? Diese einsteigerfreundliche Anleitung zeigt Ihnen Schritt für Schritt, wie Sie ein SPI-TFT-LCD-Display mit dem Arduino UNO Q verwenden — mit oder ohne Touch.
In diesem Tutorial lernen Sie:
- Was ein SPI-TFT-LCD-Display ist und wie es funktioniert
- Wie Sie ein SPI-TFT-Display mit dem Arduino UNO Q verdrahten
- Wie Sie die MCU (C/C++ Arduino-Code) auf dem Arduino UNO Q programmieren, um Formen zu zeichnen und Flächen mit Farbe zu füllen
- Wie Sie Text und Zahlen auf dem TFT-Bildschirm anzeigen
- Wie Sie Bitmap-Bilder zeichnen, die im Programmspeicher (PROGMEM) abgelegt sind
- Wie Sie Bitmap-Bilder zeichnen, die von einer SD-Karte geladen werden
- Wie Sie Text mit einer benutzerdefinierten externen Schriftart darstellen
- Wie Sie rohe Touch-Koordinaten von einem XPT2046-Touch-Controller auslesen
- Wie Sie auf dem Bildschirm zeichnen, indem Sie einen Finger über das Display ziehen
- Wie Sie interaktive Touch-Schaltflächen erstellen und den Touchscreen kalibrieren
- Wie Sie einen sekundären oder benutzerdefinierten SPI-Bus für das Display verwenden
- Wie Sie sowohl die Linux-Seite (Python) als auch die MCU-Seite (C/C++) programmieren, damit die Linux-Seite das TFT-Display über Bridge steuert
- Wie Sie per Telegram dem Arduino UNO Q Nachrichten senden, um auf das Display zu schreiben und Touch-Punkte abzufragen
- Wie Sie OpenClaw auf dem Arduino UNO Q verwenden, um das SPI-TFT-Display zu steuern
Diese Anleitung behandelt SPI-TFT-LCD-Displays mit und ohne Touch. Sie funktioniert mit 1,3-, 1,54-, 2,2-, 2,4-, 2,8-, 3,2- und 3,5-Zoll-Panels, die von den Controller-Chips ILI9341, ILI9488 oder ST7789 angesteuert werden.

Tipp — einfachere und schnellere Alternative: Wenn Sie einen Bildschirm möchten, der überhaupt keine Verdrahtung benötigt, ziehen Sie stattdessen das TFT Touch Shield in Betracht. Es wird direkt auf die Stiftleisten des Arduino UNO Q gesteckt — keine Jumperkabel nötig. Es verwendet eine 8-Bit-Parallelschnittstelle, die Pixeldaten deutlich schneller überträgt als SPI.
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Hinweis: Im Gegensatz zu einem 5V-Arduino-Board arbeitet die MCU des Arduino UNO Q bereits mit 3,3V-Logik, daher ist für diese Verdrahtung kein 5V-auf-3,3V-Pegelwandler erforderlich.
Über das SPI-TFT-LCD-Display
Ein SPI-TFT-Display ist ein Farb-LCD-Panel, das von einem Controller-Chip über den SPI-Bus angesteuert wird.
Wichtige Spezifikationen und Funktionen:
- Schnittstelle: SPI (4-Draht) — nur eine Handvoll Signalleitungen nötig
- Farbe: Volle RGB-Farbe, 16-Bit oder 18-Bit je nach Treiberchip
- Unterstützte Größen: 1,3-, 1,54-, 2,2-, 2,4-, 2,8-, 3,2- und 3,5-Zoll-Panels
- Touch (optional): Resistiver Touch-Controller XPT2046 / HR2046 / ADS7843 am selben SPI-Bus
- MicroSD-Steckplatz: Auf den meisten Modulen vorhanden, ebenfalls am gemeinsamen SPI-Bus
- Bibliothek: DIYables_TFT_SPI — eine Bibliothek für das Display und den Touch-Controller
- Logikpegel: 3,3V — perfekt passend zu den MCU-Pins des Arduino UNO Q
Die Bibliothek DIYables_TFT_SPI unterstützt drei gängige Treiberchips:
- ILI9341 — 16-Bit-RGB565-Farbe, bis zu 40 MHz SPI
- ILI9488 — 18-Bit-RGB666-Farbe, bis zu 24 MHz SPI
- ST7789 — 16-Bit-RGB565-Farbe, bis zu 40 MHz SPI
Empfehlung: Wenn Sie noch kein Display gekauft haben, empfehlen wir den Treiber ST7789. Er ist weit verbreitet, läuft mit voller SPI-Geschwindigkeit von 40 MHz und ist die unkomplizierteste Wahl für neue Projekte.
Die Bibliothek erweitert Adafruit GFX, sodass alle Standardfunktionen zum Zeichnen und für Text verfügbar sind.
Pinbelegung
Die meisten SPI-TFT-LCD-Displays haben die folgenden Pins:
Display-Pins:
| Pin | Funktion |
|---|---|
| VCC | Stromversorgung |
| GND | Masse |
| CS | Chip Select — wird auf LOW gezogen, um das Display am SPI-Bus auszuwählen |
| DC / RS | Daten-/Befehlsauswahl — HIGH für Pixeldaten, LOW für Befehle |
| RST | Hardware-Reset — optional; bei Nichtverwendung mit 3,3V verbinden |
| MOSI / SDI / SDA | SPI-Dateneingang (MCU zum Display) |
| SCK / CLK | SPI-Takt |
| MISO / SDO | SPI-Datenausgang (Display zur MCU) — optional bei reiner Anzeigenutzung |
| LED / BL / BLK | Stromversorgung der Hintergrundbeleuchtung — mit 3,3V oder einem PWM-Pin zum Dimmen verbinden |
SD-Karten-Pins (falls Ihre Anwendung auf die SD-Karte zugreifen muss):
| Pin | Funktion |
|---|---|
| SD_CS / TF_CS | Chip Select der SD-Karte |
| MOSI / SDI | MOSI — Daten von der MCU zur SD-Karte |
| SCK / CLK | SCK — SPI-Takt |
| MISO / SDO | MISO — Daten von der SD-Karte zur MCU |
Bei TFT-Displays mit Touch-Unterstützung gibt es zusätzliche Touch-Pins (falls Ihre Anwendung die Touch-Funktion nutzt und das Display sie unterstützt):
| Pin | Funktion |
|---|---|
| T_CS | Chip Select des Touch-Controllers |
| T_CLK | SCK — SPI-Takt |
| T_DIN | MOSI — Daten von der MCU zum Touch-Controller |
| T_DO | MISO — Daten vom Touch-Controller zur MCU |
| T_IRQ | Touch-Interrupt — optional; signalisiert, wenn der Bildschirm berührt wird |
Hinweis: Einige Displaymodule ohne Touch führen ebenfalls die Pins T_CS, T_CLK, T_DIN, T_DO und T_IRQ heraus. Diese sind auf diesen Platinen ohne Funktion — der Touch-Controller-IC ist nicht bestückt. Sie sind vorhanden, weil die Leiterplatte dasselbe Layout wie die Touch-Version verwendet, um die Anzahl der Fertigungsvarianten zu reduzieren.

Schaltplan
Hinweis — SDO (MISO) ist optional: Die SDO-(MISO-)Leitung überträgt nur Daten vom Display zurück zur Platine. Keiner der Beispielcodes in diesem Tutorial liest vom Display, daher kann dieser Pin unverbunden bleiben. Bei Modulen, bei denen sich der Touch-Controller denselben SPI-Bus teilt, kann eine angeschlossene SDO-Leitung die Kommunikation stören, weshalb empfohlen wird, sie unverbunden zu lassen.
Das Display wird an die Hardware-SPI-Pins der MCU-Stiftleisten des Arduino UNO Q angeschlossen.
- Hinweis: Die MCU-Pins des Arduino UNO Q geben 3,3V-Logik aus, was zum SPI-TFT-Display passt — verbinden Sie die Signalleitungen direkt, kein Pegelwandler nötig.
- Hinweis: Verbinden Sie den VCC-Pin des TFT mit dem 3,3V-Pin des Arduino UNO Q, nicht mit 5V.
- Hinweis: Das Display, die SD-Karte und der Touch-Controller teilen sich MOSI (D11), SCK (D13) und MISO (D12). Jedes Gerät hat seinen eigenen CS-Pin, sodass immer nur eines aktiv ist.
Ohne Touch
Verbinden Sie MOSI mit D11, SCK mit D13 und MISO mit D12 am Arduino UNO Q. CS, DC und RST können beliebige freie GPIOs sein — in den Beispielen werden D10, D8 und D9 verwendet.
Display:
| TFT-Pin | Arduino UNO Q MCU-Pin | Beschreibung |
|---|---|---|
| VCC | 3.3V | Stromversorgung |
| GND | GND | Masse |
| CS | D10 | Chip Select |
| DC / RS | D8 | Daten-/Befehlsauswahl |
| RST | D9 | Reset (optional) |
| MOSI / SDI | D11 | Hardware-SPI MOSI |
| SCK | D13 | Hardware-SPI-Takt |
| MISO / SDO | D12 | Hardware-SPI MISO (optional) |
| LED / BL | 3.3V | Stromversorgung der Hintergrundbeleuchtung |
SD-Karte (falls Ihre Anwendung auf die SD-Karte zugreifen muss):
| SD-Pin | Arduino UNO Q MCU-Pin | Beschreibung |
|---|---|---|
| SD_CS / TF_CS | D4 | Chip Select der SD-Karte |
| MOSI / SDI | D11 | Gemeinsam mit Display-MOSI (D11) |
| SCK / CLK | D13 | Gemeinsam mit Display-SCK (D13) |
| MISO / SDO | D12 | Gemeinsam mit Display-MISO (D12) |

Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Mit Touch
Verbinden Sie den XPT2046-Touch-Controller mit dem SPI-Bus des Arduino UNO Q und teilen Sie D11, D13 und D12 mit dem Display.
Display:
| TFT-Pin | Arduino UNO Q MCU-Pin | Beschreibung |
|---|---|---|
| VCC | 3.3V | Stromversorgung |
| GND | GND | Masse |
| CS | D10 | Chip Select |
| DC / RS | D8 | Daten-/Befehlsauswahl |
| RST | D9 | Reset (optional) |
| MOSI / SDI | D11 | Hardware-SPI MOSI |
| SCK | D13 | Hardware-SPI-Takt |
| MISO / SDO | D12 | Hardware-SPI MISO (optional) |
| LED / BL | 3.3V | Stromversorgung der Hintergrundbeleuchtung |
Touch-Controller (falls Ihre Anwendung die Touch-Funktion nutzt und das Display sie unterstützt):
| Touch-Pin | Arduino UNO Q MCU-Pin | Beschreibung |
|---|---|---|
| T_CS | D2 | Touch Chip Select |
| T_IRQ | D2 | Touch-Interrupt (optional) |
| T_DIN | D11 | Gemeinsam mit Display-MOSI (D11) |
| T_CLK | D13 | Gemeinsam mit Display-SCK (D13) |
| T_DO | D12 | Gemeinsam mit Display-MISO (D12) |

Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Die MCU des Arduino UNO Q stellt an den Uno-Stiftleisten eine Hardware-SPI-Schnittstelle bereit, daher teilen sich alle drei Peripheriegeräte — Display, SD-Karte und Touch-Controller — dieselben drei Datenleitungen. Die Bibliothek DIYables_TFT_SPI verwaltet sowohl das Display als auch den XPT2046-Touch-Controller über eine einzige API, sodass für die Touch-Seite keine separate SPI-Bibliothek benötigt wird.
Arduino UNO Q Code — Minimale Sketch-Struktur
Der Arduino UNO Q hat zwei Prozessoren, die zusammenarbeiten:
- Die STM32-MCU steuert das SPI-TFT-Display an und liest den Touch-Controller aus — sie rendert sämtlichen Text und alle Grafiken in Echtzeit
- Die Qualcomm-MPU führt Debian Linux aus und kümmert sich um WLAN, Python und die Cloud-Anbindung
- In diesem Abschnitt wird nur die MCU programmiert — die Linux-Seite bleibt untätig. Ein späterer Abschnitt zeigt, wie beide Prozessoren über Bridge zusammenarbeiten.
Alle Sketches, die die Bibliothek DIYables_TFT_SPI verwenden, teilen dieses Grundgerüst:
Übergeben Sie dem Konstruktor die physischen Pixelabmessungen Ihres Panels. Module mit demselben Treiberchip gibt es in verschiedenen Größen.
Arduino UNO Q Code — Formen zeichnen
Der folgende Sketch demonstriert die Zeichenprimitive von Adafruit GFX auf Ihrem SPI-TFT-Display: Kreise, Dreiecke, Rechtecke, abgerundete Rechtecke und Linien.
Was der Code macht:
- Erstellt das Display-Objekt für Ihren Treiberchip
- Initialisiert das Panel und stellt die Querformat-Drehung ein
- Skaliert jede Formposition auf die tatsächliche Bildschirmgröße
- Zeichnet das gesamte Raster farbiger Formen alle 10 Sekunden neu
Schnellanleitung
Zum ersten Mal mit dem Arduino UNO Q? Folgen Sie dem Tutorial Erste Schritte mit dem Arduino UNO Q, um Ihre Entwicklungsumgebung vorzubereiten, bevor Sie fortfahren.
- Verbinden: Verdrahten Sie das SPI-TFT-Display wie im Schaltplan gezeigt mit dem Arduino UNO Q und schließen Sie dann das USB-C-Kabel an.
- Arduino App Lab öffnen: Starten Sie Arduino App Lab und warten Sie, bis Ihr Arduino UNO Q erkannt wird — beim ersten Start kann dies einige Minuten dauern.
- Eine neue App erstellen: Klicken Sie auf die Schaltfläche Create New App.

- Geben Sie der App einen Namen, zum Beispiel: DIYables_TftSpi
- Klicken Sie zur Bestätigung auf Create.
- Sie sehen eine Reihe von Ordnern und Dateien, die in Ihrer neuen App erzeugt wurden.

- Suchen Sie die Datei sketch/sketch.ino — hier fügen Sie den MCU-Sketch ein.
- Install the library: Click the Add sketch library button (the open book icon with a + sign) in the left sidebar.

- Search for Arduino_RouterBridge created by Arduino and click the Install button.
- Search for DIYables TFT SPI created by DIYables.io and click the Install button.
- Hochladen: Klicken Sie in Arduino App Lab auf die Run-Schaltfläche, um den Code zu kompilieren und auf den STM32 hochzuladen.

Das Display zeigt ein Raster farbiger Formen, das sich alle paar Sekunden aktualisiert!
- Profi-Tipp: Stellen Sie Breite und Höhe im Konstruktor auf die tatsächliche Pixelgröße Ihres Panels ein. Eine Abweichung hier ist die häufigste Ursache für ein verschobenes oder abgeschnittenes Bild.
Methoden-Kurzreferenz
| Methode | Was sie macht | Verwendung |
|---|---|---|
| begin() | Initialisiert den Display-Controller. Einmal in setup() aufrufen. | TFT_display.begin(); |
| setRotation(r) | Dreht das Koordinatensystem. 0=Hochformat, 1=Querformat. | TFT_display.setRotation(1); |
| fillScreen(color) | Löscht den Bildschirm mit einer Vollfarbe. | TFT_display.fillScreen(WHITE); |
| colorRGB(r,g,b) | Erzeugt eine 16-Bit-RGB565-Farbe aus 8-Bit-Komponenten. | colorRGB(0, 128, 255) |
| fillCircle(x,y,r,color) | Zeichnet einen gefüllten Kreis. | TFT_display.fillCircle(80, 80, 40, RED); |
| fillRect(x,y,w,h,color) | Zeichnet ein gefülltes Rechteck. | TFT_display.fillRect(10, 10, 60, 40, BLUE); |
| drawRoundRect(x,y,w,h,r,color) | Zeichnet den Umriss eines abgerundeten Rechtecks. | TFT_display.drawRoundRect(5,5,100,50,10,GREEN); |
Arduino UNO Q Code — Text und Zahlen anzeigen
Dieser Sketch zeigt, wie Sie Zeichenketten und Zahlen in verschiedenen Größen, Farben und Positionen auf dem SPI-TFT-Display ausgeben.
Was der Code macht:
- Füllt den Bildschirm weiß
- Stellt eine Magenta-Textfarbe und eine große Textgröße ein
- Gibt einen Temperaturwert mit einer Nachkommastelle und einem Gradzeichen aus
- Gibt in der nächsten Zeile einen Luftfeuchtigkeitswert aus
Schnellanleitung
- Kopieren Sie den obigen Code und fügen Sie ihn in sketch/sketch.ino ein.
- Klicken Sie in Arduino App Lab auf die Run-Schaltfläche.

Das Display zeigt die Temperatur- und Luftfeuchtigkeitswerte in großer Magenta-Schrift an.
Methoden-Kurzreferenz
| Methode | Was sie macht | Verwendung |
|---|---|---|
| setTextColor(color) | Legt die Vordergrundfarbe des Textes fest. | TFT_display.setTextColor(BLACK); |
| setTextSize(size) | Skaliert den Text. Größe 1 entspricht 6x8 Pixeln. | TFT_display.setTextSize(2); |
| setCursor(x, y) | Positioniert den Textcursor. | TFT_display.setCursor(10, 30); |
| print(value) | Gibt eine Zeichenkette oder Zahl an der Cursorposition aus. | TFT_display.print("Temp: "); |
| println(value) | Gibt aus und springt in die nächste Zeile. | TFT_display.println(25.4); |
Arduino UNO Q Code — Bild zeichnen
Dieser Sketch zeigt ein vollfarbiges RGB565-Bitmap-Bild an, das im Programmspeicher abgelegt ist. Die Bilddaten sind in bitmap.h als const uint16_t-Array mit PROGMEM-Kennzeichnung deklariert. Dadurch bleiben die Pixeldaten im Flash statt im SRAM, sodass das Display auch bei knappem RAM korrekt funktioniert. Kopieren Sie bitmap.h vor dem Kompilieren in den Sketch-Ordner.
Was der Code macht:
- Bindet das Bitmap-Array aus bitmap.h ein
- Liest die tatsächliche Bildschirmgröße aus, um das Bild zu zentrieren
- Zeichnet das RGB565-Bitmap an der zentrierten Position
- Invertiert die Displayfarben alle 2 Sekunden als einfachen Effekt
Schnellanleitung
- Kopieren Sie den obigen Code und fügen Sie ihn in sketch/sketch.ino ein.
- Erstellen Sie eine neue Datei namens bitmap.h im selben Ordner wie der Sketch:
- Klicken Sie in Arduino App Lab mit der rechten Maustaste auf den Ordner sketch/ und wählen Sie New File.
- Nennen Sie sie bitmap.h.
- Kopieren Sie das folgende Bitmap-Array und fügen Sie es in bitmap.h ein. Dieses Array enthält das DIYables-Logo.
- Passen Sie img_width und img_height im Sketch an die Abmessungen Ihres Bildes an.
- Klicken Sie in Arduino App Lab auf die Run-Schaltfläche.
- Bereiten Sie Ihr Bild vor (JPEG- oder PNG-Format).
- Wandeln Sie es mit dem Tool Image to Bitmap Converter in ein Bitmap-Array um.
- Laden Sie Ihr Bild hoch und stellen Sie die Größe passend zu Ihrem Panel ein.
- Wählen Sie bei transparenten PNGs eine Hintergrundfarbe.
- Klicken Sie auf Convert und kopieren Sie dann das erzeugte Array in bitmap.h.
- Passen Sie img_width und img_height an und klicken Sie dann erneut auf Run.

Das Display zeigt das aus dem Programmspeicher geladene Bitmap-Bild an.
Um Ihr eigenes Bild zu verwenden, gehen Sie wie folgt vor:

Hinweis: Wenn Sie bitmap.h ändern und der Sketch nicht neu kompiliert wird, fügen Sie irgendwo in der Sketch-Datei ein Leerzeichen ein, um einen Neuaufbau zu erzwingen.
Methoden-Kurzreferenz
| Methode | Was sie macht | Verwendung |
|---|---|---|
| drawRGBBitmap(x,y,bitmap,w,h) | Zeichnet ein RGB565-PROGMEM-Bitmap ab Pixel (x, y). | TFT_display.drawRGBBitmap(0, 0, myImage, 240, 320); |
| fillScreen(color) | Löscht den Bildschirm vor dem Zeichnen des Bildes. | TFT_display.fillScreen(BLACK); |
| invertDisplay(flag) | Schaltet die Farbinvertierung des Panels ein oder aus. | TFT_display.invertDisplay(true); |
Arduino UNO Q Code — Bild von SD-Karte zeichnen
Dieser Sketch liest eine 24-Bit-BMP-Bilddatei von einer Micro-SD-Karte und überträgt die Pixeldaten in kleinen Blöcken an das Display. Bei diesem Ansatz wird das Bild gestreamt, ohne jemals das gesamte Bild im RAM zu halten, was ihn für große Panels praktikabel macht.
Schließen Sie die SD-Karte an denselben SPI-Bus wie das Display an. Teilen Sie MOSI (D11), SCK (D13) und MISO (D12). Weisen Sie dem SD-Modul einen separaten CS-Pin zu — er ist im Sketch als SD_CS (D4) definiert.
Was der Code macht:
- Initialisiert die SD-Karte an ihrem eigenen CS-Pin
- Liest den BMP-Header, um Breite und Höhe des Bildes zu ermitteln
- Zentriert das Bild auf dem Bildschirm
- Streamt die Pixel zeilenweise und zeichnet sie auf dem TFT-Display
- Gibt Fortschritts- und Fehlermeldungen in der App-Lab-Konsole aus
Schnellanleitung
- Laden Sie diyables.bmp herunter und kopieren Sie die Datei in das Stammverzeichnis Ihrer Micro-SD-Karte.
- Stecken Sie die Micro-SD-Karte in den Kartensteckplatz des Displaymoduls.
- Kopieren Sie den obigen Code und fügen Sie ihn in sketch/sketch.ino ein.
- Klicken Sie in Arduino App Lab auf die Run-Schaltfläche.

- Öffnen Sie den Tab Console und wählen Sie den Unter-Tab Serial Monitor, um die Fortschrittsmeldungen zu sehen.
Das Bild wird von der Karte gelesen und auf dem Bildschirm angezeigt.
Um Ihr eigenes Bild zu verwenden:
- Verwenden Sie den Image to Bitmap Converter, um Ihr Bild umzuwandeln — klicken Sie auf Save as Bitmap, um die .bmp-Datei herunterzuladen.
- Halten Sie den Dateinamen kurz (weniger als 9 Zeichen, ohne .bmp).
- Kopieren Sie die .bmp-Datei auf die Micro-SD-Karte, passen Sie den Dateinamen im Sketch an und klicken Sie auf Run.
App Lab Konsolenausgabe
Methoden-Kurzreferenz
| Methode | Was sie macht | Verwendung |
|---|---|---|
| SD.begin(cs) | Initialisiert die SD-Karte an ihrem eigenen Chip-Select-Pin. | SD.begin(SD_CS); |
| SD.open(name) | Öffnet eine auf der SD-Karte gespeicherte Datei. | File f = SD.open("diyables.bmp"); |
| width() / height() | Liefert die aktuelle Bildschirmgröße nach der Drehung. | uint16_t w = TFT_display.width(); |
| drawPixel(x,y,color) | Zeichnet ein einzelnes Pixel in der angegebenen Farbe. | TFT_display.drawPixel(10, 20, color); |
Arduino UNO Q Code — Externe Schriftart verwenden
Dieser Sketch stellt Text auf dem Bildschirm mit einer benutzerdefinierten, Adafruit-GFX-kompatiblen Schriftart dar. Im Vergleich zur eingebauten 5x7-Bitmap-Schrift bieten benutzerdefinierte Schriftarten bessere Lesbarkeit und Gestaltung. Die Schriftdatei wird als Header eingebunden und mit einem einzigen Aufruf von setFont() aktiviert.
Was der Code macht:
- Bindet den Schrift-Header FreeSansBold12pt7b ein
- Aktiviert die Schriftart mit setFont()
- Gibt dieselben Temperatur- und Luftfeuchtigkeitswerte wie zuvor aus, jetzt in der benutzerdefinierten Schriftart
Schnellanleitung
- Kopieren Sie den obigen Code und fügen Sie ihn in sketch/sketch.ino ein.
- Klicken Sie in Arduino App Lab auf die Run-Schaltfläche.

Das Display stellt den Text in der benutzerdefinierten Schriftart dar. Beachten Sie die verbesserte Qualität der Zeichen im Vergleich zur eingebauten Schrift.
Wichtig: Einige benutzerdefinierte Schriftarten enthalten keine Sonderzeichen wie das Gradzeichen. Die eingebaute Schrift unterstützt diese hingegen.
Methoden-Kurzreferenz
| Methode | Was sie macht | Verwendung |
|---|---|---|
| setFont(&FontName) | Aktiviert eine benutzerdefinierte GFX-kompatible Schriftart. NULL übergeben, um die eingebaute 5x7-Schrift wiederherzustellen. | TFT_display.setFont(&FreeSans12pt7b); |
| setCursor(x, y) | Bewegt den Textcursor an die angegebene Position. | TFT_display.setCursor(10, 40); |
| setTextColor(color) | Legt die Vordergrundfarbe des Textes fest. | TFT_display.setTextColor(WHITE); |
| print(text) | Gibt eine Zeichenkette an der aktuellen Cursorposition in der aktiven Schriftart aus. | TFT_display.print("Hello!"); |
Arduino UNO Q Code — Touch-Punkt abfragen
Dieser Sketch liest Touch-Koordinaten vom XPT2046-Touch-Controller aus, gibt sie in der Arduino-App-Lab-Konsole aus und zeichnet einen roten Punkt an der berührten Stelle. Wenn Sie ihn zuerst ausführen, sehen Sie den Zahlenbereich Ihres konkreten Panels.
Verdrahtung: T_CLK an D13, T_DIN an D11, T_DO an D12 (gemeinsamer SPI-Bus mit dem Display). T_CS an D7, T_IRQ an D2 oder unverbunden.
Was der Code macht:
- Initialisiert den XPT2046 am gemeinsamen SPI-Bus
- Wendet die Standard-Touch-Kalibrierwerte an
- Wartet auf eine Berührung und liest die Bildschirmkoordinaten aus
- Gibt die Koordinaten in der Konsole aus und markiert die Stelle mit einem roten Punkt
Schnellanleitung
- Kopieren Sie den obigen Code und fügen Sie ihn in sketch/sketch.ino ein.
- Klicken Sie in Arduino App Lab auf die Run-Schaltfläche.

- Öffnen Sie den Tab Console und wählen Sie den Unter-Tab Serial Monitor.
- Berühren Sie den Bildschirm und beobachten Sie, wie die Koordinaten erscheinen!
App Lab Konsolenausgabe
Methoden-Kurzreferenz
| Methode | Was sie macht | Verwendung |
|---|---|---|
| initTouchSPI(cs, irq) | Initialisiert den XPT2046 am gemeinsamen SPI-Bus. -1 für irq verwenden, wenn der Interrupt-Pin nicht angeschlossen ist. | TFT_display.initTouchSPI(7, 2); |
| setTouchCalibration(minX,maxX,minY,maxY) | Bildet rohe ADC-Werte auf Bildschirm-Pixelkoordinaten ab. | TFT_display.setTouchCalibration(300, 3700, 300, 3700); |
| getTouch(x, y) | Liefert kalibrierte Touch-Koordinaten in Bildschirmpixeln. Gibt true zurück, wenn gedrückt. | if (TFT_display.getTouch(x, y)) { ... } |
| readTouchRaw(x, y, z) | Liefert rohe ADC-Touch-Werte ohne Anwendung einer Kalibrierung. | TFT_display.readTouchRaw(x, y, z); |
Arduino UNO Q Code — Mit Touch zeichnen
Dieser Sketch verwandelt den SPI-TFT-Touchscreen in ein einfaches Zeichenfeld für den Finger. Kalibrierte Touch-Koordinaten setzen an jedem Punkt, den der Finger berührt, kleine gefüllte Kreise, sodass beim Bewegen eine durchgehende Zeichnung entsteht.
Was der Code macht:
- Richtet das Display und den XPT2046-Touch-Controller ein
- Prüft fortlaufend, ob der Bildschirm gedrückt wird
- Zeichnet an jedem Touch-Punkt einen kleinen roten Punkt
Schnellanleitung
- Kopieren Sie den obigen Code und fügen Sie ihn in sketch/sketch.ino ein.
- Klicken Sie in Arduino App Lab auf die Run-Schaltfläche.

Sie können jetzt auf dem Bildschirm zeichnen:
- Berühren und ziehen Sie auf dem Bildschirm, um zu malen.
- Heben Sie den Finger an, um das Zeichnen zu beenden.
- Berühren Sie erneut, um fortzufahren.
Methoden-Kurzreferenz
| Methode | Was sie macht | Verwendung |
|---|---|---|
| initTouchSPI(cs, irq) | Richtet den XPT2046 am gemeinsamen SPI-Bus ein. | TFT_display.initTouchSPI(7, -1); |
| setTouchInvertX(invert) / setTouchInvertY(invert) | Spiegelt die Touch-Achse, wenn X oder Y auf Ihrem Panel gespiegelt ist. VOR setTouchCalibration() aufrufen. | TFT_display.setTouchInvertY(true); |
| getTouch(x, y) | Liefert kalibrierte Touch-Koordinaten. Gibt true zurück, solange gedrückt wird. | if (TFT_display.getTouch(x, y)) { ... } |
| fillCircle(x, y, r, color) | Zeichnet einen kleinen Punkt am Touch-Punkt. | TFT_display.fillCircle(x, y, 3, RED); |
Arduino UNO Q Code — Touch-Schaltfläche
Dieser Sketch zeichnet eine rechteckige Schaltfläche auf den Bildschirm und prüft die Touch-Koordinaten gegen die Grenzen der Schaltfläche. Wenn die Schaltfläche angetippt wird, wird sie hervorgehoben und ein Ereignis in der App-Lab-Konsole ausgegeben. Dies ist der einfachste Weg, eine touchgesteuerte Benutzeroberfläche zu bauen.
Der T_IRQ-Pin ist für dieses Beispiel optional. Übergeben Sie -1 als irq-Argument, wenn Sie ihn lieber nicht anschließen möchten.
Was der Code macht:
- Zeichnet eine rote Schaltfläche mit der Beschriftung "PRESS"
- Prüft, ob jede Berührung innerhalb des Rechtecks der Schaltfläche liegt
- Entprellt den Druck, sodass ein einzelnes Antippen genau ein Ereignis auslöst
- Zeichnet die Schaltfläche grau mit "PRESSED" neu und protokolliert Druck- und Loslass-Ereignisse
Schnellanleitung
- Kopieren Sie den obigen Code und fügen Sie ihn in sketch/sketch.ino ein.
- Klicken Sie in Arduino App Lab auf die Run-Schaltfläche.

- Öffnen Sie den Tab Console und wählen Sie den Unter-Tab Serial Monitor.
- Tippen Sie auf die Schaltfläche auf dem Bildschirm — sie ändert ihre Farbe, solange sie gedrückt wird.
App Lab Konsolenausgabe
Methoden-Kurzreferenz
| Methode | Was sie macht | Verwendung |
|---|---|---|
| initTouchSPI(cs, irq) | Initialisiert den XPT2046. -1 für irq übergeben, um ohne Interrupt-Pin abzufragen. | TFT_display.initTouchSPI(7, -1); |
| setTouchCalibration(minX,maxX,minY,maxY) | Wendet die Kalibrierung an, sodass getTouch() Display-Pixelkoordinaten zurückgibt. | TFT_display.setTouchCalibration(300, 3700, 300, 3700); |
| getTouch(x, y) | Liefert die aktuelle kalibrierte Touch-Position. Gibt true zurück, solange der Bildschirm gedrückt wird. | if (TFT_display.getTouch(x, y)) { ... } |
| fillRect(x, y, w, h, color) | Zeichnet ein gefülltes farbiges Rechteck als Hintergrund der Schaltfläche. | TFT_display.fillRect(10, 10, 120, 60, BLUE); |
Arduino UNO Q Code — Touch-Kalibrierung
Die obigen Touch-Beispiele verwenden Standard-Kalibrierwerte und funktionieren auf den meisten Panels. Wenn die Touch-Position nicht genau ist, führen Sie diesen Sketch aus, um den rohen ADC-Bereich Ihres eigenen XPT2046-Panels zu messen. Berühren Sie jede Ecke, wenn Sie dazu aufgefordert werden, und kopieren Sie dann die vier ausgegebenen Zahlen in setTouchCalibration() in Ihren anderen Touch-Sketches.
Eine Kalibrierung ist nötig, weil die resistive Touch-Schicht aufgrund von Fertigungsunterschieden nicht perfekt mit den Displaypixeln übereinstimmt. Sie muss nur einmal pro Display durchgeführt werden.
Was der Code macht:
- Lässt in jeder der vier Ecken einen roten Punkt blinken, nummeriert von 1 bis 4
- Mittelt mehrere Rohwerte, während Sie jede Ecke gedrückt halten
- Gibt live die rohen Z-, X- und Y-Werte aus, damit Sie prüfen können, ob eine Berührung erkannt wird
- Gibt am Ende eine sofort verwendbare setTouchCalibration()-Zeile aus
Schnellanleitung
- Kopieren Sie den obigen Code und fügen Sie ihn in sketch/sketch.ino ein.
- Klicken Sie in Arduino App Lab auf die Run-Schaltfläche.

- Öffnen Sie den Tab Console und wählen Sie den Unter-Tab Serial Monitor.
- Drücken und halten Sie jeden blinkenden Eckpunkt der Reihe nach: oben links, oben rechts, unten rechts, unten links.
- Kopieren Sie die ausgegebene setTouchCalibration()-Zeile in setup() Ihrer anderen Touch-Sketches.
App Lab Konsolenausgabe
Methoden-Kurzreferenz
| Methode | Was sie macht | Verwendung |
|---|---|---|
| initTouchSPI(cs, irq) | Initialisiert den XPT2046-Touch-Controller. | TFT_display.initTouchSPI(7, 2); |
| readTouchRaw(x, y, z) | Liest rohe ADC-Werte, um den Kalibrierbereich zu messen. | TFT_display.readTouchRaw(x, y, z); |
| setTouchCalibration(minX,maxX,minY,maxY) | Speichert die Kalibrierwerte, sodass getTouch() korrekt auf Pixelkoordinaten abbildet. | TFT_display.setTouchCalibration(305, 3696, 297, 3703); |
| setTouchInvertX(invert) / setTouchInvertY(invert) | Spiegelt die Touch-Achse, wenn X oder Y auf Ihrem Panel gespiegelt ist. VOR der Kalibrierung aufrufen, damit die gespeicherten Werte übereinstimmen. | TFT_display.setTouchInvertY(true); |
Arduino UNO Q Code — Benutzerdefinierter SPI-Bus
Dieser Sketch zeigt, wie Sie dem Display-Konstruktor eine explizite SPIClass-Instanz übergeben. Verwenden Sie diesen Ansatz, wenn Sie den Bus explizit benennen, ihn mit zusätzlicher Konfiguration teilen oder das Display auf Platinen, die eine zweite SPI-Schnittstelle haben, auf diese verlegen möchten.
Die MCU des Arduino UNO Q stellt einen einzigen Hardware-SPI-Bus an D11, D13 und D12 bereit, daher bleibt MY_SPI hier &SPI. Derselbe Sketch läuft unverändert auf Platinen mit zwei Bussen, indem man nur dieses eine Define austauscht.
Was der Code macht:
- Definiert MY_SPI als Zeiger auf den zu verwendenden SPI-Bus
- Übergibt diesen Zeiger als letztes Konstruktorargument
- Zeichnet ein Testmuster aus roten, grünen und blauen Farbbalken
- Gibt eine Bestätigungsbeschriftung über den Balken aus
Schnellanleitung
- Kopieren Sie den obigen Code und fügen Sie ihn in sketch/sketch.ino ein.
- Klicken Sie in Arduino App Lab auf die Run-Schaltfläche.

Das Display startet am expliziten SPI-Bus und stellt das Farbbalken-Testmuster dar.
Methoden-Kurzreferenz
| Methode | Was sie macht | Verwendung |
|---|---|---|
| DIYables_ILI9341_SPI(w,h,cs,dc,rst,spi) | Konstruktorvariante, die einen Zeiger auf eine beliebige SPIClass akzeptiert. Standardmäßig &SPI, wenn das Argument weggelassen wird. | DIYables_ILI9341_SPI tft(240, 320, 10, 9, 8, &SPI); |
| begin() | Initialisiert das Display am konfigurierten SPI-Bus. | TFT_display.begin(); |
Bridge: Linux + MCU
Dieser Abschnitt zeigt, wie Sie beide Prozessoren des Arduino UNO Q programmieren, damit die Linux-Seite das SPI-TFT-Display steuern und Touch-Eingaben aus der Ferne auslesen kann:
- Das SPI-TFT-Display und der XPT2046-Touch-Controller sind mit der MCU (STM32) verbunden — die MCU rendert sämtliche Ausgaben und liest jede Berührung aus
- Die MPU kann das TFT nicht direkt ansteuern oder Touch-Eingaben direkt lesen — sie muss Ergebnisse von der MCU über Bridge.call() anfordern, was den passenden Bridge.provide()-Callback auf der MCU auslöst
- Die MPU hat WLAN — da sie ein vollständiges Debian Linux ausführt, kann sie auf das Internet zugreifen, REST-APIs aufrufen und Display-Aktualisierungen von überall senden
- Arduino_RouterBridge ermöglicht die RPC-Kommunikation zwischen den beiden Prozessoren — der Arduino-Router-Dienst unter Linux verwaltet den gesamten Datenverkehr
- ⚠️ /dev/ttyHS1 (Linux) und Serial1 (MCU) sind vom Router RESERVIERT — öffnen Sie sie niemals in Ihrem eigenen Code
Kurz gesagt: Die MCU steuert das SPI-TFT-Display an und liest Touch-Eingaben → die MPU fordert Befehle und Touch-Daten an → die MPU nutzt sie über das Internet.
MCU-Code (Bridge)
Python-Code (Bridge)
Schnellanleitung
- Verbinden: Verdrahten Sie das SPI-TFT-Display und den XPT2046-Touch-Controller mit dem Arduino UNO Q und schließen Sie dann das USB-C-Kabel an.
- Arduino App Lab öffnen: Starten Sie Arduino App Lab und warten Sie, bis die Platine erkannt wird.
- Eine neue App erstellen: Klicken Sie auf Create New App, nennen Sie sie DIYables_TftSpiBridge und klicken Sie dann auf Create.
- Den MCU-Sketch einfügen: Kopieren Sie den obigen MCU-Bridge-Code und fügen Sie ihn in sketch/sketch.ino ein.
- Den Python-Code einfügen: Kopieren Sie den obigen Python-Bridge-Code und fügen Sie ihn in die Python-Datei der App ein.
- Install the library: Click the Add sketch library button (the open book icon with a + sign) in the left sidebar.

- Search for Arduino_RouterBridge created by Arduino and click the Install button.
- Search for DIYables TFT SPI created by DIYables.io and click the Install button.
- Hochladen: Klicken Sie in Arduino App Lab auf die Run-Schaltfläche.

- Hinweis: Stellen Sie sicher, dass Bridge.begin() im MCU-Sketch aufgerufen wird und der Sketch hochgeladen ist, bevor Sie das Python-Skript auf der Linux-Seite ausführen.
- ⚠️ Warnung: Öffnen Sie in Ihrem Code niemals direkt /dev/ttyHS1 (unter Linux) und verwenden Sie nicht Serial1 (auf der MCU) — diese sind vom Arduino Router reserviert, und ein Zugriff darauf unterbricht die Bridge.
App Lab Konsolenausgabe
Telegram
Steuern Sie das SPI-TFT-Display von überall aus mit Telegram. Senden Sie eine Nachricht von Ihrem Handy, und das Display wird in Echtzeit aktualisiert — und fragen Sie die Platine, wo Sie den Bildschirm zuletzt berührt haben.
Wenn Sie noch keinen Telegram-Bot haben, lesen Sie Wie man einen Telegram-Bot erstellt, um Ihr Bot-Token zu erhalten, bevor Sie fortfahren.
Dieser Abschnitt behandelt:
- Das Ausführen eines Python-Skripts auf der Linux-Seite des Arduino UNO Q, das auf Telegram-Nachrichten wartet
- Das Weiterleiten von Befehlen aus Telegram an die MCU-Seite, um auf das SPI-TFT-Display zu schreiben
- Das Zurücksenden des MCU-Ergebnisses — des Displaystatus oder des letzten Touch-Punkts — als Telegram-Antwort
MCU-Sketch: Behalten Sie denselben MCU-Sketch aus dem vorherigen Bridge-Abschnitt bei — keine Änderungen nötig. Stellen Sie sicher, dass er bereits hochgeladen ist und auf dem STM32 läuft, bevor Sie fortfahren.
Python-Code (Telegram)
Schnellanleitung
- Ersetzen Sie YOUR_TELEGRAM_BOT_TOKEN durch Ihr tatsächliches Bot-Token von BotFather.
- Ersetzen Sie YOUR_CHAT_ID durch Ihre Telegram-Chat-ID.
- Fügen Sie diesen Python-Code in die Python-Datei Ihrer App ein und behalten Sie denselben MCU-Sketch aus dem Bridge-Abschnitt bei.
- Klicken Sie in Arduino App Lab auf die Run-Schaltfläche.

- Öffnen Sie Telegram und senden Sie /start an Ihren Bot, um die Befehlsliste zu sehen.
- Hinweis: Ersetzen Sie YOUR_BOT_TOKEN durch das Token, das Sie von @BotFather in Telegram erhalten haben.
App Lab Konsolenausgabe
ArduinoBot
OpenClaw
You can adapt the OpenClaw to this tutorial by refering the instruction on Arduino Uno Q - OpenClaw Tutorial
Fehlerbehebung
Wenn sich das Display nicht wie erwartet verhält, prüfen Sie zuerst Folgendes:
- Schwarzer Bildschirm — Stellen Sie sicher, dass CS, DC, MOSI und SCK alle angeschlossen sind. Eine fehlende CS-Leitung lässt das Display inaktiv.
- Falscher Treiber — Es darf nur eine Konstruktorzeile aktiv sein. Die anderen beiden müssen auskommentiert bleiben.
- Verschobenes oder abgeschnittenes Bild — Breite und Höhe im Konstruktor müssen der physischen Panelgröße entsprechen.
- Nichts zu sehen bei heller Hintergrundbeleuchtung — Prüfen Sie, dass VCC und LED / BL an 3,3V und nicht an 5V liegen.
- Touch funktioniert nicht — Führen Sie den Touch-Kalibrierungs-Sketch aus, um für Ihr Panel spezifische Kalibrierwerte zu erhalten.
- Touch-Achse vertauscht — Rufen Sie setTouchInvertX(true) oder setTouchInvertY(true) vor setTouchCalibration() auf.
Plattformunterstützung
Die Bibliothek DIYables_TFT_SPI verwendet nur Standard-Arduino-APIs — SPI, digitalWrite und millis:
- Sie läuft auf der MCU des Arduino UNO Q (STM32) über Arduino App Lab
- Dieselben Sketches laufen auch unverändert auf anderen Arduino-kompatiblen Platinen
- Zwischen den Platinen müssen nur die Pin-Nummern und die Panelgröße im Konstruktor angepasst werden
Projektideen
Mit einem SPI-TFT-Display und dem Arduino UNO Q können Sie viele kreative Projekte bauen:
- WLAN-Wetter-Dashboard: Die Linux-Seite ruft eine Wettervorhersage von einer Online-API ab, und die MCU zeichnet sie auf den TFT-Bildschirm
- Touch-Bedienfeld: Zeichnen Sie Bildschirm-Schaltflächen, die an die MCU angeschlossene LEDs, Relais oder Motoren schalten
- Nachrichtentafel aus der Ferne: Senden Sie Text per Telegram, der von überall auf der Welt sofort auf dem Display erscheint
- Bilderrahmen: Zeigen Sie auf der Micro-SD-Karte gespeicherte BMP-Bilder nacheinander als Diashow an
- Unterschriftenfeld: Erfassen Sie eine mit dem Finger gezeichnete Unterschrift und lassen Sie die Linux-Seite sie in die Cloud hochladen
- Live-Sensormonitor: Zeigen Sie Temperatur-, Luftfeuchtigkeits- oder Entfernungswerte als große, gut lesbare Zahlen an
Fordern Sie sich selbst heraus
Bereit, mit dem SPI-TFT-Display am Arduino UNO Q weiterzugehen? Probieren Sie diese Aufgaben:
- Einfach: Ändern Sie Stiftfarbe und Radius im Touch-Draw-Sketch, sodass jede neue Berührung in einer anderen Farbe malt.
- Mittel: Fügen Sie neben der ersten eine zweite Bildschirm-Schaltfläche hinzu und geben Sie für jede Schaltfläche eine andere Meldung in der App-Lab-Konsole aus.
- Fortgeschritten: Bauen Sie ein per Telegram gesteuertes Dashboard: Die Python-Seite ruft über WLAN Live-Wetterdaten ab, sendet sie über Bridge, und die MCU zeichnet auf dem SPI-TFT-Display eine Temperaturanzeige mit einem farbigen Balken.