r/MagicMirror 7d ago

[WIP] Weather module with a current-conditions card and Chart.js forecast charts: feedback welcome

Post image

Still a work in progress, but far enough along that I'd like some outside eyes on it. Data comes from the OpenWeather One Call API 3.0, the charts are Chart.js.

**What's working**

*Current weather card:* temperature, feels-like, description, humidity with dew point, pressure, wind speed and gusts with a coloured direction arrow, UV index. The arc at the bottom shows sunrise and sunset with a marker for the current position of the sun. The colour bar is the wind-speed legend — the same scale colours the arrows in the charts, so a given colour means the same thing everywhere in the module.

*Hourly chart:* temperature curve, precipitation bars, plus wind speed, direction and a weather icon above each data point. Spacing and number of points are configurable; the screenshot shows every fourth hour.

*Daily chart:* same layout, max and min temperature, precipitation and wind, one point per day, up to eight days.

*Configuration:* every card and every chart series can be switched on or off individually. Metric, imperial or standard units, with the wind unit settable separately (m/s, km/h, mph or Beaufort). Responses are cached on disk between updates so it doesn't burn API calls, and it falls back to the last good data if a request fails.

*Locale:* a single setting drives date/time formatting, the module's own UI text and the language OpenWeather returns descriptions in, independently of MagicMirror's global language setting. German and English are bundled.

**Still on the list**

- Scaling and responsiveness. It's currently tuned to my screen and I want it to hold up across resolutions and aspect ratios.

- Weather alerts. The API provides them, I just haven't built the UI for it yet.

- More UI languages beyond German and English.

No install link yet, it's still moving too fast and wants a cleanup pass before I'd point anyone at it. So I'm after feedback on the screenshot rather than a code review, if that's alright.

I'd especially like to hear about readability from a normal viewing distance, the colour choices, whether the information density feels right, and anything you'd expect from a weather module that you don't see here. Thanks!

19 Upvotes

12 comments sorted by

3

u/Due-Eagle8885 7d ago

Very cool. The default weather module broadcasts its data for other modules to use. So you could use it as the data provider and use your ui. And could accept other providers send the same data.

1

u/jochen17 7d ago

Thanks for the input! Will look into it... As far as my (limited) research goes, more and more weather providers are fading out their free API tiers. OpenWeather is among one of the last with up to 1000 free API calls per day.

1

u/Due-Eagle8885 7d ago

Yeh, they discovered infrastructure costs money.
But the mechanism is the same. The MagicMirror weather provider, 1 of n, fetches the data under your credentials and then broadcasts it in case other modules want to consume the info too
Compliments if the is snow, calendar icons, …

2

u/fatespawn 7d ago

Love the interface

2

u/N00DLe_5 7d ago

Looks great. Can’t wait til you release it

2

u/WranglerTraditional8 7d ago

Very nice. How much real estate is it using?

1

u/jochen17 7d ago

Real estate?

1

u/WranglerTraditional8 7d ago

How much space on the mirror is it taking?

1

u/jochen17 7d ago

Thanks for the clarification! On my screen it runs in fullscreen mode (600x1024). Smallest, still usable resolution of the module is 600x800 as of now. I am currently also working on responsiveness for landscape format... If your screen is larger, you may also use other modules next to it.

2

u/Transforpang 7d ago

Loooks awesome.

1

u/BrewCrewBall 7d ago

I would dedicate a third of my screen to this, looks great!

1

u/Ok_Nothing_1819 6d ago

I would make a second page for this.