power-flux-card

KO | EN

gitlite — search

#hacktoberfest #react #llm #android #deep-learning #linux #docker #nodejs #java #awesome #cli #awesome-list #openai #open-source

power-flux-card

(★ 79)

⚡ Power Flow Card - display your animated Power Flow in HA

파일 탐색기

최종 버전 다운로드 (.zip)

- - build_card.yml
  - release.yml
  - static.yml
  - validate.yml
- FUNDING.yml
- power-flux-card.js
- - power-flow-card_eng.png
  - power-flux-card-ani.gif
  - power-flux-card-compact.jpg
  - power-flux-card-compact2.jpg
  - power-flux-card.jpg
  - power-flux-card1.png
  - power-flux-card2.png
  - power-flux-card3.png
  - power-flux-card4.png
  - power-flux-card5.png
  - power-flux-card6.png
  - power-flux-card7.png
  - power-flux-card_ger.png
- .DS_Store
- CHANGELOG.md
- README-de.md
- lang-de.js
- lang-en.js
- power-flux-card-editor.js
- power-flux-card.js
.DS_Store
build.js
hacs.json
LICENSE
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![hacs_badge](https://img.shields.io/badge/HACS-Custom-blue.svg)](https://github.com/hacs/plugin)
[![HACS validation](https://img.shields.io/github/actions/workflow/status/jayjojayson/power-flux-card/validate.yml?label=HACS%20Validation)](https://github.com/jayjojayson/power-flux-card/actions?query=workflow%3Avalidate)
[![GitHub release](https://img.shields.io/github/release/jayjojayson/power-flux-card?include_prereleases=&sort=semver&color=blue)](https://github.com/jayjojayson/power-flux-card/releases)
![Downloads](https://img.shields.io/github/downloads/jayjojayson/power-flux-card/total?label=Downloads&color=blue)
[![README Deutsch](https://img.shields.io/badge/README-DE-orange)](https://github.com/jayjojayson/power-flux-card/blob/main/docs/README-de.md)
[![Support](https://img.shields.io/badge/%20-Support%20Me-steelblue?style=flat&logo=paypal&logoColor=white)](https://www.paypal.me/quadFlyerFW)
[![Stars](https://img.shields.io/github/stars/jayjojayson/power-flux-card)](https://github.com/jayjojayson/power-flux-card/stargazers)

# Power Flux Card

The ⚡ 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 ⭐ from you. 🤗

### ✨ Features

- **Real-time Animation**: Visualizes energy flow with moving particles.
- **Multiple Sources & Consumers**: Supports Solar, Grid, Battery, and up to 5 additional consumers (e.g., EV, Heater, Pool).
- **Bidirectional Consumers**: Any consumer can act as a producer too — invert its sensor value and the flow reverses into the house (e.g. a second solar/hybrid inverter modeled as a consumer).
- **Multiple Layouts**: Alongside the standard view, choose a horizontal (rotated 90°) or diamond layout (Solar top, Grid left, Battery right, House bottom).
- **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.
  - **Rounded Boxes**: Render the nodes as rounded boxes instead of circles.
- **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](https://img.shields.io/badge/Features-Video%20german-steelblue?style=for-the-badge&logo=youtube&logoColor=white)](https://www.youtube.com/watch?v=HGFBJJRWGW0)

---

### 🚀 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.](https://my.home-assistant.io/badges/hacs_repository.svg)](https://my.home-assistant.io/redirect/hacs_repository/?owner=jayjojayson&repository=power-flux-card&category=plugin)

- 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](../../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

---

### ⚙️ 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 (%).
- **Hide at zero watts**: Optional switch (`show_producer_always`) to hide the Solar and Grid bubbles once they fall back to 0 W, the same way idle consumers already disappear. Enabled by default so existing dashboards keep showing all of them at all times. For the battery, disabling the switch reveals a slider (`battery_hide_soc_threshold`) to hide it below a chosen charge level (%) instead — since the battery node shows the SOC and its power can swing positive/negative around zero.

**Additional Consumers:**
- You can add up to 5 individual consumers (e.g., Car, Heater, Pool) with custom icons and labels.
- **Invert Sensor Value**: Available for every consumer. If the (inverted) value is negative, the flow animation reverses — the consumer feeds the house (e.g. a secondary solar/hybrid inverter).
- **Hide pipe at low power**: Hides only the connecting pipe below an individual watt threshold — the bubble stays visible.
- **Hide standby values**: Optional per-consumer threshold (0–100 W) that treats small readings as 0 W, so devices idling at 1–3 W disappear completely (bubble and pipe).
- Consumers are also shown in the Compact View (evcc) with their configured icons, labels and colors.

**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.
- **Comet Tail / Dashed Line**: Change the flow animation style.
- **Compact View**: Switch to the bar chart layout. Options: details table, neon glow, *Place icons on the bracket line* — the icons move from inside the brackets onto the bracket line and interrupt it — and *Include export in the bar* — when enabled, the export moves into the middle bar as its own segment and solar/battery only show the share actually used in the house.
- **Horizontal / Diamond View**: Alternative layouts for the standard view — rotated 90° (horizontal) or with solar on top, grid left and battery right (diamond).
- **Rounded Boxes**: Render the nodes as rounded boxes instead of circles.
- **Color Options**: Define custom colors for each source and consumer. With the compact view enabled, the battery tab offers two full color rows (charge and discharge), each with bubble, pipe, text, icon and secondary.

> **Color roles in the compact view:** every picker maps to a specific element — **Bubble** = bar segment, **Pipe** = bracket line, **Icon** = symbols, **Text** = value, **Secondary** = label in the details list. The bracket line keeps following the icon color until a pipe color is set explicitly.
- **Grid Import/Export**: Configure separate or combined entities.
- **Invert Grid Value**: For inverters that report export as positive and import as negative.
- **Grid-to-Battery**: Optional direct sensor for Grid-to-Battery flow.
- **Separate Battery Sensors**: Optional separate sensors for battery charge and discharge.
- **Secondary Sensors**: Display alternative values in the main circles (e.g., daily yield, current charge power). Consumers and the house total additionally support a **third sensor** — both share one line separated by ` / ` and use the secondary color.

<details>
   <summary> <b>Custom Colors with card_mod and Jinja2 Templates</b></summary>

With the [card_mod](https://github.com/thomasloven/lovelace-card-mod) integration, you can dynamically override the CSS variables of the Power Flux Card using Jinja2 templates. This allows you to change colors based on sensor values — e.g., green solar icon during production, grey when idle.

### Available CSS Variables

| Variable | Description |
|---|---|
| `--neon-yellow` | Bubble color Solar |
| `--neon-blue` | Bubble color Grid |
| `--neon-green` | Bubble color Battery |
| `--neon-pink` | Bubble color House |
| `--pipe-solar-color` | Pipe color Solar |
| `--pipe-grid-color` | Pipe color Grid |
| `--pipe-battery-color` | Pipe color Battery |
| `--icon-solar-color` | Icon color Solar |
| `--icon-grid-color` | Icon color Grid |
| `--icon-battery-color` | Icon color Battery |
| `--icon-house-color` | Icon color House |
| `--icon-consumer-1-color` | Icon color Consumer 1 |
| `--text-solar-color` | Text color Solar |
| `--text-grid-color` | Text color Grid |
| `--text-battery-color` | Text color Battery |
| `--text-house-color` | Text color House |
| `--text-consumer-1-color` | Text color Consumer 1 |
| `--consumer-1-color` | Bubble color Consumer 1 |
| `--consumer-2-color` | Bubble color Consumer 2 |
| `--consumer-3-color` | Bubble color Consumer 3 |
| `--export-color` | Export base color (grid node while exporting) |
| `--pipe-export-color` | Export pipe color (falls back to `--export-color`) |
| `--text-export-color` | Export value color (falls back to `--export-color`) |
| `--icon-export-color` | Export icon color (falls back to `--export-color`) |
| `--secondary-export-color` | Export label in the compact details list (falls back to `--text-export-color`) |
| `--pipe-solar-opacity` | Pipe opacity Solar (0 = hidden, 1 = visible) |
| `--pipe-grid-opacity` | Pipe opacity Grid (0 = hidden, 1 = visible) |
| `--pipe-battery-opacity` | Pipe opacity Battery (0 = hidden, 1 = visible) |
| `--pipe-consumer-1-opacity` | Pipe opacity Consumer 1 (0 = hidden, 1 = visible) |
| `--pipe-consumer-2-opacity` | Pipe opacity Consumer 2 (0 = hidden, 1 = visible) |
| `--pipe-consumer-3-opacity` | Pipe opacity Consumer 3 (0 = hidden, 1 = visible) |
| `--pipe-consumer-4-opacity` | Pipe opacity Consumer 4 (0 = hidden, 1 = visible) |
| `--pipe-consumer-5-opacity` | Pipe opacity Consumer 5 (0 = hidden, 1 = visible) |
| `--battery-charge-color` | Battery charge, bar segment (compact view) |
| `--pipe-battery-charge-color` | Battery charge, bracket line (compact view) |
| `--text-battery-charge-color` | Battery charge, value text (compact view) |
| `--icon-battery-charge-color` | Battery charge, icon (compact view) |
| `--secondary-battery-charge-color` | Battery charge, details label (compact view) |
| `--battery-discharge-color` | Battery discharge, bar segment (compact view) |
| `--pipe-battery-discharge-color` | Battery discharge, bracket line (compact view) |
| `--text-battery-discharge-color` | Battery discharge, value text (compact view) |
| `--icon-battery-discharge-color` | Battery discharge, icon (compact view) |
| `--secondary-battery-discharge-color` | Battery discharge, details label (compact view) |
| `--font-size-value` | Font size of the main value in the nodes (default 15px, 17px in box mode) |
| `--font-size-label` | Font size of the labels below the icons (default 9px) |
| `--font-size-secondary` | Font size of the secondary sensor value (default 10px, 12px in box mode) |
| `--font-size-secondary-dual` | Font size when the second **and** third sensor share one line (default 8px, 9px in box mode) |
| `--font-size-flow` | Font size of the flow rates on the pipes (default 10px) |
| `--icon-size` | Icon size inside the nodes (default 33px) |
| `--circle-size` | Node diameter, independent of zoom (default 90px) |

> **Note on sizes:** `--font-size-*` and `--icon-size` are purely visual and safe to change. `--circle-size` keeps each node centered on its anchor point, but the pipes always dock at the default 90px rim — small adjustments (roughly 80–100px) look fine, larger ones detach the pipes from the nodes.

**Example: larger text without scaling the whole card** (see Discussion #74)

```yaml
type: custom:power-flux-card
card_mod:
  style: |
    :host {
      --font-size-value: 19px;
      --font-size-secondary: 13px;
      --font-size-flow: 12px;
    }
```

### Example 1: Solar Icon — green during production, grey when idle

```yaml
type: custom:power-flux-card
entities:
  solar: sensor.solar_power
  grid: sensor.grid_power
  battery: sensor.battery_power
  battery_soc: sensor.battery_soc
card_mod:
  style: |
    :host {
      {% if states('sensor.solar_power') | float > 0 %}
        --icon-solar-color: #00ff88 !important;
      {% else %}
        --icon-solar-color: #9e9e9e !important;
      {% endif %}
    }
```

### Example 2: Grid text color — red on export, blue on import

```yaml
type: custom:power-flux-card
entities:
  solar: sensor.solar_power
  grid_combined: sensor.grid_power_combined
  battery: sensor.battery_power
  battery_soc: sensor.battery_soc
card_mod:
  style: |
    :host {
      {% if states('sensor.grid_power_combined') | float < 0 %}
        --text-grid-color: #ff3333 !important;
      {% else %}
        --text-grid-color: #3b82f6 !important;
      {% endif %}
    }
```

### Example 3: Battery bubble — color based on State of Charge (SoC)

```yaml
type: custom:power-flux-card
entities:
  solar: sensor.solar_power
  grid: sensor.grid_power
  battery: sensor.battery_power
  battery_soc: sensor.battery_soc
card_mod:
  style: |
    :host {
      {% set soc = states('sensor.battery_soc') | float %}
      {% if soc > 80 %}
        --neon-green: #00ff88 !important;
      {% elif soc > 30 %}
        --neon-green: #f59e0b !important;
      {% else %}
        --neon-green: #ff3333 !important;
      {% endif %}
    }
```

### Example 4: Consumer 1 pipe — visible only at high power, otherwise transparent

```yaml
type: custom:power-flux-card
entities:
  solar: sensor.solar_power
  grid: sensor.grid_power
  battery: sensor.battery_power
  battery_soc: sensor.battery_soc
  consumer_1: sensor.wallbox_power
card_mod:
  style: |
    :host {
      {% if states('sensor.wallbox_power') | float > 500 %}
        --pipe-consumer-1-color: #a855f7 !important;
        --icon-consumer-1-color: #a855f7 !important;
      {% else %}
        --pipe-consumer-1-color: rgba(168, 85, 247, 0.2) !important;
        --icon-consumer-1-color: #9e9e9e !important;
      {% endif %}
    }
```

### Example 5: Solar pipe — hide below 30 W threshold

Hides the solar pipe when solar power falls below 30 W.

```yaml
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 }};
    }
```

> **Note:** The Power Flux Card uses Shadow DOM (LitElement). Only CSS Custom Properties on `:host` work. The card reads the opacity variables internally and applies them directly to the pipe paths.

### Example 6: Multiple pipes — each hidden individually below 30 W

Hides solar, grid and battery pipes independently as soon as their value falls below 30 W.

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

> **Tip:** `| abs` is used for grid and battery since these sensors can report negative values (export / discharge). The threshold always refers to the absolute value.

### Example 7: All 5 consumer pipes — hide below individual thresholds

Each consumer pipe is controlled independently with its own threshold.

```yaml
type: custom:power-flux-card
entities:
  solar: sensor.solar_power
  grid: sensor.grid_power
  house: sensor.house_power
  consumer_1: sensor.wallbox_power
  consumer_2: sensor.heating_power
  consumer_3: sensor.pool_power
  consumer_4: sensor.dishwasher_power
  consumer_5: sensor.dryer_power
card_mod:
  style: |
    :host {
      --pipe-consumer-1-opacity: {{ 1 if (states('sensor.wallbox_power')    | float(0)) >= 100 else 0 }};
      --pipe-consumer-2-opacity: {{ 1 if (states('sensor.heating_power')    | float(0)) >= 50  else 0 }};
      --pipe-consumer-3-opacity: {{ 1 if (states('sensor.pool_power')       | float(0)) >= 50  else 0 }};
      --pipe-consumer-4-opacity: {{ 1 if (states('sensor.dishwasher_power') | float(0)) >= 30  else 0 }};
      --pipe-consumer-5-opacity: {{ 1 if (states('sensor.dryer_power')      | float(0)) >= 30  else 0 }};
    }
```

> **Note:** Each `--pipe-consumer-X-opacity` controls both the background pipe and the animated flow particles together. Set to `0` to fully hide, `1` to fully show.

> **Note:** card_mod must be installed separately via HACS. Templates are evaluated on every state update, so colors change in real time.
</details>

power-flux-card

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

power-flux-card

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README