Inhalt
- Die Hardware
- Grafische Funktionen
- Touch-Screen verwenden
- Beispielprogramme mit der Bibliothek TFT_eSPI
- Analoge Uhr
- Analoge Uhr mit Temperatur-/Luftfeuchtigkeitsanzeige mit DHT
- Analoge Uhr mit Temperatur-/Luftdruckanzeige mit BMP280
- Temperatur und Luftfeuchtigkeit mit DHT-Sensor
- Temperatur und Luftfeuchtigkeit mit DHT-Sensor und Touchscreen-Bedienung
- Temperatur und Luftdruck mit BMP280
- Analoge Uhr mit Messdaten BMP280 und AHT20
- Wecker mit Touch-Bedienung
- Geburtstagskalender
- Fotoschau
- Quellen
Die Hardware
Bei den Modulen ESP32-2432S028 und ESP32-JC2432W328C handelt es sich um 2,8 Zoll große TFT-Displays mit 320×240 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
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);
}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);
}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
}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);
}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:
- ILI9341(ESP32-2432S028 mit Mikro-USB-Anschluss)
- ST7789 (ESP32-2432S028 mit USB-C-Anschluss und ESP32-JC2432W328)
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_GFXFFDatei 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
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
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);
}
}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));
}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);
}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");
}Analoge Uhr mit Temperatur-/Luftdruckanzeige mit BMP280
Zusätzliche Bibliothek installieren
#include "WiFi.h"
#include "time.h"
#include "TFT_eSPI.h"
#include "U8g2_for_TFT_eSPI.h"
#include "Adafruit_BMP280.h"
Adafruit_BMP280 bmp;
// Pins anpassen
#define SDA_PIN 22
#define SCL_PIN 27
// 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);
// Wire mit I2C-Pins starten
Wire.begin(SDA_PIN, SCL_PIN);
// bmp.begin(0x77);
bmp.begin(0x76);
// 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();
DatenAnzeigen();
Zeitmessung = millis() + 1000;
}
void loop()
{
// Sekunden weiter zählen
if (Zeitmessung < millis())
{
Zeitmessung += 1000;
Sekunden++;
if (Sekunden == 60)
{
DatenAnzeigen();
// 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, 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 DatenAnzeigen()
{
// Temperatur lesen
String Temperatur = String(bmp.readTemperature());
// replace -> . durch , ersetzen
Temperatur.replace(".", ",");
String Luftdruck = String(bmp.readPressure() / 100);
Luftdruck.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_helvB18_tf);
u8g2Schriften.print(Luftdruck + " hPa");
u8g2Schriften.setCursor(150, 310);
u8g2Schriften.setForegroundColor(ROT);
u8g2Schriften.print(Temperatur + "°C");
}Temperatur und Luftfeuchtigkeit mit DHT-Sensor
JST-Stecker 1,25 mm mit vier Pins
schwarz -> GND DHT
blau (22) -> Datenpin DHT
gelb (27) -> nicht angeschlossen
rot -> VCC DHT
#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();
#include "DHT.h"
int SENSOR_DHT = 22;
#define SensorTyp DHT22
// Sensor einen Namen zuweisen
DHT dht(SENSOR_DHT, SensorTyp);
// 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 Messwerte/Piktogramm
#define FarbeLuftfeuchtigkeit GRUEN
#define FarbeTemperatur BLAU
void setup()
{
// Sensor starten
dht.begin();
tft.init();
tft.setRotation(1);
tft.fillScreen(SCHWARZ);
// Schriften von u8g2 tft zuordnen
u8g2Schriften.begin(tft);
}
void loop()
{
TemperaturAnzeigen();
delay(10000);
}
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(".", ",");
// Bereich für die Messwerte löschen
tft.fillRect(20, 40, 270, 150, SCHWARZ);
u8g2Schriften.setCursor(20, 100);
u8g2Schriften.setForegroundColor(FarbeLuftfeuchtigkeit);
u8g2Schriften.setFont(u8g2_font_logisoso58_tf);
u8g2Schriften.print(Luftfeuchtigkeit + "%");
u8g2Schriften.setCursor(20, 180);
u8g2Schriften.setForegroundColor(FarbeTemperatur);
u8g2Schriften.print(Temperatur + "°C");
}Temperatur und Luftfeuchtigkeit mit DHT-Sensor und Touchscreen-Bedienung
#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();
#include "XPT2046_Touchscreen_TT.h"
#include "DHT.h"
int SENSOR_DHT = 22;
#define SensorTyp DHT22
// Sensor einen Namen zuweisen
DHT dht(SENSOR_DHT, SensorTyp);
// Touchscreen Koordinaten (z = Druck)
int x, y, z;
// SPI-Pins als Hardware-SPI
SPIClass touchscreenSPI = SPIClass(VSPI);
XPT2046_Touchscreen touchscreen(TOUCH_CS, TOUCH_IRQ);
// 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 Messwerte/Piktogramm
#define FarbeLuftfeuchtigkeit BLAU
#define FarbeTemperatur ROT
// Arrays Piktogramme
const unsigned char Thermometer [] PROGMEM = {
// 'Thermometer, 34x70px
0x00, 0x07, 0xf0, 0x00, 0x00, 0x00, 0x0f, 0xfc, 0x00, 0x00, 0x00, 0x3f, 0xfe, 0x00, 0x00, 0x00,
0x7c, 0x0f, 0x00, 0x00, 0x00, 0x70, 0x07, 0x80, 0x00, 0x00, 0xe0, 0x03, 0xc0, 0x00, 0x00, 0xe0,
0x01, 0xc0, 0x00, 0x01, 0xc0, 0x01, 0xc0, 0x00, 0x01, 0xc0, 0x01, 0xc0, 0x00, 0x01, 0xc0, 0x01,
0xc0, 0x00, 0x01, 0xc0, 0x01, 0xc0, 0x00, 0x0f, 0xc0, 0x01, 0xc0, 0x00, 0x0f, 0xc0, 0x01, 0xc0,
0x00, 0x01, 0xc0, 0x01, 0xc0, 0x00, 0x00, 0xc0, 0x01, 0xc0, 0x00, 0x00, 0xc0, 0x01, 0xc0, 0x00,
0x00, 0xc0, 0x01, 0xc0, 0x00, 0x00, 0xc0, 0x01, 0xc0, 0x00, 0x0f, 0xc0, 0x01, 0xc0, 0x00, 0x0f,
0xc0, 0x01, 0xc0, 0x00, 0x01, 0xc0, 0x01, 0xc0, 0x00, 0x00, 0xc0, 0x01, 0xc0, 0x00, 0x00, 0xc0,
0x01, 0xc0, 0x00, 0x00, 0xc0, 0x01, 0xc0, 0x00, 0x00, 0xc0, 0x01, 0xc0, 0x00, 0x0f, 0xc0, 0x01,
0xc0, 0x00, 0x0f, 0xc0, 0x01, 0xc0, 0x00, 0x01, 0xc0, 0x01, 0xc0, 0x00, 0x00, 0xc3, 0xe1, 0xc0,
0x00, 0x00, 0xc3, 0xf1, 0xc0, 0x00, 0x00, 0xc3, 0xf1, 0xc0, 0x00, 0x0f, 0xc3, 0xf1, 0xc0, 0x00,
0x0f, 0xc3, 0xf1, 0xc0, 0x00, 0x0f, 0xc3, 0xf1, 0xc0, 0x00, 0x00, 0xc3, 0xf1, 0xc0, 0x00, 0x00,
0xc3, 0xf1, 0xc0, 0x00, 0x00, 0xc3, 0xf1, 0xc0, 0x00, 0x00, 0xc3, 0xf1, 0xc0, 0x00, 0x00, 0xc3,
0xf1, 0xc0, 0x00, 0x00, 0xc3, 0xf1, 0xc0, 0x00, 0x03, 0xc3, 0xf1, 0xf0, 0x00, 0x07, 0xc3, 0xf0,
0xf8, 0x00, 0x0f, 0x03, 0xf0, 0x7c, 0x00, 0x0e, 0x03, 0xe0, 0x3c, 0x00, 0x1c, 0x07, 0xf0, 0x1e,
0x00, 0x3c, 0x1f, 0xfc, 0x0f, 0x00, 0x38, 0x3f, 0xfe, 0x0f, 0x00, 0x78, 0x7f, 0xff, 0x07, 0x80,
0x70, 0x7f, 0xff, 0x87, 0x80, 0x70, 0x7f, 0xff, 0x83, 0x80, 0xf0, 0xff, 0xff, 0x83, 0xc0, 0xf0,
0xff, 0xff, 0xc3, 0xc0, 0xf0, 0xff, 0xff, 0xc3, 0xc0, 0xf0, 0xff, 0xff, 0xc3, 0xc0, 0xf0, 0xff,
0xff, 0xc3, 0xc0, 0xf0, 0xff, 0xff, 0x83, 0xc0, 0x70, 0x7f, 0xff, 0x83, 0x80, 0x70, 0x7f, 0xff,
0x87, 0x80, 0x78, 0x3f, 0xff, 0x07, 0x80, 0x38, 0x3f, 0xfe, 0x0f, 0x00, 0x3c, 0x0f, 0xfc, 0x0f,
0x00, 0x1e, 0x03, 0xe0, 0x1e, 0x00, 0x1f, 0x00, 0x00, 0x3e, 0x00, 0x0f, 0x00, 0x00, 0x7c, 0x00,
0x07, 0xe0, 0x01, 0xf8, 0x00, 0x03, 0xf8, 0x07, 0xf0, 0x00, 0x00, 0xff, 0xff, 0xc0, 0x00, 0x00,
0x7f, 0xff, 0x80, 0x00, 0x00, 0x1f, 0xfe, 0x00, 0x00, 0x00, 0x03, 0xf0, 0x00, 0x00
};
const unsigned char Regen [] PROGMEM = {
// 'Regen, 60x49px
0x00, 0x00, 0x00, 0x08, 0x20, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x02, 0x08, 0x21, 0x04, 0x10, 0x00, 0x00, 0x00, 0x06, 0x18, 0x63, 0x0c, 0x30, 0x80, 0x00,
0x00, 0x06, 0x10, 0x63, 0x0c, 0x31, 0x80, 0x00, 0x00, 0x00, 0x10, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x20, 0x84, 0x10, 0x41, 0x08, 0x20, 0x00, 0x00, 0x61, 0x8c, 0x30, 0xc3, 0x18, 0x60, 0x00,
0x08, 0xc1, 0x8c, 0x30, 0xc3, 0x18, 0x61, 0x00, 0x00, 0x41, 0x04, 0x20, 0x82, 0x08, 0x40, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x08, 0x30, 0x86, 0x18, 0x43, 0x04, 0x30, 0x80,
0x18, 0x71, 0x86, 0x18, 0xc3, 0x0c, 0x31, 0x80, 0x18, 0x21, 0x84, 0x10, 0xc3, 0x0c, 0x21, 0x80,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x82, 0x18, 0x21, 0x04, 0x10, 0x42, 0x18, 0x40,
0x86, 0x18, 0x63, 0x0c, 0x30, 0xc6, 0x18, 0xc0, 0x86, 0x10, 0x63, 0x0c, 0x30, 0xc6, 0x18, 0xc0,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x18, 0x21, 0x04, 0x10, 0xc2, 0x0c, 0x21, 0x00, 0x30, 0x63, 0x0c, 0x31, 0xc6, 0x0c, 0x63, 0x00,
0x30, 0x63, 0x0c, 0x31, 0x86, 0x18, 0x63, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x06, 0x10, 0x43, 0x08, 0x20, 0x86, 0x10, 0x00, 0x06, 0x30, 0xc3, 0x18, 0x61, 0x86, 0x30, 0x00,
0x04, 0x30, 0xc2, 0x18, 0x61, 0x8c, 0x30, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x08, 0x00, 0x80, 0x00, 0x00, 0x0c, 0x30, 0xc6, 0x18, 0x61, 0x00, 0x00,
0x00, 0x00, 0x61, 0xc6, 0x18, 0x60, 0x00, 0x00, 0x00, 0x00, 0x60, 0x86, 0x10, 0x60, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};
void setup()
{
Serial.begin(9600);
// Sensor starten
dht.begin();
// SPI-Bus für den Touchscreen starten
touchscreenSPI.begin(TOUCH_CLK, TOUCH_MISO, TOUCH_MOSI, TOUCH_CS);
touchscreen.begin(touchscreenSPI);
tft.begin();
tft.setRotation(1);
tft.fillScreen(SCHWARZ);
// Schriften von u8g2 tft zuordnen
u8g2Schriften.begin(tft);
// Button
tft.fillRect(20, 180, 200, 50, ROT);
tft.drawRoundRect(20, 180, 200, 50, 5, WEISS);
tft.drawRoundRect(19, 179, 199, 49, 5, WEISS);
u8g2Schriften.setCursor(30, 210);
u8g2Schriften.setForegroundColor(WEISS);
u8g2Schriften.setBackgroundColor(ROT);
u8g2Schriften.setFont(u8g2_font_inb16_mf);
u8g2Schriften.print("Aktualisieren");
/*
Piktogramme anzeigen
Parameter:
Position x-/y-Koordinate
Name des Arrays
Bildgröße in Pixel x/y
Farbe
*/
tft.drawBitmap(1, 30, Regen, 60, 49, FarbeLuftfeuchtigkeit);
tft.drawBitmap(10, 100, Thermometer, 34, 70, FarbeTemperatur);
TemperaturAnzeigen();
}
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;
// Kordinaten im Seriellen Monitor anzeigen
KoordinatenAnzeigen(x, y, z);
// die Koordinaten werden durch die Punkte des Buttons festgelegt
if (x >= 20 && x <= 200 && y >= 180 && y <= 250)
{
TemperaturAnzeigen();
}
}
delay(100);
}
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(".", ",");
// Bereich für die Messwerte löschen
tft.fillRect(65, 10, 270, 150, SCHWARZ);
u8g2Schriften.setBackgroundColor(SCHWARZ);
u8g2Schriften.setCursor(70, 80);
u8g2Schriften.setForegroundColor(FarbeLuftfeuchtigkeit);
u8g2Schriften.setFont(u8g2_font_logisoso58_tf);
u8g2Schriften.print(Luftfeuchtigkeit + "%");
u8g2Schriften.setCursor(70, 160);
u8g2Schriften.setForegroundColor(FarbeTemperatur);
u8g2Schriften.setForegroundColor(FarbeTemperatur);
u8g2Schriften.print(Temperatur + "°C");
}
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();
}Temperatur und Luftdruck mit BMP280
JST-Stecker 1,25 mm mit vier Pins
schwarz -> GND
blau -> SDA (22)
gelb -> SCL (27)
rot -> VCC
ESP32-2432S028
Der BMP280 wird mit I²C angeschlossen. Der normale I²C-Pin 21 kann nicht verwendet werden, weil er die Hintergrundbeleuchtung des Displays einschaltet. Die I²C-Pins müssen daher "umgelenkt" werden.
ESP32-JC2432W328
Beim ESP32-JC2432W328 wurde der Pin für die Hintergrundbeleuchtung auf Pin 27 gesetzt. Daher können die Standard-I²C-Pins verwendet werden.
Die Standard-HEX-Adresse des BMP280 ist 0×77. In diesem Fall genügt der Aufruf bmp.begin().
Wenn das nicht funktioniert, kannst du die HEX-Adresse mit folgenden Programm herausfinden.
Dem Aufruf von bmp.begin muss dann in den Klammern die HEX-Adresse mitgeteilt werden.
#include "Wire.h"
// I2C-Pins umlenken
#define SDA_PIN 22
// #define SCL_PIN 21
#define SCL_PIN 27
void setup()
{
// Wire mit geänderten I2C-Pins starten
Wire.begin(SDA_PIN, SCL_PIN);
Serial.begin(9600);
delay(1000);
Serial.print("I2C Scanner");
}
void loop()
{
byte Fehler, Adresse;
int Geraete = 0;
Serial.println("Starte Scanvorgang");
for (Adresse = 1; Adresse < 127; Adresse++ )
{
// Übertragung starten
Wire.beginTransmission(Adresse);
// wenn die Übertragung beendet wird
Fehler = Wire.endTransmission();
if (Fehler == 0)
{
Serial.print("I2C Gerät gefunden - Adresse: 0x");
if (Adresse < 16) Serial.print("0");
Serial.print(Adresse, HEX);
Serial.println("");
Geraete++;
}
}
if (Geraete == 0) Serial.println("Keine I2C Geräte gefunden\n");
else Serial.println("Scanvorgang abgeschlossen");
delay(5000);
}Das Programm
#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();
#include "Adafruit_BMP280.h"
Adafruit_BMP280 bmp;
#define SDA_PIN 22
// #define SCL_PIN 21
#define SCL_PIN 27
// 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()
{
// Sensor starten
Wire.begin(SDA_PIN, SCL_PIN);
bmp.begin(0x76);
tft.init();
tft.setRotation(1);
tft.fillScreen(SCHWARZ);
// Schriften von u8g2 tft zuordnen
u8g2Schriften.begin(tft);
}
void loop()
{
DatenAnzeigen();
delay(10000);
}
void DatenAnzeigen()
{
// Temperatur lesen
String Temperatur = String(bmp.readTemperature());
// replace -> . durch , ersetzen
Temperatur.replace(".", ",");
String Luftdruck = String(bmp.readPressure() / 100);
Luftdruck.replace(".", ",");
// Bereich für die Messwerte löschen
tft.fillRect(1, 40, 300, 150, SCHWARZ);
u8g2Schriften.setCursor(10, 100);
u8g2Schriften.setForegroundColor(BLAU);
u8g2Schriften.setFont(u8g2_font_logisoso42_tf);
u8g2Schriften.print(Luftdruck + " hPa");
u8g2Schriften.setCursor(10, 180);
u8g2Schriften.setForegroundColor(ROT);
u8g2Schriften.print(Temperatur + "°C");
}Analoge Uhr mit Messdaten BMP280 und AHT20
Zusätzlich benötigte Bibliothek
#include "WiFi.h"
#include "time.h"
#include "TFT_eSPI.h"
#include "U8g2_for_TFT_eSPI.h"
#include "Adafruit_BMP280.h"
#include "Adafruit_AHTX0.h"
Adafruit_BMP280 bmp;
Adafruit_AHTX0 aht;
// Pins anpassen
#define SDA_PIN 22
#define SCL_PIN 27
// 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 = false;
// 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 = Somm (dst = daylight saving time)
*/
tm Zeit;
unsigned long Zeitmessung = 0;
void setup()
{
// Wire mit I2C-Pins starten
Wire.begin(SDA_PIN, SCL_PIN);
// bmp.begin(0x77);
bmp.begin(0x76);
aht.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();
DatenAnzeigen();
Zeitmessung = millis() + 1000;
}
void loop()
{
// Sekunden weiter zählen
if (Zeitmessung < millis())
{
Zeitmessung += 1000;
Sekunden ++;
if (Sekunden == 60)
{
if (DatumAnzeigen) ZeigeDatum();
DatenAnzeigen();
// 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;
}
}
// 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, 240, tft.width(), tft.height(), SCHWARZ);
u8g2Schriften.setForegroundColor(GRUEN);
u8g2Schriften.setBackgroundColor(SCHWARZ);
u8g2Schriften.setFont(u8g2_font_helvB14_tf);
u8g2Schriften.setCursor(10, 260);
// 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()
{
// aht20 Messwerte holen
sensors_event_t Luftfeuchtigkeit, Temperatur;
aht.getEvent(&Luftfeuchtigkeit, &Temperatur);
// bmp280
// Temperatur lesen
String TemperaturAnzeige = String(bmp.readTemperature());
// replace -> . durch , ersetzen
TemperaturAnzeige.replace(".", ",");
String Luftdruck = String(bmp.readPressure() / 100);
Luftdruck.replace(".", ",");
String LuftfeuchtigkeitAnzeige = String(Luftfeuchtigkeit.relative_humidity);
LuftfeuchtigkeitAnzeige.replace(".", ",");
u8g2Schriften.setForegroundColor(BLAU);
u8g2Schriften.setBackgroundColor(SCHWARZ);
u8g2Schriften.setCursor(10, 290);
u8g2Schriften.setFont(u8g2_font_helvR18_tf);
u8g2Schriften.print(Luftdruck + " hPa");
u8g2Schriften.setCursor(10, 318);
u8g2Schriften.setForegroundColor(ROT);
u8g2Schriften.print(TemperaturAnzeige + " °C");
u8g2Schriften.setForegroundColor(GRUEN);
u8g2Schriften.setBackgroundColor(SCHWARZ);
u8g2Schriften.setCursor(130, 318);
u8g2Schriften.print(LuftfeuchtigkeitAnzeige + " %");
}Wecker mit Touch-Bedienung
Weckzeit einstellen
linker Button -> Stunde
mittlerer Button -> Minute
rechter Button -> Weckzeit ein-/ausschalten
Lautsprecher-Anschluss mit 2 Pin Mikro-JST-Stecker
26
GND
#include "WiFi.h"
#include "time.h"
#include "TFT_eSPI.h"
#include "U8g2_for_TFT_eSPI.h"
#include "XPT2046_Touchscreen_TT.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
// SPI-Pins als Hardware-SPI
SPIClass touchscreenSPI = SPIClass(VSPI);
XPT2046_Touchscreen touchscreen(TOUCH_CS, TOUCH_IRQ);
// Variablen Wecker
bool WeckerStatus = false;
int StundeAnzeigen = 6;
int MinuteAnzeigen = 0;
int WeckzeitStunde = 6;
int WeckzeitMinute = 0;
// Pin Lautsprecher
int Lautsprecher = 26;
// Touchscreen Koordinaten (z = Druck)
int x, y, z;
// 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("-------------------------");
ZeigeDatum();
}
// Zeit in Stunden, Minuten und Sekunden
Stunden = Zeit.tm_hour, Minuten = Zeit.tm_min, Sekunden = Zeit.tm_sec;
// SPI-Bus für den Touchscreen starten
touchscreenSPI.begin(TOUCH_CLK, TOUCH_MISO, TOUCH_MOSI, TOUCH_CS);
touchscreen.begin(touchscreenSPI);
tft.init();
tft.setRotation(2);
// Touchscreen drehen
touchscreen.setRotation(2);
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");
}
u8g2Schriften.setFont(u8g2_font_logisoso22_tf);
// linker Button
tft.fillRect(1, 245, 75, 50, HELLBLAU);
tft.drawRoundRect(1, 245, 75, 50, 5, SCHWARZ);
u8g2Schriften.setForegroundColor(SCHWARZ);
u8g2Schriften.setBackgroundColor(HELLBLAU);
u8g2Schriften.setCursor(25, 280);
u8g2Schriften.print(StundeAnzeigen);
// mittlerer Button
tft.fillRect(82, 245, 75, 50, CYAN);
tft.drawRoundRect(82, 245, 75, 50, 5, SCHWARZ);
u8g2Schriften.setForegroundColor(SCHWARZ);
u8g2Schriften.setBackgroundColor(CYAN);
u8g2Schriften.setCursor(110, 280);
u8g2Schriften.print(MinuteAnzeigen);
// rechter Button
tft.fillRect(160, 245, 75, 50, GELB);
tft.drawRoundRect(160, 245, 75, 50, 5, SCHWARZ);
u8g2Schriften.setForegroundColor(SCHWARZ);
u8g2Schriften.setBackgroundColor(GELB);
u8g2Schriften.setCursor(180, 280);
u8g2Schriften.print("aus");
Zeitmessung = millis() + 1000;
}
void loop()
{
TouchAbfragen();
// 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();
}
// Wecker eingeschaltet
if (WeckerStatus)
{
if (Stunden == WeckzeitStunde && Minuten == WeckzeitMinute)
{
tone(Lautsprecher, 1000, 100);
delay(500);
noTone(Lautsprecher);
Serial.println("Weckzeit: " + String(WeckzeitStunde) + ":" + String(WeckzeitMinute));
}
}
}
// 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 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();
}
void TouchAbfragen()
{
u8g2Schriften.setFont(u8g2_font_logisoso22_tf);
// 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());
// Rohwerte der Punkte anzeigen
// Serial.println(Punkt.x);
// Serial.println(Punkt.y);
z = Punkt.z;
// linker Button Koordinaten abfragen
if (x >= 1 && x <= 75 && y >= 245 && y <= 300)
{
if (StundeAnzeigen == 23) StundeAnzeigen = 0;
else StundeAnzeigen ++;
tft.fillRect(1, 245, 75, 50, HELLBLAU);
tft.drawRoundRect(1, 245, 75, 50, 5, SCHWARZ);
u8g2Schriften.setForegroundColor(SCHWARZ);
u8g2Schriften.setBackgroundColor(HELLBLAU);
u8g2Schriften.setCursor(25, 280);
u8g2Schriften.print(StundeAnzeigen);
WeckzeitStunde = StundeAnzeigen;
}
// mittlerer Button Koordinaten abfragen
if (x >= 85 && x <= 150 && y >= 245 && y <= 300)
{
if (MinuteAnzeigen == 59) MinuteAnzeigen = 0;
else MinuteAnzeigen ++;
tft.fillRect(82, 245, 75, 50, CYAN);
tft.drawRoundRect(82, 245, 75, 50, 5, SCHWARZ);
u8g2Schriften.setForegroundColor(SCHWARZ);
u8g2Schriften.setBackgroundColor(CYAN);
u8g2Schriften.setCursor(110, 280);
u8g2Schriften.print(MinuteAnzeigen);
WeckzeitMinute = MinuteAnzeigen;
}
// rechter Button Koordinaten abfragen
if (x >= 165 && x <= 235 && y >= 245 && y <= 300)
{
WeckerStatus = !WeckerStatus;
}
// Status des Weckers anzeigen
if (WeckerStatus)
{
tft.fillRect(160, 245, 75, 50, GELB);
tft.drawRoundRect(160, 245, 75, 50, 5, SCHWARZ);
u8g2Schriften.setForegroundColor(SCHWARZ);
u8g2Schriften.setBackgroundColor(GELB);
u8g2Schriften.setCursor(180, 280);
u8g2Schriften.print("an");
}
else
{
tft.fillRect(160, 245, 75, 50, GELB);
tft.drawRoundRect(160, 245, 75, 50, 5, SCHWARZ);
u8g2Schriften.setForegroundColor(SCHWARZ);
u8g2Schriften.setBackgroundColor(GELB);
u8g2Schriften.setCursor(180, 280);
u8g2Schriften.print("aus");
}
// zur Kontrolle die Koordinaten anzeigen
// KoordinatenAnzeigen(x, y, z);
delay(100);
}
}
void ZeigeDatum()
{
u8g2Schriften.setFont(u8g2_font_helvB14_tf);
u8g2Schriften.setCursor(60, 315);
u8g2Schriften.setForegroundColor(GRUEN);
u8g2Schriften.setBackgroundColor(SCHWARZ);
// Bildschirmbereich für das Datum löschen
tft.fillRect(60, 295, 180, 30, SCHWARZ);
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);
}Geburtstagskalender
Der Kalender nutzt ein ⇒zweidimensionales Array für das Datum und die Namen.
Du musst die Anzahl der Datensätze in der Variablen DatenMax festlegen. Jeder Datensatz besteht aus dem Datum und dem Namen jeweils in Anführungszeichen und durch ein Komma getrennt. Im Beispiel wird eine Array mit 20 Elementen erstellt. Wenn Tag oder Monat einstellig sind, muss eine 0 vorangestellt werden. Die zeitliche Reihenfolge muss nicht eingehalten werden.
Das Datum wird in der Funktion Kalenderdurchsuchen() mit dem aktuellen Datum verglichen, stimmen sie überein, wird der Name angezeigt.
#define DatenMax 20
String Kalender[DatenMax] [2] =
{
{"10.01.", "Klaus"},
{"11.02.", "Alina"},
{"01.03.", "Theresa"},
{"03.04.", "Paul"},
{"03.04.", "Amalia"},
{"12.05.", "Thomas"},
{"13.05.", "Karla"},
{"15.06.", "Oskar"},
{"11.07.", "Sarah"},
{"11.07.", "Julius"},
{"29.07.", "Joshua"},
{"31.08.", "Esra"},
{"15.09.", "Timo"},
{"17.09.", "Dilara"},
{"02.10.", "Hendrik"},
{"14.10.", "Sören"},
{"05.10.", "Malina"},
{"15.11.", "Samuel"},
{"17.12.", "Laura"},
{"18.12.", "Benjamin"},
}; Das vollständige Programm
#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 = 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 = false;
// 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;
/*
Array
1. Eintrag: Datum, wenn < 10 -> 0 davor setzen
2. Eintrag: Name/Beschreibung
DatenMax an die Anzahl der Einträge anpassen
*/
#define DatenMax 20
String Kalender[DatenMax] [2] =
{
{"10.01.", "Klaus"},
{"11.02.", "Alina"},
{"01.03.", "Theresa"},
{"03.04.", "Paul"},
{"03.04.", "Amalia"},
{"12.05.", "Thomas"},
{"13.05.", "Karla"},
{"15.06.", "Oskar"},
{"11.07.", "Sarah"},
{"11.07.", "Julius"},
{"29.07.", "Joshua"},
{"31.08.", "Esra"},
{"15.09.", "Timo"},
{"17.09.", "Dilara"},
{"02.10.", "Hendrik"},
{"14.10.", "Sören"},
{"05.10.", "Malina"},
{"15.11.", "Samuel"},
{"17.12.", "Laura"},
{"18.12.", "Benjamin"},
};
unsigned long Zeitmessung = 0;
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 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();
Zeitmessung = millis() + 1000;
}
void loop()
{
// Sekunden weiter zählen
if (Zeitmessung < millis())
{
Zeitmessung += 1000;
Sekunden ++;
if (Sekunden == 60)
{
if (DatumAnzeigen) ZeigeDatum();
// Daten des Kalenders durchsuchen
KalenderDurchsuchen();
// 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;
}
}
// 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(1, 240, tft.width(), tft.height(), SCHWARZ);
u8g2Schriften.setForegroundColor(GRUEN);
u8g2Schriften.setBackgroundColor(SCHWARZ);
u8g2Schriften.setFont(u8g2_font_helvB14_tf);
u8g2Schriften.setCursor(1, 260);
// 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 KalenderDurchsuchen()
{
String Datum;
bool Treffer = false;
String Eintrag = "";
// Datum zusammensetzen: TT.MM.
if (Zeit.tm_mday < 10) Datum = "0" + String(Zeit.tm_mday);
else Datum = String(Zeit.tm_mday);
Datum += ".";
if (Zeit.tm_mon < 10) Datum += "0" + String(Zeit.tm_mon + 1);
else Datum += String(Zeit.tm_mon + 1);
Datum += ".";
Serial.println(Datum);
for (int i = 0; i <= DatenMax; i++)
{
// Serial.println(Kalender[i] [0]);
if (Kalender[i] [0] == Datum)
{
Treffer = true;
Eintrag += Kalender[i] [1] + " ";
Serial.println(Kalender[i] [1]);
}
}
if (Treffer)
{
u8g2Schriften.setForegroundColor(BLAU);
u8g2Schriften.setBackgroundColor(SCHWARZ);
u8g2Schriften.setFont(u8g2_font_helvB14_tf);
u8g2Schriften.setCursor(1, 285);
u8g2Schriften.print("Geburtstage");
u8g2Schriften.setCursor(1, 310);
u8g2Schriften.print(Eintrag);
}
else
{
u8g2Schriften.setForegroundColor(BLAU);
u8g2Schriften.setBackgroundColor(SCHWARZ);
u8g2Schriften.setFont(u8g2_font_helvB14_tf);
u8g2Schriften.setCursor(1, 285);
u8g2Schriften.print("Keine Geburtstage heute!");
}
}Fotoschau
Für dieses Programm kann die Bibliothek_TFT_eSPI nicht verwendet werden.
Bibliothek ILI9341 (TFT mit Mikro-USB-Anschluss)
Im Programm verwendete Fotos :
 |  |  |  |  |
| koeln.bmp | strand.bmp | berlin_olympia.bmp | walhalla.bmp | dresden_frauenkirche.bmp |
 |  |  |  |  |
| chartres.bmp | gaios.bmp | braunwald.bmp | koeln_deutz.bmp | dhuenntalsperre.bmp |
Benötigte Bibliotheken installieren
Wenn du zuvor die Bibliothek SdFat installiert hast, musst du sie über die Bibliotheksverwaltung deinstallieren und stattdessen den Adafruit Fork installieren.
Das Programm
- die Fotos müssen im Format bmp in der maximalen Größe 320×240 vorliegen
- die Fotos müssen im Root-Verzeichnis der SD-Karte liegen
- wenn die Beschreibung (Beschreibung = true) angezeigt werden soll, dürfen die Maße höchstens 320×213 betragen, ansonsten wird durch die Beschreibung der untere Teil des Bildes verdeckt
- falls du kleinere Fotos verwenden willst, musst du vor dem Laden des Bildes den Bildschirm "löschen":
tft.fillScreen(SCHWARZ); - bei Verwendung eigener Fotos musst du den Dateinamen austauschen und die Beschreibung anpassen:
reader.drawBMP("eigeneDatei.bmp", tft, 0, 0);
0, 0 sind die Startpunkte des Fotos auf der x-/y-Achse - wenn keine Beschreibung angezeigt werden soll, setze den Schalter Beschreibung auf false
#include "SdFat.h"
#include "Adafruit_ILI9341.h"
#include "Adafruit_ImageReader.h"
#define TFT_BL 21
#define TFT_CS 15
#define TFT_DC 2
#define TFT_MISO 12
#define TFT_MOSI 13
#define TFT_SCLK 14
#define TFT_RST -1
/*
SD VSPI Standard-Pins
CLK 18
MOSI 23
MISO 19
CS 5
*/
// Objekt tft der Bibliothek Adafruit_ILI9341 erstellen
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_MOSI, TFT_SCLK, TFT_RST, TFT_MISO);
// Objekt SD der Bibliothek SdFat erstellen
SdFat SD;
// Objekt des Kartenlesers wird an das Dateisystem der SD-Karte übertragen
Adafruit_ImageReader reader(SD);
Adafruit_Image Bild;
// Farben
#define SCHWARZ 0x0000
#define WEISS 0xFFFF
#define BLAU 0x001F
// 3 = FAT32
#define SD_FAT_TYPE 3
// SPI-Geschwindigkeit
#define SPI_SPEED SD_SCK_MHZ(4)
// CSPin der SD-Karte
int CSPin = 5;
// Anzeigedauer
int Intervall = 6000;
bool Beschreibung = true;
void setup()
{
Serial.begin(9600);
// auf serielle Verbindung warten
while (!Serial);
delay(1000);
// TFT starten
tft.begin();
// Hintergrundbeleuchtung einschalten
pinMode(TFT_BL, OUTPUT);
digitalWrite(TFT_BL, HIGH);
// Rotation anpassen
tft.setRotation(3);
// schwarzer Hintergrund
tft.fillScreen(SCHWARZ);
tft.setTextSize(2);
tft.setTextColor(WEISS);
tft.setCursor(1, 20);
/*
SD-Karte mit Angabe des CSPins und der SPI-Geschwindigkeit starten
wenn die Intialisierung fehlschlägt
- keine SD-Karte vorhanden
- falsche Pinbelegung
-> es wird eine Fehlermeldung angezeigt
*/
if (!SD.begin(CSPin, SPI_SPEED))
{
tft.println("Start der SD-Karte");
tft.print("fehlgeschlagen!");
Serial.println("Start der SD-Karte fehlgeschlagen!");
}
else
{
Serial.println("SD-Karte gestartet");
tft.print("SD-Karte gestartet!");
}
delay(5000);
tft.setTextSize(2);
}
void loop()
{
reader.drawBMP("koeln.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("K");
// ö = 0x94
tft.write(0x94);
tft.println("ln Blick vom Messeturm");
}
delay(Intervall);
reader.drawBMP("strand.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("Strand Algarve");
}
delay(Intervall);
reader.drawBMP("berlin_olympia.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("Berlin Olympiastadion");
}
delay(Intervall);
reader.drawBMP("walhalla.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("Walhalla Donaustauf");
}
delay(Intervall);
reader.drawBMP("dresden_frauenkirche.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("Dresden Frauenkirche");
}
delay(Intervall);
reader.drawBMP("chartres.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("Chartres Dom");
}
delay(Intervall);
reader.drawBMP("gaios.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("Gaios Griechenland");
}
delay(Intervall);
reader.drawBMP("braunwald.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 115);
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("Braunwald Schweiz");
}
delay(Intervall);
reader.drawBMP("koeln_deutz.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("K");
// ö = 0x94
tft.write(0x94);
tft.println("ln Deutz");
}
delay(Intervall);
reader.drawBMP("dhuenntalsperre.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("Dh");
// ü = 0x81
tft.write(0x81);
tft.print("nntalsperre");
}
delay(Intervall);
}Eigene Fotos mit GIMP skalieren und umwandeln
Die Fotos dürfen maximal das Format von 320×240 Pixeln haben und müssen im Format bmp im 24-Bit-Format vorliegen. Du kannst beliebige Fotos skalieren und entsprechend abspeichern.
Beachte die notwendigen Einstellungen beim Speichern des Bildes.
Natürlich darf das Bild auch kleiner als 320×240 Pixel sein. Bei der Funktion drawBMP kannst du die Startposition auf der x- und y-Achse festlegen.
Fotos mit Imagemagick skalieren und konvertieren
Mit imagemagick (🔗 https://imagemagick.org) können diese Schritte vereinfacht werden.
Windows:
- Statische Version herunterladen
- zip-Datei in einem Ordner deiner Wahl entpacken
alle Fotos in den gleichen Ordner kopieren - die Kommandozeile öffnen und in den Ordner mit den Fotos wechseln
- Fotos skalieren
magick mogrify -resize 320x213 *- Fotos ins bmp-Format und ins 24-Bit-Format konvertieren
die neuen Dateien werden durchnummeriert (Foto.bmp, Foto0.bmp, Foto1.bmp ...)
magick -verbose -depth 24 -type truecolor *.jpg Foto.bmpLinux
Das Paket Imagemagick lässt sich mit Bordmitteln installieren und verwenden:
magick mogrify -resize 320x213 *
magick -verbose -depth 24 -type truecolor *.jpg Foto.bmpBibliothek ST7789 (TFT mit USB-C-Anschluss)
Das Programm
#include "SdFat.h"
#include "Adafruit_ST7789.h"
#include "Adafruit_ImageReader.h"
#define TFT_BL 21
#define TFT_CS 15
#define TFT_DC 2
#define TFT_MISO 12
#define TFT_MOSI 13
#define TFT_SCLK 14
#define TFT_RST -1
/*
SD VSPI Standard-Pins
CLK 18
MOSI 23
MISO 19
CS 5
*/
// Objekt tft der Bibliothek Adafruit_ST7789 erstellen
Adafruit_ST7789 tft = Adafruit_ST7789(TFT_CS, TFT_DC, TFT_MOSI, TFT_SCLK, TFT_RST);
// Objekt SD der Bibliothek SdFat erstellen
SdFat SD;
// Objekt des Kartenlesers wird an das Dateisystem der SD-Karte übertragen
Adafruit_ImageReader reader(SD);
Adafruit_Image Bild;
// Farben
#define SCHWARZ 0x0000
#define WEISS 0xFFFF
#define BLAU 0x001F
// 3 = FAT32
#define SD_FAT_TYPE 3
// SPI-Geschwindigkeit
#define SPI_SPEED SD_SCK_MHZ(4)
// CSPin der SD-Karte
int CSPin = 5;
// Anzeigedauer
int Intervall = 6000;
bool Beschreibung = true;
void setup()
{
Serial.begin(9600);
// auf serielle Verbindung warten
while (!Serial);
delay(1000);
// Hintergrundbeleuchtung einschalten
pinMode(TFT_BL, OUTPUT);
digitalWrite(TFT_BL, HIGH);
// tft starten, Farben invertieren
tft.init(240, 320);
tft.invertDisplay(0);
// Rotation anpassen
tft.setRotation(3);
// schwarzer Hintergrund
tft.fillScreen(SCHWARZ);
tft.setTextSize(2);
tft.setTextColor(WEISS);
tft.setCursor(1, 20);
/*
SD-Karte mit Angabe des CSPins und der SPI-Geschwindigkeit starten
wenn die Intialisierung fehlschlägt
- keine SD-Karte vorhanden
- falsche Pinbelegung
-> es wird eine Fehlermeldung angezeigt
*/
if (!SD.begin(CSPin, SPI_SPEED))
{
tft.println("Start der SD-Karte");
tft.print("fehlgeschlagen!");
Serial.println("Start der SD-Karte fehlgeschlagen!");
}
else
{
Serial.println("SD-Karte gestartet");
tft.print("SD-Karte gestartet!");
}
delay(5000);
tft.setTextSize(2);
}
void loop()
{
reader.drawBMP("koeln.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("K");
// ö = 0x94
tft.write(0x94);
tft.println("ln Blick vom Messeturm");
}
delay(Intervall);
reader.drawBMP("strand.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("Strand Algarve");
}
delay(Intervall);
reader.drawBMP("berlin_olympia.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("Berlin Olympiastadion");
}
delay(Intervall);
reader.drawBMP("walhalla.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("Walhalla Donaustauf");
}
delay(Intervall);
reader.drawBMP("dresden_frauenkirche.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("Dresden Frauenkirche");
}
delay(Intervall);
reader.drawBMP("chartres.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("Chartres Dom");
}
delay(Intervall);
reader.drawBMP("gaios.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("Gaios Griechenland");
}
delay(Intervall);
reader.drawBMP("braunwald.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 115);
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("Braunwald Schweiz");
}
delay(Intervall);
reader.drawBMP("koeln_deutz.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("K");
// ö = 0x94
tft.write(0x94);
tft.println("ln Deutz");
}
delay(Intervall);
reader.drawBMP("dhuenntalsperre.bmp", tft, 0, 0);
if (Beschreibung)
{
tft.setCursor(10, 220);
tft.fillRect(1, 220, tft.width(), tft.height(), SCHWARZ);
tft.print("Dh");
// ü = 0x81
tft.write(0x81);
tft.print("nntalsperre");
}
delay(Intervall);
}Quellen
- Adafruit Grafik-Bibliothek
- Informationen zu ESP32-2432S028R auf github
- Espressif WiFi-API
- Definition der Farben als HEX-Code
- Bibliothek TFT_eSPI
- Dokumentation zu TFT_eSPI
- u8g2 für TFT_eSPI
- Schriftarten von u8g2
- Adafruit-Schriftarten
Letzte Aktualisierung: