Wetterdaten von Open-Meteo im Webbrowser anzeigen

---

---

Ziel des Projekts

In einem Web­brow­ser wer­den

• die aktu­el­len Wet­ter­da­ten von Open-Meteo ange­zeigt
• die Wet­ter­vor­her­sa­ge für drei Tage mit dar­ge­stellt

Open-Meteo

Die Platt­form Open-Meteo stellt ver­schie­de­ne Wet­ter­da­ten zur Ver­fü­gung, sie wer­den alle 15 Minu­ten aktua­li­siert:

• aktu­el­le Wet­ter­da­ten:
  Tem­pe­ra­tur, Luft­feuch­tig­keit, Luft­druck, Nie­der­schlag, Wind­stär­ke, Wind­rich­tung
• 7-Tage Wet­ter­vor­her­sa­ge tage­wei­se
  Tem­pe­ra­tur minimum/maximum, „gefühl­te“ Tem­pe­ra­tur, Regen­wahr­schein­lich­keit, Sonnenaufgang/Sonnenuntergang
• 7-Tage Wet­ter­vor­her­sa­ge stünd­lich
  Tem­pe­ra­tur, „gefühl­te“ Tem­pe­ra­tur, Luft­feuch­tig­keit, Luft­druck, Nie­der­schlag, Wind­stär­ke, Wind­rich­tung

Für die Nut­zung ist kei­ne Anmel­dung erfor­der­lich. Die pri­va­te Nut­zung erlaubt höchs­tens 10.000 Auf­ru­fe pro Tag, 5.000 pro Stun­de und 600 pro Minu­te.
Quel­le: ⤷https://open-meteo.com/en/terms

Vorbereitungen

Konfiguration der Mikrocontroller

• ESP32-Wroom
• ESP32C6
• ESP32-S3
• ESP32-C3-Zero
• ESP32-C3 Super Mini
• ESP32-C5 Zero

API-Aufruf konfigurieren

Als Ers­tes musst du die Zeit­zo­ne wäh­len und über den But­ton „Search“ dei­nen Ort suchen:

Anschlie­ßend die gewünsch­ten Wet­ter­da­ten aus­wäh­len:
Ich habe mich auf die aktu­el­len Wet­ter­da­ten und die 7-Tage-Vor­her­sa­ge beschränkt.

Unter der Über­schrift API-Respon­se fin­dest du die Adres­se, die du im Pro­gramm ver­wen­den musst:

Die für dei­nen Ort gül­ti­gen Koor­di­na­ten befin­den sich inner­halb der Adres­se:

Du kannst sie ein­fach gegen dei­ne Koor­di­na­ten aus­tau­schen.

Erläuterung zu JSON

JSON (Java­Script Object Nota­ti­on) dient dem Aus­tausch von Daten zwi­schen einem Ser­ver und einer Web­an­wen­dung. JSON-Daten sind eine Samm­lung von Schlüs­sel-Wert-Paa­ren. Die Biblio­thek fil­tert aus den Roh­da­ten die­se Schlüs­sel-Wert-Paa­re her­aus.

Das Programm

Benötigte Bibliotheken

Bibliotheken und Variable

Du musst die SSID des Rou­ters und das Pass­wort anpas­sen.
Das Pro­gramm ver­wen­det eine sta­ti­sche Adres­se.
Sie macht dich von der auto­ma­ti­schen Adress­ver­ga­be mit­tels DHCP unab­hän­gig, aller­dings musst du her­aus­fin­den, wel­cher Bereich der IP-Adres­sen vom Rou­ter reser­viert wird. Aus die­sem Bereich darfst du kei­ne IP-Adres­se wäh­len.

• sta­ti­sche IP-Adres­se
  IPAd­dress ip(192, 168, 1, 120);
• Gate­way ist der Rou­ter
  IPAd­dress gateway(192, 168, 1, 1);
• der Rou­ter wird nicht auto­ma­tisch als DNS-Ser­ver ein­ge­bun­den
  IPAd­dress primaryDNS(192, 168, 1, 1);
  nor­ma­ler­wei­se iden­tisch mit der IP des Rou­ters
• öffent­li­cher sekun­dä­rer DNS-Ser­ver (Quad9) als Back­up
  IPAd­dress secondaryDNS(9, 9, 9, 9);

Der setup-Teil

• Zeit­zo­ne bestim­men
  ntp.ruleDST("CEST", Last, Sun, Mar, 2, 120);
CEST: Cen­tral Euro­pean Sum­mer­ti­me
  Beginn euro­päi­sche Som­mer­zeit letz­ter Sonn­tag im März 2 Uhr GMT + 2 Stun­den
  CET: Cen­tral Euro­pean Time
  Beginn Nor­mal­zeit letz­ter Sonn­tag im Okto­ber 3 Uhr GMT + 1 Stun­de
  ntp.ruleSTD("CET", Last, Sun, Oct, 3, 60);
• ntp star­ten
  Zeit­ser­ver deut­scher NTP-Pool
  ntp.begin("de.pool.ntp.org");
• Web­ser­ver star­ten
  Server.begin();
• Server.on("/", SeiteBauen);
  Wird die IP-Adres­se im Brow­ser ein­ge­ge­ben oder wird die Sei­te aktua­li­siert, wird die Funk­ti­on Sei­te­Bau­en() auf­ge­ru­fen.

Der loop-Teil

Der loop-Teil war­tet auf Anfor­de­run­gen der Kli­en­ten, also eines ver­bun­de­nen Web­brow­ser.

Die Funktion SeiteBauen()

• Für die Vor­her­sa­ge wird in einem Array jeweils Platz für drei Wer­te und deren Anzei­ge geschaf­fen:
  int Regenwahrscheinlichkeit[3];
String DatumAnzeigen[3];
float TemperaturMax[3];
float TemperaturMin[3];
float SummeNiederschlag[3];
String AnzeigeTemperaturMax[3];
String AnzeigeTemperaturMin[3];
String AnzeigeSummeNiederschlag[3];
• im String Ser­ver­Ant­wort sind die Roh­da­ten ent­hal­ten, sie wer­den mit dese­ria­li­ze­J­son in ein les­ba­res For­mat umge­wan­delt
• anschlie­ßend wer­den die Daten gesam­melt (Aus­zug)
  int Hoehe = JSONDaten["elevation"];
float aktuelleTemperatur = JSONDaten["current"]["temperature_2m"];
float TemperaturMaxAktuell = JSONDaten["daily"]["temperature_2m_max"][0];
float TemperaturMinAktuell = JSONDaten["daily"]["temperature_2m_min"][0];
int Luftdruck = JSONDaten["current"]["surface_pressure"];
• mit der Varia­ble Wet­ter­code kön­nen die Pik­to­gram­me von Open­wea­ther­map zuge­ord­net wer­den
  Die nut­zung der Icons ist frei (Quel­le: https://openweathermap.org/faq)
• die Daten lie­gen im For­mat mit . als Trenn­zei­chen vor, sie wer­den auf eine Nach­kom­ma­stel­le gekürzt und der . durch , ersetzt:
  String AnzeigeAktuelleTemperatur = String(aktuelleTemperatur, 1);
AnzeigeAktuelleTemperatur.replace(".", ",");
• Extra­hi­ern und Zusam­men­set­zen des Datums
  String Datum1Tag = JSONDaten["daily"]["time"][1];
Datum1Tag = Datum1Tag.substring(8, Datum1Tag.length()) + "." + Datum1Tag.substring(5, 7) + ".";
• für die Ver­her­sa­ge wer­den die Daten der nächs­ten drei Tage benö­tigt (Aus­schnitt)
  TemperaturMin[0] = JSONDaten["daily"]["temperature_2m_min"][1];
TemperaturMin[1] = JSONDaten["daily"]["temperature_2m_min"][2];
TemperaturMin[2] = JSONDaten["daily"]["temperature_2m_min"][3];
• Sei­te­Bau­en erstellt die Web­sei­te
  Die Inhal­te wer­den nach und nach dem String Sei­te (+=) hin­zu­ge­fügt.
  Server.send sen­det den String Sei­te im For­mat text/html, wird der Code 200 bestä­tigt, wur­de die Sei­te erfolg­reich über­tra­gen.

---

Letzte Aktualisierung: Sep. 19, 2026 @ 11:05