Wetterdaten Openweathermap im Browser anzeigen (Lösung) – Projekte für Arduino und ESP32-Mikrocontroller

#ifdef ESP32
#include "WiFi.h"
#include "HTTPClient.h"
#include "WebServer.h"
WebServer Server(80);
#else
#include "ESP8266WiFi.h"
#include "ESP8266HTTPClient.h"
#include "ESP8266WebServer.h"
ESP8266WebServer Server(80);
#endif

#include "WiFiUdp.h"
#include "NTP3.h"
#include "ArduinoJson.h"
#include "TimeLib.h"

WiFiClient Klient;
WiFiUDP wifiUdp;
NTP3 ntp(wifiUdp);

// Router-SSID/Passwort anpassen
char Router[] = "Router_SSID";
char Passwort[] = "xxxxxxxx";

// Info IP-Adressen anzeigen
// true -> anzeigen, false -> verbergen
bool InfoAnzeigen = true;

// ip und gateway müssen an das lokale Netz angepasst werden
IPAddress ip(192, 168, 1, 90);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);

// DNS-Server normalerweise identisch mit der IP des Routers
IPAddress primaryDNS(192, 168, 1, 1);

// öffentlicher sekundärer DNS-Server (Quad9)
IPAddress secondaryDNS(9, 9, 9, 9);

// Daten für die API von Openweather -> muss angepasst werden
String APIKey = "6305124dd1f92d1a7cf5eaxxxxxxxxxx";

// lon = longitude = Breitengrad, lat = latitude = Längengrad
// mit Kartenprogramm oder Openweathermap bestimmen
String Koordinaten = "lat=50.9833&lon=7.133";

/* Umlaute umwandeln:
  &auml; = ä
  &ouml; = ö
  &uuml; = ü
  &szlig; = ß
*/
String Stadt = "Bergisch Gladbach";

// String für die vom Server gelieferten Daten
String JSONDaten;

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

  // WiFi starten
  // Stations-Modus
  WiFi.mode(WIFI_STA);
  WiFi.begin(Router, Passwort);

  WiFi.config(ip, gateway, subnet, primaryDNS, secondaryDNS);

  /*
    Zeitzone
    CEST: Central European Summertime
    Beginn europäische Sommerzeit letzter Sonntag im März 2 Uhr UTC + 2 Stunden
  */
  ntp.ruleDST("CEST", Last, Sun, Mar, 2, 120);

  // CET: Central European Time
  // Beginn Normalzeit letzter Sonntag im Oktober 3 Uhr UTC + 1 Stunde
  ntp.ruleSTD("CET", Last, Sun, Oct, 3, 60);

  // ntp starten Zeitserver deutscher NTP-Pool
  ntp.begin("de.pool.ntp.org");
  ntp.updateInterval(10000);
  WiFi.setAutoReconnect(true);
  WiFi.setSleep(false);

  // Webserver starten
  // / -> Aufruf der URL, SeiteBauen -> Aufruf der Funktion
  Server.begin();
  Server.on("/", SeiteBauen);
}

void loop() 
{
  // auf Anfragen warten
  Server.handleClient();
}

void SeiteBauen() 
{
  String Wetterlage;
  String ZeitSonnenaufgang;
  String ZeitSonnenuntergang;

  // Wetterdaten holen, wenn WiFi verbunden ist
  if (WiFi.status() == WL_CONNECTED) 
  {
    // String OpenweatherServer =  "http://api.openweathermap.org/data/4.0/onecall/timeline/15min?lat=50.9833&lon=7.133&units=metric&lang=de&appid=6305124dd1f92d1a7cf5eaca6d9d8e6d";
    String OpenweatherServer = "http://api.openweathermap.org/data/4.0/onecall/timeline/15min?" + Koordinaten + "&units=metric&lang=de" + +"&appid=" + APIKey;

    HTTPClient http;
    http.begin(Klient, OpenweatherServer);
    int httpCode = http.GET();

    if (httpCode > 0) 
    {
      String ServerAntwort = http.getString();

      JsonDocument JSONDaten;
      deserializeJson(JSONDaten, ServerAntwort);

      // Daten sammeln
      String aktuelleTemperatur = String(JSONDaten["data"][0]["temp"]);
      aktuelleTemperatur.replace(".", ",");
      String aktuelleUV = String(JSONDaten["data"][0]["uvi"]);
      aktuelleUV.replace(".", ",");

      String Wetterlage = String(JSONDaten["data"][0]["weather"][0]["description"]);
      String WetterIcon = JSONDaten["data"][0]["weather"][0]["icon"];

      // Wetterlage Umlaute ersetzen
      Wetterlage.replace("ä", "&auml;");
      Wetterlage.replace("ö", "&ouml;");
      Wetterlage.replace("ü", "&uuml;");
      Wetterlage.replace("ß", "&szlig;");

      // Vorhersage nächster Tag
      String Temperatur1Tag = JSONDaten["data"][1]["temp"];
      Temperatur1Tag.replace(".", ",");

      String Wetterlage1Tag = String(JSONDaten["data"][1]["weather"][0]["description"]);
      String WetterIcon1Tag = JSONDaten["data"][1]["weather"][0]["icon"];
      
      // Wetterlage Umlaute ersetzen
      Wetterlage1Tag.replace("ä", "&auml;");
      Wetterlage1Tag.replace("ö", "&ouml;");
      Wetterlage1Tag.replace("ü", "&uuml;");
      Wetterlage1Tag.replace("ß", "&szlig;");

      int Regenwahrscheinlichkeit =JSONDaten["data"][1]["pop"];
      String Regenwahrscheinlichkeit1Tag = String(Regenwahrscheinlichkeit * 100);

      // übernächster Tag
      String Temperatur2Tag = JSONDaten["data"][2]["temp"];
      Temperatur2Tag.replace(".", ",");

      String Wetterlage2Tag = String(JSONDaten["data"][1]["weather"][0]["description"]);
      String WetterIcon2Tag = JSONDaten["data"][1]["weather"][0]["icon"];
      
      // Wetterlage Umlaute ersetzen
      Wetterlage2Tag.replace("ä", "&auml;");
      Wetterlage2Tag.replace("ö", "&ouml;");
      Wetterlage2Tag.replace("ü", "&uuml;");
      Wetterlage2Tag.replace("ß", "&szlig;");

      Regenwahrscheinlichkeit =JSONDaten["data"][2]["pop"];
      String Regenwahrscheinlichkeit2Tag = String(Regenwahrscheinlichkeit * 100);

      // Seite "zusammenbauen"
      String Seite = "";

      // refresh -> Seite automatisch aktualisieren Zeit in Sekunden
      Seite += "<head><meta http-equiv=\"refresh\" content=\"6000\"></head>";
      Seite += "<p style=\"font-size: 14pt; color: black;\">";
      Seite += "Letzte Aktualisierung: ";

      if (ntp.update()) Seite += ntp.formattedTime("%H:%M:%S Uhr</p><hr>");

      // Button aktualisieren
      Seite += "<p style=\"height:40px;\">";
      Seite += "<a href=\"/\">";
      Seite += "<input style=\"width:350px; font-size:18pt; font-weight:bold;";
      Seite += "background-color:#55A96B; color:black;";
      Seite += " box-shadow: 0 3px 0 #00695c; border-radius:1.5em;cursor:pointer";
      Seite += " \"type=\"button\" value=\"aktualisieren\"></a></p>";
      Seite += "<h1 style=\"font-size: 20pt; color: black;;padding: 10px;\">";
      Seite += Stadt + "</h1>";
      Seite += "<h1 style=\"font-size: 20pt; color: black; background: #e9fdd4;padding: 10px;\">";

      Seite += "Aktuelles Wetter</h1>";
      Seite += "<div style=\"height:200px; line-height: 1.6em; display:block\">";
      Seite += "<p style=\"font-size: 14pt\">";
      Seite += "<img src = \"http://openweathermap.org/img/wn/" + WetterIcon + "@4x.png\" style=\"float:left;\">";
      Seite += "Wetterlage: " + Wetterlage + "<br>";
      Seite += "Temperatur: " + aktuelleTemperatur + " &deg;C<br>";
      Seite += "Luftdruck: " + String(JSONDaten["data"][0]["pressure"]) + "%<br>";
      Seite += "Luftfeuchtigkeit: " + String(JSONDaten["data"][0]["humidity"]) + " hPa<br>";
      Seite += "Wolkendichte: " + String(JSONDaten["data"][0]["clouds"]) + "%<br>";
      Seite += "Windrichtung: " + String(JSONDaten["data"][0]["wind_deg"]) + "&deg;<br>";
      Seite += "Windgeschwindigkeit: " + String(int(JSONDaten["data"][0]["wind_speed"])) + " m/s<br></p></div>";

      // Vorhersage 1 Tag
      Seite += "<h1 style=\"font-size: 20pt; color: black; background: #e9fdd4;padding: 10px;\">";
      Seite += "Vorhersage</h1>";

      Seite += "<p style=\"font-size: 14pt; color: black; font-style: bold; background: #b9e2f4; padding: 2px;\">";
      Seite +=  "Wetter morgen</p>";   
      Seite += "<div style=\"height: 210px;\">";
      Seite += "<p style=\"font-size: 14pt\">";
      Seite += "<img src = \"http://openweathermap.org/img/wn/" + WetterIcon1Tag + "@4x.png\" style=\"float:left;\">";
      Seite += "Wetterlage: " + Wetterlage1Tag + "<br>";
      Seite += "Temperatur: " + Temperatur1Tag + " &deg;C<br>";
      Seite += "Luftfeuchtigkeit: " + String(JSONDaten["data"][1]["humidity"]) + "%<br>";
      Seite += "Luftdruck: " + String(JSONDaten["data"][1]["pressure"]) + " hPa<br>";
      Seite += "Wolkendichte: " + String(JSONDaten["data"][1]["clouds"]) + "%<br>";
      Seite += "Windrichtung: " + String(JSONDaten["data"][1]["wind_deg"]) + "&deg;<br>";
      Seite += "Windgeschwindigkeit: " + String(int(JSONDaten["data"][1]["wind_speed"])) + " m/s<br>";
      Seite += "Regenwahrscheinlichkeit: " + Regenwahrscheinlichkeit1Tag + "%<br>";
      Seite += "</div>";

      // übernächster Tag
      Seite += "<p style=\"font-size: 14pt; color: black; font-style: bold; background: #b9e2f4; padding: 2px;\">";
      Seite +=  "Wetter &uuml;bermorgen</p>";   
      Seite += "<div style=\"height: 210px;\">";
      Seite += "<p style=\"font-size: 14pt\">";
      Seite += "<img src = \"http://openweathermap.org/img/wn/" + WetterIcon2Tag + "@4x.png\" style=\"float:left;\">";
      Seite += "Wetterlage: " + Wetterlage2Tag + "<br>";
      Seite += "Temperatur: " + Temperatur2Tag + " &deg;C<br>";
      Seite += "Luftfeuchtigkeit: " + String(JSONDaten["data"][2]["humidity"]) + "%<br>";
      Seite += "Luftdruck: " + String(JSONDaten["data"][2]["pressure"]) + " hPa<br>";
      Seite += "Wolkendichte: " + String(JSONDaten["data"][2]["clouds"]) + "%<br>";
      Seite += "Windrichtung: " + String(JSONDaten["data"][2]["wind_deg"]) + "&deg;<br>";
      Seite += "Windgeschwindigkeit: " + String(int(JSONDaten["data"][2]["wind_speed"])) + " m/s<br>";
      Seite += "Regenwahrscheinlichkeit: " + Regenwahrscheinlichkeit2Tag + "%<br>";
      Seite += "</div>";

      Seite += "<hr>";

      // IP-Adressen anzeigen
      if (InfoAnzeigen) 
      {
        Seite += "<p style=\"font-size: 14pt; color: black;\">";
        Seite += "Verbunden mit: " + WiFi.SSID() + "<br>";
        Seite += "Signalst&auml;rke: " + String(WiFi.RSSI()) + "<br>";
        Seite += "IP-Adresse ESP: " + String(WiFi.localIP().toString()) + "</p>";
      }

      // Seite anzeigen
      Server.send(200, "text/html", Seite);
    }
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

#ifdef ESP32

#include "WiFi.h"

#include "HTTPClient.h"

#include "WebServer.h"

WebServer Server(80);

#else

#include "ESP8266WiFi.h"

#include "ESP8266HTTPClient.h"

#include "ESP8266WebServer.h"

ESP8266WebServer Server(80);

#endif

#include "WiFiUdp.h"

#include "NTP3.h"

#include "ArduinoJson.h"

#include "TimeLib.h"

WiFiClient Klient;

WiFiUDP wifiUdp;

NTP3 ntp(wifiUdp);

// Router-SSID/Passwort anpassen

char Router[] = "Router_SSID";

char Passwort[] = "xxxxxxxx";

// Info IP-Adressen anzeigen

// true -> anzeigen, false -> verbergen

bool InfoAnzeigen = true;

// ip und gateway müssen an das lokale Netz angepasst werden

IPAddress ip(192, 168, 1, 90);

IPAddress gateway(192, 168, 1, 1);

IPAddress subnet(255, 255, 255, 0);

// DNS-Server normalerweise identisch mit der IP des Routers

IPAddress primaryDNS(192, 168, 1, 1);

// öffentlicher sekundärer DNS-Server (Quad9)

IPAddress secondaryDNS(9, 9, 9, 9);

// Daten für die API von Openweather -> muss angepasst werden

String APIKey = "6305124dd1f92d1a7cf5eaxxxxxxxxxx";

// lon = longitude = Breitengrad, lat = latitude = Längengrad

// mit Kartenprogramm oder Openweathermap bestimmen

String Koordinaten = "lat=50.9833&lon=7.133";

/* Umlaute umwandeln:

ä = ä

ö = ö

ü = ü

ß = ß

String Stadt = "Bergisch Gladbach";

// String für die vom Server gelieferten Daten

String JSONDaten;

void setup()

{

Serial.begin(9600);

// WiFi starten

// Stations-Modus

WiFi.mode(WIFI_STA);

WiFi.begin(Router, Passwort);

WiFi.config(ip, gateway, subnet, primaryDNS, secondaryDNS);

Zeitzone

CEST: Central European Summertime

Beginn europäische Sommerzeit letzter Sonntag im März 2 Uhr UTC + 2 Stunden

ntp.ruleDST("CEST", Last, Sun, Mar, 2, 120);

// CET: Central European Time

// Beginn Normalzeit letzter Sonntag im Oktober 3 Uhr UTC + 1 Stunde

ntp.ruleSTD("CET", Last, Sun, Oct, 3, 60);

// ntp starten Zeitserver deutscher NTP-Pool

ntp.begin("de.pool.ntp.org");

ntp.updateInterval(10000);

WiFi.setAutoReconnect(true);

WiFi.setSleep(false);

// Webserver starten

// / -> Aufruf der URL, SeiteBauen -> Aufruf der Funktion

Server.begin();

Server.on("/", SeiteBauen);

}

void loop()

{

// auf Anfragen warten

Server.handleClient();

}

void SeiteBauen()

{

String Wetterlage;

String ZeitSonnenaufgang;

String ZeitSonnenuntergang;

// Wetterdaten holen, wenn WiFi verbunden ist

if (WiFi.status() == WL_CONNECTED)

{

// String OpenweatherServer = "http://api.openweathermap.org/data/4.0/onecall/timeline/15min?lat=50.9833&lon=7.133&units=metric&lang=de&appid=6305124dd1f92d1a7cf5eaca6d9d8e6d";

String OpenweatherServer = "http://api.openweathermap.org/data/4.0/onecall/timeline/15min?" + Koordinaten + "&units=metric&lang=de" + +"&appid=" + APIKey;

HTTPClient http;

http.begin(Klient, OpenweatherServer);

int httpCode = http.GET();

if (httpCode > 0)

{

String ServerAntwort = http.getString();

JsonDocument JSONDaten;

deserializeJson(JSONDaten, ServerAntwort);

// Daten sammeln

String aktuelleTemperatur = String(JSONDaten["data"][0]["temp"]);

aktuelleTemperatur.replace(".", ",");

String aktuelleUV = String(JSONDaten["data"][0]["uvi"]);

aktuelleUV.replace(".", ",");

String Wetterlage = String(JSONDaten["data"][0]["weather"][0]["description"]);

String WetterIcon = JSONDaten["data"][0]["weather"][0]["icon"];

// Wetterlage Umlaute ersetzen

Wetterlage.replace("ä", "ä");

Wetterlage.replace("ö", "ö");

Wetterlage.replace("ü", "ü");

Wetterlage.replace("ß", "ß");

// Vorhersage nächster Tag

String Temperatur1Tag = JSONDaten["data"][1]["temp"];

Temperatur1Tag.replace(".", ",");

String Wetterlage1Tag = String(JSONDaten["data"][1]["weather"][0]["description"]);

String WetterIcon1Tag = JSONDaten["data"][1]["weather"][0]["icon"];

// Wetterlage Umlaute ersetzen

Wetterlage1Tag.replace("ä", "ä");

Wetterlage1Tag.replace("ö", "ö");

Wetterlage1Tag.replace("ü", "ü");

Wetterlage1Tag.replace("ß", "ß");

int Regenwahrscheinlichkeit =JSONDaten["data"][1]["pop"];

String Regenwahrscheinlichkeit1Tag = String(Regenwahrscheinlichkeit * 100);

// übernächster Tag

String Temperatur2Tag = JSONDaten["data"][2]["temp"];

Temperatur2Tag.replace(".", ",");

String Wetterlage2Tag = String(JSONDaten["data"][1]["weather"][0]["description"]);

String WetterIcon2Tag = JSONDaten["data"][1]["weather"][0]["icon"];

// Wetterlage Umlaute ersetzen

Wetterlage2Tag.replace("ä", "ä");

Wetterlage2Tag.replace("ö", "ö");

Wetterlage2Tag.replace("ü", "ü");

Wetterlage2Tag.replace("ß", "ß");

Regenwahrscheinlichkeit =JSONDaten["data"][2]["pop"];

String Regenwahrscheinlichkeit2Tag = String(Regenwahrscheinlichkeit * 100);

// Seite "zusammenbauen"

String Seite = "";

// refresh -> Seite automatisch aktualisieren Zeit in Sekunden

Seite += "<head><meta http-equiv=\"refresh\" content=\"6000\"></head>";

Seite += "<p style=\"font-size: 14pt; color: black;\">";

Seite += "Letzte Aktualisierung: ";

if (ntp.update()) Seite += ntp.formattedTime("%H:%M:%S Uhr</p><hr>");

// Button aktualisieren

Seite += "<p style=\"height:40px;\">";

Seite += "<a href=\"/\">";

Seite += "<input style=\"width:350px; font-size:18pt; font-weight:bold;";

Seite += "background-color:#55A96B; color:black;";

Seite += " box-shadow: 0 3px 0 #00695c; border-radius:1.5em;cursor:pointer";

Seite += " \"type=\"button\" value=\"aktualisieren\"></a></p>";

Seite += "<h1 style=\"font-size: 20pt; color: black;;padding: 10px;\">";

Seite += Stadt + "</h1>";

Seite += "<h1 style=\"font-size: 20pt; color: black; background: #e9fdd4;padding: 10px;\">";

Seite += "Aktuelles Wetter</h1>";

Seite += "<div style=\"height:200px; line-height: 1.6em; display:block\">";

Seite += "<p style=\"font-size: 14pt\">";

Seite += "<img src = \"http://openweathermap.org/img/wn/" + WetterIcon + "@4x.png\" style=\"float:left;\">";

Seite += "Wetterlage: " + Wetterlage + "<br>";

Seite += "Temperatur: " + aktuelleTemperatur + " °C<br>";

Seite += "Luftdruck: " + String(JSONDaten["data"][0]["pressure"]) + "%<br>";

Seite += "Luftfeuchtigkeit: " + String(JSONDaten["data"][0]["humidity"]) + " hPa<br>";

Seite += "Wolkendichte: " + String(JSONDaten["data"][0]["clouds"]) + "%<br>";

Seite += "Windrichtung: " + String(JSONDaten["data"][0]["wind_deg"]) + "°<br>";

Seite += "Windgeschwindigkeit: " + String(int(JSONDaten["data"][0]["wind_speed"])) + " m/s<br></p></div>";

// Vorhersage 1 Tag

Seite += "<h1 style=\"font-size: 20pt; color: black; background: #e9fdd4;padding: 10px;\">";

Seite += "Vorhersage</h1>";

Seite += "<p style=\"font-size: 14pt; color: black; font-style: bold; background: #b9e2f4; padding: 2px;\">";

Seite += "Wetter morgen</p>";

Seite += "<div style=\"height: 210px;\">";

Seite += "<p style=\"font-size: 14pt\">";

Seite += "<img src = \"http://openweathermap.org/img/wn/" + WetterIcon1Tag + "@4x.png\" style=\"float:left;\">";

Seite += "Wetterlage: " + Wetterlage1Tag + "<br>";

Seite += "Temperatur: " + Temperatur1Tag + " °C<br>";

Seite += "Luftfeuchtigkeit: " + String(JSONDaten["data"][1]["humidity"]) + "%<br>";

Seite += "Luftdruck: " + String(JSONDaten["data"][1]["pressure"]) + " hPa<br>";

Seite += "Wolkendichte: " + String(JSONDaten["data"][1]["clouds"]) + "%<br>";

Seite += "Windrichtung: " + String(JSONDaten["data"][1]["wind_deg"]) + "°<br>";

Seite += "Windgeschwindigkeit: " + String(int(JSONDaten["data"][1]["wind_speed"])) + " m/s<br>";

Seite += "Regenwahrscheinlichkeit: " + Regenwahrscheinlichkeit1Tag + "%<br>";

Seite += "</div>";

// übernächster Tag

Seite += "<p style=\"font-size: 14pt; color: black; font-style: bold; background: #b9e2f4; padding: 2px;\">";

Seite += "Wetter übermorgen</p>";

Seite += "<div style=\"height: 210px;\">";

Seite += "<p style=\"font-size: 14pt\">";

Seite += "<img src = \"http://openweathermap.org/img/wn/" + WetterIcon2Tag + "@4x.png\" style=\"float:left;\">";

Seite += "Wetterlage: " + Wetterlage2Tag + "<br>";

Seite += "Temperatur: " + Temperatur2Tag + " °C<br>";

Seite += "Luftfeuchtigkeit: " + String(JSONDaten["data"][2]["humidity"]) + "%<br>";

Seite += "Luftdruck: " + String(JSONDaten["data"][2]["pressure"]) + " hPa<br>";

Seite += "Wolkendichte: " + String(JSONDaten["data"][2]["clouds"]) + "%<br>";

Seite += "Windrichtung: " + String(JSONDaten["data"][2]["wind_deg"]) + "°<br>";

Seite += "Windgeschwindigkeit: " + String(int(JSONDaten["data"][2]["wind_speed"])) + " m/s<br>";

Seite += "Regenwahrscheinlichkeit: " + Regenwahrscheinlichkeit2Tag + "%<br>";

Seite += "</div>";

Seite += "<hr>";

// IP-Adressen anzeigen

if (InfoAnzeigen)

{

Seite += "<p style=\"font-size: 14pt; color: black;\">";

Seite += "Verbunden mit: " + WiFi.SSID() + "<br>";

Seite += "Signalstärke: " + String(WiFi.RSSI()) + "<br>";

Seite += "IP-Adresse ESP: " + String(WiFi.localIP().toString()) + "</p>";

}

// Seite anzeigen

Server.send(200, "text/html", Seite);

}