jonahkr/power-distribution-card

A Lovelace Card for visualizing power distributions.

power-distribution-card's Issues

How does it work?

I have implemented it like this in Manual Card:

type: 'custom:power-distribution-card'
title: Overview
battery: none
home: sensor.energy_consumption
solar: sensor.fronius_pac
grid: sensor.kamstrup_activepowerplus
autarky: sensor.autarky ???
ratio: sensor.ratio ???

I do not have a battery, but the other sensors are correct and showing data in my other cards.

Do this card need specific sensors, or what am I doing wrong

Is there a possibility to influence the calculation ?

I have multiple inputs ans want to calculate the effective output to grid.
How can I get access to the calculation ?
Thanks
Wolfgang

Improve arrow animation

Hi,

your card is perfect from functionality point of view, but the arrow animation (jumping arrows) is not really nice (my opinion).
I could successfully modify your card to suggest an improvement, you can see it in the video (in attached zip).

I can't offer you a pull request, because I have no idea how to build your project. So I modified just the resulting .js-file. But I attached the js-file I modified, so you can see in a diff the few changes I made. Probably you like it and can inlude it in your card.

power-distribution-card.zip

Regards, Waldemar

Adding "More Info" to the entity items

Add the option to click on the diffrent items and react by opening a history window as in the standard Homeassistant entity card.

kWh modifier introduced in 1.6.1 not working correctly

Thanks for providing this very nice looking power distribution card. I am currently integrating data from the EON Energiemonitor in order to visualize the regional energy generation/demand using your card. However I found a small bug:

power-distribution-card/src/power-distribution-card.ts

Line 109 in 98781a7

if ((item as EntitySettings).unit_of_measurement == ('kW' || 'kWh')) modifier *= 1000;

('kW' || 'kWh') is always 'kW'.
I would suggest to check for unit_of_measurement.startsWith('k') in order to be generic for all kinds of units. This might be extended with 'M' and 'G' later on.

Enrich battery levels

Hi,

found your custom card for lovelace and it's working for a while now. Awesome!! I really like it.

Now I have an idea: wouldn't it be possible to enrich those three marked section with the related battery levels? I already have those sensors available within my home assitant instance and it's just a question of "how" to get them into your custom card.

Thanks in advance
Frank

Hide ratio and autarky

First I have to say i LOVE your card 👍 .
It is not really an issue, more like an idea.
I want to use it for showing individual devices, like: house heating, fridge, computer and so on.
But i don't have any devices that produce energie (solar or wind) so i'm not so much interested in the ratio and autarky bars. Is it possible to make it optional to hide?

Fixing Mobile View

In the mobile view, The hardcoded sized of the grid lead to a Corrupted rendering of the card.
This can be fixed by using variable sizing of elements.

Card Cramming leads to distortion

Hi @JonahKr . First off, thank you for making an awesome card. I love it!

I recently installed v1.6 and tried out the adaptive W/kW detection.
It seems that it is not working right with my Smart Meter:

This should be showing either 249W or 0.249kW.
Any chance you can have a look?

In addition, the arrows no longer line up with the item they are displaying. They seem too low now.

Last point: The new slide option for the arrows is super slick. I love it! However, when I enable it and look at the Android app, they are still flashing, not sliding.

Uncaught Synthax Error: Unexpected token 'export'

Error loading version 1.7

iOS App crashes with this card enabled

Hi,
first of all, thanks for this very nice card!
If I open it on my desktop, everything works fine. But if I open it with the iOS App, it only shows the menu bar without entries and after some time it loads the main view again. If I open the url in Safari on the phone, it is the same behaviour and the browser crashes after some time. Any advice?

My configuration is:

type: 'custom:power-distribution-card'
title: E3DC S10 pro
entities:
  - decimals: '2'
    display_abs: true
    name: solar
    unit_of_display: W
    icon: 'mdi:white-balance-sunny'
    producer: true
    entity: sensor.e3dc_solar_power
    preset: solar
    icon_color:
      bigger: ''
      equal: ''
      smaller: ''
  - decimals: 2
    display_abs: true
    name: grid
    unit_of_display: W
    icon: 'mdi:transmission-tower'
    entity: sensor.e3dc_grid_power
    preset: grid
  - decimals: '2'
    display_abs: true
    name: battery
    unit_of_display: W
    consumer: true
    icon: 'mdi:battery-outline'
    producer: true
    entity: sensor.e3dc_battery_power
    preset: battery
    icon_color:
      bigger: red
      equal: ''
      smaller: green
    invert_value: true
  - decimals: '2'
    display_abs: true
    name: home
    unit_of_display: W
    consumer: true
    icon: 'mdi:home'
    entity: sensor.e3dc_power_consumption
    preset: home
    icon_color:
      bigger: ''
      equal: ''
      smaller: ''
    invert_value: true
center:
  type: card
  content:
    type: glance
    entities:
      - entity: sun.sun
        name: Sonne
    state_color: true
animation: none

Posibility of 3 bars between data

Nice feature with the extra bars.

Actually I would love to be able to have 3 bars between the indicators and icons, in stead of two.

This will demand the bar width and distance between the two bares to be less.

In that case I could have these bars,

To Grid
Own production
total taken from grid

Regards,
@pesor

Invert arrow not working

Invert arrow is not working. No matter how i set it up ( true or false ) it always show current going out of my battery.

Add more than 4 sensors to display

How about adding a few more sonsor values to the display? Like a 5th or 6th small icon with consumption or production values?

Produced and Consumed

Hi,

First, Great Job, nice Card.
Question:
I have a sensor and this indicates interface to the power supplier.
When de consumed power is lower then the produced power it wil give a negatief value, eq: 400 W or -400 W
Is it posible to use this messurements in the power-distribution-card?

Something like this:
solar: 4000 W
home: 1000 W
grid: -3000 W

Greetings,
Martin

Add Battery SOC display

Hi,

I like your card a lot. It would be great, if you could add a state of charge display for the battery (in percent).

Thanks, Waldemar

Card not working on my Sensors

I have created the card as per below, But not sure if i am missing something.

type: 'custom:power-distribution-card'
title: Overview
battery: sensor.battery_watts
home: sensor.inverter_totalwatts
solar: sensor.solar_watts
grid: sensor.gridwatts
autarky: sensor.autarky -- This i did not change do i need to do something here?
ratio: sensor.ratio -- This i did not change do i need to do something here?

Not sure if this works with Any Solar system or just with e3DC?

power-distribution-card not accessible on Android Home Assistant Companion App

I have just updated from version 1.7 to 2.2. Following I removed the power distribution card in my lovelace setup and created a new one using the UI on the webbrowser of my computer.
Using the Android Home Assistant Companion App however I have found out, that this card is not displayed. It seems that also the option to create the power distribution card is not available on the Android App. Can you imagine a reason for this?
In case you require any further information to analyse this problem, let me know and I am glad to share.

Vectorizing Arrow Animations

By Vectorizing the Gif Animations some computing rescources can be saved by integrating just the bare paths.
Either as single triangles with color manipulation as animation or 3 sets of coloured paths.

Cannot change autarky and ratio color and name

Hi, Great card
I have just a problem for changing name ( still autarky and ratio) and color (always grey)
Any issue about that ?

Threshold for Animation

Is it possible to add some way of set a Threshold for the Animation?
In my case sometimes the Solar-System will report a power of 0.1 Watts.
Thats "nothing" but will show the animation.

No animation and arrows, when not included in calculations.

@JonahKr I managed to get your fantastic card to work exactly as I wanted it to.

Impressing card indeed, it now matches how my energy is created and used and stored on the grid.

I explain the Icons, for better understanding of my request.

Solar is what is currently produced by my solar cells

Grid is what is currently sendt to grid, (green) or collected from grid (red)

From/Solar is what is directly outside grid, currently used of the produced energy from my solar cells

(Fase 3) as my Solar cells are only 2 fases, the 3rd fase always draw power from the grid, no matter what is produced from solar cells.

Home is the total energy consumption currently taking place.

Now to the isssue:

Grid/Bank, is what I have stored on the grid, green in my favor, red in the energy company's favor.

As you can see the measurement is kWh, and this field is not included in any calculations, as it is a pure figure, that constantly updates, according to production/energy usage, to from the grid.

This is a special Danish solution, where if your sun cells were ordered before november 2012, you could use the grid for storage of the production you currently not use, and draw from this when the sun is down. (This solution does not exist anymore), but in my case is valid for another 12 years.)

Now to the request:

I would really like a feature to turn the arrows off, when not including the Icon data in the calculations. Meaning that it only will contain the figures, and not the triangles.

So it looks like this:

How I have used your card

This is actually not an issue, but an example for how I have used your card:

I changed the green column to show how much of production goes to grid, and blue, shoe how much of my production goes to own energy consumption.

(actually a nice feature would be to have an third column showing how much of the total consumption comes from the grid)

This is the coding in the power-distribution-card:

type: 'custom:power-distribution-card'
title: Overview
entities:
  - solar: sensor.fronius_pac
  - grid: sensor.fronius_energy_grid
  - home:
      entity: sensor.energy_consumption
      invert_value: true
  - autarky:
      bar_color: blue
      name: Eget
  - ratio:
      entity: sensor.fronius_w_to_grid
      bar_color: green
      name: t/Grid

and this is the coding in the configuration.yaml, where I have made som work variables:

#START Fronius and Kamstrup variables

calculate energy consumption

  - platform: template
    sensors:
      energy_consumption:
        value_template: >
            {{'%0.0f' | format(states('sensor.fronius_pac') | float - 
                       states('sensor.kamstrup_activepowerminus') | float + 
                       states('sensor.kamstrup_activepowerplus') | float) }}
        unit_of_measurement: 'W'

Energy consumption must not be negative

  - platform: template
    sensors:
      fronius_energy_consumption:
        value_template: >
              {% if states('sensor.energy_consumption')|float < 0 %} 0
              {% endif %}        
        unit_of_measurement: 'W'

compute grid

  - platform: template
    sensors:
      fronius_energy_grid:
        value_template: >
            {{'%0.0f' | format(states('sensor.energy_consumption') | float - states('sensor.fronius_pac') | float) }}
        unit_of_measurement: 'W'

calculate to grid

  - platform: template
    sensors:
      fronius_w_to_grid:
        value_template: >
          {% set grid = states('sensor.fronius_energy_grid') %}
          {% set prod = states('sensor.fronius_pac') %}  
          {% set result = grid |float / prod |float *-1 %}
          {% if result |float < 0.00 %} 0
          {% elif result |float > 0.00 %}
             {{ '% 0.0f' | format(states('sensor.fronius_energy_grid') | float /  states('sensor.fronius_pac') | float *-100) }}
          {% else %} 0
          {% endif %}    

END Fronius & Kamstrup

Thanks for a very good card.

Format numbers with selected language

Hello,

since HA Version 0.118 the format of numbers is according to the selected language, pull request #7516 and #7763

It would be great if the numbers of this card would be formated the same way. Best regards

autarky and ratio

Is there a possibility to get the autarky and ratio values into graphs?

save values in autarky & ratio

Hi,

thanks for you card. I really like it!

Is it possible to save the 'autarky' & 'ratio' values in a sensor? I want to put them in my influxdb.

Thanks!

Value dependant color changes

I like the idea of this card - can you consider a change so that the colours of the entities change depending on whether they are producing or consuming power?

For example, the house will always be Red as it is always consuming power, however if power is being exported then it should be green and red if it is importing. This way it is easy to tell at a glance if excess power is available.

Autarky could also have a range of colours - 0-30% = Red 30-50% - Orange - 50-70 % light green - 70-100% dark green

Thanks

Change name for ration and autarky

Thanks a lot for this great lovelace card.

If I'm reading the code correctly the words ratio and autarky is currently hardwritten:

power-distribution-card/src/power-distribution-card.ts

Line 143 in 64d8f3f

<p id="autarky">autarky</p>

Could you add a possibilty to change this via name attribute?

// works
home: 
  entity: sensor.e3dc_house_power
  invert_arrow: true
  name: Haus
// don't work
autarky:
  entity: sensor.e3dc_autarki
  name: Autarkie

Center cards are redrawn on each render

Hello! I really enjoy the power distribution card and use it with an E3DC-System.
Now I tried to configure two gauge-cards as a vertical stack in the middle, this basically works, but the cards get redrawn like every other second. This looks somehow weird...

bug-darstellung.mp4

My code:

      - type: 'custom:power-distribution-card'
        title: ''
        entities:
          - decimals: 2
            display_abs: true
            name: solar
            unit_of_display: W
            icon: 'mdi:solar-power'
            producer: true
            entity: sensor.e3dc_pv_leistung
            preset: solar
          - decimals: 2
            display_abs: true
            name: grid
            unit_of_display: W
            icon: 'mdi:transmission-tower'
            entity: sensor.e3dc_netzleistung
            preset: grid
          - decimals: 2
            display_abs: true
            name: battery
            unit_of_display: W
            consumer: true
            icon: 'mdi:battery-outline'
            producer: true
            entity: sensor.e3dc_batterieleistung
            preset: battery
          - decimals: 2
            display_abs: true
            name: home
            unit_of_display: W
            consumer: true
            icon: 'mdi:home-assistant'
            entity: sensor.e3dc_hausleistung
            preset: home
        center:
          type: card
          content:
            type: vertical-stack
            cards:
              - type: gauge
                entity: sensor.e3dc_batterieladung
                min: 0
                max: 100
                name: Speicher
                severity:
                  green: 20
                  yellow: 10
                  red: 0
              - type: gauge
                entity: sensor.e3dc_autarkie
                min: 0
                max: 100
                name: Autarkie
                severity:
                  green: 85
                  yellow: 50
                  red: 0
        animation: slide

Is this caused by my configuration?

Invert value have no effect

I just updated to the new version.

From the enclosed jpg, it can be seen that invert value on the home sensor have no effect.
Value is positive, as can be seen in the graph below, as well as the entity card for sensor.energy_consumption

Power in KW

Implement a way to change the rounding of the values or set the entity values to kW instead of W. The use case is the Tesla Powerwall.

Home Sensor Positive Value

Hi Again,

There seems to be a calulation error on the Autarky and Ratio value when i change my Home sensor value to inverted.

Just thought that it would be great to cater for this because if i do not change to inverted it looks like my home is give power not receiving 👍

Regards

layout goes wrong with more consumer

I really love this card. Thanks so much for creating it!
I expect that I am trying to use the card for a display beyond what it was designed for, but I have notices that when I add more than 3 consumers, the layout of the card gets a bit mixed up...

As you can see, I basically group my energy sensors by type or function, and I'd love to use the card to show a live breakdown of energy usage in my house.
Thanks again!

Adding language support

Adding language support for all text fields (e.g. Solar, Grid, Autarkie etc... ). The language setting could be pulled from the Home Assistant instance.
External Translation services should not be required because there are no sentences included.

More than 4 tiles

Hello,
can you fix this graphic problem when I set more than 4 tiles?

Visual Editor

To enable a better user experience, a visual editor would be helpfull.
However this maybe would require additional and more extensive translations. (#2)

Custom Unit of measurement

Suggestion.... Could we show our own Unit of Measure

i am used to work with Amp

Amp produce by the Solar Panel
Amp produce by the car alternator

Amp consume by the Motorhome

tks

Divide by zero

How to avoid the error divide by zero?

2020-12-14 19:11:28 ERROR (MainThread) [homeassistant.helpers.event] Error while processing template: Template("{% set grid = states('sensor.enphaseenvoy_energy_grid') %} {% set prod = states('sensor.enphaseenvoy_current_energy_production') %} {% set result = grid |float / prod |float *-1 %} {% if result |float < 0.00 %} 0 {% elif result |float > 0.00 %} {{ '% 0.0f' | format(states('sensor.enphaseenvoy_energy_grid') | float / states('sensor.enphaseenvoy_current_energy_production') | float *-100) }} {% else %} 0 {% endif %}")
2020-12-14 19:11:28 ERROR (MainThread) [homeassistant.components.template.template_entity] TemplateError('ZeroDivisionError: float division by zero') while processing template 'Template("{% set grid = states('sensor.enphaseenvoy_energy_grid') %} {% set prod = states('sensor.enphaseenvoy_current_energy_production') %} {% set result = grid |float / prod |float *-1 %} {% if result |float < 0.00 %} 0 {% elif result |float > 0.00 %} {{ '% 0.0f' | format(states('sensor.enphaseenvoy_energy_grid') | float / states('sensor.enphaseenvoy_current_energy_production') | float *-100) }} {% else %} 0 {% endif %}")' for attribute '_state' in entity 'sensor.enphaseenvoy_w_to_grid'

autarky percent calculation issue

When autarky is being automatically calculated, sometimes it displays a figure that isn't a whole number and it displays many zeros with a value, ie, 51.00000000007%

The percent should be fixed to a whole number to avoid this issue - thanks

v2.0 - My Card Stopped Working | Visual Editor doesn't work

Hey there 👋
I am very sorry that updating this card disabled your configured settings.
Adding the Visual Editor required some serious changes to how configuration is handled and therefore quite a few breaking changes had to be introduced.
This will be the Last time though. I hope

If you still have issues getting everything back working feel free to post it in this thread and i will help you as fast as possible.

2 sensors for the grid

Hi, in my setup i have 2 different sensors that define the grid:

• sensor.power_consumption
• sensor.power_production

how would i use this card with the 2 sensors?

what means ratio?

Hello,

interesting integration!
What exactly does ratio mean?

Thank you
Greetings
Steff

Add Battery SOC displaying

Good Day Again,

Would be great if you could build in the battery SOC sensor that then changes the icon the more depleted it becomes where you can specify the % you would like it to be red/orange/green.

Example
battery:
entity: sensor.e3dc_battery
soc: sensor.battery_soc
color:
green: 80
orange: 50
red: 30

Would also be great if you can show the % under the battery image on the card :)
Might be wishful thinking.

