TFT-Display


Vorschlag für eine Systematik der SPI-Pins

Lei­der ver­wen­den die Her­stel­ler die unter­schied­lichs­ten Namen für die SPI-Pins. Um etwas Ord­nung in die ver­schie­de­nen Bezeich­nun­gen der SPI-Pins zu brin­gen habe ich mir eine farb­li­che Sys­te­ma­tik über­legt:

Bezeich­nung SPI-PinFar­be
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­trol­ler steht die alter­na­ti­ve ⇒Biblio­thek TFT_eSPI zur Ver­fü­gung.

Die Bibliothek Adafruit_GFX

Die Trei­ber aller TFT-Dis­plays ver­wen­den die Biblio­thek Adafruit_GFX.

  • TFT-Dis­play mit 160×128 Pixeln: Adafruit_ST7735
  • TFT-Dis­play mit 320×240 Pixeln:Adafruit_ILI9341
  • TFT-Dis­play mit 240×240 Pixeln: Adafruit_GC9A01A
  • TFT-Dis­play mit 480×320 Pixeln Adafruit_ST7796S_kbv

Funktionen der Bibliothek Adafruit_GFX_Library

Schlüs­sel­wortPara­me­terAkti­on
width();Bild­schirm­brei­te fest­stel­len
height();Bild­schirm­hö­he fest­stel­len
setRotation(Richtung);Rich­tung = 0 → nicht dre­hen
Rich­tung = 1 → 90° dre­hen
Rich­tung = 2 → 180° dre­hen
Rich­tung = 3 → 270 ° dre­hen
Bild­schirm aus­rich­ten
fillScreen(Farbe);Bild­schirm­hin­ter­grund
drawLine(StartX, Star­tY, End­eX, EndeY, Far­be);Linie zeich­nen
drawFastHLine(StartX, Star­tY, Län­ge, Far­be);hori­zon­ta­le Linie zeich­nen
drawFastVLine(StartX, Star­tY, Län­ge, Far­be);ver­ti­ka­le Linie zeich­nen
drawRect(StartX, Star­tY,, Brei­te, Höhe, Far­be);Recht­eck zeich­nen
drawRoundRect(StartX, Star­tY, Brei­te, Höhe, Ecken­ra­di­us, Far­be);abge­run­de­tes Recht­eck zeich­nen
fillRoundRect(StartX, Star­tY, Brei­te, Höhe, Ecken­ra­di­us, Füll­far­be);aus­ge­füll­tes abge­run­de­tes Recht­eck zeich­nen
fillRect(StartX, Star­tY, Brei­te, Höhe, Füll­far­be);aus­ge­füll­tes Recht­eck zeich­nen
drawCircle(MittelpunktX, Mit­tel­punk­tY, Radi­us, Far­be);Kreis zeich­nen
fillCircle(MittelpunktX, Mit­tel­punk­tY, Radi­us, Füll­far­be);Aus­ge­füll­ten Kreis zeich­nen
drawTriangle(x1, y1, x2, y2, x3, y3, Far­be);Drei­eck zeich­nen:
x1, y1: 1.Punkt
x2, y2: 2.Punkt
x3, y3: 3.Punkt
fillTriangle(x1, y1, x2, y2, x3, y3, Füll­far­be);aus­ge­füll­tes Drei­eck zeich­nen:
x1, y1: 1.Punkt
x2, y2: 2.Punkt
x3, y3: 3.Punkt
setCursor(x, y);Cur­sor set­zen
setTextSize(Textgröße);Text­grö­ßeText­grö­ße bestim­men
setTextColor(Farbe);Text­far­be set­zen
print("Text"); println("Text");Text schrei­ben
setTextWrap(true/false);fal­se → Text fließt über den Rand des TFTs hin­aus
true → Text wird am Ende umge­bro­chen
Zei­len­um­bruch
invert­Dis­play();0 → Far­ben nicht tau­schen
1 → Far­ben tau­schen
color565(rot, grün, blau);rot: 0 - 255
grün: 0 - 255
blau: 0 - 255
belie­bi­ge Misch­far­ben erstel­len
drawBitmap(PosX, PosY, Array, Array­GrößeX, Array­Grö­ßeY, Far­be);Array als Bild dar­stel­len

TFT-Displays mit 160 ✕ 128 Pixeln

Adafruit-Display

Benö­tig­te Biblio­thek instal­lie­ren.
Instal­lie­re auch die zusätz­lich benö­tig­ten Biblio­the­ken.

Pin TFTUNO R3/R4ESP32-WroomWemos D1 MiniESP32-C6ESP32-C6 ZeroESP32-S3XIAO-ESP32-C3ESP32-C3
Gnd (1)GNDGNDGNDGNDGNDGNDGNDGND
VCC (2)5V5V5V5V5V3,3V5V5V
RESET (3)84D1335D13
DC (4)92D2224D22
CARD_CS (5)
TFT_CS (6)105D8181810D77
COPI (7)1123D7191911D106
SCK (8)1318D5212112D84
SDI (9)
LITE (10)5V5V5V5V5V3,3V5V5V

1,77 Zoll Display

Pin TFTUNO R3/R4ESP32-WroomWemos D1 MiniESP32-C6ESP32-C6 ZeroESP32-S3XIAO-ESP32-C3ESP32-C3
GNDGNDGNDGNDGNDGNDGNDGNDGND
VCC5V5V5V5V5V3,3V5V5V
SCK1318D5212112D84
SDA (COPI)1123D7191911D106
RES (RST)84D1335D13
RS (DC)92D2224D22
CS105D8181810D77
LEDA3,3V3,3V3,3V3,3V5V3,3V3,3V5V

Waveshare 1,8 Zoll Display

Pin TFTUNO R3/R4ESP32-WroomWemos D1 MiniESP32-C6ESP32-C6 ZeroESP32-S3XIAO-ESP32-C3ESP32-C3
VCC (1)5V5V5V5V5V3,3V5V5V
GND (2)GNDGNDGNDGNDGNDGNDGNDGND
DIN (3)1123D7191911D106
CLK (4)1318D5212112D84
CS (5)105D8181810D77
DC (6)92D2224D22
RST (7)84D1335D13
BL (8)5V5V5V5V5V3,3V3,3V5V

Beispielprogramm

Du musst noch die SPI-Pins an den jewei­li­gen Mikro­con­trol­ler anpas­sen.

TFT-Displays mit 320 ✕ 240 Pixeln

Benö­tig­te Biblio­thek instal­lie­ren.
Instal­lie­re auch die zusätz­lich benö­tig­ten Biblio­the­ken.

Waveshare 2,2 Zoll Display

Pin TFTUNO R3/R4ESP32-WroomWemos D1 MiniESP32-C6ESP32-C6 ZeroESP32-S3XIAO-ESP32-C3ESP32-C3
VCC (1)5V5V5V5V5V3,3V5V5V
GND (2)GNDGNDGNDGNDGNDGNDGNDGND
DIN (3)1123D7191911D106
CLK (4)1318D5212112D84
CS (5)105D8181810D77
DC (6)92D2224D22
RST (7)84D1335D13
BL (8)5V5V5V5V5V3,3V3,3V5V

2,2 Zoll Display

Pin TFTUNO R3/R4ESP32-WroomWemos D1 MiniESP32-C6ESP32-C6 ZeroESP32-S3XIAO-ESP32-C3ESP32-C3
SDO
LED3,3V3,3V3,3V3,3V5V3,3V3,3V5V
SCK1318D5212112D84
SDI1123D7191911D106
DC92D2224D22
RESET84D1335D13
CS105D8181810D77
GNDGNDGNDGNDGNDGNDGNDGNDGND
VCC5V5V5V5V5V3,3V5V5V

Beispielprogramm

TFT-Display mit 240 ✕ 240 Pixel

Pin TFTUNO R3/R4ESP32-WroomESP32-C6ESP32-C6 ZeroWemos D1 MiniESP32-S3XIAO-ESP32-C3ESP32-C3
VCC3,3V3,3V3,3V5V3,3V3,3V3,3V3,3V
GND GNDGNDGNDGNDGNDGNDGNDGND
SCL (CLK)13182121D512D84
SDA (COPI)11231919D711D106
DC9222D24D22
CS1051818D810D77
RST8433D15D13

Beispielprogramm

TFT-Display mit 480 ✕ 320 Pixeln

4,0 Zoll Display

Pin TFTUNO R3/R4ESP32-WroomWemos D1 MiniESP32-C6ESP32-C6 ZeroESP32-S3XIAO-ESP32-C3ESP32-C3
VCC5V5V5V5V5V3,3V5V5V
GNDGNDGNDGNDGNDGNDGNDGNDGND
CS105D8181810D77
RESET84D1335D13
DC/RS92D2224D22
SDI1123D7191911D106
SCK1318D5212112D84
LED5V5V5V5V5V3,3V5V5V

Die ver­wen­de­te Biblio­thek kann nicht über die Biblio­theks­ver­wal­tung instal­liert wer­den. Sie muss her­un­ter gela­den wer­den:
https://github.com/prenticedavid/Adafruit_ST7796S_kbv
und mit

Sketch -> Biblio­thek ein­bin­den -> zip-Biblio­thek hin­zu­fü­gen

instal­liert wer­den.

Beispielprogramm

Alter­na­ti­ve Biblio­thek

Sonderzeichen anzeigen

Die Stan­dard­schrif­ten kön­nen kei­ne Umlau­te und Son­der­zei­chen anzei­gen, sie müs­sen als hexa­de­zi­ma­ler oder dezi­ma­ler Code ein­ge­ge­ben wer­den.

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

Alle Son­der­zei­chen anzei­gen:

Schriften mit der Bibliothek Adafruit_GFX

Die Biblio­thek Adafruit_GFX bie­tet auch ver­schie­de­ne Schrif­ten an. Sie befin­den sich im Ord­ner libraries/Adafruit_GFX_Library/Fonts. Lei­der bie­ten sie nur den ein­fa­chen ASCII-Zei­chen­satz, Umlau­te und Son­der­zei­chen feh­len.
Im Kopf des Pro­gramms müs­sen die ver­wen­de­ten Schrif­ten ein­ge­bun­den wer­den, set­Font defi­niert die ent­spre­chen­de Schrift­art.

Bei­spiel:

Schriften erstellen

Auf der Sei­te https://rop.nl/truetype2gfx/ kannst du von den ver­füg­ba­ren frei­en Schrift­ar­ten neue Schrift­grö­ßen erstel­len. Aller­dings ver­wen­den die­se Schrif­ten auch nur den ein­fa­chen ASCII-Zei­chen­satz.

Die neu erstell­te Schrift befin­det sich anschlie­ßend in dei­nem Down­load-Ord­ner. Jetzt musst du sie noch in den Ord­ner

Arduino/libraries/Adafruit_GFX_Library/Fonts

kopie­ren.

So sieht es auf einem TFT mit 320×240 Pixeln aus:

Zusätzliche Schriften

Die Biblio­the­ken U8g2_for_Adafruit_GFX/U8g2_for_TFT_eSPI bie­ten eine Viel­zahl von Schrif­ten in ver­schie­de­nen Grö­ßen. Am Namen der Schrift­art kannst du able­sen wel­che ASCII-Zei­chen dar­ge­stellt wer­den kön­nen.

u8g2_for_AdafruitGFX Zeichensatz

Zei­chen­satzBeschrei­bung
rASCII-Zei­chen zwi­schen 30 und 127
ent­hält alle Zah­len, Groß und Klein­buch­sta­ben
fASCII-Zei­chen zwi­schen 30 und 255
erwei­ter­ter Zei­chen­satz mit Sym­bo­len und Umlau­ten
uASCII-Zei­chen zwi­schen 32 und 95
Groß­buch­sta­ben
nASCII-Zei­chen zwi­schen 43 bis 58
Zah­len und * + , . / :

Bitmaps darstellen

Array des Bit­maps erstel­len

Bit­maps kön­nen nicht direkt auf dem Dis­play dar­ge­stellt wer­den, sie müs­sen als Array hexa­de­zi­ma­ler Wer­te vor­lie­gen.
Wäh­le oder erstel­le ein Bild mit den maxi­ma­len Maßen 200×200 Pixeln. Das Online-Tool 🔗https://javl.github.io/image2cpp/ wan­delt das Bild in ein Array um.

Der Spei­cher­platz des Ardui­no UNO reicht für das Pro­gramm nicht aus.

Das erstell­te Array muss in den Kopf des Pro­gramms ein­ge­fügt wer­den.
draw­Bit­map zeigt das Bild an.

Ab Zei­le 4 musst du die ent­spre­chen­den SPI-Pins des ver­wen­de­ten Mikro­con­trol­lers aus­wäh­len.

GFXcanvas – Flackern des TFTs vermeiden

Soll ein schnell wech­seln­der Text an der glei­chen Posi­ti­on dar­ge­stellt wer­den, gibt es zwei Pro­ble­me:

  • der geän­der­te Text ist län­ger oder kür­zer als der vor­he­ri­ge, dadurch über­lap­pen sich die Buch­sta­ben
  • der neue Text ver­ur­sacht ein Fla­ckern des TFTs

Das ers­te Pro­blem lässt sich lösen indem der bis­he­ri­ge Text durch ein aus­ge­füll­tes Recht­eck „gelöscht“ wird. Das ver­hin­dert aller­dings nicht das Fla­ckern des TFTs.

Das Fla­ckern lässt sich durch Can­vas besei­ti­gen. Hier­bei wird ein Bild der dar­zu­stel­len­den Daten im Spei­cher ange­legt, auf Anfor­de­rung wird die­ses Bild auf dem TFT dar­ge­stellt.

Im Film wird der blau dar­ge­stell­te Bereich mit GFX­can­vas erzeugt, im roten Bereich wird der Text zunächst durch ein rotes Recht­eck „gelöscht“ und anschlie­ßend neu geschrie­ben. Als Text wird die mit ⇒mil­lis() gemes­se­ne Zeit, die seit dem Start des Pro­gramms ver­gan­gen ist, dar­ge­stellt.
Man kann den Unter­schied gut erken­nen.

Jedes Objekt vom Typ GFXcanvas1 benö­tigt pro ein Bit pro Pixel. Wie im Bei­spiel eines Bereichs mit 240×150 Pixeln sind das 36.000 Bits, das ent­spricht 4.500 Bytes oder 4,5 kilo­Bytes. Der Spei­cher­platz eines Ardui­no UNO R3 reicht hier­für nicht aus.


Quellen


Letzte Aktualisierung: Jan. 31, 2026 @ 9:57

Inhalt