Zima Weather: a Story

Zima Weather: a Story


I started Zima Weather in December 2020 by being inspired with the following Animated Weather Cards codepen:

See the Pen Animated Weather Cards by Steve Gardner (@ste-vg) on CodePen.

My idea was to make a smart dashboard that would be displayed constantly at home with Raspberry PI and a dedicated screen, so that I do not need to look at my phone for some frequent weather info that I forget after five seconds.

My design idea was a weather card for each day starting from today, total five cards/days in a row, and a calendar and time on top.

Initially named simply Weather Dashboard, I made my first commit to the repo on December 2020, and you can find my original source repo on https://github.com/dragoon/starport

After some time, I added sunset/sunrise colors bound to actual sunset/sunrise time using another great codepen:

See the Pen CSS Sunset Sunrise by Marty (@msaetre) on CodePen.

I removed the sea, adjusted corresponding sun positions, etc.


There was a major problem though – the original codepen implemented all weather effects like rain, snow, clouds, etc. as SVG objects and animated them. This was more or less okay with one card on a desktop computer, but extremely heavy with five cards on Raspberry PI – around 15 FPS.

I checked around and found Pixi.JS – a fast canvas/WebGL rendering library. I spent several months rewriting all SVG shapes and animations to PIXI, and upgrading TweenMax to GSAP 3. Luckily, I could at least keep GSAP object animations as it offered a PIXI plugin. I generated objects/shapes directly in PIXI at first – lines for rain, circles for snow, but this was also not the most performant method in PIXI, so I also migrated all objects into a spritesheet.

That almost doubled the performance on PI, to 30 FPS. Then I found that disabling antialiasing in PIXI can get me additional 5-10 FPS.

Raspberry PI

The largest boost in performance on raspberry came not from my optimizations though, but from uninstalling various desktop stuff. I used a full desktop version originally, and when I removed everything apart from X11 and a simple openbox window manager, it got my dashboard to 50-60 FPS, which was more than enough.


On the backend, I used python's FastApi and OpenWeatherMap API to get the weather forecasts and Heroku for deployment. I know Heroku has lost a lot of its early day charm, but I still use it for my personal projects as I feels very familiar and predictable.


At this point, dashboard started to take shape, I added time and calendar, and setup a publishing process through CloudFlare pages:

Next steps

With the dashboard looking more or less okay and not too slow, I decided to give a try publishing it in some of the stores to see if gets any traction with other people.