How to program a weather widget?
In the end, HTML code should be generated automatically, text and graphics will be displayed, and the output should be nicely formatted. This didn’t seem too difficult. Only generating a graphical temperature curve was unclear to me, and I wondered what programming language I would need for that.
HTML code generation seemed doable with shell scripts, because I had experience in this area. However, creating a graphical temperature curve worried me, which is why I considered using other scripting languages, but since the OpenWeather Widget template uses JavaScript, it ruled out those options. I didn’t want to write or accidentally copy-cat it. PHP seemed like an appropriate candidate, but I decided against it for two reasons: firstly because I wasn’t feeling at home with that language and secondly because of the additional work involved in setting up the widget programming and looking into how to implement it in PHP. So I wanted to see how far I could get and ended up sticking with shell scripts.
Sources of data
Current Weather Germany
https://www.dwd.de/DWD/wetter/aktuell/deutschland/bilder/wx_brd_akt.jpg
Actualization every hour, this is a 540x400 pixel image, 190KB large
Germany Rain Radar
https://www.dwd.de/DWD/wetter/sat/satwetter/njob_satrad.png
Update every 15 minutes to the quarter, this is a 900x900 pixel image, 560KB large
Lower Saxony Rain Radar
https://www.dwd.de/DWD/wetter/radar/rad_nib_akt.jpg
Update every 15 minutes to the quarter, 540x500 pixel image, 194KB large
OpenWeatherMap Retrieving the JSON file from OpenWeatherMap with my API key per request, max 2000 per day
The wolfbuettel.json file is 4.2KB large
Planning for Software and Locations in the File System
I’m already using an RSS aggregator as my local startpage, which generates a website that I previously opened as file in the web browser. The weather widget should also be generated in its own .html file. To display it with the RSS aggregator html file, I am using an iframe tag based on information from Selfhtml/Elemente/iframe. However, now I need a web server that delivers this page that loads another one and displays it. For this, I have installed NGINX via the Debian package manager.
As a result, I now have /var/www/html/ with drwxr-xr-x root root - permissions, where I can place files and directories that require root privileges. The scripts are also root scripts then.
I have created the following new folders:
for image files
|
|
for data files
|
|
folder for scripts
|
|
With Pencil, I have chosen a “Prototyping tool” which is also available in the Packetmanager of Debian - an electronic sketchbook, basically. With it, I created a mockup/sketch for the rough appearance:
