Awesome

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<PowerEntity>	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".

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