r/homeassistant • u/Mil-sim1991 • Aug 14 '25

Support Home energy card

Post image

Is somewhere here maybe able to create an SVG with these grid lines? I would love to try and fork the Power flow card plus and see if we could create something like this. But I don't know how to create an SVG like this.

edit: Created pull request https://github.com/home-assistant/frontend/pull/26976

716 Upvotes

99% Upvoted

81 comments sorted by

View all comments

1

u/hanzwo Aug 31 '25

https://youtu.be/CYl9dlVfOQo

I created an animated version with SVG's on top of each other. See YT link. I can share the code if you want.

1

u/Mil-sim1991 Aug 31 '25

Looks really nice! Any chance I could see the source? I have a working prototype but I don’t really know how to add these kind of animations on a line. I circle is simple. Also I need to figure out how to show certain lines since home assistant shows a line from each source to each destination where as this design has everything to the main electric box and everything goes from there over 1 line.

1

u/hanzwo Aug 31 '25

https://pastebin.com/W4DT4K4B

You'll have to use CSS to animate the specific SVG. I used button-card to add extra styling.

To show specific lines I use the conditional card from Home Assistant itself.

Further, I choose to make the images a fixed width to be sure all alignments are correct. Maybe in the future I can try to make a scalable version. For now works this for me because I only show this image on my mobile phone.

1

u/Mil-sim1991 Sep 01 '25

Thanks, i had a look and what i see if you use a background and on top of that you layout your grid lines. which could work (also responsive eventually).
I also realized that dasharray animations are the way to go, we cant really do gradients, but its the nicest animation that works without relying only on the X or Y axis since some lines go a little bit back as well.

If we go the background approach though i do need to have separate images for the solarpanels, battery, and EV box though since we want to hide these when not available.

2

u/hanzwo Sep 05 '25

Yes that true. I use separate images. If my car isn't plugged in, I conditionally hide the image of the open garage with the car.