/** * Power Flux Card (Bundled) * Generated by build.js */ const lang_de = { editor: { "card.label_import": "Import", "card.label_export": "Export", "editor.main_title": "Haupt Entitäten", "editor.solar_section": "Solar/PV", "editor.grid_section": "Netz Import/Export", "editor.battery_section": "Batterie", "editor.consumers_section": "Zusätzliche Verbraucher", "editor.options_section": "Darstellung & Optionen", "editor.flow_rate_title": "Flussraten (W) an Röhren anzeigen", "editor.invert_battery": "Wert umkehren (+/-)", "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.label": "Beschriftung", "editor.icon": "Icon", }, card: { "card.label_solar": "Solar", "card.label_grid": "Netz", "card.label_battery": "Batterie", "card.label_house": "Verbrauch", "card.label_car": "E-Auto", "card.label_import": "Import", "card.label_export": "Export", } }; const lang_en = { editor: { "card.label_import": "Import", "card.label_export": "Export", "editor.main_title": "Main Entities", "editor.solar_section": "Solar", "editor.grid_section": "Grid Connection", "editor.battery_section": "Battery", "editor.consumers_section": "Additional Consumers", "editor.options_section": "Appearance & Options", "editor.flow_rate_title": "Show Flow Rates (W) on pipes", "editor.invert_battery": "Invert Power Value (+/-)", "editor.label_toggle": "Show Label in Bubble", "editor.compact_view": "Compact View (evcc)", "editor.hide_inactive": "Hide Inactive Pipes", "editor.entity": "Entity (Watt)", "editor.label": "Label", "editor.icon": "Icon", }, card: { "card.label_solar": "Solar", "card.label_grid": "Grid", "card.label_battery": "Battery", "card.label_house": "Consumption", "card.label_car": "Car", "card.label_import": "Import", "card.label_export": "Export", } }; const editorTranslations = {}; const cardTranslations = {}; editorTranslations['de'] = lang_de.editor; cardTranslations['de'] = lang_de.card; editorTranslations['en'] = lang_en.editor; cardTranslations['en'] = lang_en.card; const editorTranslations = { "en": lang_en.editor, "de": lang_de.editor }; const cardTranslations = { "en": lang_en.card, "de": lang_de.card }; const fireEvent = (node, type, detail, options) => { options = options || {}; detail = detail === null || detail === undefined ? {} : detail; const event = new Event(type, { bubbles: options.bubbles === undefined ? true : options.bubbles, cancelable: Boolean(options.cancelable), composed: options.composed === undefined ? true : options.composed, }); event.detail = detail; node.dispatchEvent(event); return event; }; const LitElement = customElements.get("ha-lit-element") || Object.getPrototypeOf(customElements.get("home-assistant-main")); const html = LitElement.prototype.html; const css = LitElement.prototype.css; class PowerFluxCardEditor extends LitElement { static get properties() { return { hass: {}, _config: { state: true }, _subView: { state: true } // Controls which sub-page is open (null = main) }; } setConfig(config) { this._config = config; } _localize(key) { const lang = this.hass && this.hass.language ? this.hass.language : 'en'; const dict = editorTranslations[lang] || editorTranslations['en']; return dict[key] || editorTranslations['en'][key] || key; } _valueChanged(ev) { if (!this._config || !this.hass) return; const target = ev.target; const key = target.configValue || this._currentConfigValue; let value; if (target.tagName === 'HA-SWITCH') { value = target.checked; } else if (ev.detail && 'value' in ev.detail) { value = ev.detail.value; } else { value = target.value; } if (value === null || value === undefined) { value = ""; } if (key) { const entityKeys = [ 'solar', 'grid', 'grid_export', 'battery', 'battery_soc', 'house', 'consumer_1', 'consumer_2', 'consumer_3' ]; let newConfig = { ...this._config }; if (entityKeys.includes(key)) { const currentEntities = newConfig.entities || {}; const newEntities = { ...currentEntities, [key]: value }; newConfig.entities = newEntities; } else { newConfig[key] = value; if (key === 'show_comet_tail' && value === true) { newConfig.show_dashed_line = false; } if (key === 'show_dashed_line' && value === true) { newConfig.show_comet_tail = false; } } this._config = newConfig; fireEvent(this, "config-changed", { config: this._config }); } } _goSubView(view) { this._subView = view; } _goBack() { this._subView = null; } static get styles() { return css` .card-config { display: flex; flex-direction: column; padding-bottom: 24px; } .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .back-btn { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: bold; color: var(--primary-color); } .menu-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--divider-color); margin-bottom: 13px; cursor: pointer; transition: background 0.2s; } .menu-item:hover { background: rgba(var(--rgb-primary-text-color), 0.05); } .menu-icon { display: flex; align-items: center; gap: 12px; font-weight: bold; } .switch-row { display: flex; align-items: center; gap: 16px; padding: 8px 0; margin-top: 8px; } .switch-label { font-weight: bold; } .section-title { font-size: 1.1em; font-weight: bold; margin-top: 15px; margin-bottom: 15px; padding-bottom: 4px; border-bottom: 1px solid var(--divider-color); } ha-selector { width: 100%; display: block; margin-bottom: 12px; } .consumer-group { padding: 10px; border-radius: 8px; border-bottom: 1px solid var(--divider-color); margin-bottom: 12px; } .consumer-title { font-weight: bold; margin-bottom: 8px; color: var(--primary-text-color); } .separator { border-bottom: 1px solid var(--divider-color); margin: 10px 0; } `; } // --- SUBVIEW RENDERING --- _renderSolarView(entities, entitySelectorSchema, textSelectorSchema, iconSelectorSchema) { return html`
Zurück

${this._localize('editor.solar_section')}

${this._localize('editor.label_toggle')}
${this._localize('editor.flow_rate_title')}
`; } _renderGridView(entities, entitySelectorSchema, textSelectorSchema, iconSelectorSchema) { return html`
Zurück

${this._localize('editor.grid_section')}

${this._localize('editor.label_toggle')}
${this._localize('editor.flow_rate_title')}
`; } _renderBatteryView(entities, entitySelectorSchema, textSelectorSchema, iconSelectorSchema) { return html`
Zurück

${this._localize('editor.battery_section')}

${this._localize('editor.label_toggle')}
${this._localize('editor.flow_rate_title')}
${this._localize('editor.invert_battery')}
`; } _renderConsumersView(entities, entitySelectorSchema, textSelectorSchema, iconSelectorSchema) { return html`
Zurück

${this._localize('editor.consumers_section')}

🏠 Gesamthausverbrauch (Optional)
Wird benötigt, damit das Haus-Icon anklickbar ist.
🚗 Links (Lila)
♨️ Mitte (Orange)
🏊 Rechts (Türkis)
`; } render() { if (!this.hass || !this._config) { return html``; } const entities = this._config.entities || {}; const entitySelectorSchema = { entity: { domain: ["sensor", "input_number"] } }; const textSelectorSchema = { text: {} }; const iconSelectorSchema = { icon: {} }; // SUBVIEW ROUTING if (this._subView === 'solar') return this._renderSolarView(entities, entitySelectorSchema, textSelectorSchema, iconSelectorSchema); if (this._subView === 'grid') return this._renderGridView(entities, entitySelectorSchema, textSelectorSchema, iconSelectorSchema); if (this._subView === 'battery') return this._renderBatteryView(entities, entitySelectorSchema, textSelectorSchema, iconSelectorSchema); if (this._subView === 'consumers') return this._renderConsumersView(entities, entitySelectorSchema, textSelectorSchema, iconSelectorSchema); // MAIN MENU VIEW return html`
${this._localize('editor.main_title')}
this._goSubView('solar')}>
${this._localize('editor.solar_section')}
this._goSubView('grid')}>
${this._localize('editor.grid_section')}
this._goSubView('battery')}>
${this._localize('editor.battery_section')}
this._goSubView('consumers')}>
${this._localize('editor.consumers_section')}
${this._localize('editor.options_section')}
Neon Glow
Donut Chart (Grid/Haus)
Comet Tail Effect
Dashed Line Animation
Farbige Textwerte
Icons unten ausblenden
${this._localize('editor.hide_inactive')}
${this._localize('editor.compact_view')}
`; } } customElements.define("power-flux-card-editor", PowerFluxCardEditor); console.log( "%c⚡ Power Flux Card v_2.1 ready", "background: #d19525ff; color: #000; padding: 2px 6px; border-radius: 4px; font-weight: bold;" ); (function () { const cardTranslations = { "en": lang_en.card, "de": lang_de.card }; const LitElement = customElements.get("ha-lit-element") || Object.getPrototypeOf(customElements.get("home-assistant-main")); const html = LitElement.prototype.html; const css = LitElement.prototype.css; class PowerFluxCard extends LitElement { static get properties() { return { hass: {}, config: {}, _cardWidth: { state: true }, }; } _localize(key) { const lang = this.hass && this.hass.language ? this.hass.language : 'en'; const dict = cardTranslations[lang] || cardTranslations['en']; return dict[key] || cardTranslations['en'][key] || key; } static async getConfigElement() { return document.createElement("power-flux-card-editor"); } static getStubConfig() { return { zoom: 0.9, compact_view: false, show_donut_border: false, show_neon_glow: true, show_comet_tail: false, show_dashed_line: false, show_tinted_background: false, hide_inactive_flows: true, show_flow_rate_solar: true, show_flow_rate_grid: true, show_flow_rate_battery: true, show_label_solar: false, show_label_grid: false, show_label_battery: false, show_label_house: false, use_colored_values: false, hide_consumer_icons: false, entities: { solar: "", grid: "", grid_export: "", battery: "", battery_soc: "", house: "", consumer_1: "", consumer_2: "", consumer_3: "" } }; } _handleClick(entityId) { if (!entityId) return; const event = new Event("hass-more-info", { bubbles: true, composed: true, }); event.detail = { entityId }; this.dispatchEvent(event); } setConfig(config) { if (!config.entities) { // Init allow } this.config = config; } firstUpdated() { this._resizeObserver = new ResizeObserver(entries => { for (const entry of entries) { if (entry.contentRect.width > 0) { this._cardWidth = entry.contentRect.width; } } }); this._resizeObserver.observe(this); } disconnectedCallback() { super.disconnectedCallback(); if (this._resizeObserver) { this._resizeObserver.disconnect(); } } static get styles() { return css` :host { display: block; --neon-yellow: #ffdd00; --neon-blue: #3b82f6; --neon-green: #00ff88; --neon-pink: #ff0080; --neon-red: #ff3333; --grid-grey: #9e9e9e; --export-purple: #a855f7; --flow-dasharray: 0 380; } ha-card { padding: 0; position: relative; overflow: hidden; transition: height 0.3s ease; } /* --- COMPACT VIEW STYLES --- */ .compact-container { padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; min-height: 120px; box-sizing: border-box; } .compact-bracket { height: 24px; width: 100%; position: relative; } .bracket-svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: visible; /* Important for icons */ } .bracket-line { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: d 0.5s ease; } .compact-icon-wrapper { position: absolute; top: -6px; /* Default top, overridden inline */ padding: 0 8px; display: flex; align-items: center; justify-content: center; transition: left 0.5s ease; } .compact-icon { --mdc-icon-size: 20px; } .compact-bar-wrapper { height: 36px; width: 100%; background: #333; border-radius: 5px; margin: 4px 0; display: flex; overflow: hidden; position: relative; } .bar-segment { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: bold; color: black; transition: width 0.5s ease; white-space: nowrap; overflow: hidden; } /* Source Colors */ .src-solar { background: var(--neon-green); color: black; } .src-grid { background: var(--grid-grey); color: black; } .src-battery { background: var(--neon-yellow); color: black; } /* --- STANDARD VIEW STYLES --- */ .scale-wrapper { width: 420px; transform-origin: top center; transition: transform 0.1s linear; margin: 0 auto; } .absolute-container { position: relative; width: 100%; transition: top 0.3s ease; } .bubble { width: 90px; height: 90px; border-radius: 50%; background: transparent; border: 2px solid var(--divider-color, #333); display: block; position: absolute; z-index: 2; transition: all 0.3s ease; box-sizing: border-box; } .bubble.tinted { background: rgba(255, 255, 255, 0.05); } .bubble.tinted.solar { background: color-mix(in srgb, var(--neon-yellow), transparent 85%); } .bubble.tinted.grid { background: color-mix(in srgb, var(--neon-blue), transparent 85%); } .bubble.tinted.battery { background: color-mix(in srgb, var(--neon-green), transparent 85%); } .bubble.tinted.c1 { background: color-mix(in srgb, #a855f7, transparent 85%); } .bubble.tinted.c2 { background: color-mix(in srgb, #f97316, transparent 85%); } .bubble.tinted.c3 { background: color-mix(in srgb, #06b6d4, transparent 85%); } .bubble.house { border-color: var(--neon-pink); } .bubble.house.tinted { background: color-mix(in srgb, var(--neon-pink), transparent 85%); } .bubble.house.donut { border: none !important; --house-gradient: var(--neon-pink); background: transparent; } .bubble.house.donut.tinted { background: color-mix(in srgb, var(--neon-pink), transparent 85%); } .bubble.house.donut::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 4px; background: var(--house-gradient); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; pointer-events: none; } .icon-svg, .icon-custom { width: 34px; height: 34px; position: absolute; top: 13px; left: 50%; margin-left: -17px; z-index: 2; display: block; } .icon-custom { --mdc-icon-size: 34px; } .sub { font-size: 9px; color: var(--secondary-text-color); text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.1; z-index: 2; position: absolute; top: 48px; left: 0; width: 100%; text-align: center; margin: 0; pointer-events: none; } .value { font-weight: bold; font-size: 15px; white-space: nowrap; z-index: 2; transition: color 0.3s ease; line-height: 1.2; position: absolute; bottom: 11px; left: 0; width: 100%; text-align: center; margin: 0; } @keyframes spin { 100% { transform: rotate(360deg); } } .spin-slow { animation: spin 12s linear infinite; transform-origin: center; } @keyframes pulse-opacity { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .pulse { animation: pulse-opacity 2s ease-in-out infinite; } @keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } .float { animation: float-y 3s ease-in-out infinite; } .solar { border-color: var(--neon-yellow); } .battery { border-color: var(--neon-green); } .grid { border-color: var(--neon-blue); } .c1 { border-color: #a855f7; } .c2 { border-color: #f97316; } .c3 { border-color: #06b6d4; } .inactive { border-color: var(--secondary-text-color); } .glow.solar { box-shadow: 0 0 15px rgba(255, 221, 0, 0.4); } .glow.battery { box-shadow: 0 0 15px rgba(0, 255, 136, 0.4); } .glow.grid { box-shadow: 0 0 15px rgba(59, 130, 246, 0.4); } .glow.c1 { box-shadow: 0 0 15px rgba(168, 85, 247, 0.4); } .glow.c2 { box-shadow: 0 0 15px rgba(249, 115, 22, 0.4); } .glow.c3 { box-shadow: 0 0 15px rgba(6, 182, 212, 0.4); } .node-solar { top: 70px; left: 5px; } .node-grid { top: 70px; left: 165px; } .node-battery { top: 70px; left: 325px; } .node-house { top: 220px; left: 165px; } .node-c1 { top: 370px; left: 5px; } .node-c2 { top: 370px; left: 165px; } .node-c3 { top: 370px; left: 325px; } svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } .bg-path { fill: none; stroke-width: 6; transition: opacity 0.3s ease; } .bg-solar { stroke: var(--neon-yellow); } .bg-grid { stroke: var(--neon-blue); } .bg-battery { stroke: var(--neon-green); } .bg-export { stroke: var(--neon-red); } .bg-c1 { stroke: #a855f7; } .bg-c2 { stroke: #f97316; } .bg-c3 { stroke: #06b6d4; } .flow-line { fill: none; stroke-width: var(--flow-stroke-width, 8px); stroke-linecap: round; stroke-dasharray: var(--flow-dasharray); animation: dash linear infinite; opacity: 0; transition: opacity 0.5s; } .flow-solar { stroke: var(--neon-yellow); } .flow-grid { stroke: var(--neon-blue); } .flow-battery { stroke: var(--neon-green); } .flow-export { stroke: var(--neon-red); } @keyframes dash { to { stroke-dashoffset: -1500; } } .flow-text { font-size: 10px; font-weight: bold; text-anchor: middle; fill: #fff; filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.8)); transition: opacity 0.3s ease; } .flow-text.no-shadow { filter: none; } .text-solar { fill: var(--neon-yellow); } .text-grid { fill: var(--neon-blue); } .text-export { fill: var(--neon-red); } .text-battery { fill: var(--neon-green); } `; } // --- SVG ICON RENDERER --- _renderIcon(type, val = 0, colorOverride = null) { if (type === 'solar') { const animate = Math.round(val) > 0 ? 'spin-slow' : ''; const color = colorOverride || 'var(--neon-yellow)'; return html``; } if (type === 'grid') { const animate = Math.round(val) > 0 ? 'pulse' : ''; 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 rectColor = soc > 0.2 ? 'var(--neon-green)' : 'var(--neon-red)'; return html``; } if (type === 'house') { const strokeColor = colorOverride || 'var(--neon-pink)'; return html``; } if (type === 'car') { return html``; } if (type === 'heater') { return html``; } if (type === 'pool') { return html``; } return html``; } _formatPower(val) { if (val === 0) return "0"; if (Math.abs(val) >= 1000) { return (val / 1000).toFixed(1) + " kW"; } return Math.round(val) + " W"; } // --- DOM NODE SVG GENERATOR --- _renderSVGPath(d, color) { const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute("d", d); path.setAttribute("class", "bracket-line"); path.setAttribute("stroke", color); path.setAttribute("stroke-width", "1.5"); path.setAttribute("fill", "none"); path.style.stroke = color; path.style.fill = "none"; return path; } // --- SQUARE BRACKET GENERATOR --- _createBracketPath(startPx, widthPx, direction) { if (widthPx < 5) return ""; const r = 5; const startX = startPx; const endX = startPx + widthPx; let yBase, yLine; if (direction === 'down') { yBase = 24; yLine = 4; } else { yBase = 0; yLine = 20; } const height = Math.abs(yBase - yLine); const rEff = Math.min(r, height / 2, widthPx / 2); const yCorner = direction === 'down' ? yLine + rEff : yLine - rEff; return ` M ${startX} ${yBase} L ${startX} ${yCorner} Q ${startX} ${yLine} ${startX + rEff} ${yLine} L ${endX - rEff} ${yLine} Q ${endX} ${yLine} ${endX} ${yCorner} L ${endX} ${yBase} `; } // --- RENDER COMPACT VIEW --- _renderCompactView(entities) { // 1. Get Values const getVal = (entity) => { const state = this.hass.states[entity]; return state ? parseFloat(state.state) || 0 : 0; }; const solar = entities.solar ? Math.max(0, getVal(entities.solar)) : 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; } const c1Val = entities.consumer_1 ? getVal(entities.consumer_1) : 0; // EV Value // 2. Logic Calculation let gridImport = 0; let gridExport = 0; if (entities.grid_export && entities.grid_export !== "") { gridImport = gridMain > 0 ? gridMain : 0; gridExport = Math.abs(gridExportSensor); } else { gridImport = gridMain > 0 ? gridMain : 0; gridExport = gridMain < 0 ? Math.abs(gridMain) : 0; } const batteryCharge = battery > 0 ? battery : 0; const batteryDischarge = battery < 0 ? Math.abs(battery) : 0; let solarToBatt = 0; let gridToBatt = 0; if (batteryCharge > 0) { if (solar >= batteryCharge) { solarToBatt = batteryCharge; gridToBatt = 0; } else { solarToBatt = solar; gridToBatt = batteryCharge - solar; } } const solarTotalToCons = Math.max(0, solar - solarToBatt - gridExport); const gridTotalToCons = Math.max(0, gridImport - gridToBatt); const battTotalToCons = batteryDischarge; const totalCons = solarTotalToCons + gridTotalToCons + battTotalToCons; // Calculate Splits let evPower = 0; let housePower = totalCons; if (c1Val > 0 && totalCons > 0) { evPower = Math.min(c1Val, totalCons); housePower = totalCons - evPower; } // Calculate Total Bar Width (Flux) // The Bar represents: Battery Discharge + Solar + Grid Import // This MUST equal: House + EV + Export + Battery Charge // SOURCES (for Bar Segments) const srcBattery = batteryDischarge; const srcSolar = solar; // Solar includes Export + Charge + Cons const srcGrid = gridImport; const totalFlux = srcBattery + srcSolar + srcGrid; // DESTINATIONS (for Bottom Brackets) const destHouse = housePower; const destEV = evPower; const destExport = gridExport; // Note: Battery Charge is also a destination (internal flow), but usually not bracketed if we only want "Consumers" // If we don't bracket Charge, there will be a gap. We can accept that or add a Charge bracket. // Given user request "Only EV... and Grid Export", we stick to those. const threshold = 0.1; const availableWidth = (this._cardWidth && this._cardWidth > 0) ? this._cardWidth : (this.offsetWidth || 400); const fullWidth = availableWidth - 40; if (totalFlux <= threshold) { return html`
Waiting for data...
`; } // --- GENERATE BAR SEGMENTS (Aggregated by Source) --- // Order: Battery -> Solar -> Grid const barSegments = []; let currentX = 0; const addSegment = (val, color, type, label, entityId) => { if (val <= threshold) return; const pct = val / totalFlux; const width = pct * fullWidth; barSegments.push({ val, color, widthPct: pct * 100, widthPx: width, startPx: currentX, type, label, entityId }); currentX += width; } 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(--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 }; }); // --- GENERATE BOTTOM BRACKETS (Independent Calculation) --- // Order: House -> EV -> Export const bottomBrackets = []; let bottomX = 0; const addBottomBracket = (val, type, entityId = null) => { if (val <= threshold) return; const pct = val / totalFlux; const width = pct * fullWidth; let icon = ''; let iconColor = ''; 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({ path, width: width, center: bottomX + (width / 2), icon, iconColor, val, entityId }); bottomX += width; }; addBottomBracket(destHouse, 'house', entities.house); addBottomBracket(destEV, 'car', entities.consumer_1); 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. // This leaves a gap at the end (or between segments depending on logic), which is visually correct // as "Internal/Stored Energy" is not an external output. return html`
${topBrackets.map(b => this._renderSVGPath(b.path, b.iconColor))} ${topBrackets.map(b => b.width > 20 ? html`
b.entityId && this._handleClick(b.entityId)}>
` : '')}
${barSegments.map(s => html`
s.entityId && this._handleClick(s.entityId)}> ${s.widthPx > 35 ? this._formatPower(s.val) : ''}
`)}
${bottomBrackets.map(b => this._renderSVGPath(b.path, b.iconColor))} ${bottomBrackets.map(b => b.width > 20 ? html`
b.entityId && this._handleClick(b.entityId)}>
` : '')}
`; } // --- RENDER STANDARD VIEW --- _renderStandardView(entities) { // FIX: Default to hidden unless explicitly set to false const hideInactive = this.config.hide_inactive_flows !== false; const globalFlowRate = this.config.show_flow_rates !== false; // FLOW RATE TOGGLES const showFlowSolar = this.config.show_flow_rate_solar !== undefined ? this.config.show_flow_rate_solar : globalFlowRate; const showFlowGrid = this.config.show_flow_rate_grid !== undefined ? this.config.show_flow_rate_grid : globalFlowRate; const showFlowBattery = this.config.show_flow_rate_battery !== undefined ? this.config.show_flow_rate_battery : globalFlowRate; // LABEL TOGGLES const showLabelSolar = this.config.show_label_solar === true; const showLabelGrid = this.config.show_label_grid === true; const showLabelBattery = this.config.show_label_battery === true; const showLabelHouse = this.config.show_label_house === true; const useColoredValues = this.config.use_colored_values === true; const showDonut = this.config.show_donut_border === true; const showTail = this.config.show_comet_tail === true; const showDashedLine = this.config.show_dashed_line === true; const showTint = this.config.show_tinted_background === true; const hideConsumerIcons = this.config.hide_consumer_icons === true; const showNeonGlow = this.config.show_neon_glow !== false; // CUSTOM LABELS const labelSolarText = this.config.solar_label || this._localize('card.label_solar'); 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'); // CUSTOM ICONS const iconSolar = this.config.solar_icon; const iconGrid = this.config.grid_icon; const iconBattery = this.config.battery_icon; // Determine existence of main entities const hasSolar = !!(entities.solar && entities.solar !== ""); const hasGrid = !!(entities.grid && entities.grid !== ""); const hasBattery = !!(entities.battery && entities.battery !== ""); const styleSolar = hasSolar ? '' : 'display: none;'; const styleSolarBatt = (hasSolar && hasBattery) ? '' : 'display: none;'; const styleGrid = hasGrid ? '' : 'display: none;'; const styleGridBatt = (hasGrid && hasBattery) ? '' : 'display: none;'; const styleBattery = hasBattery ? '' : 'display: none;'; 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 getVal = (entity) => { const state = this.hass.states[entity]; return state ? parseFloat(state.state) || 0 : 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 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; const solar = hasSolar ? getVal(entities.solar) : 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) { battery *= -1; } const battSoc = (hasBattery && entities.battery_soc) ? getVal(entities.battery_soc) : 0; const solarVal = Math.max(0, solar); let gridImport = 0; let gridExport = 0; if (hasGrid) { if (entities.grid_export && entities.grid_export !== "") { gridImport = gridMain > 0 ? gridMain : 0; gridExport = Math.abs(gridExpSensor); } else { gridImport = gridMain > 0 ? gridMain : 0; gridExport = gridMain < 0 ? Math.abs(gridMain) : 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) { if (solarVal >= batteryCharge) { solarToBatt = batteryCharge; gridToBatt = 0; } else { solarToBatt = solarVal; gridToBatt = batteryCharge - solarVal; } } const solarToHouse = Math.max(0, solarVal - solarToBatt - gridExport); const gridToHouse = Math.max(0, gridImport - gridToBatt); const house = solarToHouse + gridToHouse + batteryDischarge; const isTopArcActive = (solarToBatt > 0); const topShift = isTopArcActive ? 0 : 50; let baseHeight = anyBottomVisible ? 480 : 340; const contentHeight = baseHeight - topShift; const designWidth = 420; const availableWidth = this._cardWidth || designWidth; let scale = availableWidth / designWidth; const userZoom = this.config.zoom !== undefined ? this.config.zoom : 0.9; scale = scale * userZoom; if (scale < 0.5) scale = 0.5; if (scale > 1.5) scale = 1.5; const finalCardHeightPx = contentHeight * scale; let houseGradientVal = ''; let houseTextCol = useColoredValues ? 'var(--neon-pink)' : ''; const tintClass = showTint ? 'tinted' : ''; const glowClass = showNeonGlow ? 'glow' : ''; let houseDominantColor = 'var(--neon-pink)'; if (house > 0) { if (solarToHouse >= gridToHouse && solarToHouse >= batteryDischarge) { houseDominantColor = 'var(--neon-yellow)'; } else if (gridToHouse >= solarToHouse && gridToHouse >= batteryDischarge) { houseDominantColor = 'var(--neon-blue)'; } else if (batteryDischarge >= solarToHouse && batteryDischarge >= gridToHouse) { houseDominantColor = 'var(--neon-green)'; } } if (showDonut) { if (house > 0) { const pctSolar = (solarToHouse / house) * 100; const pctGrid = (gridToHouse / house) * 100; const pctBatt = (batteryDischarge / house) * 100; let stops = []; let current = 0; if (pctSolar > 0) { stops.push(`var(--neon-yellow) ${current}% ${current + pctSolar}%`); current += pctSolar; } 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(${stops.join(', ')})`; if (useColoredValues) { const maxVal = Math.max(solarToHouse, gridToHouse, batteryDischarge); if (maxVal > 0) { if (maxVal === solarToHouse) houseTextCol = 'var(--neon-yellow)'; else if (maxVal === gridToHouse) houseTextCol = 'var(--neon-blue)'; else if (maxVal === batteryDischarge) houseTextCol = 'var(--neon-green)'; } else { houseTextCol = 'var(--neon-pink)'; } } } else { houseGradientVal = `var(--neon-pink)`; houseTextCol = useColoredValues ? 'var(--neon-pink)' : ''; } } else { houseTextCol = useColoredValues ? 'var(--neon-pink)' : ''; } const houseTintStyle = showTint ? `background: color-mix(in srgb, ${houseDominantColor}, transparent 85%);` : ''; const houseGlowStyle = showNeonGlow ? `box-shadow: 0 0 15px color-mix(in srgb, ${houseDominantColor}, transparent 60%);` : `box-shadow: none;`; const houseBubbleStyle = `${showDonut ? `--house-gradient: ${houseGradientVal};` : ''} ${houseTintStyle} ${houseGlowStyle}`; const isSolarActive = Math.round(solarVal) > 0; const isGridActive = Math.round(gridImport) > 0; 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)); // Adjust speed for dashed line (Factor to slow down: 5x) if (showDashedLine) { duration = duration * 5; } return `opacity: 1; animation-duration: ${duration}s;`; }; const getPipeStyle = (val) => { if (!hideInactive) return "opacity: 0.2;"; return val > 1 ? "opacity: 0.2;" : "opacity: 0;"; }; const getTextStyle = (val, type) => { let isVisible = false; if (type === 'solar') isVisible = showFlowSolar; else if (type === 'grid') isVisible = showFlowGrid; else if (type === 'battery') isVisible = showFlowBattery; if (!isVisible) return "display: none;"; return val > 5 ? "opacity: 1;" : "opacity: 0;"; }; const getColorStyle = (colorVar) => { return useColoredValues ? `color: var(${colorVar});` : ''; }; const getConsumerColorStyle = (hex) => { return useColoredValues ? `color: ${hex};` : ''; } const renderLabel = (text, isVisible) => { if (!isVisible) return html``; return html`
${text}
`; }; 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);' : ''))); return html``; } 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' : ''; if (hideConsumerIcons) { iconContent = html``; } else if (customIcon) { iconContent = html``; } else { iconContent = this._renderIcon(iconType, val); } return html`
${iconContent} ${renderLabel(label, true)}
${this._formatPower(val)}
`; }; const getConsumerPipeStyle = (isActive, val) => { if (!isActive) return "display: none;"; return getPipeStyle(val); }; const getConsumerAnimStyle = (isActive, val) => { if (!isActive) return "display: none;"; return getAnimStyle(val); }; 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 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 = houseTextCol ? `color: ${houseTextCol};` : ''; const dashArrayVal = showTail ? '30 360' : (showDashedLine ? '13 13' : '0 380'); const strokeWidthVal = showDashedLine ? 4 : 8; return html`
${this._formatPower(solarToHouse)} ${this._formatPower(solarToBatt)} ${this._formatPower(gridToHouse)} ${this._formatPower(gridExport)} ${this._formatPower(gridToBatt)} ${this._formatPower(batteryDischarge)} ${hasSolar ? html`
${renderMainIcon('solar', solarVal, iconSolar, solarColor)} ${renderLabel(labelSolarText, showLabelSolar)}
${this._formatPower(solarVal)}
` : ''} ${hasGrid ? html`
${renderMainIcon('grid', gridImport, iconGrid, gridColor)} ${renderLabel(labelGridText, showLabelGrid)}
${this._formatPower(gridImport)}
` : ''} ${hasBattery ? html`
${renderMainIcon('battery', battSoc, iconBattery)} ${renderLabel(labelBatteryText, showLabelBattery)}
${Math.round(battSoc)}%
` : ''}
${renderMainIcon('house', 0, null, houseDominantColor)} ${renderLabel(labelHouseText, showLabelHouse)}
${this._formatPower(house)}
${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')}
`; } render() { if (!this.config || !this.hass) return html``; // SWITCH VIEW BASED ON CONFIG if (this.config.compact_view === true) { return this._renderCompactView(this.config.entities || {}); } else { return this._renderStandardView(this.config.entities || {}); } } } customElements.define("power-flux-card", PowerFluxCard); })(); window.customCards = window.customCards || []; window.customCards.push({ type: "power-flux-card", name: "Power Flux Card", description: "Advanced Animated Energy Flow Card", });