Weather Kiosk web app i've been tinkering on

Developers
1

Thought I’d share a project I’ve been working on for awhile that I’ve finally polished up enough that it’s shareable.

Didn’t see how to post an image here, but you can go to the current link (note I’m still making some changes so it may change a bit): Weather Kiosk Link

Link to code/instructions on github - please poke around and give any feedback:
Full Project –> Github

Quick Start –> Github Quickstart

I’ve been wanting to create a web-app that I could have always on a monitor or tablet that showed:

  • Current details from my Tempest weather station with details I wanted (including daily high/low)
  • Data from multiple Ecobee thermostats (1 in my house, 1 in a remote location) so I could see current temperature/set points/system status/etc.
  • A live radar image of my region

Here are the key details on my build:

  • I built/host this on an old M1 Mac Mini - but given it’s dockerized, should be deployable almost anywhere
  • Built with React/TypeScript frontend and Express backend in a fully containerized Docker deployment, with PostgreSQL for historical data storage and trend analysis
  • Real-time weather dashboard displaying WeatherFlow Tempest data with 3-minute refresh intervals
  • Configurable radar image that uses your desired lat/long as well as configurable zoom level
  • Indoor climate monitoring of Ecobee via Beestat API integration - shows current/target temps, humidity, and HVAC status for multiple thermostats. (Ecobee has shuttered their developer mode, so there didn’t seem to be any way to get into their APIs directly, but Beestat is a third party that allows you to get your thermostats data)
  • Secure remote access through Cloudflare Tunnel (Zero Trust) - no port forwarding or VPN required
  • Responsive kiosk UI optimized for always-on displays with adaptive layouts for portrait/landscape orientations

Caveats/Issues:

  • Ideally I’d have the radar image always looping as a gif, but have not been able to do that using the source I choose (windy.com) - There are some out there, but I didn’t like any of the others as far as the view I wanted
  • The Ecobee thermostat integration is a bit convoluted given I’m going through 2 APIs to get it and I’ve seen some caching happening where data is taking some time to work it’s way through

Any feedback or suggestions are welcome, and feel free to fork and build your own.

2 Likes
2

This is pretty cool. Thanks for sharing

3

i think the normal way for tempest to indicate wind direction is that northern winds are blowing to the south and the arrow points south. You have reversed that. It’s not a real problem as many do. I prefer the tempest way.

1 Like
4

I never noticed that . . I always assumed that the arrow pointed to the direction the wind is coming from (similar to how a weathervane works). I’ll probably keep it that way, but maybe a future enhancement to allow it to be configurable.

1 Like
5

Wow! You’ve done a lot of work there.

I’m pretty sure I have a screen and unused RPi around to try this out on.

6

Please do . . .This was my project to learn some new tech, but 100% open to any feedback or suggestions.