Biblio­thek TFT_eSPI

Lese­zeit: 5 Minu­ten
Inhalt

Zie­le des Projekts

  • Ein­füh­rung in die ⇒Biblio­thek TFT_eSPI
  • Nut­zung eines gra­fi­schen Ele­ments zur Anzei­ge der Mess­wer­te eines DHT-Sensors

Ver­wen­de­te Hardware

Kon­fi­gu­ra­ti­on der Mikrocontroller

DHT-Mess­wer­te gra­fisch darstellen

Bei man­chen TFT-Dis­plays sind die Far­ben inver­tiert: schwarz = weiß und weiß = schwarz

Die kor­rek­ten Far­ben wer­den mit

 tft.init();
 tft.invertDisplay(1);

her­ge­stellt.

Zusätz­li­che Biblio­thek installieren:

TFT 240×320 Pixel

Pro­gramm mit ⇒Adafruit-Schrift, nutzt das ⇒GFX­can­vas-Kon­zept 

#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 320×480 Pixel

Pro­gramm mit Adafruit-Schrift und ⇒GFX­can­vas-Kon­zept :

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

Pro­gramm mit der Biblio­thek U8g2_for_TFT_eSPI

Die Biblio­thek kann nicht über die Biblio­theks­ver­wal­tung instal­liert wer­den, sie muss heruntergeladen 

https://​git​hub​.com/​B​o​d​m​e​r​/​U​8​g​2​_​f​o​r​_​T​F​T​_​e​SPI

und mit

Sketch -> Biblio­thek ein­bin­den -> zip-Biblio­thek hinzufügen

instal­liert werden.

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

Quel­len

Letzte Aktualisierung: März 17, 2025 @ 13:15