${text}
`;
};
- const renderSecondaryOrLabel = (labelText, showLabel, secondaryEntity, hasSecondary) => {
- if (hasSecondary) {
- const secVal = getSecondaryVal(secondaryEntity);
- return html`${secVal}
`;
- }
- return renderLabel(labelText, showLabel);
- };
-
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` this._handleClick(entities[configKey])}>
+
-
${iconContent}
- ${renderSecondaryOrLabel(label, true, secEntity, hasSecondary)}
-
`;
};
@@ -2167,28 +1655,21 @@ console.log(
const pathSolarHouse = "M 50 160 Q 50 265 165 265";
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 pathGridExport = "M 165 115 Q 130 145 95 115";
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;
return html`
${this._formatPower(val)}
+ ${renderLabel(label, true)}
+ ${this._formatPower(val)}
+
0 ? 'spin-slow' : '';
- const color = colorOverride || 'var(--icon-solar-color)';
+ const color = colorOverride || 'var(--neon-yellow)';
return html``;
}
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``;
}
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``;
+ const rectColor = soc > 0.2 ? 'var(--neon-green)' : 'var(--neon-red)';
+ return html``;
}
if (type === 'house') {
- const strokeColor = colorOverride || 'var(--icon-house-color)';
+ const strokeColor = colorOverride || 'var(--neon-pink)';
return html``;
}
if (type === 'car') {
- const c = colorOverride || 'var(--icon-consumer-1-color)';
- return html``;
+ return html``;
}
if (type === 'heater') {
- const c = colorOverride || 'var(--icon-consumer-2-color)';
- return html``;
+ return html``;
}
if (type === 'pool') {
- const c = colorOverride || 'var(--icon-consumer-3-color)';
- return html``;
+ return html``;
}
return html``;
}
@@ -477,16 +365,6 @@ console.log(
return Math.round(val) + " W";
}
- _getConsumerColor(index) {
- const style = getComputedStyle(this);
- 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,32 +418,21 @@ 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 !== "");
- const gridCombinedVal = hasGridCombined ? getVal(entities.grid_combined) : 0;
- const gridMain = hasGridCombined ? gridCombinedVal : (entities.grid ? getVal(entities.grid) : 0);
+ const gridMain = entities.grid ? getVal(entities.grid) : 0;
const gridExportSensor = entities.grid_export ? getVal(entities.grid_export) : 0;
let battery = entities.battery ? getVal(entities.battery) : 0;
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
- if (this.config.invert_consumer_1) { c1Val *= -1; }
- c1Val = Math.abs(c1Val);
+ const c1Val = entities.consumer_1 ? getVal(entities.consumer_1) : 0; // EV Value
// 2. Logic Calculation
let gridImport = 0;
let gridExport = 0;
- if (hasGridCombined) {
- // COMBINED SENSOR: positive = import, negative = export
- gridImport = gridCombinedVal > 0 ? gridCombinedVal : 0;
- gridExport = gridCombinedVal < 0 ? Math.abs(gridCombinedVal) : 0;
- } else if (entities.grid_export && entities.grid_export !== "") {
+ if (entities.grid_export && entities.grid_export !== "") {
gridImport = gridMain > 0 ? gridMain : 0;
gridExport = Math.abs(gridExportSensor);
} else {
@@ -573,29 +440,19 @@ 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;
if (batteryCharge > 0) {
- const hasGridToBattSensor = !!(entities.grid_to_battery && entities.grid_to_battery !== "");
- if (hasGridToBattSensor) {
- gridToBatt = Math.abs(getVal(entities.grid_to_battery));
- solarToBatt = Math.max(0, batteryCharge - gridToBatt);
+ if (solar >= batteryCharge) {
+ solarToBatt = batteryCharge;
+ gridToBatt = 0;
} else {
- if (solar >= batteryCharge) {
- solarToBatt = batteryCharge;
- gridToBatt = 0;
- } else {
- solarToBatt = solar;
- gridToBatt = batteryCharge - solar;
- }
+ solarToBatt = solar;
+ gridToBatt = batteryCharge - solar;
}
}
@@ -663,18 +520,18 @@ console.log(
currentX += width;
}
- addSegment(srcBattery, 'var(--neon-green)', 'battery', 'battery', entities.battery);
- addSegment(srcSolar, 'var(--neon-yellow)', 'solar', 'solar', entities.solar);
- addSegment(srcGrid, 'var(--neon-blue)', 'grid', 'grid', entities.grid_combined || entities.grid);
+ addSegment(srcBattery, 'var(--neon-yellow)', 'battery', 'battery', entities.battery);
+ addSegment(srcSolar, 'var(--neon-green)', 'solar', 'solar', entities.solar);
+ addSegment(srcGrid, 'var(--grid-grey)', 'grid', 'grid', entities.grid);
// --- GENERATE TOP BRACKETS (Based on Bar Segments) ---
const topBrackets = barSegments.map(s => {
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-green)'; }
+ if (s.type === 'grid') { icon = 'mdi:transmission-tower'; iconColor = 'var(--grid-grey)'; }
+ if (s.type === 'battery') { icon = 'mdi:battery-high'; iconColor = 'var(--neon-yellow)'; }
return { path, width: s.widthPx, center: s.startPx + (s.widthPx / 2), icon, iconColor, val: s.val, entityId: s.entityId };
});
@@ -692,10 +549,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 = '#a855f7'; }
+ 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({
@@ -712,7 +569,7 @@ console.log(
addBottomBracket(destHouse, 'house', entities.house);
addBottomBracket(destEV, 'car', entities.consumer_1);
- addBottomBracket(destExport, 'export', entities.grid_combined || entities.grid_export || entities.grid);
+ addBottomBracket(destExport, 'export', entities.grid_export || entities.grid);
addBottomBracket(batteryCharge, 'battery', entities.battery);
// Note: If there is Battery Charging happening, bottomX will not reach fullWidth.
@@ -738,19 +595,14 @@ console.log(
@@ -799,7 +651,7 @@ console.log(
// CUSTOM LABELS
const labelSolarText = this.config.solar_label || this._localize('card.label_solar');
- const labelGridText = this.config.grid_label || this._localize('card.label_grid');
+ const labelGridText = this.config.grid_label || this._localize('card.label_import');
const labelBatteryText = this.config.battery_label || (entities.battery && this.hass.states[entities.battery] && this.hass.states[entities.battery].state > 0 ? '+' : '-') + " " + this._localize('card.label_battery');
const labelHouseText = this.config.house_label || this._localize('card.label_house');
@@ -808,25 +660,9 @@ console.log(
const iconGrid = this.config.grid_icon;
const iconBattery = this.config.battery_icon;
- // SECONDARY SENSORS (display only)
- const hasSecondarySolar = !!(entities.secondary_solar && entities.secondary_solar !== "");
- const hasSecondaryGrid = !!(entities.secondary_grid && entities.secondary_grid !== "");
- const hasSecondaryBattery = !!(entities.secondary_battery && entities.secondary_battery !== "");
-
- const getSecondaryVal = (entity) => {
- if (!entity) return '';
- const state = this.hass.states[entity];
- if (!state) return '';
- 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 : '');
- };
-
// Determine existence of main entities
const hasSolar = !!(entities.solar && entities.solar !== "");
- const hasGridCombined = !!(entities.grid_combined && entities.grid_combined !== "");
- const hasGrid = !!(entities.grid && entities.grid !== "") || hasGridCombined;
+ const hasGrid = !!(entities.grid && entities.grid !== "");
const hasBattery = !!(entities.battery && entities.battery !== "");
const styleSolar = hasSolar ? '' : 'display: none;';
@@ -838,38 +674,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;
- 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 c1Val = entities.consumer_1 ? getVal(entities.consumer_1) : 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);
+ const gridMain = hasGrid ? getVal(entities.grid) : 0;
const gridExpSensor = (hasGrid && entities.grid_export) ? getVal(entities.grid_export) : 0;
let battery = hasBattery ? getVal(entities.battery) : 0;
if (this.config.invert_battery) {
@@ -883,11 +707,7 @@ console.log(
let gridExport = 0;
if (hasGrid) {
- if (hasGridCombined) {
- // COMBINED SENSOR: positive = import, negative = export
- gridImport = gridCombinedVal > 0 ? gridCombinedVal : 0;
- gridExport = gridCombinedVal < 0 ? Math.abs(gridCombinedVal) : 0;
- } else if (entities.grid_export && entities.grid_export !== "") {
+ if (entities.grid_export && entities.grid_export !== "") {
gridImport = gridMain > 0 ? gridMain : 0;
gridExport = Math.abs(gridExpSensor);
} else {
@@ -896,31 +716,19 @@ 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;
if (hasBattery && batteryCharge > 0) {
- const hasGridToBattSensor = !!(entities.grid_to_battery && entities.grid_to_battery !== "");
- if (hasGridToBattSensor) {
- // Use dedicated grid-to-battery sensor
- gridToBatt = Math.abs(getVal(entities.grid_to_battery));
- solarToBatt = Math.max(0, batteryCharge - gridToBatt);
+ if (solarVal >= batteryCharge) {
+ solarToBatt = batteryCharge;
+ gridToBatt = 0;
} else {
- // Calculate: solar prioritized
- if (solarVal >= batteryCharge) {
- solarToBatt = batteryCharge;
- gridToBatt = 0;
- } else {
- solarToBatt = solarVal;
- gridToBatt = batteryCharge - solarVal;
- }
+ solarToBatt = solarVal;
+ gridToBatt = batteryCharge - solarVal;
}
}
@@ -928,9 +736,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;
@@ -946,8 +751,6 @@ console.log(
if (scale > 1.5) scale = 1.5;
const finalCardHeightPx = contentHeight * scale;
- const visualWidth = 420 * scale;
- const centerMarginLeft = Math.max(0, (availableWidth - visualWidth) / 2);
let houseGradientVal = '';
let houseTextCol = useColoredValues ? 'var(--neon-pink)' : '';
@@ -974,11 +777,11 @@ console.log(
let stops = [];
let current = 0;
if (pctSolar > 0) { stops.push(`var(--neon-yellow) ${current}% ${current + pctSolar}%`); current += pctSolar; }
- if (pctBatt > 0) { stops.push(`var(--neon-green) ${current}% ${current + pctBatt}%`); current += pctBatt; }
if (pctGrid > 0) { stops.push(`var(--neon-blue) ${current}% ${current + pctGrid}%`); current += pctGrid; }
+ if (pctBatt > 0) { stops.push(`var(--neon-green) ${current}% ${current + pctBatt}%`); current += pctBatt; }
if (current < 99.9) { stops.push(`var(--neon-pink) ${current}% 100%`); }
- houseGradientVal = `conic-gradient(from 330deg, ${stops.join(', ')})`;
+ houseGradientVal = `conic-gradient(${stops.join(', ')})`;
if (useColoredValues) {
const maxVal = Math.max(solarToHouse, gridToHouse, batteryDischarge);
@@ -1009,73 +812,25 @@ console.log(
const houseBubbleStyle = `${showDonut ? `--house-gradient: ${houseGradientVal};` : ''} ${houseTintStyle} ${houseGlowStyle}`;
const isSolarActive = Math.round(solarVal) > 0;
- const isGridActive = Math.round(gridImport) > 0 || Math.round(gridExport) > 0;
- const isGridExporting = Math.round(gridExport) > 0 && Math.round(gridImport) === 0;
+ const isGridActive = 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 = isGridActive ? 'var(--neon-blue)' : 'var(--secondary-text-color)';
const getAnimStyle = (val) => {
if (val <= 1) return "opacity: 0;";
+ const userMinDuration = 7;
+ const userMaxDuration = 11;
+ const userFactor = 20000;
+ let duration = userFactor / val;
+ duration = Math.max(userMinDuration, Math.min(userMaxDuration, duration));
- // --- Dynamic speed based on power ---
- // Higher power = faster animation (shorter duration)
- // Range: 2s (very fast, ~5000W+) to 12s (slow, ~50W)
- const minDuration = 4;
- const maxDuration = 12;
- const factor = 12000;
- let duration = factor / val;
- duration = Math.max(minDuration, Math.min(maxDuration, duration));
-
- // --- Dynamic particle density based on power ---
- // Higher power = more/denser particles (shorter gap)
- // Lower power = fewer/sparse particles (longer gap)
- let dashSize, gapSize;
- if (showTail) {
- // Comet tail: vary tail length with power
- dashSize = Math.round(15 + (val / 200) * 25); // 15-40
- dashSize = Math.min(dashSize, 40);
- gapSize = Math.round(380 - (val / 200) * 200); // 380-180
- gapSize = Math.max(gapSize, 180);
- } else if (showDashedLine) {
- // Dashed line: vary dash density
- dashSize = Math.round(8 + (val / 500) * 10); // 8-18
- dashSize = Math.min(dashSize, 18);
- gapSize = Math.round(18 - (val / 1000) * 10); // 18-8
- gapSize = Math.max(gapSize, 8);
- duration = duration * 5; // Dashed lines are slower
- } else {
- // Default dots: vary dot count/density
- dashSize = 0; // stays as dots
- gapSize = Math.round(380 - (val / 200) * 250); // 380-130
- gapSize = Math.max(gapSize, 130);
+ // Adjust speed for dashed line (Factor to slow down: 5x)
+ if (showDashedLine) {
+ duration = duration * 5;
}
- const dynamicDash = `${dashSize} ${gapSize}`;
-
- return `opacity: 1; animation-duration: ${duration}s; stroke-dasharray: ${dynamicDash};`;
+ return `opacity: 1; animation-duration: ${duration}s;`;
};
const getPipeStyle = (val) => {
@@ -1105,51 +860,38 @@ console.log(
return html`
${hasSolar ? html`
-
${this._localize('editor.hide_inactive')}
- this._handleClick(entities.solar)}>
+
-
${renderMainIcon('solar', solarVal, iconSolar, solarColor)}
- ${renderSecondaryOrLabel(labelSolarText, showLabelSolar, entities.secondary_solar, hasSecondarySolar)}
-
` : ''}
${hasGrid ? html`
- ${this._formatPower(solarVal)}
+ ${renderLabel(labelSolarText, showLabelSolar)}
+ ${this._formatPower(solarVal)}
this._handleClick(entities.grid_combined || entities.grid)}>
- ${renderMainIcon('grid', isGridExporting ? gridExport : gridImport, iconGrid, gridIconColor)}
- ${renderSecondaryOrLabel(labelGridText, showLabelGrid, entities.secondary_grid, hasSecondaryGrid)}
- 
-
+
### ✨ Funktionen
@@ -26,21 +24,9 @@ Wenn euch die custom Card gefällt, würde ich mich sehr über eine Sternebewert
- **Donut Chart**: Optionales Donut-Diagramm um das Haus-Icon, das den Energiemix zeigt.
- **Kometenschweif / Gestrichelte Linien**: Wählen Sie Ihren bevorzugten Animationsstil.
- **Zoom**: Anpassbare Größe für Ihr Dashboard.
- - **Benutzerdefinierte Farben**: Definiere benutzerdefinierte Farben für jede Quelle und jeden Verbraucher über den Editor.
- - **Hintergrundfarbe**: Aktiviere einen leicht getönten Hintergrund für die Kreise in der Standard-Ansicht.
-- **Dynamische Animationsgeschwindigkeit**: Partikelgeschwindigkeit und -dichte passen sich dem aktuellen Energiefluss an.
-- **Weitere Informationen**: Klicke auf eine beliebige Quelle/Verbraucher, um detaillierte Informationen in einem More-Info-Dialog anzuzeigen.
-- **Netz-Import/Export**: Unterstützt sowohl separate Import/Export-Entitäten als auch eine kombinierte Entität mit positiven/negativen Werten.
-- **Netz-zu-Batterie**: Optionaler direkter Sensor für den Netz-zu-Batterie-Fluss, der die Standardberechnung umgeht.
-- **Sekundäre Sensoren**: Optional können sekundäre Sensorwerte in den Hauptkreisen (z.B. Tagesertrag für Solar, aktuelle Lade-/Entladeleistung für Batterie) angezeigt werden.
- **Lokalisierung**: Vollständig übersetzt in Deutsch und Englisch.
- **Visueller Editor**: Einfache Konfiguration über die Home Assistant UI.
-[](https://www.youtube.com/watch?v=HGFBJJRWGW0
-)
-
----
-
### 🚀 Installation
### HACS (Empfohlen)
@@ -62,12 +48,9 @@ Wenn euch die custom Card gefällt, würde ich mich sehr über eine Sternebewert
1. Lade die Datei `power-flux-card.js` von der [Releases](../../releases)-Seite herunter.
2. Lade sie in Ihren `www/community/power-flux-card/`-Ordner in Home Assistant hoch.
3. Füge die Ressource in Ihrer Dashboard-Konfiguration hinzu:
- - URL: `/local/community/power-flux-card/power-flux-card.js`
+ - URL: `/local/power-flux-card.js`
- Typ: JavaScript Module
-
----
-
### ⚙️ Konfiguration
Du kannst die Karte direkt über den visuellen Editor in Home Assistant konfigurieren.
@@ -86,151 +69,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).
-
-
-
- ${this._renderEntitySelector(entitySelectorSchema, entities.solar, 'solar', this._localize('editor.entity'))}
+
- ${isGridExporting ? html`▲` : (isGridActive ? html`▼` : '')}
- ${this._formatPower(isGridExporting ? gridExport : gridImport)}
-
+
+ ${renderMainIcon('grid', gridImport, iconGrid, gridColor)}
+ ${renderLabel(labelGridText, showLabelGrid)}
+
` : ''}
${hasBattery ? html`
- ${this._formatPower(gridImport)}
this._handleClick(entities.battery)}>
+
diff --git a/docs/README-de.md b/docs/README-de.md
index 8f75370..88e103c 100644
--- a/docs/README-de.md
+++ b/docs/README-de.md
@@ -9,12 +9,10 @@
# Power Flux Card
-Die ⚡Power Flux Card ist eine erweiterte, animierte Energiefluss-Karte für Home Assistant. Sie visualisiert die Energieverteilung zwischen Solar, Netz, Batterie und Verbrauchern mit wunderschönen Neon-Effekten und verschiedenen Animationen.
-
-Wenn euch die custom Card gefällt, würde ich mich sehr über eine Sternebewertung ⭐ freuen. 🤗
+Die ⚡Power Flux Card ist eine erweiterte, animierte Energiefluss-Karte für Home Assistant. Sie visualisiert die Energieverteilung zwischen Solar, Netz, Batterie und Verbrauchern mit wunderschönen Neon-Effekten und flüssigen Animationen.
${renderMainIcon('battery', battSoc, iconBattery)}
- ${renderSecondaryOrLabel(labelBatteryText, showLabelBattery, entities.secondary_battery, hasSecondaryBattery)}
-
` : ''}
- ${Math.round(battSoc)}%
+ ${renderLabel(labelBatteryText, showLabelBattery)}
+ ${Math.round(battSoc)}%
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)}
-
- ${renderConsumer(showC1, 'c1', 'consumer_1', labelC1, 'car', c1Val, this._getConsumerColor(1))}
- ${renderConsumer(showC2, 'c2', 'consumer_2', labelC2, 'heater', c2Val, this._getConsumerColor(2))}
- ${renderConsumer(showC3, 'c3', 'consumer_3', labelC3, 'pool', c3Val, this._getConsumerColor(3))}
+ ${renderConsumer(showC1, 'c1', 'consumer_1', labelC1, 'car', c1Val, '#a855f7')}
+ ${renderConsumer(showC2, 'c2', 'consumer_2', labelC2, 'heater', c2Val, '#f97316')}
+ ${renderConsumer(showC3, 'c3', 'consumer_3', labelC3, 'pool', c3Val, '#06b6d4')}
${this._formatPower(houseDisplay)}
+ ${this._formatPower(house)}
-
+
### ✨ Funktionen
@@ -26,21 +24,9 @@ Wenn euch die custom Card gefällt, würde ich mich sehr über eine Sternebewert
- **Donut Chart**: Optionales Donut-Diagramm um das Haus-Icon, das den Energiemix zeigt.
- **Kometenschweif / Gestrichelte Linien**: Wählen Sie Ihren bevorzugten Animationsstil.
- **Zoom**: Anpassbare Größe für Ihr Dashboard.
- - **Benutzerdefinierte Farben**: Definiere benutzerdefinierte Farben für jede Quelle und jeden Verbraucher über den Editor.
- - **Hintergrundfarbe**: Aktiviere einen leicht getönten Hintergrund für die Kreise in der Standard-Ansicht.
-- **Dynamische Animationsgeschwindigkeit**: Partikelgeschwindigkeit und -dichte passen sich dem aktuellen Energiefluss an.
-- **Weitere Informationen**: Klicke auf eine beliebige Quelle/Verbraucher, um detaillierte Informationen in einem More-Info-Dialog anzuzeigen.
-- **Netz-Import/Export**: Unterstützt sowohl separate Import/Export-Entitäten als auch eine kombinierte Entität mit positiven/negativen Werten.
-- **Netz-zu-Batterie**: Optionaler direkter Sensor für den Netz-zu-Batterie-Fluss, der die Standardberechnung umgeht.
-- **Sekundäre Sensoren**: Optional können sekundäre Sensorwerte in den Hauptkreisen (z.B. Tagesertrag für Solar, aktuelle Lade-/Entladeleistung für Batterie) angezeigt werden.
- **Lokalisierung**: Vollständig übersetzt in Deutsch und Englisch.
- **Visueller Editor**: Einfache Konfiguration über die Home Assistant UI.
-[](https://www.youtube.com/watch?v=HGFBJJRWGW0
-)
-
----
-
### 🚀 Installation
### HACS (Empfohlen)
@@ -62,12 +48,9 @@ Wenn euch die custom Card gefällt, würde ich mich sehr über eine Sternebewert
1. Lade die Datei `power-flux-card.js` von der [Releases](../../releases)-Seite herunter.
2. Lade sie in Ihren `www/community/power-flux-card/`-Ordner in Home Assistant hoch.
3. Füge die Ressource in Ihrer Dashboard-Konfiguration hinzu:
- - URL: `/local/community/power-flux-card/power-flux-card.js`
+ - URL: `/local/power-flux-card.js`
- Typ: JavaScript Module
-
----
-
### ⚙️ Konfiguration
Du kannst die Karte direkt über den visuellen Editor in Home Assistant konfigurieren.
@@ -86,151 +69,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).
-
-
-
-
\ No newline at end of file
diff --git a/docs/images/power-flux-card-compact.jpg b/docs/images/power-flux-card-compact.jpg
index 19fafd0..1c9f043 100644
Binary files a/docs/images/power-flux-card-compact.jpg and b/docs/images/power-flux-card-compact.jpg differ
diff --git a/docs/images/power-flux-card-compact2.jpg b/docs/images/power-flux-card-compact2.jpg
deleted file mode 100644
index 04dc763..0000000
Binary files a/docs/images/power-flux-card-compact2.jpg and /dev/null differ
diff --git a/src/lang-de.js b/src/lang-de.js
index 8e7845b..bb15bc2 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": "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)",
@@ -29,27 +29,8 @@ export default {
"editor.donut_chart": "Donut Chart (Grid/Haus)",
"editor.comet_tail": "Comet Tail Effect",
"editor.dashed_line": "Dashed Line Effect",
- "editor.tinted_background": "Farbiger Hintergrund in Kreisen",
"editor.colored_values": "Farbige Textwerte",
"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_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",
},
card: {
"card.label_solar": "Solar",
@@ -57,7 +38,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",
}
};
diff --git a/src/lang-en.js b/src/lang-en.js
index 46ae1ca..774f660 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": "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)",
@@ -29,27 +29,8 @@ export default {
"editor.donut_chart": "Donut Chart (Grid/House)",
"editor.comet_tail": "Comet Tail Effect",
"editor.dashed_line": "Dashed Line Effect",
- "editor.tinted_background": "Tinted Background in Bubbles",
"editor.colored_values": "Colored Text Values",
"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_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",
},
card: {
"card.label_solar": "Solar",
@@ -57,7 +38,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",
}
};
diff --git a/src/power-flux-card-editor.js b/src/power-flux-card-editor.js
index 7702902..fc488e0 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;
+ const key = target.configValue || this._currentConfigValue;
let value;
if (target.tagName === 'HA-SWITCH') {
@@ -65,13 +65,10 @@ class PowerFluxCardEditor extends LitElement {
if (key) {
const entityKeys = [
- 'solar', 'grid', 'grid_export', 'grid_combined',
- 'battery', 'battery_soc', 'grid_to_battery',
- 'battery_charge', 'battery_discharge',
+ 'solar', 'grid', 'grid_export',
+ 'battery', 'battery_soc',
'house',
- 'consumer_1', 'consumer_2', 'consumer_3',
- 'secondary_solar', 'secondary_grid', 'secondary_battery',
- 'secondary_consumer_1', 'secondary_consumer_2', 'secondary_consumer_3'
+ 'consumer_1', 'consumer_2', 'consumer_3'
];
let newConfig = { ...this._config };
@@ -104,93 +101,6 @@ class PowerFluxCardEditor extends LitElement {
this._subView = null;
}
- _clearEntity(key) {
- const newConfig = { ...this._config };
- const currentEntities = newConfig.entities || {};
- const newEntities = { ...currentEntities, [key]: "" };
- newConfig.entities = newEntities;
- this._config = newConfig;
- fireEvent(this, "config-changed", { config: this._config });
- }
-
- _colorChanged(key, ev) {
- const newConfig = { ...this._config, [key]: ev.target.value };
- this._config = newConfig;
- fireEvent(this, "config-changed", { config: this._config });
- }
-
- _resetColor(key) {
- const newConfig = { ...this._config };
- delete newConfig[key];
- this._config = newConfig;
- fireEvent(this, "config-changed", { config: this._config });
- }
-
- _renderEntitySelector(entitySelectorSchema, value, configValue, label) {
- const val = value || "";
- return html`
- 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. -
- this._clearEntity(configValue)}
- > ` : ''}
-
- `;
- }
-
- _renderColorPicker(key, label, defaultColor) {
- const currentColor = this._config[key] || defaultColor;
- const hasCustom = !!this._config[key];
- return html`
-
- this._colorChanged(key, e)}>
- ${label}
- ${hasCustom ? html` this._resetColor(key)}> ` : ''}
-
- `;
- }
-
- _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`
-
- `;
- }
-
static get styles() {
return css`
.card-config {
@@ -269,67 +179,6 @@ class PowerFluxCardEditor extends LitElement {
border-bottom: 1px solid var(--divider-color);
margin: 10px 0;
}
- .entity-picker-wrapper {
- position: relative;
- display: flex;
- align-items: center;
- gap: 4px;
- }
- .entity-picker-wrapper ha-selector {
- flex: 1;
- }
- .clear-entity-btn {
- --mdc-icon-size: 20px;
- color: var(--secondary-text-color);
- cursor: pointer;
- flex-shrink: 0;
- margin-top: -12px;
- }
- .clear-entity-btn:hover {
- color: var(--error-color, #db4437);
- }
- .color-picker-row {
- display: flex;
- align-items: center;
- gap: 12px;
- padding: 8px 0;
- }
- .color-picker-row input[type="color"] {
- -webkit-appearance: none;
- border: 2px solid var(--divider-color);
- border-radius: 50%;
- width: 30px;
- height: 30px;
- padding: 2px;
- cursor: pointer;
- background: transparent;
- }
- .color-picker-row input[type="color"]::-webkit-color-swatch-wrapper {
- padding: 0;
- }
- .color-picker-row input[type="color"]::-webkit-color-swatch {
- border: none;
- border-radius: 50%;
- }
- .color-label {
- flex: 1;
- font-size: 14px;
- }
- .color-reset-btn {
- --mdc-icon-size: 20px;
- color: var(--secondary-text-color);
- cursor: pointer;
- }
- .color-reset-btn:hover {
- color: var(--primary-color);
- }
- .color-picker-quad {
- display: flex;
- gap: 8px;
- }
- .color-picker-quad .color-picker-row {
- flex: 1;
- }
`;
}
@@ -344,7 +193,14 @@ class PowerFluxCardEditor extends LitElement {
- this._colorChanged(item.key, e)}>
- ${item.label}
- ${hasCustom ? html` this._resetColor(item.key)}> ` : ''}
-
- `;
- })}
- ${this._localize('editor.solar_section')}
@@ -401,18 +253,23 @@ class PowerFluxCardEditor extends LitElement {
- ${this._renderEntitySelector(entitySelectorSchema, entities.grid_combined || "", 'grid_combined', this._localize('editor.grid_combined_sensor'))}
-
-
+ ${this._localize('editor.grid_section')}
- ${this._localize('editor.grid_combined_hint')}
-
-
-
- ${this._renderEntitySelector(entitySelectorSchema, entities.grid, 'grid', this._localize('card.label_import') + " (W)")}
-
- ${this._renderEntitySelector(entitySelectorSchema, entities.grid_export, 'grid_export', this._localize('card.label_export') + " (W, Optional)")}
+
@@ -471,16 +322,24 @@ class PowerFluxCardEditor extends LitElement {
- ${this._renderEntitySelector(entitySelectorSchema, entities.battery, 'battery', this._localize('editor.entity'))}
-
-
-
- ${this._localize('editor.battery_section')}
- ${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'))}
+
- ${this._localize('editor.grid_to_battery_hint')}
-
- ${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')}
@@ -558,17 +402,29 @@ class PowerFluxCardEditor extends LitElement {
${this._localize('editor.house_total_title')}
- ${this._renderEntitySelector(entitySelectorSchema, entities.house || "", 'house', this._localize('editor.house_sensor_label'))}
+
${this._localize('editor.house_sensor_hint')}
-
- ${this._renderColorPickerQuad('color_house', null, 'color_text_house', 'color_icon_house', '#ff0080')}
${this._localize('editor.consumer_1_title')}
- ${this._renderEntitySelector(entitySelectorSchema, entities.consumer_1, 'consumer_1', this._localize('editor.entity'))}
+
- ${this._localize('editor.invert_consumer_1')}
-
-
-
- ${this._localize('editor.consumer_1_hide_pipe')}
-
-
- ${this._config.consumer_1_hide_pipe === true ? html`
-
- ${this._localize('editor.consumer_unit_kw')}
-
-
- ${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._localize('editor.consumer_2_title')}
- ${this._renderEntitySelector(entitySelectorSchema, entities.consumer_2, 'consumer_2', this._localize('editor.entity'))}
+
- ${this._localize('editor.consumer_unit_kw')}
-
-
- ${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._localize('editor.consumer_3_title')}
- ${this._renderEntitySelector(entitySelectorSchema, entities.consumer_3, 'consumer_3', this._localize('editor.entity'))}
+
- ${this._localize('editor.consumer_unit_kw')}
-
-
- ${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._localize('editor.dashed_line')}
-
-
${this._localize('editor.tinted_background')}
-
-
-
${this._localize('editor.show_consumer_always')}
- ${text}
`;
};
- const renderSecondaryOrLabel = (labelText, showLabel, secondaryEntity, hasSecondary) => {
- if (hasSecondary) {
- const secVal = getSecondaryVal(secondaryEntity);
- return html`${secVal}
`;
- }
- return renderLabel(labelText, showLabel);
- };
-
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` this._handleClick(entities[configKey])}>
+
-
${iconContent}
- ${renderSecondaryOrLabel(label, true, secEntity, hasSecondary)}
-
`;
};
@@ -1167,28 +909,21 @@ console.log(
const pathSolarHouse = "M 50 160 Q 50 265 165 265";
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 pathGridExport = "M 165 115 Q 130 145 95 115";
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;
return html`
${this._formatPower(val)}
+ ${renderLabel(label, true)}
+ ${this._formatPower(val)}
+
${hasSolar ? html`
-
this._handleClick(entities.solar)}>
+
${renderMainIcon('solar', solarVal, iconSolar, solarColor)}
- ${renderSecondaryOrLabel(labelSolarText, showLabelSolar, entities.secondary_solar, hasSecondarySolar)}
-
` : ''}
${hasGrid ? html`
- ${this._formatPower(solarVal)}
+ ${renderLabel(labelSolarText, showLabelSolar)}
+ ${this._formatPower(solarVal)}
this._handleClick(entities.grid_combined || entities.grid)}>
- ${renderMainIcon('grid', isGridExporting ? gridExport : gridImport, iconGrid, gridIconColor)}
- ${renderSecondaryOrLabel(labelGridText, showLabelGrid, entities.secondary_grid, hasSecondaryGrid)}
-
- ${isGridExporting ? html`▲` : (isGridActive ? html`▼` : '')}
- ${this._formatPower(isGridExporting ? gridExport : gridImport)}
-
+
+ ${renderMainIcon('grid', gridImport, iconGrid, gridColor)}
+ ${renderLabel(labelGridText, showLabelGrid)}
+
` : ''}
${hasBattery ? html`
- ${this._formatPower(gridImport)}
this._handleClick(entities.battery)}>
+
${renderMainIcon('battery', battSoc, iconBattery)}
- ${renderSecondaryOrLabel(labelBatteryText, showLabelBattery, entities.secondary_battery, hasSecondaryBattery)}
-
` : ''}
- ${Math.round(battSoc)}%
+ ${renderLabel(labelBatteryText, showLabelBattery)}
+ ${Math.round(battSoc)}%
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)}
-
- ${renderConsumer(showC1, 'c1', 'consumer_1', labelC1, 'car', c1Val, this._getConsumerColor(1))}
- ${renderConsumer(showC2, 'c2', 'consumer_2', labelC2, 'heater', c2Val, this._getConsumerColor(2))}
- ${renderConsumer(showC3, 'c3', 'consumer_3', labelC3, 'pool', c3Val, this._getConsumerColor(3))}
+ ${renderConsumer(showC1, 'c1', 'consumer_1', labelC1, 'car', c1Val, '#a855f7')}
+ ${renderConsumer(showC2, 'c2', 'consumer_2', labelC2, 'heater', c2Val, '#f97316')}
+ ${renderConsumer(showC3, 'c3', 'consumer_3', labelC3, 'pool', c3Val, '#06b6d4')}
${this._formatPower(houseDisplay)}
+ ${this._formatPower(house)}