4 ms·
Show HN: Animated Weather Dashboard
I’ve been working on this weather dashboard for a couple years now, and wanted to discuss it with you guys.
Here it is:
https://zima.prokofyev.ch/?token=7f7e9e7ca3msh1f401291ce0855ep181698jsn9d6179e705d3 https://zima.prokofyev.ch/?token=7f7e9e7ca3msh1f401291ce0855... [1]
A couple videos are available here:
https://www.loom.com/share/881b4a93441141429d9260c46f098b13 https://www.loom.com/share/881b4a93441141429d9260c46f098b13
https://www.loom.com/share/845b6efd7ac645768b103d05c4993072 https://www.loom.com/share/845b6efd7ac645768b103d05c4993072
https://www.loom.com/share/6ede6a39452a4aefabad3a059d0e33ca https://www.loom.com/share/6ede6a39452a4aefabad3a059d0e33ca
There is also a playground where you can test different weather conditions and time of the day (not every weather condition/combination might work):
https://zima.prokofyev.ch/test?token=7f7e9e7ca3msh1f401291ce0855ep181698jsn9d6179e705d3 https://zima.prokofyev.ch/test?token=7f7e9e7ca3msh1f401291ce...
The idea of a dashboard comes from this wonderful Animated Weather Cards on codepen: https://codepen.io/ste-vg/pen/GqaZbo https://codepen.io/ste-vg/pen/GqaZbo.
I have quickly built the first version of the dashboard by patching up OpenWeather api and making a separate card for the next 5 days: https://starport.prokofyev.ch/dashboard/?token=7f7e9e7ca3msh1f401291ce0855ep181698jsn9d6179e705d3 https://starport.prokofyev.ch/dashboard/?token=7f7e9e7ca3msh...
Then I added rising/setting sun background animation based on the CSS Sunset Sunrise codepen, which is synchronized to the actual sunrise at a given location. The sun on each card also rises and sets accordingly (and the moon comes shortly after). I have also replaced 3 layers of clouds with sort of cloud-shape-like objects. This allows for easier tinting based on time of the day and better depiction of the cloud conditions (few clouds, broken clouds, etc.).
Unfortunately, svg animations from the original codepen were quite heavy on the resources, and as I wanted to run this thing on raspberry PI, it was too slow at around 15 FPS. So I reimplemented rain, snow and clouds using webgl canvas with PIXI.JS and also upgraded TweenMax to GSAP 3. That boosted the FPS rate to around 30.
Anyway, I am looking for any feedback on this. Does it look good to you? Would you use something like this at home? What other features could be useful on such a board? Do you think it has a market?
[1] This is a temporary token that has a request count limitation, if the page doesn't show anything anymore, you need to create your own token from rapidapi by subscribing to this API (there is a free plan):
https://rapidapi.com/faraway-technologies-faraway-technologies-default/api/dashboard25/pricing https://rapidapi.com/faraway-technologies-faraway-technologi...
P.S. I am not a professional front-end dev, I have never worked on any public-facing projects, only hobby and internal tools, so things might be a bit rough on the edges.
- drag00n 4y agoYou can also specify lat/lon query parameters to open weather for a particular place