Live-Daten-Plot auf Arduino Mega: TFT-LCD-Historie mit DHT11-Sensor

Komponenten und Materialien

Komponente	Anzahl
Arduino Mega 2560	1
DHT11 Temperatur- & Feuchtigkeitssensor (4 Pins)	1
Elegoo 2,8" TFT LCD Shield	1
Jumper-Kabel (Sortiment)	1
Steckbrett (Breadboard)	1

Apps und Online-Dienste

• Arduino Web Editor

Projektbeschreibung

Überblick

Wollten Sie schon immer Sensordaten professionell auf einem TFT-LCD grafisch darstellen? Das Problem: Die Berechnungen für ein History-Graph sind komplex. Dieses Projekt nimmt Ihnen diese Arbeit ab – Sie müssen nur 5 Variablen anpassen, um Ihren persönlichen Graphen in Sekunden zu erstellen.

Funktionalität

Der Graph plottet die Temperatur live im 6-Sekunden-Takt. Jeder Wert wird als Punkt dargestellt, Punkte werden durch Linien verbunden. Die X-Achse zeigt die verstrichene Zeit, die Y-Achse den Wertebereich.

Funktionsweise: Arduino Mega liest DHT11, speichert Temperatur, zeichnet sie auf den konfigurierbaren Graphen.

• Read Temperature – liest Sensorwert
• Process Data – mappt Wert auf Graphenkoordinaten
• Graph Data – zeichnet Punkte und Linien

Grundlagen TFT-Koordinaten: Der Bildschirm ist eine Leinwand. Ein Rechteck wird gezeichnet mit:

tft.fillRect(originX, originY, sizeX, sizeY, Colour);

• originX: Abstand vom rechten Rand (Variable z im Diagramm)
• originY: Abstand vom oberen Rand (Variable x)
• sizeX: Breite (Länge)
• sizeY: Höhe

Vorteile

• Sensordaten auf TFT-LCD grafisch darstellen
• In Sekunden anpassbar

Projektaufbau

Schritt 1: Benötigte Hardware

Als Beispiel dient der DHT11, aber jeder Sensor kann verwendet werden (Anpassung weiter unten erklärt).

• 1× Arduino Mega
• 1× Elegoo 2,8" TFT LCD
• 1× DHT11 Sensor
• 1× Breadboard
• Jumper-Kabel

Schritt 2: Schaltung

DHT11 an Arduino Mega anschließen – fertig.

Schritt 3: Code verstehen

Drei Hauptbereiche:

• Graph Setup
• Temperatur lesen
• Graph zeichnen

Graph Setup – zeichnet Achsen, Markierungen, Beschriftung:

// Titel
tft.setCursor(10, 10);
tft.setTextColor(BLUE);
tft.setTextSize(4);
tft.println(graphName);
// Achsen
tft.drawLine(originX, originY, (originX + sizeX), originY, graphColor);
tft.drawLine(originX, originY, originX, (originY - sizeY), graphColor);
// X-Markierungen
for(int i = 0; i < numberOfMarks; i++) {
  tft.drawLine(mark[i], originY, mark[i], minorSizeY, graphColor);
}
// Y-Markierungen & Werte
for(int i = 0; i < 6; i++) {
  tft.drawLine(originX, (originY - number[i]), minorSizeX, (originY - number[i]), graphColor);
}
for(int i = 0; i < 6; i++) {
  tft.setCursor((minorSizeX - 30), (number[i] + numberSize));
  tft.setTextColor(graphColor);
  tft.setTextSize(1);
  tft.println(val[i]);
}

Temperatur lesen – kurz und knapp:

chk = DHT.read11(22);
temp = (DHT.temperature);

Graph zeichnen – rolling history (8 Punkte sichtbar):

if(blockPos < 8) {
  // Zeitlabel
  tft.setCursor((mark[valuePos] - 5), (originY + 16));
  tft.setTextColor(graphColor, WHITE);
  tft.setTextSize(1);
  tft.println(timeBlock[valuePos]);
  // Wert mappen & Punkt zeichnen
  locationBlock[valuePos] = map(temp, 0, graphRange, originY, (originY - sizeY));
  tft.fillRect((mark[valuePos] - 1), (locationBlock[valuePos] - 1), markSize, markSize, pointColor);
  // Linie zum Vorherigen
  if(valuePos != 0) {
    tft.drawLine(mark[valuePos], locationBlock[valuePos], mark[(valuePos - 1)], locationBlock[(valuePos - 1)], lineColor);
  }
  blockPos++;
} else {
  // Canvas leeren (scrollen)
  tft.fillRect((originX + 2), (originY - sizeY), sizeX, sizeY, WHITE);
  // Aktuellen Wert
  locationBlock[valuePos] = map(temp, 0, graphRange, originY, (originY - sizeY));
  tft.fillRect((mark[7]), (locationBlock[valuePos] - 1), markSize, markSize, pointColor);
  // Alle 8 Punkte & Linien neu zeichnen
  for(int i = 0; i < 8; i++) {
    tft.fillRect((mark[(blockPos - (i + 1))] - 1), (locationBlock[(valuePos - i)] - 1), markSize, markSize, pointColor);
  }
  for(int i = 0; i < 7; i++) {
    tft.drawLine(mark[blockPos - (i + 1)], locationBlock[valuePos - i], mark[blockPos - (i + 2)], locationBlock[valuePos - (i + 1)], lineColor);
  }
  // Zeitlabels verschieben
  for(int i = 0; i <= 8; i++) {
    tft.setCursor((mark[(blockPos - i)] - 5), (originY + 16));
    tft.setTextColor(graphColor, WHITE);
    tft.setTextSize(1);
    tft.println(timeBlock[valuePos - i]);
  }
}
valuePos++;

Graph personalisieren

Der Graph ist zu 100 % anpassbar: Größe, Position, Farben, Datenquelle. Wichtige Variablen:

bool proDebug = 0;           // Debug-Modus (Serial Monitor muss offen sein)
uint16_t graphColor = BLUE;  // Achsen & Beschriftung
uint16_t pointColor = BLACK; // Datenpunkte
uint16_t lineColor = GREEN;  // Verbindungslinien
String graphName = "Time Graph";
int graphRange = 50;         // MAX-Wert für Y-Achse (z.B. 50°C, oder 1024 für Analog)
int markSize = 3;            // Punktgröße (Quadrat-Seite)

Alle anderen Variablen werden automatisch berechnet.

Anderen Sensorwert darstellen

Nicht nur Temperatur – jeder Sensorwert (Bodenfeuchte, Licht, etc.) kann geplottet werden. Einfach die Lese-Routine anpassen und graphRange setzen.

Weiterführende Ideen

• originX, originY, sizeX, sizeY anpassen für andere Position/Größe
• Header-Datei mit Farbcodes nutzen
• Mehrere Graphen nebeneinander

Bibliotheken

• Elegoo Libraries (Copyright 2012 Adafruit Industries, BSD License)
• DHT Library (Autor Rob Tillaart, Public Domain)

Hintergrund

Ich hatte zuvor ein Projekt für Balkendiagramme (1–4 Werte) veröffentlicht. Da es keine sauberen History-Graph-Templates gab, habe ich die Mathematik erneut aufgearbeitet und dieses universelle Template erstellt.