Power Distribution card that looks like the default Energy Distribution card

Hey All,

I’ve finally gone and done it and created my first ever custom-card to show Electrical Power Distribution:

power-distribution-full

There are others out there(!), and I was inspired by the tesla-style-solar-power-card and the normal HA Energy distribution card. Others like power-flow-card also have gas and water, which I did not want and liked the ‘extra equipment’ of the tesla-style-solar-power-card. The Look and feel of the tesla-style-solar-power-card was just too jarring sitting next to the HA’s energy-distribution card.

And it got me to get my TypeScript on and get back to doing some coding. I used the fantastic Home Assistant Tutorials · GitHub to get started. Really great to get you started from zero to Typescript!

It’s not yet on HACS, and does not have a distribution bundle yet, so please follow the manual instructions in the README if you want to give it a try.

I still need to work on the flow dynamics a bit, but the look and feel match HA’s energy-distribution card, and the configuration options mimic the tesla-style-solar-power-card, but not as fully functional as that card… yet!

it does have a Configuration Editor which which was fun to do. It even uses the HA TextField, Icon Picker and Entity Picker components. That was fun working out how to get to use those!

Some things to do next:

  • Battery Icon changes with the extra info for an element if the extra info element shows a ‘%’
  • Currently all in kW… may add an option for W and a threshold for switching
  • I may need to change the custom card id… it’s currently power-distribution but expect it will clash somewhere in HACS already with other custom cards. suggestions welcome! I’ll need to fix that before submitting to HACS.
  • Make the speed of the flow be logarithmic? or at least configurable. At the moment if one flow is 0.1kW and the other is 5kW the 5kW flow flies along the path. needs some adjustment.

Let me know what you think and ping me any ideas either here or in GitHub under issues.

Cheers

G./

2 Likes

Cool. I’m definitely going to check this out. Nice work.

Thanks for sharing. Looks very interesting :clap: