Biblio­thek TFT_eSPI für ESP-Mikrocontroller

Lese­zeit: 5 Minu­ten
Inhalt

Die Biblio­thek TFT_eSPI stellt aus­schließ­lich für ESP-Mikro­con­trol­ler (ESP32-Wroom und ESP8266) eine gemein­sa­me Biblio­thek für TFT-Dis­plays in ver­schie­de­nen For­ma­ten bereit. Weil die TFT-Dis­plays über Steu­er­da­tei­en ange­spro­chen wer­den, sind kei­ne indi­vi­du­el­len Biblio­the­ken mehr notwendig.

Es gibt Schrift­ar­ten in ver­schie­de­nen Grö­ßen, aber lei­der unter­stüt­zen sie nur den ein­fa­chen ASCII-Zei­chen­satz. Die Dar­stel­lung von Umlau­ten ist nicht mög­lich.
Abhil­fe schafft hier die Biblio­thek ⇒u8g2_for_TFT_eSPI

Gra­fi­sche Ele­men­te (Wid­gets) kön­nen z. B. Mess­da­ten gra­fisch darstellen.

Alle gra­fi­schen Funk­tio­nen der Adafrui­t_G­FX-Biblio­thek ste­hen zur Verfügung.

Funk­tio­nen der Biblio­thek Adafruit_GFX_Library

Schlüs­sel­wortPara­me­terAkti­on
width();Bild­schirm­brei­te feststellen
height();Bild­schirm­hö­he feststellen
setRotation(Richtung);Rich­tung = 0 → nicht drehen
Rich­tung = 1 → 90° drehen
Rich­tung = 2 → 180° drehen
Rich­tung = 3 → 270 ° drehen		Bild­schirm ausrichten
fillScreen(Farbe);Bild­schirm­hin­ter­grund
drawLine(StartX, Star­tY, End­eX, EndeY, Farbe);Linie zeich­nen
drawFastHLine(StartX, Star­tY, Län­ge, Farbe);hori­zon­ta­le Linie zeichnen
drawFastVLine(StartX, Star­tY, Län­ge, Farbe);ver­ti­ka­le Linie zeichnen
drawRect(StartX, Star­tY,, Brei­te, Höhe, Farbe);Recht­eck zeichnen
drawRoundRect(StartX, Star­tY, Brei­te, Höhe, Ecken­ra­di­us, Farbe);abge­run­de­tes Recht­eck zeichnen
fillRoundRect(StartX, Star­tY, Brei­te, Höhe, Ecken­ra­di­us, Füllfarbe);aus­ge­füll­tes abge­run­de­tes Recht­eck zeichnen
fillRect(StartX, Star­tY, Brei­te, Höhe, Füllfarbe);aus­ge­füll­tes Recht­eck zeichnen
drawCircle(MittelpunktX, Mit­tel­punk­tY, Radi­us, Farbe);Kreis zeich­nen
fillCircle(MittelpunktX, Mit­tel­punk­tY, Radi­us, Füllfarbe);Aus­ge­füll­ten Kreis zeichnen
drawTriangle(x1, y1, x2, y2, x3, y3, Farbe);Drei­eck zeichnen:
x1, y1: 1.Punkt
x2, y2: 2.Punkt
x3, y3: 3.Punkt
fillTriangle(x1, y1, x2, y2, x3, y3, Füllfarbe);aus­ge­füll­tes Drei­eck zeichnen:
x1, y1: 1.Punkt
x2, y2: 2.Punkt
x3, y3: 3.Punkt
setCursor(x, y);Cur­sor setzen
setTextSize(Textgröße);Text­grö­ßeText­grö­ße bestimmen
setTextColor(Farbe);Text­far­be setzen
print("Text"); println("Text");Text schrei­ben
setTextWrap(true/false);fal­se → Text fließt über den Rand des TFTs hinaus
true → Text wird am Ende umgebrochen		Zei­len­um­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		belie­bi­ge Misch­far­ben erstellen
drawBitmap(PosX, PosY, Array, Array­GrößeX, Array­Grö­ßeY, Farbe);Array als Bild darstellen

Biblio­thek installieren

Die Steu­er­da­tei­en

User_Setup.h

Die­se Datei ent­hält die Defi­ni­ti­on des ver­wen­de­ten Trei­bers und die ⇒SPI-Pins des Mikro­con­trol­lers. Sie muss ent­spre­chend ange­passt wer­den.
Du musst beim ver­wen­de­ten Trei­ber und beim ver­wen­de­ten Mikro­con­trol­ler die Kom­men­tar­zei­chen (//) entfernen.

// TFT 160x128
// #define ST7735_DRIVER
// #define TFT_WIDTH  128
// #define TFT_HEIGHT 160
// #define ST7735_BLACKTAB

// TFT 320x240
// #define ILI9341_DRIVER
// #define TFT_WIDTH  240
// #define TFT_HEIGHT 320

// TFT 480x320
// #define ST7796_DRIVER
// #define TFT_WIDTH  320
// #define TFT_HEIGHT 480

// ESP32-Wroom
// #define TFT_CS    5
// #define TFT_DC    2
// #define TFT_RST   4

// Wemos D1/NodeMCU
// #define TFT_CS       D8
// #define TFT_RST      D1
// #define TFT_DC       D2

// Schriftarten
// Font 2-4: Buchstaben, Zahlen und Satzzeichen, keine Umlaute
// Font 6-8: Zahlen und Satzzeichen
#define LOAD_FONT2
#define LOAD_FONT4
#define LOAD_FONT6
#define LOAD_FONT7
#define LOAD_FONT8

#define SMOOTH_FONT

User_Setup_Select.h

Die­se Datei ent­hält die den TFT-Dis­plays zuge­ord­ne­te Trei­ber. Ich habe mich hier auf die Dis­plays mit 160×128, 320×240 und 480×320 beschränkt.

#include "User_Setup.h"

// 320x240
#if defined (ILI9341_DRIVER) || defined(ILI9341_2_DRIVER) || defined (ILI9342_DRIVER)
#include <TFT_Drivers/ILI9341_Defines.h>
#define  TFT_DRIVER 0x9341

// 160x128
#elif defined (ST7735_DRIVER)
#include <TFT_Drivers/ST7735_Defines.h>
#define  TFT_DRIVER 0x7735
#define ST7735_BLACKTAB

// 480x320
#elif defined (ST7796_DRIVER)
#include "TFT_Drivers/ST7796_Defines.h"
#define TFT_DRIVER 0x7796

#endif

Neben der Stan­dard­kon­fi­gu­ra­ti­on in der Datei User_Setup.h kannst du auch indi­vi­du­el­le Kon­fi­gu­ra­tio­nen anle­gen. Weil mit jedem Update der Biblio­thek alle Datei­en über­schrie­ben wer­den, ist es sinn­voll, die­se indi­vi­du­el­len Kon­fi­gu­ra­tio­nen in einem ande­ren Ord­ner abzu­le­gen. Ich habe mich für den Ord­ner libra­ri­es (Unter­ord­ner des Ord­ners Ardui­no, hier lie­gen alle instal­lier­ten Biblio­the­ken) entschieden.

Ich habe dort einen Ord­ner TFT_eSPI_Konfiguration erstellt und die indi­vi­du­el­len Kon­fi­gu­ra­tio­nen und die geän­der­te Datei User_Setup_Select.h dort abge­legt. Beim nächs­ten Update gehen die Kon­fi­gu­ra­ti­ons­da­tei­en im Ord­ner libraries/TFT_eSPI zwar ver­lo­ren, sie kön­nen aber aus dem Ord­ner libra­ri­es/TFT-eSPI_­Kon­fi­gu­ra­ti­on leicht wie­der zurück kopiert werden.

ESP32-Wroom mit TFT 160×128 Pixeln

Datei: ESP32-Wroom_TFT_160x128

// TFT 160x128
#define ST7735_DRIVER
#define TFT_WIDTH  128
#define TFT_HEIGHT 160
#define ST7735_BLACKTAB

// SPI-Pins Wemos D1 Mini/NodeMCU
#define TFT_CS    5
#define TFT_DC    2
#define TFT_RST   4

// Schriftarten
// Font 2-4: Buchstaben, Zahlen und Satzzeichen, keine Umlaute
// Font 6-8: Zahlen und Satzzeichen
#define LOAD_FONT2
#define LOAD_FONT4
#define LOAD_FONT6
#define LOAD_FONT7
#define LOAD_FONT8

#define SMOOTH_FONT

Wemos D1 Mini/NodeMCU mit TFT 160×128 Pixeln

Datei: Wemos-D1_TFT_160x128.h

// TFT 160x128
#define ST7735_DRIVER
#define TFT_WIDTH  128
#define TFT_HEIGHT 160
#define ST7735_BLACKTAB

// SPI-Pins Wemos D1
#define TFT_CS       D8
#define TFT_RST      D1
#define TFT_DC       D2

// Schriftarten
// Font 2-4: Buchstaben, Zahlen und Satzzeichen, keine Umlaute
// Font 6-8: Zahlen und Satzzeichen
#define LOAD_FONT2
#define LOAD_FONT4
#define LOAD_FONT6
#define LOAD_FONT7
#define LOAD_FONT8

#define SMOOTH_FONT

ESP32-Wroom mit TFT 320×240 Pixeln

Datei: ESP32-Wroom_TFT_320x240.h"

// TFT 320x240
#define ILI9341_DRIVER
#define TFT_WIDTH  240
#define TFT_HEIGHT 320

// SPI-Pins ESP32-Wroom
#define TFT_CS    5
#define TFT_DC    2
#define TFT_RST   4

// Schriftarten
// Font 2-4: Buchstaben, Zahlen und Satzzeichen, keine Umlaute
// Font 6-8: Zahlen und Satzzeichen
#define LOAD_FONT2
#define LOAD_FONT4
#define LOAD_FONT6
#define LOAD_FONT7
#define LOAD_FONT8

#define SMOOTH_FONT

Wemos D1 Mini/NodeMCU mit TFT 320×240 Pixeln

Datei: Wemos-D1_TFT_320x240.h

// TFT 480x320
#define ILI9341_DRIVER
#define TFT_WIDTH  240
#define TFT_HEIGHT 320

// SPI-Wemos D1/NodeMCU
#define TFT_CS       D8
#define TFT_RST      D1
#define TFT_DC       D2

// Schriftarten
// Font 2-4: Buchstaben, Zahlen und Satzzeichen, keine Umlaute
// Font 6-8: Zahlen und Satzzeichen
#define LOAD_FONT2
#define LOAD_FONT4
#define LOAD_FONT6
#define LOAD_FONT7
#define LOAD_FONT8

#define SMOOTH_FONT

ESP32-Wroom mit TFT 480×320 Pixeln

Datei: ESP32-Wroom_TFT_480x320.h

// TFT 480x320
#define ST7796_DRIVER
#define TFT_WIDTH  320
#define TFT_HEIGHT 480

// SPI-Pins ESP32-Wroom
#define TFT_CS    5
#define TFT_DC    2 
#define TFT_RST   4

// Schriftarten
// Font 2-4: Buchstaben, Zahlen und Satzzeichen, keine Umlaute
// Font 6-8: Zahlen und Satzzeichen
#define LOAD_FONT2
#define LOAD_FONT4
#define LOAD_FONT6
#define LOAD_FONT7
#define LOAD_FONT8

#define SMOOTH_FONT

Wemos D1 Mini/NodeMCU mit TFT 480×320 Pixeln

Datei: Wemos-D1_TFT_480x320.h

// TFT 480x320
#define ST7796_DRIVER
#define TFT_WIDTH  320
#define TFT_HEIGHT 480

// SPI-Wemos D1/NodeMCU
#define TFT_CS       D8
#define TFT_RST      D1
#define TFT_DC       D2

// Schriftarten
// Font 2-4: Buchstaben, Zahlen und Satzzeichen, keine Umlaute
// Font 6-8: Zahlen und Satzzeichen
#define LOAD_FONT2
#define LOAD_FONT4
#define LOAD_FONT6
#define LOAD_FONT7
#define LOAD_FONT8

#define SMOOTH_FONT

Die Datei User_Setup_Select.h muss geän­dert wer­den. Statt der Stan­dard­da­tei User_Setup.h muss die indi­vi­du­el­le Kon­fi­gu­ra­ti­on ein­ge­bun­den werden. 

// individuelle Konfigurationen
// #include "../TFT_eSPI_Konfiguration/ESP32-Wroom_TFT_480x320.h"
// #include "../TFT_eSPI_Konfiguration/ESP32-Wroom_TFT_320x240.h"
// #include "../TFT_eSPI_Konfiguration/ESP32-Wroom_TFT_160x128.h"
// #include "../TFT_eSPI_Konfiguration/Wemos-D1_TFT_480x320.h"
// #include "../TFT_eSPI_Konfiguration/Wemos-D1_TFT_320x240.h"
// #include "../TFT_eSPI_Konfiguration/Wemos-D1_TFT_160x128.h"

// Standard-Konfiguration
// #include "User_Setup.h"

// 320x240
#if defined (ILI9341_DRIVER) || defined(ILI9341_2_DRIVER) || defined (ILI9342_DRIVER)
#include <TFT_Drivers/ILI9341_Defines.h>
#define  TFT_DRIVER 0x9341

// 160x128
#elif defined (ST7735_DRIVER)
#include <TFT_Drivers/ST7735_Defines.h>
#define  TFT_DRIVER 0x7735
#define ST7735_BLACKTAB

// 480x320
#elif defined (ST7796_DRIVER)
#include "TFT_Drivers/ST7796_Defines.h"
#define  TFT_DRIVER 0x7796

#endif

Bei­spiel: gra­fi­sche Funktionen

Das Pro­gramm kann für alle Kon­fi­gu­ra­tio­nen ver­wen­det werden.

#include "TFT_eSPI.h"

TFT_eSPI tft = TFT_eSPI();

// Farben
#define SCHWARZ     0x0000
#define WEISS       0xFFFF
#define BLAU        0x001F
#define ROT         0xF800
#define GRUEN       0x07E0
#define CYAN        0x07FF
#define MAGENTA     0xF81F
#define GELB        0xFFE0
#define BRAUN       0x9A60
#define GRAU        0x7BEF
#define GRUENGELB   0xB7E0
#define DUNKELCYAN  0x03EF
#define ORANGE      0xFDA0
#define PINK        0xFE19
#define BORDEAUX    0xA000
#define HELLBLAU    0x867D
#define VIOLETT     0x915C
#define SILBER      0xC618
#define GOLD        0xFEA0

void setup() 
{
  tft.init();
}

void loop()
{
  tft.fillScreen(SCHWARZ);

  tft.setTextSize(1);
  tft.setCursor(1, 5);
  tft.setTextColor(BLAU);
  tft.print("Text");
  delay(500);

  tft.setTextSize(2);
  tft.setCursor(1, 20);
  tft.setTextColor(ORANGE);
  tft.print("Text");
  delay(500);

  tft.setTextSize(3);
  tft.setCursor(1, 40);
  tft.setTextColor(GRUEN);
  tft.print("Text");
  delay(500);

  tft.setTextSize(5);
  tft.setCursor(1, 70);
  tft.setTextColor(ROT);
  tft.print("Text");
  delay(500);

  delay(2000);


  // zufällige Pixel
  tft.fillScreen(SCHWARZ);
  for  (int i = 0; i < 700; i++)
  {
    int PixelX = random(1, tft.width());
    int PixelY = random(1, tft.height());
    tft.drawPixel(PixelX, PixelY, tft.color565(random(255),random(255),random(255)));
    delay(5);
  }
  delay(2000);

  // Linien ziehen
  tft.fillScreen(SCHWARZ);
  for (int i = 1; i < tft.height(); i+=10)
  {
    tft.drawLine(1, i, tft.width(), i, ORANGE);
  }
  delay(2000);

  // Kreise vom Mittelpunkt zeichnen
  tft.fillScreen(SCHWARZ);
  for (int i = 1; i < tft.width() / 2; i+=10)
  {
    tft.fillCircle(tft.width() / 2, tft.height() / 2, tft.width() / 2 - i, tft.color565(random(255),random(255),random(255)));
    delay(50);
  }
  delay(2000);

  // Rechtecke zeichnen
  tft.fillScreen(SCHWARZ);
  for (int i = 1; i < tft.width(); i+=10)
  {
    tft.drawRect(tft.width() / 2 - i / 2, tft.height() / 2 - i / 2 , i, i, tft.color565(random(255),random(255),random(255)));
  }
  delay(2000);

   // ausgefüllte Rechtecke zeichnen
  tft.fillScreen(SCHWARZ);
  for (int i = 1; i < tft.width() / 2; i+=10)
  {
    tft.fillRect(i, i, i, i, tft.color565(random(ROT),random(GRUEN),random(BLAU)));
    delay(50);
  }
  delay(2000);

  // Dreiecke
  tft.fillScreen(SCHWARZ);
  for (int i = 1; i <tft.width(); i+=10)
  {
    tft.fillTriangle(i, i, 100, 100, 1, tft.width(), tft.color565(random(255),random(255),random(255)));
    delay(50);
  }
}

Schrif­ten mit der Biblio­thek u8g2_for_TFT_eSPI

Die Biblio­thek u8g2_for_TFT_eSPI kann Umlau­te und Son­der­zei­chen dar­stel­len.
Sie nutzt die 🔗Schrif­ten der Biblio­thek u8g2.

An der Endung der Schrift­art kannst du erken­nen, wel­cher Zei­chen­satz unter­stützt wird.

u8g2_for_AdafruitGFX Zei­chen­satz

Zei­chen­satzBeschrei­bung
rASCII-Zei­chen zwi­schen 30 und 127
ent­hält alle Zah­len, Groß und Kleinbuchstaben
fASCII-Zei­chen zwi­schen 30 und 255
erwei­ter­ter Zei­chen­satz mit Sym­bo­len und Umlauten
uASCII-Zei­chen zwi­schen 32 und 95 
Großbuchstaben
nASCII-Zei­chen zwi­schen 30 und 39
Zah­len und Satzzeichen
Ansicht auf einem 3,5 Zoll TFT

Die Biblio­thek kann nicht über die Biblio­theks­ver­wal­tung instal­liert wer­den, sie muss heruntergeladen 

https://​git​hub​.com/​B​o​d​m​e​r​/​U​8​g​2​_​f​o​r​_​T​F​T​_​e​SPI

und mit

Sketch -> Biblio­thek ein­bin­den -> zip-Biblio­thek hinzufügen

instal­liert werden.

Das Pro­gramm:


#include "TFT_eSPI.h"

// https://github.com/Bodmer/U8g2_for_TFT_eSPI
#include "U8g2_for_TFT_eSPI.h"


// Objekt der Bibliothek TFT_eSPI erstellen
TFT_eSPI tft = TFT_eSPI();

// Objekt für Schriften von U8g2 (u8g2Schriften)
U8g2_for_TFT_eSPI u8g2Schriften;

void setup() 
{
  // Schriften von u8g2 tft zuordnen
  u8g2Schriften.begin(tft);

  // tft starten
  tft.init();

  // wenn die Farben invertiert sind
  // weiß = schwarz, schwarz = weiss ...
  // wenn nicht: Zeile mit // versehen
  // tft.invertDisplay(1);

  tft.setRotation(1);
  tft.fillScreen(TFT_BLACK);
 
  u8g2Schriften.setCursor(5, 55);
  u8g2Schriften.setForegroundColor(TFT_WHITE);
  u8g2Schriften.setBackgroundColor(TFT_BLACK);

  u8g2Schriften.setFont(u8g2_font_inb53_mf);
  u8g2Schriften.print("Großstädte");

  // Trennlinien
  tft.drawFastHLine(1, 60, tft.width(), TFT_WHITE);
  tft.drawFastHLine(1, 61, tft.width(), TFT_WHITE);
  tft.drawFastHLine(1, 62, tft.width(), TFT_WHITE);

  u8g2Schriften.setFont(u8g2_font_inb30_mf);
  u8g2Schriften.setCursor(5, 120);
  u8g2Schriften.print("München");

  u8g2Schriften.setCursor(5, 180);
  u8g2Schriften.print("Düsseldorf");

  u8g2Schriften.setCursor(5, 240);
  u8g2Schriften.print("Köln");
}

void loop() 
{
   // nichts zu tun, das Programm läuft nur einmal
}

Letzte Aktualisierung: März 22, 2025 @ 10:24