Awesome

Energy Flow Card Plus

Bugfixes

• Corrected crooked lines
• Corrected curved lines not connecting to the circle
• Changed the color of the line between the battery and the grid

Features

• Choose wether or not to change the color of the icons
• Choose wether or not to change the color of the text
• Added option for Dynamic Circle colors
• Use different sensors than the ones used in the Energy Integration
• Choose wether to show the Energy or the Percentage in the Low-Carbon Circle
• Added Option for Secondary Information
• Option for Templates in secondary Information
• Override Home State (eg: to calculate Energy losses)
• Choose wether to hide inactive lines
• Individual Devices

Goal

Although the code base is very different, the design of this card is heavily inspired by the Official Energy Distribution Card.

The goal is to deliver a card that fits in the overall design of the Energy Dashboard, while providing more features, such as Individual Devices, Secondary Information and bringing small UI enhancements.

Scope

This card does not aim to display Values (Meaning instantaneous/current consumption). If this is your goal, check out the Power Flow Card Plus.

Recommendation

If you would like to customize the Energy period selector and its dates, check out this card: Energy Period Selector Plus

Install

HACS (recommended)

This card is direclty 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. To install this:

• Go to HACS
• Click on Frontend
• Search for Energy Flow Card Plus
• Install via UI

1. Download and copy energy-flow-card-plus.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 energy-flow-card-plus.js inside your configuration.yaml:

resources:
  - url: /local/energy-flow-card-plus.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/energy-flow-card-plus.js and select type "JavaScript Module". (Use /hacsfiles/energy-flow-card-plus/energy-flow-card-plus.js and select "JavaScript Module" for HACS install if HACS didn't do it already)

Using the card

⚠️ This card also has a UI-Editor. This Editor is currently incompatible with Card Mod. I created a PR to fix this issue, but it hasn't been merged yet. Here is the PR #277. Since it hasn't been merged yet, I also released a fork with the changes from the PR. Installing this Version of Card Mod you can use this card in conjunction with Card Mod. Here is my fork

⚠️ This card offers a LOT of configuration options. Don't worry, if you want your card's appearance to match the oficial Energy Flow Card, you will only need to setup the entities. The rest of the options only enable further customization. If this is your goal, please go to Minimal Configuration

Options

Card options

Entities object

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

Grid Configuration

Solar Configuration

Battery Configuration

Individual Configuration

Home Configuration

Fossil Fuel Configuration

Color Object

Split entities

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

Secondary Info Configuration

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.

Minimal Configuration

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

Only Grid

type: custom:energy-flow-card-plus
entities:
  grid:
    entity:
      consumption: sensor.grid_consumed_energy_daily
      production: sensor.grid_returned_energy_daily
wh_kwh_threshold: 0

This should give you something like this:

Grid and Solar

type: custom:energy-flow-card-plus
entities:
  grid:
    entity:
      consumption: sensor.grid_consumed_energy_daily
      production: sensor.grid_returned_energy_daily
  solar:
    entity: sensor.solar_energy_daily
wh_kwh_threshold: 0

This should give you something like this:

Grid, Solar and Battery

type: custom:energy-flow-card-plus
entities:
  grid:
    entity:
      consumption: sensor.grid_consumed_energy_daily
      production: sensor.grid_returned_energy_daily
  solar:
    entity: sensor.solar_energy_daily
  battery:
    entity:
      consumption: sensor.battery_out_energy_daily
      production: sensor.battery_in_energy_daily
wh_kwh_threshold: 0

This should give you something like this:

Flow Formula

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

New Flow Formula

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 energy. 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_energy, min_expected_energy, max_flow_rate and min_flow_rate to get the speeds that you wish

if(value > maxIn) return maxOut; // In case energy exceeds maximum expected energy, 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 watthours at which the lowest speed will be selected. 
//   ↳ In your configuration this is `min_expected_energy`
//   ↳ eg: setting this at `100` means that at `100` watthours, the dots will still flow at the lowest speed
// maxIn = amount of watthours at which the highest speed will be selected. 
//   ↳ In your configuration this is `max_expected_energy`
//   ↳ eg: setting this at `2000` means that everything more than `2000` will flow at the highest speed selected
//
// minOut = amount of watthours 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 watthours 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:

https://user-images.githubusercontent.com/61006057/231479254-91d6c625-8f38-4abb-b9ba-8dd24d6395f3.mp4

Notice that when the Energy 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 Energy is relatively low since the dots are flowing very slowly. On the old Flow Formula you might think that the sun produced a lot of energy, 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. 🙂

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 😊