☀️ Solar Weather Card

[doanlong1412]

Your solar system deserves better than a spreadsheet.

I built a Home Assistant card that doesn’t just report what your solar setup is doing — it shows you. In real time. In a way that actually makes sense at a glance.

What’s running right now: → The sun moves across a live arc on screen — its exact position based on your real sunrise/sunset. It pulses brighter and faster as solar output climbs. At peak noon you can literally see it working.

→ Energy flows as animated particle streams along every active path — solar pouring into the inverter, charge flowing down to the battery, power branching out to each room in your house. The streams speed up when power is high, slow when it’s low. You always know at a glance what’s happening and where.

→ Each room in your home gets its own live tile below the diagram. Living room, kitchen, AC, washing machine — each shows its exact wattage right now, with a power bar and an animated flow line tracing back to the Home node. You can drag any room tile to wherever makes sense on your screen. The flow lines follow automatically.

→ The battery tells you everything without words. Charging? A lightning bolt blinks. Discharging? Three arrows stream downward. Getting low? A red warning pulses. Calm and idle? A quiet green checkmark.

And here’s where it gets interesting:

The card reads your local weather and cross-references it with a solar forecast. On a partly cloudy day, it knows output will dip — and shows you by how much versus forecast. The chart beside the diagram draws actual hourly production against the Solcast prediction, with a red “now” line running through. You can see in seconds whether today is tracking above or below expectations.

Everything in one card. No plugins required. Fully configurable through a visual editor — no YAML needed.

v1.8 — now with up to 6 room tiles, per-room position control, and a completely rebuilt flow engine that never flickers.

→ GitHub: GitHub - doanlong1412/solar-weather-card · GitHub

Drop a ![| if you’d install this. Happy to answer questions below ![|

[Toendra (Sake)]

First of all, thank you very much for this beautiful card @doanlong1412

I don’t know much about .js, but wouldn’t it be nicer if you used the sun.sun function for times?(I see that in the code, but not in the output?)

Solved

This was the bug: time zone.
The original code used getHours(), which always returns UTC, but im located in the Netherlands (CEST = UTC+2). As a result, sunset at 20:45 locally was displayed as 18:45 — exactly 18h.

The fix is: toLocaleTimeString(), exactly the same as the rest of the map already did, so that the browser automatically uses the correct local time zone.

          // Use the hours/minutes from HA's UTC times.
          // next_rising and next_setting are always future times in UTC.
          // getHours() returns local time, which is correct for the graph
          if (!isNaN(sr.getTime()) && !isNaN(ss.getTime())) {
            // Use toLocaleTimeString for LOCAL time (same as the rest of the card)
            // getHours() gives UTC — in the Netherlands (UTC+2) that would be 2 hours too early
            const toH = d => {
              const s = d.toLocaleTimeString([], {hour:'2-digit', minute:'2-digit', hour12:false});
              const p = s.split(':').map(Number);
              return p[0] + p[1] / 60;
            };
            const srH = toH(sr);
            const ssH = toH(ss);
            // Use only if ascent precedes descent (next_setting is today/tomorrow)
            if (srH < ssH) {
              sunriseHour = srH;
              sunsetHour  = ssH;
            }
          }
        }
      } catch(e){}

There is no data yet, this is because it is currently 02:57 where I am in the Netherlands
I’ll keep you posted if this is good or not

One point of attention: I don’t need the time for this overview, and temperatures, humidity, and so on.
what I do like is that there is an indication of the weather for the current day (larger and interactive) and for the next 6 days (smaller) on the same line.

I understand that it looks complete(time,temperatures, humidit… but I don’t need that information on this map overview.
Hopefully you don’t take this the wrong way; it is well-intentioned and meant to help your map improve further.
An on/off button would be nice for time management/ shift for weather at that place where time stands now?

Thanks a lot in advance for the great work!

Cheers Sake

[Toendra (Sake)]

@doanlong1412
I recommended your beautiful card on Andy’s channel. You should try out Andy’s YouTube channel (Off-Grid Garage).

Take a look there, it’s a really nice channel with lots of knowledge and people who can appreciate your beautiful work!

https://www.youtube.com/results?search_query=off+grid+garage

Cheers, Sake AKE Toendra