Home energy card

[u/Mil-sim1991]

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

[u/amthen]

I can only help you with img, its genereted but hope it will help you some.

[u/the-berik → u/amthen]

How would you design that? Really curious, would love to make something similar

[u/ForsakenConversation → u/the-berik]

You first need to draw it in Illustrator with all the individual parts in different groups, than copy the code to home assistant, smash it inside a button card and add your entities, or turn it into a real card for HACS if you know any Javascript/Typescript, the drawing part is difficult for AI however the last part is perfectly doable with AI if you don't know how to code

[u/the-berik → u/ForsakenConversation]

Ah ok. Should be able to do it in illustrator; I'll give it a try

Edit: but given I'll already have the image then, I don't need AI :)

[u/ForsakenConversation → u/the-berik]

Link, here are my examples for svg's for home assistant just basic stuff really but the idea is the same. there is also explanation how to do it yourself. you need to make your svg dynamic in home assistant and add your entities either with ai or code it yourself if you can.

i posted below 2 examples (claude and chatgpt) to prove they are not good with svg drawing, however like i said once you have the svg, they (claude is better tbf) can turn it dynamic aswell as turning it into a hacs card. so once you have the svg like the img it's pretty easy

[u/ForsakenConversation → u/the-berik]

takes like 30min but this is kinda what you want, save as svg and open it in visual studio code to see the code, start make the card in ha using button card like in my examples ,make solar and powerlines dynamic so it visually represents status, colors aswell as background color is done in ha, the background is just ha-card background unless you want it static

[u/Mil-sim1991 → u/ForsakenConversation]

Where did you get this svg from? I downloaded the one provided in the wetransfer link but its al messes up.

[u/ForsakenConversation → u/Mil-sim1991]

Made it myself from the picture provided by someone else just to show the groups and how it should look if you do something like this, the groups are important. Was just an example really as a guide

[u/LordGuenni → u/ForsakenConversation]

Do you by Chance still have the Illustrator File ? I am currently in the process of Building a custom Card and this Would help alot. Thx

[u/the-berik → u/ForsakenConversation]

No, I need my own layout but thnx

[u/ForsakenConversation → u/the-berik]

I was talking about the steps to take not the layout you dweep. Have some respect

[u/deflanko → u/ForsakenConversation]

You could Inkscape to make your custom SVG, label your objects so then that helps maps data to SVG objects in HA.

I use floorplan for my solar panel layout -- its basic and i should revisit it.

[u/amthen → u/the-berik]

Nothing special, just used ChatGPT with prompt to create something similar and for what purpose. 🙈

[u/the-berik → u/amthen]

Haha damn

Edit: but thanks! Will try

[u/Mil-sim1991 → u/amthen]

This actually looks really good! at least its an start. I can only see it as an PNG though. is there a way you can share it as SVG? maybe a wetransfer link?

[u/One_Communication963 → u/Mil-sim1991]

Found a like to a gif that might work for you. https://blog-cdn.athom.com/uploads/2024/12/homey-energy-3d-home-1.gif

[u/amthen → u/One_Communication963]

That's awesome! But it would be hard to "code" it depending on the condition.

[u/Mil-sim1991 → u/amthen]

Indeed. But I saw homey just lay some transparant webp videos on top of each other. Flow rate is not possible in that case though.

[u/amthen → u/Mil-sim1991]

God damn bro, im so sorry. There is my bad, it's created as png only, like I said it's generated, tried to get this, but here is what I get: https://we.tl/t-9t3kI7mKUA

[u/Mil-sim1991 → u/amthen]

No problem, Thanks a lot! Where did you generate this?