hide arrow if value is below x

Hi,

it would be great if you could hide an arrow if the value (pos. or negative) is below a user-defined threshold.

Sometimes my meter returns 100W of import/export because latency deviations. I want to ignore them in on this card.

Well, I guess the picture is unnecessary, but anyway..

Item Placeholder & Tap Action/Service

Hello Jonah,

this is a very cool card.
I have two more questions:
Is it possible to execute an action, service, ... with tab_action or hold_action?
Is it possible to include a placeholder? For example, there should be producers on the left, two in my case, and consumers on the right, six in my case.

Greetings Stephan

How to read the two bar's percentages.

I have been trying to understand the percentage for the ratio, and the autarky.

When the solar system produces more electricity than is used, and the overflow is sent to the Grid, the two percentages make sense, as the ratio is 100% and the autarky states the percentage sent to Home.

OK, now the solar system is producing less than is used, and the Overview looks like this:

Here I can simply not figure out what the percentages are saying...

I would be happy if you could clarify.

Handle Unavailable Sensors

Hi there!

I've just begun using this card and it works great, but I noticed it does not handle sensors that are Unavailable properly.
This occurs when say one of my smart plugs with energy monitoring is unplugged.
Instead of showing "Unavailable" or something to that effect, it shows "NaN W" and an animated arrow despite essentially being 0 consumption.
Attached is an image of this behaviour.
It seems like changing this line of code to check for NaN should fix the arrow animation, but I leave that up to you! Especially in terms of how to handle the wattage display.
Thank you for this card!

Dylan

Translation option for autarky and ratio

I saw that in my German installation, autarky and ratio are always English.
I didn't find this in language JSON files. Maybe this can be added?

AND, big thanks für this nice project :-)

Wrong Visual Editor for display_abs attribute

@JonahKr

It is working perfect: 👍

Your card is PERFECT, and I would like to buy you a bear, but you do not have that possibility on your repo.

There is a little glitch in the Visual Editor though.

You set "absolut" value as default, but if you change it, you have to change it back and forth 3 times before you can save it.
If you do nothing, the "absolut" value is not changed, if you in a previously save has unmarked it.

Decimals points, do not work when setting the unit of Display, as you will see the value is 0,63, and not 631, it correct it self when save, but figure is shown without decimals.

As said minor flaws, and not important for the card usage.

Bar layout improvement

Hello, great card! I have tested various cards, but I will definitely go for this card.

I'm not yet sure how to setup the center . In general I like the bars, but I have some comments:

• Two bars are completely confusing me (I never know what is what). An option to disable one specific bar would be good.
• I don't like the layout when the bars are 0% --> It looks so empty... Have you already thought of making a border around the bars? Or maybe even better: