Power Flow Card

Goal/Scope

Display current power, gas, and water usage in a display that matches the the official Energy Distribution card included with Home Assistant as much as possible. As such, additional features that fall outside of that scope will not be added.

Install

HACS (recommended)

This card is available in HACS (Home Assistant Community Store). HACS is a third party community store and is not included in Home Assistant out of the box.

Manual install

1. Download and copy power-flow-card.js from the latest release into your config/www directory.

2. Add the resource reference as decribed below.

Add resource reference

If you configure Dashboards via YAML, add a reference to power-flow-card.js inside your configuration.yaml:

resources:
  - url: /local/power-flow-card.js
    type: module

Else, if you prefer the graphical editor, use the menu to add the resource:

1. Make sure, advanced mode is enabled in your user profile (click on your user name to get there)
2. Navigate to Settings -> Dashboards
3. Click three dot icon
4. Select Resources
5. Hit (+ ADD RESOURCE) icon
6. Enter URL /local/power-flow-card.js and select type "JavaScript Module". (Use /hacsfiles/power-flow-card/power-flow-card.js and select "JavaScript Module" for HACS install if HACS didn't do it already)

Using the card

I recommend looking at the Example usage section to understand the basics to configure this card. (also) pay attention to the required options mentioned below.

Options

Card options

Entities object

At least one of grid, battery, or solar is required. All entites (except _batterycharge) should have a unit_of_measurement attribute of W(watts) or kW(kilowatts).

Split entities

Can be use with either Grid or Battery configuration. The same unit_of_measurement rule as above applies.

Example usage

Combined Entites Example

Using combined entities for grid, battery and solor that support positive state values for consumption and negative state values for production.

type: custom:power-flow-card
entities:
  battery: sensor.battery_in_out
  battery_charge: sensor.battery_percent
  grid: sensor.grid_in_out
  solar: sensor.solar_out

Inverted Entities Example

Using combined entites as above but where the battery and grid entities are inverted (negative = consumption and positive = production).

type: custom:power-flow-card
entities:
  battery: sensor.battery_in_out
  battery_charge: sensor.battery_percent
  grid: sensor.grid_in_out
  solar: sensor.solar_out
inverted_entities: battery, grid

Split Entites Example

Using split entities for grid and battery where each consumption and production entity state has a positive value.

type: custom:power-flow-card
entities:
  battery:
    consumption: sensor.battery_out
    production: sensor.battery_in
  battery_charge: sensor.battery_percent
  grid:
    consumption: sensor.grid_out
    production: sensor.grid_in
  solar: sensor.solar_out

Flow Formula

This formula is based on the offical formula used by the Energy Distribution card.

max - (value / totalLines) * (max - min);
// max = max_flow_rate
// min = min_flow_rate
// value = line value, solar to grid for example
// totalLines = gridConsumption + solarConsumption + solarToBattery +
//   solarToGrid + batteryConsumption + batteryFromGrid + batteryToGrid

I'm not 100% happy with this. I'd prefer to see the dots travel slower when flow is low, but faster when flow is high. For example if the only flow is Grid to Home, I'd like to see the dot move faster if the flow is 15kW, but slower if it's only 2kW. Right now the speed would be the same. If you have a formula you'd like to propose please submit a PR.

Credits

• HA Energy Distribution Card
• @angular/cdk
• Jack Moore