Power Flow Card Plus - Modern Edition

🌟 About This Project

This is a modernized and enhanced fork of the original Power Flow Card Plus by flixlix.

Why This Fork?

The original Power Flow Card Plus is an excellent project, but needed updates to work with the latest Home Assistant versions and modern web standards. This fork brings:

✅ Updated for latest Home Assistant - Full compatibility with recent HA versions
✅ Modern codebase - Updated dependencies and improved performance
✅ New features - Arrow customization, custom positioning, daily cost/export tracking
✅ Enhanced editor - Wider modal, better UX, visual editors for positioning and flows
✅ Bug fixes - Resolved issues with infinite re-renders and validation errors
✅ Continued development - Active maintenance and feature additions

🙏 Big thanks to flixlix for creating the original Power Flow Card Plus! This modernized version builds upon their excellent work.

💰 Support the Project

If this integration is useful to you, you can support its development with a Bitcoin donation:

🪙 Bitcoin Address: bc1qhe4ge22x0anuyeg0fmts6rdmz3t735dnqwt3p7

Your contributions help me continue improving this project and adding new features. Thank you! 🙏

✨ New Features in Modern Edition

🎨 Arrow Customization (v0.10.0+)

Customize the appearance and position of energy flow arrows:

Color - Any hex color for each arrow
Thickness - Line width from 0.5 to 10px
Horizontal/Vertical Offset - Position adjustment (-200 to +200px)

Currently available for:

Solar → Home
Grid → Home
Solar → Daily Export

📍 Custom Circle Positioning (v0.8.0+)

Move any circle to a custom position on the card:

Manual positioning with pixel precision
Reset buttons to restore defaults
Visual position editor with current values

💰 Daily Cost & Export Tracking (v0.7.0+)

Daily Cost - Track daily energy costs with real-time tariff integration
Daily Export Revenue - Monitor earnings from grid export
Configurable decimal places and units

🖱️ Enhanced Editor (v0.10.1+)

Wider modal - 90% viewport width (max 1200px)
Real-size preview - See the card as it appears on dashboard
Dedicated editors - Separate pages for positioning, flows, and arrows

📦 Installation

HACS (Manual)

Open HACS
Go to "Frontend"
Click the 3 dots in the top right
Select "Custom repositories"
Add https://github.com/foXaCe/power-flow-card-plus with category "Dashboard"
Click "Install"

Manual Install

Download power-flow-card-plus.js from the latest release
Copy it to your config/www directory
Add the resource reference:

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

Or via UI:

Settings → Dashboards → Resources
Add resource: /local/power-flow-card-plus.js (type: JavaScript Module)

🚀 Quick Start

Minimal Configuration

type: custom:power-flow-card-plus
entities:
  grid:
    entity: sensor.grid_power
  solar:
    entity: sensor.solar_production
  battery:
    entity: sensor.battery_power
    state_of_charge: sensor.battery_soc

Full Example with New Features

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_soc
    display_state: one_way
  home:
    entity: sensor.home_consumption

# Daily Cost Tracking
show_daily_cost: true
daily_cost_energy_entity: sensor.daily_import
cost_entity: sensor.electricity_tariff
cost_decimals: 2

# Daily Export Revenue
show_daily_export: true
daily_export_energy_entity: sensor.daily_export
daily_export_price: 0.11
daily_export_decimals: 2

# Custom Circle Positions
custom_positions:
  solar:
    top: 10
    left: 50
  grid:
    top: 10
    left: -50

# Arrow Customization
arrows:
  solar_to_home:
    color: "#FFA500"
    thickness: 3
    offset_x: 10
  grid_to_home:
    color: "#4285F4"
    thickness: 2.5

# General Settings
watt_threshold: 1000
kw_decimals: 2
w_decimals: 0
clickable_entities: true

🎯 Core Features

All original Power Flow Card Plus features are included:

🎨 UI Editor - Visual configuration without YAML
🌍 Multi-language - 17 languages supported
↕️ Bidirectional Flows - Individual entities with both consumption/production
ℹ️ Secondary Information - Additional info for all circles
⚡ Power Outage Display - Visual indication of grid outages
📙 Template Support - Use Home Assistant templates
🎨 Extensive Customization - Colors, icons, labels, and more

📖 Configuration

Entities Object

Name	Type	Description
`grid`	object	Grid consumption/production entity
`solar`	object	Solar production entity
`battery`	object	Battery charge/discharge and state of charge
`home`	object	Home consumption entity
`individual`	array	Individual device entities (up to 4)
`fossil_fuel_percentage`	object	Low-carbon energy percentage

Card Options

Name	Type	Default	Description
`watt_threshold`	number	0	Watts before converting to kW
`kw_decimals`	number	1	Decimal places for kW
`w_decimals`	number	1	Decimal places for W
`min_flow_rate`	number	0.75	Fastest dot speed (seconds)
`max_flow_rate`	number	6	Slowest dot speed (seconds)
`clickable_entities`	boolean	false	Click entities to open more-info
`disable_dots`	boolean	false	Hide animated dots
`circle_border_width`	number	2	Circle border thickness (1-10px)
`circle_pulse_animation`	boolean	false	Animate circles when energy flows
`circle_gradient_mode`	boolean	false	Use gradient colors for circles

Arrow Customization

arrows:
  solar_to_home:
    color: "#FFA500"
    thickness: 2.5
    offset_x: 10
    offset_y: -5
  grid_to_home:
    color: "#4285F4"
    thickness: 3

Custom Positions

custom_positions:
  solar:
    top: 20      # pixels from default position
    left: 50
  grid:
    top: -10
    left: -30
  battery:
    top: 15
    left: 0

Daily Cost & Export

# Daily Cost
show_daily_cost: true
daily_cost_energy_entity: sensor.daily_energy_import
cost_entity: sensor.current_tariff
cost_unit: "€/kWh"
cost_decimals: 2

# Daily Export Revenue
show_daily_export: true
daily_export_energy_entity: sensor.daily_energy_export
daily_export_price: 0.11
daily_export_decimals: 2

🎨 Visual Editor

Use the built-in visual editors for easy configuration:

Position Editor

Open card editor
Click "Custom Positions"
Enter pixel values or use reset buttons
See default positions as reference

Flows & Appearance Editor

Open card editor
Click "Flows & Appearance"
Adjust animation speed, circle appearance, and display options
Customize individual arrows (color, thickness, position)

🌍 Supported Languages

🇺🇸 English • 🇩🇪 German • 🇫🇷 French • 🇪🇸 Spanish • 🇮🇹 Italian • 🇳🇱 Dutch • 🇵🇹 Portuguese (PT) • 🇧🇷 Portuguese (BR) • 🇵🇱 Polish • 🇷🇺 Russian • 🇫🇮 Finnish • 🇩🇰 Danish • 🇨🇿 Czech • 🇸🇰 Slovak • 🇸🇪 Swedish • 🇺🇦 Ukrainian • 🇮🇳 Hindi

📝 Changelog

See Releases for detailed changelog.

Recent Versions

v0.10.1 - Expanded editor modal for real-size preview
v0.10.0 - Arrow customization (3/7 arrows)
v0.9.4 - Fixed schema validation for arrows
v0.9.0 - Flows & appearance editor
v0.8.5 - Custom position editor fixes
v0.8.0 - Custom circle positioning

🤝 Contributing

Contributions are welcome! This is a community-driven modernization effort.

Fork the repository
Create a feature branch
Make your changes
Submit a pull request

📄 License

ISC License - Same as original project

🙏 Credits

Original Author: flixlix - Created the excellent Power Flow Card Plus that this fork is based on.

Modern Edition: Maintained and enhanced for compatibility with latest Home Assistant versions and modern web standards.

💬 Support & Issues

Issues: GitHub Issues
Discussions: Use GitHub Discussions for questions and feature requests

🔗 Related Projects

Original Power Flow Card Plus by flixlix
Energy Flow Card Plus - For accumulated energy values
Home Assistant Energy Dashboard - Built-in energy management

Made with ❤️ for the Home Assistant community

Name		Name	Last commit message	Last commit date
Latest commit History 916 Commits
.github		.github
__tests__		__tests__
src		src
.editorconfig		.editorconfig
.eslintrc.ts		.eslintrc.ts
.gitignore		.gitignore
.prettierrc		.prettierrc
.releaserc.js		.releaserc.js
AUTO_DETECTION.md		AUTO_DETECTION.md
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
Fichier texte.log		Fichier texte.log
README.md		README.md
TODO.md		TODO.md
babel.config.js		babel.config.js
hacs.json		hacs.json
jest.config.ts		jest.config.ts
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
rollup.config.js		rollup.config.js
tsconfig.json		tsconfig.json

foXaCe/power-flow-card-plus

Folders and files

Latest commit

History

Repository files navigation