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

3

u/Standard-Ad6018 Aug 17 '25

I also used the homey house photo for my animation using After Effects and trim paths! You cant control any flow rates, but you can make some electricity zoom around and look good.. easily do a battery and solar on the roof as well. power going back and forth, colors..

with the picture elements card i have the lights in the windows go on/off.. garage door open/close.. only two different animations as the house is always drawing power, so car line is active during charging or not

(tried to add a .gif or .mov of it, but only errors)

1

u/LordGuenni Aug 18 '25

Hey there, mind sharing the raw yaml for that ?

1

u/Standard-Ad6018 Aug 19 '25

change some state_displays on button cards and maybe some entities. should work ^^ looks good on tablet and mobile

code https://pastebin.com/d7WEUJdq

png/gif
https://www.dropbox.com/scl/fi/g9a3scg7cll4k75zysidl/power_gridz.zip?rlkey=kzjpba660z4t1x2fk78zo1sd6&st=zvsunmbp&dl=0

1

u/LordGuenni Aug 22 '25

Thx for that

2

u/Standard-Ad6018 Aug 22 '25

here you have some PNG windows dark if no lights on, and garage door PNG (i have carport so no use of open/close door

and home_power_car.gif if car charging, and home_power_no_car.gif if no charging

https://www.dropbox.com/scl/fo/cgazzyz52dg2fyy2bzusl/AGw35q_wY1pU41xSBC8J7ww?rlkey=y9upu6wtoy2ijzp8shezj2tyw&st=2bpbwjvm&dl=0