root/power-flux-card
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: root:main
Branches Tags
root:main
root:v_2.4
root:v_2.3
root:v_2.2
root:v_2.1
root:v_2.0
..
compare: root:v_2.2
Branches Tags
root:main
root:v_2.4
root:v_2.3
root:v_2.2
root:v_2.1
root:v_2.0

No commits in common. "main" and "v_2.2" have entirely different histories.
main ... v_2.2

8 changed files with 247 additions and 1038 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.github/FUNDING.yml vendored
View file

@ -1,3 +1,2 @@
---
ko_fi: jayjojayson
custom: ["https://www.paypal.me/quadFlyerFW"]

150
README.md
View file

@ -7,7 +7,7 @@
[![Stars](https://img.shields.io/github/stars/jayjojayson/power-flux-card)](https://github.com/jayjojayson/power-flux-card/stargazers)
# Power Flux Card
# 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.
@ -84,151 +84,3 @@ You can configure the card directly via the visual editor in Home Assistant.
- **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.
- **Color Options**: Define custom colors for each source and consumer.
- **Grid Import/Export**: Configure separate or combined entities.
- **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).
<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` | Color for Export |
### 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;
{% else %}
--icon-solar-color: #9e9e9e;
{% 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;
{% else %}
--text-grid-color: #3b82f6;
{% 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;
{% elif soc > 30 %}
--neon-green: #f59e0b;
{% else %}
--neon-green: #ff3333;
{% 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;
--icon-consumer-1-color: #a855f7;
{% else %}
--pipe-consumer-1-color: rgba(168, 85, 247, 0.2);
--icon-consumer-1-color: #9e9e9e;
{% endif %}
}
```
### Example 5: Multiple colors at once — night mode (everything dimmed when Solar = 0)
```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.solar_power') | float == 0 %}
--icon-solar-color: #555555;
--text-solar-color: #777777;
--neon-yellow: #666633;
--pipe-solar-color: #444422;
{% endif %}
}
```
> **Note:** card_mod must be installed separately via HACS. Templates are evaluated on every state update, so colors change in real time.
</details>

493
dist/power-flux-card.js vendored
View file

@ -18,14 +18,14 @@ const lang_de = {
"editor.label_toggle": "Label im Kreis anzeigen",
"editor.compact_view": "Kompakte Ansicht (evcc)",
"editor.hide_inactive": "Inaktive Röhren ausblenden",
"editor.entity": "Kombinierter Batterie Sensor (W)",
"editor.entity": "Entität (Watt)",
"editor.label": "Beschriftung",
"editor.icon": "Icon",
"editor.back": "Zurück",
"editor.battery_soc_label": "Ladestand (%)",
"editor.house_total_title": "🏠 Gesamtverbrauch (optional)",
"editor.house_sensor_label": "Sensor für Hausverbrauch (optional)",
"editor.house_sensor_hint": "Wird benötigt, damit das Haus-Icon anklickbar ist (more-details). Ansonsten wird der Hausverbrauch berechnet.",
"editor.house_sensor_hint": "Wird benötigt, damit das Haus-Icon anklickbar ist (compact view).",
"editor.consumer_1_title": "🚗 Links (Lila)",
"editor.consumer_2_title": "♨️ Mitte (Orange)",
"editor.consumer_3_title": "🏊 Rechts (Türkis)",
@ -39,22 +39,11 @@ const lang_de = {
"editor.hide_consumer_icons": "Icons unten ausblenden",
"editor.invert_consumer_1": "Sensorwert invertieren (+/-)",
"editor.secondary_sensor": "Zweiter Sensor (nur Anzeige)",
"editor.grid_to_battery_sensor": "Netz-zu-Batterie Sensor (W, Optional)",
"editor.grid_to_battery_sensor": "Netz-zu-Batterie Sensor (Watt)",
"editor.grid_to_battery_hint": "Optional: separater Sensor für den Netz-zu-Batterie Fluss. Wenn leer, wird der Wert automatisch berechnet.",
"editor.grid_combined_sensor": "Kombinierter Netz-Sensor (W, Optional)",
"editor.grid_combined_hint": "Ein Sensor für Import UND Export: positiv = Import, negativ = Export. Überschreibt den kombinierten Import/Export Sensor.",
"editor.color_picker": "Bubble",
"editor.pipe_color": "Pipe",
"editor.export_color": "Export",
"editor.consumer_unit_kw": "Sensor meldet in kW",
"editor.show_consumer_always": "Verbraucher bei null Watt anzeigen",
"editor.battery_charge_sensor": "Batterie-Ladung Sensor (W, Optional)",
"editor.battery_discharge_sensor": "Batterie-Entladung Sensor (W, Optional)",
"editor.battery_separate_hint": "Optional: Separate Sensoren für Laden/Entladen. Überschreiben den Hauptsensor für die Berechnung.",
"editor.consumer_1_hide_pipe": "Pipe bei geringer Leistung ausblenden",
"editor.consumer_pipe_threshold": "Pipe-Schwellenwert (Watt)",
"editor.text_color": "Text",
"editor.icon_color": "Icon",
"editor.grid_combined_hint": "Ein Sensor für Import UND Export: positiv = Import, negativ = Export. Überschreibt die getrennten Import/Export Sensoren.",
"editor.color_picker": "Farbe anpassen",
},
card: {
"card.label_solar": "Solar",
@ -62,8 +51,8 @@ const lang_de = {
"card.label_battery": "Batterie",
"card.label_house": "Verbrauch",
"card.label_car": "E-Auto",
"card.label_heater": "Heizung",
"card.label_pool": "Pool",
"card.label_import": "Import",
"card.label_export": "Export",
}
};
const lang_en = {
@ -81,14 +70,14 @@ const lang_en = {
"editor.label_toggle": "Show Label in Bubble",
"editor.compact_view": "Compact View (evcc)",
"editor.hide_inactive": "Hide Inactive Pipes",
"editor.entity": "Combined Battery Sensor (W)",
"editor.entity": "Entity (Watt)",
"editor.label": "Label",
"editor.icon": "Icon",
"editor.back": "Back",
"editor.battery_soc_label": "State of Charge (%)",
"editor.house_total_title": "🏠 Total Consumption (optional)",
"editor.house_sensor_label": "Sensor for House Consumption (optional)",
"editor.house_sensor_hint": "Required to make the house icon clickable (more-details). Otherwise, the house consumption is calculated.",
"editor.house_sensor_hint": "Required to make the house icon clickable (compact view).",
"editor.consumer_1_title": "🚗 Left (Purple)",
"editor.consumer_2_title": "♨️ Center (Orange)",
"editor.consumer_3_title": "🏊 Right (Cyan)",
@ -102,22 +91,11 @@ const lang_en = {
"editor.hide_consumer_icons": "Hide Consumer Icons",
"editor.invert_consumer_1": "Invert Sensor Value (+/-)",
"editor.secondary_sensor": "Secondary Sensor (display only)",
"editor.grid_to_battery_sensor": "Grid to Battery Sensor (W, optional)",
"editor.grid_to_battery_sensor": "Grid to Battery Sensor (Watt)",
"editor.grid_to_battery_hint": "Optional: separate sensor for grid-to-battery flow. If empty, the value is calculated automatically.",
"editor.grid_combined_sensor": "Combined Grid Sensor (W, Optional)",
"editor.grid_combined_hint": "Single sensor for import AND export: positive = import, negative = export. Overrides combined import/export sensor.",
"editor.color_picker": "Bubble Color",
"editor.pipe_color": "Pipe Color",
"editor.export_color": "Export Color",
"editor.consumer_unit_kw": "Sensor reports in kW",
"editor.show_consumer_always": "Show Consumers at zero watts",
"editor.battery_charge_sensor": "Battery Charge Sensor (W, Optional)",
"editor.battery_discharge_sensor": "Battery Discharge Sensor (W, Optional)",
"editor.battery_separate_hint": "Optional: Separate sensors for charge/discharge. Override the main sensor for calculations.",
"editor.consumer_1_hide_pipe": "Hide pipe at low power",
"editor.consumer_pipe_threshold": "Pipe Threshold (Watts)",
"editor.text_color": "Text Color",
"editor.icon_color": "Icon Color",
"editor.grid_combined_hint": "Single sensor for import AND export: positive = import, negative = export. Overrides separate import/export sensors.",
"editor.color_picker": "Custom Color",
},
card: {
"card.label_solar": "Solar",
@ -125,8 +103,8 @@ const lang_en = {
"card.label_battery": "Battery",
"card.label_house": "Consumption",
"card.label_car": "Car",
"card.label_heater": "Heater",
"card.label_pool": "Pool",
"card.label_import": "Import",
"card.label_export": "Export",
}
};
@ -186,7 +164,7 @@ class PowerFluxCardEditor extends LitElement {
if (!this._config || !this.hass) return;
const target = ev.target;
const key = target.configValue;
const key = target.configValue || this._currentConfigValue;
let value;
if (target.tagName === 'HA-SWITCH') {
@ -205,7 +183,6 @@ class PowerFluxCardEditor extends LitElement {
const entityKeys = [
'solar', 'grid', 'grid_export', 'grid_combined',
'battery', 'battery_soc', 'grid_to_battery',
'battery_charge', 'battery_discharge',
'house',
'consumer_1', 'consumer_2', 'consumer_3',
'secondary_solar', 'secondary_grid', 'secondary_battery',
@ -301,34 +278,6 @@ class PowerFluxCardEditor extends LitElement {
`;
}
_renderColorPickerQuad(bubbleKey, pipeKey, textKey, iconKey, defaultColor) {
const items = [
{ key: bubbleKey, label: this._localize('editor.color_picker'), default: defaultColor },
];
if (pipeKey) items.push({ key: pipeKey, label: this._localize('editor.pipe_color'), default: defaultColor });
items.push({ key: textKey, label: this._localize('editor.text_color'), default: defaultColor });
items.push({ key: iconKey, label: this._localize('editor.icon_color'), default: defaultColor });
return html`
<div class="color-picker-quad">
${items.map(item => {
const color = this._config[item.key] || item.default;
const hasCustom = !!this._config[item.key];
return html`
<div class="color-picker-row">
<input type="color"
.value=${color}
@input=${(e) => this._colorChanged(item.key, e)}>
<span class="color-label">${item.label}</span>
${hasCustom ? html`<ha-icon class="color-reset-btn"
icon="mdi:refresh"
@click=${() => this._resetColor(item.key)}></ha-icon>` : ''}
</div>
`;
})}
</div>
`;
}
static get styles() {
return css`
.card-config {
@ -436,8 +385,8 @@ class PowerFluxCardEditor extends LitElement {
-webkit-appearance: none;
border: 2px solid var(--divider-color);
border-radius: 50%;
width: 30px;
height: 30px;
width: 36px;
height: 36px;
padding: 2px;
cursor: pointer;
background: transparent;
@ -461,13 +410,6 @@ class PowerFluxCardEditor extends LitElement {
.color-reset-btn:hover {
color: var(--primary-color);
}
.color-picker-quad {
display: flex;
gap: 8px;
}
.color-picker-quad .color-picker-row {
flex: 1;
}
`;
}
@ -506,7 +448,7 @@ class PowerFluxCardEditor extends LitElement {
${this._renderEntitySelector(entitySelectorSchema, entities.secondary_solar || "", 'secondary_solar', this._localize('editor.secondary_sensor'))}
${this._renderColorPickerQuad('color_solar', 'color_pipe_solar', 'color_text_solar', 'color_icon_solar', '#ffdd00')}
${this._renderColorPicker('color_solar', this._localize('editor.color_picker'), '#ffdd00')}
<div class="separator"></div>
@ -540,13 +482,11 @@ class PowerFluxCardEditor extends LitElement {
</div>
${this._renderEntitySelector(entitySelectorSchema, entities.grid_combined || "", 'grid_combined', this._localize('editor.grid_combined_sensor'))}
<div class="separator"></div>
<div style="font-size: 0.8em; color: var(--secondary-text-color); margin-top: 4px;">
${this._localize('editor.grid_combined_hint')}
</div>
<div class="separator"></div>
${this._renderEntitySelector(entitySelectorSchema, entities.grid, 'grid', this._localize('card.label_import') + " (W)")}
@ -574,9 +514,7 @@ class PowerFluxCardEditor extends LitElement {
${this._renderEntitySelector(entitySelectorSchema, entities.secondary_grid || "", 'secondary_grid', this._localize('editor.secondary_sensor'))}
${this._renderColorPickerQuad('color_grid', 'color_pipe_grid', 'color_text_grid', 'color_icon_grid', '#3b82f6')}
${this._renderColorPicker('color_export', this._localize('editor.export_color'), '#ff3333')}
${this._renderColorPicker('color_grid', this._localize('editor.color_picker'), '#3b82f6')}
<div class="separator"></div>
@ -611,14 +549,13 @@ class PowerFluxCardEditor extends LitElement {
${this._renderEntitySelector(entitySelectorSchema, entities.battery, 'battery', this._localize('editor.entity'))}
<div class="separator"></div>
${this._renderEntitySelector(entitySelectorSchema, entities.battery_soc, 'battery_soc', this._localize('editor.battery_soc_label'))}
${this._renderEntitySelector(entitySelectorSchema, entities.grid_to_battery || "", 'grid_to_battery', this._localize('editor.grid_to_battery_sensor'))}
<div style="font-size: 0.8em; color: var(--secondary-text-color); margin-top: 4px;">
${this._localize('editor.battery_separate_hint')}
${this._localize('editor.grid_to_battery_hint')}
</div>
${this._renderEntitySelector(entitySelectorSchema, entities.battery_charge || "", 'battery_charge', this._localize('editor.battery_charge_sensor'))}
${this._renderEntitySelector(entitySelectorSchema, entities.battery_discharge || "", 'battery_discharge', this._localize('editor.battery_discharge_sensor'))}
<div class="separator"></div>
<ha-selector
@ -639,20 +576,9 @@ class PowerFluxCardEditor extends LitElement {
@value-changed=${this._valueChanged}
></ha-selector>
<div class="separator"></div>
${this._renderEntitySelector(entitySelectorSchema, entities.battery_soc, 'battery_soc', this._localize('editor.battery_soc_label'))}
<div class="separator"></div>
<div style="font-size: 0.8em; color: var(--secondary-text-color); margin-top: 4px;">
${this._localize('editor.grid_to_battery_hint')}
</div>
${this._renderEntitySelector(entitySelectorSchema, entities.grid_to_battery || "", 'grid_to_battery', this._localize('editor.grid_to_battery_sensor'))}
${this._renderEntitySelector(entitySelectorSchema, entities.secondary_battery || "", 'secondary_battery', this._localize('editor.secondary_sensor'))}
${this._renderColorPickerQuad('color_battery', 'color_pipe_battery', 'color_text_battery', 'color_icon_battery', '#00ff88')}
${this._renderColorPicker('color_battery', this._localize('editor.color_picker'), '#00ff88')}
<div class="separator"></div>
@ -700,8 +626,6 @@ class PowerFluxCardEditor extends LitElement {
<div style="font-size: 0.8em; color: var(--secondary-text-color); margin-top: 4px;">
${this._localize('editor.house_sensor_hint')}
</div>
${this._renderColorPickerQuad('color_house', null, 'color_text_house', 'color_icon_house', '#ff0080')}
</div>
<div class="consumer-group">
@ -735,38 +659,9 @@ class PowerFluxCardEditor extends LitElement {
></ha-switch>
</div>
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 8px;">
<span>${this._localize('editor.consumer_1_hide_pipe')}</span>
<ha-switch
.checked=${this._config.consumer_1_hide_pipe === true}
.configValue=${'consumer_1_hide_pipe'}
@change=${this._valueChanged}
></ha-switch>
</div>
${this._config.consumer_1_hide_pipe === true ? html`
<ha-selector
.hass=${this.hass}
.selector=${{ number: { min: 0, max: 2000, step: 10, mode: "slider" } }}
.value=${this._config.consumer_1_pipe_threshold !== undefined ? this._config.consumer_1_pipe_threshold : 0}
.configValue=${'consumer_1_pipe_threshold'}
.label=${this._localize('editor.consumer_pipe_threshold')}
@value-changed=${this._valueChanged}
></ha-selector>
` : ''}
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 8px; margin-bottom: 8px;">
<span>${this._localize('editor.consumer_unit_kw')}</span>
<ha-switch
.checked=${this._config.consumer_1_unit_kw === true}
.configValue=${'consumer_1_unit_kw'}
@change=${this._valueChanged}
></ha-switch>
</div>
${this._renderEntitySelector(entitySelectorSchema, entities.secondary_consumer_1 || "", 'secondary_consumer_1', this._localize('editor.secondary_sensor'))}
${this._renderColorPickerQuad('color_consumer_1', 'color_pipe_consumer_1', 'color_text_consumer_1', 'color_icon_consumer_1', '#a855f7')}
${this._renderColorPicker('color_consumer_1', this._localize('editor.color_picker'), '#a855f7')}
</div>
<div class="consumer-group">
@ -791,18 +686,9 @@ class PowerFluxCardEditor extends LitElement {
@value-changed=${this._valueChanged}
></ha-selector>
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 8px; margin-bottom: 8px;">
<span>${this._localize('editor.consumer_unit_kw')}</span>
<ha-switch
.checked=${this._config.consumer_2_unit_kw === true}
.configValue=${'consumer_2_unit_kw'}
@change=${this._valueChanged}
></ha-switch>
</div>
${this._renderEntitySelector(entitySelectorSchema, entities.secondary_consumer_2 || "", 'secondary_consumer_2', this._localize('editor.secondary_sensor'))}
${this._renderColorPickerQuad('color_consumer_2', 'color_pipe_consumer_2', 'color_text_consumer_2', 'color_icon_consumer_2', '#f97316')}
${this._renderColorPicker('color_consumer_2', this._localize('editor.color_picker'), '#f97316')}
</div>
<div class="consumer-group">
@ -827,18 +713,9 @@ class PowerFluxCardEditor extends LitElement {
@value-changed=${this._valueChanged}
></ha-selector>
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 8px; margin-bottom: 8px;">
<span>${this._localize('editor.consumer_unit_kw')}</span>
<ha-switch
.checked=${this._config.consumer_3_unit_kw === true}
.configValue=${'consumer_3_unit_kw'}
@change=${this._valueChanged}
></ha-switch>
</div>
${this._renderEntitySelector(entitySelectorSchema, entities.secondary_consumer_3 || "", 'secondary_consumer_3', this._localize('editor.secondary_sensor'))}
${this._renderColorPickerQuad('color_consumer_3', 'color_pipe_consumer_3', 'color_text_consumer_3', 'color_icon_consumer_3', '#06b6d4')}
${this._renderColorPicker('color_consumer_3', this._localize('editor.color_picker'), '#06b6d4')}
</div>
`;
}
@ -972,15 +849,6 @@ class PowerFluxCardEditor extends LitElement {
<div class="switch-label">${this._localize('editor.hide_inactive')}</div>
</div>
<div class="switch-row">
<ha-switch
.checked=${this._config.show_consumer_always === true}
.configValue=${'show_consumer_always'}
@change=${this._valueChanged}
></ha-switch>
<div class="switch-label">${this._localize('editor.show_consumer_always')}</div>
</div>
<div class="switch-row">
<ha-switch
.checked=${this._config.compact_view === true}
@ -1003,7 +871,7 @@ customElements.define("power-flux-card-editor", PowerFluxCardEditor);
console.log(
"%c⚡ Power Flux Card v_2.4 ready",
"%c⚡ Power Flux Card v_2.1 ready",
"background: #d19525ff; color: #000; padding: 2px 6px; border-radius: 4px; font-weight: bold;"
);
@ -1040,12 +908,6 @@ console.log(
return {
zoom: 0.9,
compact_view: false,
consumer_1_unit_kw: false,
consumer_2_unit_kw: false,
consumer_3_unit_kw: false,
show_consumer_always: false,
consumer_1_hide_pipe: false,
consumer_1_pipe_threshold: 0,
show_donut_border: false,
show_neon_glow: true,
show_comet_tail: false,
@ -1068,8 +930,6 @@ console.log(
grid_combined: "",
battery: "",
battery_soc: "",
battery_charge: "",
battery_discharge: "",
house: "",
consumer_1: "",
consumer_2: "",
@ -1122,31 +982,9 @@ console.log(
'color_solar': '--neon-yellow',
'color_grid': '--neon-blue',
'color_battery': '--neon-green',
'color_export': '--export-color',
'color_consumer_1': '--consumer-1-color',
'color_consumer_2': '--consumer-2-color',
'color_consumer_3': '--consumer-3-color',
'color_pipe_solar': '--pipe-solar-color',
'color_pipe_grid': '--pipe-grid-color',
'color_pipe_battery': '--pipe-battery-color',
'color_pipe_consumer_1': '--pipe-consumer-1-color',
'color_pipe_consumer_2': '--pipe-consumer-2-color',
'color_pipe_consumer_3': '--pipe-consumer-3-color',
'color_house': '--neon-pink',
'color_icon_solar': '--icon-solar-color',
'color_icon_grid': '--icon-grid-color',
'color_icon_battery': '--icon-battery-color',
'color_icon_house': '--icon-house-color',
'color_icon_consumer_1': '--icon-consumer-1-color',
'color_icon_consumer_2': '--icon-consumer-2-color',
'color_icon_consumer_3': '--icon-consumer-3-color',
'color_text_solar': '--text-solar-color',
'color_text_grid': '--text-grid-color',
'color_text_battery': '--text-battery-color',
'color_text_house': '--text-house-color',
'color_text_consumer_1': '--text-consumer-1-color',
'color_text_consumer_2': '--text-consumer-2-color',
'color_text_consumer_3': '--text-consumer-3-color',
};
for (const [configKey, cssVar] of Object.entries(colorMap)) {
if (this.config[configKey]) {
@ -1174,31 +1012,11 @@ console.log(
--neon-green: #00ff88;
--neon-pink: #ff0080;
--neon-red: #ff3333;
--grid-grey: #9e9e9e;
--export-purple: #a855f7;
--export-color: #ff3333;
--consumer-1-color: #a855f7;
--consumer-2-color: #f97316;
--consumer-3-color: #06b6d4;
--pipe-solar-color: var(--neon-yellow);
--pipe-grid-color: var(--neon-blue);
--pipe-battery-color: var(--neon-green);
--pipe-consumer-1-color: var(--consumer-1-color);
--pipe-consumer-2-color: var(--consumer-2-color);
--pipe-consumer-3-color: var(--consumer-3-color);
--icon-solar-color: var(--neon-yellow);
--icon-grid-color: var(--neon-blue);
--icon-battery-color: var(--neon-green);
--icon-house-color: var(--neon-pink);
--icon-consumer-1-color: var(--consumer-1-color);
--icon-consumer-2-color: var(--consumer-2-color);
--icon-consumer-3-color: var(--consumer-3-color);
--text-solar-color: var(--neon-yellow);
--text-grid-color: var(--neon-blue);
--text-battery-color: var(--neon-green);
--text-house-color: var(--neon-pink);
--text-consumer-1-color: var(--consumer-1-color);
--text-consumer-2-color: var(--consumer-2-color);
--text-consumer-3-color: var(--consumer-3-color);
--flow-dasharray: 0 380;
}
:host([data-theme-light]) {
@ -1207,8 +1025,8 @@ console.log(
--neon-green: #059669;
--neon-pink: #db2777;
--neon-red: #dc2626;
--grid-grey: #6b7280;
--export-purple: #7c3aed;
--export-color: #dc2626;
--consumer-1-color: #7c3aed;
--consumer-2-color: #ea580c;
--consumer-3-color: #0891b2;
@ -1287,6 +1105,11 @@ console.log(
overflow: hidden;
}
/* Source Colors */
.src-solar { background: var(--neon-yellow); color: black; }
.src-grid { background: var(--neon-blue); color: black; }
.src-battery { background: var(--neon-green); color: black; }
/* --- STANDARD VIEW STYLES --- */
.scale-wrapper {
width: 420px;
@ -1317,8 +1140,8 @@ console.log(
.bubble.tinted { background: rgba(255, 255, 255, 0.05); }
.bubble.tinted.solar { background: color-mix(in srgb, var(--neon-yellow), transparent 85%); }
.bubble.tinted.grid { background: color-mix(in srgb, var(--neon-blue), transparent 85%); }
.bubble.tinted.grid.exporting { background: color-mix(in srgb, var(--export-color), transparent 85%); }
.bubble.grid.exporting { border-color: var(--export-color); }
.bubble.tinted.grid.exporting { background: color-mix(in srgb, var(--neon-red), transparent 85%); }
.bubble.grid.exporting { border-color: var(--neon-red); }
.bubble.tinted.battery { background: color-mix(in srgb, var(--neon-green), transparent 85%); }
.bubble.tinted.c1 { background: color-mix(in srgb, var(--consumer-1-color), transparent 85%); }
.bubble.tinted.c2 { background: color-mix(in srgb, var(--consumer-2-color), transparent 85%); }
@ -1334,16 +1157,6 @@ console.log(
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; pointer-events: none;
}
.bubble.grid.donut { border: none !important; background: transparent; }
.bubble.grid.donut.tinted { background: color-mix(in srgb, var(--neon-blue), transparent 85%); }
.bubble.grid.donut.tinted.exporting { background: color-mix(in srgb, var(--export-color), transparent 85%); }
.bubble.grid.donut::before {
content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 4px;
background: var(--grid-gradient, var(--neon-blue));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; pointer-events: none;
}
.icon-svg, .icon-custom {
width: 33px; height: 33px; position: absolute; top: 10px; left: 50%; margin-left: -17px; z-index: 2; display: block;
@ -1384,7 +1197,6 @@ console.log(
.glow.solar { box-shadow: 0 0 15px color-mix(in srgb, var(--neon-yellow), transparent 60%); }
.glow.battery { box-shadow: 0 0 15px color-mix(in srgb, var(--neon-green), transparent 60%); }
.glow.grid { box-shadow: 0 0 15px color-mix(in srgb, var(--neon-blue), transparent 60%); }
.glow.grid.exporting { box-shadow: 0 0 15px color-mix(in srgb, var(--export-color), transparent 60%); }
.glow.c1 { box-shadow: 0 0 15px color-mix(in srgb, var(--consumer-1-color), transparent 60%); }
.glow.c2 { box-shadow: 0 0 15px color-mix(in srgb, var(--consumer-2-color), transparent 60%); }
.glow.c3 { box-shadow: 0 0 15px color-mix(in srgb, var(--consumer-3-color), transparent 60%); }
@ -1400,33 +1212,33 @@ console.log(
svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.bg-path { fill: none; stroke-width: 6; transition: opacity 0.3s ease; }
.bg-solar { stroke: var(--pipe-solar-color); }
.bg-grid { stroke: var(--pipe-grid-color); }
.bg-battery { stroke: var(--pipe-battery-color); }
.bg-export { stroke: var(--export-color); }
.bg-c1 { stroke: var(--pipe-consumer-1-color); }
.bg-c2 { stroke: var(--pipe-consumer-2-color); }
.bg-c3 { stroke: var(--pipe-consumer-3-color); }
.bg-solar { stroke: var(--neon-yellow); }
.bg-grid { stroke: var(--neon-blue); }
.bg-battery { stroke: var(--neon-green); }
.bg-export { stroke: var(--neon-red); }
.bg-c1 { stroke: var(--consumer-1-color); }
.bg-c2 { stroke: var(--consumer-2-color); }
.bg-c3 { stroke: var(--consumer-3-color); }
.flow-line {
fill: none; stroke-width: var(--flow-stroke-width, 8px); stroke-linecap: round; stroke-dasharray: var(--flow-dasharray);
animation: dash linear infinite; opacity: 0; transition: opacity 0.5s;
}
.flow-solar { stroke: var(--pipe-solar-color); }
.flow-grid { stroke: var(--pipe-grid-color); }
.flow-battery { stroke: var(--pipe-battery-color); }
.flow-export { stroke: var(--export-color); }
.flow-solar { stroke: var(--neon-yellow); }
.flow-grid { stroke: var(--neon-blue); }
.flow-battery { stroke: var(--neon-green); }
.flow-export { stroke: var(--neon-red); }
@keyframes dash { to { stroke-dashoffset: -1500; } }
.flow-text {
font-size: 10px; font-weight: bold; text-anchor: middle; fill: #fff; transition: opacity 0.3s ease;
font-size: 10px; font-weight: bold; text-anchor: middle; fill: #fff; filter: transition: opacity 0.3s ease;
}
.flow-text.no-shadow { filter: none; }
.text-solar { fill: var(--pipe-solar-color); }
.text-grid { fill: var(--pipe-grid-color); }
.text-export { fill: var(--export-color); }
.text-battery { fill: var(--pipe-battery-color); }
.text-solar { fill: var(--neon-yellow); }
.text-grid { fill: var(--neon-blue); }
.text-export { fill: var(--neon-red); }
.text-battery { fill: var(--neon-green); }
`;
}
@ -1434,36 +1246,35 @@ console.log(
_renderIcon(type, val = 0, colorOverride = null) {
if (type === 'solar') {
const animate = Math.round(val) > 0 ? 'spin-slow' : '';
const color = colorOverride || 'var(--icon-solar-color)';
const color = colorOverride || 'var(--neon-yellow)';
return html`<svg class="icon-svg ${animate}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>`;
}
if (type === 'grid') {
const animate = Math.round(val) > 0 ? 'pulse' : '';
const color = colorOverride || 'var(--icon-grid-color)';
const color = colorOverride || 'var(--neon-blue)';
return html`<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L12 22"></path><path d="M5 8L19 8"></path><path d="M4 14L20 14"></path><path d="M2 22L22 22"></path><circle class="${animate}" cx="12" cy="4" r="4" fill="${color}" stroke="none"></circle></svg>`;
}
if (type === 'battery') {
const soc = Math.min(Math.max(val, 0), 100) / 100;
const rectHeight = 14 * soc;
const rectY = 18 - rectHeight;
const strokeColor = colorOverride || 'var(--icon-battery-color)';
const rectColor = soc > 0.2 ? strokeColor : 'var(--neon-red)';
return html`<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="${strokeColor}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="12" height="16" rx="2" ry="2"></rect><line x1="10" y1="2" x2="14" y2="2"></line><rect x="7" y="${rectY}" width="10" height="${rectHeight}" fill="${rectColor}" stroke="none"></rect></svg>`;
const rectColor = soc > 0.2 ? 'var(--neon-green)' : 'var(--neon-red)';
return html`<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="var(--neon-green)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="12" height="16" rx="2" ry="2"></rect><line x1="10" y1="2" x2="14" y2="2"></line><rect x="7" y="${rectY}" width="10" height="${rectHeight}" fill="${rectColor}" stroke="none"></rect></svg>`;
}
if (type === 'house') {
const strokeColor = colorOverride || 'var(--icon-house-color)';
const strokeColor = colorOverride || 'var(--neon-pink)';
return html`<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="${strokeColor}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>`;
}
if (type === 'car') {
const c = colorOverride || 'var(--icon-consumer-1-color)';
const c = colorOverride || 'var(--consumer-1-color)';
return html`<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="${c}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"></path><circle cx="7" cy="17" r="2"></circle><circle cx="17" cy="17" r="2"></circle><path d="M14 17h-5"></path></svg>`;
}
if (type === 'heater') {
const c = colorOverride || 'var(--icon-consumer-2-color)';
const c = colorOverride || 'var(--consumer-2-color)';
return html`<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="${c}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20a4 4 0 0 0 4-4V8a4 4 0 0 0-8 0v8a4 4 0 0 0 4 4z"></path><path class="float" style="animation-delay: 0s;" d="M8 4c0-1.5 1-2 2-2s2 .5 2 2"></path><path class="float" style="animation-delay: 0.5s;" d="M14 4c0-1.5 1-2 2-2s2 .5 2 2"></path></svg>`;
}
if (type === 'pool') {
const c = colorOverride || 'var(--icon-consumer-3-color)';
const c = colorOverride || 'var(--consumer-3-color)';
return html`<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="${c}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h20"></path><path class="float" d="M2 16c2.5 0 2.5-2 5-2s2.5 2 5 2 2.5-2 5-2 2.5 2 5 2"></path><path d="M12 2v6"></path><path d="M9 5h6"></path></svg>`;
}
return html``;
@ -1482,11 +1293,6 @@ console.log(
return style.getPropertyValue(`--consumer-${index}-color`).trim() || ['#a855f7', '#f97316', '#06b6d4'][index - 1];
}
_getConsumerPipeColor(index) {
const style = getComputedStyle(this);
return style.getPropertyValue(`--pipe-consumer-${index}-color`).trim() || this._getConsumerColor(index);
}
// --- DOM NODE SVG GENERATOR ---
_renderSVGPath(d, color) {
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
@ -1540,9 +1346,6 @@ console.log(
const state = this.hass.states[entity];
return state ? parseFloat(state.state) || 0 : 0;
};
const getValKw = (entity, isKw) => {
return getVal(entity) * (isKw ? 1000 : 1);
};
const solar = entities.solar ? Math.max(0, getVal(entities.solar)) : 0;
const hasGridCombined = !!(entities.grid_combined && entities.grid_combined !== "");
@ -1553,7 +1356,7 @@ console.log(
if (this.config.invert_battery) {
battery *= -1;
}
let c1Val = entities.consumer_1 ? getValKw(entities.consumer_1, this.config.consumer_1_unit_kw === true) : 0; // EV Value
let c1Val = entities.consumer_1 ? getVal(entities.consumer_1) : 0; // EV Value
if (this.config.invert_consumer_1) { c1Val *= -1; }
c1Val = Math.abs(c1Val);
@ -1573,12 +1376,8 @@ console.log(
gridExport = gridMain < 0 ? Math.abs(gridMain) : 0;
}
// Check for separate battery charge/discharge sensors
const hasBattChargeSensor = !!(entities.battery_charge && entities.battery_charge !== "");
const hasBattDischargeSensor = !!(entities.battery_discharge && entities.battery_discharge !== "");
const batteryCharge = hasBattChargeSensor ? Math.abs(getVal(entities.battery_charge)) : (battery > 0 ? battery : 0);
const batteryDischarge = hasBattDischargeSensor ? Math.abs(getVal(entities.battery_discharge)) : (battery < 0 ? Math.abs(battery) : 0);
const batteryCharge = battery > 0 ? battery : 0;
const batteryDischarge = battery < 0 ? Math.abs(battery) : 0;
let solarToBatt = 0;
let gridToBatt = 0;
@ -1672,9 +1471,9 @@ console.log(
const path = this._createBracketPath(s.startPx, s.widthPx, 'down');
let icon = '';
let iconColor = '';
if (s.type === 'solar') { icon = 'mdi:weather-sunny'; iconColor = 'var(--icon-solar-color)'; }
if (s.type === 'grid') { icon = 'mdi:transmission-tower'; iconColor = 'var(--icon-grid-color)'; }
if (s.type === 'battery') { icon = 'mdi:battery-high'; iconColor = 'var(--icon-battery-color)'; }
if (s.type === 'solar') { icon = 'mdi:weather-sunny'; iconColor = 'var(--neon-yellow)'; }
if (s.type === 'grid') { icon = 'mdi:transmission-tower'; iconColor = 'var(--neon-blue)'; }
if (s.type === 'battery') { icon = 'mdi:battery-high'; iconColor = 'var(--neon-green)'; }
return { path, width: s.widthPx, center: s.startPx + (s.widthPx / 2), icon, iconColor, val: s.val, entityId: s.entityId };
});
@ -1692,10 +1491,10 @@ console.log(
let icon = '';
let iconColor = '';
if (type === 'house') { icon = 'mdi:home'; iconColor = 'var(--icon-house-color)'; }
if (type === 'car') { icon = 'mdi:car-electric'; iconColor = 'var(--icon-consumer-1-color)'; }
if (type === 'export') { icon = 'mdi:arrow-right-box'; iconColor = 'var(--export-color)'; }
if (type === 'battery') { icon = 'mdi:battery-charging-high'; iconColor = 'var(--icon-battery-color)'; }
if (type === 'house') { icon = 'mdi:home'; iconColor = 'var(--primary-text-color)'; }
if (type === 'car') { icon = 'mdi:car-electric'; iconColor = this._getConsumerColor(1); }
if (type === 'export') { icon = 'mdi:arrow-right-box'; iconColor = 'var(--export-purple)'; }
if (type === 'battery') { icon = 'mdi:battery-charging-high'; iconColor = 'var(--neon-green)'; }
const path = this._createBracketPath(bottomX, width, 'up');
bottomBrackets.push({
@ -1738,19 +1537,14 @@ console.log(
<!-- MAIN BAR -->
<div class="compact-bar-wrapper">
${barSegments.map(s => {
const textColor = s.type === 'solar' && this.config.color_text_solar ? 'var(--text-solar-color)'
: s.type === 'grid' && this.config.color_text_grid ? 'var(--text-grid-color)'
: s.type === 'battery' && this.config.color_text_battery ? 'var(--text-battery-color)'
: (s.color === 'var(--export-purple)' ? 'white' : 'black');
return html`
${barSegments.map(s => html`
<div class="bar-segment"
style="width: ${s.widthPct}%; background: ${s.color}; color: ${textColor}; cursor: ${s.entityId ? 'pointer' : 'default'};"
style="width: ${s.widthPct}%; background: ${s.color}; color: ${s.color === 'var(--export-purple)' ? 'white' : 'black'}; cursor: ${s.entityId ? 'pointer' : 'default'};"
title="${this._formatPower(s.val)}"
@click=${() => s.entityId && this._handleClick(s.entityId)}>
${s.widthPx > 35 ? this._formatPower(s.val) : ''}
</div>
`})}
`)}
</div>
<!-- BOTTOM BRACKETS -->
@ -1820,7 +1614,13 @@ console.log(
const val = parseFloat(state.state);
if (isNaN(val)) return state.state + (state.attributes.unit_of_measurement ? ' ' + state.attributes.unit_of_measurement : '');
const unit = state.attributes.unit_of_measurement || '';
if (unit === 'W') { return this._formatPower(val); } if (unit === 'Wh') { if (Math.abs(val) >= 1000) return (val / 1000).toFixed(2) + ' kWh'; return Math.round(val) + ' Wh'; } if (unit === 'kWh' || unit === 'kW') { return val.toFixed(1) + ' ' + unit; } if (unit.includes('EUR') || unit.includes('ct') || unit.includes('€')) { return val.toFixed(2) + ' ' + unit; } return val.toFixed(1) + (unit ? ' ' + unit : '');
if (unit === 'W' || unit === 'Wh') {
return this._formatPower(val);
}
if (unit === 'kWh' || unit === 'kW') {
return val.toFixed(1) + ' ' + unit;
}
return val.toFixed(1) + (unit ? ' ' + unit : '');
};
// Determine existence of main entities
@ -1838,35 +1638,26 @@ console.log(
const textClass = showNeonGlow ? 'flow-text' : 'flow-text no-shadow';
// Custom Labels for Consumers
const labelC1 = this.config.consumer_1_label || this._localize('card.label_car');
const labelC2 = this.config.consumer_2_label || this._localize('card.label_heater');
const labelC3 = this.config.consumer_3_label || this._localize('card.label_pool');
const labelC1 = this.config.consumer_1_label || "E-Auto";
const labelC2 = this.config.consumer_2_label || "Heizung";
const labelC3 = this.config.consumer_3_label || "Pool";
const getVal = (entity) => {
const state = this.hass.states[entity];
return state ? parseFloat(state.state) || 0 : 0;
};
const getValKw = (entity, isKw) => {
return getVal(entity) * (isKw ? 1000 : 1);
};
let c1Val = entities.consumer_1 ? getValKw(entities.consumer_1, this.config.consumer_1_unit_kw === true) : 0;
let c1Val = entities.consumer_1 ? getVal(entities.consumer_1) : 0;
if (this.config.invert_consumer_1) { c1Val *= -1; }
c1Val = Math.abs(c1Val);
const c2Val = entities.consumer_2 ? getValKw(entities.consumer_2, this.config.consumer_2_unit_kw === true) : 0;
const c3Val = entities.consumer_3 ? getValKw(entities.consumer_3, this.config.consumer_3_unit_kw === true) : 0;
const c2Val = entities.consumer_2 ? getVal(entities.consumer_2) : 0;
const c3Val = entities.consumer_3 ? getVal(entities.consumer_3) : 0;
const alwaysShowConsumer = this.config.show_consumer_always === true;
const showC1 = (entities.consumer_1 && (alwaysShowConsumer || Math.round(c1Val) > 0));
const showC2 = (entities.consumer_2 && (alwaysShowConsumer || Math.round(c2Val) > 0));
const showC3 = (entities.consumer_3 && (alwaysShowConsumer || Math.round(c3Val) > 0));
const showC1 = (entities.consumer_1 && Math.round(c1Val) > 0);
const showC2 = (entities.consumer_2 && Math.round(c2Val) > 0);
const showC3 = (entities.consumer_3 && Math.round(c3Val) > 0);
const anyBottomVisible = showC1 || showC2 || showC3;
// Consumer 1 pipe threshold
const hideC1Pipe = this.config.consumer_1_hide_pipe === true;
const c1PipeThreshold = this.config.consumer_1_pipe_threshold || 0;
const c1PipeActive = showC1 && (!hideC1Pipe || c1Val >= c1PipeThreshold);
const solar = hasSolar ? getVal(entities.solar) : 0;
const gridCombinedVal = hasGridCombined ? getVal(entities.grid_combined) : 0;
const gridMain = hasGridCombined ? gridCombinedVal : (hasGrid ? getVal(entities.grid) : 0);
@ -1896,12 +1687,8 @@ console.log(
}
}
// Check for separate battery charge/discharge sensors
const hasBattChargeSensor = !!(entities.battery_charge && entities.battery_charge !== "");
const hasBattDischargeSensor = !!(entities.battery_discharge && entities.battery_discharge !== "");
const batteryCharge = hasBattChargeSensor ? Math.abs(getVal(entities.battery_charge)) : (battery > 0 ? battery : 0);
const batteryDischarge = hasBattDischargeSensor ? Math.abs(getVal(entities.battery_discharge)) : (battery < 0 ? Math.abs(battery) : 0);
const batteryCharge = battery > 0 ? battery : 0;
const batteryDischarge = battery < 0 ? Math.abs(battery) : 0;
let solarToBatt = 0;
let gridToBatt = 0;
@ -1928,9 +1715,6 @@ console.log(
const gridToHouse = Math.max(0, gridImport - gridToBatt);
const house = solarToHouse + gridToHouse + batteryDischarge;
// Use house entity for display if defined, otherwise use calculated value
const houseDisplay = (entities.house && entities.house !== "") ? getVal(entities.house) : house;
const isTopArcActive = (solarToBatt > 0);
const topShift = (isTopArcActive || (!hideInactive && hasSolar && hasBattery)) ? 0 : 50;
let baseHeight = anyBottomVisible ? 480 : 340;
@ -2012,30 +1796,8 @@ console.log(
const isGridActive = Math.round(gridImport) > 0 || Math.round(gridExport) > 0;
const isGridExporting = Math.round(gridExport) > 0 && Math.round(gridImport) === 0;
// --- Grid Donut Gradient ---
let gridGradientVal = '';
if (showDonut && hasGrid && isGridActive) {
const gridTotal = gridToHouse + gridToBatt + gridExport;
if (gridTotal > 0) {
const gPctToHouse = (gridToHouse / gridTotal) * 100;
const gPctToBatt = (gridToBatt / gridTotal) * 100;
const gPctExport = (gridExport / gridTotal) * 100;
let gStops = [];
let gCurrent = 0;
if (gPctToHouse > 0) { gStops.push(`var(--neon-blue) ${gCurrent}% ${gCurrent + gPctToHouse}%`); gCurrent += gPctToHouse; }
if (gPctToBatt > 0) { gStops.push(`var(--neon-green) ${gCurrent}% ${gCurrent + gPctToBatt}%`); gCurrent += gPctToBatt; }
if (gPctExport > 0) { gStops.push(`var(--export-color) ${gCurrent}% ${gCurrent + gPctExport}%`); gCurrent += gPctExport; }
if (gCurrent < 99.9) { gStops.push(`var(--neon-blue) ${gCurrent}% 100%`); }
gridGradientVal = `conic-gradient(from 330deg, ${gStops.join(', ')})`;
} else {
gridGradientVal = isGridExporting ? 'var(--export-color)' : 'var(--neon-blue)';
}
}
const solarColor = isSolarActive ? 'var(--icon-solar-color)' : 'var(--secondary-text-color)';
const gridColor = isGridExporting ? 'var(--export-color)' : (isGridActive ? 'var(--neon-blue)' : 'var(--secondary-text-color)');
const gridIconColor = (isGridActive && this.config.color_icon_grid) ? 'var(--icon-grid-color)' : gridColor;
const gridTextColor = (isGridActive && this.config.color_text_grid) ? 'var(--text-grid-color)' : gridColor;
const solarColor = isSolarActive ? 'var(--neon-yellow)' : 'var(--secondary-text-color)';
const gridColor = isGridExporting ? 'var(--neon-red)' : (isGridActive ? 'var(--neon-blue)' : 'var(--secondary-text-color)');
const getAnimStyle = (val) => {
if (val <= 1) return "opacity: 0;";
@ -2115,24 +1877,27 @@ console.log(
const renderMainIcon = (type, val, customIcon, color = null) => {
if (customIcon) {
const style = color ? `color: ${color};` : (type === 'solar' ? 'color: var(--icon-solar-color);' : (type === 'grid' ? 'color: var(--icon-grid-color);' : (type === 'battery' ? 'color: var(--icon-battery-color);' : (type === 'house' ? 'color: var(--icon-house-color);' : ''))));
const style = color ? `color: ${color};` : (type === 'solar' ? 'color: var(--neon-yellow);' : (type === 'grid' ? 'color: var(--neon-blue);' : (type === 'battery' ? 'color: var(--neon-green);' : '')));
return html`<ha-icon icon="${customIcon}" class="icon-custom" style="${style}"></ha-icon>`;
}
return this._renderIcon(type, val, color);
};
const getCustomClass = (icon) => icon ? 'has-custom-icon' : '';
const renderConsumer = (isVisible, cssClass, configKey, label, iconType, val, hexColor) => {
if (!isVisible) return html``;
const customIcon = this.config[`${configKey}_icon`];
let iconContent;
const iconColorVar = `var(--icon-${configKey.replace(/_/g, '-')}-color)`;
const isCustom = !hideConsumerIcons && !!customIcon;
const dynamicClass = isCustom ? 'has-custom-icon' : '';
if (hideConsumerIcons) {
iconContent = html``;
} else if (customIcon) {
iconContent = html`<ha-icon icon="${customIcon}" class="icon-custom" style="color: ${iconColorVar};"></ha-icon>`;
iconContent = html`<ha-icon icon="${customIcon}" class="icon-custom" style="color: ${hexColor};"></ha-icon>`;
} else {
iconContent = this._renderIcon(iconType, val);
}
@ -2140,16 +1905,12 @@ console.log(
const secEntity = entities[`secondary_${configKey}`];
const hasSecondary = !!(secEntity && secEntity !== "");
const textStyle = this.config[`color_text_${configKey}`]
? `color: var(--text-${configKey.replace(/_/g, '-')}-color);`
: getConsumerColorStyle(hexColor);
return html`
<div class="bubble ${cssClass} ${cssClass.replace('c', 'node-c')} ${tintClass} ${glowClass}"
<div class="bubble ${cssClass} node ${cssClass.replace('c', 'node-c')} ${tintClass} ${dynamicClass} ${glowClass}"
@click=${() => this._handleClick(entities[configKey])}>
${iconContent}
${renderSecondaryOrLabel(label, true, secEntity, hasSecondary)}
<div class="value" style="${textStyle}">${this._formatPower(val)}</div>
<div class="value" style="${getConsumerColorStyle(hexColor)}">${this._formatPower(val)}</div>
</div>
`;
};
@ -2168,20 +1929,13 @@ console.log(
const pathSolarBatt = "M 50 70 Q 210 -20 370 70";
const pathGridImport = "M 210 160 L 210 220";
const pathGridExport = "M 95 115 Q 130 145 165 115";
const pathHouseExport = "M 210 220 L 210 160";
const exportFromSolar = solarVal > 1;
const activeExportPath = exportFromSolar ? pathGridExport : pathHouseExport;
const exportTextX = exportFromSolar ? '130' : '185';
const exportTextY = exportFromSolar ? '145' : '195';
const pathGridToBatt = "M 255 115 Q 290 145 325 115";
const pathBattHouse = "M 370 160 Q 370 265 255 265";
const pathHouseC1 = "M 165 265 Q 50 265 50 370";
const pathHouseC2 = "M 210 310 L 210 370";
const pathHouseC3 = "M 255 265 Q 370 265 370 370";
const houseTextStyle = this.config.color_text_house
? 'color: var(--text-house-color);'
: (houseTextCol ? `color: ${houseTextCol};` : '');
const houseTextStyle = houseTextCol ? `color: ${houseTextCol};` : '';
const dashArrayVal = showTail ? '30 360' : (showDashedLine ? '13 13' : '0 380');
const strokeWidthVal = showDashedLine ? 4 : 8;
@ -2197,33 +1951,33 @@ console.log(
<path class="bg-path bg-solar" d="${pathSolarBatt}" style="${getPipeStyle(solarToBatt)} ${styleSolarBatt}" />
<path class="bg-path bg-grid" d="${pathGridImport}" style="${getPipeStyle(gridToHouse)} ${styleGrid}" />
<path class="bg-path bg-export" d="${activeExportPath}" style="${getPipeStyle(gridExport)} ${styleGrid}" />
<path class="bg-path bg-export" d="${pathGridExport}" style="${getPipeStyle(gridExport)} ${styleGrid}" />
<path class="bg-path bg-grid" d="${pathGridToBatt}" style="${getPipeStyle(gridToBatt)} ${styleGridBatt}" />
<path class="bg-path bg-battery" d="${pathBattHouse}" style="${getPipeStyle(batteryDischarge)} ${styleBattery}" />
<path d="${pathHouseC1}" fill="none" stroke="${this._getConsumerPipeColor(1)}" stroke-width="6" style="${getConsumerPipeStyle(c1PipeActive, c1Val)}" />
<path d="${pathHouseC2}" fill="none" stroke="${this._getConsumerPipeColor(2)}" stroke-width="6" style="${getConsumerPipeStyle(showC2, c2Val)}" />
<path d="${pathHouseC3}" fill="none" stroke="${this._getConsumerPipeColor(3)}" stroke-width="6" style="${getConsumerPipeStyle(showC3, c3Val)}" />
<path d="${pathHouseC1}" fill="none" stroke="${this._getConsumerColor(1)}" stroke-width="6" style="${getConsumerPipeStyle(showC1, c1Val)}" />
<path d="${pathHouseC2}" fill="none" stroke="${this._getConsumerColor(2)}" stroke-width="6" style="${getConsumerPipeStyle(showC2, c2Val)}" />
<path d="${pathHouseC3}" fill="none" stroke="${this._getConsumerColor(3)}" stroke-width="6" style="${getConsumerPipeStyle(showC3, c3Val)}" />
<path class="flow-line flow-solar" d="${pathSolarHouse}" style="${getAnimStyle(solarToHouse)} ${styleSolar}" />
<path class="flow-line flow-solar" d="${pathSolarBatt}" style="${getAnimStyle(solarToBatt)} ${styleSolarBatt}" />
<path class="flow-line flow-grid" d="${pathGridImport}" style="${getAnimStyle(gridToHouse)} ${styleGrid}" />
<path class="flow-line flow-export" d="${activeExportPath}" style="${getAnimStyle(gridExport)} ${styleGrid}" />
<path class="flow-line flow-export" d="${pathGridExport}" style="${getAnimStyle(gridExport)} ${styleGrid}" />
<path class="flow-line flow-grid" d="${pathGridToBatt}" style="${getAnimStyle(gridToBatt)} ${styleGridBatt}" />
<path class="flow-line flow-battery" d="${pathBattHouse}" style="${getAnimStyle(batteryDischarge)} ${styleBattery}" />
<path class="flow-line" d="${pathHouseC1}" stroke="${this._getConsumerPipeColor(1)}" style="${getConsumerAnimStyle(c1PipeActive, c1Val)}" />
<path class="flow-line" d="${pathHouseC2}" stroke="${this._getConsumerPipeColor(2)}" style="${getConsumerAnimStyle(showC2, c2Val)}" />
<path class="flow-line" d="${pathHouseC3}" stroke="${this._getConsumerPipeColor(3)}" style="${getConsumerAnimStyle(showC3, c3Val)}" />
<path class="flow-line" d="${pathHouseC1}" stroke="${this._getConsumerColor(1)}" style="${getConsumerAnimStyle(showC1, c1Val)}" />
<path class="flow-line" d="${pathHouseC2}" stroke="${this._getConsumerColor(2)}" style="${getConsumerAnimStyle(showC2, c2Val)}" />
<path class="flow-line" d="${pathHouseC3}" stroke="${this._getConsumerColor(3)}" style="${getConsumerAnimStyle(showC3, c3Val)}" />
<text x="100" y="235" class="${textClass} text-solar" style="${getTextStyle(solarToHouse, 'solar')} ${styleSolar}">${this._formatPower(solarToHouse)}</text>
<text x="210" y="45" class="${textClass} text-solar" style="${getTextStyle(solarToBatt, 'solar')} ${styleSolarBatt}">${this._formatPower(solarToBatt)}</text>
<text x="235" y="195" class="${textClass} text-grid" style="${getTextStyle(gridToHouse, 'grid')} ${styleGrid}">${this._formatPower(gridToHouse)}</text>
<text x="${exportTextX}" y="${exportTextY}" class="${textClass} text-export" style="${getTextStyle(gridExport, 'grid')} ${styleGrid}">${this._formatPower(gridExport)}</text>
<text x="130" y="145" class="${textClass} text-export" style="${getTextStyle(gridExport, 'grid')} ${styleGrid}">${this._formatPower(gridExport)}</text>
<text x="290" y="145" class="${textClass} text-grid" style="${getTextStyle(gridToBatt, 'grid')} ${styleGridBatt}">${this._formatPower(gridToBatt)}</text>
<text x="320" y="235" class="${textClass} text-battery" style="${getTextStyle(batteryDischarge, 'battery')} ${styleBattery}">${this._formatPower(batteryDischarge)}</text>
@ -2231,39 +1985,38 @@ console.log(
</svg>
${hasSolar ? html`
<div class="bubble ${isSolarActive ? 'solar' : 'inactive'} node-solar ${tintClass} ${isSolarActive ? glowClass : ''}"
<div class="bubble ${isSolarActive ? 'solar' : 'inactive'} node node-solar ${tintClass} ${isSolarActive ? glowClass : ''} ${getCustomClass(iconSolar)}"
@click=${() => this._handleClick(entities.solar)}>
${renderMainIcon('solar', solarVal, iconSolar, solarColor)}
${renderSecondaryOrLabel(labelSolarText, showLabelSolar, entities.secondary_solar, hasSecondarySolar)}
<div class="value" style="${isSolarActive ? (this.config.color_text_solar ? 'color: var(--text-solar-color);' : getColorStyle('--neon-yellow')) : `color: ${solarColor};`}">${this._formatPower(solarVal)}</div>
<div class="value" style="${isSolarActive ? getColorStyle('--neon-yellow') : `color: ${solarColor};`}">${this._formatPower(solarVal)}</div>
</div>` : ''}
${hasGrid ? html`
<div class="bubble ${isGridActive ? (isGridExporting ? 'grid exporting' : 'grid') : 'inactive'} node-grid ${showDonut && isGridActive ? 'donut' : ''} ${tintClass} ${isGridActive ? glowClass : ''}"
style="${showDonut && isGridActive ? `--grid-gradient: ${gridGradientVal};` : ''}"
<div class="bubble ${isGridActive ? (isGridExporting ? 'grid exporting' : 'grid') : 'inactive'} node node-grid ${tintClass} ${isGridActive ? glowClass : ''} ${getCustomClass(iconGrid)}"
@click=${() => this._handleClick(entities.grid_combined || entities.grid)}>
${renderMainIcon('grid', isGridExporting ? gridExport : gridImport, iconGrid, gridIconColor)}
${renderMainIcon('grid', isGridExporting ? gridExport : gridImport, iconGrid, gridColor)}
${renderSecondaryOrLabel(labelGridText, showLabelGrid, entities.secondary_grid, hasSecondaryGrid)}
<div class="value" style="color: ${gridTextColor};">
<div class="value" style="color: ${gridColor};">
${isGridExporting ? html`<span class="direction-arrow">&#9650;</span>` : (isGridActive ? html`<span class="direction-arrow">&#9660;</span>` : '')}
${this._formatPower(isGridExporting ? gridExport : gridImport)}
</div>
</div>` : ''}
${hasBattery ? html`
<div class="bubble battery node-battery ${tintClass} ${glowClass}"
<div class="bubble battery node node-battery ${tintClass} ${glowClass} ${getCustomClass(iconBattery)}"
@click=${() => this._handleClick(entities.battery)}>
${renderMainIcon('battery', battSoc, iconBattery)}
${renderSecondaryOrLabel(labelBatteryText, showLabelBattery, entities.secondary_battery, hasSecondaryBattery)}
<div class="value" style="${this.config.color_text_battery ? 'color: var(--text-battery-color);' : getColorStyle('--neon-green')}">${Math.round(battSoc)}%</div>
<div class="value" style="${getColorStyle('--neon-green')}">${Math.round(battSoc)}%</div>
</div>` : ''}
<div class="bubble house node-house ${showDonut ? 'donut' : ''} ${tintClass}"
<div class="bubble house node node-house ${showDonut ? 'donut' : ''} ${tintClass}"
style="${houseBubbleStyle}"
@click=${() => this._handleClick(entities.house)}>
${renderMainIcon('house', 0, null, this.config.color_icon_house ? 'var(--icon-house-color)' : houseDominantColor)}
${renderMainIcon('house', 0, null, houseDominantColor)}
${renderLabel(labelHouseText, showLabelHouse)}
<div class="value" style="${houseTextStyle}">${this._formatPower(houseDisplay)}</div>
<div class="value" style="${houseTextStyle}">${this._formatPower(house)}</div>
</div>
${renderConsumer(showC1, 'c1', 'consumer_1', labelC1, 'car', c1Val, this._getConsumerColor(1))}

148
docs/README-de.md
View file

@ -86,151 +86,3 @@ Du kannst die Karte direkt über den visuellen Editor in Home Assistant konfigur
- **Donut Chart**: Zeigt den Energiemix als Ring um das Haus an.
- **Kometenschweif / Gestrichelte Linie**: Ändern Sie den Stil der Flussanimation.
- **Kompakte Ansicht**: Wechseln Sie zum Balkendiagramm-Layout.
- **Farboptionen**: Definieren Sie benutzerdefinierte Farben für jede Quelle und Verbraucher.
- **Netz-Import/Export**: Konfigurieren Sie separate oder kombinierte Entitäten.
- **Netz-zu-Batterie**: Optionaler direkter Sensor für den Netz-zu-Batterie-Fluss.
- **Batterie getrennte Sensoren**: Optional separate Sensoren für Batterie-Ladung und -Entladung.
- **Sekundäre Sensoren**: Zeigen Sie alternative Werte in den Hauptkreisen an (z.B. Tagesertrag, aktuelle Ladeleistung).
<details>
<summary> <b>Custom Farben mit card_mod und Jinja2 Templates</b></summary>
Mit der [card_mod](https://github.com/thomasloven/lovelace-card-mod) Integration können die CSS-Variablen der Power Flux Card dynamisch per Jinja2-Templates überschrieben werden. So lassen sich Farben abhängig von Sensorwerten ändern — z.B. Solar-Icon grün bei Produktion, grau bei Stillstand.
### Verfügbare CSS-Variablen
| Variable | Beschreibung |
|---|---|
| `--neon-yellow` | Bubble-Farbe Solar |
| `--neon-blue` | Bubble-Farbe Grid |
| `--neon-green` | Bubble-Farbe Batterie |
| `--neon-pink` | Bubble-Farbe Haus |
| `--pipe-solar-color` | Pipe-Farbe Solar |
| `--pipe-grid-color` | Pipe-Farbe Grid |
| `--pipe-battery-color` | Pipe-Farbe Batterie |
| `--icon-solar-color` | Icon-Farbe Solar |
| `--icon-grid-color` | Icon-Farbe Grid |
| `--icon-battery-color` | Icon-Farbe Batterie |
| `--icon-house-color` | Icon-Farbe Haus |
| `--icon-consumer-1-color` | Icon-Farbe Consumer 1 |
| `--text-solar-color` | Text-Farbe Solar |
| `--text-grid-color` | Text-Farbe Grid |
| `--text-battery-color` | Text-Farbe Batterie |
| `--text-house-color` | Text-Farbe Haus |
| `--text-consumer-1-color` | Text-Farbe Consumer 1 |
| `--consumer-1-color` | Bubble-Farbe Consumer 1 |
| `--consumer-2-color` | Bubble-Farbe Consumer 2 |
| `--consumer-3-color` | Bubble-Farbe Consumer 3 |
| `--export-color` | Farbe für Export |
### Beispiel 1: Solar-Icon — grün bei Produktion, grau bei Stillstand
```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;
{% else %}
--icon-solar-color: #9e9e9e;
{% endif %}
}
```
### Beispiel 2: Grid-Textfarbe — rot bei Export, blau bei 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;
{% else %}
--text-grid-color: #3b82f6;
{% endif %}
}
```
### Beispiel 3: Batterie-Bubble — Farbe nach Ladestand (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;
{% elif soc > 30 %}
--neon-green: #f59e0b;
{% else %}
--neon-green: #ff3333;
{% endif %}
}
```
### Beispiel 4: Consumer-1-Pipe — sichtbar nur bei hoher Leistung, sonst 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;
--icon-consumer-1-color: #a855f7;
{% else %}
--pipe-consumer-1-color: rgba(168, 85, 247, 0.2);
--icon-consumer-1-color: #9e9e9e;
{% endif %}
}
```
### Beispiel 5: Mehrere Farben gleichzeitig — Nachtmodus (alles gedimmt wenn Solar = 0)
```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.solar_power') | float == 0 %}
--icon-solar-color: #555555;
--text-solar-color: #777777;
--neon-yellow: #666633;
--pipe-solar-color: #444422;
{% endif %}
}
```
> **Hinweis:** card_mod muss separat über HACS installiert werden. Die Templates werden bei jedem State-Update ausgewertet, die Farben ändern sich also in Echtzeit.
</details>

25
src/lang-de.js
View file

@ -13,14 +13,14 @@ export default {
"editor.label_toggle": "Label im Kreis anzeigen",
"editor.compact_view": "Kompakte Ansicht (evcc)",
"editor.hide_inactive": "Inaktive Röhren ausblenden",
"editor.entity": "Kombinierter Batterie Sensor (W)",
"editor.entity": "Entität (Watt)",
"editor.label": "Beschriftung",
"editor.icon": "Icon",
"editor.back": "Zurück",
"editor.battery_soc_label": "Ladestand (%)",
"editor.house_total_title": "🏠 Gesamtverbrauch (optional)",
"editor.house_sensor_label": "Sensor für Hausverbrauch (optional)",
"editor.house_sensor_hint": "Wird benötigt, damit das Haus-Icon anklickbar ist (more-details). Ansonsten wird der Hausverbrauch berechnet.",
"editor.house_sensor_hint": "Wird benötigt, damit das Haus-Icon anklickbar ist (compact view).",
"editor.consumer_1_title": "🚗 Links (Lila)",
"editor.consumer_2_title": "♨️ Mitte (Orange)",
"editor.consumer_3_title": "🏊 Rechts (Türkis)",
@ -34,22 +34,11 @@ export default {
"editor.hide_consumer_icons": "Icons unten ausblenden",
"editor.invert_consumer_1": "Sensorwert invertieren (+/-)",
"editor.secondary_sensor": "Zweiter Sensor (nur Anzeige)",
"editor.grid_to_battery_sensor": "Netz-zu-Batterie Sensor (W, Optional)",
"editor.grid_to_battery_sensor": "Netz-zu-Batterie Sensor (Watt)",
"editor.grid_to_battery_hint": "Optional: separater Sensor für den Netz-zu-Batterie Fluss. Wenn leer, wird der Wert automatisch berechnet.",
"editor.grid_combined_sensor": "Kombinierter Netz-Sensor (W, Optional)",
"editor.grid_combined_hint": "Ein Sensor für Import UND Export: positiv = Import, negativ = Export. Überschreibt den kombinierten Import/Export Sensor.",
"editor.color_picker": "Bubble",
"editor.pipe_color": "Pipe",
"editor.export_color": "Export",
"editor.consumer_unit_kw": "Sensor meldet in kW",
"editor.show_consumer_always": "Verbraucher bei null Watt anzeigen",
"editor.battery_charge_sensor": "Batterie-Ladung Sensor (W, Optional)",
"editor.battery_discharge_sensor": "Batterie-Entladung Sensor (W, Optional)",
"editor.battery_separate_hint": "Optional: Separate Sensoren für Laden/Entladen. Überschreiben den Hauptsensor für die Berechnung.",
"editor.consumer_1_hide_pipe": "Pipe bei geringer Leistung ausblenden",
"editor.consumer_pipe_threshold": "Pipe-Schwellenwert (Watt)",
"editor.text_color": "Text",
"editor.icon_color": "Icon",
"editor.grid_combined_hint": "Ein Sensor für Import UND Export: positiv = Import, negativ = Export. Überschreibt die getrennten Import/Export Sensoren.",
"editor.color_picker": "Farbe anpassen",
},
card: {
"card.label_solar": "Solar",
@ -57,7 +46,7 @@ export default {
"card.label_battery": "Batterie",
"card.label_house": "Verbrauch",
"card.label_car": "E-Auto",
"card.label_heater": "Heizung",
"card.label_pool": "Pool",
"card.label_import": "Import",
"card.label_export": "Export",
}
};

25
src/lang-en.js
View file

@ -13,14 +13,14 @@ export default {
"editor.label_toggle": "Show Label in Bubble",
"editor.compact_view": "Compact View (evcc)",
"editor.hide_inactive": "Hide Inactive Pipes",
"editor.entity": "Combined Battery Sensor (W)",
"editor.entity": "Entity (Watt)",
"editor.label": "Label",
"editor.icon": "Icon",
"editor.back": "Back",
"editor.battery_soc_label": "State of Charge (%)",
"editor.house_total_title": "🏠 Total Consumption (optional)",
"editor.house_sensor_label": "Sensor for House Consumption (optional)",
"editor.house_sensor_hint": "Required to make the house icon clickable (more-details). Otherwise, the house consumption is calculated.",
"editor.house_sensor_hint": "Required to make the house icon clickable (compact view).",
"editor.consumer_1_title": "🚗 Left (Purple)",
"editor.consumer_2_title": "♨️ Center (Orange)",
"editor.consumer_3_title": "🏊 Right (Cyan)",
@ -34,22 +34,11 @@ export default {
"editor.hide_consumer_icons": "Hide Consumer Icons",
"editor.invert_consumer_1": "Invert Sensor Value (+/-)",
"editor.secondary_sensor": "Secondary Sensor (display only)",
"editor.grid_to_battery_sensor": "Grid to Battery Sensor (W, optional)",
"editor.grid_to_battery_sensor": "Grid to Battery Sensor (Watt)",
"editor.grid_to_battery_hint": "Optional: separate sensor for grid-to-battery flow. If empty, the value is calculated automatically.",
"editor.grid_combined_sensor": "Combined Grid Sensor (W, Optional)",
"editor.grid_combined_hint": "Single sensor for import AND export: positive = import, negative = export. Overrides combined import/export sensor.",
"editor.color_picker": "Bubble Color",
"editor.pipe_color": "Pipe Color",
"editor.export_color": "Export Color",
"editor.consumer_unit_kw": "Sensor reports in kW",
"editor.show_consumer_always": "Show Consumers at zero watts",
"editor.battery_charge_sensor": "Battery Charge Sensor (W, Optional)",
"editor.battery_discharge_sensor": "Battery Discharge Sensor (W, Optional)",
"editor.battery_separate_hint": "Optional: Separate sensors for charge/discharge. Override the main sensor for calculations.",
"editor.consumer_1_hide_pipe": "Hide pipe at low power",
"editor.consumer_pipe_threshold": "Pipe Threshold (Watts)",
"editor.text_color": "Text Color",
"editor.icon_color": "Icon Color",
"editor.grid_combined_hint": "Single sensor for import AND export: positive = import, negative = export. Overrides separate import/export sensors.",
"editor.color_picker": "Custom Color",
},
card: {
"card.label_solar": "Solar",
@ -57,7 +46,7 @@ export default {
"card.label_battery": "Battery",
"card.label_house": "Consumption",
"card.label_car": "Car",
"card.label_heater": "Heater",
"card.label_pool": "Pool",
"card.label_import": "Import",
"card.label_export": "Export",
}
};

138
src/power-flux-card-editor.js
View file

@ -48,7 +48,7 @@ class PowerFluxCardEditor extends LitElement {
if (!this._config || !this.hass) return;
const target = ev.target;
const key = target.configValue;
const key = target.configValue || this._currentConfigValue;
let value;
if (target.tagName === 'HA-SWITCH') {
@ -67,7 +67,6 @@ class PowerFluxCardEditor extends LitElement {
const entityKeys = [
'solar', 'grid', 'grid_export', 'grid_combined',
'battery', 'battery_soc', 'grid_to_battery',
'battery_charge', 'battery_discharge',
'house',
'consumer_1', 'consumer_2', 'consumer_3',
'secondary_solar', 'secondary_grid', 'secondary_battery',
@ -163,34 +162,6 @@ class PowerFluxCardEditor extends LitElement {
`;
}
_renderColorPickerQuad(bubbleKey, pipeKey, textKey, iconKey, defaultColor) {
const items = [
{ key: bubbleKey, label: this._localize('editor.color_picker'), default: defaultColor },
];
if (pipeKey) items.push({ key: pipeKey, label: this._localize('editor.pipe_color'), default: defaultColor });
items.push({ key: textKey, label: this._localize('editor.text_color'), default: defaultColor });
items.push({ key: iconKey, label: this._localize('editor.icon_color'), default: defaultColor });
return html`
<div class="color-picker-quad">
${items.map(item => {
const color = this._config[item.key] || item.default;
const hasCustom = !!this._config[item.key];
return html`
<div class="color-picker-row">
<input type="color"
.value=${color}
@input=${(e) => this._colorChanged(item.key, e)}>
<span class="color-label">${item.label}</span>
${hasCustom ? html`<ha-icon class="color-reset-btn"
icon="mdi:refresh"
@click=${() => this._resetColor(item.key)}></ha-icon>` : ''}
</div>
`;
})}
</div>
`;
}
static get styles() {
return css`
.card-config {
@ -298,8 +269,8 @@ class PowerFluxCardEditor extends LitElement {
-webkit-appearance: none;
border: 2px solid var(--divider-color);
border-radius: 50%;
width: 30px;
height: 30px;
width: 36px;
height: 36px;
padding: 2px;
cursor: pointer;
background: transparent;
@ -323,13 +294,6 @@ class PowerFluxCardEditor extends LitElement {
.color-reset-btn:hover {
color: var(--primary-color);
}
.color-picker-quad {
display: flex;
gap: 8px;
}
.color-picker-quad .color-picker-row {
flex: 1;
}
`;
}
@ -368,7 +332,7 @@ class PowerFluxCardEditor extends LitElement {
${this._renderEntitySelector(entitySelectorSchema, entities.secondary_solar || "", 'secondary_solar', this._localize('editor.secondary_sensor'))}
${this._renderColorPickerQuad('color_solar', 'color_pipe_solar', 'color_text_solar', 'color_icon_solar', '#ffdd00')}
${this._renderColorPicker('color_solar', this._localize('editor.color_picker'), '#ffdd00')}
<div class="separator"></div>
@ -402,13 +366,11 @@ class PowerFluxCardEditor extends LitElement {
</div>
${this._renderEntitySelector(entitySelectorSchema, entities.grid_combined || "", 'grid_combined', this._localize('editor.grid_combined_sensor'))}
<div class="separator"></div>
<div style="font-size: 0.8em; color: var(--secondary-text-color); margin-top: 4px;">
${this._localize('editor.grid_combined_hint')}
</div>
<div class="separator"></div>
${this._renderEntitySelector(entitySelectorSchema, entities.grid, 'grid', this._localize('card.label_import') + " (W)")}
@ -436,9 +398,7 @@ class PowerFluxCardEditor extends LitElement {
${this._renderEntitySelector(entitySelectorSchema, entities.secondary_grid || "", 'secondary_grid', this._localize('editor.secondary_sensor'))}
${this._renderColorPickerQuad('color_grid', 'color_pipe_grid', 'color_text_grid', 'color_icon_grid', '#3b82f6')}
${this._renderColorPicker('color_export', this._localize('editor.export_color'), '#ff3333')}
${this._renderColorPicker('color_grid', this._localize('editor.color_picker'), '#3b82f6')}
<div class="separator"></div>
@ -473,14 +433,13 @@ class PowerFluxCardEditor extends LitElement {
${this._renderEntitySelector(entitySelectorSchema, entities.battery, 'battery', this._localize('editor.entity'))}
<div class="separator"></div>
${this._renderEntitySelector(entitySelectorSchema, entities.battery_soc, 'battery_soc', this._localize('editor.battery_soc_label'))}
${this._renderEntitySelector(entitySelectorSchema, entities.grid_to_battery || "", 'grid_to_battery', this._localize('editor.grid_to_battery_sensor'))}
<div style="font-size: 0.8em; color: var(--secondary-text-color); margin-top: 4px;">
${this._localize('editor.battery_separate_hint')}
${this._localize('editor.grid_to_battery_hint')}
</div>
${this._renderEntitySelector(entitySelectorSchema, entities.battery_charge || "", 'battery_charge', this._localize('editor.battery_charge_sensor'))}
${this._renderEntitySelector(entitySelectorSchema, entities.battery_discharge || "", 'battery_discharge', this._localize('editor.battery_discharge_sensor'))}
<div class="separator"></div>
<ha-selector
@ -501,20 +460,9 @@ class PowerFluxCardEditor extends LitElement {
@value-changed=${this._valueChanged}
></ha-selector>
<div class="separator"></div>
${this._renderEntitySelector(entitySelectorSchema, entities.battery_soc, 'battery_soc', this._localize('editor.battery_soc_label'))}
<div class="separator"></div>
<div style="font-size: 0.8em; color: var(--secondary-text-color); margin-top: 4px;">
${this._localize('editor.grid_to_battery_hint')}
</div>
${this._renderEntitySelector(entitySelectorSchema, entities.grid_to_battery || "", 'grid_to_battery', this._localize('editor.grid_to_battery_sensor'))}
${this._renderEntitySelector(entitySelectorSchema, entities.secondary_battery || "", 'secondary_battery', this._localize('editor.secondary_sensor'))}
${this._renderColorPickerQuad('color_battery', 'color_pipe_battery', 'color_text_battery', 'color_icon_battery', '#00ff88')}
${this._renderColorPicker('color_battery', this._localize('editor.color_picker'), '#00ff88')}
<div class="separator"></div>
@ -562,8 +510,6 @@ class PowerFluxCardEditor extends LitElement {
<div style="font-size: 0.8em; color: var(--secondary-text-color); margin-top: 4px;">
${this._localize('editor.house_sensor_hint')}
</div>
${this._renderColorPickerQuad('color_house', null, 'color_text_house', 'color_icon_house', '#ff0080')}
</div>
<div class="consumer-group">
@ -597,38 +543,9 @@ class PowerFluxCardEditor extends LitElement {
></ha-switch>
</div>
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 8px;">
<span>${this._localize('editor.consumer_1_hide_pipe')}</span>
<ha-switch
.checked=${this._config.consumer_1_hide_pipe === true}
.configValue=${'consumer_1_hide_pipe'}
@change=${this._valueChanged}
></ha-switch>
</div>
${this._config.consumer_1_hide_pipe === true ? html`
<ha-selector
.hass=${this.hass}
.selector=${{ number: { min: 0, max: 2000, step: 10, mode: "slider" } }}
.value=${this._config.consumer_1_pipe_threshold !== undefined ? this._config.consumer_1_pipe_threshold : 0}
.configValue=${'consumer_1_pipe_threshold'}
.label=${this._localize('editor.consumer_pipe_threshold')}
@value-changed=${this._valueChanged}
></ha-selector>
` : ''}
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 8px; margin-bottom: 8px;">
<span>${this._localize('editor.consumer_unit_kw')}</span>
<ha-switch
.checked=${this._config.consumer_1_unit_kw === true}
.configValue=${'consumer_1_unit_kw'}
@change=${this._valueChanged}
></ha-switch>
</div>
${this._renderEntitySelector(entitySelectorSchema, entities.secondary_consumer_1 || "", 'secondary_consumer_1', this._localize('editor.secondary_sensor'))}
${this._renderColorPickerQuad('color_consumer_1', 'color_pipe_consumer_1', 'color_text_consumer_1', 'color_icon_consumer_1', '#a855f7')}
${this._renderColorPicker('color_consumer_1', this._localize('editor.color_picker'), '#a855f7')}
</div>
<div class="consumer-group">
@ -653,18 +570,9 @@ class PowerFluxCardEditor extends LitElement {
@value-changed=${this._valueChanged}
></ha-selector>
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 8px; margin-bottom: 8px;">
<span>${this._localize('editor.consumer_unit_kw')}</span>
<ha-switch
.checked=${this._config.consumer_2_unit_kw === true}
.configValue=${'consumer_2_unit_kw'}
@change=${this._valueChanged}
></ha-switch>
</div>
${this._renderEntitySelector(entitySelectorSchema, entities.secondary_consumer_2 || "", 'secondary_consumer_2', this._localize('editor.secondary_sensor'))}
${this._renderColorPickerQuad('color_consumer_2', 'color_pipe_consumer_2', 'color_text_consumer_2', 'color_icon_consumer_2', '#f97316')}
${this._renderColorPicker('color_consumer_2', this._localize('editor.color_picker'), '#f97316')}
</div>
<div class="consumer-group">
@ -689,18 +597,9 @@ class PowerFluxCardEditor extends LitElement {
@value-changed=${this._valueChanged}
></ha-selector>
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 8px; margin-bottom: 8px;">
<span>${this._localize('editor.consumer_unit_kw')}</span>
<ha-switch
.checked=${this._config.consumer_3_unit_kw === true}
.configValue=${'consumer_3_unit_kw'}
@change=${this._valueChanged}
></ha-switch>
</div>
${this._renderEntitySelector(entitySelectorSchema, entities.secondary_consumer_3 || "", 'secondary_consumer_3', this._localize('editor.secondary_sensor'))}
${this._renderColorPickerQuad('color_consumer_3', 'color_pipe_consumer_3', 'color_text_consumer_3', 'color_icon_consumer_3', '#06b6d4')}
${this._renderColorPicker('color_consumer_3', this._localize('editor.color_picker'), '#06b6d4')}
</div>
`;
}
@ -834,15 +733,6 @@ class PowerFluxCardEditor extends LitElement {
<div class="switch-label">${this._localize('editor.hide_inactive')}</div>
</div>
<div class="switch-row">
<ha-switch
.checked=${this._config.show_consumer_always === true}
.configValue=${'show_consumer_always'}
@change=${this._valueChanged}
></ha-switch>
<div class="switch-label">${this._localize('editor.show_consumer_always')}</div>
</div>
<div class="switch-row">
<ha-switch
.checked=${this._config.compact_view === true}

305
src/power-flux-card.js
View file

@ -3,7 +3,7 @@ import lang_en from "./lang-en.js";
import lang_de from "./lang-de.js";
console.log(
"%c⚡ Power Flux Card v_2.4 ready",
"%c⚡ Power Flux Card v_2.1 ready",
"background: #d19525ff; color: #000; padding: 2px 6px; border-radius: 4px; font-weight: bold;"
);
@ -40,12 +40,6 @@ console.log(
return {
zoom: 0.9,
compact_view: false,
consumer_1_unit_kw: false,
consumer_2_unit_kw: false,
consumer_3_unit_kw: false,
show_consumer_always: false,
consumer_1_hide_pipe: false,
consumer_1_pipe_threshold: 0,
show_donut_border: false,
show_neon_glow: true,
show_comet_tail: false,
@ -68,8 +62,6 @@ console.log(
grid_combined: "",
battery: "",
battery_soc: "",
battery_charge: "",
battery_discharge: "",
house: "",
consumer_1: "",
consumer_2: "",
@ -122,31 +114,9 @@ console.log(
'color_solar': '--neon-yellow',
'color_grid': '--neon-blue',
'color_battery': '--neon-green',
'color_export': '--export-color',
'color_consumer_1': '--consumer-1-color',
'color_consumer_2': '--consumer-2-color',
'color_consumer_3': '--consumer-3-color',
'color_pipe_solar': '--pipe-solar-color',
'color_pipe_grid': '--pipe-grid-color',
'color_pipe_battery': '--pipe-battery-color',
'color_pipe_consumer_1': '--pipe-consumer-1-color',
'color_pipe_consumer_2': '--pipe-consumer-2-color',
'color_pipe_consumer_3': '--pipe-consumer-3-color',
'color_house': '--neon-pink',
'color_icon_solar': '--icon-solar-color',
'color_icon_grid': '--icon-grid-color',
'color_icon_battery': '--icon-battery-color',
'color_icon_house': '--icon-house-color',
'color_icon_consumer_1': '--icon-consumer-1-color',
'color_icon_consumer_2': '--icon-consumer-2-color',
'color_icon_consumer_3': '--icon-consumer-3-color',
'color_text_solar': '--text-solar-color',
'color_text_grid': '--text-grid-color',
'color_text_battery': '--text-battery-color',
'color_text_house': '--text-house-color',
'color_text_consumer_1': '--text-consumer-1-color',
'color_text_consumer_2': '--text-consumer-2-color',
'color_text_consumer_3': '--text-consumer-3-color',
};
for (const [configKey, cssVar] of Object.entries(colorMap)) {
if (this.config[configKey]) {
@ -174,31 +144,11 @@ console.log(
--neon-green: #00ff88;
--neon-pink: #ff0080;
--neon-red: #ff3333;
--grid-grey: #9e9e9e;
--export-purple: #a855f7;
--export-color: #ff3333;
--consumer-1-color: #a855f7;
--consumer-2-color: #f97316;
--consumer-3-color: #06b6d4;
--pipe-solar-color: var(--neon-yellow);
--pipe-grid-color: var(--neon-blue);
--pipe-battery-color: var(--neon-green);
--pipe-consumer-1-color: var(--consumer-1-color);
--pipe-consumer-2-color: var(--consumer-2-color);
--pipe-consumer-3-color: var(--consumer-3-color);
--icon-solar-color: var(--neon-yellow);
--icon-grid-color: var(--neon-blue);
--icon-battery-color: var(--neon-green);
--icon-house-color: var(--neon-pink);
--icon-consumer-1-color: var(--consumer-1-color);
--icon-consumer-2-color: var(--consumer-2-color);
--icon-consumer-3-color: var(--consumer-3-color);
--text-solar-color: var(--neon-yellow);
--text-grid-color: var(--neon-blue);
--text-battery-color: var(--neon-green);
--text-house-color: var(--neon-pink);
--text-consumer-1-color: var(--consumer-1-color);
--text-consumer-2-color: var(--consumer-2-color);
--text-consumer-3-color: var(--consumer-3-color);
--flow-dasharray: 0 380;
}
:host([data-theme-light]) {
@ -207,8 +157,8 @@ console.log(
--neon-green: #059669;
--neon-pink: #db2777;
--neon-red: #dc2626;
--grid-grey: #6b7280;
--export-purple: #7c3aed;
--export-color: #dc2626;
--consumer-1-color: #7c3aed;
--consumer-2-color: #ea580c;
--consumer-3-color: #0891b2;
@ -287,6 +237,11 @@ console.log(
overflow: hidden;
}
/* Source Colors */
.src-solar { background: var(--neon-yellow); color: black; }
.src-grid { background: var(--neon-blue); color: black; }
.src-battery { background: var(--neon-green); color: black; }
/* --- STANDARD VIEW STYLES --- */
.scale-wrapper {
width: 420px;
@ -317,8 +272,8 @@ console.log(
.bubble.tinted { background: rgba(255, 255, 255, 0.05); }
.bubble.tinted.solar { background: color-mix(in srgb, var(--neon-yellow), transparent 85%); }
.bubble.tinted.grid { background: color-mix(in srgb, var(--neon-blue), transparent 85%); }
.bubble.tinted.grid.exporting { background: color-mix(in srgb, var(--export-color), transparent 85%); }
.bubble.grid.exporting { border-color: var(--export-color); }
.bubble.tinted.grid.exporting { background: color-mix(in srgb, var(--neon-red), transparent 85%); }
.bubble.grid.exporting { border-color: var(--neon-red); }
.bubble.tinted.battery { background: color-mix(in srgb, var(--neon-green), transparent 85%); }
.bubble.tinted.c1 { background: color-mix(in srgb, var(--consumer-1-color), transparent 85%); }
.bubble.tinted.c2 { background: color-mix(in srgb, var(--consumer-2-color), transparent 85%); }
@ -334,16 +289,6 @@ console.log(
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; pointer-events: none;
}
.bubble.grid.donut { border: none !important; background: transparent; }
.bubble.grid.donut.tinted { background: color-mix(in srgb, var(--neon-blue), transparent 85%); }
.bubble.grid.donut.tinted.exporting { background: color-mix(in srgb, var(--export-color), transparent 85%); }
.bubble.grid.donut::before {
content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 4px;
background: var(--grid-gradient, var(--neon-blue));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; pointer-events: none;
}
.icon-svg, .icon-custom {
width: 33px; height: 33px; position: absolute; top: 10px; left: 50%; margin-left: -17px; z-index: 2; display: block;
@ -384,7 +329,6 @@ console.log(
.glow.solar { box-shadow: 0 0 15px color-mix(in srgb, var(--neon-yellow), transparent 60%); }
.glow.battery { box-shadow: 0 0 15px color-mix(in srgb, var(--neon-green), transparent 60%); }
.glow.grid { box-shadow: 0 0 15px color-mix(in srgb, var(--neon-blue), transparent 60%); }
.glow.grid.exporting { box-shadow: 0 0 15px color-mix(in srgb, var(--export-color), transparent 60%); }
.glow.c1 { box-shadow: 0 0 15px color-mix(in srgb, var(--consumer-1-color), transparent 60%); }
.glow.c2 { box-shadow: 0 0 15px color-mix(in srgb, var(--consumer-2-color), transparent 60%); }
.glow.c3 { box-shadow: 0 0 15px color-mix(in srgb, var(--consumer-3-color), transparent 60%); }
@ -400,33 +344,33 @@ console.log(
svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.bg-path { fill: none; stroke-width: 6; transition: opacity 0.3s ease; }
.bg-solar { stroke: var(--pipe-solar-color); }
.bg-grid { stroke: var(--pipe-grid-color); }
.bg-battery { stroke: var(--pipe-battery-color); }
.bg-export { stroke: var(--export-color); }
.bg-c1 { stroke: var(--pipe-consumer-1-color); }
.bg-c2 { stroke: var(--pipe-consumer-2-color); }
.bg-c3 { stroke: var(--pipe-consumer-3-color); }
.bg-solar { stroke: var(--neon-yellow); }
.bg-grid { stroke: var(--neon-blue); }
.bg-battery { stroke: var(--neon-green); }
.bg-export { stroke: var(--neon-red); }
.bg-c1 { stroke: var(--consumer-1-color); }
.bg-c2 { stroke: var(--consumer-2-color); }
.bg-c3 { stroke: var(--consumer-3-color); }
.flow-line {
fill: none; stroke-width: var(--flow-stroke-width, 8px); stroke-linecap: round; stroke-dasharray: var(--flow-dasharray);
animation: dash linear infinite; opacity: 0; transition: opacity 0.5s;
}
.flow-solar { stroke: var(--pipe-solar-color); }
.flow-grid { stroke: var(--pipe-grid-color); }
.flow-battery { stroke: var(--pipe-battery-color); }
.flow-export { stroke: var(--export-color); }
.flow-solar { stroke: var(--neon-yellow); }
.flow-grid { stroke: var(--neon-blue); }
.flow-battery { stroke: var(--neon-green); }
.flow-export { stroke: var(--neon-red); }
@keyframes dash { to { stroke-dashoffset: -1500; } }
.flow-text {
font-size: 10px; font-weight: bold; text-anchor: middle; fill: #fff; transition: opacity 0.3s ease;
font-size: 10px; font-weight: bold; text-anchor: middle; fill: #fff; filter: transition: opacity 0.3s ease;
}
.flow-text.no-shadow { filter: none; }
.text-solar { fill: var(--pipe-solar-color); }
.text-grid { fill: var(--pipe-grid-color); }
.text-export { fill: var(--export-color); }
.text-battery { fill: var(--pipe-battery-color); }
.text-solar { fill: var(--neon-yellow); }
.text-grid { fill: var(--neon-blue); }
.text-export { fill: var(--neon-red); }
.text-battery { fill: var(--neon-green); }
`;
}
@ -434,36 +378,35 @@ console.log(
_renderIcon(type, val = 0, colorOverride = null) {
if (type === 'solar') {
const animate = Math.round(val) > 0 ? 'spin-slow' : '';
const color = colorOverride || 'var(--icon-solar-color)';
const color = colorOverride || 'var(--neon-yellow)';
return html`<svg class="icon-svg ${animate}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>`;
}
if (type === 'grid') {
const animate = Math.round(val) > 0 ? 'pulse' : '';
const color = colorOverride || 'var(--icon-grid-color)';
const color = colorOverride || 'var(--neon-blue)';
return html`<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L12 22"></path><path d="M5 8L19 8"></path><path d="M4 14L20 14"></path><path d="M2 22L22 22"></path><circle class="${animate}" cx="12" cy="4" r="4" fill="${color}" stroke="none"></circle></svg>`;
}
if (type === 'battery') {
const soc = Math.min(Math.max(val, 0), 100) / 100;
const rectHeight = 14 * soc;
const rectY = 18 - rectHeight;
const strokeColor = colorOverride || 'var(--icon-battery-color)';
const rectColor = soc > 0.2 ? strokeColor : 'var(--neon-red)';
return html`<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="${strokeColor}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="12" height="16" rx="2" ry="2"></rect><line x1="10" y1="2" x2="14" y2="2"></line><rect x="7" y="${rectY}" width="10" height="${rectHeight}" fill="${rectColor}" stroke="none"></rect></svg>`;
const rectColor = soc > 0.2 ? 'var(--neon-green)' : 'var(--neon-red)';
return html`<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="var(--neon-green)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="12" height="16" rx="2" ry="2"></rect><line x1="10" y1="2" x2="14" y2="2"></line><rect x="7" y="${rectY}" width="10" height="${rectHeight}" fill="${rectColor}" stroke="none"></rect></svg>`;
}
if (type === 'house') {
const strokeColor = colorOverride || 'var(--icon-house-color)';
const strokeColor = colorOverride || 'var(--neon-pink)';
return html`<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="${strokeColor}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>`;
}
if (type === 'car') {
const c = colorOverride || 'var(--icon-consumer-1-color)';
const c = colorOverride || 'var(--consumer-1-color)';
return html`<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="${c}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"></path><circle cx="7" cy="17" r="2"></circle><circle cx="17" cy="17" r="2"></circle><path d="M14 17h-5"></path></svg>`;
}
if (type === 'heater') {
const c = colorOverride || 'var(--icon-consumer-2-color)';
const c = colorOverride || 'var(--consumer-2-color)';
return html`<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="${c}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20a4 4 0 0 0 4-4V8a4 4 0 0 0-8 0v8a4 4 0 0 0 4 4z"></path><path class="float" style="animation-delay: 0s;" d="M8 4c0-1.5 1-2 2-2s2 .5 2 2"></path><path class="float" style="animation-delay: 0.5s;" d="M14 4c0-1.5 1-2 2-2s2 .5 2 2"></path></svg>`;
}
if (type === 'pool') {
const c = colorOverride || 'var(--icon-consumer-3-color)';
const c = colorOverride || 'var(--consumer-3-color)';
return html`<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="${c}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h20"></path><path class="float" d="M2 16c2.5 0 2.5-2 5-2s2.5 2 5 2 2.5-2 5-2 2.5 2 5 2"></path><path d="M12 2v6"></path><path d="M9 5h6"></path></svg>`;
}
return html``;
@ -482,11 +425,6 @@ console.log(
return style.getPropertyValue(`--consumer-${index}-color`).trim() || ['#a855f7', '#f97316', '#06b6d4'][index - 1];
}
_getConsumerPipeColor(index) {
const style = getComputedStyle(this);
return style.getPropertyValue(`--pipe-consumer-${index}-color`).trim() || this._getConsumerColor(index);
}
// --- DOM NODE SVG GENERATOR ---
_renderSVGPath(d, color) {
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
@ -540,9 +478,6 @@ console.log(
const state = this.hass.states[entity];
return state ? parseFloat(state.state) || 0 : 0;
};
const getValKw = (entity, isKw) => {
return getVal(entity) * (isKw ? 1000 : 1);
};
const solar = entities.solar ? Math.max(0, getVal(entities.solar)) : 0;
const hasGridCombined = !!(entities.grid_combined && entities.grid_combined !== "");
@ -553,7 +488,7 @@ console.log(
if (this.config.invert_battery) {
battery *= -1;
}
let c1Val = entities.consumer_1 ? getValKw(entities.consumer_1, this.config.consumer_1_unit_kw === true) : 0; // EV Value
let c1Val = entities.consumer_1 ? getVal(entities.consumer_1) : 0; // EV Value
if (this.config.invert_consumer_1) { c1Val *= -1; }
c1Val = Math.abs(c1Val);
@ -573,12 +508,8 @@ console.log(
gridExport = gridMain < 0 ? Math.abs(gridMain) : 0;
}
// Check for separate battery charge/discharge sensors
const hasBattChargeSensor = !!(entities.battery_charge && entities.battery_charge !== "");
const hasBattDischargeSensor = !!(entities.battery_discharge && entities.battery_discharge !== "");
const batteryCharge = hasBattChargeSensor ? Math.abs(getVal(entities.battery_charge)) : (battery > 0 ? battery : 0);
const batteryDischarge = hasBattDischargeSensor ? Math.abs(getVal(entities.battery_discharge)) : (battery < 0 ? Math.abs(battery) : 0);
const batteryCharge = battery > 0 ? battery : 0;
const batteryDischarge = battery < 0 ? Math.abs(battery) : 0;
let solarToBatt = 0;
let gridToBatt = 0;
@ -672,9 +603,9 @@ console.log(
const path = this._createBracketPath(s.startPx, s.widthPx, 'down');
let icon = '';
let iconColor = '';
if (s.type === 'solar') { icon = 'mdi:weather-sunny'; iconColor = 'var(--icon-solar-color)'; }
if (s.type === 'grid') { icon = 'mdi:transmission-tower'; iconColor = 'var(--icon-grid-color)'; }
if (s.type === 'battery') { icon = 'mdi:battery-high'; iconColor = 'var(--icon-battery-color)'; }
if (s.type === 'solar') { icon = 'mdi:weather-sunny'; iconColor = 'var(--neon-yellow)'; }
if (s.type === 'grid') { icon = 'mdi:transmission-tower'; iconColor = 'var(--neon-blue)'; }
if (s.type === 'battery') { icon = 'mdi:battery-high'; iconColor = 'var(--neon-green)'; }
return { path, width: s.widthPx, center: s.startPx + (s.widthPx / 2), icon, iconColor, val: s.val, entityId: s.entityId };
});
@ -692,10 +623,10 @@ console.log(
let icon = '';
let iconColor = '';
if (type === 'house') { icon = 'mdi:home'; iconColor = 'var(--icon-house-color)'; }
if (type === 'car') { icon = 'mdi:car-electric'; iconColor = 'var(--icon-consumer-1-color)'; }
if (type === 'export') { icon = 'mdi:arrow-right-box'; iconColor = 'var(--export-color)'; }
if (type === 'battery') { icon = 'mdi:battery-charging-high'; iconColor = 'var(--icon-battery-color)'; }
if (type === 'house') { icon = 'mdi:home'; iconColor = 'var(--primary-text-color)'; }
if (type === 'car') { icon = 'mdi:car-electric'; iconColor = this._getConsumerColor(1); }
if (type === 'export') { icon = 'mdi:arrow-right-box'; iconColor = 'var(--export-purple)'; }
if (type === 'battery') { icon = 'mdi:battery-charging-high'; iconColor = 'var(--neon-green)'; }
const path = this._createBracketPath(bottomX, width, 'up');
bottomBrackets.push({
@ -738,19 +669,14 @@ console.log(
<!-- MAIN BAR -->
<div class="compact-bar-wrapper">
${barSegments.map(s => {
const textColor = s.type === 'solar' && this.config.color_text_solar ? 'var(--text-solar-color)'
: s.type === 'grid' && this.config.color_text_grid ? 'var(--text-grid-color)'
: s.type === 'battery' && this.config.color_text_battery ? 'var(--text-battery-color)'
: (s.color === 'var(--export-purple)' ? 'white' : 'black');
return html`
${barSegments.map(s => html`
<div class="bar-segment"
style="width: ${s.widthPct}%; background: ${s.color}; color: ${textColor}; cursor: ${s.entityId ? 'pointer' : 'default'};"
style="width: ${s.widthPct}%; background: ${s.color}; color: ${s.color === 'var(--export-purple)' ? 'white' : 'black'}; cursor: ${s.entityId ? 'pointer' : 'default'};"
title="${this._formatPower(s.val)}"
@click=${() => s.entityId && this._handleClick(s.entityId)}>
${s.widthPx > 35 ? this._formatPower(s.val) : ''}
</div>
`})}
`)}
</div>
<!-- BOTTOM BRACKETS -->
@ -820,7 +746,13 @@ console.log(
const val = parseFloat(state.state);
if (isNaN(val)) return state.state + (state.attributes.unit_of_measurement ? ' ' + state.attributes.unit_of_measurement : '');
const unit = state.attributes.unit_of_measurement || '';
if (unit === 'W') { return this._formatPower(val); } if (unit === 'Wh') { if (Math.abs(val) >= 1000) return (val / 1000).toFixed(2) + ' kWh'; return Math.round(val) + ' Wh'; } if (unit === 'kWh' || unit === 'kW') { return val.toFixed(1) + ' ' + unit; } if (unit.includes('EUR') || unit.includes('ct') || unit.includes('€')) { return val.toFixed(2) + ' ' + unit; } return val.toFixed(1) + (unit ? ' ' + unit : '');
if (unit === 'W' || unit === 'Wh') {
return this._formatPower(val);
}
if (unit === 'kWh' || unit === 'kW') {
return val.toFixed(1) + ' ' + unit;
}
return val.toFixed(1) + (unit ? ' ' + unit : '');
};
// Determine existence of main entities
@ -838,35 +770,26 @@ console.log(
const textClass = showNeonGlow ? 'flow-text' : 'flow-text no-shadow';
// Custom Labels for Consumers
const labelC1 = this.config.consumer_1_label || this._localize('card.label_car');
const labelC2 = this.config.consumer_2_label || this._localize('card.label_heater');
const labelC3 = this.config.consumer_3_label || this._localize('card.label_pool');
const labelC1 = this.config.consumer_1_label || "E-Auto";
const labelC2 = this.config.consumer_2_label || "Heizung";
const labelC3 = this.config.consumer_3_label || "Pool";
const getVal = (entity) => {
const state = this.hass.states[entity];
return state ? parseFloat(state.state) || 0 : 0;
};
const getValKw = (entity, isKw) => {
return getVal(entity) * (isKw ? 1000 : 1);
};
let c1Val = entities.consumer_1 ? getValKw(entities.consumer_1, this.config.consumer_1_unit_kw === true) : 0;
let c1Val = entities.consumer_1 ? getVal(entities.consumer_1) : 0;
if (this.config.invert_consumer_1) { c1Val *= -1; }
c1Val = Math.abs(c1Val);
const c2Val = entities.consumer_2 ? getValKw(entities.consumer_2, this.config.consumer_2_unit_kw === true) : 0;
const c3Val = entities.consumer_3 ? getValKw(entities.consumer_3, this.config.consumer_3_unit_kw === true) : 0;
const c2Val = entities.consumer_2 ? getVal(entities.consumer_2) : 0;
const c3Val = entities.consumer_3 ? getVal(entities.consumer_3) : 0;
const alwaysShowConsumer = this.config.show_consumer_always === true;
const showC1 = (entities.consumer_1 && (alwaysShowConsumer || Math.round(c1Val) > 0));
const showC2 = (entities.consumer_2 && (alwaysShowConsumer || Math.round(c2Val) > 0));
const showC3 = (entities.consumer_3 && (alwaysShowConsumer || Math.round(c3Val) > 0));
const showC1 = (entities.consumer_1 && Math.round(c1Val) > 0);
const showC2 = (entities.consumer_2 && Math.round(c2Val) > 0);
const showC3 = (entities.consumer_3 && Math.round(c3Val) > 0);
const anyBottomVisible = showC1 || showC2 || showC3;
// Consumer 1 pipe threshold
const hideC1Pipe = this.config.consumer_1_hide_pipe === true;
const c1PipeThreshold = this.config.consumer_1_pipe_threshold || 0;
const c1PipeActive = showC1 && (!hideC1Pipe || c1Val >= c1PipeThreshold);
const solar = hasSolar ? getVal(entities.solar) : 0;
const gridCombinedVal = hasGridCombined ? getVal(entities.grid_combined) : 0;
const gridMain = hasGridCombined ? gridCombinedVal : (hasGrid ? getVal(entities.grid) : 0);
@ -896,12 +819,8 @@ console.log(
}
}
// Check for separate battery charge/discharge sensors
const hasBattChargeSensor = !!(entities.battery_charge && entities.battery_charge !== "");
const hasBattDischargeSensor = !!(entities.battery_discharge && entities.battery_discharge !== "");
const batteryCharge = hasBattChargeSensor ? Math.abs(getVal(entities.battery_charge)) : (battery > 0 ? battery : 0);
const batteryDischarge = hasBattDischargeSensor ? Math.abs(getVal(entities.battery_discharge)) : (battery < 0 ? Math.abs(battery) : 0);
const batteryCharge = battery > 0 ? battery : 0;
const batteryDischarge = battery < 0 ? Math.abs(battery) : 0;
let solarToBatt = 0;
let gridToBatt = 0;
@ -928,9 +847,6 @@ console.log(
const gridToHouse = Math.max(0, gridImport - gridToBatt);
const house = solarToHouse + gridToHouse + batteryDischarge;
// Use house entity for display if defined, otherwise use calculated value
const houseDisplay = (entities.house && entities.house !== "") ? getVal(entities.house) : house;
const isTopArcActive = (solarToBatt > 0);
const topShift = (isTopArcActive || (!hideInactive && hasSolar && hasBattery)) ? 0 : 50;
let baseHeight = anyBottomVisible ? 480 : 340;
@ -1012,30 +928,8 @@ console.log(
const isGridActive = Math.round(gridImport) > 0 || Math.round(gridExport) > 0;
const isGridExporting = Math.round(gridExport) > 0 && Math.round(gridImport) === 0;
// --- Grid Donut Gradient ---
let gridGradientVal = '';
if (showDonut && hasGrid && isGridActive) {
const gridTotal = gridToHouse + gridToBatt + gridExport;
if (gridTotal > 0) {
const gPctToHouse = (gridToHouse / gridTotal) * 100;
const gPctToBatt = (gridToBatt / gridTotal) * 100;
const gPctExport = (gridExport / gridTotal) * 100;
let gStops = [];
let gCurrent = 0;
if (gPctToHouse > 0) { gStops.push(`var(--neon-blue) ${gCurrent}% ${gCurrent + gPctToHouse}%`); gCurrent += gPctToHouse; }
if (gPctToBatt > 0) { gStops.push(`var(--neon-green) ${gCurrent}% ${gCurrent + gPctToBatt}%`); gCurrent += gPctToBatt; }
if (gPctExport > 0) { gStops.push(`var(--export-color) ${gCurrent}% ${gCurrent + gPctExport}%`); gCurrent += gPctExport; }
if (gCurrent < 99.9) { gStops.push(`var(--neon-blue) ${gCurrent}% 100%`); }
gridGradientVal = `conic-gradient(from 330deg, ${gStops.join(', ')})`;
} else {
gridGradientVal = isGridExporting ? 'var(--export-color)' : 'var(--neon-blue)';
}
}
const solarColor = isSolarActive ? 'var(--icon-solar-color)' : 'var(--secondary-text-color)';
const gridColor = isGridExporting ? 'var(--export-color)' : (isGridActive ? 'var(--neon-blue)' : 'var(--secondary-text-color)');
const gridIconColor = (isGridActive && this.config.color_icon_grid) ? 'var(--icon-grid-color)' : gridColor;
const gridTextColor = (isGridActive && this.config.color_text_grid) ? 'var(--text-grid-color)' : gridColor;
const solarColor = isSolarActive ? 'var(--neon-yellow)' : 'var(--secondary-text-color)';
const gridColor = isGridExporting ? 'var(--neon-red)' : (isGridActive ? 'var(--neon-blue)' : 'var(--secondary-text-color)');
const getAnimStyle = (val) => {
if (val <= 1) return "opacity: 0;";
@ -1115,24 +1009,27 @@ console.log(
const renderMainIcon = (type, val, customIcon, color = null) => {
if (customIcon) {
const style = color ? `color: ${color};` : (type === 'solar' ? 'color: var(--icon-solar-color);' : (type === 'grid' ? 'color: var(--icon-grid-color);' : (type === 'battery' ? 'color: var(--icon-battery-color);' : (type === 'house' ? 'color: var(--icon-house-color);' : ''))));
const style = color ? `color: ${color};` : (type === 'solar' ? 'color: var(--neon-yellow);' : (type === 'grid' ? 'color: var(--neon-blue);' : (type === 'battery' ? 'color: var(--neon-green);' : '')));
return html`<ha-icon icon="${customIcon}" class="icon-custom" style="${style}"></ha-icon>`;
}
return this._renderIcon(type, val, color);
};
const getCustomClass = (icon) => icon ? 'has-custom-icon' : '';
const renderConsumer = (isVisible, cssClass, configKey, label, iconType, val, hexColor) => {
if (!isVisible) return html``;
const customIcon = this.config[`${configKey}_icon`];
let iconContent;
const iconColorVar = `var(--icon-${configKey.replace(/_/g, '-')}-color)`;
const isCustom = !hideConsumerIcons && !!customIcon;
const dynamicClass = isCustom ? 'has-custom-icon' : '';
if (hideConsumerIcons) {
iconContent = html``;
} else if (customIcon) {
iconContent = html`<ha-icon icon="${customIcon}" class="icon-custom" style="color: ${iconColorVar};"></ha-icon>`;
iconContent = html`<ha-icon icon="${customIcon}" class="icon-custom" style="color: ${hexColor};"></ha-icon>`;
} else {
iconContent = this._renderIcon(iconType, val);
}
@ -1140,16 +1037,12 @@ console.log(
const secEntity = entities[`secondary_${configKey}`];
const hasSecondary = !!(secEntity && secEntity !== "");
const textStyle = this.config[`color_text_${configKey}`]
? `color: var(--text-${configKey.replace(/_/g, '-')}-color);`
: getConsumerColorStyle(hexColor);
return html`
<div class="bubble ${cssClass} ${cssClass.replace('c', 'node-c')} ${tintClass} ${glowClass}"
<div class="bubble ${cssClass} node ${cssClass.replace('c', 'node-c')} ${tintClass} ${dynamicClass} ${glowClass}"
@click=${() => this._handleClick(entities[configKey])}>
${iconContent}
${renderSecondaryOrLabel(label, true, secEntity, hasSecondary)}
<div class="value" style="${textStyle}">${this._formatPower(val)}</div>
<div class="value" style="${getConsumerColorStyle(hexColor)}">${this._formatPower(val)}</div>
</div>
`;
};
@ -1168,20 +1061,13 @@ console.log(
const pathSolarBatt = "M 50 70 Q 210 -20 370 70";
const pathGridImport = "M 210 160 L 210 220";
const pathGridExport = "M 95 115 Q 130 145 165 115";
const pathHouseExport = "M 210 220 L 210 160";
const exportFromSolar = solarVal > 1;
const activeExportPath = exportFromSolar ? pathGridExport : pathHouseExport;
const exportTextX = exportFromSolar ? '130' : '185';
const exportTextY = exportFromSolar ? '145' : '195';
const pathGridToBatt = "M 255 115 Q 290 145 325 115";
const pathBattHouse = "M 370 160 Q 370 265 255 265";
const pathHouseC1 = "M 165 265 Q 50 265 50 370";
const pathHouseC2 = "M 210 310 L 210 370";
const pathHouseC3 = "M 255 265 Q 370 265 370 370";
const houseTextStyle = this.config.color_text_house
? 'color: var(--text-house-color);'
: (houseTextCol ? `color: ${houseTextCol};` : '');
const houseTextStyle = houseTextCol ? `color: ${houseTextCol};` : '';
const dashArrayVal = showTail ? '30 360' : (showDashedLine ? '13 13' : '0 380');
const strokeWidthVal = showDashedLine ? 4 : 8;
@ -1197,33 +1083,33 @@ console.log(
<path class="bg-path bg-solar" d="${pathSolarBatt}" style="${getPipeStyle(solarToBatt)} ${styleSolarBatt}" />
<path class="bg-path bg-grid" d="${pathGridImport}" style="${getPipeStyle(gridToHouse)} ${styleGrid}" />
<path class="bg-path bg-export" d="${activeExportPath}" style="${getPipeStyle(gridExport)} ${styleGrid}" />
<path class="bg-path bg-export" d="${pathGridExport}" style="${getPipeStyle(gridExport)} ${styleGrid}" />
<path class="bg-path bg-grid" d="${pathGridToBatt}" style="${getPipeStyle(gridToBatt)} ${styleGridBatt}" />
<path class="bg-path bg-battery" d="${pathBattHouse}" style="${getPipeStyle(batteryDischarge)} ${styleBattery}" />
<path d="${pathHouseC1}" fill="none" stroke="${this._getConsumerPipeColor(1)}" stroke-width="6" style="${getConsumerPipeStyle(c1PipeActive, c1Val)}" />
<path d="${pathHouseC2}" fill="none" stroke="${this._getConsumerPipeColor(2)}" stroke-width="6" style="${getConsumerPipeStyle(showC2, c2Val)}" />
<path d="${pathHouseC3}" fill="none" stroke="${this._getConsumerPipeColor(3)}" stroke-width="6" style="${getConsumerPipeStyle(showC3, c3Val)}" />
<path d="${pathHouseC1}" fill="none" stroke="${this._getConsumerColor(1)}" stroke-width="6" style="${getConsumerPipeStyle(showC1, c1Val)}" />
<path d="${pathHouseC2}" fill="none" stroke="${this._getConsumerColor(2)}" stroke-width="6" style="${getConsumerPipeStyle(showC2, c2Val)}" />
<path d="${pathHouseC3}" fill="none" stroke="${this._getConsumerColor(3)}" stroke-width="6" style="${getConsumerPipeStyle(showC3, c3Val)}" />
<path class="flow-line flow-solar" d="${pathSolarHouse}" style="${getAnimStyle(solarToHouse)} ${styleSolar}" />
<path class="flow-line flow-solar" d="${pathSolarBatt}" style="${getAnimStyle(solarToBatt)} ${styleSolarBatt}" />
<path class="flow-line flow-grid" d="${pathGridImport}" style="${getAnimStyle(gridToHouse)} ${styleGrid}" />
<path class="flow-line flow-export" d="${activeExportPath}" style="${getAnimStyle(gridExport)} ${styleGrid}" />
<path class="flow-line flow-export" d="${pathGridExport}" style="${getAnimStyle(gridExport)} ${styleGrid}" />
<path class="flow-line flow-grid" d="${pathGridToBatt}" style="${getAnimStyle(gridToBatt)} ${styleGridBatt}" />
<path class="flow-line flow-battery" d="${pathBattHouse}" style="${getAnimStyle(batteryDischarge)} ${styleBattery}" />
<path class="flow-line" d="${pathHouseC1}" stroke="${this._getConsumerPipeColor(1)}" style="${getConsumerAnimStyle(c1PipeActive, c1Val)}" />
<path class="flow-line" d="${pathHouseC2}" stroke="${this._getConsumerPipeColor(2)}" style="${getConsumerAnimStyle(showC2, c2Val)}" />
<path class="flow-line" d="${pathHouseC3}" stroke="${this._getConsumerPipeColor(3)}" style="${getConsumerAnimStyle(showC3, c3Val)}" />
<path class="flow-line" d="${pathHouseC1}" stroke="${this._getConsumerColor(1)}" style="${getConsumerAnimStyle(showC1, c1Val)}" />
<path class="flow-line" d="${pathHouseC2}" stroke="${this._getConsumerColor(2)}" style="${getConsumerAnimStyle(showC2, c2Val)}" />
<path class="flow-line" d="${pathHouseC3}" stroke="${this._getConsumerColor(3)}" style="${getConsumerAnimStyle(showC3, c3Val)}" />
<text x="100" y="235" class="${textClass} text-solar" style="${getTextStyle(solarToHouse, 'solar')} ${styleSolar}">${this._formatPower(solarToHouse)}</text>
<text x="210" y="45" class="${textClass} text-solar" style="${getTextStyle(solarToBatt, 'solar')} ${styleSolarBatt}">${this._formatPower(solarToBatt)}</text>
<text x="235" y="195" class="${textClass} text-grid" style="${getTextStyle(gridToHouse, 'grid')} ${styleGrid}">${this._formatPower(gridToHouse)}</text>
<text x="${exportTextX}" y="${exportTextY}" class="${textClass} text-export" style="${getTextStyle(gridExport, 'grid')} ${styleGrid}">${this._formatPower(gridExport)}</text>
<text x="130" y="145" class="${textClass} text-export" style="${getTextStyle(gridExport, 'grid')} ${styleGrid}">${this._formatPower(gridExport)}</text>
<text x="290" y="145" class="${textClass} text-grid" style="${getTextStyle(gridToBatt, 'grid')} ${styleGridBatt}">${this._formatPower(gridToBatt)}</text>
<text x="320" y="235" class="${textClass} text-battery" style="${getTextStyle(batteryDischarge, 'battery')} ${styleBattery}">${this._formatPower(batteryDischarge)}</text>
@ -1231,39 +1117,38 @@ console.log(
</svg>
${hasSolar ? html`
<div class="bubble ${isSolarActive ? 'solar' : 'inactive'} node-solar ${tintClass} ${isSolarActive ? glowClass : ''}"
<div class="bubble ${isSolarActive ? 'solar' : 'inactive'} node node-solar ${tintClass} ${isSolarActive ? glowClass : ''} ${getCustomClass(iconSolar)}"
@click=${() => this._handleClick(entities.solar)}>
${renderMainIcon('solar', solarVal, iconSolar, solarColor)}
${renderSecondaryOrLabel(labelSolarText, showLabelSolar, entities.secondary_solar, hasSecondarySolar)}
<div class="value" style="${isSolarActive ? (this.config.color_text_solar ? 'color: var(--text-solar-color);' : getColorStyle('--neon-yellow')) : `color: ${solarColor};`}">${this._formatPower(solarVal)}</div>
<div class="value" style="${isSolarActive ? getColorStyle('--neon-yellow') : `color: ${solarColor};`}">${this._formatPower(solarVal)}</div>
</div>` : ''}
${hasGrid ? html`
<div class="bubble ${isGridActive ? (isGridExporting ? 'grid exporting' : 'grid') : 'inactive'} node-grid ${showDonut && isGridActive ? 'donut' : ''} ${tintClass} ${isGridActive ? glowClass : ''}"
style="${showDonut && isGridActive ? `--grid-gradient: ${gridGradientVal};` : ''}"
<div class="bubble ${isGridActive ? (isGridExporting ? 'grid exporting' : 'grid') : 'inactive'} node node-grid ${tintClass} ${isGridActive ? glowClass : ''} ${getCustomClass(iconGrid)}"
@click=${() => this._handleClick(entities.grid_combined || entities.grid)}>
${renderMainIcon('grid', isGridExporting ? gridExport : gridImport, iconGrid, gridIconColor)}
${renderMainIcon('grid', isGridExporting ? gridExport : gridImport, iconGrid, gridColor)}
${renderSecondaryOrLabel(labelGridText, showLabelGrid, entities.secondary_grid, hasSecondaryGrid)}
<div class="value" style="color: ${gridTextColor};">
<div class="value" style="color: ${gridColor};">
${isGridExporting ? html`<span class="direction-arrow">&#9650;</span>` : (isGridActive ? html`<span class="direction-arrow">&#9660;</span>` : '')}
${this._formatPower(isGridExporting ? gridExport : gridImport)}
</div>
</div>` : ''}
${hasBattery ? html`
<div class="bubble battery node-battery ${tintClass} ${glowClass}"
<div class="bubble battery node node-battery ${tintClass} ${glowClass} ${getCustomClass(iconBattery)}"
@click=${() => this._handleClick(entities.battery)}>
${renderMainIcon('battery', battSoc, iconBattery)}
${renderSecondaryOrLabel(labelBatteryText, showLabelBattery, entities.secondary_battery, hasSecondaryBattery)}
<div class="value" style="${this.config.color_text_battery ? 'color: var(--text-battery-color);' : getColorStyle('--neon-green')}">${Math.round(battSoc)}%</div>
<div class="value" style="${getColorStyle('--neon-green')}">${Math.round(battSoc)}%</div>
</div>` : ''}
<div class="bubble house node-house ${showDonut ? 'donut' : ''} ${tintClass}"
<div class="bubble house node node-house ${showDonut ? 'donut' : ''} ${tintClass}"
style="${houseBubbleStyle}"
@click=${() => this._handleClick(entities.house)}>
${renderMainIcon('house', 0, null, this.config.color_icon_house ? 'var(--icon-house-color)' : houseDominantColor)}
${renderMainIcon('house', 0, null, houseDominantColor)}
${renderLabel(labelHouseText, showLabelHouse)}
<div class="value" style="${houseTextStyle}">${this._formatPower(houseDisplay)}</div>
<div class="value" style="${houseTextStyle}">${this._formatPower(house)}</div>
</div>
${renderConsumer(showC1, 'c1', 'consumer_1', labelC1, 'car', c1Val, this._getConsumerColor(1))}