Skip to content

Commit

Permalink
feat: apply dynamic colour for load and battery to the flow paths closes
Browse files Browse the repository at this point in the history
 #449

fix: handle wh, kwh and mwh for battery energy sonsor
fix: alignment of non_essential load 1 and load 2 extra information
fix: alignment of energy_cost_sell and energy_cost_buy data
fix  alignment of daily load on full card
  • Loading branch information
slipx06 committed May 26, 2024
1 parent a84d4c0 commit fb10aeb
Show file tree
Hide file tree
Showing 7 changed files with 69 additions and 36 deletions.
8 changes: 4 additions & 4 deletions dist/sunsynk-power-flow-card.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "sunsynk-power-flow-card",
"version": "4.38.0",
"version": "4.39.0",
"description": "A customizable Home Assistant card to emulate the Sunsynk System flow that's displayed on the Inverter screen.",
"main": "sunsynk-power-flow-card.js",
"scripts": {
Expand Down
16 changes: 8 additions & 8 deletions src/cards/compact-card.ts
Original file line number Diff line number Diff line change
Expand Up @@ -437,9 +437,9 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
<path id="bat-line"
d="${data.compactMode ? 'M 239 250 L 239 290' : 'M 239 250 L 239 324'}"
class="${!config.show_battery ? 'st12' : ''}" fill="none"
stroke="${data.batteryColour}" stroke-width="${data.batLineWidth}" stroke-miterlimit="10"
stroke="${config.battery.dynamic_colour ? data.flowBatColour : data.batteryColour}" stroke-width="${data.batLineWidth}" stroke-miterlimit="10"
pointer-events="stroke"/>
<circle id="power-dot-charge" cx="0" cy="0"
<circle id="power-dot-discharge" cx="0" cy="0"
r="${Math.min(2 + data.batLineWidth + Math.max(data.minLineWidth - 2, 0), 8)}"
class="${!config.show_battery ? 'st12' : ''}"
fill="${data.batteryPower < 0 || data.batteryPower === 0 ? 'transparent' : `${data.batteryColour}`}">
Expand All @@ -448,10 +448,10 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
<mpath xlink:href="#bat-line"/>
</animateMotion>
</circle>
<circle id="power-dot-discharge" cx="0" cy="0"
<circle id="power-dot-charge" cx="0" cy="0"
r="${Math.min(2 + data.batLineWidth + Math.max(data.minLineWidth - 2, 0), 8)}"
class="${!config.show_battery ? 'st12' : ''}"
fill="${data.batteryPower > 0 || data.batteryPower === 0 ? 'transparent' : `${data.batteryColour}`}">
fill="${data.batteryPower > 0 || data.batteryPower === 0 ? 'transparent' : `${config.battery.dynamic_colour ? data.flowBatColour : data.batteryColour}`}">
<animateMotion dur="${data.durationCur['battery']}s" repeatCount="indefinite"
keyPoints="0;1" keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#bat-line"/>
Expand Down Expand Up @@ -526,11 +526,11 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
</circle>
</svg>
<svg id="load-flow">
<path id="es-line" d="M 304 218.5 L 264.7 218.5" fill="none" stroke="${data.loadColour}"
<path id="es-line" d="M 304 218.5 L 264.7 218.5" fill="none" stroke="${config.load.dynamic_colour ? data.flowColour : data.loadColour}"
stroke-width="${data.loadLineWidth}" stroke-miterlimit="10" pointer-events="stroke"/>
<circle id="es-dot" cx="0" cy="0"
r="${Math.min(2 + data.loadLineWidth + Math.max(data.minLineWidth - 2, 0), 8)}"
fill="${data.essentialPower === 0 ? 'transparent' : `${data.loadColour}`}">
fill="${data.essentialPower === 0 ? 'transparent' : `${config.load.dynamic_colour ? data.flowColour : data.loadColour}`}">
<animateMotion dur="${data.durationCur['load']}s" repeatCount="indefinite"
keyPoints="1;0"
keyTimes="0;1" calcMode="linear">
Expand All @@ -539,11 +539,11 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
</circle>
</svg>
<svg id="load-flow1">
<path id="es-line1" d="M 374 218.5 L 402.38 218.5" fill="none" stroke="${data.loadColour}"
<path id="es-line1" d="M 374 218.5 L 402.38 218.5" fill="none" stroke="${config.load.dynamic_colour ? data.flowColour : data.loadColour}"
stroke-width="${data.loadLineWidth}" stroke-miterlimit="10" pointer-events="stroke"/>
<circle id="es-dot" cx="0" cy="0"
r="${Math.min(2 + data.loadLineWidth + Math.max(data.minLineWidth - 2, 0), 8)}"
fill="${data.essentialPower === 0 ? 'transparent' : `${data.loadColour}`}">
fill="${data.essentialPower === 0 ? 'transparent' : `${config.load.dynamic_colour ? data.flowColour : data.loadColour}`}">
<animateMotion dur="${data.durationCur['load']}s" repeatCount="indefinite"
keyPoints="0;1"
keyTimes="0;1" calcMode="linear">
Expand Down
47 changes: 29 additions & 18 deletions src/cards/full-card.ts
Original file line number Diff line number Diff line change
Expand Up @@ -323,12 +323,12 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
display="${[4].includes(data.additionalLoad) ? '' : 'none'}" fill="${data.loadColour}">
${config.load.load4_name}
</text>
<text id="daily_load_aux" x="${data.additionalAuxLoad === 2 ? '238' : '306'}" y="93"
<text id="daily_load_aux" x="${data.additionalAuxLoad === 2 ? '238' : '238'}" y="93"
class="st3 left-align"
fill="${!data.loadShowDaily || !data.showAux ? 'transparent' : `${data.loadColour}`}">
${localize('common.daily_load')}
</text>
<text id="daily_load" x="${data.additionalLoad === 0 ? '377' : '306'}"
<text id="daily_load" x="${data.additionalLoad === 0 ? '377' : '238'}"
y="${data.additionalLoad === 0 ? 71 : 93}" class="st3 left-align"
fill="${!data.loadShowDaily || data.showAux ? 'transparent' : `${data.loadColour}`}">
${localize('common.daily_load')}
Expand Down Expand Up @@ -437,7 +437,7 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
fill="${data.auxDynamicColourLoad2}">${config.load.aux_load2_name}
</text>
<text id="aux_daily_text"
x="${[1, 2].includes(data.additionalAuxLoad) ? '238' : '306'}" y="24"
x="${[1, 2].includes(data.additionalAuxLoad) ? '238' : '238'}" y="24"
class="st3 left-align"
display="${!data.showAux || data.showDailyAux !== true ? 'none' : ''}"
fill="${data.auxDynamicColour}">${config.load.aux_daily_name}
Expand Down Expand Up @@ -568,9 +568,9 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
<svg id="battery-flow">
<path id="bat-line" d="M 155 280 L 91 280 Q 85 280 86 286 L 86 297"
class="${!config.show_battery ? 'st12' : ''}" fill="none"
stroke="${data.batteryColour}" stroke-width="${data.batLineWidth}" stroke-miterlimit="10"
stroke="${config.battery.dynamic_colour ? data.flowBatColour : data.batteryColour}" stroke-width="${data.batLineWidth}" stroke-miterlimit="10"
pointer-events="stroke"/>
<circle id="power-dot-charge" cx="0" cy="0"
<circle id="power-dot-discharge" cx="0" cy="0"
r="${Math.min(2 + data.batLineWidth + Math.max(data.minLineWidth - 2, 0), 8)}"
class="${!config.show_battery ? 'st12' : ''}"
fill="${data.batteryPower < 0 || data.batteryPower === 0 ? 'transparent' : `${data.batteryColour}`}">
Expand All @@ -579,10 +579,10 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
<mpath xlink:href="#bat-line"/>
</animateMotion>
</circle>
<circle id="power-dot-discharge" cx="0" cy="0"
<circle id="power-dot-charge" cx="0" cy="0"
r="${Math.min(2 + data.batLineWidth + Math.max(data.minLineWidth - 2, 0), 8)}"
class="${!config.show_battery ? 'st12' : ''}"
fill="${data.batteryPower > 0 || data.batteryPower === 0 ? 'transparent' : `${data.batteryColour}`}">
fill="${data.batteryPower > 0 || data.batteryPower === 0 ? 'transparent' : `${config.battery.dynamic_colour ? data.flowBatColour : data.batteryColour}`}">
<animateMotion dur="${data.durationCur['battery']}s" repeatCount="indefinite"
keyPoints="0;1" keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#bat-line"/>
Expand Down Expand Up @@ -758,28 +758,28 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
<svg id="load-flow">
<circle id="es-dot" cx="0" cy="0"
r="${Math.min(2 + data.loadLineWidth + Math.max(data.minLineWidth - 2, 0), 8)}"
fill="${data.essentialPower === 0 ? 'transparent' : `${data.loadColour}`}">
fill="${data.essentialPower === 0 ? 'transparent' : `${config.load.dynamic_colour ? data.flowColour : data.loadColour}`}">
<animateMotion dur="${data.durationCur['load']}s" repeatCount="indefinite"
keyPoints="0;1"
keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#es-line2"/>
</animateMotion>
</circle>
<path id="es-line2" d="M 306 118 L 371 118" fill="none" stroke="${data.loadColour}"
<path id="es-line2" d="M 306 118 L 371 118" fill="none" stroke="${config.load.dynamic_colour ? data.flowColour : data.loadColour}"
stroke-width="${data.loadLineWidth}" stroke-miterlimit="10" pointer-events="stroke"/>
</svg>
<svg id="load1-flow">
<circle id="es-dot" cx="0" cy="0"
r="${Math.min(2 + data.loadLineWidth + Math.max(data.minLineWidth - 2, 0), 8)}"
fill="${data.essentialPower === 0 ? 'transparent' : `${data.loadColour}`}">
fill="${data.essentialPower === 0 ? 'transparent' : `${config.load.dynamic_colour ? data.flowColour : data.loadColour}`}">
<animateMotion dur="${data.durationCur['load']}s" repeatCount="indefinite"
keyPoints="1;0"
keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#es-line"/>
</animateMotion>
</circle>
<path id="es-line" d="M 236 118 L 190 118 Q 180 118 180 128 L 180 162" fill="none"
stroke="${data.loadColour}" stroke-width="${data.loadLineWidth}" stroke-miterlimit="10"
stroke="${config.load.dynamic_colour ? data.flowColour : data.loadColour}" stroke-width="${data.loadLineWidth}" stroke-miterlimit="10"
pointer-events="stroke"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" x="154.5" y="224.75" width="54"
Expand Down Expand Up @@ -1591,15 +1591,15 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
</text>
</a>
<a href="#" @click=${(e) => Utils.handlePopup(e, config.entities.day_load_energy_84)}>
<text id="daily_load_value_aux" x="${data.additionalAuxLoad === 2 ? '238' : '306'}" y="80"
<text id="daily_load_value_aux" x="${data.additionalAuxLoad === 2 ? '238' : '238'}" y="80"
class="st10 left-align"
display="${!data.loadShowDaily || !data.showAux || !data.stateDayLoadEnergy.isValid() ? 'none' : ''}"
fill="${data.loadColour}">
${data.stateDayLoadEnergy.toPowerString(true, data.decimalPlacesEnergy)}
</text>
</a>
<a href="#" @click=${(e) => Utils.handlePopup(e, config.entities.day_load_energy_84)}>
<text id="daily_load_value" x="${data.additionalLoad === 0 ? '377' : '306'}"
<text id="daily_load_value" x="${data.additionalLoad === 0 ? '377' : '238'}"
y="${data.additionalLoad === 0 ? '57' : '80'}" class="st10 left-align"
display="${!data.loadShowDaily || data.showAux || !data.stateDayLoadEnergy.isValid() ? 'none' : ''}"
fill="${data.loadColour}">
Expand Down Expand Up @@ -1654,7 +1654,7 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
</a>
<a href="#" @click=${(e) => Utils.handlePopup(e, config.entities.day_aux_energy)}>
<text id="aux_daily_value"
x="${[1, 2].includes(data.additionalAuxLoad) ? '238' : '306'}"
x="${[1, 2].includes(data.additionalAuxLoad) ? '238' : '238'}"
y="12" class="st10 left-align"
display="${!data.showAux || data.showDailyAux !== true || !data.stateDayAuxEnergy.isValid() ? 'none' : ''}"
fill="${data.auxDynamicColour}">
Expand Down Expand Up @@ -1694,15 +1694,15 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
</text>
</a>
<a href="#" @click=${(e) => Utils.handlePopup(e, config.entities.non_essential_load1_extra)}>
<text id="non_ess_load1_value_extra" x="320" y="305"
<text id="non_ess_load1_value_extra" x="330" y="305"
display="${config.entities?.non_essential_load1_extra && [1, 2].includes(data.nonessentialLoads) && data.stateNonEssentialLoad1Extra.isValid() && config.show_grid ? '' : 'none'}"
class="st3 right-align" fill="${data.gridColour}">
${data.stateNonEssentialLoad1Extra.toNum(1)}
${data.stateNonEssentialLoad1Extra?.getUOM()}
</text>
</a>
<a href="#" @click=${(e) => Utils.handlePopup(e, config.entities.non_essential_load2_extra)}>
<text id="non_ess_load2_value_extra" x="359" y="305"
<text id="non_ess_load2_value_extra" x="348" y="305"
display="${config.entities?.non_essential_load2_extra && data.nonessentialLoads === 2 && data.stateNonEssentialLoad2Extra.isValid() && config.show_grid ? '' : 'none'}"
class="st3 left-align" fill="${data.gridColour}">
${data.stateNonEssentialLoad2Extra.toNum(1)}
Expand Down Expand Up @@ -1965,14 +1965,25 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
<text id="energy_cost" x="414" y="305" class="${!config.show_grid ? 'st12' : 'st3 right-align'}"
fill="${data.gridColour}"
display="${config.entities?.energy_cost_buy && data.stateEnergyCostBuy.isValid() ? '' : 'none'}" >
${data.energyCost} ${data.stateEnergyCostBuy?.getUOM()}</text>
${data.energyCost}
</text>
<text id="energy_cost" x="414" y="318" class="${!config.show_grid ? 'st12' : 'st3 right-align'}"
fill="${data.gridColour}"
display="${config.entities?.energy_cost_buy && data.stateEnergyCostBuy.isValid() ? '' : 'none'}" >
${data.stateEnergyCostBuy?.getUOM()}
</text>
</a>`
: svg`
<a href="#" @click=${(e) => Utils.handlePopup(e, config.entities.energy_cost_sell)}>
<text id="energy_cost" x="414" y="305" class="${!config.show_grid ? 'st12' : 'st3 right-align'}"
fill="${data.gridColour}"
display="${config.entities?.energy_cost_sell && data.stateEnergyCostSell.isValid() ? '' : 'none'}" >
${data.energyCost} ${data.stateEnergyCostSell?.getUOM()}
${data.energyCost}}
</text>
<text id="energy_cost" x="414" y="318" class="${!config.show_grid ? 'st12' : 'st3 right-align'}"
fill="${data.gridColour}"
display="${config.entities?.energy_cost_sell && data.stateEnergyCostSell.isValid() ? '' : 'none'}" >
${data.stateEnergyCostSell?.getUOM()}
</text>
</a>`
}
Expand Down
Loading

0 comments on commit fb10aeb

Please sign in to comment.