Analoge Uhr mit BME280 auf ESP32 mit 3,5 Zoll/4 Zoll TFT – Projekte für Arduino und ESP32-Mikrocontroller

Inhalt

20 Minuten

Ziele des Projekts

analoge Uhr mit Datum anzeigen
Uhrzeit digital anzeigen
Messdaten des BME280 darstellen
mit der Touch-Funktion Teile des Bildschirms ausblenden oder Bidschirm dunkel schalten

Beim Modul ESP32-3248S035 handelt es sich um ein 3,5 Zoll großes TFT-Display mit 480×320 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.

Das Modul ESP32-3248S040 verfügt über ein 4 Zoll großes TFT-Display. Bei meinem Modul ist ein ESP32 E verbaut.

Achtung

Für das Programm ist die Version mit USB-C-Anschluss erforderlich.
Nur mit diesem Modul funktioniert der Touch-Treiber der Bibliothek TFT_eSPI.

Konfiguration des Mikrocontrollers

Benötigte Bibliotheken

Zusätzlich benötigte Bibliotheken

Die in den Programmen verwendete Bibliothek U8g2_for_TFT_eSPI kann nicht über die Bibliotheksverwaltung installiert werden, sie muss heruntergeladen werden.

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

Klicke auf der Webseite auf den grünen Button und füge die Bibliothek mit Sketch -> zip-Bibliothek hinzu..

User_Setup.h

Im Verzeichnis /Arduino/libraries/TFT_eSPI (zu finden im aktuellen Benutzerverzeichnis) muss die Datei User_Setup.h angepasst werden.

Achtung

Nach einem Update der Bibliothek gehen die Änderungen verloren.

// Treiber TFT
#define ST7796_DRIVER
#define TFT_WIDTH  320
#define TFT_HEIGHT 480
#define TFT_BACKLIGHT_ON HIGH

// SPI-Pins
#define TFT_MISO 12
#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: , und .
#define LOAD_FONT2
#define LOAD_FONT4
#define LOAD_FONT6
#define LOAD_FONT7
#define LOAD_FONT8
#define SMOOTH_FONT
#define LOAD_GFXFF

// Treiber TFT

#define ST7796_DRIVER

#define TFT_WIDTH 320

#define TFT_HEIGHT 480

#define TFT_BACKLIGHT_ON HIGH

// SPI-Pins

#define TFT_MISO 12

#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: , und .

#define LOAD_FONT2

#define LOAD_FONT4

#define LOAD_FONT6

#define LOAD_FONT7

#define LOAD_FONT8

#define SMOOTH_FONT

#define LOAD_GFXFF

Touchscreen

Touchscreen kalibrieren

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 Modul mit USB-C-Anschluss kann der Touch-Controller der Bibliothek TFT_eSPI verwendet werden.

Für jede gewünschte Rotation des Displays muss das Programm seperat ausgeführt werden.

// Original
// https://github.com/Bodmer/TFT_eSPI/blob/master/examples/Generic/Touch_calibrate/Touch_calibrate.ino
#include "TFT_eSPI.h"     

TFT_eSPI tft = TFT_eSPI();

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

  // gewünschte Rotation setzen
  tft.setRotation(0);

  // Kalibrierung starten
  touch_calibrate();

  tft.fillScreen(TFT_BLACK);
  tft.setTextFont(4);
  tft.println("Kalibrierung beendet!");
  tft.println("Verwende den im Seriellen ");
  tft.println("Monitor angezeigem Code.");
}


void loop() 
{
  // Koordinaten
  uint16_t x = 0, y = 0;

  // wenn der Bildschirm berührt wurde
  bool pressed = tft.getTouch(&x, &y);

  // Draw a white spot at the detected coordinates
  if (pressed) 
  {
    tft.fillCircle(x, y, 2, TFT_WHITE);
  }
}

