ESP32 mit 2,8 Zoll TFT (Cheap Yellow Display) – Projekte für Arduino und ESP32-Mikrocontroller

Lesezeit: 52 Minuten

Inhalt

Die Hardware
Grafische Funktionen
Touch-Screen verwenden
Beispielprogramme mit der Bibliothek TFT_eSPI
Fotoschau
- Bibliothek ILI9341 (TFT mit Mikro-USB-Anschluss)
- Bibliothek ST7789 (TFT mit USB-C-Anschluss)
  - Das Programm
Quellen

Die Hardware

Bei den Modulen ESP32-2432S028 und ESP32-JC2432W328C handelt es sich um 2,8 Zoll große TFT-Displays mit 320x240 Pixeln. Auf der Rückseite sind ein ESP32-Wroom und ein SD-Karten-Modul verbaut. Der ESP32-Wroom verfügt über WiFi und Bluetooth. Mit JST-Steckern können Peripheriegeräte angeschlossen werden.

Es gibt mehrere Versionen:

mit Mikro-USB-Anschluss (ESP32-2432S028)
Grafiktreiber ⇒ILI9341
mit USB-C-Anschluss (ESP32-2432S028 und ESP32-JC2432W328)
Grafiktreiber ⇒ST7789

Konfiguration des Mikrocontrollers

ESP32-Wroom

Anschluss von Peripherie ESP32-2432S028

JST-Stecker 1,25 mm 4 Pins blau eingefärbt (P3)
Pins
GND
35 nur als INPUT nutzbar
22
21 nicht nutzbar: Hintergrundbeleuchtung

JST Stecker 1,25 mm 4 Pins gelb eingefärbt (CN1)
Pins
GND
22
27
3,3 V

Mikro JST-Stecker 2 Pins Lautsprecheranschluss (grün eingefärbt)
GND
26

Anschluss von Peripherie ESP32-JC2432W328

JST-Stecker 1,25 mm 4 Pins rot eingefärbt (P6)
Pins (nicht zusammen mit der RGB-LED nutzbar)
GND
16
4
17

JST Stecker 1,25 mm 4 Pins gelb eingefärbt (CN1)
Pins
GND
22 I²C
21 I²C
3,3 V

JST-Stecker 1,25 mm 4 Pins blau eingefärbt (P3)
Pins
GND
35 nur als INPUT nutzbar
22
21

Mikro JST-Stecker 2 Pins Lautsprecheranschluss (grün eingefärbt)
GND
26

RGB-LED

Auf der Rückseite (ESP32-2432S028) oder auf der Vorderseite (ESP32-JC2432W328) befindet sich eine RGB-LED.
Die verschiedenen Farben leuchten bei LOW und sind bei HIGH ausgeschaltet.

int RoteLED = 4;
int GrueneLED = 16;
int BlaueLED = 17;

void setup()  
{ 
  pinMode(RoteLED, OUTPUT);
  pinMode(GrueneLED, OUTPUT);
  pinMode(BlaueLED, OUTPUT);
}

void loop()   
{ 
  digitalWrite(RoteLED, LOW);
  delay(500);
  digitalWrite(RoteLED, HIGH);
  delay(500);
  digitalWrite(GrueneLED, LOW);
  delay(500);
  digitalWrite(GrueneLED, HIGH);
  delay(500);
  digitalWrite(BlaueLED, LOW);
  delay(500);
  digitalWrite(BlaueLED, HIGH);
  delay(500);
}

int RoteLED = 4;

int GrueneLED = 16;

int BlaueLED = 17;

void setup()

{

pinMode(RoteLED, OUTPUT);

pinMode(GrueneLED, OUTPUT);

pinMode(BlaueLED, OUTPUT);

}

void loop()

{

digitalWrite(RoteLED, LOW);

delay(500);

digitalWrite(RoteLED, HIGH);

delay(500);

digitalWrite(GrueneLED, LOW);

delay(500);

digitalWrite(GrueneLED, HIGH);

delay(500);

digitalWrite(BlaueLED, LOW);

delay(500);

digitalWrite(BlaueLED, HIGH);

delay(500);

}

Lautsprecher

Ein Lautsprecher wird mit einem Mikro JST-Stecker mit 2 Pins angeschlossen. Die Lautstärke kann mit Hilfe eine Widerstands an einem der Drähte reduziert werden.

Lautsprecher-Anschluss mit 2 Pin Mikro-JST-Stecker
GND
26

int Lautsprecher = 26; 

void setup()  
{ 
  // kein setup-Teil notwendig
} 

void loop() 
{ 
  // tone(Ausgabepin, Frequenz, Zeit_in_Millisekunden)    
  tone(Lautsprecher, 1000, 100); 

  delay(500);

  // Lautsprecher ausschalten 
  noTone(Lautsprecher);
}

int Lautsprecher = 26;

void setup()

{

// kein setup-Teil notwendig

}

void loop()

{

// tone(Ausgabepin, Frequenz, Zeit_in_Millisekunden)

tone(Lautsprecher, 1000, 100);

delay(500);

// Lautsprecher ausschalten

noTone(Lautsprecher);

}

SD-Karte

Das SD-Kartenmodul nutzt den Standard Hardware SPI-Bus (VSPI):

Pins VSPI
23 -> COPI (MOSI)
19 -> CIPO (MISO)
18 -> CLK
5 -> CS

Das Beispielprogramm liest den Inhalt der SD-Karte und zeigt die Dateien im Seriellen Monitor an.

Benötigte Bibliothek

#include "SdFat.h"
SdFs SD;

// 3 = FAT32
#define SD_FAT_TYPE 3

// SPI-Geschwindigkeit
#define SPI_SPEED SD_SCK_MHZ(4)

/*
  Pinbelegung:
  CIPO -> 19
  COPI -> 23
  SCK  -> 18
  CS   ->  5
*/

// CSPin der SD-Karte
int CSPin = 5;

void setup() 
{
  Serial.begin(9600);

  // auf serielle Verbindung warten
  while (!Serial);
  delay(1000);

  /*
     SD-Karte mit Angabe des CSPins starten
     wenn die Intialisierung fehlschlägt
     - keine SD-Karte vorhanden
     - falsche Pinbelegung
     -> es wird eine Fehlermeldung angezeigt
  */
  if (!SD.begin(CSPin, SPI_SPEED)) 
  {
    Serial.println("Initialisierung fehlgeschlagen!");
  } 
  else Serial.println("Initialisierung abgeschlossen");

  // Dateien im Verzeichnis anzeigen
  Serial.println(SD.ls(LS_DATE | LS_SIZE | LS_R));
}

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

#include “SdFat.h”

SdFs SD;

// 3 = FAT32

#define SD_FAT_TYPE 3

// SPI-Geschwindigkeit

#define SPI_SPEED SD_SCK_MHZ(4)

Pinbelegung:

CIPO -> 19

COPI -> 23

SCK -> 18

CS -> 5

// CSPin der SD-Karte

int CSPin = 5;

void setup()

{

Serial.begin(9600);

// auf serielle Verbindung warten

while (!Serial);

delay(1000);

SD-Karte mit Angabe des CSPins starten

wenn die Intialisierung fehlschlägt

— keine SD-Karte vorhanden

— falsche Pinbelegung

-> es wird eine Fehlermeldung angezeigt

if (!SD.begin(CSPin, SPI_SPEED))

{

Serial.println(“Initialisierung fehlgeschlagen!”);

}

else Serial.println(“Initialisierung abgeschlossen”);

// Dateien im Verzeichnis anzeigen

Serial.println(SD.ls(LS_DATE | LS_SIZE | LS_R));

}

void loop()

{

// bleibt leer, das Programm läuft nur einmal

}

WiFi

Beispiel: Einfacher Webserver

Das Programm zeigt im Browser 6 Zufallszahlen an.
Im Seriellen Monitor wird die mit DHCP ermittelte IP des ESP32-Wroom angezeigt.

Diese Adresse musst du in einem Browser deiner Wahl eingeben.

#include "WiFi.h"
#include "WebServer.h"

// SSID und Passwort des Routers
char Router[] = "Router_SSID";
char Passwort[] = "xxxxxxxx";

WebServer Server(80);

// Minimum und Maximum der Zufallszahlen
int Minimum = 1;
int Maximum = 49;

void setup() 
{
  Serial.begin(9600);

  // auf serielle Verbindung warten
  while (!Serial);
  delay(1000);

  // WiFi starten
  WiFi.mode(WIFI_STA);
  WiFi.begin(Router, Passwort);

  while (WiFi.status() != WL_CONNECTED) 
  {
    delay(200);
    Serial.print(".");
  }
  Serial.println();
  Serial.print("Verbunden mit ");
  Serial.println(Router);
  Serial.print("IP über DHCP: ");

  // IP anzeigen
  Serial.println(WiFi.localIP());

  // Zufallsgenerator mit dem Signal an A0 starten
  randomSeed(analogRead(A0));

  Server.begin();
  Server.on("/", SeiteBauen);
}

void loop() 
{
  Server.handleClient();
}

void SeiteBauen() 
{
  // Seite zusammenbauen
  // Kopf der HTML-Seite: Aktualisierung alle 60 Sekunden
  // kann angepasst werden
  String Nachricht = "<head><meta http-equiv=\"refresh\" content=\"60\"></head>";
  Nachricht += "<h1>Zufallszahlen</h1>";
  Nachricht += "<hr>";

  // Zufallszahlen anzeigen
  for (int i = 0; i < 7; i++) 
  {
    int Zahl = random(Minimum, Maximum);
    Nachricht += String(Zahl) + " ";
  }

  Nachricht += "<hr>";

  // Nachricht senden -> Seite anzeigen
  Server.send(200, "text/html", Nachricht);
}

#include “WiFi.h”

#include “WebServer.h”

// SSID und Passwort des Routers

char Router[] = “Router_SSID”;

char Passwort[] = “xxxxxxxx”;

WebServer Server(80);

// Minimum und Maximum der Zufallszahlen

int Minimum = 1;

int Maximum = 49;

void setup()

{

Serial.begin(9600);

// auf serielle Verbindung warten

while (!Serial);

delay(1000);

// WiFi starten

WiFi.mode(WIFI_STA);

WiFi.begin(Router, Passwort);

while (WiFi.status() != WL_CONNECTED)

{

delay(200);

Serial.print(“.”);

}

Serial.println();

Serial.print(“Verbunden mit ”);

Serial.println(Router);

Serial.print(“IP über DHCP: ”);

// IP anzeigen

Serial.println(WiFi.localIP());

// Zufallsgenerator mit dem Signal an A0 starten

randomSeed(analogRead(A0));

Server.begin();

Server.on(“/”, SeiteBauen);

}

void loop()

{

Server.handleClient();

}

void SeiteBauen()

{

// Seite zusammenbauen

// Kopf der HTML-Seite: Aktualisierung alle 60 Sekunden

// kann angepasst werden

String Nachricht = “<head><meta http-equiv=\“refresh\” content=\“60\”></head>”;

Nachricht += “<h1>Zufallszahlen</h1>”;

Nachricht += “<hr>”;

// Zufallszahlen anzeigen

for (int i = 0; i < 7; i++)

{

int Zahl = random(Minimum, Maximum);

Nachricht += String(Zahl) + ” “;

}

Nachricht += “<hr>”;

// Nachricht senden -> Seite anzeigen

Server.send(200, “text/html”, Nachricht);

}

Grafische Funktionen

Das TFT-Display verwendet den Software SPI-Bus HSPI:

13 -> COPI (MOSI)
12 -> CIPO (MISO)
14 -> CLK
15 -> CS

Für die Verwendung des Displays wird die Bibliothek TFT_eSPI verwendet.
Treiber und SPI-Pins werden in ⇒Steuerdateien angegeben. Die Bibliothek stellt auch ⇒interne Schriften zur Verfügung.

Wenn du stattdessen die Adafruit-Bibliotheken verwenden willst:

⇒Bibliothek TFT_eSPI

Für das TFT mit einem Mikro-USB-Anschluss muss der Treiber ILI9341 verwendet werden.
Das TFT mit USB-C-Anschluss wird mit dem Treiber ST7789 betrieben.

Im Verzeichnis /Arduino/libraries/TFT_eSPI muss die Datei User_Setup.h angepasst werden:

Datei User_Setup.h für ILI9341 (ESP32-2432S028 Mikro-USB-Anschluss)

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

// TFT mit Mikro-USB und USB-C
// Farben sind invertiert: Schwarz = weiß
// #define TFT_INVERSION_ON

// normale Farbdarstellung
// #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

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

// TFT mit Mikro-USB und USB‑C

// Farben sind invertiert: Schwarz = weiß

// #define TFT_INVERSION_ON

// normale Farbdarstellung

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

Datei User_Setup.h für ST7789 (ESP32-2432S028 USB-C-Anschluss)

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

// 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_ON

// normale Farbdarstellung
#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 .-
#define LOAD_FONT2
#define LOAD_FONT4
#define LOAD_FONT6
#define LOAD_FONT7
#define LOAD_FONT8
#define SMOOTH_FONT
#define LOAD_GFXFF

// Treiber TFT

#define ST7789_DRIVER

#define TFT_WIDTH 240

#define TFT_HEIGHT 320

#define TFT_BACKLIGHT_ON HIGH

// 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_ON

// normale Farbdarstellung

#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 .-

#define LOAD_FONT2

#define LOAD_FONT4

#define LOAD_FONT6

#define LOAD_FONT7

#define LOAD_FONT8

#define SMOOTH_FONT

#define LOAD_GFXFF

Datei User_Setup.h für ST7789 (ESP32-JC2432W328C)

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

// 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   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 -.
#define LOAD_FONT2
#define LOAD_FONT4
#define LOAD_FONT6
#define LOAD_FONT7
#define LOAD_FONT8
#define SMOOTH_FONT
#define LOAD_GFXFF

// Treiber TFT

#define ST7789_DRIVER

#define TFT_WIDTH 240

#define TFT_HEIGHT 320

#define TFT_BACKLIGHT_ON HIGH

// 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 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 -.

#define LOAD_FONT2

#define LOAD_FONT4

#define LOAD_FONT6

#define LOAD_FONT7

#define LOAD_FONT8

#define SMOOTH_FONT

#define LOAD_GFXFF

Allerdings werden diese Dateien beim Update der Bibliothek überschrieben. Es empfiehlt sich daher, sie an einem anderen Ort zu sichern.

Das Programm

#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);
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

#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);

}

Touch-Screen verwenden

Bei den Touchscreens werden resistive oder kapazitive Techniken verwendet:
Ein resistiver Touchscreen reagiert auf Druck mit einem Finger oder einem Stift, bei einem kapazitiver Touchscreen reicht eine Berührung um eine Reaktion auszuführen. In der Regel ist aus Kostengründen ein resistiver Touchscreen verbaut.

Beim ESP32-2432S028 konnte ich mit der Bibliothek XPT2046_Touchscreen_TT den Touchscreen ansprechen.

Das Beispielprogramm erstellt zwei farbige Buttons. Beim Klick auf einen der Buttons ändert sich die Farbe und die Koordinaten des Punktes werden angezeigt. Du musst testen, ob die Ausrichtung des TFTs mit der Ausrichtung des Touch-Screens übereinstimmt. In der linken oberen Ecke müssen x und y‑Koordinaten etwas größer als 1 sein, in der rechten unteren Ecke müssen sie sich in der Nähe von 320 (x‑Koordinate) und 240 (y‑Kordinate) befinden. Ist das nicht der Fall, musst du die Ausrichtung des Touch-Screens (touchscreen.setRotation(0 … 3) anpassen.

Benötigte Bibliothek

Die Bibliothek TFT_eSPI muss ⇒korrekt konfiguriert werden.

#include "TFT_eSPI.h"
TFT_eSPI tft = TFT_eSPI();

#include "XPT2046_Touchscreen_TT.h"

#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

// SPI-Pins als Hardware-SPI
SPIClass touchscreenSPI = SPIClass(VSPI);
XPT2046_Touchscreen touchscreen(TOUCH_CS, TOUCH_IRQ);

bool FarbwechselLinkerButton = false;
bool FarbwechselRechterButton = false;

// Touchscreen Koordinaten (z = Druck)
int x, y, z;

void setup() 
{
  Serial.begin(9600);

  // SPI-Bus für den Touchscreen starten
  touchscreenSPI.begin(TOUCH_CLK, TOUCH_MISO, TOUCH_MOSI, TOUCH_CS);
  touchscreen.begin(touchscreenSPI);

  /*
    wenn die Bildschirm-Koordinaten und die Touchscreen-Kordinaten
    nicht übereinstimmen (Touchscreen ist "falsch" herum)
    Rotation des Touchscreen setzen:
    touchscreen.setRotation(3);
  */

  // TFT starten
  tft.init();

  // Hintergrundbeleuchtung einschalten
  pinMode(TFT_BL, OUTPUT);
  digitalWrite(TFT_BL, HIGH);
  
  // Bildschirm drehen
  tft.setRotation(1);

  tft.fillScreen(SCHWARZ);

  // linker Button  
  tft.fillRect(50, 100, 100, 50, ROT);
  tft.drawRoundRect(50, 100, 100, 50, 5, WEISS);
  
  // rechter Button
  tft.fillRect(180, 100, 100, 50, GELB);
  tft.drawRoundRect(180, 100, 100, 50, 5, WEISS);
  tft.setTextSize(2);
}

void loop() 
{
  // wenn der Touchscreen berührt wurde
  if (touchscreen.tirqTouched() && touchscreen.touched()) 
  {
    // Punkte x, y und Druck (z) ermitteln
    TS_Point Punkt = touchscreen.getPoint();

    /*
      die "Rohwerte" der Punkte x und y bewegen sich zwischen 1 und 3800 bzw. 3900
      daher müssen sie mit map auf die korrekten Bildschirmmaße
      korrigiert werden
    */
    x = map(Punkt.x, 240, 3800, 1, tft.width());
    y = map(Punkt.y, 320, 3900, 1, tft.height());
    
    z = Punkt.z;

    // linker Button Koordinaten abfragen
    if (x >= 50 && x <= 150 && y >= 100 && y <= 150) 
    {
      if (FarbwechselLinkerButton) 
      {
        tft.fillRect(50, 100, 100, 50, ROT);
        tft.drawRoundRect(50, 100, 100, 50, 5, WEISS);
      }
      
      else 
      {
        tft.fillRect(50, 100, 100, 50, BLAU);
        tft.drawRoundRect(50, 100, 100, 50, 5, WEISS);
      }
      FarbwechselLinkerButton = !FarbwechselLinkerButton;
    }

    // rechter Button Koordinaten abfragen
    if (x >= 180 && x <= 280 && y >= 100 && y <= 150) 
    {
      if (FarbwechselRechterButton) 
      {
        tft.fillRect(180, 100, 100, 50, MAGENTA);
        tft.drawRoundRect(180, 100, 100, 50, 5, WEISS);
      }

      else 
      {
        tft.fillRect(180, 100, 100, 50, GELB);
        tft.drawRoundRect(180, 100, 100, 50, 5, WEISS);
      }
      FarbwechselRechterButton = !FarbwechselRechterButton;
    }
    KoordinatenAnzeigen(x, y, z);

    delay(100);
  }
}

void KoordinatenAnzeigen(int x, int y, int z) 
{
  Serial.print("x-Koordinate = ");
  Serial.print(x);
  Serial.print(" | y-Koordinate = ");
  Serial.print(y);
  Serial.print(" | Druck = ");
  Serial.print(z);
  Serial.println();

  tft.fillRect(1, 1, tft.width(), 90, SCHWARZ);
  tft.setCursor(10, 10);

  // interne Schrift Größe 2
  tft.setTextFont(2);
  tft.println("x-Koordinate: " + String(x));
  tft.setCursor(10, 40);
  tft.print("y-Koordinate: " + String(y));
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

#include “TFT_eSPI.h”

TFT_eSPI tft = TFT_eSPI();

#include “XPT2046_Touchscreen_TT.h”

#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

// SPI-Pins als Hardware-SPI

SPIClass touchscreenSPI = SPIClass(VSPI);

XPT2046_Touchscreen touchscreen(TOUCH_CS, TOUCH_IRQ);

bool FarbwechselLinkerButton = false;

bool FarbwechselRechterButton = false;

// Touchscreen Koordinaten (z = Druck)

int x, y, z;

void setup()

{

Serial.begin(9600);

// SPI-Bus für den Touchscreen starten

touchscreenSPI.begin(TOUCH_CLK, TOUCH_MISO, TOUCH_MOSI, TOUCH_CS);

touchscreen.begin(touchscreenSPI);

wenn die Bildschirm-Koordinaten und die Touchscreen-Kordinaten

nicht übereinstimmen (Touchscreen ist “falsch” herum)

Rotation des Touchscreen setzen:

touchscreen.setRotation(3);

// TFT starten

tft.init();

// Hintergrundbeleuchtung einschalten

pinMode(TFT_BL, OUTPUT);

digitalWrite(TFT_BL, HIGH);

// Bildschirm drehen

tft.setRotation(1);

tft.fillScreen(SCHWARZ);

// linker Button

tft.fillRect(50, 100, 100, 50, ROT);

tft.drawRoundRect(50, 100, 100, 50, 5, WEISS);

// rechter Button

tft.fillRect(180, 100, 100, 50, GELB);

tft.drawRoundRect(180, 100, 100, 50, 5, WEISS);

tft.setTextSize(2);

}

void loop()

{

// wenn der Touchscreen berührt wurde

if (touchscreen.tirqTouched() && touchscreen.touched())

{

// Punkte x, y und Druck (z) ermitteln

TS_Point Punkt = touchscreen.getPoint();

die “Rohwerte” der Punkte x und y bewegen sich zwischen 1 und 3800 bzw. 3900

daher müssen sie mit map auf die korrekten Bildschirmmaße

korrigiert werden

x = map(Punkt.x, 240, 3800, 1, tft.width());

y = map(Punkt.y, 320, 3900, 1, tft.height());

z = Punkt.z;

// linker Button Koordinaten abfragen

if (x >= 50 && x <= 150 && y >= 100 && y <= 150)

{

if (FarbwechselLinkerButton)

{

tft.fillRect(50, 100, 100, 50, ROT);

tft.drawRoundRect(50, 100, 100, 50, 5, WEISS);

}

else

{

tft.fillRect(50, 100, 100, 50, BLAU);

tft.drawRoundRect(50, 100, 100, 50, 5, WEISS);

}

FarbwechselLinkerButton = !FarbwechselLinkerButton;

}

// rechter Button Koordinaten abfragen

if (x >= 180 && x <= 280 && y >= 100 && y <= 150)

{

if (FarbwechselRechterButton)

{

tft.fillRect(180, 100, 100, 50, MAGENTA);

tft.drawRoundRect(180, 100, 100, 50, 5, WEISS);

}

else

{

tft.fillRect(180, 100, 100, 50, GELB);

tft.drawRoundRect(180, 100, 100, 50, 5, WEISS);

}

FarbwechselRechterButton = !FarbwechselRechterButton;

}

KoordinatenAnzeigen(x, y, z);

delay(100);

}

void KoordinatenAnzeigen(int x, int y, int z)

{

Serial.print(“x‑Koordinate = ”);

Serial.print(x);

Serial.print(“ | y‑Koordinate = ”);

Serial.print(y);

Serial.print(“ | Druck = ”);

Serial.print(z);

Serial.println();

tft.fillRect(1, 1, tft.width(), 90, SCHWARZ);

tft.setCursor(10, 10);

// interne Schrift Größe 2

tft.setTextFont(2);

tft.println(“x‑Koordinate: ” + String(x));

tft.setCursor(10, 40);

tft.print(“y‑Koordinate: ” + String(y));

}

Beispielprogramme mit der Bibliothek TFT_eSPI

Analoge Uhr

Die im Programm verwendete Bibliothek U8g2_for_TFT_eSPI kann nicht über die Bibliotheksverwaltung installiert werden, sie muss heruntergeladen

🔗https://github.com/Bodmer/U8g2_for_TFT_eSPI

und mit

Sketch -> Bibliothek einbinden -> zip-Bibliothek hinzufügen

installiert werden.

Das Programm kann auf vielfältige Weise angepasst werden:

die Farbe der Zeiger (Zeigerfarbe)
die Farben kannst du dem Kopf des Programms entnehmen
die Farbe des inneren Kreises (Kreisfarbe)
die Farbe der äußeren Umrandung (Randfarbe)
Anzeige des Datums (DatumAnzeigen)
true: Datum anzeigen, false: Datum verbergen
Sekundenzeiger vollständig oder nur als Kreis anzeigen (SekundenzeigerKreis)
true: nur den Kreis anzeigen, false: Sekundenzeiger als Linie mit Kreis am Ende der Linie anzeigen
die Anzeige der Stundenmarkierungen 12, 3, 6 und 9 (Ziffernanzeigen)
true: Ziffern anzeigen, false: Ziffern verbergen

Beim Start des Programms zeigen die Meldungen ob Datum und Zeit korrekt sind. Wenn in 90 Sekunden keine Verbindung zu einem Zeitserver hergestellt werden konnte, wird das Programm beendet. Nach einem erneuten Hochladen kommt zumeist die Verbindung schnell zustande.

#include "WiFi.h"
#include "time.h"
#include "TFT_eSPI.h"
#include "U8g2_for_TFT_eSPI.h"

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

TFT_eSPI tft = TFT_eSPI();

// WiFi-Daten
char Router[] = "Router_SSID";
char Passwort[] = "xxxxxxxx";

// Variablen des TFTs (Höhe, Breite, Radius)
const int MitteHoehe = 120;
const int MitteBreite = 120;
const int Radius = 120;

// Multiplikatoren für x- y-Positionen der Stunden, Minuten und Sekunden
float SekundePosX = 0, SekundePosY = 0, MinutePosX = 0, MinutePosY = 0, StundePosX = 0, StundePosY = 0;
float GradSekunden = 0, GradMinuten = 0, GradStunden = 0;

// x- y-Koordinaten für die Anzeige Stunden, Minuten und Sekunden
int SekundenZeigerX = MitteHoehe, SekundenZeigerY = MitteHoehe;
int MinutenZeigerX = MitteHoehe, MinutenZeigerY = MitteHoehe;
int StundenZeigerX = MitteHoehe, StundenZeigerY = MitteHoehe; 

// Start wird nur beim ersten Start für den Aufbau des TFTs benötigt
bool Start = true;

unsigned long Zeitmessung = 0;  

// Variablen für die Markierungen und Punkte und Striche des Ziffernblatts
float PosX, PosY;
int PunktX, PunktY, PunktX1, PunktX2, PunktY1, PunktY2;

// Variablen für die Zeit
int Stunden, Minuten, Sekunden;

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

// Farben innerer Kreis, Randfarbe und Zeigerfarbe
// die Farben der Zeiger können aber auch individuell gesetzt werden
const int Kreisfarbe = SCHWARZ;
const int Zeigerfarbe = WEISS;
const int Randfarbe = BORDEAUX;

// true -> Datum anzeigen
// false -> Datum nicht anzeigen
bool DatumAnzeigen = true;

// true -> Sekundenzeiger nur als Kreis
bool SekundenzeigerKreis = false;

// Ziffern 12 3 6 9 anzeigen/nicht anzeigen
bool Ziffernanzeigen = true;

// 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;

void setup() 
{
  Serial.begin(9600);

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

  // Zeitzone: Parameter für die zu ermittelnde Zeit
  configTzTime(Zeitzone, Zeitserver);

  WiFi.mode(WIFI_STA);
  
  // WiFi starten
  WiFi.begin(Router, Passwort);

  Serial.println("------------------------");

  while (WiFi.status() != WL_CONNECTED) 
  {
    delay(200);
    Serial.print(".");
  }
  
  Serial.println();
  Serial.print("Verbunden mit ");
  Serial.println(Router);
  Serial.print("IP über DHCP: ");
  Serial.println(WiFi.localIP());

  // Zeit holen
  time(&aktuelleZeit);

  // localtime_r -> Zeit in die lokale Zeitzone setzen
  localtime_r(&aktuelleZeit, &Zeit);

  // beim Start entspricht das Datum der Unixtime: 1.1.1970
  // Datum/Kalender sollen erst angezeigt werden, wenn das Datum korrekt ist
  String Jahr = String(Zeit.tm_year + 1900); 
  int Zaehler = 0;

  // String Jahr nach "1970" durchsuchen
  int Suche = Jahr.indexOf("1970");         

  Serial.println("-------------------------"); 
  Serial.println("Datum und Zeit holen (maximal 90 Sekunden)...");
  
  // solange die Suche nicht erfolgreich ist
  while (Suche != -1) 
  {
    // aktuelle Zeit holen
    time(&aktuelleZeit);

    // localtime_r -> Zeit in die lokale Zeitzone setzen
    localtime_r(&aktuelleZeit, &Zeit);
    Jahr = String(Zeit.tm_year + 1900); 
    
    // String Jahr nach "1970" durchsuchen
    Suche = Jahr.indexOf("1970");

    // Zeit in Stunden, Minuten und Sekunden
    Stunden = int(Zeit.tm_hour), Minuten = int(Zeit.tm_min), Sekunden = int(Zeit.tm_sec);
    delay(1000);
    Zaehler ++;

    if (Zaehler >= 90)
    {
      Serial.println();
      Serial.println("Datum und Zeit konnte innerhalb von " + String(Zaehler) + " Sekunden nicht geholt werden");
      Serial.println("Programm wird beendet");

      // Programm beenden
      while(1);
    }

    Serial.print(".");
  }   

  Serial.println();

  // Datum/Zeit erfolgreich synchronisiert
  if (Suche == -1) 
  {
    Serial.println("-------------------------");
    Serial.println("Datum/Zeit erfolgreich synchronisiert ...");
    
    if (Zeit.tm_mday < 10) Serial.print("0");
    Serial.print(Zeit.tm_mday);
    Serial.print(".");

    // Monat: führende 0 ergänzen
    if (Zeit.tm_mon < 9) Serial.print("0");
    
    // Zählung beginnt mit 0 -> +1
    Serial.print(Zeit.tm_mon + 1);
    Serial.print(".");

    // Anzahl Jahre seit 1900
    Serial.println(Zeit.tm_year + 1900);

    if (Zeit.tm_hour < 10) Serial.print("0");
    Serial.print(Zeit.tm_hour);
    Serial.print(":");
      
    if (Zeit.tm_min < 10) Serial.print("0");
    Serial.println(Zeit.tm_min);
    Serial.println("-------------------------");
  }

  // Zeit in Stunden, Minuten und Sekunden
  Stunden = Zeit.tm_hour, Minuten = Zeit.tm_min, Sekunden = Zeit.tm_sec;
  
  tft.begin();
  tft.setRotation(0);
  tft.fillScreen(Kreisfarbe);

  // 4 Pixel breiter äußerer Rand, Farbe au der Farbpalette wählen
  tft.drawCircle(MitteHoehe, MitteBreite, Radius - 1, Randfarbe);
  tft.drawCircle(MitteHoehe, MitteBreite, Radius - 2, Randfarbe);
  tft.drawCircle(MitteHoehe, MitteBreite, Radius - 3, Randfarbe);
  tft.drawCircle(MitteHoehe, MitteBreite, Radius - 4, Randfarbe);

  // innere Fläche bis auf den Rand von 4 Pixeln vollständig löschen
  // wenn andere Farbe als äußerer Rand gewählt wird ergibt sich ein schmaler Rand
  tft.fillCircle(MitteHoehe, MitteBreite, Radius - 4, Kreisfarbe);

  /*
    alle 30° Linie am Rand als Stundenmarkierung zeichnen
    DEG_TO_RAD (= PI/180 = 0.0174532925) -> Winkel in Bogenmaß umrechnen
    sin/cos berechnen die x-/y-Kordinaten des Punktes auf der Kreislinie
  */
  for (int i = 0; i < 360; i += 30) 
  {
    PosX = cos((i - 90) * DEG_TO_RAD);
    PosY = sin((i - 90) * DEG_TO_RAD);

    // kurze Linien zeichnen, von 114 bis 100 vom äußeren Rand aus
    // Farbe individuell wählbar
    int PunktX1 = PosX * 110 + Radius;
    int PunktY1 = PosY * 110 + Radius;
    int PunktX2 = PosX * 100 + Radius;
    int PunktY2 = PosY * 100 + Radius;

    // keine Striche an der Position der Zahlen
    if (PunktX1 == 10 || PunktX1 == 120 || PunktX1 == 230)
    {
      tft.drawLine(PunktX1, PunktY1, PunktX2, PunktY2, Kreisfarbe);
    }
    else tft.drawLine(PunktX1, PunktY1, PunktX2, PunktY2, Zeigerfarbe);
  }

  // alle 6 Grad Punkte als Sekundenmarkierung zeichnen
  for (int i = 0; i < 360; i += 6) 
  {
    PosX = cos((i - 90) * DEG_TO_RAD);
    PosY = sin((i - 90) * DEG_TO_RAD);

    // Positionen der Punkte
    // 108 -> Abstand vom Mittelpunkt
    PunktX = PosX * 108 + Radius;
    PunktY = PosY * 108 + Radius;
    tft.drawPixel(PunktX, PunktY, Zeigerfarbe);  
  }

   // Markierung 12 3 6 9
  if (Ziffernanzeigen)
  {
    tft.setTextFont(2);
    tft.setTextColor(Zeigerfarbe);
    tft.setCursor(113, 10);
    tft.print("12");

    tft.setCursor(10, 113);
    tft.print("9");

    tft.setCursor(220, 113);
    tft.print("3");
  
    tft.setCursor(118, 220);
    tft.print("6");
  }

  if (DatumAnzeigen) ZeigeDatum();

  Zeitmessung = millis() + 1000; 
}

void loop() 
{
  // Sekunden weiter zählen
  if (Zeitmessung < millis()) 
  {
    Zeitmessung += 1000;
    Sekunden++;  
  
    if (Sekunden == 60) 
    { 
      // Zeit jede Minute mit Zeitserver synchronisieren
      // aktuelle Zeit holen
      time(&aktuelleZeit);

      // localtime_r -> Zeit in die lokale Zeitzone setzen
      localtime_r(&aktuelleZeit, &Zeit);

      // Zeit in Stunden, Minuten und Sekunden
      Stunden = int(Zeit.tm_hour), Minuten = int(Zeit.tm_min), Sekunden = int(Zeit.tm_sec);

      // Mitternacht 
      // -> Wechsel des Datums anzeigen
      if (Stunden == 0 && Minuten == 0) 
      {
        Serial.println("neues Datum");
        if (DatumAnzeigen) ZeigeDatum();
      }
    }

      // Vorausberechnung der x- und y-Koordinaten
    // 0-59 -> 0-354 = Faktor 6
    GradSekunden = Sekunden * 6;    

    // Minuten+Sekunden in Relation zu 3600 setzen
    // 60 / 3600 = 0.01666667         
    GradMinuten = Minuten * 6 + GradSekunden * 0.01666667; 

    // 30 / 3600 = 0.0833333
    // Stunden+Minuten in Relation zu 360 setzen
    // 0-11 -> 0-360 
    GradStunden = Stunden * 30 + GradMinuten * 0.0833333;  // 0-11 -> 0-360 
    StundePosX = cos((GradStunden - 90) * DEG_TO_RAD);
    StundePosY = sin((GradStunden - 90) * DEG_TO_RAD);

    MinutePosX = cos((GradMinuten - 90) * DEG_TO_RAD) ;
    MinutePosY = sin((GradMinuten - 90) * DEG_TO_RAD);

    SekundePosX = cos((GradSekunden - 90) * DEG_TO_RAD);
    SekundePosY = sin((GradSekunden - 90) * DEG_TO_RAD);

    // nach jeder Minute Minuten-/Stundenzeiger löschen
    // oder einmalig beim Start der Anzeige
    if (Sekunden == 0 || Start) 
    {
      Start = false;
      tft.drawLine(StundenZeigerX, StundenZeigerY, MitteHoehe, MitteHoehe + 1, Kreisfarbe);  

      // 62 Pixel -> Länge des Stundenzeigers
      // Mittelpunkt + 1 -> Mittelpunkt soll nicht gelöscht werden
      StundenZeigerX = StundePosX * 62 + MitteHoehe + 1;
      StundenZeigerY = StundePosY * 62 + MitteHoehe + 1;
      tft.drawLine(MinutenZeigerX, MinutenZeigerY, MitteHoehe, MitteHoehe + 1, Kreisfarbe);

      // 84 Pixel -> Länge des Minutenzeigers
      // Mittelpunkt + 1 -> Mittelpunkt soll nicht gelöscht werden
      MinutenZeigerX = MinutePosX * 84 + MitteHoehe;
      MinutenZeigerY = MinutePosY * 84 + MitteHoehe + 1;
    }

    // Sekundenzeiger löschen
    if (!SekundenzeigerKreis) tft.drawLine(SekundenZeigerX, SekundenZeigerY, MitteHoehe, MitteHoehe + 1, Kreisfarbe);

    // Kreis am Sekundenzeiger löschen, Radius 5
    tft.fillCircle(SekundenZeigerX, SekundenZeigerY, 5, Kreisfarbe);

    // 85 Pixel -> Länge des Sekundenzeigers
    SekundenZeigerX = SekundePosX * 85 + MitteHoehe + 1;
    SekundenZeigerY = SekundePosY * 85 + MitteHoehe + 1;

    // Zeiger neu zeichnen
    // Sekunden Linie nur anzeigen wenn SekundenzeigerKreis false
    if (!SekundenzeigerKreis) tft.drawLine(SekundenZeigerX, SekundenZeigerY, MitteHoehe, MitteHoehe + 1, ROT);
    
    // Minuten
    tft.drawLine(MinutenZeigerX, MinutenZeigerY, MitteHoehe, MitteHoehe + 1, Zeigerfarbe);

    // Stunden
    tft.drawLine(StundenZeigerX, StundenZeigerY, MitteHoehe, MitteHoehe + 1, Zeigerfarbe);

    // Kreis an der Spitze des Sekundenzeigers, Radius 5
    tft.fillCircle(SekundenZeigerX, SekundenZeigerY, 5, ROT);

    // Mittelpunkt zeichnen
    tft.fillCircle(MitteHoehe, MitteHoehe + 1, 3, Zeigerfarbe); 
  }
}

void ZeigeDatum()
{
  tft.fillRect(10, 250, tft.width(), tft.height(), SCHWARZ);

  u8g2Schriften.setForegroundColor(GRUEN);   
  u8g2Schriften.setBackgroundColor(SCHWARZ);
  u8g2Schriften.setFont(u8g2_font_helvB14_tf);   
  u8g2Schriften.setCursor(10, 300);

  // Wochentag anzeigen
  switch (Zeit.tm_wday) 
  {
    case 0:
      u8g2Schriften.print("Sonntag");
      break;
    case 1:
      u8g2Schriften.print("Montag");
      break;
    case 2:
      u8g2Schriften.print("Dienstag");
      break;
    case 3:
      u8g2Schriften.print("Mittwoch");
      break;
    case 4:
      u8g2Schriften.print("Donnerstag");
      break;
    case 5:
      u8g2Schriften.print("Freitag");
      break;
    case 6:
      u8g2Schriften.print("Samstag");
      break;
  }

  u8g2Schriften.print(", ");
      
  if (Zeit.tm_mday < 10) u8g2Schriften.print("0");
  u8g2Schriften.print(Zeit.tm_mday);
  u8g2Schriften.print(".");

  // Monat: führende 0 ergänzen
  if (Zeit.tm_mon < 9) u8g2Schriften.print("0");
    
  // Zählung beginnt mit 0 -> +1
  u8g2Schriften.print(Zeit.tm_mon + 1);
  u8g2Schriften.print(".");

  // Anzahl Jahre seit 1900
  u8g2Schriften.print(Zeit.tm_year + 1900);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

#include “WiFi.h”

#include “time.h”

#include “TFT_eSPI.h”

#include “U8g2_for_TFT_eSPI.h”

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

U8g2_for_TFT_eSPI u8g2Schriften;

TFT_eSPI tft = TFT_eSPI();

// WiFi-Daten

char Router[] = “Router_SSID”;

char Passwort[] = “xxxxxxxx”;

// Variablen des TFTs (Höhe, Breite, Radius)

const int MitteHoehe = 120;

const int MitteBreite = 120;

const int Radius = 120;

// Multiplikatoren für x- y‑Positionen der Stunden, Minuten und Sekunden

float SekundePosX = 0, SekundePosY = 0, MinutePosX = 0, MinutePosY = 0, StundePosX = 0, StundePosY = 0;

float GradSekunden = 0, GradMinuten = 0, GradStunden = 0;

// x- y‑Koordinaten für die Anzeige Stunden, Minuten und Sekunden

int SekundenZeigerX = MitteHoehe, SekundenZeigerY = MitteHoehe;

int MinutenZeigerX = MitteHoehe, MinutenZeigerY = MitteHoehe;

int StundenZeigerX = MitteHoehe, StundenZeigerY = MitteHoehe;

// Start wird nur beim ersten Start für den Aufbau des TFTs benötigt

bool Start = true;

unsigned long Zeitmessung = 0;

// Variablen für die Markierungen und Punkte und Striche des Ziffernblatts

float PosX, PosY;

int PunktX, PunktY, PunktX1, PunktX2, PunktY1, PunktY2;

// Variablen für die Zeit

int Stunden, Minuten, Sekunden;

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

// Farben innerer Kreis, Randfarbe und Zeigerfarbe

// die Farben der Zeiger können aber auch individuell gesetzt werden

const int Kreisfarbe = SCHWARZ;

const int Zeigerfarbe = WEISS;

const int Randfarbe = BORDEAUX;

// true -> Datum anzeigen

// false -> Datum nicht anzeigen

bool DatumAnzeigen = true;

// true -> Sekundenzeiger nur als Kreis

bool SekundenzeigerKreis = false;

// Ziffern 12 3 6 9 anzeigen/nicht anzeigen

bool Ziffernanzeigen = true;

// 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;

void setup()

{

Serial.begin(9600);

// Schriften von u8g2 tft zuordnen

u8g2Schriften.begin(tft);

// Zeitzone: Parameter für die zu ermittelnde Zeit

configTzTime(Zeitzone, Zeitserver);

WiFi.mode(WIFI_STA);

// WiFi starten

WiFi.begin(Router, Passwort);

Serial.println(“————————”);

while (WiFi.status() != WL_CONNECTED)

{

delay(200);

Serial.print(“.”);

}

Serial.println();

Serial.print(“Verbunden mit ”);

Serial.println(Router);

Serial.print(“IP über DHCP: ”);

Serial.println(WiFi.localIP());

// Zeit holen

time(&aktuelleZeit);

// localtime_r -> Zeit in die lokale Zeitzone setzen

localtime_r(&aktuelleZeit, &Zeit);

// beim Start entspricht das Datum der Unixtime: 1.1.1970

// Datum/Kalender sollen erst angezeigt werden, wenn das Datum korrekt ist

String Jahr = String(Zeit.tm_year + 1900);

int Zaehler = 0;

// String Jahr nach “1970” durchsuchen

int Suche = Jahr.indexOf(“1970”);

Serial.println(“————————-”);

Serial.println(“Datum und Zeit holen (maximal 90 Sekunden)…”);

// solange die Suche nicht erfolgreich ist

while (Suche != -1)

{

// aktuelle Zeit holen

time(&aktuelleZeit);

// localtime_r -> Zeit in die lokale Zeitzone setzen

localtime_r(&aktuelleZeit, &Zeit);

Jahr = String(Zeit.tm_year + 1900);

// String Jahr nach “1970” durchsuchen

Suche = Jahr.indexOf(“1970”);

// Zeit in Stunden, Minuten und Sekunden

Stunden = int(Zeit.tm_hour), Minuten = int(Zeit.tm_min), Sekunden = int(Zeit.tm_sec);

delay(1000);

Zaehler ++;

if (Zaehler >= 90)

{

Serial.println();

Serial.println(“Datum und Zeit konnte innerhalb von ” + String(Zaehler) + ” Sekunden nicht geholt werden”);

Serial.println(“Programm wird beendet”);

// Programm beenden

while(1);

}

Serial.print(“.”);

}

Serial.println();

// Datum/Zeit erfolgreich synchronisiert

if (Suche == -1)

{

Serial.println(“————————-”);

Serial.println(“Datum/Zeit erfolgreich synchronisiert …”);

if (Zeit.tm_mday < 10) Serial.print(“0”);

Serial.print(Zeit.tm_mday);

Serial.print(“.”);

// Monat: führende 0 ergänzen

if (Zeit.tm_mon < 9) Serial.print(“0”);

// Zählung beginnt mit 0 -> +1

Serial.print(Zeit.tm_mon + 1);

Serial.print(“.”);

// Anzahl Jahre seit 1900

Serial.println(Zeit.tm_year + 1900);

if (Zeit.tm_hour < 10) Serial.print(“0”);

Serial.print(Zeit.tm_hour);

Serial.print(“:”);

if (Zeit.tm_min < 10) Serial.print(“0”);

Serial.println(Zeit.tm_min);

Serial.println(“————————-”);

}

// Zeit in Stunden, Minuten und Sekunden

Stunden = Zeit.tm_hour, Minuten = Zeit.tm_min, Sekunden = Zeit.tm_sec;

tft.begin();

tft.setRotation(0);

tft.fillScreen(Kreisfarbe);

// 4 Pixel breiter äußerer Rand, Farbe au der Farbpalette wählen

tft.drawCircle(MitteHoehe, MitteBreite, Radius - 1, Randfarbe);

tft.drawCircle(MitteHoehe, MitteBreite, Radius - 2, Randfarbe);

tft.drawCircle(MitteHoehe, MitteBreite, Radius - 3, Randfarbe);

tft.drawCircle(MitteHoehe, MitteBreite, Radius - 4, Randfarbe);

// innere Fläche bis auf den Rand von 4 Pixeln vollständig löschen

// wenn andere Farbe als äußerer Rand gewählt wird ergibt sich ein schmaler Rand

tft.fillCircle(MitteHoehe, MitteBreite, Radius - 4, Kreisfarbe);

alle 30° Linie am Rand als Stundenmarkierung zeichnen

DEG_TO_RAD (= PI/180 = 0.0174532925) -> Winkel in Bogenmaß umrechnen

sin/cos berechnen die x-/y‑Kordinaten des Punktes auf der Kreislinie

for (int i = 0; i < 360; i += 30)

{

PosX = cos((i - 90) * DEG_TO_RAD);

PosY = sin((i - 90) * DEG_TO_RAD);

// kurze Linien zeichnen, von 114 bis 100 vom äußeren Rand aus

// Farbe individuell wählbar

int PunktX1 = PosX * 110 + Radius;

int PunktY1 = PosY * 110 + Radius;

int PunktX2 = PosX * 100 + Radius;

int PunktY2 = PosY * 100 + Radius;

// keine Striche an der Position der Zahlen

if (PunktX1 == 10 || PunktX1 == 120 || PunktX1 == 230)

{

tft.drawLine(PunktX1, PunktY1, PunktX2, PunktY2, Kreisfarbe);

}

else tft.drawLine(PunktX1, PunktY1, PunktX2, PunktY2, Zeigerfarbe);

}

// alle 6 Grad Punkte als Sekundenmarkierung zeichnen

for (int i = 0; i < 360; i += 6)

{

PosX = cos((i - 90) * DEG_TO_RAD);

PosY = sin((i - 90) * DEG_TO_RAD);

// Positionen der Punkte

// 108 -> Abstand vom Mittelpunkt

PunktX = PosX * 108 + Radius;

PunktY = PosY * 108 + Radius;

tft.drawPixel(PunktX, PunktY, Zeigerfarbe);

}

// Markierung 12 3 6 9

if (Ziffernanzeigen)

{

tft.setTextFont(2);

tft.setTextColor(Zeigerfarbe);

tft.setCursor(113, 10);

tft.print(“12”);

tft.setCursor(10, 113);

tft.print(“9”);

tft.setCursor(220, 113);

tft.print(“3”);

tft.setCursor(118, 220);

tft.print(“6”);

}

if (DatumAnzeigen) ZeigeDatum();

Zeitmessung = millis() + 1000;

}

void loop()

{

// Sekunden weiter zählen

if (Zeitmessung < millis())

{

Zeitmessung += 1000;

Sekunden++;

if (Sekunden == 60)

{

// Zeit jede Minute mit Zeitserver synchronisieren

// aktuelle Zeit holen

time(&aktuelleZeit);

// localtime_r -> Zeit in die lokale Zeitzone setzen

localtime_r(&aktuelleZeit, &Zeit);

// Zeit in Stunden, Minuten und Sekunden

Stunden = int(Zeit.tm_hour), Minuten = int(Zeit.tm_min), Sekunden = int(Zeit.tm_sec);

// Mitternacht

// -> Wechsel des Datums anzeigen

if (Stunden == 0 && Minuten == 0)

{

Serial.println(“neues Datum”);

if (DatumAnzeigen) ZeigeDatum();

}

// Vorausberechnung der x- und y‑Koordinaten

// 0–59 -> 0–354 = Faktor 6

GradSekunden = Sekunden * 6;

// Minuten+Sekunden in Relation zu 3600 setzen

// 60 / 3600 = 0.01666667

GradMinuten = Minuten * 6 + GradSekunden * 0.01666667;

// 30 / 3600 = 0.0833333

// Stunden+Minuten in Relation zu 360 setzen

// 0–11 -> 0–360

GradStunden = Stunden * 30 + GradMinuten * 0.0833333; // 0–11 -> 0–360

StundePosX = cos((GradStunden - 90) * DEG_TO_RAD);

StundePosY = sin((GradStunden - 90) * DEG_TO_RAD);

MinutePosX = cos((GradMinuten - 90) * DEG_TO_RAD) ;

MinutePosY = sin((GradMinuten - 90) * DEG_TO_RAD);

SekundePosX = cos((GradSekunden - 90) * DEG_TO_RAD);

SekundePosY = sin((GradSekunden - 90) * DEG_TO_RAD);

// nach jeder Minute Minuten-/Stundenzeiger löschen

// oder einmalig beim Start der Anzeige

if (Sekunden == 0 || Start)

{

Start = false;

tft.drawLine(StundenZeigerX, StundenZeigerY, MitteHoehe, MitteHoehe + 1, Kreisfarbe);

// 62 Pixel -> Länge des Stundenzeigers

// Mittelpunkt + 1 -> Mittelpunkt soll nicht gelöscht werden

StundenZeigerX = StundePosX * 62 + MitteHoehe + 1;

StundenZeigerY = StundePosY * 62 + MitteHoehe + 1;

tft.drawLine(MinutenZeigerX, MinutenZeigerY, MitteHoehe, MitteHoehe + 1, Kreisfarbe);

// 84 Pixel -> Länge des Minutenzeigers

// Mittelpunkt + 1 -> Mittelpunkt soll nicht gelöscht werden

MinutenZeigerX = MinutePosX * 84 + MitteHoehe;

MinutenZeigerY = MinutePosY * 84 + MitteHoehe + 1;

}

// Sekundenzeiger löschen

if (!SekundenzeigerKreis) tft.drawLine(SekundenZeigerX, SekundenZeigerY, MitteHoehe, MitteHoehe + 1, Kreisfarbe);

// Kreis am Sekundenzeiger löschen, Radius 5

tft.fillCircle(SekundenZeigerX, SekundenZeigerY, 5, Kreisfarbe);

// 85 Pixel -> Länge des Sekundenzeigers

SekundenZeigerX = SekundePosX * 85 + MitteHoehe + 1;

SekundenZeigerY = SekundePosY * 85 + MitteHoehe + 1;

// Zeiger neu zeichnen

// Sekunden Linie nur anzeigen wenn SekundenzeigerKreis false

if (!SekundenzeigerKreis) tft.drawLine(SekundenZeigerX, SekundenZeigerY, MitteHoehe, MitteHoehe + 1, ROT);

// Minuten

tft.drawLine(MinutenZeigerX, MinutenZeigerY, MitteHoehe, MitteHoehe + 1, Zeigerfarbe);

// Stunden

tft.drawLine(StundenZeigerX, StundenZeigerY, MitteHoehe, MitteHoehe + 1, Zeigerfarbe);

// Kreis an der Spitze des Sekundenzeigers, Radius 5

tft.fillCircle(SekundenZeigerX, SekundenZeigerY, 5, ROT);

// Mittelpunkt zeichnen

tft.fillCircle(MitteHoehe, MitteHoehe + 1, 3, Zeigerfarbe);

}

void ZeigeDatum()

{

tft.fillRect(10, 250, tft.width(), tft.height(), SCHWARZ);

u8g2Schriften.setForegroundColor(GRUEN);

u8g2Schriften.setBackgroundColor(SCHWARZ);

u8g2Schriften.setFont(u8g2_font_helvB14_tf);

u8g2Schriften.setCursor(10, 300);

// Wochentag anzeigen

switch (Zeit.tm_wday)

{

case 0:

u8g2Schriften.print(“Sonntag”);

break;

case 1:

u8g2Schriften.print(“Montag”);

break;

case 2:

u8g2Schriften.print(“Dienstag”);

break;

case 3:

u8g2Schriften.print(“Mittwoch”);

break;

case 4:

u8g2Schriften.print(“Donnerstag”);

break;

case 5:

u8g2Schriften.print(“Freitag”);

break;

case 6:

u8g2Schriften.print(“Samstag”);

break;

}

u8g2Schriften.print(“, ”);

if (Zeit.tm_mday < 10) u8g2Schriften.print(“0”);

u8g2Schriften.print(Zeit.tm_mday);

u8g2Schriften.print(“.”);

// Monat: führende 0 ergänzen

if (Zeit.tm_mon < 9) u8g2Schriften.print(“0”);

// Zählung beginnt mit 0 -> +1

u8g2Schriften.print(Zeit.tm_mon + 1);

u8g2Schriften.print(“.”);

// Anzahl Jahre seit 1900

u8g2Schriften.print(Zeit.tm_year + 1900);

}

Analoge Uhr mit Temperatur-/Luftfeuchtigkeitsanzeige mit DHT

Weitere Bibliothek hinzufügen:

#include "WiFi.h"
#include "time.h"
#include "TFT_eSPI.h"
#include "U8g2_for_TFT_eSPI.h"
#include "DHT.h"

int SENSOR_DHT = 22;

// #define SensorTyp DHT11
#define SensorTyp DHT22

// Sensor einen Namen zuweisen
DHT dht(SENSOR_DHT, SensorTyp); 

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

TFT_eSPI tft = TFT_eSPI();

// WiFi-Daten
char Router[] = "Router_SSID";
char Passwort[] = "xxxxxxxx";

// Variablen des TFTs (Höhe, Breite, Radius)
const int MitteHoehe = 120;
const int MitteBreite = 120;
const int Radius = 120;

// Multiplikatoren für x- y-Positionen der Stunden, Minuten und Sekunden
float SekundePosX = 0, SekundePosY = 0, MinutePosX = 0, MinutePosY = 0, StundePosX = 0, StundePosY = 0;
float GradSekunden = 0, GradMinuten = 0, GradStunden = 0;

// x- y-Koordinaten für die Anzeige Stunden, Minuten und Sekunden
int SekundenZeigerX = MitteHoehe, SekundenZeigerY = MitteHoehe;
int MinutenZeigerX = MitteHoehe, MinutenZeigerY = MitteHoehe;
int StundenZeigerX = MitteHoehe, StundenZeigerY = MitteHoehe; 

// Start wird nur beim ersten Start für den Aufbau des TFTs benötigt
bool Start = 1;

// Variablen für die Markierungen und Punkte und Striche des Ziffernblatts
float PosX, PosY;
int PunktX, PunktY, PunktX1, PunktX2, PunktY1, PunktY2;

// Variablen für die Zeit
int Stunden, Minuten, Sekunden;

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

// Farben innerer Kreis, Randfarbe und Zeigerfarbe
// die Farben der Zeiger können aber auch individuell gesetzt werden
const int Kreisfarbe = SCHWARZ;
const int Zeigerfarbe = WEISS;
const int Randfarbe = BORDEAUX;

// true -> Datum anzeigen
// false -> Datum nicht anzeigen
bool DatumAnzeigen = true;

// Ziffern 12 3 6 9 anzeigen/nicht anzeigen
bool Ziffernanzeigen = true;

// true -> Sekundenzeiger nur als Kreis
bool SekundenzeigerKreis = true;

// 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 Zeitmessung = 0;  

void setup() 
{
  // Sensor starten
  dht.begin();

  Serial.begin(9600);

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

  // Zeitzone: Parameter für die zu ermittelnde Zeit
  configTzTime(Zeitzone, Zeitserver);

  // WiFi starten
  WiFi.mode(WIFI_STA);
  WiFi.begin(Router, Passwort);

  Serial.println("------------------------");

  while (WiFi.status() != WL_CONNECTED) 
  {
    delay(200);
    Serial.print(".");
  }
  
  Serial.println();
  Serial.print("Verbunden mit ");
  Serial.println(Router);
  Serial.print("IP über DHCP: ");
  Serial.println(WiFi.localIP());

  // Zeit holen
  time(&aktuelleZeit);

  // localtime_r -> Zeit in die lokale Zeitzone setzen
  localtime_r(&aktuelleZeit, &Zeit);

  // Zeit in Stunden, Minuten und Sekunden
  Stunden = Zeit.tm_hour, Minuten = Zeit.tm_min, Sekunden = Zeit.tm_sec;
  
  tft.begin();
  tft.setRotation(0);
  tft.fillScreen(SCHWARZ);

  // 4 Pixel breiter äußerer Rand, Farbe au der Farbpalette wählen
  tft.drawCircle(MitteHoehe, MitteBreite, Radius - 1, Randfarbe);
  tft.drawCircle(MitteHoehe, MitteBreite, Radius - 2, Randfarbe);
  tft.drawCircle(MitteHoehe, MitteBreite, Radius - 3, Randfarbe);
  tft.drawCircle(MitteHoehe, MitteBreite, Radius - 4, Randfarbe);

  // innere Fläche bis auf den Rand von 4 Pixeln vollständig löschen
  // wenn andere Farbe als äußerer Rand gewählt wird ergibt sich ein schmaler Rand
  tft.fillCircle(MitteHoehe, MitteBreite, Radius - 4, Kreisfarbe);

  /*
    alle 30° Linie am Rand als Stundenmarkierung zeichnen
    DEG_TO_RAD (= PI/180 = 0.0174532925) -> Winkel in Bogenmaß umrechnen
    sin/cos berechnen die x-/y-Kordinaten des Punktes auf der Kreislinie
  */
  for (int i = 0; i < 360; i += 30) 
  {
    PosX = cos((i - 90) * DEG_TO_RAD);
    PosY = sin((i - 90) * DEG_TO_RAD);

    // kurze Linien zeichnen, von 114 bis 100 vom äußeren Rand aus
    // Farbe individuell wählbar
    int PunktX1 = PosX * 110 + Radius;
    int PunktY1 = PosY * 110 + Radius;
    int PunktX2 = PosX * 100 + Radius;
    int PunktY2 = PosY * 100 + Radius;

    tft.drawLine(PunktX1, PunktY1, PunktX2, PunktY2, Zeigerfarbe);

    // keine Striche an der Position der Zahlen
    if (Ziffernanzeigen)
    {
      if (PunktX1 == 10 || PunktX1 == 120 || PunktX1 == 230)
      {
        tft.drawLine(PunktX1, PunktY1, PunktX2, PunktY2, Kreisfarbe);
      }
    }
  }

  // alle 6 Grad Punkte als Minutenmarkierung zeichnen
  for (int i = 0; i < 360; i += 6) 
  {
    PosX = cos((i - 90) * DEG_TO_RAD);
    PosY = sin((i - 90) * DEG_TO_RAD);

    // Positionen der Punkte
    // 108 -> Abstand vom Mittelpunkt
    PunktX = PosX * 108 + Radius;
    PunktY = PosY * 108 + Radius;
    tft.drawPixel(PunktX, PunktY, Zeigerfarbe);  
  }

  // Markierung 12 3 6 9
   if (Ziffernanzeigen)
  {
    tft.setTextSize(2);
    tft.setTextColor(Zeigerfarbe);
    tft.setCursor(110, 16);
    tft.print("12");

    tft.setCursor(10, 110);
    tft.print("9");

    tft.setCursor(220, 110);
    tft.print("3");
  
    tft.setCursor(113, 220);
    tft.print("6");
  }

  if (DatumAnzeigen) ZeigeDatum();

  TemperaturAnzeigen();

  Zeitmessung = millis() + 1000; 
}

void loop() 
{
  // Sekunden weiter zählen
  if (Zeitmessung < millis()) 
  {
    Zeitmessung += 1000;
    Sekunden ++;

    if (Sekunden == 60) 
    { 
      TemperaturAnzeigen();
      if (DatumAnzeigen) ZeigeDatum();

      // Zeit jede Sekunde mit Zeitserver synchronisieren
      // aktuelle Zeit holen
      time(&aktuelleZeit);

      // localtime_r -> Zeit in die lokale Zeitzone setzen
      localtime_r(&aktuelleZeit, &Zeit);

      // Zeit in Stunden, Minuten und Sekunden
      Stunden = int(Zeit.tm_hour), Minuten = int(Zeit.tm_min), Sekunden = int(Zeit.tm_sec);

      if (Minuten > 59) 
      {
        Minuten = 0;
        Stunden++;  
        if (Stunden > 23) 
        {
          Stunden = 0;
          
          // Datum anzeigen/nicht anzeigen
          if (DatumAnzeigen) ZeigeDatum();
        }
      }
    }

    // Vorausberechnung der x- und y-Koordinaten
    // 0-59 -> 0-354 = Faktor 6
    GradSekunden = Sekunden * 6; 

    // Minuten+Sekunden in Relation zu 3600 setzen
    // 60 / 3600 = 0.01666667         
    GradMinuten = Minuten * 6 + GradSekunden * 0.01666667; 

    // 30 / 3600 = 0.0833333
    // Stunden+Minuten in Relation zu 360 setzen
    // 0-11 -> 0-360 
    GradStunden = Stunden * 30 + GradMinuten * 0.0833333;  // 0-11 -> 0-360 
    StundePosX = cos((GradStunden - 90) * DEG_TO_RAD);
    StundePosY = sin((GradStunden - 90) * DEG_TO_RAD);

    MinutePosX = cos((GradMinuten - 90) * DEG_TO_RAD) ;
    MinutePosY = sin((GradMinuten - 90) * DEG_TO_RAD);

    SekundePosX = cos((GradSekunden - 90) * DEG_TO_RAD);
    SekundePosY = sin((GradSekunden - 90) * DEG_TO_RAD);

    // nach jeder Minute Minuten-/Stundenzeiger löschen
    // oder einmalig beim Start der Anzeige
    if (Sekunden == 0 || Start) 
    {  
      Start = false;
      tft.drawLine(StundenZeigerX, StundenZeigerY, MitteHoehe, MitteHoehe + 1, Kreisfarbe);  

      // 62 Pixel -> Länge des Stundenzeigers
      // Mittelpunkt + 1 -> Mittelpunkt soll nicht gelöscht werden
      StundenZeigerX = StundePosX * 62 + MitteHoehe + 1;
      StundenZeigerY = StundePosY * 62 + MitteHoehe + 1;
      tft.drawLine(MinutenZeigerX, MinutenZeigerY, MitteHoehe, MitteHoehe + 1, Kreisfarbe);

      // 84 Pixel -> Länge des Minutenzeigers
      // Mittelpunkt + 1 -> Mittelpunkt soll nicht gelöscht werden
      MinutenZeigerX = MinutePosX * 84 + MitteHoehe;
      MinutenZeigerY = MinutePosY * 84 + MitteHoehe + 1;
    }
    
    // Kreis am Sekundenzeiger löschen, Radius 5
    tft.fillCircle(SekundenZeigerX, SekundenZeigerY, 5, Kreisfarbe);

    // 85 Pixel -> Länge des Sekundenzeigers
    SekundenZeigerX = SekundePosX * 85 + MitteHoehe + 1;
    SekundenZeigerY = SekundePosY * 85 + MitteHoehe + 1;

    // Zeiger neu zeichnen
    // Sekunden Linie nur anzeigen wenn SekundenzeigerKreis false
    if (!SekundenzeigerKreis) tft.drawLine(SekundenZeigerX, SekundenZeigerY, MitteHoehe, MitteHoehe + 1, ROT);

    // Minuten
    tft.drawLine(MinutenZeigerX, MinutenZeigerY, MitteHoehe, MitteHoehe + 1, Zeigerfarbe);

    // Stunden
    tft.drawLine(StundenZeigerX, StundenZeigerY, MitteHoehe, MitteHoehe + 1, Zeigerfarbe);

    // Kreis an der Spitze des Sekundenzeigers, Radius 5
    tft.fillCircle(SekundenZeigerX, SekundenZeigerY, 5, ROT);

    // Mittelpunkt zeichnen
    tft.fillCircle(MitteHoehe, MitteHoehe + 1, 3, Zeigerfarbe); 
  }
}

void ZeigeDatum()
{
  tft.fillRect(10, 250, 240, 30, SCHWARZ);

  u8g2Schriften.setForegroundColor(GRUEN);   
  u8g2Schriften.setBackgroundColor(SCHWARZ);
  u8g2Schriften.setFont(u8g2_font_helvB14_tf);   
  u8g2Schriften.setCursor(10, 270);

  // Wochentag anzeigen
  switch (Zeit.tm_wday) 
  {
    case 0:
      u8g2Schriften.print("Sonntag");
      break;
    case 1:
      u8g2Schriften.print("Montag");
      break;
    case 2:
      u8g2Schriften.print("Dienstag");
      break;
    case 3:
      u8g2Schriften.print("Mittwoch");
      break;
    case 4:
      u8g2Schriften.print("Donnerstag");
      break;
    case 5:
      u8g2Schriften.print("Freitag");
      break;
    case 6:
      u8g2Schriften.print("Samstag");
      break;
  }

  u8g2Schriften.print(", ");
      
  if (Zeit.tm_mday < 10) u8g2Schriften.print("0");
  u8g2Schriften.print(Zeit.tm_mday);
  u8g2Schriften.print(".");

  // Monat: führende 0 ergänzen
  if (Zeit.tm_mon < 9) u8g2Schriften.print("0");
    
  // Zählung beginnt mit 0 -> +1
  u8g2Schriften.print(Zeit.tm_mon + 1);
  u8g2Schriften.print(".");

  // Anzahl Jahre seit 1900
  u8g2Schriften.print(Zeit.tm_year + 1900);
}

void TemperaturAnzeigen()
{
  // Temperatur lesen 
  String Temperatur = String(dht.readTemperature());

  // replace -> . durch , ersetzen
  Temperatur.replace(".", ",");

  // Luftfeuchtigkeit lesen 
  String Luftfeuchtigkeit = String(dht.readHumidity());

  // replace -> . durch , ersetzen
  Luftfeuchtigkeit.replace(".", ",");

  // Anzeigebereich löschen
  tft.fillRect(10, 275, 240, 45, SCHWARZ);
  u8g2Schriften.setForegroundColor(BLAU);   
  u8g2Schriften.setBackgroundColor(SCHWARZ);
  u8g2Schriften.setCursor(10, 310);
  u8g2Schriften.setFont(u8g2_font_logisoso22_tf);   
  u8g2Schriften.print(Luftfeuchtigkeit + "%");

  u8g2Schriften.setCursor(120, 310);
  u8g2Schriften.setForegroundColor(ROT);
  u8g2Schriften.print(Temperatur + "°C");
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

#include “WiFi.h”

#include “time.h”

#include “TFT_eSPI.h”

#include “U8g2_for_TFT_eSPI.h”

#include “DHT.h”

int SENSOR_DHT = 22;

// #define SensorTyp DHT11

#define SensorTyp DHT22

// Sensor einen Namen zuweisen

DHT dht(SENSOR_DHT, SensorTyp);

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

U8g2_for_TFT_eSPI u8g2Schriften;

TFT_eSPI tft = TFT_eSPI();

// WiFi-Daten

char Router[] = “Router_SSID”;

char Passwort[] = “xxxxxxxx”;

// Variablen des TFTs (Höhe, Breite, Radius)

const int MitteHoehe = 120;

const int MitteBreite = 120;

const int Radius = 120;

// Multiplikatoren für x- y‑Positionen der Stunden, Minuten und Sekunden

float SekundePosX = 0, SekundePosY = 0, MinutePosX = 0, MinutePosY = 0, StundePosX = 0, StundePosY = 0;

float GradSekunden = 0, GradMinuten = 0, GradStunden = 0;

// x- y‑Koordinaten für die Anzeige Stunden, Minuten und Sekunden

int SekundenZeigerX = MitteHoehe, SekundenZeigerY = MitteHoehe;

int MinutenZeigerX = MitteHoehe, MinutenZeigerY = MitteHoehe;

int StundenZeigerX = MitteHoehe, StundenZeigerY = MitteHoehe;

// Start wird nur beim ersten Start für den Aufbau des TFTs benötigt

bool Start = 1;

// Variablen für die Markierungen und Punkte und Striche des Ziffernblatts

float PosX, PosY;

int PunktX, PunktY, PunktX1, PunktX2, PunktY1, PunktY2;

// Variablen für die Zeit

int Stunden, Minuten, Sekunden;

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

// Farben innerer Kreis, Randfarbe und Zeigerfarbe

// die Farben der Zeiger können aber auch individuell gesetzt werden

const int Kreisfarbe = SCHWARZ;

const int Zeigerfarbe = WEISS;

const int Randfarbe = BORDEAUX;

// true -> Datum anzeigen

// false -> Datum nicht anzeigen

bool DatumAnzeigen = true;

// Ziffern 12 3 6 9 anzeigen/nicht anzeigen

bool Ziffernanzeigen = true;

// true -> Sekundenzeiger nur als Kreis

bool SekundenzeigerKreis = true;

// 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 Zeitmessung = 0;

void setup()

{

// Sensor starten

dht.begin();