Diese Seite ist statisches HTML und am besten betrachtet mit Java-Script eingeschaltet!

Weather Widget - Wie programmieren

 ·  ☕ 2 Min. Lesen  ·  🤖 SWU

Womit programmiert man ein WeatherWidget?

Am Ende sollte herauskommen, dass automatisch HTML Code generiert wird, Text und Grafiken angezeigt werden und die Ausgabe soll schön formatiert sein. Das schien nicht schwierig zu sein. Nur das Erzeugen einer grafischen Temperaturkurve war mir schleierhaft und ich fragte mich, welche Scriptsprache ich dafür wohl nehmen muss.
HTML Code generieren traute ich mir mit Shell Skripten durchaus zu, damit hatte ich bereits Erfahrung. Nur die Temperaturkurve machte mir Sorgen, weswegen ich überlegte, andere Skriptsprachen zu verwenden, aber da die Openweather Widget Vorlage javascript benutzt, schied diese Skriptsprache schon mal aus. Ich wollte das weder abschreiben noch zufällig in derselben Weise programmieren. PHP schien mir dafür der geeignete Kandidat zu sein, aber auch dagegen entschied ich mich, weil ich mich da nicht zuhause fühlte und die Aufgabe dadurch doppelt schwer geworden wäre …das Widget programmieren und nachschauen, wie ich das in PHP umsetze. Also wollte ich mal sehen, wie weit ich komme und es blieb bei Shell Skripten.

Datenquellen

Wetter Aktuell Deutschland
https://www.dwd.de/DWD/wetter/aktuell/deutschland/bilder/wx_brd_akt.jpg
Aktualisierung jede volle Stunde, das ist ein 540x400 pixel Bild, 190K groß

Deutschland Niederschlagsradar
https://www.dwd.de/DWD/wetter/sat/satwetter/njob_satrad.png
Aktualisierung alle 15 Min zum Quarter, das ist ein 900x900 pixel Bild, 560K groß

Niedersachsen Niederschlagsradar
https://www.dwd.de/DWD/wetter/radar/rad_nib_akt.jpg
Aktualisierung alle 15 Min zum Quarter, 540x500 pixel Bild, 194K groß

OpenweatherMap
Abholen der JSON Datei von OpenWeatherMap mit meinem API-Schlüssel
per Request, max 2000 pro Tag
Die Datei wolfenbuettel.json ist 4,2KB groß

Planungen Software und Orte im Dateisystem

Ich verwende als Startseite für mich bereits einen RSS Aggregator, der eine Webseite erzeugt, die ich bisher als Datei im Webbrowser geöffnet hatte. Die Webseite vom WeatherWidget sollte zusätzlich in einer eigenen .html Datei erzeugt werden. Um sie mit im RSS Aggregator anzuzeigen verwende ich nach Informationen vom Selfhtml/Elemente/iframe ein iframe tag. Dafür brauchte ich jetzt aber einen Webserver, der mir diese Seite ausliefert, die eine andere lädt und mit anzeigt. Dafür habe ich NGINX über den Debian Packetmanager installiert.
Dadurch habe ich jetzt /var/www/html/ mit den Berechtigungen drwxr-xr-x root root - dort Dateien zu platzieren erfordert Root-Rechte. Die Skripte werden also auch Root-Skripte sein.

Ich habe folgende neue Ordner angelegt:

für Bild-Dateien

1
/var/www/html/IMG 

für Daten-Dateien

1
/var/www/html/DATA

Ordner für die Skriptdateien

1
/root/bin/WeatherWidget 

Mit Pencil habe ich mir ein “Prototyping tool” ausgesucht, das auch im Packetmanager von Debian vorhanden ist - ein elektronisches Skizzenheft quasi. Damit habe ich mir ein mockup/eine Skizze für das ungefähre Aussehen erstellt:

WeatherWidget-Mockup


wüsti
Author
SWU
human