ESP32: TFT-Display mit Touch-Funktion (CYD) Teil 1: verstehen & nutzen

#include <WiFi.h>
#include <HTTPClient.h>
#include <ArduinoJson.h>
#include <TFT_eSPI.h>

// WLAN-Zugangsdaten (SSID = Service Set Identifier)
const char* ssid = "DEIN_WLAN_NAME";
const char* password = "DEIN_WLAN_PASSWORT";

// Open-Meteo API URL (Koordinaten: 50.91, 6.81)
String apiUrl = "http://api.open-meteo.com/v1/forecast?latitude=50.91&longitude=6.81&current_weather=true";

// TFT-Display Setup
TFT_eSPI tft = TFT_eSPI();

// Timer-Variablen: Wir wollen die API nicht blockieren oder überlasten
unsigned long lastTime = 0;
// Intervall auf 15 Minuten setzen (15 Minuten * 60 Sekunden * 1000 Millisekunden)
unsigned long timerDelay = 900000; 

void setup() {
  Serial.begin(115200);

  // Hintergrundbeleuchtung des Displays einschalten (Pin 27)
  pinMode(27, OUTPUT);
  digitalWrite(27, HIGH);

  // Display initialisieren
  tft.init();
  tft.setRotation(1); // Querformat (480 x 320)
  tft.fillScreen(TFT_BLACK);

  // 1. WLAN-Verbindung aufbauen
  WiFi.begin(ssid, password);
  tft.setTextColor(TFT_WHITE, TFT_BLACK);
  tft.drawCentreString("Verbinde mit WLAN...", 240, 150, 4);
  
  Serial.print("Verbinde mit WLAN");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  
  // Erfolgsmeldung auf dem Display
  tft.fillScreen(TFT_BLACK);
  tft.setTextColor(TFT_GREEN, TFT_BLACK);
  tft.drawCentreString("WLAN verbunden!", 240, 150, 4);
  delay(2000);
  tft.fillScreen(TFT_BLACK);

  // 2. Ersten API-Aufruf direkt beim Start ausführen
  fetchAndDisplayWeather();
}

void loop() {
  // API nur alle 15 Minuten abfragen
  if ((millis() - lastTime) > timerDelay) {
    if (WiFi.status() == WL_CONNECTED) {
      fetchAndDisplayWeather();
    }
    lastTime = millis();
  }
}

// Funktion für den HTTP-Request (Hypertext Transfer Protocol) und die Anzeige
void fetchAndDisplayWeather() {
  HTTPClient http; 
  
  http.begin(apiUrl);
  int httpResponseCode = http.GET(); // GET-Anfrage an den Server senden
  
  if (httpResponseCode > 0) {
    String payload = http.getString();
    
    // Neues JSON-Dokument vorbereiten (ArduinoJson Version 7)
    JsonDocument doc;
    DeserializationError error = deserializeJson(doc, payload);
    
    if (!error) {
      // Temperatur aus dem JSON extrahieren
      float temp = doc["current_weather"]["temperature"];
      
      // Anzeige auf dem TFT aktualisieren
      // TextPadding füllt den Hintergrund automatisch schwarz, um altes Flackern zu verhindern
      tft.setTextPadding(240); 
      
      tft.setTextColor(TFT_LIGHTGREY, TFT_BLACK);
      tft.drawCentreString("Aktuelle Temperatur in Koeln:", 230, 80, 4);
      
      // Temperatur groß in Gelb darstellen
      tft.setTextColor(TFT_YELLOW, TFT_BLACK);
      String tempNumber = String(temp, 1);
      tft.setTextPadding(150); 
      tft.drawRightString(tempNumber, 280, 150, 7); 
      tft.setTextPadding(0);
      tft.drawString("C", 290, 180, 4); 
      
      tft.setTextPadding(0);
    } else {
      Serial.print("JSON parsen fehlgeschlagen: ");
      Serial.println(error.c_str());
    }
  } else {
    Serial.print("Fehler beim HTTP-Request. Code: ");
    Serial.println(httpResponseCode);
  }
  
  http.end(); // Verbindung sauber schließen, um Speicher freizugeben
}

#include <WiFi.h>
#include <HTTPClient.h>
#include <ArduinoJson.h>
#include <TFT_eSPI.h>

// WLAN-Zugangsdaten (SSID = Service Set Identifier)
const char* ssid = "DEIN_WLAN_NAME";
const char* password = "DEIN_WLAN_PASSWORT";

String apiUrl = "http://api.open-meteo.com/v1/forecast?latitude=50.91&longitude=6.81&current=temperature_2m,relative_humidity_2m,apparent_temperature,weather_code,wind_speed_10m,wind_direction_10m&daily=precipitation_probability_max&timezone=Europe/Berlin";

// TFT-Display Setup (Thin-Film Transistor)
TFT_eSPI tft = TFT_eSPI();

// Timer-Variablen
unsigned long lastTime = 0;
// Intervall auf 15 Minuten setzen (15 * 60 * 1000)
unsigned long timerDelay = 900000; 

// Hilfsfunktion: WMO-Code (World Meteorological Organization) in Text übersetzen
String getWeatherDescription(int code) {
  switch (code) {
    case 0: return "Klarer Himmel";
    case 1: case 2: case 3: return "Heiter bis wolkig";
    case 45: case 48: return "Nebel";
    case 51: case 53: case 55: return "Nieselregen";
    case 61: case 63: case 65: return "Regen";
    case 71: case 73: case 75: return "Schnee";
    case 77: return "Schneegriesel";
    case 80: case 81: case 82: return "Regenschauer";
    case 85: case 86: return "Schneeschauer";
    case 95: case 96: case 99: return "Gewitter";
    default: return "Unbekanntes Wetter";
  }
}

void setup() {
  Serial.begin(115200);

  // Hintergrundbeleuchtung des Displays einschalten (Pin 27)
  pinMode(27, OUTPUT);
  digitalWrite(27, HIGH);

  // Display initialisieren
  tft.init();
  tft.setRotation(1); // Querformat (480 x 320)
  tft.fillScreen(TFT_BLACK);

  // 1. WLAN-Verbindung aufbauen
  WiFi.begin(ssid, password);
  tft.setTextColor(TFT_WHITE, TFT_BLACK);
  tft.drawCentreString("Verbinde mit WLAN...", 240, 150, 4);
  
  Serial.print("Verbinde mit WLAN");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  
  // Erfolgsmeldung
  tft.fillScreen(TFT_BLACK);
  tft.setTextColor(TFT_GREEN, TFT_BLACK);
  tft.drawCentreString("WLAN verbunden!", 240, 150, 4);
  delay(2000);
  tft.fillScreen(TFT_BLACK);

  // 2. Ersten API-Aufruf direkt beim Start ausführen
  fetchAndDisplayWeather();
}

void loop() {
  // API nur alle 15 Minuten abfragen
  if ((millis() - lastTime) > timerDelay) {
    if (WiFi.status() == WL_CONNECTED) {
      fetchAndDisplayWeather();
    }
    lastTime = millis();
  }
}

// Funktion für den HTTP-Request (Hypertext Transfer Protocol)
void fetchAndDisplayWeather() {
  HTTPClient http; 
  
  http.begin(apiUrl);
  int httpResponseCode = http.GET(); 
  
  if (httpResponseCode > 0) {
    String payload = http.getString();
    
    // JSON (JavaScript Object Notation) Dokument vorbereiten (ArduinoJson Version 7)
    JsonDocument doc;
    DeserializationError error = deserializeJson(doc, payload);
    
    if (!error) {
      // Daten aus dem JSON extrahieren
      float temp       = doc["current"]["temperature_2m"];
      float feelsLike  = doc["current"]["apparent_temperature"];
      int humidity     = doc["current"]["relative_humidity_2m"];
      float windSpeed  = doc["current"]["wind_speed_10m"];
      int windDir      = doc["current"]["wind_direction_10m"];
      int weatherCode  = doc["current"]["weather_code"];
      
      // Regenwahrscheinlichkeit für den heutigen Tag (Index 0)
      int rainProb     = doc["daily"]["precipitation_probability_max"][0];

      String weatherDesc = getWeatherDescription(weatherCode);
      
      // Bildschirm leeren
      tft.fillScreen(TFT_BLACK);

      // --- ÜBERSCHRIFT ---
      tft.setTextColor(TFT_LIGHTGREY, TFT_BLACK);
      tft.drawCentreString("Wetter in Koeln", 240, 10, 4);
      tft.drawLine(20, 40, 460, 40, TFT_DARKGREY);

      // --- LINKE SEITE (Hauptinformationen) ---
      
      // 1. Nur die Temperatur-Zahl mit der großen Schriftart (7) schreiben
      tft.setTextColor(TFT_YELLOW, TFT_BLACK);
      String tempString = String(temp, 1);
      tft.drawString(tempString, 30, 80, 7); 
      
      // 2. Die Breite der Zahl berechnen, damit wir wissen, wo das 'C' hin muss
      int numWidth = tft.textWidth(tempString, 7);
      
      // 3. Grad-Zeichen als zwei ineinanderliegende Kreise selbst zeichnen (sieht oft besser aus)
      int degreeX = 30 + numWidth + 5;
      tft.drawCircle(degreeX, 85, 3, TFT_YELLOW); 
      tft.drawCircle(degreeX, 85, 4, TFT_YELLOW); // Etwas dicker machen
      
      // 4. Das 'C' mit der normalen Schriftart (4) schreiben
      tft.drawString("C", degreeX + 10, 80 + 15, 4); 
      
      // Wetterbeschreibung (z.B. "Heiter bis wolkig")
      tft.setTextColor(TFT_CYAN, TFT_BLACK);
      tft.drawString(weatherDesc, 30, 150, 4);

      // --- RECHTE SEITE (Details) ---
      int rightColX = 250; // Startpunkt für die rechte Spalte
      
      tft.setTextColor(TFT_WHITE, TFT_BLACK);
      tft.drawString("Details:", rightColX, 70, 4);
      
      tft.setTextColor(TFT_LIGHTGREY, TFT_BLACK);
      
      String feelsString = "Gefuehlt: " + String(feelsLike, 1) + " C";
      tft.drawString(feelsString, rightColX, 105, 2);
      
      String humString = "Feuchte:  " + String(humidity) + " %";
      tft.drawString(humString, rightColX, 130, 2);
      
      String windString = "Wind:     " + String(windSpeed, 1) + " km/h";
      tft.drawString(windString, rightColX, 155, 2);

      String dirString = "Richtung: " + String(windDir) + " Grad";
      tft.drawString(dirString, rightColX, 180, 2);
      
      String rainString = "Regenrisiko: " + String(rainProb) + " %";
      tft.drawString(rainString, rightColX, 205, 2); 

      // --- FUSSZEILE ---
      tft.drawLine(20, 280, 460, 280, TFT_DARKGREY);
      tft.setTextColor(TFT_DARKGREY, TFT_BLACK);
      tft.drawCentreString("Daten bereitgestellt von Open-Meteo", 240, 290, 2);

    } else {
      Serial.print("JSON parsen fehlgeschlagen: ");
      Serial.println(error.c_str());
    }
  } else {
    Serial.print("Fehler beim HTTP-Request. Code: ");
    Serial.println(httpResponseCode);
  }
  
  http.end(); // Verbindung sauber schließen
}