The concentric horseshoe gauge from Part 2 looked impressive but it was too much. Five rings crammed together with labels fighting for space. Not ideal for a family dashboard where you want a quick glance, not a puzzle.
I use Solar Assistant to monitor my Growatt SPH and its dashboard has a simple 2×2 grid of gauges: Load, Solar, Grid, Battery. Each one is its own horseshoe with a single value in the centre. Clean and immediately readable.
So I rebuilt the card to match that layout.
The New Design
Four horseshoe gauges in a 2×2 grid, all on one card using custom:html-template-card:
┌────────────┬────────────┐
│ 410 W │ 560 W │
│ Load │ Solar │
├────────────┼────────────┤
│ 0 W │ 140 W │
│ Grid │ Battery │
└────────────┴────────────┘
Each gauge is independent with its own arc, value and label. The dynamic behaviour from Part 2 is still there:
- Solar: orange, always fills left to right
- Load: blue, always fills left to right
- Grid: red filling left→right when importing, teal filling right→left when exporting. Shows “importing” or “exporting” underneath
- Battery: green filling left→right when charging, orange filling right→left when discharging. Shows battery percentage in pink underneath
The direction flip is what makes it work. You don’t need to read the numbers to know what’s happening. The arc direction and colour tell you instantly.
Why Not Native Gauge Cards?
The built-in HA gauge card only supports one entity per card. You could put four gauge cards in a grid card, but you lose the dynamic colour and direction changes for grid and battery. The HTML template approach gives full control over all of it in a single card.
The Card
Same approach as before: Jinja2 macros generating SVG paths, but now with a reusable gauge macro that takes position, radius, colour, value and label. Much cleaner code than the concentric version.
Full YAML: cards/energy-quad-gauge.yaml
Adapting It
Same as Part 2: change the five entity IDs and max values at the top of the file. The sign conventions are: battery power positive = charging, grid power positive = importing.
Next
Both gauge versions are in the GitHub repo if you want to try either. The concentric version is still there as cards/energy-horseshoe.yaml if you prefer that look.
Part 1: iCloud Calendars → · Part 2: Concentric Energy Gauge →