Lesezeit: 10 Minuten

Inhalt
Ziele des Projekts
- Einführung in die Bibliothek U8g2_for_Adafruit_GFX
- Darstellung der Uhrzeit in großer Schrift
Verwendete Hardware
- TFT-Display mit 128×160 Pixeln
- TFT-Display mit 240×320 Pixeln
- ESP32-Wroom mit integriertem TFT-Display mit 170×320 Pixeln (IdeaSpark)
So sieht es aus:



Konfiguration der Mikrocontroller
Die Bibliothek U8g2_for_Adafruit_GFX
Die Bibliothek U8g2_for_Adafruit_GFX ist eine Ergänzung der von Adafruit entwickelten Grafikbibliothek. Sie stellt Funktionen für die Darstellung von Text zur Verfügung.
Außerdem stehen eine Vielzahl von 🔗Schriften bereit.
Schlüsselwort | Aktion |
---|---|
setFontDirection(Parameter); | 0: von links nach rechts (Standard) 1: von rechts nach links |
setForegroundColor(Farbe); | Vordergrundfarbe Name wird von der verwendeten TFT-Bibliothek bestimmt |
setBackgroundColor(Farbe) | Hintergrundfarbe |
setFont(Schritart); | Schftart festlegen |
setCursor(x, y); | Cursor setzen |
print(Text); | Text schreiben |
Für die Verwendung der Bibliothek sind verschiedene Schritte notwendig:
Zunächst muss die benötigte Bibliothek installiert werden.

- Bibliothek einbinden
- ein Objekt der Bibliothek erstellen
- das Objekt der Bibliothek (u8g2Schriften) wird dem Objekt der Grafikbibliothek (tft) zugeordnet
- jeder Funktion zur Darstellung von Text muss der Name des Objektes (u8g2Schriften) vorangestellt werden
Alle grafischen ⇒Funktionen werden mit dem entsprechenden Objektnamen (tft) eingeleitet.
Beispiel:
// Bibliotheken einbinden
#include "Adafruit_ST7735.h"
#include "U8g2_for_Adafruit_GFX.h"
// Wemos D1 Mini
// #define TFT_CS D8
// #define TFT_RST D1
// #define TFT_DC D2
// XIAO
// #define TFT_CS D7
// #define TFT_RST D1
// #define TFT_DC D2
// Arduino Nano ESP 32
// #define TFT_CS 10
// #define TFT_RST 9
// #define TFT_DC 8
// SPI-Pins ESP32-C6
// #define TFT_CS 18
// #define TFT_RST 3
// #define TFT_DC 2
// ESP32-WROOM
// #define TFT_CS 5
// #define TFT_RST 4
// #define TFT_DC 2
// Objekt der Bibliothek Adafruit_ST7735 erstellen (tft)
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
// Objekt der Bibliothek U8G2_FOR_ADAFRUIT_GFX erstellen (u8g2Schriften)
U8G2_FOR_ADAFRUIT_GFX u8g2Schriften;
void setup()
{
// Schriften von u8g2 tft zuordnen
u8g2Schriften.begin(tft);
// TFT starten schwarzer Hintergrund
tft.initR(INITR_BLACKTAB);
// Rotation anpassen Querformat
tft.setRotation(1);
// TFT mit schwarzer Farbe füllen
tft.fillScreen(ST77XX_BLACK);
u8g2Schriften.setForegroundColor(ST7735_WHITE);
u8g2Schriften.setBackgroundColor(ST7735_BLACK);
// Schriftart festlegen
u8g2Schriften.setFont(u8g2_font_fub42_tf);
// Cursor setzen
u8g2Schriften.setCursor(2, 80);
u8g2Schriften.print("Text");
}
void loop()
{
// nichts zu tun, das Programm läuft nur einmal
}
Das Programm
TFT 128×160 Pixel
Benötigte Bibliothek installieren

