Using weather-icons with Open-Meteo weather condition codes

Motivation⌗

In our student council room we’ve had a digital signage information screen for basically forever.

The information screen in the student council room. — The information in the student council room.

The scren displays information on the current mensa menu, fill level of the soda machine, weather (current, prediction and rain radar), upcomming events, public transit (bus, tram, train and bike share) and gym occupancy. While doing some other work on it, I switched the source for weather data from OpenWeather to Open-Meteo . Open-Meteo provides more data which is distributed among fewer different APIs and at a pricing model that fits us.

We use the fantastic weather-icons as weather icons (duh). One disadvante of using Open-Meteo is that their codes for the weather condition are harder to use with weather-icons. There are mappings for some providers, including OpenWeather , but not for Open-Meteo.

The API returns the weather condition code 800 for clear sky. Just add  to get the coresponding icon. wi marks it as an weather icon and wi-owm-800 selects the icon for the condition code.

So I wrote a mapping for the Open-Meteo WMO codes for weather icons that fills this gap. With the mapping (a simple css file) the Open-Meteo codes can be used much more easily.

We get weather condition code 0 for clear sky. Just add a  to get the right icon.

A weather forecast with icons for the weather conditions. — The mapping in use. The icons switch to night icons after sunset.

The complete weather tile with information on the current weather and a 6 hour forecast. — The whole weather tile.

See the Usage instructions below.

Some facts about the underlying project⌗

The first commit is dated 13.08.2014, which is more than 11 years ago.
The software is just a Django server that serves some HTML and JS. The individual tiles reload periodically via Javascript.
In the last years the software project became somewhat infamous internally for having a bad code quality. With 24 different authors (of which 23 are natural persons, 2 shared accounts and 1 Renovate) of wildy different experience levels this is not that surprising.
For our yearly summer party and graduation ceremony at the faculty I extended the software for a public information screen in the faculty’s main building. The monitor it is now displayed on has been unused for some years before that. The public information screen required some changes including
- general code cleanups and improvements
- some change in the displayed information (a vending in another building is not that relevant)
- style it in the University’s coorporate design

A public information screen next to an elevator. — The information on the public screen.

Usage⌗

The source code can be found in qup42/weather-icons-om-wmo-mapping .

Include the (s)css in your project.

<link href="css/weather-icons-om-wmo-mapping.min.css" rel="stylesheet"/>

Use the Open-Meteo WMO codes like the other API mappings :
```

```
wi is the general class for using weather-icons and wi-wmo-0 selects the icon for code 0 (clear sky).

Day and Night variants⌗

The Open-Meteo WMO codes themself don’t encode whether it is day or night. You can add the modifier classes wi-day for daytime and wi-night for nighttime icons. The default is daytime icons.

Modifier	`wi-wmo-0` - Clear sky	`wi-wmo-1` - Mainly clear	`wi-wmo-3` - Overcast
default (day)
`wi-day`
`wi-night`