sese-schneider / ha-energy-overview-card

A simple card which displays energy usage details of one or multiple entities.

Energy Overview Card by @Sese-Schneider

A simple card which displays energy usage details of one or multiple entities.

Features:

• Variable amount of monitoring entities
• Voltage, Current, Power, Frequency and Power Factor display
• Automatic unit of measurement detection and ordering
• Adjustable names, colors, labels and icons
• Configurable dynamic animations adapting to power usage

Three-phase power monitoring example:

Configuration

A graphical user interface (GUI) to configure the card is available.

After installation, simply press "Add Card", search for "Energy Overview", and add the card. Now you can start the configuration via the GUI.

Direct configuration via YAML is also available. For details see below.

Options

Name	Type	Requirement	Description	Default
type	string	Required	custom:energy-overview-card
entities	Array	Required	List of power entities (see below)
animation	AnimationConfig	Optional	Animation configuration (see below)
order_by	string	Optional	Value name of which to sort all entities. Options are: power, voltage, current, frequency, and power_factor	No sorting
title	string	Optional	Title of the card

PowerEntity

Name	Type	Requirement	Description	Default
power	state entity	Required	State entity for power
voltage	state entity	Optional	State entity for voltage
current	state entity	Optional	State entity for current
frequency	state entity	Optional	State entity for frequency
power_factor	state entity	Optional	State entity for power_factor
name	string	Optional	Name label
icon_leading	string	Optional	Leading MD icon	mdi:transmission-tower
icon_trailing	string	Optional	Trailing MD icon	mdi:home-lightning-bolt
label_leading	string	Optional	Leading label
label_trailing	string	Optional	Trailing label
color	string	Optional	CSS color	var(--energy-grid-consumption-color)
animation	AnimationConfig	Optional	Overwrite for the global animation

AnimationConfig

Name	Type	Requirement	Description	Default
power	number	Optional	Wattage level at which the animation runs at min_duration speed	1000
min_duration	number	Optional	Minimum duration of the animation at >= power W	1
max_duration	number	Optional	Maximum duration of the animation at > 0 W	10
inverted	boolean	Optional	Inverts the animation direction	false

Example configuration

type: custom:energy-overview-card
entities:
  - power: sensor.a_p
    current: sensor.a_c
    voltage: sensor.a_v
    power_factor: sensor.a_pf
    label_leading: "P"
    label_trailing: "L1"
    icon_leading: "mdi:transmission-tower"
    icon_trailing: "mdi:home-lightning-bolt"
    color: "#488fc2"
  - power: sensor.b_p
    current: sensor.b_c
    voltage: sensor.b_v
    power_factor: sensor.b_pf
    label_leading: "P"
    label_trailing: "L2"
    color: "#7dbff5"
    animation:
      power: 100
      min_duration: 2
      max_duration: 5
  - power: sensor.c_p
    current: sensor.c_c
    voltage: sensor.c_v
    frequency: sensor.c_fq
    power_factor: sensor.c_pf
    label_leading: "P"
    label_trailing: "L3"
    color: "#b1f2ff"
animation:
  power: 1000
  min_duration: 1
  max_duration: 10

Install

HACS

This repo is available for install through the HACS.

• Go to HACS → Frontend
• Use the FAB "Explore and download repositories" to search "Energy Overview Card".

or

Click here:

Simple install

• Download and copy energy-overview-card.js from the latest release into your config/www directory.
• Add a reference to energy-overview-card.js as JavaScript-Module to your Lovelace dashboard via "Manage Resources". ( Note: You have to enable advanced mode)

Troubleshooting

ha-energy-overview-card's Issues

Invert sensor for Goodwe inverter?

When I'm using 100 watts from the grid my Goodwe sensor output -100w so the flow on this card is the wrong way round. Could you add an option to invert the sensor?

Voltage and Current are too close to each other

very nice overview. I like it. The voltage and Current are close to each other. Maybe center all 3 over the entire length but also when e.g. power factor is not used.

Enhancement: order_by to define top row

For order_by option I would like to have an additional option to define the all time first row.
In my example I have solar power and several consumers. I would like to have the solar on top and the consumer sorted by consumption below.
Thank you!

Add parameter current frequency

Could you add one more parameter to the line - current frequency.

Feature request: Differentiate between power consumed/produced variables

Dutch power meters don't have a 'negative' power variable. Instead they have power_consumed and power_produced variables.
The second you don't draw power, the P1 port of the meter will increase the power_produced counter instead.

So with solar panels, your widget will show for example 14A in use @ 0 watt (as there's 14 amps of power pushed back into the grid)

It'd be great that you could put two variables in your widget:
power_consumed: sensor.1
power_produced: sensor.2

If there's a >0 value in either, it'll show either the power pulled out of the net or pushed back into the grid.
If value ==0 on both, the phase is not used currently.

See attached:

Power factor of Phase A not available

The power factor of Phase A is not available somehow, Phase B and Phase C seem to be ok.
Could it be because of negative values?
I'm on the latest version 2.1.0.
Thanks!

EDIT:

      - type: custom:energy-overview-card
        entities:
          - power: sensor.shelly3em01_channel_a_power
            current: sensor.shelly3em01_channel_a_current
            voltage: sensor.shelly3em01_channel_a_voltage
            power_factor: sensor.shelly3em01_channel_a_power_factor
            label_trailing: A
            icon_leading: mdi:transmission-tower
            icon_trailing: mdi:home-lightning-bolt
            color: '#488fc2'
          - power: sensor.shelly3em01_channel_b_power
            current: sensor.shelly3em01_channel_b_current
            voltage: sensor.shelly3em01_channel_b_voltage
            power_factor: sensor.shelly3em01_channel_b_power_factor
            label_trailing: B
            color: '#7dbff5'
          - power: sensor.shelly3em01_channel_c_power
            current: sensor.shelly3em01_channel_c_current
            voltage: sensor.shelly3em01_channel_c_voltage
            power_factor: sensor.shelly3em01_channel_c_power_factor
            label_trailing: C
            color: '#b1f2ff'

Dot directions not changing when the power value is negative

Hey mate, I'm the dude from Reddit with the changing dot direction issue ;-)
To add more information about the issue: I never installed your add-on outside of HACS.
Here is my config:

type: custom:energy-overview-card
a_current: sensor.shelly3em01_channel_a_current
b_current: sensor.shelly3em01_channel_b_current
c_current: sensor.shelly3em01_channel_c_current
a_voltage: sensor.shelly3em01_channel_a_voltage
b_voltage: sensor.shelly3em01_channel_b_voltage
c_voltage: sensor.shelly3em01_channel_c_voltage
a_power: sensor.shelly3em01_channel_a_power
b_power: sensor.shelly3em01_channel_b_power
c_power: sensor.shelly3em01_channel_c_power
a_power_factor: sensor.shelly3em01_channel_a_power_factor
b_power_factor: sensor.shelly3em01_channel_b_power_factor
c_power_factor: sensor.shelly3em01_channel_c_power_factor

Thanks!

Power value in kW

Hello!
Thanks for a good job, very useful card.
Could you add the possibility to use power in kW due most meter provide it in kW, not in W only.
Otherwise card not animated.
Thanks in advance!

Feature Request: More information on click

Hello,

Great card!

I would like to have an option to specify an action on click on the entity, ideally this would show the more-information dialog of the entity so that I can see the history of consumption for that entity.

Animation not working plus a feature request

`type: custom:energy-overview-card
entities:
  - power: sensor.electricity_meter_power_consumption_phase_l1
    current: sensor.electricity_meter_current_phase_l1
    voltage: sensor.electricity_meter_voltage_phase_l1
    animation:
      power: 100
      min_duration: 2
      max_duration: 5
    label_leading: P
    label_trailing: L1
    icon_leading: mdi:transmission-tower
    icon_trailing: mdi:home-lightning-bolt
  - power: sensor.electricity_meter_power_consumption_phase_l2
    current: sensor.electricity_meter_current_phase_l2
    voltage: sensor.electricity_meter_voltage_phase_l2
    animation:
      power: 100
      min_duration: 2
      max_duration: 5
    label_leading: P
    label_trailing: L2
    icon_leading: mdi:transmission-tower
    icon_trailing: mdi:home-lightning-bolt
  - power: sensor.electricity_meter_power_consumption_phase_l3
    current: sensor.electricity_meter_current_phase_l3
    voltage: sensor.electricity_meter_voltage_phase_l3
    animation:
      power: 100
      min_duration: 2
      max_duration: 5
    label_leading: P
    label_trailing: L3
    icon_leading: mdi:transmission-tower
    icon_trailing: mdi:home-lightning-bolt
animation:
  power: 1000
  min_duration: 1
  max_duration: 10
`

With this config, animation only plays over 1000w and not over a 100.

Also a feature request; would be nice to add a 4 bar or some sort of summary of the totalt power etc.

Feature Request: Template Support

Hi,
I have a feature request:

I see that negative values will show the animation from right to left (as expected). My DSMR has two sensors per line: Power Consumption and Power Production. Both are positive values. But When I have Production, I do not have Consumption and vice versa

Is there a way to display the results of the calculation: Consumption-Production? That is: with Consumption this is a positive value, and with Production this is a negative value. This way the animation shows exactly the flow of energy as it occurs.

I tried a template, but this isn't recognized (or I do something wrong).

This is a simple test config that works:

type: custom:energy-overview-card
entities:
  - power: input_number.schuiver
    label_leading: P
    label_trailing: L1
    icon_leading: mdi:transmission-tower
    icon_trailing: mdi:home-lightning-bolt
    color: '#488fc2'

But if I change the power line to use a template, like this:

- power: "{{ states('input_number.schuiver') }}"

It doesn't show anything. This line only uses a template to retrieve the value, no calculations are done (yet)

I am aware I can solve this with a template sensor, but I believe a solution in this card is the cleaner solution.

Dynamic color

It would be great to have the color and animation dynamic.

I really would like to be able to color by the usage and same for animation. It would be great to have to be able to speed up of slow down the animation by usage.

Thank you!

Is it possible to add a label/name to the card?

If I wanted to add multiple power meter smart plugs using this card it would be handy to have a lable option per one so we can differentiate.

I did try adding lable/name in case it was already there

Support rounding of measurement values

When utilizing sensor entities that provide a lot of numbers in their floating point data, the data starts overlapping and is no longer visible:

A workaround is to generate a template sensor that provides the rounding, but given that most power entity viewers already provide a way of rounding data, it's probably more convenient to users to support this out of the box, e.g. to round to 1 or 2 digits (or make it configurable per measurement).

Limiting the value decimals / precision?

Is there a way to control the decimals shown in the card? The precision provided by Shelly EM3 for instance seems a little excessive..and cannot be modified in the device afaik. Would not want to create template sensors for this.

Or alternatively, could the card follow the new Display precision setting in UI (new feature in 2023.3 I think). It already seems to be obeying the Unit of measurement set in the UI (f.ex. the kW figures were originally presented as W and I changed them in the UI dialog).

(and yes, my current clamps are still installed the wrong way around:)

Allow for animation overwrites per entity & add css classes everywhere for custom styling options

Very nice card! :-)

Please add individual animation settings to every entity instead of global setting.
That would be good if used entities does not have same power maximum.

Please add to all HTML elements an unique CSS class for customizing (via card_mod).

Please wrap entity value and entity unit into idividual CSS classed for customizing (indentation, color, etc.)

Thank you! :-)

Feature Request: Order by consumption

Hello,

Great card!

I would like to have an option to automatically order the list of the entities so that the entities which are consuming the most will be always on top.

Jump in visualization when values update

I’ve noticed some jumps in the animation associated with the values being updated (every 30sec in my case) and it may be proportional to the number of digits: When the current value drops from 3 digits to just 2, the jump appears larger than otherwise. The values themselves on that line move slightly sideways too and there is a miniscule jump in L3 even if the # of digits there remains the same.

Please see screen capture below. The values change from ~12A to ~9A here:

Support power factor of max 1

Really nice card - used it straight away.

Although please make an option (true/false?) for power factor being either 0-100% or 0-1, as i.e. my electricity meter calculates it with total of 1 max (which seems ok verifying that with Wiki too: https://en.wikipedia.org/wiki/Power_factor )

Support a variable number of rows

Presently the card supports three energy inputs, but I was wondering if it's possible to allow a variable number of them, so you could have one or ten.

I'd anticipate that the changes would be to make the EnergyOverviewConfig type have an array of entity fields:

export interface EnergyOverviewConfig {
  type: string;

  entities: {
    current: string;
    power_factor: string;
    voltage: string;
    power: string;
  }[];
}

And then card render method would iterate over the config.entities array to read each entity set to build up the existing data array (there'd probably have to be something else done to make the colour of each row support more).

Sorting not working

I have set sorting to order_by:current but this takes no effect:

Feature Request: Different view for long names

Hello,

Great card!

I would like to have an option to change the view of the card so that the label is on top of the line, so that it looks more consistent if you use different length of label_leading or label_trailing (see screenshot)

can't find the card

Can someone help me with examples of the card?
Is this a manual card ? because i am not seeing it in card even though integration is there.

Feature Request: Hide entities when template evaluates to true

Hello,

Great card!

I would like to have an option to hide entities when the template given evaluates to true. My use case is that I would like to hide entities which have 0W or less than a few W of current consumption.

Is there a title field available?

In most HA cards it is possible to add an optional title to the card, like shown here for entities:

It would be nice to have this field in energy overview card, too. Currently, the layout looks somewhat misaligned without a title ;)

Unable to see this card in "Add card" menu

Just installed version 2.2.0 through HACS on HA 2023.3.1 and for some reason the card does not appear in the "Add Card" menu in Lovelace. Tried even redownload in HACS and HA reboot but no, only other custom cards shown in the menu.

I can see the files are at /config/www/community/ha-energy-overview-card and it is listed in Dashboards > Resources (http://homeassistant/config/lovelace/resources) but even when adding some config code manually to a card it shows just an empty card. So somehow Lovelace is not loading this resource? No errors in logs (that I could find/associate to this)