Du musst die WiFi-Bibliothek, SPI-Pins des verwendeten Mikrocontrollers und die WiFi-Daten anpassen.
// ESP32
#include "WiFi.h"
// ESP8266
// #include "ESP8266WiFi.h"
#include "time.h"
#include "Adafruit_ST7735.h"
#include "U8g2_for_Adafruit_GFX.h"
// Wemos D1 Mini
// #define TFT_CS D8
// #define TFT_RST D1
// #define TFT_DC D2
// XIAO
// #define TFT_CS D7
// #define TFT_RST D1
// #define TFT_DC D2
// Arduino Nano ESP 32
// #define TFT_CS 10
// #define TFT_RST 9
// #define TFT_DC 8
// SPI-Pins ESP32-C6
// #define TFT_CS 18
// #define TFT_RST 3
// #define TFT_DC 2
// ESP32-WROOM
// #define TFT_CS 5
// #define TFT_RST 4
// #define TFT_DC 2
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
// Objekt u8g2Schriften
U8G2_FOR_ADAFRUIT_GFX u8g2Schriften;
char Router[] = "Router_SSID";
char Passwort[] = "xxxxxxxx";
// NTP-Server aus dem Pool
#define Zeitserver "de.pool.ntp.org"
/*
Liste der Zeitzonen
https://github.com/nayarsystems/posix_tz_db/blob/master/zones.csv
Zeitzone CET = Central European Time -1 -> 1 Stunde zurück
CEST = Central European Summer Time von
M3 = März, 5.0 = Sonntag 5. Woche, 02 = 2 Uhr
bis M10 = Oktober, 5.0 = Sonntag 5. Woche 03 = 3 Uhr
*/
#define Zeitzone "CET-1CEST,M3.5.0/02,M10.5.0/03"
// time_t enthält die Anzahl der Sekunden seit dem 1.1.1970 0 Uhr
time_t aktuelleZeit;
/*
Struktur tm
tm_hour -> Stunde: 0 bis 23
tm_min -> Minuten: 0 bis 59
tm_sec -> Sekunden 0 bis 59
tm_mday -> Tag 1 bis 31
tm_mon -> Monat: 0 (Januar) bis 11 (Dezember)
tm_year -> Jahre seit 1900
tm_yday -> vergangene Tage seit 1. Januar des Jahres
tm_isdst -> Wert > 0 = Sommerzeit (dst = daylight saving time)
*/
tm Zeit;
// Intervall der Zeitmessung
unsigned long Intervall = 2000;
void setup()
{
// Schriften von u8g2 tft zuordnen
u8g2Schriften.begin(tft);
// Zeitzone: Parameter für die zu ermittelnde Zeit
configTzTime(Zeitzone, Zeitserver);
Serial.begin(9600);
// WiFi starten und Verbindung aufbauen
WiFi.begin(Router, Passwort);
while (WiFi.status() != WL_CONNECTED)
{
delay(200);
Serial.print(".");
}
// SSID des Routers anzeigen
Serial.println();
Serial.print("Verbunden mit ");
Serial.println(WiFi.SSID());
// IP anzeigen
Serial.print("IP: ");
Serial.println(WiFi.localIP());
// TFT starten schwarzer Hintergrund
tft.initR(INITR_BLACKTAB);
// Rotation anpassen Querformat
tft.setRotation(1);
}
void loop()
{
// aktuelle Zeit holen
time(&aktuelleZeit);
// localtime_r -> Zeit in die lokale Zeitzone setzen
localtime_r(&aktuelleZeit, &Zeit);
tft.fillScreen(ST77XX_BLACK);
u8g2Schriften.setForegroundColor(ST7735_WHITE);
u8g2Schriften.setFont(u8g2_font_fub42_tf);
u8g2Schriften.setCursor(2, 80);
// Stunde: wenn Stunde < 10 -> 0 davor setzen
if (Zeit.tm_hour < 10)
{
Serial.print("0");
u8g2Schriften.print("0");
}
Serial.print(Zeit.tm_hour);
u8g2Schriften.print(Zeit.tm_hour);
Serial.print(":");
u8g2Schriften.print(":");
// Minuten
// wenn Minute < 10 -> 0 davor setzen
if (Zeit.tm_min < 10)
{
Serial.print("0");
u8g2Schriften.print("0");
}
Serial.println(Zeit.tm_min);
u8g2Schriften.print(Zeit.tm_min);
delay(Intervall);
}
TFT 170×320 Pixel (IdeaSpark)
#include "WiFi.h"
#include "time.h"
#include "Adafruit_ST7789.h"
#include "U8g2_for_Adafruit_GFX.h"
#define TFT_CS 15
#define TFT_RST 4
#define TFT_DC 2
Adafruit_ST7789 tft = Adafruit_ST7789(TFT_CS, TFT_DC, TFT_RST);
// Objekt u8g2Schriften
U8G2_FOR_ADAFRUIT_GFX u8g2Schriften;
char Router[] = "Router_SSID";
char Passwort[] = "xxxxxxx";
// NTP-Server aus dem Pool
#define Zeitserver "de.pool.ntp.org"
/*
Liste der Zeitzonen
https://github.com/nayarsystems/posix_tz_db/blob/master/zones.csv
Zeitzone CET = Central European Time -1 -> 1 Stunde zurück
CEST = Central European Summer Time von
M3 = März, 5.0 = Sonntag 5. Woche, 02 = 2 Uhr
bis M10 = Oktober, 5.0 = Sonntag 5. Woche 03 = 3 Uhr
*/
#define Zeitzone "CET-1CEST,M3.5.0/02,M10.5.0/03"
// time_t enthält die Anzahl der Sekunden seit dem 1.1.1970 0 Uhr
time_t aktuelleZeit;
/*
Struktur tm
tm_hour -> Stunde: 0 bis 23
tm_min -> Minuten: 0 bis 59
tm_sec -> Sekunden 0 bis 59
tm_mday -> Tag 1 bis 31
tm_mon -> Monat: 0 (Januar) bis 11 (Dezember)
tm_year -> Jahre seit 1900
tm_yday -> vergangene Tage seit 1. Januar des Jahres
tm_isdst -> Wert > 0 = Sommerzeit (dst = daylight saving time)
*/
tm Zeit;
unsigned long Intervall = 5000;
void setup()
{
// Schriften von u8g2 tft zuordnen
u8g2Schriften.begin(tft);
// Zeitzone: Parameter für die zu ermittelnde Zeit
configTzTime(Zeitzone, Zeitserver);
Serial.begin(9600);
// WiFi starten und Verbindung aufbauen
WiFi.begin(Router, Passwort);
while (WiFi.status() != WL_CONNECTED)
{
delay(200);
Serial.print(".");
}
// SSID des Routers anzeigen
Serial.println();
Serial.print("Verbunden mit ");
Serial.println(WiFi.SSID());
// IP anzeigen
Serial.print("IP: ");
Serial.println(WiFi.localIP());
// TFT starten
tft.init(170, 320);
// Rotation anpassen Querformat
tft.setRotation(1);
tft.fillScreen(ST77XX_BLACK);
u8g2Schriften.setForegroundColor(ST77XX_WHITE);
u8g2Schriften.setBackgroundColor(ST77XX_BLACK);
u8g2Schriften.setFont(u8g2_font_logisoso92_tn);
}
void loop()
{
// aktuelle Zeit holen
time(&aktuelleZeit);
// localtime_r -> Zeit in die lokale Zeitzone setzen
localtime_r(&aktuelleZeit, &Zeit);
// Bereich der Zeitanzeige mit schwarzem Rechteck füllmn
tft.fillRect(20, 20, tft.width(), 130, ST77XX_BLACK);
// Cursor setzen
u8g2Schriften.setCursor(20, 130);
// Stunde: wenn Stunde < 10 -> 0 davor setzen
if (Zeit.tm_hour < 10)
{
Serial.print("0");
u8g2Schriften.print("0");
}
Serial.print(Zeit.tm_hour);
u8g2Schriften.print(Zeit.tm_hour);
Serial.print(":");
u8g2Schriften.print(":");
// Minuten
// wenn Minute < 10 -> 0 davor setzen
if (Zeit.tm_min < 10)
{
Serial.print("0");
u8g2Schriften.print("0");
}
Serial.println(Zeit.tm_min);
u8g2Schriften.print(Zeit.tm_min);
delay(Intervall);
}
TFT 240×320 Pixel
// ESP32
// #include "WiFi.h"
// ESP8266
#include "ESP8266WiFi.h"
#include "time.h"
#include "Adafruit_ILI9341.h"
#include "U8g2_for_Adafruit_GFX.h"
// Wemos D1 Mini
// #define TFT_CS D8
// #define TFT_RST D1
// #define TFT_DC D2
// XIAO
// #define TFT_CS D7
// #define TFT_RST D1
// #define TFT_DC D2
// Arduino Nano ESP 32
// #define TFT_CS 10
// #define TFT_RST 9
// #define TFT_DC 8
// SPI-Pins ESP32-C6
// #define TFT_CS 18
// #define TFT_RST 3
// #define TFT_DC 2
// ESP32-WROOM
// #define TFT_CS 5
// #define TFT_RST 4
// #define TFT_DC 2
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_RST);
// Objekt u8g2Schriften
U8G2_FOR_ADAFRUIT_GFX u8g2Schriften;
char Router[] = "Router_SSID";
char Passwort[] = "xxxxxxx";
// NTP-Server aus dem Pool
#define Zeitserver "de.pool.ntp.org"
/*
Liste der Zeitzonen
https://github.com/nayarsystems/posix_tz_db/blob/master/zones.csv
Zeitzone CET = Central European Time -1 -> 1 Stunde zurück
CEST = Central European Summer Time von
M3 = März, 5.0 = Sonntag 5. Woche, 02 = 2 Uhr
bis M10 = Oktober, 5.0 = Sonntag 5. Woche 03 = 3 Uhr
*/
#define Zeitzone "CET-1CEST,M3.5.0/02,M10.5.0/03"
// time_t enthält die Anzahl der Sekunden seit dem 1.1.1970 0 Uhr
time_t aktuelleZeit;
/*
Struktur tm
tm_hour -> Stunde: 0 bis 23
tm_min -> Minuten: 0 bis 59
tm_sec -> Sekunden 0 bis 59
tm_mday -> Tag 1 bis 31
tm_mon -> Monat: 0 (Januar) bis 11 (Dezember)
tm_year -> Jahre seit 1900
tm_yday -> vergangene Tage seit 1. Januar des Jahres
tm_isdst -> Wert > 0 = Sommerzeit (dst = daylight saving time)
*/
tm Zeit;
// Intervall anpassen
unsigned long Intervall = 5000;
void setup()
{
// Schriften von u8g2 tft zuordnen
u8g2Schriften.begin(tft);
// Zeitzone: Parameter für die zu ermittelnde Zeit
configTzTime(Zeitzone, Zeitserver);
Serial.begin(9600);
// WiFi starten und Verbindung aufbauen
WiFi.begin(Router, Passwort);
while (WiFi.status() != WL_CONNECTED)
{
delay(200);
Serial.print(".");
}
// SSID des Routers anzeigen
Serial.println();
Serial.print("Verbunden mit ");
Serial.println(WiFi.SSID());
// IP anzeigen
Serial.print("IP: ");
Serial.println(WiFi.localIP());
// TFT starten
tft.begin();
// Rotation anpassen Querformat
tft.setRotation(1);
tft.fillScreen(ILI9341_BLACK);
u8g2Schriften.setForegroundColor(ILI9341_WHITE);
u8g2Schriften.setBackgroundColor(ILI9341_BLACK);
}
void loop()
{
// aktuelle Zeit holen
time(&aktuelleZeit);
// localtime_r -> Zeit in die lokale Zeitzone setzen
localtime_r(&aktuelleZeit, &Zeit);
tft.fillScreen(ILI9341_BLACK);
u8g2Schriften.setFont(u8g2_font_fub35_tf);
// Cursor setzen
u8g2Schriften.setCursor(20, 50);
// Tag: führende 0 ergänzen
if (Zeit.tm_mday < 10)
{
Serial.print("0");
u8g2Schriften.print("0");
}
Serial.print(Zeit.tm_mday);
Serial.print(".");
u8g2Schriften.print(Zeit.tm_mday);
u8g2Schriften.print(".");
// Monat: führende 0 ergänzen
if (Zeit.tm_mon < 9)
{
Serial.print("0");
u8g2Schriften.print("0");
}
Serial.print(Zeit.tm_mon + 1);
Serial.print(".");
u8g2Schriften.print(Zeit.tm_mon + 1);
u8g2Schriften.print(".");
// Anzahl Jahre seit 1900
Serial.print(Zeit.tm_year + 1900);
Serial.print(" ");
u8g2Schriften.print(Zeit.tm_year + 1900);
tft.drawFastHLine(1, 65, tft.width(), ILI9341_WHITE);
tft.drawFastHLine(1, 66, tft.width(), ILI9341_WHITE);
u8g2Schriften.setFont(u8g2_font_logisoso92_tn);
// Cursor setzen
u8g2Schriften.setCursor(2, 200);
// Stunde: wenn Stunde < 10 -> 0 davor setzen
if (Zeit.tm_hour < 10)
{
Serial.print("0");
u8g2Schriften.print("0");
}
Serial.print(Zeit.tm_hour);
u8g2Schriften.print(Zeit.tm_hour);
Serial.print(":");
u8g2Schriften.print(":");
// Minuten
// wenn Minute < 10 -> 0 davor setzen
if (Zeit.tm_min < 10)
{
Serial.print("0");
u8g2Schriften.print("0");
}
Serial.println(Zeit.tm_min);
u8g2Schriften.print(Zeit.tm_min);
delay(Intervall);
}
Quellen
Verwandte Anleitungen
- Datum und Zeit mit ESP und time.h anzeigen
- Datum und Zeit mit dem NTP-Protokoll anzeigen
- Stoppuhr
- Wecker mit einem RTC-Modul
- Zeit im Seriellen Monitor mit ESP-Mikrocontroller anzeigen
- Datum, Uhrzeit und Temperatur auf einem LCD mit einem RTC-Modul anzeigen
- Zeit mit time.h auf einer 4-stelligen 7-Segment-Anzeige darstellen
- Zeiterfassung mit RFID-Modul
Letzte Aktualisierung: