• UI Editor!!! 🥳
• Multiple Language support (🇺🇸, 🇩🇪, 🇵🇹, 🇪🇸, 🇧🇷, 🇳🇱, 🇮🇹, 🇫🇷, 🇷🇺, 🇫🇮, 🇵🇱, 🇩🇰, 🇸🇰, 🇨🇿)
• Bidirectional Individual Entities ↕️
• Secondary Information for all circles ℹ️
• Display Grid Power Outage ⚡️
• Template functionality 📙

The Goal of this card is to provide an easy to understand and visualize way of displaying the current Power Distribution coming from and to different sources, such as solar, grid, home batteries etc. Furthermore, this card aims to expose a lot of customizability and control of its behavior to the configuration, allowing users to tailor it to their specific requirements.

This card does not aim to display Energy Values (Meaning accumulated power over 1 day, for example). If this is your goal, check out the Energy Flow Card Plus.

This card is directly available through HACS. To install HACS, follow these instructions. After having HACS installed, simply search for "Power Flow Card Plus" and download it using the UI 🙂

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

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

The Individual fields must be an array of objects. Each object must follow the following structure:

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

This Feature allows you to configure an additional small text for each Individual Device. Here you can put , for example, the state of charge of an electric car.

This feature allows you to configure how the card handles a Grid Power Outage scenario.

This object allows you to control the behavior of the flow lines that are inactive.

Don't forget to change the entity ids

The following configurations will allow you to achieve your results with the least amount of lines of code / complexity. In these examples I decided to use the Split entities option, but feel free to use the combined entity option. More Info

type: custom:power-flow-card-plus
entities:
  grid:
    entity: sensor.grid_power
    power_outage:
      entity: sensor.power_outage
    display_state: one_way
    color_circle: true
watt_threshold: 10000

This should give you something like this:

type: custom:power-flow-card-plus
entities:
  grid:
    entity:
      consumption: sensor.grid_consumption
      production: sensor.grid_production
      display_state: one_way
      color_circle: true
  solar:
    entity: sensor.solar_production

This should give you something like this:

type: custom:power-flow-card-plus
entities:
  grid:
    entity:
      consumption: sensor.grid_consumption
      production: sensor.grid_production
    display_state: one_way
    color_circle: true
  solar:
    entity: sensor.solar_production
  battery:
    entity:
      consumption: sensor.battery_consumption
      production: sensor.battery_production
    state_of_charge: sensor.battery_state_of_charge
    display_state: one_way
    color_circle: true
  home:
    color_icon: true
watt_threshold: 10000

This should give you something like this:

This Configuration is a little bit random, it's just here to demonstrate the capabilities of this card.

type: custom:power-flow-card-plus
entities:
  home:
    entity: sensor.home_consumption
    color_icon: solar
  fossil_fuel_percentage:
    entity: sensor.fossil_fuel_percentage
    icon: mdi:pine-tree
    color_icon: true
    display_zero: true
    name: Non Fossil
    state_type: power
  grid:
    icon: mdi:ab-testing
    name: Provider
    entity:
      production: sensor.grid_production
      consumption: sensor.grid_consumption
  solar:
    icon: mdi:solar-panel-large
    entity: sensor.solar_production
  battery:
    name: Bateria
    icon: mdi:bat
    entity:
      consumption: sensor.battery_consumption
      production: sensor.battery_production
  individual:
    - entity: sensor.car_power
      icon: mdi:car-electric
      color: "#80b8ff"
      name: Denim Flash
      color_icon: false
    - entity: sensor.motorbike_power
      name: Qivi
      color_icon: true
      display_zero: true
      color: "#ff8080"
      icon: mdi:motorbike-electric
w_decimals: 0
kw_decimals: 2
min_flow_rate: 0.9
max_flow_rate: 6
watt_threshold: 10000
clickable_entities: true
title: Power Flow Card Plus

This should give you something like this:

This formula is based on the official 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

In contrast to the old flow formula, this formula calculates the flow rate independently from other lines, making it more intuitive to interpret the perceived power. This means that a state of 10W will always flow with the same velocity, no matter what other lines are doing. In other words this flow rate is calculated in absolute and not relative values.

To get this new Flow Formula to work, simply set use_new_flow_rate_model in the main configuration to true. You may want to play around with the max_expected_power, min_expected_power, max_flow_rate and min_flow_rate to get the speeds that you wish

if (value > maxIn) return maxOut; // In case power exceeds maximum expected power, use the fastest speed and ignore the rest.
return ((value - minIn) * (maxOut - minOut)) / (maxIn - minIn) + minOut;

// value = value of the current line to calculate (eg: grid to home)
//
// minIn = amount of watts at which the lowest speed will be selected.
//   ↳ In your configuration this is `min_expected_power`
//   ↳ eg: setting this at `100` means that at `100` watts, the dots will still flow at the lowest speed
// maxIn = amount of watts at which the highest speed will be selected.
//   ↳ In your configuration this is `max_expected_power`
//   ↳ eg: setting this at `2000` means that everything more than `2000` will flow at the highest speed selected
//
// minOut = amount of watts at which the lowest speed will be selected.
//   ↳ In your configuration this is `max_flow_rate`
//   ↳ eg: setting this at `5` means that one dot will take `5` second to travel
// maxOut = amount of watts at which the highest speed will be selected.
//   ↳ In your configuration this is `min_flow_rate`
//   ↳ eg: setting this at `1` means that one dot will take `1` second to travel

The following video aims to show the diffence between the two flow formulas:

Notice that when the Power changes to only coming from the sun, the old formula accelerates to maintain a constant amount of dots/second. Using the new formula is more intuitive, since you can immediately see that the Solar Power is relatively low since the dots are flowing very slowly. On the old Flow Formula you might think that the sun is producing a lot of power, which in this case is not true.

At the end of the day these are two options and depending on what you're interested, one might suit you better than the other, that's why I kept the old formula, you have the choice. 🙂

Here is my to-do list containing a few enhancements I am planning in adding. The ones at the top are bigger priorities, so they’ll probably be available before the ones at the bottom.

• Change Tap Action Behavior to be compatible with Browser Mod
• Fill the circles #89
• More than two Individual Devices #54
• More than one solar source #23
• Display Connected/Disconnected status #111
• Grid Feed In Circle #119
• Improve performance #144

I am still just one person working on this project and obviously have other things going on in my life, so feel free to contribute to the project. You can also feel free to create a PR with a new feature and I'll try my best to review it 😊