void touch_calibrate()
{
  uint16_t calData[5];
  int calDataOK = 0;

  tft.fillScreen(TFT_BLACK);
  tft.setCursor(20, 0);
  tft.setTextFont(2);

  tft.setTextColor(TFT_WHITE, TFT_BLACK);

  tft.println("Ecken des Bildschirms werden angezeigt");
  tft.println("    Nacheinander auf die markierten Ecken zeigen");
  tft.setTextFont(1);
  tft.println();

  tft.calibrateTouch(calData, TFT_MAGENTA, TFT_BLACK, 15);

  Serial.println(); 
  Serial.println();
  Serial.println("Diese Kalibrierung verwenden:");
  Serial.println("void setup()");
  Serial.println("{");
  Serial.println("  tft.init();");
  Serial.println("  tft.setRotation(..);");
  Serial.print("  uint16_t calData[5] = ");
  Serial.print("{");

  for (int i = 0; i < 5; i++)
  {
    Serial.print(calData[i]);
    if (i < 4) Serial.print(", ");
  }

  Serial.println("};");
  Serial.println("  tft.setTouch(calData);");
  Serial.println("}");
  Serial.println();
}

// Original

// https://github.com/Bodmer/TFT_eSPI/blob/master/examples/Generic/Touch_calibrate/Touch_calibrate.ino

#include "TFT_eSPI.h"

TFT_eSPI tft = TFT_eSPI();

void setup()

{

Serial.begin(9600);

tft.init();

// gewünschte Rotation setzen

tft.setRotation(0);

// Kalibrierung starten

touch_calibrate();

tft.fillScreen(TFT_BLACK);

tft.setTextFont(4);

tft.println("Kalibrierung beendet!");

tft.println("Verwende den im Seriellen ");

tft.println("Monitor angezeigem Code.");

}

void loop()

{

// Koordinaten

uint16_t x = 0, y = 0;

// wenn der Bildschirm berührt wurde

bool pressed = tft.getTouch(&x, &y);

// Draw a white spot at the detected coordinates

if (pressed)

{

tft.fillCircle(x, y, 2, TFT_WHITE);

}

void touch_calibrate()

{

uint16_t calData[5];

int calDataOK = 0;

tft.fillScreen(TFT_BLACK);

tft.setCursor(20, 0);

tft.setTextFont(2);

tft.setTextColor(TFT_WHITE, TFT_BLACK);

tft.println("Ecken des Bildschirms werden angezeigt");

tft.println(" Nacheinander auf die markierten Ecken zeigen");

tft.setTextFont(1);

tft.println();

tft.calibrateTouch(calData, TFT_MAGENTA, TFT_BLACK, 15);

Serial.println();

Serial.println("Diese Kalibrierung verwenden:");

Serial.println("void setup()");

Serial.println("{");

Serial.println(" tft.init();");

Serial.println(" tft.setRotation(..);");

Serial.print(" uint16_t calData[5] = ");

Serial.print("{");

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

{

Serial.print(calData[i]);

if (i < 4) Serial.print(", ");

}

Serial.println("};");

Serial.println(" tft.setTouch(calData);");

Serial.println("}");

Serial.println();

}

Nach Abschluss des Programms wird das Ergebnis der Kalibrierung im Seriellen Monitor angezeigt.
Je nachdem, wie genau du die Ecken des Bildschirms “getroffen” hast, werden sich die Werte unterscheiden.

Touchscreen testen

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

#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

bool FarbwechselLinkerButton = false;
bool FarbwechselRechterButton = false;

uint16_t x, y;

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

  tft.init();
  tft.setRotation(0);

  // kalibrierte Daten verwenden  // Daten der Touch-Kalibrierung
  uint16_t calData[5] = {258, 3482, 313, 3556, 4};
  tft.setTouch(calData);
  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 eine Berührung erkannt wurde
  if (tft.getTouch(&x, &y))
  {
    KoordinatenAnzeigen(x, y, tft.getTouchRawZ());

    delay(100);
    
    // 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;
    }
  }
}

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

#include "TFT_eSPI.h"

TFT_eSPI tft = TFT_eSPI();

#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

bool FarbwechselLinkerButton = false;

bool FarbwechselRechterButton = false;

uint16_t x, y;

void setup()

{

Serial.begin(9600);

tft.init();

tft.setRotation(0);

// kalibrierte Daten verwenden // Daten der Touch-Kalibrierung

uint16_t calData[5] = {258, 3482, 313, 3556, 4};

tft.setTouch(calData);

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 eine Berührung erkannt wurde

if (tft.getTouch(&x, &y))

{

KoordinatenAnzeigen(x, y, tft.getTouchRawZ());

delay(100);

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

}

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

}

Anschluss des BME280

rot -> VCC
schwarz -> SDA
gelb -> SCL
grün -> GND

Info

⇒BME280

Das Programm

Konfiguration

Das Programm kann auf vielfältige Art und 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)
die Farbe der digitalen Uhrzeit (digitaleZeitFarbe)
Anzeige des Datums (DatumAnzeigen)
true: Datum anzeigen, false: Datum verbergen
Anzeige der digitalen Uhrzeit (ZeitDigital)
true: anzeigen -> Sekundenzeiger wird unabhängig vom Wert der Variable SekundenzeigerKreis als Kreis angezeigt
false: Zeit 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
(nur wenn die digitale Zeit nicht angezeigt wird)
Farbe des Sekundenzeiger (SekundenzeigerFarbe)
die Anzeige der Stundenmarkierungen 12, 3, 6 und 9 (Ziffernanzeigen)
true: Ziffern anzeigen, false: Ziffern verbergen

Bereiche für Touch-Aktionen

grüner Bereich: TFT dunkel schalten
gelber Bereich: Messdaten ausblenden

Erläuterungen zum Quellcode

das Programm verwendet die Funktion WiFiMulti
das WLAN-Netzwerk mit der besten Signalstärke wird automatisch verbunden
ab Zeile 138 werden die verfügbaren WiFi-Netze als Werte-Paar definiert:
SSID des Routers/Repeaters, Passwort
WiFiNetzwerke.addAP("Router_SSID", "xxxxxxxx"); WiFiNetzwerke.addAP("Repeater_1", "xxxxxxxx");
die Synchronisation mit dem NTP-Server kann etwas Zeit in Anspruch nehmen
kommt nach 90 Sekunden keine Verbindung zustande, wird das Programm beendet
der BME280 kann unterschiedliche HEX-Adressen haben:
0x76 oder 0x77
mit diesem ⇒Programm kannst du die Adresse ermitteln
Liste der Zeitzonen https://github.com/nayarsystems/posix_tz_db/blob/master/zones.csv
#define Zeitzone “CET-1CEST,M3.5.0/02,M10.5.0/03”
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
Elemente der Struktur tm der Bibliothek time.h
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)
im setup-Teil werden ab Zeile 157 die Daten aus der Kalibrierung eingetragen
Beispiel:
uint16_t calData[5] = {258, 3482, 313, 3556, 4}; tft.setTouch(calData);

Der Quellcode

#include "WiFi.h"
#include "time.h"
#include "TFT_eSPI.h"
#include "U8g2_for_TFT_eSPI.h"
#include "Adafruit_BME280.h"
#include "WiFiMulti.h"
 
WiFiMulti WiFiNetzwerke;
 
// Name des BME280
Adafruit_BME280 bme;

// I2C-Pins
#define SDA_PIN 32
#define SCL_PIN 25

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

TFT_eSPI tft = TFT_eSPI();

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

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

const int digitaleZeitFarbe = GRAU;

// digitale Uhrzeit anzeigen
bool ZeitDigital = true;

// NTP-Server aus dem Pool
#define Zeitserver "de.pool.ntp.org"

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

tm Zeit;

// Touch-Koordinaten
uint16_t x, y;

// TFT ausschalten
bool Touch = false;

// TFT Messwerte ausschalten
bool DatenAusblenden = false;

void setup() 
{
  // I2C-starten
  Wire.begin(SDA_PIN, SCL_PIN);

  // wenn digitale Uhr angezeigt werden soll -> Sekundenzeiger als Kreis
  if(ZeitDigital) SekundenzeigerKreis = true;

  Serial.begin(9600);

  WiFiNetzwerke.addAP("Router", "xxxxxxx");
  WiFiNetzwerke.addAP("Repeater-1", "xxxxxxx");
  WiFiNetzwerke.addAP("Repeater-2", "xxxxxxxx");

  WiFi.mode(WIFI_STA);

  if (WiFiNetzwerke.run() == WL_CONNECTED) 
  {   
    Serial.println("WiFi verbunden ...");
  }

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

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

  // Daten der Touch-Kalibrierung
  uint16_t calData[5] = {258, 3482, 313, 3556, 4};
  tft.setTouch(calData);

  tft.setRotation(0);
  tft.fillScreen(SCHWARZ);
  u8g2Schriften.setForegroundColor(WEISS);   
  u8g2Schriften.setBackgroundColor(SCHWARZ);

  u8g2Schriften.setCursor(10,20);
  u8g2Schriften.setFont(u8g2_font_helvB14_tf);
  u8g2Schriften.print("WiFi verbunden ...");
 
  // BME280 starten, bei Misserfolg Meldung anzeigen
  if (bme.begin(0x76))
  {
    u8g2Schriften.setCursor(10, 60);
    u8g2Schriften.print("BME280 gestartet!");
  }
 
  else
  {
    u8g2Schriften.setCursor(10, 60);
    u8g2Schriften.print("BME280 nicht gestartet!");
    u8g2Schriften.setCursor(10, 60);
    u8g2Schriften.print("falsche HEX-Adresse");
    while(1);
  }
  // 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");         

  u8g2Schriften.setCursor(10,100);
  u8g2Schriften.print("Warte auf Zeitserver ...");
  
  // 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)
  {
    u8g2Schriften.setCursor(1, 140);
    u8g2Schriften.print("Keine Verbindung");
    u8g2Schriften.setCursor(1, 140);
    u8g2Schriften.print("zum NTP-Server ...");
    
    // Programm beenden
    while(1);
  } 

  // Datum/Zeit erfolgreich synchronisiert
  if (Suche == -1)
  {
    u8g2Schriften.setCursor(10, 140);
    u8g2Schriften.print("Zeit synchronisiert ...");
    u8g2Schriften.setCursor(10, 180);
    u8g2Schriften.print("Uhrzeit: ");
    if (Zeit.tm_hour < 10) u8g2Schriften.print("0");
    u8g2Schriften.print(Zeit.tm_hour);
    u8g2Schriften.print(":");
      
    if (Zeit.tm_min < 10) u8g2Schriften.print("0");
    u8g2Schriften.println(Zeit.tm_min);
  }

  u8g2Schriften.setCursor(10, 220);
  u8g2Schriften.print(WiFi.SSID());
  u8g2Schriften.setCursor(10, 260);
  u8g2Schriften.print(WiFi.localIP());
  u8g2Schriften.setCursor(10, 300);
  u8g2Schriften.print("Signal: " + String(WiFi.RSSI()));

  delay(5000);

  ZeigeDatum();

  time(&aktuelleZeit);
  localtime_r(&aktuelleZeit, &Zeit);

  // Zeit in Stunden, Minuten und Sekunden
  Stunden = Zeit.tm_hour, Minuten = Zeit.tm_min, Sekunden = Zeit.tm_sec;
  
  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 * 155 + Radius;
    int PunktY1 = PosY * 155 + Radius;
    int PunktX2 = PosX * 145 + Radius;
    int PunktY2 = PosY * 145 + Radius;
    tft.drawLine(PunktX1, PunktY1, PunktX2, PunktY2, Zeigerfarbe);
    
    // keine Striche an der Position der Zahlen
    if (Ziffernanzeigen)
    {
      if (PunktX1 == 160 || PunktX1 == 315 || PunktX1 == 5)
      {
        tft.drawLine(PunktX1, PunktY1, PunktX2, PunktY2, Kreisfarbe);
      }  
    }  
  }

  // 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 * 150 + Radius;
    PunktY = PosY * 150 + Radius;
    tft.drawPixel(PunktX, PunktY, Zeigerfarbe);  
  }

  // Markierung 12 3 6 9
  if (Ziffernanzeigen)
  {
    tft.setTextSize(2);
    tft.setTextColor(Zeigerfarbe);
    tft.setCursor(145, 10);
    tft.print("12");
    
    tft.setCursor(10, 153);
    tft.print("9");
    
    tft.setCursor(300, 153);
    tft.print("3");
  
    tft.setCursor(155, 300);
    tft.print("6");
  }

  if (DatumAnzeigen)
  {
    ZeigeDatum();
  }

  DatenAnzeigen();

  if(ZeitDigital) ZeitDigitalAnzeigen();

  Zeitmessung = millis() + 1000; 
}

void loop() 
{
  if (tft.getTouch(&x, &y))
  {
    // Touch auf Uhr -> TFT dunkel schalten
    if (x >= 0 && x <= tft.width() && y >= 0 && y <= 320)
    {
      // TFT ist eingeschaltet -> ausschalten
      if (Touch)
      {
        digitalWrite(TFT_BL, LOW);
        Touch = false;
      }
    
      // TFT ist ausgeschaltet -> einschalten
      else
      {
        digitalWrite(TFT_BL, HIGH);
        Touch = true;
      }
      delay(100);
    }

    // Touch auf Messdaten
    if (x >= 0 && x <= tft.width() && y >= 360 && y <= tft.height())
    {
      // Messdaten ausblenden
      if (DatenAusblenden)
      {
        tft.fillRect(10, 360, tft.width(), tft.height(), SCHWARZ);
        DatenAusblenden = false;
      }
    
      // Messdaten einblenden
      else
      {
        DatenAnzeigen();
        DatenAusblenden = true;
      }
      delay(100);
    }
  }

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

      // 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();
      }
      
      if(ZeitDigital) ZeitDigitalAnzeigen();
    }

    // Vorausberechnung der x- und y-Koordinaten
    // alle 6° eine Sekunde vorwärts
    GradSekunden = Sekunden * 6;    

    // alle 6° eine Minute vorwärts     
    GradMinuten = Minuten * 6; 

    // alle 30° eine Stunde vorwärts
    // 30 / 3600 = 0.0833333
    // sorgt dafür, dass der Stundenzeiger entsprechend 
    // der Anzahl der Minuten weiter "wandert"
    GradStunden = Stunden * 30 + GradMinuten * 0.0833333; 
    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;

      DatenAnzeigen();

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

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

      // 120 Pixel -> Länge des Minutenzeigers
      // Mittelpunkt + 1 -> Mittelpunkt soll nicht gelöscht werden
      MinutenZeigerX = MinutePosX * 120 + MitteHoehe;
      MinutenZeigerY = MinutePosY * 120 + 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);

    // 125 Pixel -> Länge des Sekundenzeigers
    SekundenZeigerX = SekundePosX * 125 + MitteHoehe + 1;
    SekundenZeigerY = SekundePosY * 125 + 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()
{
  u8g2Schriften.setForegroundColor(GRUEN);  
  u8g2Schriften.setBackgroundColor(SCHWARZ);
  u8g2Schriften.setCursor(10, 350);
  u8g2Schriften.setFont(u8g2_font_fub20_tf);
      
  // Bildschirmbereich für das Datum löschen
  tft.fillRect(10, 320, tft.width(), tft.height(), SCHWARZ);
 
  // 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 DatenAnzeigen()
{
  // Temperatur lesen
  String Temperatur = String(bme.readTemperature(), 1);
 
  // replace -> . durch , ersetzen
  Temperatur.replace(".", ",");
 
  String Luftdruck = String(int(bme.readPressure() / 100.0)); 
 
  String Luftfeuchtigkeit = String(bme.readHumidity(), 1);
  tft.fillRect(10, 370, tft.width(), tft.height(), SCHWARZ);
  u8g2Schriften.setForegroundColor(BLAU);  
  u8g2Schriften.setBackgroundColor(SCHWARZ);
  u8g2Schriften.setCursor(10, 390);
 
  // alternative Schriften
  // u8g2Schriften.setFont(u8g2_font_fub30_tf);
  // u8g2Schriften.setFont(u8g2_font_logisoso28_tf);
  u8g2Schriften.setFont(u8g2_font_helvB24_te);
 
  u8g2Schriften.print(Luftdruck + " hPa ");
 
  u8g2Schriften.setCursor(10, 430);
  u8g2Schriften.setForegroundColor(ROT);  
  u8g2Schriften.setBackgroundColor(SCHWARZ);
  u8g2Schriften.print(Temperatur + "°C");
 
  u8g2Schriften.setCursor(10, 470);
  u8g2Schriften.setForegroundColor(GRUEN);  
  u8g2Schriften.setBackgroundColor(SCHWARZ);
  u8g2Schriften.print(Luftfeuchtigkeit + "%");
}
 
void ZeitDigitalAnzeigen()
{
  // Hintergrund digitale Uhr
  tft.fillRect(80, 180, 165, 65, Kreisfarbe);
 
  u8g2Schriften.setFont(u8g2_font_fub42_tf);
  u8g2Schriften.setCursor(90, 240);
  u8g2Schriften.setBackgroundColor(Kreisfarbe);
 
  u8g2Schriften.setForegroundColor(digitaleZeitFarbe);
    
  if (Zeit.tm_hour < 10) u8g2Schriften.print("0");
  u8g2Schriften.print(Zeit.tm_hour);
  u8g2Schriften.print(":");
      
  if (Zeit.tm_min < 10) u8g2Schriften.print("0");
  u8g2Schriften.println(Zeit.tm_min);
}

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

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

#include "WiFi.h"

#include "time.h"

#include "TFT_eSPI.h"

#include "U8g2_for_TFT_eSPI.h"

#include "Adafruit_BME280.h"

#include "WiFiMulti.h"

WiFiMulti WiFiNetzwerke;

// Name des BME280

Adafruit_BME280 bme;

// I2C-Pins

#define SDA_PIN 32

#define SCL_PIN 25

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

U8g2_for_TFT_eSPI u8g2Schriften;

TFT_eSPI tft = TFT_eSPI();

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

const int MitteHoehe = 160;

const int MitteBreite = 160;

const int Radius = 160;

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

const int digitaleZeitFarbe = GRAU;

// digitale Uhrzeit anzeigen

bool ZeitDigital = true;

// NTP-Server aus dem Pool

#define Zeitserver "de.pool.ntp.org"

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

tm Zeit;

// Touch-Koordinaten

uint16_t x, y;

// TFT ausschalten

bool Touch = false;

// TFT Messwerte ausschalten

bool DatenAusblenden = false;

void setup()

{

// I2C-starten

Wire.begin(SDA_PIN, SCL_PIN);

// wenn digitale Uhr angezeigt werden soll -> Sekundenzeiger als Kreis

if(ZeitDigital) SekundenzeigerKreis = true;

Serial.begin(9600);

WiFiNetzwerke.addAP("Router", "xxxxxxx");

WiFiNetzwerke.addAP("Repeater-1", "xxxxxxx");

WiFiNetzwerke.addAP("Repeater-2", "xxxxxxxx");

WiFi.mode(WIFI_STA);

if (WiFiNetzwerke.run() == WL_CONNECTED)

{

Serial.println("WiFi verbunden ...");

}

// Schriften von u8g2 tft zuordnen

u8g2Schriften.begin(tft);

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

configTzTime(Zeitzone, Zeitserver);

tft.begin();

// Daten der Touch-Kalibrierung

uint16_t calData[5] = {258, 3482, 313, 3556, 4};

tft.setTouch(calData);

tft.setRotation(0);

tft.fillScreen(SCHWARZ);

u8g2Schriften.setForegroundColor(WEISS);

u8g2Schriften.setBackgroundColor(SCHWARZ);

u8g2Schriften.setCursor(10,20);

u8g2Schriften.setFont(u8g2_font_helvB14_tf);

u8g2Schriften.print("WiFi verbunden ...");

// BME280 starten, bei Misserfolg Meldung anzeigen

if (bme.begin(0x76))

{

u8g2Schriften.setCursor(10, 60);

u8g2Schriften.print("BME280 gestartet!");

}

else

{

u8g2Schriften.setCursor(10, 60);

u8g2Schriften.print("BME280 nicht gestartet!");

u8g2Schriften.setCursor(10, 60);

u8g2Schriften.print("falsche HEX-Adresse");

while(1);

}

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

u8g2Schriften.setCursor(10,100);

u8g2Schriften.print("Warte auf Zeitserver ...");

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

{

u8g2Schriften.setCursor(1, 140);

u8g2Schriften.print("Keine Verbindung");

u8g2Schriften.setCursor(1, 140);

u8g2Schriften.print("zum NTP-Server ...");

// Programm beenden

while(1);

}

// Datum/Zeit erfolgreich synchronisiert

if (Suche == -1)

{

u8g2Schriften.setCursor(10, 140);

u8g2Schriften.print("Zeit synchronisiert ...");

u8g2Schriften.setCursor(10, 180);

u8g2Schriften.print("Uhrzeit: ");

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

u8g2Schriften.print(Zeit.tm_hour);

u8g2Schriften.print(":");

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

u8g2Schriften.println(Zeit.tm_min);

}

u8g2Schriften.setCursor(10, 220);

u8g2Schriften.print(WiFi.SSID());

u8g2Schriften.setCursor(10, 260);

u8g2Schriften.print(WiFi.localIP());

u8g2Schriften.setCursor(10, 300);

u8g2Schriften.print("Signal: " + String(WiFi.RSSI()));

delay(5000);

ZeigeDatum();

time(&aktuelleZeit);

localtime_r(&aktuelleZeit, &Zeit);

// Zeit in Stunden, Minuten und Sekunden

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

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 * 155 + Radius;

int PunktY1 = PosY * 155 + Radius;

int PunktX2 = PosX * 145 + Radius;

int PunktY2 = PosY * 145 + Radius;

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

// keine Striche an der Position der Zahlen

if (Ziffernanzeigen)

{

if (PunktX1 == 160 || PunktX1 == 315 || PunktX1 == 5)

{

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

}

// 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 * 150 + Radius;

PunktY = PosY * 150 + Radius;

tft.drawPixel(PunktX, PunktY, Zeigerfarbe);

}

// Markierung 12 3 6 9

if (Ziffernanzeigen)

{

tft.setTextSize(2);

tft.setTextColor(Zeigerfarbe);

tft.setCursor(145, 10);

tft.print("12");

tft.setCursor(10, 153);

tft.print("9");

tft.setCursor(300, 153);

tft.print("3");

tft.setCursor(155, 300);

tft.print("6");

}

if (DatumAnzeigen)

{

ZeigeDatum();

}

DatenAnzeigen();

if(ZeitDigital) ZeitDigitalAnzeigen();

Zeitmessung = millis() + 1000;

}

void loop()

{

if (tft.getTouch(&x, &y))

{

// Touch auf Uhr -> TFT dunkel schalten

if (x >= 0 && x <= tft.width() && y >= 0 && y <= 320)

{

// TFT ist eingeschaltet -> ausschalten

if (Touch)

{

digitalWrite(TFT_BL, LOW);

Touch = false;

}

// TFT ist ausgeschaltet -> einschalten

else

{

digitalWrite(TFT_BL, HIGH);

Touch = true;

}

delay(100);

}

// Touch auf Messdaten

if (x >= 0 && x <= tft.width() && y >= 360 && y <= tft.height())

{

// Messdaten ausblenden

if (DatenAusblenden)

{

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

DatenAusblenden = false;

}

// Messdaten einblenden

else

{

DatenAnzeigen();

DatenAusblenden = true;

}

delay(100);

}

// Sekunden weiter zählen

if (Zeitmessung < millis())

{

Zeitmessung += 1000;

Sekunden++;

if (Sekunden == 60)

{

Sekunden = 0;

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

}

if(ZeitDigital) ZeitDigitalAnzeigen();

}

// Vorausberechnung der x- und y-Koordinaten

// alle 6° eine Sekunde vorwärts

GradSekunden = Sekunden * 6;

// alle 6° eine Minute vorwärts

GradMinuten = Minuten * 6;

// alle 30° eine Stunde vorwärts

// 30 / 3600 = 0.0833333

// sorgt dafür, dass der Stundenzeiger entsprechend

// der Anzahl der Minuten weiter "wandert"

GradStunden = Stunden * 30 + GradMinuten * 0.0833333;

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;

DatenAnzeigen();

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

// 85 Pixel -> Länge des Stundenzeigers

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

StundenZeigerX = StundePosX * 85 + MitteHoehe + 1;

StundenZeigerY = StundePosY * 85 + MitteHoehe + 1;

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

// 120 Pixel -> Länge des Minutenzeigers

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

MinutenZeigerX = MinutePosX * 120 + MitteHoehe;

MinutenZeigerY = MinutePosY * 120 + 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);

// 125 Pixel -> Länge des Sekundenzeigers

SekundenZeigerX = SekundePosX * 125 + MitteHoehe + 1;

SekundenZeigerY = SekundePosY * 125 + 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()

{

u8g2Schriften.setForegroundColor(GRUEN);

u8g2Schriften.setBackgroundColor(SCHWARZ);

u8g2Schriften.setCursor(10, 350);

u8g2Schriften.setFont(u8g2_font_fub20_tf);

// Bildschirmbereich für das Datum löschen

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

// 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 DatenAnzeigen()

{

// Temperatur lesen

String Temperatur = String(bme.readTemperature(), 1);

// replace -> . durch , ersetzen

Temperatur.replace(".", ",");

String Luftdruck = String(int(bme.readPressure() / 100.0));

String Luftfeuchtigkeit = String(bme.readHumidity(), 1);

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

u8g2Schriften.setForegroundColor(BLAU);

u8g2Schriften.setBackgroundColor(SCHWARZ);

u8g2Schriften.setCursor(10, 390);

// alternative Schriften

// u8g2Schriften.setFont(u8g2_font_fub30_tf);

// u8g2Schriften.setFont(u8g2_font_logisoso28_tf);

u8g2Schriften.setFont(u8g2_font_helvB24_te);

u8g2Schriften.print(Luftdruck + " hPa ");

u8g2Schriften.setCursor(10, 430);

u8g2Schriften.setForegroundColor(ROT);

u8g2Schriften.setBackgroundColor(SCHWARZ);

u8g2Schriften.print(Temperatur + "°C");

u8g2Schriften.setCursor(10, 470);

u8g2Schriften.setForegroundColor(GRUEN);

u8g2Schriften.setBackgroundColor(SCHWARZ);

u8g2Schriften.print(Luftfeuchtigkeit + "%");

}

void ZeitDigitalAnzeigen()

{

// Hintergrund digitale Uhr

tft.fillRect(80, 180, 165, 65, Kreisfarbe);

u8g2Schriften.setFont(u8g2_font_fub42_tf);

u8g2Schriften.setCursor(90, 240);

u8g2Schriften.setBackgroundColor(Kreisfarbe);

u8g2Schriften.setForegroundColor(digitaleZeitFarbe);

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

u8g2Schriften.print(Zeit.tm_hour);

u8g2Schriften.print(":");

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

u8g2Schriften.println(Zeit.tm_min);

}

Quellen

Letzte Aktualisierung: Juni 17, 2026 @ 7:19