This page looks best with JavaScript enabled

Weather Widget - how to program

 ·  ☕ 3 min read  ·  🤖 SWU

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
Actualization every hour, this is a 540x400 pixel image, 190KB large

Germany Rain Radar
Update every 15 minutes to the quarter, this is a 900x900 pixel image, 560KB large

Lower Saxony Rain Radar
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: