I had been looking for a solar layout card for quite a while. Unfortunately I have had two micro-inverters fail on me, and both times I noticed it far too late. On top of that, it is simply nice to watch the sun move across the panels during the day when your roof faces south, east and west.
This is a first version. I am curious whether others were looking for a card like this too. I would love to receive your feedback in the repository.
Solar Layout Card
A Home Assistant Lovelace card that shows a layout of your solar panels, with the live PV output inside each panel. Panels can be placed portrait or landscape individually, and you build the layout with a drag-and-drop editor.
Features
- Layout on a grid, matching how the panels lie on your roof.
- Link a sensor per panel; the value and unit are shown.
- Panels are coloured by their output relative to a Wp reference (configurable per panel).
- Configurable colours: dark when the panel is off, ramping to light blue in strong sun (Enphase style).
- Zoom button to make large arrays more compact (100% down to 40%).
- Type-to-search on the sensor picker and a button to duplicate a panel (keeps sensor, Wp and orientation).
- Adjustable text size, independent of the zoom.
- Multiple layouts via tabs; rename via the pencil icon next to the active tab. With a single layout the tabs stay hidden on the card itself.
- Inverters placeable in the layout (GoodWe, SolarEdge, Growatt, Solis, Sunsynk), with an optional sensor.
- Red warning on a panel that reads 0 W during the day (via
sun.sun). - Sleep icon (Zzz) on an inverter when the sun is down and the linked sensor reads 0.
- Connection lines between panels and to the inverter, straight or curved.
- Flowing dots along the connection lines (toggle with the “Moving dots” checkbox in the display options, or via
flow_dotsin the config). - Multilingual: the texts follow the Home Assistant language (
hass.language). Dutch, German and English are supported; other languages fall back to English. - Colour configurable per connection line (default amber).
- Micro-inverters placeable alongside the regular inverters (Enphase, APSystems, Growatt, Hoymiles), shown small and with a real image.
- Zoom per layout; hide options for inverter image/label/sensor.
- Portrait/landscape per panel.
- Visual editor with dragging and snap-to-grid.
- Clicking a panel opens the more-info dialog of its sensor.
Installation via HACS
- HACS, three dots, Custom repositories.
- Add the repo URL, category Dashboard.
- Download and reload your browser.
The resource is served via /hacsfiles/solar-layout-card/solar-layout-card.js.
Example configuration
type: custom:solar-layout-card
title: Solar panels roof
reference: 400 # default Wp for new panels
color_off: "#0b1f3a" # dark = off / no sun
color_max: "#6fc3ff" # light blue = maximum output
zoom: 100 # 40 to 100
font_scale: 100 # text size in percent (50 to 200)
panels:
- id: a1
x: 0
y: 0
orientation: portrait
entity: sensor.panel_1_power # Watt
wp: 400
label: "1"
- id: a2
x: 4
y: 0
orientation: landscape
entity: sensor.panel_2_power # Watt
wp: 370
label: "2"
Configuration options
| Option | Type | Default | Description |
|---|---|---|---|
title |
string | "" |
Title above the card. |
reference |
number | 400 |
Default Wp for newly added panels. |
color_off |
string | #0b1f3a |
Colour when off / no output. |
color_max |
string | #6fc3ff |
Colour at maximum output (at Wp). |
zoom |
number | 100 |
Starting zoom in percent (40 to 100). |
font_scale |
number | 100 |
Text size in percent (50 to 200). |
panels |
list | [] |
Panels (single layout). |
inverters |
list | [] |
Inverters and micro-inverters (single layout). |
inv_hide_image |
bool | false |
Hide the inverter image (all inverters). |
inv_hide_label |
bool | false |
Hide the inverter label. |
inv_hide_sensor |
bool | false |
Hide the inverter sensor value. |
flow_dots |
bool | true |
Toggle the moving dots along the connection lines. |
connections |
list | [] |
Lines between items; each with from, to, curved and color. |
layouts |
list | - | Multiple layouts; each with name, panels, inverters, connections, zoom. |
Per panel: id, x, y (grid coordinates), orientation (portrait/landscape), entity (Watt sensor), wp (peak power of this panel, for the colour scale), label.
Per inverter: id, x, y, brand, entity (optional), label. Set micro: true for a micro-inverter; the brand is then one of enphase, apsystems, growatt, hoymiles. Without micro it is a string inverter (goodwe, solaredge, growatt, solis, sunsynk).
If an inverter has a sensor that reads 0 while the sun is down, a small sleep icon (Zzz) appears on the inverter. This mirrors the red 0 W warning that panels get during the day.
Per connection: from, to (panel or inverter id), curved (straight or curved) and color (line colour, default #ffd54a).
Feedback and ideas are very welcome in the repository: GitHub - dennisbest85/solar-layout-card: Een Home Assistant Lovelace-card die een legplan van je zonnepanelen toont, met de live PV-opbrengst in elk paneel. Panelen zijn per stuk portrait of landscape te plaatsen en de indeling maak je met een drag & drop editor. · GitHub
This card was built with the help of Claude.
This is exactly the kind of real-world feedback that helps make the card better. I’d love to hear if the implementation works for you and whether you have any additional ideas or improvements. 
