Biblio­thek TFT_eSPI für ESP-Mikrocontroller

Lese­zeit: 8 Minu­ten

Die Biblio­thek TFT_eSPI stellt 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 für das Dis­play und beim ver­wen­de­ten Mikro­con­trol­ler die Kom­men­tar­zei­chen (//) entfernen.

// verwendeter Treiber
// 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-2432S028R
// #define ILI9341_2_DRIVER
// #define TFT_WIDTH  240
// #define TFT_HEIGHT 320
// #define TFT_BACKLIGHT_ON HIGH

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

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

// SPI-Pins: ESP32-2432S028R
// #define TFT_MOSI 13
// #define TFT_SCLK 14
// #define TFT_CS   15
// #define TFT_DC   2
// #define TFT_RST -1
// #define TFT_BL   21
// #define SPI_FREQUENCY  55000000
// #define SPI_READ_FREQUENCY  20000000

// ESP32-2432S028R Touch-Pins
// #define TOUCH_IRQ 36
// #define TOUCH_MOSI 32
// #define TOUCH_MISO 39
// #define TOUCH_CLK 25
// #define TOUCH_CS 33
// #define SPI_TOUCH_FREQUENCY  2500000

// Schriftarten
// Font 2-4: ASCII-Zeichen bis 127: Buchstaben, Zahlen und Satzzeichen, keine Umlaute
// Font 6-8: Zahlen .-
#define LOAD_FONT2
#define LOAD_FONT4
#define LOAD_FONT6
#define LOAD_FONT7
#define LOAD_FONT8
#define LOAD_GFXFF
#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

// 320x240
#elif defined (ST7789_DRIVER)
#include <TFT_Drivers/ST7789_Defines.h>
#define TFT_DRIVER 0x7789

// 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 ESP32-Wroom
#define TFT_CS    5
#define TFT_DC    2
#define TFT_RST   4

// Schriftarten
// Font 2-4: ASCII-Zeichen bis 127: Buchstaben, Zahlen und Satzzeichen, keine Umlaute
// Font 6-8: Zahlen .-
#define LOAD_FONT2
#define LOAD_FONT4
#define LOAD_FONT6
#define LOAD_FONT7
#define LOAD_FONT8
#define LOAD_GFXFF
#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/NodeMCU
#define TFT_CS       D8
#define TFT_RST      D1
#define TFT_DC       D2

// Schriftarten
// Font 2-4: ASCII-Zeichen bis 127: Buchstaben, Zahlen und Satzzeichen, keine Umlaute
// Font 6-8: Zahlen .-
#define LOAD_FONT2
#define LOAD_FONT4
#define LOAD_FONT6
#define LOAD_FONT7
#define LOAD_FONT8
#define LOAD_GFXFF
#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: ASCII-Zeichen bis 127: Buchstaben, Zahlen und Satzzeichen, keine Umlaute
// Font 6-8: Zahlen .-
#define LOAD_FONT2
#define LOAD_FONT4
#define LOAD_FONT6
#define LOAD_FONT7
#define LOAD_FONT8
#define LOAD_GFXFF
#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-Pins Wemos D1/NodeMCU
#define TFT_CS       D8
#define TFT_RST      D1
#define TFT_DC       D2

// Schriftarten
// Font 2-4: ASCII-Zeichen bis 127: Buchstaben, Zahlen und Satzzeichen, keine Umlaute
// Font 6-8: Zahlen .-
#define LOAD_FONT2
#define LOAD_FONT4
#define LOAD_FONT6
#define LOAD_FONT7
#define LOAD_FONT8
#define LOAD_GFXFF
#define SMOOTH_FONT

ESP32-Wroom mit TFT 480×320 Pixeln

Datei: ESP32-Wroom_TFT_480x320.h

// Treiber TFT
#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

// Farben sind invertiert: Schwarz = weiß
#define TFT_INVERSION_ON

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

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-Pins Wemos D1/NodeMCU
#define TFT_CS       D8
#define TFT_RST      D1
#define TFT_DC       D2

// Farben sind invertiert: Schwarz = weiß
#define TFT_INVERSION_ON

// Schriftarten
// Font 2-4: ASCII-Zeichen bis 127: Buchstaben, Zahlen und Satzzeichen, keine Umlaute
// Font 6-8: Zahlen .-
#define LOAD_FONT2
#define LOAD_FONT4
#define LOAD_FONT6
#define LOAD_FONT7
#define LOAD_FONT8
#define LOAD_GFXFF
#define SMOOTH_FONT

ESP32-2432S028 (ILI9341)

Datei ESP32-2432S028_ILI9341.h

// Treiber TFT
#define ILI9341_2_DRIVER
#define TFT_WIDTH  240
#define TFT_HEIGHT 320
#define TFT_BACKLIGHT_ON HIGH

// Farbreihenfolge statt RGB BGR
// #define TFT_RGB_ORDER TFT_BGR

// Farben sind invertiert: Schwarz = weiß
// #define TFT_INVERSION_ON

#define TFT_INVERSION_OFF

// SPI-Pins
#define TFT_MOSI 13
#define TFT_SCLK 14
#define TFT_CS   15
#define TFT_DC    2
#define TFT_RST  -1
#define TFT_BL   21

#define SPI_FREQUENCY  55000000
#define SPI_READ_FREQUENCY  20000000

// Touch
#define TOUCH_IRQ 36
#define TOUCH_MOSI 32
#define TOUCH_MISO 39
#define TOUCH_CLK 25
#define TOUCH_CS 33
#define SPI_TOUCH_FREQUENCY  2500000

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

ESP32-2432S028 (ST7789)

Datei ESP32-2432S028_ST7789.h

// Treiber TFT
#define ST7789_DRIVER
#define TFT_WIDTH  240
#define TFT_HEIGHT 320
#define TFT_BACKLIGHT_ON HIGH

// SPI-Pins
// SPI-Pins
#define TFT_MOSI 13
#define TFT_SCLK 14
#define TFT_CS   15
#define TFT_DC    2
#define TFT_RST  -1
#define TFT_BL   21

// Farbreihenfolge statt RGB BGR
#define TFT_RGB_ORDER TFT_BGR

// Farben sind invertiert: Schwarz = weiß
// #define TFT_INVERSION_OFF
#define TFT_INVERSION_ON

#define SPI_FREQUENCY  55000000
#define SPI_READ_FREQUENCY  20000000

// Touch
#define TOUCH_IRQ 36
#define TOUCH_MOSI 32
#define TOUCH_MISO 39
#define TOUCH_CLK 25
#define TOUCH_CS 33
#define SPI_TOUCH_FREQUENCY  2500000

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

ESP32-JC2432W328C_ST7789 (ST7789)

Datei ESP32-JC2432W328C_ST7789.h

// Treiber TFT
#define ST7789_DRIVER
#define TFT_WIDTH  240
#define TFT_HEIGHT 320
#define TFT_BACKLIGHT_ON HIGH

// SPI-Pins
#define ESP32_DMA
#define TFT_MOSI 13
#define TFT_SCLK 14
#define TFT_CS   15
#define TFT_DC    2
#define TFT_RST  -1
#define TFT_BL   27

// Farbreihenfolge statt RGB BGR
#define TFT_RGB_ORDER TFT_BGR

// Farben sind invertiert: Schwarz = weiß
// #define TFT_INVERSION_ON

#define TFT_INVERSION_OFF


#define SPI_FREQUENCY  55000000
#define SPI_READ_FREQUENCY  20000000

// Touch
#define TOUCH_IRQ 36
#define TOUCH_MOSI 32
#define TOUCH_MISO 39
#define TOUCH_CLK 25
#define TOUCH_CS 33
#define SPI_TOUCH_FREQUENCY  2500000

// 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
#define LOAD_GFXFF

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 wer­den. Du musst bei der ver­wen­de­ten Kon­fi­gu­ra­ti­on die Kom­men­tar­zei­chen (//) entfernen.

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

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

// TFT-Treiber
// 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

#elif defined (ST7789_DRIVER)
#include <TFT_Drivers/ST7789_Defines.h>
#define TFT_DRIVER 0x7789

#elif defined (ST7796_DRIVER)
#include <TFT_Drivers/ST7796_Defines.h>
#define TFT_DRIVER 0x7789

#endif

Bei­spiel: inter­ne Fonts

Font 2-4: Buch­sta­ben, Zah­len und Satz­zei­chen, kei­ne Umlau­te
Font 6-8: Zahlen .-

#include "TFT_eSPI.h"

TFT_eSPI tft = TFT_eSPI();

void setup() 
{
  tft.init();
  tft.setRotation(1);
  tft.fillScreen(TFT_BLACK);
  tft.setTextColor(TFT_GREEN);
  tft.setCursor(0, 10);
  
  tft.setTextFont(2);
  tft.println("abcd ABCD 1234");

  tft.setTextColor(TFT_YELLOW);    
  tft.setTextFont(4);
  tft.println("abcd ABCD 1234");

  tft.setTextColor(TFT_BLUE); 
  tft.setTextFont(6);
  tft.println(1234);
  
  tft.setTextColor(TFT_BROWN); 
  tft.setTextFont(7);
  tft.println(1234);

  tft.setTextColor(TFT_GOLD); 
  tft.setTextFont(8);
  tft.println(1234);
  
}

void loop() 
{
  // bleibt leer, das Programm läuft nur einmal
}

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 Free_Fonts

Die Biblio­thek TFT_eSPI stellt eine 🔗Rei­he von Schrif­ten zur Ver­fü­gung. Sie kön­nen aller­dings nur den Zei­chen­satz bis 127 - also kei­ne Umlau­te - dar­stel­len.
Wei­te­re Schrif­ten kön­nen mit einem 🔗Gene­ra­tor für Adafruit GFX-Schrif­ten erstellt wer­den. GFX-Schrif­ten aus True­type-Schrif­ten kön­nen auch damit erstellt werden.

Ich habe im Ordner/Arduino/libraries/TFT_eSPI_Konfiguration einen Ord­ner Fonts erstellt und die Datei Free_Fonts.h dort abge­legt. Natür­lich kannst du auch einen belie­bi­gen ande­ren Ord­ner ver­wen­den, aller­dings musst du dann im Pro­gramm den Pfad anpassen.

Die Free Fonts ent­hal­ten die Schrift­ar­ten Mono, Serif und Sans Serif in den Schrift­grö­ßen bis 24 Punk­ten. Ande­re Schrift­grö­ßen müs­sen in das gewähl­te Ver­zeich­nis kopiert wer­den und mit #include ein­ge­bun­den wer­den. Natür­lich kannst du auch ein Kür­zel für die Schrift erstellen.

Bei­spiel:

#define FS9 &FreeSerif9pt7b
#define FS12 &FreeSerif12pt7b
#define FS18 &FreeSerif18pt7b
#define FS24 &FreeSerif24pt7b

Die Schrif­ten kön­nen mit ihrem Kür­zel oder mit ihrem voll­stän­di­gem Namen ein­ge­bun­den werden.

Anzei­ge auf einem ESP32-2432S028R
#include "TFT_eSPI.h"

// alle Schriften einbinden
// Quelle: 
// https://github.com/Bodmer/TFT_eSPI/blob/master/examples/320%20x%20240/All_Free_Fonts_Demo/Free_Fonts.h
#include "../TFT_eSPI_Konfiguration/Fonts/Free_Fonts.h" 

// mit https://rop.nl/truetype2gfx/ erstellte Schriften
#include "../TFT_eSPI_Konfiguration/Fonts/FreeSerif32pt7b.h"
#include "../TFT_eSPI_Konfiguration/Fonts/GeosansLight20pt7b.h"
#include "../TFT_eSPI_Konfiguration/Fonts/FreeSans42pt7b.h"

#define GFXFF 1

TFT_eSPI tft = TFT_eSPI();

void setup() 
{
    tft.begin();
    tft.setRotation(1);
    tft.fillScreen(TFT_BLACK);      
    tft.setTextColor(TFT_YELLOW, TFT_BLACK);

    tft.setFreeFont(FF18);
    tft.setCursor(10, 30);
    tft.print("Sans 12");

    tft.setFreeFont(FF3);
    tft.setCursor(10,65);
    tft.print("Mono 18");

    tft.setFreeFont(&FreeSerif32pt7b);
    tft.setCursor(10, 115);
    tft.print("Serif 32");
    
    tft.setFreeFont(&GeosansLight20pt7b);
    tft.setCursor(10, 160);
    tft.print("GesansLight ttf");

    tft.setFreeFont(&FreeSans42pt7b);
    tft.setCursor(10, 230);
    tft.print("Sans 42");
}

void loop() 
{
  // bleibt leer, Programm läuft nur einmal
}

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
}

Quel­len


Letzte Aktualisierung: Juni 17, 2025 @ 7:01