Inhalt
Ziele des Projekts
- Einführung in die ⇒Bibliothek TFT_eSPI
- Nutzung eines grafischen Elements zur Anzeige der Messwerte eines DHT-Sensors
Verwendete Hardware
- TFT-Display mit 160x128 Pixeln (nur Beispielprogramm)
- TFT-Display mit 320x240 Pixeln
- TFT-Display mit 480x320 Pixeln
- ESP32-Wroom oder Wemos D1 Mini/NodeMCU
Konfiguration der Mikrocontroller
DHT-Messwerte grafisch darstellen

Bei manchen TFT-Displays sind die Farben invertiert: schwarz = weiß und weiß = schwarz
Die korrekten Farben werden mit
1 2 | tft.init(); tft.invertDisplay(1); |
hergestellt.
Zusätzliche Bibliothek installieren:

TFT 320x240 Pixel

Programm mit ⇒Adafruit-Schrift, nutzt das ⇒GFXcanvas-Konzept
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 | #include “DHT.h” #include “TFT_eSPI.h” #include “TFT_eWidget.h” #include “Adafruit_GFX.h” #include “Fonts/FreeSans18pt7b.h” #include “Fonts/FreeSerif24pt7b.h” // DHT-Pin anpassen int SENSOR_DHT = D3; // Sensortyp festlegen // DHT22 // #define SensorTyp DHT22 // DHT11 #define SensorTyp DHT11 // Sensor einen Namen zuweisen DHT dht(SENSOR_DHT, SensorTyp); // Objekt der Bibliothek TFT_eSPI erstellen TFT_eSPI tft = TFT_eSPI(); // Objekt des Widgets erstellen MeterWidget dhtTemperatur = MeterWidget(&tft); // Wartezeit bis zur nächsten Messung int Wartezeit = 2000; // GFXcanvas-Objekt erstellen: tft.width() = Breite des TFTs, Höhe 100 Pixel GFXcanvas1 Bereich(tft.width(), 120); void setup() { // Sensor starten dht.begin(); // tft starten tft.init(); tft.setRotation(2); tft.fillScreen(TFT_BLACK); Serial.begin(9600); // rot: Start-Ende in %, gelb: Start-Ende in %, orange: Start-Ende in %, grün: Start-Ende in % dhtTemperatur.setZones(75, 100, 0, 0, 25, 75, 0, 25); // PositionX, PositionY, maximaler Wert, Text, Zahlen Skala dhtTemperatur.analogMeter(5, 160, 40, “Grad C”, “0”, “10”, “20”, “30”, “40”); } void loop() { // Temperatur lesen float Temperatur = dht.readTemperature(); // in String umwandeln replace -> . durch , ersetzen String TemperaturMesswert = String(Temperatur); TemperaturMesswert.replace(“.”, “,”); // GFXcanvas schwarzer Hintergrund Bereich.fillScreen(0x0000); Bereich.setFont(&FreeSans18pt7b); Bereich.setCursor(5, 30); Bereich.print(“Temperatur”); // Trennlinien Bereich.drawFastHLine(1, 45, tft.width(), TFT_WHITE); Bereich.drawFastHLine(1, 46, tft.width(), TFT_WHITE); Bereich.setFont(&FreeSerif24pt7b); Bereich.setCursor(5, 100); Bereich.print(TemperaturMesswert + ” ”); // ° Gradzeichen als Kreis, Schrift beinhaltet keine Sonderzeichen Bereich.drawCircle(125, 75, 6, TFT_WHITE); Bereich.drawCircle(125, 75, 7, TFT_WHITE); Bereich.print(“ C”); // GFXcanvas anzeigen // x, y, Zwischenspeicher, Breite, Höhe, Vordergrundfarbe, Hintergrundfarbe tft.drawBitmap(0, 0, Bereich.getBuffer(), Bereich.width(), Bereich.height(), 0xFFFF, 0x0000); /* übergebene Werte Minimum Temperatur (0.0) Maximum Temperatur (40.0) Minimum Temperatur (0.0) Maximum Temperatur (40.0) */ Temperatur = WertBerechnen(Temperatur, (float)0.0, (float)40.0, (float)0.0, (float)40.0); dhtTemperatur.updateNeedle(Temperatur, 0); delay(Wartezeit); } float WertBerechnen(float ip, float ipmin, float ipmax, float tomin, float tomax) { return tomin + (((tomax - tomin) * (ip - ipmin)) / (ipmax - ipmin)); } |
TFT 480x320 Pixel

Programm mit Adafruit-Schrift und ⇒GFXcanvas-Konzept :
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 | #include “DHT.h” #include “TFT_eSPI.h” #include “TFT_eWidget.h” #include “Adafruit_GFX.h” #include “Fonts/FreeSerif24pt7b.h” // DHT-Pin anpassen int SENSOR_DHT = 15; // Sensortyp festlegen // DHT22 // #define SensorTyp DHT22 // DHT11 #define SensorTyp DHT22 // Sensor einen Namen zuweisen DHT dht(SENSOR_DHT, SensorTyp); // Objekt der Bibliothek TFT-eSPI erstellen TFT_eSPI tft = TFT_eSPI(); // Objekte des Widgets erstellen MeterWidget dhtTemperatur = MeterWidget(&tft); MeterWidget dhtLuftfeuchtigkeit = MeterWidget(&tft); // Wartezeit bis zur nächsten Messung int Wartezeit = 2000; GFXcanvas1 Bereich(tft.width(), 170); void setup() { // Sensor starten dht.begin(); // tft starten tft.init(); tft.setRotation(0); // wenn die Farben invertiert sind // weiß = schwarz, schwarz = weiss … // wenn nicht: Zeile mit // versehen tft.invertDisplay(1); tft.fillScreen(TFT_BLACK); Serial.begin(9600); // rot: Start-Ende in %, gelb: Start-Ende in %, orange: Start-Ende in %, grün: Start-Ende in % dhtTemperatur.setZones(75, 100, 0, 0, 25, 75, 0, 25); dhtLuftfeuchtigkeit.setZones(0, 100, 0, 0, 25, 75, 0, 25); // PositionX, PositionY, maximaler Wert, Text, Zahlen Skala dhtTemperatur.analogMeter(20, 170, 40, “Grad C”, “0”, “10”, “20”, “30”, “40”); dhtLuftfeuchtigkeit.analogMeter(20, 320, 100, “%”, “0”, “25”, “50”, “75”, “100”); } void loop() { // Temperatur lesen float Temperatur = dht.readTemperature(); // in String umwandeln replace -> . durch , ersetzen String TemperaturMesswert = String(Temperatur); TemperaturMesswert.replace(“.”, “,”); // Luftfeuchtigkeit lesen float Luftfeuchtigkeit = dht.readHumidity(); // in String umwandeln replace -> . durch , ersetzen String LuftfeuchtigkeitMesswert = String(Luftfeuchtigkeit); LuftfeuchtigkeitMesswert.replace(“.”, “,”); // GFXcanvas Bereich.fillScreen(0x0000); // Schriftart festlegen Bereich.setFont(&FreeSerif24pt7b); Bereich.setCursor(5, 30); Bereich.print(“DHT Messwerte”); // Trennlinien Bereich.drawFastHLine(1, 50, tft.width(), TFT_WHITE); Bereich.drawFastHLine(1, 51, tft.width(), TFT_WHITE); Bereich.drawFastHLine(1, 52, tft.width(), TFT_WHITE); Bereich.setCursor(5, 100); Bereich.print(TemperaturMesswert + ” ”); // ° Gradzeichen als Kreis, Schrift beinhaltet keine Sonderzeichen Bereich.drawCircle(125, 75, 6, TFT_WHITE); Bereich.drawCircle(125, 75, 7, TFT_WHITE); Bereich.print(“ C”); Bereich.setCursor(5, 150); Bereich.print(LuftfeuchtigkeitMesswert + ” %”); // Canvas anzeigen // x, y, Zwischenspeicher, Breite, Höhe, Vordergrundfarbe, Hintergrundfarbe tft.drawBitmap(0, 0, Bereich.getBuffer(), Bereich.width(), Bereich.height(), 0xFFFF, 0x0000); Temperatur = WertBerechnen(Temperatur, (float)0.0, (float)40.0, (float)0.0, (float)40.0); Luftfeuchtigkeit = WertBerechnen(Luftfeuchtigkeit, (float)0.0, (float)100.0, (float)0.0, (float)100.0); dhtTemperatur.updateNeedle(Temperatur, 0); dhtLuftfeuchtigkeit.updateNeedle(Luftfeuchtigkeit, 0); delay(Wartezeit); } float WertBerechnen(float ip, float ipmin, float ipmax, float tomin, float tomax) { return tomin + (((tomax - tomin) * (ip - ipmin)) / (ipmax - ipmin)); } |
Programm mit der Bibliothek U8g2_for_TFT_eSPI
Die Bibliothek 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.

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 | #include “DHT.h” #include “TFT_eSPI.h” #include “TFT_eWidget.h” // https://github.com/Bodmer/U8g2_for_TFT_eSPI #include “U8g2_for_TFT_eSPI.h” // DHT-Pin anpassen int SENSOR_DHT = 15; // Sensortyp festlegen // DHT22 // #define SensorTyp DHT22 // DHT11 #define SensorTyp DHT22 // Sensor einen Namen zuweisen DHT dht(SENSOR_DHT, SensorTyp); // Objekt der Bibliothek TFT_eSPI erstellen TFT_eSPI tft = TFT_eSPI(); // Objekte des Widgets erstellen MeterWidget dhtTemperatur = MeterWidget(&tft); MeterWidget dhtLuftfeuchtigkeit = MeterWidget(&tft); // Wartezeit bis zur nächsten Messung int Wartezeit = 20000; // Objekt für Schriften von U8g2 (u8g2Schriften) U8g2_for_TFT_eSPI u8g2Schriften; void setup() { // Schriften von u8g2 tft zuordnen u8g2Schriften.begin(tft); // Sensor starten dht.begin(); // tft starten tft.init(); // wenn die Farben invertiert sind // weiß = schwarz, schwarz = weiss … // wenn nicht: Zeile mit // versehen tft.invertDisplay(1); tft.setRotation(0); tft.fillScreen(TFT_BLACK); Serial.begin(9600); // rot: Start-Ende in %, gelb: Start-Ende in %, orange: Start-Ende in %, grün: Start-Ende in % dhtTemperatur.setZones(75, 100, 0, 0, 25, 75, 0, 25); dhtLuftfeuchtigkeit.setZones(0, 100, 0, 0, 25, 75, 0, 25); // PositionX, PositionY, maximaler Wert, Text, Zahlen Skala dhtTemperatur.analogMeter(20, 170, 40, “Grad C”, “0”, “10”, “20”, “30”, “40”); dhtLuftfeuchtigkeit.analogMeter(20, 320, 100, “%”, “0”, “25”, “50”, “75”, “100”); u8g2Schriften.setCursor(5, 30); u8g2Schriften.setForegroundColor(TFT_WHITE); u8g2Schriften.setBackgroundColor(TFT_BLACK); u8g2Schriften.setFont(u8g2_font_inb27_mf); u8g2Schriften.print(“DHT Messwerte”); // Trennlinien tft.drawFastHLine(1, 40, tft.width(), TFT_WHITE); tft.drawFastHLine(1, 41, tft.width(), TFT_WHITE); tft.drawFastHLine(1, 42, tft.width(), TFT_WHITE); } void loop() { // Temperatur lesen float Temperatur = dht.readTemperature(); // in String umwandeln replace -> . durch , ersetzen String TemperaturMesswert = String(Temperatur); TemperaturMesswert.replace(“.”, “,”); // Luftfeuchtigkeit lesen float Luftfeuchtigkeit = dht.readHumidity(); // in String umwandeln replace -> . durch , ersetzen String LuftfeuchtigkeitMesswert = String(Luftfeuchtigkeit); LuftfeuchtigkeitMesswert.replace(“.”, “,”); // nur Anzeige Temperatur/Luftfeuchtigkeit löschen tft.fillRect(5, 60, tft.width(), 90, TFT_BLACK); u8g2Schriften.setCursor(10, 90); u8g2Schriften.setFont(u8g2_font_helvB18_tf); u8g2Schriften.print(“Temperatur: ” + TemperaturMesswert + ” °C”); u8g2Schriften.setCursor(10, 140); u8g2Schriften.print(“Luftfeuchtigkeit: ” + LuftfeuchtigkeitMesswert + ” %”); Temperatur = WertBerechnen(Temperatur, (float)0.0, (float)40.0, (float)0.0, (float)40.0); Luftfeuchtigkeit = WertBerechnen(Luftfeuchtigkeit, (float)0.0, (float)100.0, (float)0.0, (float)100.0); dhtTemperatur.updateNeedle(Temperatur, 0); dhtLuftfeuchtigkeit.updateNeedle(Luftfeuchtigkeit, 0); delay(Wartezeit); } float WertBerechnen(float ip, float ipmin, float ipmax, float tomin, float tomax) { return tomin + (((tomax - tomin) * (ip - ipmin)) / (ipmax - ipmin)); } |
Quellen
- Bibliothek TFT_eSPI
- Dokumentation zu TFT_eSPI
- u8g2 für TFT_eSPI
- Schriftarten von u8g2
- Adafruit Grafik-Bibliothek
- Adafruit-Schriftarten
Letzte Aktualisierung: