TFT-Display

Lesezeit: 30 Minuten

Vorschlag für eine Systematik der SPI-Pins

Lei­der ver­wen­den die Her­steller die unter­schiedlich­sten Namen für die SPI-Pins. Um etwas Ord­nung in die ver­schiede­nen Beze­ich­nun­gen der SPI-Pins zu brin­gen habe ich mir eine far­bliche Sys­tem­atik über­legt:

Farben SPI-Pins

Beze­ich­nung SPI-PinFarbe
VCC/LEDArot
GNDschwarz
CSweiß
DC/RS/A0grün
RESET/RES/RSTgelb
CLK/SCK/SCLbraun
COPI/DIN/SDA/SDI (MOSI)blau

Für die ESP-Mikro­con­troller ste­ht die alter­na­tive ⇒Bib­lio­thek TFT_eSPI zur Ver­fü­gung.

Die Bibliothek Adafruit_GFX

Die Treiber aller TFT-Dis­plays ver­wen­den die Bib­lio­thek Adafruit_GFX.

  • TFT-Dis­play mit 160x128 Pix­eln: Adafruit_ST7735
  • TFT-Dis­play mit 320x240 Pixeln:Adafruit_ILI9341
  • TFT-Dis­play mit 240x240 Pix­eln: Adafruit_GC9A01A
  • TFT-Dis­play mit 480x320 Pix­eln Adafruit_ST7796S_kbv

Funktionen der Bibliothek Adafruit_GFX_Library

Schlüs­sel­wortPara­me­terAktion
width();Bild­schirm­bre­ite fest­stellen
height();Bild­schirmhöhe fest­stellen
setRotation(Richtung);Rich­tung = 0 → nicht drehen
Rich­tung = 1 → 90° drehen
Rich­tung = 2 → 180° drehen
Rich­tung = 3 → 270 ° drehen
Bild­schirm aus­richt­en
fillScreen(Farbe);Bild­schirmhin­ter­grund
drawLine(StartX, Star­tY, EndeX, EndeY, Farbe);Lin­ie zeich­nen
drawFastHLine(StartX, Star­tY, Länge, Farbe);hor­i­zon­tale Lin­ie zeich­nen
drawFastVLine(StartX, Star­tY, Länge, Farbe);ver­tikale Lin­ie zeich­nen
drawRect(StartX, Star­tY„ Bre­ite, Höhe, Farbe);Rechteck zeich­nen
drawRoundRect(StartX, Star­tY, Bre­ite, Höhe, Eck­en­ra­dius, Farbe);abgerun­detes Rechteck zeich­nen
fillRoundRect(StartX, Star­tY, Bre­ite, Höhe, Eck­en­ra­dius, Füll­farbe);aus­ge­fülltes abgerun­detes Rechteck zeich­nen
fillRect(StartX, Star­tY, Bre­ite, Höhe, Füll­farbe);aus­ge­fülltes Rechteck zeich­nen
drawCircle(MittelpunktX, Mit­telpunk­tY, Radius, Farbe);Kreis zeich­nen
fillCircle(MittelpunktX, Mit­telpunk­tY, Radius, Füll­farbe);Aus­ge­füll­ten Kreis zeich­nen
drawTriangle(x1, y1, x2, y2, x3, y3, Farbe);Dreieck zeich­nen:
x1, y1: 1.Punkt
x2, y2: 2.Punkt
x3, y3: 3.Punkt
fillTriangle(x1, y1, x2, y2, x3, y3, Füll­farbe);aus­ge­fülltes Dreieck zeich­nen:
x1, y1: 1.Punkt
x2, y2: 2.Punkt
x3, y3: 3.Punkt
setCursor(x, y);Cur­sor set­zen
setTextSize(Textgröße);TextgrößeTextgröße bes­tim­men
setTextColor(Farbe);Text­farbe set­zen
print(“Text”); println(“Text”);Text schreiben
setTextWrap(true/false);false → Text fließt über den Rand des TFTs hin­aus
true → Text wird am Ende umge­brochen
Zeilenum­bruch
invert­Dis­play();0 → Far­ben nicht tauschen
1 → Far­ben tauschen
color565(rot, grün, blau);rot: 0 — 255
grün: 0 — 255
blau: 0 — 255
beliebige Mis­ch­far­ben erstellen
drawBitmap(PosX, PosY, Array, Array­GrößeX, Array­GrößeY, Farbe);Array als Bild darstellen

TFT-Displays mit 160x128 Pixeln

Benötigte Bib­lio­thek instal­lieren.
Instal­liere auch die zusät­zlich benötigten Bib­lio­theken.

Adafruit Pinbelegung

Pin TFTUNO R3/R4/NanoESP32-WroomWemos D1 MiniESP32-C6ESP32-S3XIAO-ESP32-C3ESP32-C3ESP32-C6 Zero
Gnd (1)GNDGNDGNDGNDGNDGNDGNDGND
VCC (2)5V5V5V5V3,3V5V5V5V
RESET (3)84D135D133
DC (4)92D224D222
CARD_CS (5)
TFT_CS (6)105D81810D7718
COPI (7)1123D71911D10619
SCK (8)1318D52112D8421
SDI (9)
LITE (10)5V5V5V5V3,3V5V5V5V

1,77 Zoll Pinbelegung

Pin TFTUNO R3/R4 NanoESP32-WroomWemos D1 MiniESP32-C6ESP32-S3XIAO-ESP32-C3ESP32-C3ESP32-C6 Zero
GNDGNDGNDGNDGNDGNDGNDGNDGND
VCC5V5V5V5V3,3V5V5V5V
SCK1318D52112D8421
SDA (COPI)1123D71911D10619
RES (RST)84D135D133
RS (DC)92D224D222
CS105D81810D7718
LEDA3,3V3,3V3,3V3,3V3,3V3,3V5V5V

TFT Waveshare Pinbelegung

Pin TFTUNO R3/R4 NanoESP32-WroomWemos D1 MiniESP32-C6ESP32-S3XIAO-ESP32-C3ESP32-C3ESP32-C6 Zero
VCC (1)5V5V5V5V3,3V5V5V5V
GND (2)GNDGNDGNDGNDGNDGNDGNDGND
DIN (3)1123D71911D10619
CLK (4)1318D52112D8421
CS (5)105D81810D7718
DC (6)92D224D222
RST (7)84D135D133
BL (8)5V5V5V5V3,3V3,3V5V5V

Beispielprogramm

Du musst noch die SPI-Pins an den jew­eili­gen Mikro­con­troller anpassen.

TFT-Displays mit 320x240 Pixeln

Benötigte Bib­lio­thek instal­lieren.
Instal­liere auch die zusät­zlich benötigten Bib­lio­theken.

TFT Waveshare Pinbelegung

Pin TFTUNO R3/R4 NanoESP32-WroomWemos D1 MiniESP32-C6ESP32-S3XIAO-ESP32-C3ESP32-C3ESP32-C6 Zero
VCC (1)5V5V5V5V3,3V5V5V5V
GND (2)GNDGNDGNDGNDGNDGNDGNDGND
DIN (3)1123D71911D10619
CLK (4)1318D52112D8421
CS (5)105D81810D7718
DC (6)92D224D222
RST (7)84D135D133
BL (8)5V5V5V5V3,3V3,3V5V5V

2,2 Zoll Pinbelegung

Pin TFTUNO R3/R4 NanoESP32-WroomWemos D1 MiniESP32-C6ESP32-S3XIAO-ESP32-C3ESP32-C3ESP32-C6 Zero
SDO
LED3,3V3,3V3,3V3,3V3,3V3,3V5V5V
SCK1318D52112D8421
SDI1123D71911D10619
DC92D224D222
RESET84D135D133
CS105D81810D7718
GNDGNDGNDGNDGNDGNDGNDGNDGND
VCC5V5V5V5V3,3V5V5V5V

Beispielprogramm

ESP32_2432S028 mit 320x240 Pixeln

TFT-Display mit 240x240 Pixel

TFT 240x240 Pinbelegung

Pin TFTUNO R3/R4 NanoESP32-WroomESP32-C6Wemos D1 MiniESP32-S3XIAO-ESP32-C3ESP32-C3ESP32-C6 Zero
VCC3,3V3,3V3,3V3,3V3,3V3,3V3,3V5V
GNDGNDGNDGNDGNDGNDGNDGNDGND
SCL (CLK)131821D512D8421
SDA (COPI)112319D711D10619
DC922D24D222
CS10518D810D7718
RST843D15D133

Beispielprogramm

TFT-Display mit 480x320 Pixeln

4,0 Zoll Pinbelegung

Pin TFTUNO R3/R4/NanoESP32-WroomWemos D1 MiniESP32-C6ESP32-S3XIAO-ESP32-C3ESP32-C3ESP32-C6 Zero
VCC5V5V5V5V3,3V5V5V5V
GNDGNDGNDGNDGNDGNDGNDGNDGND
CS105D81810D7718
RESET84D135D133
DC/RS92D224D222
SDI1123D71911D10619
SCK1318D52112D8421
LED5V5V5V5V3,3V5V5V5V

Die ver­wen­dete Bib­lio­thek kann nicht über die Bib­lio­theksver­wal­tung instal­liert wer­den. Sie muss herunter geladen wer­den:
https://github.com/prenticedavid/Adafruit_ST7796S_kbv
und mit

Sketch -> Bib­lio­thek ein­binden -> zip-Bib­lio­thek hinzufü­gen

instal­liert wer­den.

Beispielprogramm

Alter­na­tive Bib­lio­thek

Sonderzeichen anzeigen

Die Stan­dard­schriften kön­nen keine Umlaute und Son­derze­ichen anzeigen, sie müssen als hexa­dez­i­maler oder dez­i­maler Code eingegeben wer­den.

ZeichenHex-CodeDez­i­mal-Code
ä0x84132
ö0x94148
ü0x81129
Ä0x8e142
Ö0x99153
Ü0x9a154
ß0xe0224
°0xf7247
α0xdf223
π0xe2226
Ω0xe9233
Σ0xe3227
0xed237
|0xad173

Wenn du den dez­i­malen Code ver­wen­den willst:

Alle Son­derze­ichen anzeigen:

Schriften mit der Bibliothek Adafruit_GFX

Die Bib­lio­thek Adafruit_GFX bietet auch ver­schiedene Schriften an. Sie befind­en sich im Ord­ner libraries/Adafruit_GFX_Library/Fonts. Lei­der bieten sie nur den ein­fachen ASCII-Zeichen­satz, Umlaute und Son­derze­ichen fehlen.
Im Kopf des Pro­gramms müssen die ver­wen­de­ten Schriften einge­bun­den wer­den, set­Font definiert die entsprechende Schrif­tart.

Beispiel:

Schriften erstellen

Auf der Seite https://rop.nl/truetype2gfx/ kannst du von den ver­füg­baren freien Schrif­tarten neue Schrift­größen erstellen. Allerd­ings ver­wen­den diese Schriften auch nur den ein­fachen ASCII-Zeichen­satz.

Die neu erstellte Schrift befind­et sich anschließend in deinem Down­load-Ord­ner. Jet­zt musst du sie noch in den Ord­ner

Arduino/libraries/Adafruit_GFX_Library/Fonts

kopieren.

So sieht es auf einem TFT mit 320x240 Pix­eln aus:

Zusätzliche Schriften mit der Bibliothek U8g2_for_Adafruit_GFX/U8g2_for_TFT_eSPI

Die Bib­lio­theken U8g2_for_Adafruit_GFX/U8g2_for_TFT_eSPI bieten eine Vielzahl von Schriften in ver­schiede­nen Größen. Am Namen der Schrif­tart kannst du able­sen welche ASCII-Zeichen dargestellt wer­den kön­nen.

u8g2_for_AdafruitGFX Zeichensatz

Zeichen­satzBeschrei­bung
rASCII-Zeichen zwis­chen 30 und 127
enthält alle Zahlen, Groß und Klein­buch­staben
fASCII-Zeichen zwis­chen 30 und 255
erweit­ert­er Zeichen­satz mit Sym­bol­en und Umlaut­en
uASCII-Zeichen zwis­chen 32 und 95
Großbuch­staben
nASCII-Zeichen zwis­chen 43 bis 58
Zahlen und * + , . / :

Bitmaps darstellen

Array des Bitmaps erstellen

Bitmaps kön­nen nicht direkt auf dem Dis­play dargestellt wer­den, sie müssen als Array hexa­dez­i­maler Werte vor­liegen.
Wäh­le oder erstelle ein Bild mit den max­i­malen Maßen 200x200 Pix­eln. Das Online-Tool 🔗https://javl.github.io/image2cpp/ wan­delt das Bild in ein Array um.

Der Spe­icher­platz des Arduino UNO reicht für das Pro­gramm nicht aus.

Das erstellte Array muss in den Kopf des Pro­gramms einge­fügt wer­den.
draw­Bitmap zeigt das Bild an.

Ab Zeile 4 musst du die entsprechen­den SPI-Pins des ver­wen­de­ten Mikro­con­trollers auswählen.

GFXcanvas — Flackern des TFTs vermeiden

Soll ein schnell wech­sel­nder Text an der gle­ichen Posi­tion dargestellt wer­den, gibt es zwei Prob­leme:

  • der geän­derte Text ist länger oder kürz­er als der vorherige, dadurch über­lap­pen sich die Buch­staben
  • der neue Text verur­sacht ein Flack­ern des TFTs

Das erste Prob­lem lässt sich lösen indem der bish­erige Text durch ein aus­ge­fülltes Rechteck “gelöscht” wird. Das ver­hin­dert allerd­ings nicht das Flack­ern des TFTs.

Das Flack­ern lässt sich durch Can­vas beseit­i­gen. Hier­bei wird ein Bild der darzustel­len­den Dat­en im Spe­ich­er angelegt, auf Anforderung wird dieses Bild auf dem TFT dargestellt.

Im Film wird der blau dargestellte Bere­ich mit GFX­can­vas erzeugt, im roten Bere­ich wird der Text zunächst durch ein rotes Rechteck “gelöscht” und anschließend neu geschrieben. Als Text wird die mit ⇒mil­lis() gemessene Zeit, die seit dem Start des Pro­gramms ver­gan­gen ist, dargestellt.
Man kann den Unter­schied gut erken­nen.

Jedes Objekt vom Typ GFXcanvas1 benötigt pro ein Bit pro Pix­el. Wie im Beispiel eines Bere­ichs mit 240x150 Pix­eln sind das 36.000 Bits, das entspricht 4.500 Bytes oder 4,5 kilo­Bytes. Der Spe­icher­platz eines Arduino UNO R3 reicht hier­für nicht aus.


Quellen


Letzte Aktualisierung: Nov. 17, 2025 @ 10:16