Lovelace: Power Distribution Card

No_one · December 25, 2020, 11:25pm

Hey there ,

I would love to share my Custom Card for visualizing power distributions with the community!

If you got some solar pannels hooked up or a battery this will really help you to see everything in one go.
This is not limited to the displayed appliances and you can basically add anything you want.

You can find in in HACS as power-distribution-card or on Github.

Some Key features: (v2.3)

A Visual Editor for a more easy and intuitive setup
Value dependant Icon-color changes
Predefined Presets for sensors such as battery, solar, car-charger …
Tab and DoubleTab actions for all tiles
2 Animation modes: slide and flash
Adaptive scaling between W and kW (or any unit you want)
Option for auto calculated Autarky / Ratio Bars (as seen in image)
Center Tile containing a Lovelace Card, Bars or just nothing

Feel free to give it a shot and leave a message with ideas or questions in the comments and Take Care

Jonah aka No_one

Denny_d · January 8, 2021, 2:34am

Fantastic!

timolol · July 25, 2021, 5:58am

Hi @No_one !

Just like to shout out that your power distribution card looks great and neatly done! I think like most users, I have used the other popular HACS power wheel card. After doing a fresh install and designing the front end from scratch, I came across your card. I personally like your interface better, and love the fact I have learnt a new word “autarky” as well!

So thank you for your time in developing and sharing this to the community. I hope more people can discover your card.

timolol · July 25, 2021, 6:02am

The only issue I am facing with this card is that it does not display properly on my iPhone Xs. Looks great on the desktop! Any tips would be appreciated! Thanks again!

No_one · July 25, 2021, 8:19am

Hi there @timolol

I’m glad you like the card
Regarding your displaying issue on the I-Phone: sadly this had to be done because with width of lower than 400px the items don’t fit into a row next to each other anymore. Maybe they would if you only use one bar, as you do but since the normal case is 2 bars or a custom-card, it rarely fits.
I will take a look at it though.

Take care and stay safe!

timolol · July 25, 2021, 8:25am

Many thanks for your prompt reply!

As you can see in my photo, there is only one bar…

Not a big deal, I can probably look at your css more closely and can style it with card-mod. But I would rather have it good looking natively in case you update the card futher in the future.

Also, any idea why the flash animation does not work on the iPhone? Assuming from your statement, you must have an Android phone.

If you have a quick fix / update, let us know! Thank again, @No_one !

No_one · July 25, 2021, 9:32am

Yeah. I’ll probably just add a code config only setting for enabling the mobile view.

That the flashing on iOS doesn’t work never occured to me.
Maybe you could open an issue? Issues · JonahKr/power-distribution-card · GitHub
The Animations are only based on the css animation to ensure compatability for older browsers: "animation-delay" | Can I use... Support tables for HTML5, CSS3, etc

WolfsW3lp3 · September 18, 2021, 7:12pm

Heyho ^^
Im just curious on how you calculate the autarky and own consumption ratio

Biscuit · May 12, 2022, 9:59am

A very big thank you for developing and sharing this custom card from a satisfied user!

I now have a considerable amount of information from my inverter and solar battery system, and have found this card to be perfect for showing everything in one place and in an easy to read format. My personal preference is for figures and icons rather than graphs as the primary data display, so I prefer this over the standard HA energy card.

This is my ‘smart tab’ phone being used as a desk monitor, with the power distribution card and a few other entities. I have set up the power card with the ‘producers’ on the left, and the ‘consumers’ on the right. Icons change colour, making the ‘working’ or ‘unusual’ stand out.

I really like the ability to add a second sensor in place of the label, which gives me twice as much info per icon. From the top left - grid import power/total energy today, solar power/total today, battery discharge power/SOC state (and the icon changes too - nice), inverter temperature, data-feed update (each letter shows a data feed has been running within the last five minutes: inverter stick not working, battery RS232, battery RS485, CAN bus, Modbus). From the top right - load power/total energy today, battery charge power/total today, grid export power/total today, imbalance (effectively power used by the inverter) / inverter control status [self use mode = storing excess solar to battery], hot tub power / total energy today. Not forgetting the solar/use bars in the middle. I opted in the end to change the labels for the bars - really nice that so much is customisable.

Had a bit of a hiccup with the UI configuration not working properly recently, but I assume that to be fall-out from one of the HA recent updates (now seems OK) but otherwise what is not to like about this? I have absolutely no idea how it works, but it does. Thank you!

No_one · May 12, 2022, 12:34pm

Hey there
I am really sorry for the late reply. It must have gotten lost in my E-Mails.
You can find the code for the calculation here:

github.com

JonahKr/power-distribution-card/blob/bc98dcd2102e55c2f7486b335cf055e9b5f6b671/src/power-distribution-card.ts#L494-L501

    
      
          case 'autarky': //Autarky in Percent = Home Production(Solar, Battery)*100 / Home Consumption
            if (!element.entity)
              value = consumption != 0 ? Math.min(Math.round((production * 100) / Math.abs(consumption)), 100) : 0;
            break;
          case 'ratio': //Ratio in Percent = Home Consumption / Home Production(Solar, Battery)*100
            if (!element.entity)
              value = production != 0 ? Math.min(Math.round((Math.abs(consumption) * 100) / production), 100) : 0;
            break;

It very basic:

Autarky: HomeProduction / TotalHomeConsumption
Own consumption ratio: HomeConsumption/ HomeProduction
Both are capped at 100%.

Take care!
Jonah

No_one · May 12, 2022, 12:41pm

Hey there @Biscuit
Thanks for the kind words, it really means a lot to me.
I really like your power panel structure!

The UI configuration is actually a bigger part of the card than the card itself because there isn’t really a “nice” API to use home-assistant components. There are some “hacky” workarounds which resulted in some issues with 2022.4 if I remember correctly. There are some good news however: the frontend devs are planning on enabling access to parts of the visual configuration elements sometime soon, which will make this more reliable and hopefully encourage more custom card developers to include UI editors with their cards.

Take care and stay safe!
Jonah

neotigger · June 15, 2023, 10:07am

Ich würde gern die Umrandungen der Entitäten ausblenden, hat jemand einen passenden Card-Mod Eintrag. An sich ist die Card super. Danke

I would like to hide the entity borders, does anyone have a suitable card mod entry.
The card itself is great. Thanks

neotigger · June 16, 2023, 9:31am

Hab es selbst gefunden

card_mod:
  style: |
    badge {
    border-color: rgba(0,0,0,0)!important;
    }