Power Flux Card with nice UI and look a like evcc compact-view

Share your Projects!
,
1

Hi, I’d like to introduce you to my new project: the Power Flux Card. It’s inspired by the Power Flow Card, but offers many more customization options and additional animation effects. I think many of us use a Power Flow, so maybe it’s something for you too.

Power Flux Card

The :high_voltage: Power Flux Card is an advanced, animated energy flow card for Home Assistant. It visualizes the power distribution between Solar, Grid, Battery, and Consumers with beautiful neon effects and diffrent animations.

If you like the Card, I would appreciate a Star rating :star: from you. :hugs:

image
image531×500 49.3 KB
image
image517×551 59.9 KB

image
image529×139 17.9 KB
image
image529×139 23.5 KB

https://community-smarthome.com/uploads/default/original/2X/f/f43fbbf934785f526d284a92fab34d54f5ec5cb7.gif(image larger than 3 MB)

:sparkles: Features

  • Real-time Animation: Visualizes energy flow with moving particles.
  • Multiple Sources & Consumers: Supports Solar, Grid, Battery, and up to 3 additional consumers (e.g., EV, Heater, Pool).
  • Compact View: A minimalist bar chart view (inspired by evcc).
  • Customizable Appearance:
    • Neon Glow: Glowing effects for active power lines.
    • Donut Chart: Optional donut chart around the house icon showing energy mix.
    • Comet Tail / Dashed Lines: Choose your preferred animation style.
    • Zoom: Adjustable scale to fit your dashboard.
    • Custom Colors: Define custom colors for each source and consumer via the editor.
    • Background Color: Enable a slightly tinted background for the circles in the default view.
  • More Info: Click on any source/consumer for detailed information in a more-info dialog.
  • Grid Import/Export: Supports both separate Import/Export entities or a combined entity with positive/negative values.
  • Grid-to-Battery: Optional direct sensor for Grid-to-Battery flow, bypassing the standard calculation.
  • Secondary Sensors: Optionally display a secondary sensor value in the main circles (e.g., daily yield for Solar, current charge/discharge power for Battery) and consumer bubbles.
  • Localization: Fully translated in English and German.
  • Visual Editor: easy configuration via the Home Assistant UI.

Support

:rocket: Installation

HACS (Recommended)

  • Add this repository via the link in Home Assistant.

    Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.

  • The “Power Flux Card” should now be available in HACS. Click on “INSTALL”.

  • The resource will be automatically added to your Lovelace configuration.

  • Create the file power-flux-card.js in the /config/www/ folder.

HACS (manual)

  1. Ensure HACS is installed.
  2. Add this repository as a custom repository in HACS.
  3. Search for “Power Flux Card” and install it.
  4. Reload resources if prompted.

Manual Installation

  1. Download power-flux-card.js from the Releases page.
  2. Upload it to www/community/power-flux-card/ folder in Home Assistant.
  3. Add the resource in your Dashboard configuration:
    • URL: /local/community/power-flux-card/power-flux-card.js
    • Type: JavaScript Module

:gear: Configuration

You can configure the card directly via the visual editor in Home Assistant.

Main Entities:

  • Solar: Power generation (W).
  • Grid: Grid power (W). Positive = Import, Negative = Export (or separate entities).
  • Battery: Battery power (W) and State of Charge (%).

Additional Consumers:

  • You can add up to 3 individual consumers (e.g., Car, Heater, Pool) with custom icons and labels.

Options:

  • Zoom: Adjust the size of the card.
  • Neon Glow: Enable/disable the glowing effect.
  • Donut Chart: Show the energy mix as a ring around the house.

hacs_badge HACS validation GitHub release Downloads Stars

ko-fi

2

I love the card. It’s beautiful. Some feedback that sometimes the car shows as “not charging” when it’s charging. See attached.

Screenshot 2026-03-18 at 1.37.00 PM
Screenshot 2026-03-18 at 1.37.00 PM1672×1508 194 KB

3

Hi, thanks for your Feedback. :slight_smile: I dont have a e-car, so I will look into the code to fix it. You say sometimes, does that mean it works generally and then changes randomly?

The new release v_2.5 is now available for download and comes with a lot of new features. The card has been significantly expanded and implementing these changes while keeping all existing dependencies intact definitely cost me some nerves. But everything should now work correctly.

You can now route battery charging via house consumption! This gives you two visualization options: either directly from solar to battery, or from solar → house consumption → battery. Additionally you can now optionally add two more consumers and customize the colors of the secondary entities.

image
image517×551 59.9 KB
image
image517×602 61.1 KB

It’s now also possible to use only the upper or lower part of the card. This is useful if you want to display a partial flow. For example the composition of pool pumps or different PV systems. In the second image, I grouped my three PV systems together.

image
image523×417 41.7 KB
image
image518×330 28.6 KB

You can also add one or more batteries at the bottom. With one or two batteries, you could use something like the e-car consumer on the grid side to visualize grid consumption as well. So there is a lot of room to get creative and repurpose the bubbles.

Here’s an example showing three solar sources feeding into the house (combined total solar output), and from there charging the battery (this works for me because I have separate sensors for battery charge and discharge). So it always depends a bit on your available sensors.

image
image518×478 35.4 KB

The compact view now includes an additional toggle in the card editor that lets you show detailed values at the bottom.
(All colors are fully customizable, only the detail text color remains grey.)

This makes the compact view much more useful, since you can now see all relevant data at a glance. The in/out values adjust dynamically, so things like grid export, battery charging, or discharging can also appear in the list.

image
image528×226 8.53 KB
image
image443×231 8.42 KB

:rocket: All new features in detail

  • Added option to configure icon, text, and secondary entity for house consumption
  • Added color picker for all secondary entities
  • Added option to display two additional consumers (4 + 5)
  • Added option to display values in kW instead of W (if your sensors use kW)
  • Added option to route battery charging via house consumption
  • Added option to show battery power instead of state of charge (SoC)
  • Added option for more details in compact view
  • CSS improvements
  • Added examples for using card_mod in the README.md

Card_Mod Support

With card_mod, you can now customize the pipes however you like.
Here’s a simple example where the solar pipe is hidden if the power is below 30W:

type: custom:power-flux-card
entities:
  solar: sensor.solar_power
  grid: sensor.grid_power
  house: sensor.house_power
card_mod:
  style: |
    :host {
      --pipe-solar-opacity: {{ 1 if (states('sensor.solar_power') | float(0)) >= 30 else 0 }};
    }

This gives you a lot of flexibility—for example, you could hide the solar pipe when someone rings the doorbell :sweat_smile: or when the power drops below a certain threshold (at 0 it’s invisible, at 0.1 barely visible, and at 1 fully visible).

More card_mod examples can be found on my GitHub:
https://github.com/jayjojayson/power-flux-card?tab=readme-ov-file#available-css-variables

4

seems my label home is not used but is shown as Haus
and also why is my heatpump not shown in the compact card below
both cards have the same config

1000103622
10001036221440×1890 218 KB

5

Hi, that is indeed a bug. I’ve noted it. The secondary entity works perfectly and I am using it, that is probably why I did not notice it.

Currently, the heat pump is not displayed in the compact view. I have already received several requests about this and will improve it in the next release.