Weather Mosaic — a full week of hourly weather, as a color grid

Share your Projects! Dashboards & Frontend
, , ,
1

Most weather cards are busy — icons, numbers, and labels all fighting for attention. Weather Mosaic goes the other way: it encodes a 7-day hourly forecast as a single color grid — one row per day, one cell per hour, with cell color mapping to temperature. A whole week of weather in one glance.

1029×449 37.3 KB

1164×435 18.1 KB

Patterns jump right out: heat waves as broad warm bands, cold fronts as sharp color breaks, rainy stretches as clusters of precipitation markers spanning several rows. Daily highs and lows are labeled directly on their peak cells. The design follows Edward Tufte's principle of maximizing the data-to-ink ratio — it began years ago as a MagicMirror module and I've refined it into a Home Assistant card.

Made for kiosk and always-on displays. This is where it earns its keep — a wall tablet, a kitchen display, the dashboard you glance at on the way out the door. Nothing to tap, expand, or scroll; the entire week is legible from across the room.

Works on black-and-white and e-ink screens, too. The White-Hot color scale (and its inverse, Black-Hot) encodes temperature in pure grayscale, using the thermal-camera convention where brighter means warmer. That keeps the card perfectly readable on monochrome and e-ink dashboards — the low-power always-on panels where normal color scales fall apart.

Also included:

  • Several color scales beyond grayscale — mosaic, turbo, viridis, inferno, blue→red
  • A visual editor — no YAML required
  • Compatibility with any integration that provides an hourly forecast (Open-Meteo, PirateWeather, NWS, and more)
  • Precipitation markers, daily high/low labels, and configurable day count and units

Install: it's in the HACS default store — just search "Weather Mosaic."

:link: Repo: GitHub - whalleyms/weather-mosaic-card: Color-coded hourly weather forecast grid for Home Assistant Lovelace · GitHub
:eyes: Live preview: Weather Mosaic Card

Feedback and integration reports welcome — happy to grow the "tested with" list.

2 Likes
2

Looks nice, but it works weirdly here. I am in a Celsius locale.

If I set the card to C it posts the current temperature (top right) correctly, but the mosaic temps as F.

If I set the card to F it displays the current temp converted to F, and the mosaic temps are the Celsius values.

3

To illustrate, with this setting:

type: custom:weather-mosaic-card
entity: weather.home
temperature_unit: C
grid_options:
  columns: 12
  rows: 7
days: "7"
color_scale: mosaic
title: Open Meteo
show_minmax: true
show_precip: true
show_current: true

The result is

image
image832×442 10.3 KB

With this

type: custom:weather-mosaic-card
entity: weather.home
temperature_unit: F
grid_options:
  columns: 12
  rows: 7
days: "7"
color_scale: mosaic
title: Open Meteo
show_minmax: true
show_precip: true
show_current: true

I get

image
image820×438 10.6 KB

4

I see it is fixed now. However I wonder why you posted that you want feedback

And then never bother to respond.

5

Aack, sorry about that. Didn’t see your reply till just now. I didn’t realize I had to explicitly set up email notifications here for when someone responds. That’s fixed now. The issue only got fixed because paulius2k posted it in GitHub. I’ll try to do better.