v_2.4
This commit is contained in:
jayjojayson
parent
67f6021cd5
commit
4ad407f030
6 changed files with 503 additions and 106 deletions
|
|
@ -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.1 ready",
|
||||
"%c⚡ Power Flux Card v_2.4 ready",
|
||||
"background: #d19525ff; color: #000; padding: 2px 6px; border-radius: 4px; font-weight: bold;"
|
||||
);
|
||||
|
||||
|
|
@ -44,6 +44,8 @@ console.log(
|
|||
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,
|
||||
|
|
@ -66,6 +68,8 @@ console.log(
|
|||
grid_combined: "",
|
||||
battery: "",
|
||||
battery_soc: "",
|
||||
battery_charge: "",
|
||||
battery_discharge: "",
|
||||
house: "",
|
||||
consumer_1: "",
|
||||
consumer_2: "",
|
||||
|
|
@ -128,6 +132,21 @@ console.log(
|
|||
'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]) {
|
||||
|
|
@ -155,7 +174,6 @@ console.log(
|
|||
--neon-green: #00ff88;
|
||||
--neon-pink: #ff0080;
|
||||
--neon-red: #ff3333;
|
||||
--grid-grey: #9e9e9e;
|
||||
--export-purple: #a855f7;
|
||||
--export-color: #ff3333;
|
||||
--consumer-1-color: #a855f7;
|
||||
|
|
@ -167,6 +185,20 @@ console.log(
|
|||
--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]) {
|
||||
|
|
@ -175,7 +207,6 @@ console.log(
|
|||
--neon-green: #059669;
|
||||
--neon-pink: #db2777;
|
||||
--neon-red: #dc2626;
|
||||
--grid-grey: #6b7280;
|
||||
--export-purple: #7c3aed;
|
||||
--export-color: #dc2626;
|
||||
--consumer-1-color: #7c3aed;
|
||||
|
|
@ -256,11 +287,6 @@ 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;
|
||||
|
|
@ -394,7 +420,7 @@ console.log(
|
|||
@keyframes dash { to { stroke-dashoffset: -1500; } }
|
||||
|
||||
.flow-text {
|
||||
font-size: 10px; font-weight: bold; text-anchor: middle; fill: #fff; filter: transition: opacity 0.3s ease;
|
||||
font-size: 10px; font-weight: bold; text-anchor: middle; fill: #fff; transition: opacity 0.3s ease;
|
||||
}
|
||||
.flow-text.no-shadow { filter: none; }
|
||||
.text-solar { fill: var(--pipe-solar-color); }
|
||||
|
|
@ -408,35 +434,36 @@ console.log(
|
|||
_renderIcon(type, val = 0, colorOverride = null) {
|
||||
if (type === 'solar') {
|
||||
const animate = Math.round(val) > 0 ? 'spin-slow' : '';
|
||||
const color = colorOverride || 'var(--neon-yellow)';
|
||||
const color = colorOverride || 'var(--icon-solar-color)';
|
||||
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(--neon-blue)';
|
||||
const color = colorOverride || 'var(--icon-grid-color)';
|
||||
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 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>`;
|
||||
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>`;
|
||||
}
|
||||
if (type === 'house') {
|
||||
const strokeColor = colorOverride || 'var(--neon-pink)';
|
||||
const strokeColor = colorOverride || 'var(--icon-house-color)';
|
||||
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(--consumer-1-color)';
|
||||
const c = colorOverride || 'var(--icon-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(--consumer-2-color)';
|
||||
const c = colorOverride || 'var(--icon-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(--consumer-3-color)';
|
||||
const c = colorOverride || 'var(--icon-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``;
|
||||
|
|
@ -546,8 +573,12 @@ console.log(
|
|||
gridExport = gridMain < 0 ? Math.abs(gridMain) : 0;
|
||||
}
|
||||
|
||||
const batteryCharge = battery > 0 ? battery : 0;
|
||||
const batteryDischarge = battery < 0 ? Math.abs(battery) : 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);
|
||||
|
||||
let solarToBatt = 0;
|
||||
let gridToBatt = 0;
|
||||
|
|
@ -641,9 +672,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(--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)'; }
|
||||
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)'; }
|
||||
|
||||
return { path, width: s.widthPx, center: s.startPx + (s.widthPx / 2), icon, iconColor, val: s.val, entityId: s.entityId };
|
||||
});
|
||||
|
|
@ -661,10 +692,10 @@ console.log(
|
|||
let icon = '';
|
||||
let iconColor = '';
|
||||
|
||||
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)'; }
|
||||
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)'; }
|
||||
|
||||
const path = this._createBracketPath(bottomX, width, 'up');
|
||||
bottomBrackets.push({
|
||||
|
|
@ -707,14 +738,19 @@ console.log(
|
|||
|
||||
<!-- MAIN BAR -->
|
||||
<div class="compact-bar-wrapper">
|
||||
${barSegments.map(s => html`
|
||||
${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`
|
||||
<div class="bar-segment"
|
||||
style="width: ${s.widthPct}%; background: ${s.color}; color: ${s.color === 'var(--export-purple)' ? 'white' : 'black'}; cursor: ${s.entityId ? 'pointer' : 'default'};"
|
||||
style="width: ${s.widthPct}%; background: ${s.color}; color: ${textColor}; 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 -->
|
||||
|
|
@ -808,9 +844,9 @@ console.log(
|
|||
const textClass = showNeonGlow ? 'flow-text' : 'flow-text no-shadow';
|
||||
|
||||
// Custom Labels for Consumers
|
||||
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 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 getVal = (entity) => {
|
||||
const state = this.hass.states[entity];
|
||||
|
|
@ -832,6 +868,11 @@ console.log(
|
|||
const showC3 = (entities.consumer_3 && (alwaysShowConsumer || 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);
|
||||
|
|
@ -861,8 +902,12 @@ console.log(
|
|||
}
|
||||
}
|
||||
|
||||
const batteryCharge = battery > 0 ? battery : 0;
|
||||
const batteryDischarge = battery < 0 ? Math.abs(battery) : 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);
|
||||
|
||||
let solarToBatt = 0;
|
||||
let gridToBatt = 0;
|
||||
|
|
@ -889,6 +934,9 @@ 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;
|
||||
|
|
@ -990,8 +1038,10 @@ console.log(
|
|||
}
|
||||
}
|
||||
|
||||
const solarColor = isSolarActive ? 'var(--neon-yellow)' : 'var(--secondary-text-color)';
|
||||
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 getAnimStyle = (val) => {
|
||||
if (val <= 1) return "opacity: 0;";
|
||||
|
|
@ -1071,27 +1121,24 @@ console.log(
|
|||
|
||||
const renderMainIcon = (type, val, customIcon, color = null) => {
|
||||
if (customIcon) {
|
||||
const style = color ? `color: ${color};` : (type === 'solar' ? 'color: var(--neon-yellow);' : (type === 'grid' ? 'color: var(--neon-blue);' : (type === 'battery' ? 'color: var(--neon-green);' : '')));
|
||||
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);' : ''))));
|
||||
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 isCustom = !hideConsumerIcons && !!customIcon;
|
||||
const dynamicClass = isCustom ? 'has-custom-icon' : '';
|
||||
const iconColorVar = `var(--icon-${configKey.replace(/_/g, '-')}-color)`;
|
||||
|
||||
if (hideConsumerIcons) {
|
||||
iconContent = html``;
|
||||
} else if (customIcon) {
|
||||
iconContent = html`<ha-icon icon="${customIcon}" class="icon-custom" style="color: ${hexColor};"></ha-icon>`;
|
||||
iconContent = html`<ha-icon icon="${customIcon}" class="icon-custom" style="color: ${iconColorVar};"></ha-icon>`;
|
||||
} else {
|
||||
iconContent = this._renderIcon(iconType, val);
|
||||
}
|
||||
|
|
@ -1099,12 +1146,16 @@ 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} node ${cssClass.replace('c', 'node-c')} ${tintClass} ${dynamicClass} ${glowClass}"
|
||||
<div class="bubble ${cssClass} ${cssClass.replace('c', 'node-c')} ${tintClass} ${glowClass}"
|
||||
@click=${() => this._handleClick(entities[configKey])}>
|
||||
${iconContent}
|
||||
${renderSecondaryOrLabel(label, true, secEntity, hasSecondary)}
|
||||
<div class="value" style="${getConsumerColorStyle(hexColor)}">${this._formatPower(val)}</div>
|
||||
<div class="value" style="${textStyle}">${this._formatPower(val)}</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
|
@ -1134,7 +1185,9 @@ console.log(
|
|||
const pathHouseC2 = "M 210 310 L 210 370";
|
||||
const pathHouseC3 = "M 255 265 Q 370 265 370 370";
|
||||
|
||||
const houseTextStyle = houseTextCol ? `color: ${houseTextCol};` : '';
|
||||
const houseTextStyle = this.config.color_text_house
|
||||
? 'color: var(--text-house-color);'
|
||||
: (houseTextCol ? `color: ${houseTextCol};` : '');
|
||||
const dashArrayVal = showTail ? '30 360' : (showDashedLine ? '13 13' : '0 380');
|
||||
const strokeWidthVal = showDashedLine ? 4 : 8;
|
||||
|
||||
|
|
@ -1155,7 +1208,7 @@ console.log(
|
|||
|
||||
<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(showC1, c1Val)}" />
|
||||
<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)}" />
|
||||
|
||||
|
|
@ -1168,7 +1221,7 @@ console.log(
|
|||
|
||||
<path class="flow-line flow-battery" d="${pathBattHouse}" style="${getAnimStyle(batteryDischarge)} ${styleBattery}" />
|
||||
|
||||
<path class="flow-line" d="${pathHouseC1}" stroke="${this._getConsumerPipeColor(1)}" style="${getConsumerAnimStyle(showC1, c1Val)}" />
|
||||
<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)}" />
|
||||
|
||||
|
|
@ -1184,39 +1237,39 @@ console.log(
|
|||
</svg>
|
||||
|
||||
${hasSolar ? html`
|
||||
<div class="bubble ${isSolarActive ? 'solar' : 'inactive'} node node-solar ${tintClass} ${isSolarActive ? glowClass : ''} ${getCustomClass(iconSolar)}"
|
||||
<div class="bubble ${isSolarActive ? 'solar' : 'inactive'} node-solar ${tintClass} ${isSolarActive ? glowClass : ''}"
|
||||
@click=${() => this._handleClick(entities.solar)}>
|
||||
${renderMainIcon('solar', solarVal, iconSolar, solarColor)}
|
||||
${renderSecondaryOrLabel(labelSolarText, showLabelSolar, entities.secondary_solar, hasSecondarySolar)}
|
||||
<div class="value" style="${isSolarActive ? getColorStyle('--neon-yellow') : `color: ${solarColor};`}">${this._formatPower(solarVal)}</div>
|
||||
<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>` : ''}
|
||||
|
||||
${hasGrid ? html`
|
||||
<div class="bubble ${isGridActive ? (isGridExporting ? 'grid exporting' : 'grid') : 'inactive'} node node-grid ${showDonut && isGridActive ? 'donut' : ''} ${tintClass} ${isGridActive ? glowClass : ''} ${getCustomClass(iconGrid)}"
|
||||
<div class="bubble ${isGridActive ? (isGridExporting ? 'grid exporting' : 'grid') : 'inactive'} node-grid ${showDonut && isGridActive ? 'donut' : ''} ${tintClass} ${isGridActive ? glowClass : ''}"
|
||||
style="${showDonut && isGridActive ? `--grid-gradient: ${gridGradientVal};` : ''}"
|
||||
@click=${() => 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)}
|
||||
<div class="value" style="color: ${gridColor};">
|
||||
<div class="value" style="color: ${gridTextColor};">
|
||||
${isGridExporting ? html`<span class="direction-arrow">▲</span>` : (isGridActive ? html`<span class="direction-arrow">▼</span>` : '')}
|
||||
${this._formatPower(isGridExporting ? gridExport : gridImport)}
|
||||
</div>
|
||||
</div>` : ''}
|
||||
|
||||
${hasBattery ? html`
|
||||
<div class="bubble battery node node-battery ${tintClass} ${glowClass} ${getCustomClass(iconBattery)}"
|
||||
<div class="bubble battery node-battery ${tintClass} ${glowClass}"
|
||||
@click=${() => this._handleClick(entities.battery)}>
|
||||
${renderMainIcon('battery', battSoc, iconBattery)}
|
||||
${renderSecondaryOrLabel(labelBatteryText, showLabelBattery, entities.secondary_battery, hasSecondaryBattery)}
|
||||
<div class="value" style="${getColorStyle('--neon-green')}">${Math.round(battSoc)}%</div>
|
||||
<div class="value" style="${this.config.color_text_battery ? 'color: var(--text-battery-color);' : getColorStyle('--neon-green')}">${Math.round(battSoc)}%</div>
|
||||
</div>` : ''}
|
||||
|
||||
<div class="bubble house node node-house ${showDonut ? 'donut' : ''} ${tintClass}"
|
||||
<div class="bubble house node-house ${showDonut ? 'donut' : ''} ${tintClass}"
|
||||
style="${houseBubbleStyle}"
|
||||
@click=${() => 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)}
|
||||
<div class="value" style="${houseTextStyle}">${this._formatPower(house)}</div>
|
||||
<div class="value" style="${houseTextStyle}">${this._formatPower(houseDisplay)}</div>
|
||||
</div>
|
||||
|
||||
${renderConsumer(showC1, 'c1', 'consumer_1', labelC1, 'car', c1Val, this._getConsumerColor(1))}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue