Ziele des Projekts
- Messwerte der Sensoren DHT11/DHT22 und BMP280 ermitteln und anzeigen
- Datum und Uhrzeit mit der Bibliothek time.h feststellen und anzeigen
- mit der Canvas-Funktion der Bibliothek AdafruitGFX die Daten auf einem TFT mit 320×240 Pixeln darstellen
Benötigte Bauteile
- Sensor ⇒DHT11 oder DHT22
- Sensor ⇒BMP280
- ⇒TFT mit 320×240 Pixeln
- Leitungsdrähte
Board installieren
Als Mikrocontroller können beliebige Module aus der Familie der ESP32-Mikrocontroller verwendet werden.
- ESP32-Wroom
- Arduino Nano ESP32
- ESP32-C6
- XIAO-ESP32-C3
- ESP32-C3 Zero
- ESP32-C3 Super Mini
- ESP32-C6 Zero
SPI-Pins der Mikrocontroller
- ESP32-Wroom
- ESP32C6
- Arduino Nano ESP32
- XIAO-ESP32-C3
- ESP32-C3 Zero
- ESP32-C3 Super Mini
- ESP32-C6 Zero
Pinbelegung
Beispiel: ESP32-Wroom mit 30 Pins
⇒ Pinbelegungen verschiedener TFTs
Benötigte Bibliotheken
GFXcanvas
Soll ein schnell wechselnder Text oder ein sich veränderndes grafisches Element an der gleichen Position dargestellt werden, gibt es zwei Probleme:
- der geänderte Text ist länger oder kürzer als der vorherige, dadurch überlappen sich die Buchstaben
das neue grafische Element unterscheidet sich in der Größe vom Bisherigen - weil der Bildschirm immer gelöscht und wieder neu aufgebaut wird, verursacht das neue Element ein Flackern des TFTs
Das erste Problem lässt sich lösen indem der bisherige Text oder das grafische Element durch ein ausgefülltes Rechteck „gelöscht“ wird. Das verhindert allerdings nicht das Flackern des TFTs.
Die durch die Installation der Bibliothek Adafruit ILI9341 zusätzlich installierte Bibliothek Adafruit GFX enthält die Funktion GFXcanvas. Sie legt zunächst ein Bild der darzustellenden Daten im Speicher an, auf Anforderung wird dieses Bild auf dem TFT dargestellt.
Im Film wird der blau dargestellte Bereich mit GFXcanvas erzeugt, im roten Bereich wird der Text zunächst durch ein rotes Rechteck „gelöscht“ und anschließend neu geschrieben. Als Text wird die mit ⇒millis() gemessene Zeit, die seit dem Start des Programms vergangen ist, dargestellt.
Man kann den Unterschied gut erkennen.
Du musst die // vor den Pins des verwendeten Mikrocontrollers entfernen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
#include "Adafruit_ILI9341.h" // XIAO // #define TFT_CS D7 // #define TFT_RST D1 // #define TFT_DC D2 // Arduino Nano ESP32 // #define TFT_CS 10 // #define TFT_RST 9 // #define TFT_DC 8 // SPI-Pins ESP32-C6 // #define TFT_CS 18 // #define TFT_RST 3 // #define TFT_DC 2 // ESP32-WROOM // #define TFT_CS 5 // #define TFT_RST 4 // #define TFT_DC 2 // ESP32-S3 // #define TFT_CS 10 // #define TFT_RST 5 // #define TFT_DC 4 // ESP32-C6-Zero // #define TFT_CS 18 // #define TFT_RST 3 // #define TFT_DC 2 // ESP32-C3 Zero/ESP32-C3 Super Mini // #define TFT_CS 7 // #define TFT_RST 3 // #define TFT_DC 2 // Farben #define SCHWARZ 0x0000 #define WEISS 0xFFFF #define BLAU 0x001F #define ROT 0xF800 #define GRUEN 0x07E0 // Objekt der Bibliothek erstellen Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_RST); // 2-Bit Canvas definieren GFXcanvas16 Bereich(240, 150); void setup() { // TFT starten tft.begin(); // schwarzer Hintergrund tft.fillScreen(SCHWARZ); } void loop() { // Canvas erstellen Bereich.fillScreen(BLAU); Bereich.setCursor(1, 40); Bereich.setTextSize(3); Bereich.print("Millisekunden:"); Bereich.setCursor(1, 80); Bereich.print(millis()); // Canvas als Bild anzeigen tft.drawRGBBitmap(0, 0, Bereich.getBuffer(), Bereich.width(), Bereich.height()); // Bereich für den Text "löschen" tft.fillRect(1, 180, tft.width(), 100, ROT); tft.setCursor(1, 200); tft.setTextSize(3); tft.print("Millisekunden:"); tft.setCursor(1, 240); tft.println(millis()); delay(50); } |
Jedes Objekt vom Typ GFXcanvas16 benötigt pro zwei Bit pro Pixel. Wie im Beispiel eines Bereichs mit 320×240 Pixeln sind das 153.600 Bits, das entspricht 19200 Bytes oder 19,2 kiloBytes.
- die grafischen Elemente oder der Text werden zunächst auf die Leinwand geschrieben, der Name des Objekts ist jetzt nicht das Display, sondern der Name des Landwand-Objekts (Bereich)
|
1 2 3 4 5 6 |
Bereich.fillScreen(BLAU); Bereich.setCursor(1, 40); Bereich.setTextSize(3); Bereich.print("Millisekunden:"); Bereich.setCursor(1, 80); Bereich.print(millis()); |
- die erstellte Leinwand wird als Ganzes auf den Bildschirm geschrieben
die ersten beiden Parameter legen fest an welcher Stelle das Bild auf dem TFT geschrieben wird
|
1 |
tft.drawRGBBitmap(0, 0, Bereich.getBuffer(), Bereich.width(), Bereich.height()); |
Das Programm
Bibliotheken und Variable
Notwendige Anpassungen:
- Zeile 14:: SPI-Pins des verwendeten Mikrocontrollers
- Zeile 75: WiFi-Daten
- Zeile 81: Daten-Pin und Typ des DHT-Sensors
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
#include "WiFi.h" #include "time.h" #include "Adafruit_ILI9341.h" #include "Adafruit_BMP280.h" // Schriften einbinden #include "Fonts/FreeSans12pt7b.h" #include "Fonts/FreeSans18pt7b.h" #include "Fonts/FreeSans24pt7b.h" // bei freier Wahl der I2C-Pins:I2C-Pins festlegen // #define SDA_PIN 14 // #define SCL_PIN 15 // XIAO // #define TFT_CS D7 // #define TFT_RST D1 // #define TFT_DC D2 // Arduino Nano ESP32 // #define TFT_CS 10 // #define TFT_RST 9 // #define TFT_DC 8 // SPI-Pins ESP32-C6 // #define TFT_CS 18 // #define TFT_RST 3 // #define TFT_DC 2 // ESP32-WROOM // #define TFT_CS 5 // #define TFT_RST 4 // #define TFT_DC 2 // ESP32-S3 // #define TFT_CS 10 // #define TFT_RST 5 // #define TFT_DC 4 // ESP32-C6-Zero // #define TFT_CS 18 // #define TFT_RST 3 // #define TFT_DC 2 // ESP32-C3 Zero/ESP32-C3 Super Mini // #define TFT_CS 7 // #define TFT_RST 3 // #define TFT_DC 2 bool Start = true; int Stunden, Minuten, Sekunden; unsigned long Zeitmessung = 0; // 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 char Router[] = "Router_SSID"; char Passwort[] = "xxxxxxxx"; // DHT-Sensor starten #include "DHT.h" // Pin des Sensors int SENSOR_DHT = 22; // Sensortyp festlegen // DHT11 #define SensorTyp DHT11 // DHT22 // #define SensorTyp DHT22 // Objekt für den Sensor DHT (dht) erstellen DHT dht(SENSOR_DHT, SensorTyp); // Objekt für den Sensor BMP280 (bmp) erstellen Adafruit_BMP280 bmp; // Objekt für das TFT-Display (tft) erstellen Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_RST); // 16-Bit Canvas definieren GFXcanvas16 Bereich(320, 240); // 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_wday -> Wochentag (0 = Sonntag, 6 = Samstag) 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; |
setup-Teil
Die Meldungen zeigen auf dem TFT den Verlauf des Startvorgangs.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
void setup() { Serial.begin(9600); tft.begin(); // Rotation anpassen tft.setRotation(1); tft.setTextSize(2); tft.setTextColor(WEISS); tft.fillScreen(SCHWARZ); tft.setCursor(1, 20); // Wire mit den I2C-Pins starten // nur bei freier Wahl der I2C-Pins // Wire.begin(SDA_PIN, SCL_PIN); // BMP280 starten, bei Misserfolg Meldung anzeigen if (!bmp.begin(0x76)) { tft.setCursor(1, 20); tft.println("BMP280 nicht verbunden"); tft.setCursor(1, 50); tft.println("HEX-Adressen:"); tft.setCursor(1, 80); tft.println("bmp.begin(0x76);"); tft.setCursor(1, 110); tft.println("bmp.begin(0x77);"); tft.setCursor(1, 140); tft.println("Programm wird beendet!"); while(1); } else tft.print("BMP erfolgreich gestertet!"); // DHT starten dht.begin(); tft.setCursor(1, 50); // wenn als Temperatur keine Zahl ermittelt wird (isnan) // Start des Sensors fehlgeschlagen if (isnan(dht.readTemperature())) { tft.setCursor(1, 50); tft.println("DHT nicht verbunden"); tft.setCursor(1, 80); tft.println("Sensortyp DHT11/DHT22"); tft.setCursor(1, 110); tft.println("Programm wird beendet!"); while(1); } else tft.print("DHT erfolgreich gestertet!"); tft.setCursor(1, 80); tft.print("WiFi starten ..."); // WiFi starten // Stations-Modus WiFi.mode(WIFI_STA); WiFi.begin(Router, Passwort); tft.setCursor(1, 110); while (WiFi.status() != WL_CONNECTED) { delay(200); tft.print("."); } delay(2000); tft.fillScreen(SCHWARZ); // Zeitzone: Parameter für die zu ermittelnde Zeit configTzTime(Zeitzone, Zeitserver); tft.setCursor(1, 20); tft.print(WiFi.localIP()); tft.setCursor(1, 50); tft.print("Warte auf Zeitserver ..."); // 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"); // 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"); delay(1000); Zaehler ++; // Zeit konnte innerhalb 90 s nicht synchronisiert werden if (Zaehler >= 90) { tft.setCursor(1, 80); tft.print("Programm beendet"); // Programm beenden while(1); } } // Datum/Zeit erfolgreich synchronisiert if (Suche == -1) { tft.setCursor(1, 80); tft.print("Zeit synchronisiert ..."); delay(1000); tft.fillScreen(SCHWARZ); } Zeitmessung = millis() + 1000; } |
Funktion BildschirmAufbauen
Im loop-Teil wird die Funktion BildschirmAufbauen aufgerufen. Sie stellt die aktuelle Zeit fest, ermittelt die Messwerte der Sensoren, legt die Leinwand an und zeigt sie an.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
void BildschirmAufbauen() { // Messungen // Temperatur BMP280 // 0 -> nur ganzzahlige Werte, 1 -> 1 Nachkommastelle String Temperatur = String(bmp.readTemperature(), 1); // alternativ: Temperatur DHT // String Temperatur = String(dht.readTemperature(), 1); // . durch , ersetzen Temperatur.replace(".", ","); /* BMP280 Luftdruck messen readPressure() liest in Pascal, Ausgabe in hPa (Hekto-Pascal) Ergebnis durch 100 teilen */ String Luftdruck = String(int(bmp.readPressure() / 100)); // Luftfeuchtigkeit DHT lesen, 0 -> keine Nachkommastelle String Luftfeuchtigkeit = String(dht.readHumidity(), 1); Luftfeuchtigkeit.replace(".", ","); // Canvas erstellen Bereich.fillScreen(SCHWARZ); Bereich.setCursor(1, 20); Bereich.setFont(&FreeSans12pt7b); Bereich.setTextColor(WEISS); // Name des Wochentages 0-6 switch (Zeit.tm_wday) { case 0: Bereich.print("Sonntag"); break; case 1: Bereich.print("Montag"); break; case 2: Bereich.print("Dienstag"); break; case 3: Bereich.print("Mittwoch"); break; case 4: Bereich.print("Donnerstag"); break; case 5: Bereich.print("Freitag"); break; case 6: Bereich.print("Samstag"); break; } Bereich.print(", "); // Datum if (Zeit.tm_mday < 10) Bereich.print("0"); Bereich.print(Zeit.tm_mday); Bereich.print("."); // Monat: führende 0 ergänzen if (Zeit.tm_mon < 9) Bereich.print("0"); // Zählung beginnt mit 0 -> +1 Bereich.print(Zeit.tm_mon + 1); Bereich.print("."); // Anzahl Jahre seit 1900 Bereich.print(Zeit.tm_year + 1900); Bereich.drawFastHLine(1, 67, tft.width(), GRUEN); Bereich.drawFastHLine(1, 68, tft.width(), GRUEN); // Zeit Bereich.setFont(&FreeSans18pt7b); Bereich.setCursor(1,60); // Stunde: wenn Stunde < 10 -> 0 davor setzen if (Zeit.tm_hour < 10) Bereich.print("0"); Bereich.print(Zeit.tm_hour); Bereich.print(":"); // Minuten if (Zeit.tm_min < 10) Bereich.print("0"); Bereich.print(Zeit.tm_min); Bereich.print(" Uhr"); Bereich.setCursor(1, 115); Bereich.setTextColor(ROT); Bereich.setFont(&FreeSans24pt7b); Bereich.print(Temperatur); // Grad-Zeichen als Kreis Bereich.drawCircle(105, 90, 6, ROT); Bereich.print(" C"); Bereich.setCursor(1, 170); Bereich.setTextColor(BLAU); Bereich.print(Luftfeuchtigkeit + " %"); Bereich.setCursor(1, 225); Bereich.setTextColor(GRUEN); Bereich.print(Luftdruck +" hPa"); // Canvas anzeigen tft.drawRGBBitmap(0, 0, Bereich.getBuffer(), Bereich.width(), Bereich.height()); } |
loop-Teil
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
void loop() { // einmalig beim Start ausführen um erste Daten zu erhalten // danach alle 60 Sekunden if (Start) { Start = false; // 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); BildschirmAufbauen(); } // 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); BildschirmAufbauen(); } } } |
Quellen
Letzte Aktualisierung: