power-distribution-card

Inspired by

The Lovelace Card for visualizing power distributions.

Table of Contents

• Installation

• Configuration

  Presets

  Simple Configuration

  YAML Configuration

  Animation Options

  Center Panel

  Advanced Configuration

• FAQs

---

Installation

Installation via HACS

1. Make sure the HACS custom component is installed and working.
2. Search for power-distribution-card and add it through HACS
3. Refresh home-assistant.

Manual installation

1. Download the latest release of the power-distribution-card
2. Place the file in your config/www folder
3. Include the card code in your ui-lovelace-card.yaml ```yaml resources:
   • url: /local/power-distribution-card.js type: module `` Or alternatively set it up via the UI:Configuration -> Lovelace Dashboards -> Resources (TAB)` For more guidance check out the docs.

---

Configuration

Presets

Every Sensor you want to add has to use one of the Presets. You can add as many of these as you want.

battery	car_charger	consumer	grid	home	hydro	pool	producer	solar	wind	heating
Any Home Battery e.g. E3dc, Powerwall	Any Electric Car Charger	A custom home power consumer	The interface to the power grid	Your Home's power consumption	Hydropower setup like Turbulent	pool heater or pump	custom home power producer	Power coming from Solar	Power coming from Wind	Radiators

The presets consumer and producer enable to add any custom device into your Card with just a bit of tweaking.

Simple Configuration 🛠️

With Version 2.0 a Visual Editor got introduced. You can find the Card in your Card Selector probably at the bottom. From there on you can configure your way to your custom Card. The easiest way to get your Card up and running, is by defining the entities for the presets directly.

! Please Check for every Sensor: positive sensor values = production, negative values = consumption
! If this is the other way around in your Case, check the `invert_value` setting (Advanced Configuration)!

Placeholder

By submitting an empty entity_id and preset, you will generate a plain transparent placeholder item which can be used to further customize your layout. Alternatively you can use the provided placeholder preset.

YAML Only

If you are a real hardcore YAML connoisseur here is a basic example to get things started:

type: 'custom:power-distribution-card'
title: Title
animation: flash
entities:
  - entity: sensor.e3dc_home
    preset: home
  - entity: sensor.e3dc_solar
    preset: solar
  - entity: sensor.e3dc_battery
    preset: battery
center:
  type: bars
  bars:
    - preset: autarky
      name: autarky
    - preset: ratio
      name: ratio

You can find all options for every entity here. If you want to further modify the center panel youz can find the documentation here.

Animation

For the animation you have 3 options: flash, slide, none

type: 'custom:power-distribution-card'
animation: 'slide'

Center Panel

For customizing the Center Panel you basically have 3 Options:

None 🕳️

the void

Bars 📊

Bars have the following Settings: | Setting | type | example | description | | --------------------- |:-------------:|:-----------------:| :------------| | bar_color | string | red, #C1C1C1 | You can pass any string that CSS will accept as a color. | | bar_bg_color | string | red, #C1C1C1 | The Background Color of the Bar. You can pass any string that CSS will accept as a color. | | entity | string | sensor.ln_autarky | You can specify the entity_id here as well. Required when preset is not autarky or ratio. | | invert_value | bool | false | This will invert the value received from HASS. | | lower_bound | number | 0 | Lower bound for bar fill scaling (default: 0). Values at or below this show an empty bar. | | name | string | Eigenstrom | Feel free to change the displayed name of the element. | | preset | 'autarky' | 'ratio' | '' | autarky | autarky/ratio auto-calculate from entity totals. Use '' (empty string) with an entity for a custom bar. | | tap_action | Action Config | Configuration | Single tap action for item. | | double_tap_action | Action Config | Configuration | Double tap action for item. | | unit_of_measurement | string | W , kW | Default: %; The Unit of the sensor value. Should be detected automatically! | | upper_bound | number | 100 | Upper bound for bar fill scaling (default: 100). Values at or above this show a full bar. |

Cards 🃏

Cards couldn't yet be included in the Visual editor in a nice way. I am working on it though. Feel free to open a Issue with suggestions. To add a card you can simply replace the center part in the Code Editor. Be aware though: While you can switch between none and card without any issues, switching to Bars will override your settings.

For example you could insert a glance card:

center:
  type: card
  card:
    type: glance
    entities:
      - sensor.any_Sensor

Entity Configuration ⚙️

There are alot of settings you can customize your sensors with:

Setting	type	example	description
attribute	string	deferredWatts	A Sensor can have multiple attributes. If one of them is your desired value to display, add it here.
arrow_color	object	{smaller:'red'}	You can Change the Color of the arrow dependant on the value. (Bigger, Equal and Smaller)
calc_excluded	boolean	true	If the Item should be excluded from ratio/autarky calculations.
color_threshold	number	0, -100, 420.69	The value at which the coloring logic switches on. (default: 0)
consumer	boolean	true	Marks this entity as a power consumer. Negative values contribute to the consumption total used by autarky/ratio bars.
decimals	number	0, 2	The Number of Decimals shown. (default: 2)
display_abs	boolean	true	Display values as absolute (non-negative) numbers. Defaults to true when a preset is used.
double_tap_action	Action Config	Configuration	Double tap action for item.
entity	string	sensor.e3dc_grid	You can specify the entity_id here as well.
hide_arrows	bool	true	Toggles the visibility of the arrows.
icon	string	mdi:dishwasher	Why not change the displayed Icon to any MDI one?
icon_color	object	{smaller:'red'}	You can Change the Color of the icon dependant on the value. (Bigger, Equal and Smaller)
invert_arrow	bool	true	This will change the arrows direction to the opposite one.
invert_value	bool	false	This will invert the value received from HASS. This affects calculations as well!
name	string	dishwasher	Feel free to change the displayed name of the element.
producer	boolean	true	Marks this entity as a power producer. Positive values contribute to the production total used by autarky/ratio bars.
secondary_info_attribute	string	min_temp	Requires secondary_info_entity. Displays the attribute value instead of the sensor state.
secondary_info_decimals	number	1