this._handleClick(entities.grid_combined || entities.grid)}>
- ${renderMainIcon('grid', isGridExporting ? gridExport : gridImport, iconGrid, gridColor)}
+ ${renderMainIcon('grid', isGridExporting ? gridExport : gridImport, iconGrid, gridIconColor)}
${renderSecondaryOrLabel(labelGridText, showLabelGrid, entities.secondary_grid, hasSecondaryGrid)}
-
+
${isGridExporting ? html`▲` : (isGridActive ? html`▼` : '')}
${this._formatPower(isGridExporting ? gridExport : gridImport)}
` : ''}
${hasBattery ? html`
-
this._handleClick(entities.battery)}>
${renderMainIcon('battery', battSoc, iconBattery)}
${renderSecondaryOrLabel(labelBatteryText, showLabelBattery, entities.secondary_battery, hasSecondaryBattery)}
-
${Math.round(battSoc)}%
+
${Math.round(battSoc)}%
` : ''}
-
this._handleClick(entities.house)}>
- ${renderMainIcon('house', 0, null, houseDominantColor)}
+ ${renderMainIcon('house', 0, null, this.config.color_icon_house ? 'var(--icon-house-color)' : houseDominantColor)}
${renderLabel(labelHouseText, showLabelHouse)}
-
${this._formatPower(house)}
+
${this._formatPower(houseDisplay)}
${renderConsumer(showC1, 'c1', 'consumer_1', labelC1, 'car', c1Val, this._getConsumerColor(1))}
diff --git a/docs/README-de.md b/docs/README-de.md
index 3e90900..8f75370 100644
--- a/docs/README-de.md
+++ b/docs/README-de.md
@@ -86,3 +86,151 @@ 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).
+
+
+
+ Custom Farben mit card_mod und Jinja2 Templates
+
+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.
+
\ No newline at end of file
diff --git a/src/lang-de.js b/src/lang-de.js
index f7220c7..8e7845b 100644
--- a/src/lang-de.js
+++ b/src/lang-de.js
@@ -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": "Entität (Watt)",
+ "editor.entity": "Kombinierter Batterie Sensor (W)",
"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 (compact view).",
+ "editor.house_sensor_hint": "Wird benötigt, damit das Haus-Icon anklickbar ist (more-details). Ansonsten wird der Hausverbrauch berechnet.",
"editor.consumer_1_title": "🚗 Links (Lila)",
"editor.consumer_2_title": "♨️ Mitte (Orange)",
"editor.consumer_3_title": "🏊 Rechts (Türkis)",
@@ -34,11 +34,22 @@ 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 (Watt)",
+ "editor.grid_to_battery_sensor": "Netz-zu-Batterie Sensor (W, Optional)",
"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 die getrennten Import/Export Sensoren.",
- "editor.color_picker": "Farbe anpassen",
+ "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",
},
card: {
"card.label_solar": "Solar",
@@ -46,7 +57,7 @@ export default {
"card.label_battery": "Batterie",
"card.label_house": "Verbrauch",
"card.label_car": "E-Auto",
- "card.label_import": "Import",
- "card.label_export": "Export",
+ "card.label_heater": "Heizung",
+ "card.label_pool": "Pool",
}
};
diff --git a/src/lang-en.js b/src/lang-en.js
index f955cb9..46ae1ca 100644
--- a/src/lang-en.js
+++ b/src/lang-en.js
@@ -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": "Entity (Watt)",
+ "editor.entity": "Combined Battery Sensor (W)",
"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 (compact view).",
+ "editor.house_sensor_hint": "Required to make the house icon clickable (more-details). Otherwise, the house consumption is calculated.",
"editor.consumer_1_title": "🚗 Left (Purple)",
"editor.consumer_2_title": "♨️ Center (Orange)",
"editor.consumer_3_title": "🏊 Right (Cyan)",
@@ -34,11 +34,22 @@ 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 (Watt)",
+ "editor.grid_to_battery_sensor": "Grid to Battery Sensor (W, optional)",
"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 separate import/export sensors.",
- "editor.color_picker": "Custom Color",
+ "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",
},
card: {
"card.label_solar": "Solar",
@@ -46,7 +57,7 @@ export default {
"card.label_battery": "Battery",
"card.label_house": "Consumption",
"card.label_car": "Car",
- "card.label_import": "Import",
- "card.label_export": "Export",
+ "card.label_heater": "Heater",
+ "card.label_pool": "Pool",
}
};
diff --git a/src/power-flux-card-editor.js b/src/power-flux-card-editor.js
index bf1177a..7702902 100644
--- a/src/power-flux-card-editor.js
+++ b/src/power-flux-card-editor.js
@@ -48,7 +48,7 @@ class PowerFluxCardEditor extends LitElement {
if (!this._config || !this.hass) return;
const target = ev.target;
- const key = target.configValue || this._currentConfigValue;
+ const key = target.configValue;
let value;
if (target.tagName === 'HA-SWITCH') {
@@ -67,6 +67,7 @@ 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',
@@ -162,6 +163,34 @@ 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`
+
+ ${items.map(item => {
+ const color = this._config[item.key] || item.default;
+ const hasCustom = !!this._config[item.key];
+ return html`
+
+ this._colorChanged(item.key, e)}>
+ ${item.label}
+ ${hasCustom ? html` this._resetColor(item.key)}>` : ''}
+
+ `;
+ })}
+
+ `;
+ }
+
static get styles() {
return css`
.card-config {
@@ -269,8 +298,8 @@ class PowerFluxCardEditor extends LitElement {
-webkit-appearance: none;
border: 2px solid var(--divider-color);
border-radius: 50%;
- width: 36px;
- height: 36px;
+ width: 30px;
+ height: 30px;
padding: 2px;
cursor: pointer;
background: transparent;
@@ -294,6 +323,13 @@ 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;
+ }
`;
}
@@ -332,7 +368,7 @@ class PowerFluxCardEditor extends LitElement {
${this._renderEntitySelector(entitySelectorSchema, entities.secondary_solar || "", 'secondary_solar', this._localize('editor.secondary_sensor'))}
- ${this._renderColorPicker('color_solar', this._localize('editor.color_picker'), '#ffdd00')}
+ ${this._renderColorPickerQuad('color_solar', 'color_pipe_solar', 'color_text_solar', 'color_icon_solar', '#ffdd00')}
@@ -366,11 +402,13 @@ class PowerFluxCardEditor extends LitElement {
- ${this._localize('editor.grid_to_battery_hint')}
+ ${this._localize('editor.battery_separate_hint')}
-
+ ${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'))}
+