Ziele des Projekts
- Messwerte des Sensors ⇒BME280 ermitteln und anzeigen
- Datum und Uhrzeit mit der Bibliothek time.h feststellen und anzeigen
- mit der Canvas-Funktion der Bibliothek Adafruit_GFX die Daten auf einem ⇒TFT mit 320×240 Pixeln darstellen
- ⇒BME280
- ⇒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
Schaltplan
Beispiel: ESP32-Wroom mit 38 Pins
Pinzuordnung TFT
schwarz -> GND
rot -> 5V
gelb (RST) -> 4
grün (DC) -> 2
weiß (CS) -> 5
blau (COPI) -> 23
braun (CLK) -> 18
rot -> 3,3V oder 5V
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” (Canvas) 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 73: WiFi-Daten
|
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 |
#include "WiFi.h" #include "time.h" #include "Adafruit_ILI9341.h" #include "Adafruit_BME280.h" #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"; char Passwort[] = "xxxxxxxx"; // Objekt für den Sensor BME280 (bme) erstellen Adafruit_BME280 bme; // 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 |
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); // BME280 starten, bei Misserfolg Meldung anzeigen if (!bme.begin(0x77)) { tft.setCursor(1, 20); tft.println("BME280 nicht verbunden"); tft.setCursor(1, 50); tft.println("HEX-Adressen:"); tft.setCursor(1, 80); tft.println("bme.begin(0x76);"); tft.setCursor(1, 110); tft.println("bme.begin(0x77);"); tft.setCursor(1, 140); tft.println("Programm wird beendet!"); while(1); } else tft.print("BME erfolgreich gestartet!"); tft.setCursor(1, 50); tft.print("WiFi starten ..."); // WiFi starten // Stations-Modus WiFi.mode(WIFI_STA); WiFi.begin(Router, Passwort); tft.setCursor(1, 80); 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 |
void BildschirmAufbauen() { // Messungen // Temperatur BME280 // 0 -> nur ganzzahlige Werte, 1 -> 1 Nachkommastelle String Temperatur = String(bme.readTemperature(), 1); // . durch , ersetzen Temperatur.replace(".", ","); /* BME280 Luftdruck messen readPressure() liest in Pascal, Ausgabe in hPa (Hekto-Pascal) Ergebnis durch 100 teilen */ String Luftdruck = String(int(bme.readPressure() / 100)); // Luftfeuchtigkeit lesen 0 -> nur ganzzahlige Werte, 1 -> 1 Nachkommastelle String Luftfeuchtigkeit = String(bme.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: