Skip to content

Commit

Permalink
feat: the animated flow can be inverted for each of the card sections…
Browse files Browse the repository at this point in the history 
…. Discussed in #463

feat: add a custom label for the "DAILY LOAD". Discussee in #527
chore: update documentation
  • Loading branch information
@slipx06
slipx06 committed Oct 26, 2024
1 parent a14d7c4 commit 8640b96
Show file tree
Hide file tree
Showing 23 changed files with 284 additions and 227 deletions.
6 changes: 3 additions & 3 deletions dist/sunsynk-power-flow-card.js
View file

Large diffs are not rendered by default.

379 changes: 192 additions & 187 deletions docs/configuration.md
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "sunsynk-power-flow-card",
"version": "5.2.0",
"version": "5.3.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
34 changes: 18 additions & 16 deletions src/cards/compact-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
y="${[2, 3, 4].includes(data.additionalLoad) ? '189' : '282.1'}"
class="st3 left-align"
fill="${!data.loadShowDaily ? 'transparent' : `${data.loadColour}`}">
${localize('common.daily_load')}
${config.load.label_daily_load || localize('common.daily_load')}
</text>
<text id="daily_grid_buy" x="5" y="282.1" class="st3 left-align"
fill="${data.gridShowDailyBuy !== true ? 'transparent' : `${data.gridColour}`}"
Expand Down Expand Up @@ -414,7 +414,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
class="${!config.show_solar ? 'st12' : ''}"
fill="${Math.round(data.pv1PowerWatts) <= 0 ? 'transparent' : `${data.solarColour}`}">
<animateMotion dur="${data.durationCur['pv1']}s" repeatCount="indefinite"
keyPoints="0;1"
keyPoints=${config.solar.invert_flow === true ? Utils.invertKeyPoints("0;1") : "0;1"}
keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#pv1-line"/>
</animateMotion>
Expand All @@ -431,7 +431,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
class="${!config.show_solar || config.solar.mppts === 1 ? 'st12' : ''}"
fill="${Math.round(data.pv2PowerWatts) <= 0 ? 'transparent' : `${data.solarColour}`}">
<animateMotion dur="${data.durationCur['pv2']}s" repeatCount="indefinite"
keyPoints="0;1"
keyPoints=${config.solar.invert_flow === true ? Utils.invertKeyPoints("0;1") : "0;1"}
keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#pv2-line"/>
</animateMotion>
Expand All @@ -448,7 +448,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
class="${!config.show_solar || [1, 2].includes(config.solar.mppts) ? 'st12' : ''}"
fill="${Math.round(data.pv3PowerWatts) <= 0 ? 'transparent' : `${data.solarColour}`}">
<animateMotion dur="${data.durationCur['pv3']}s" repeatCount="indefinite"
keyPoints="0;1"
keyPoints="${config.solar.invert_flow === true ? Utils.invertKeyPoints("0;1") : "0;1"}
keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#pv3-line"/>
</animateMotion>
Expand All @@ -465,7 +465,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
class="${!config.show_solar || [1, 2, 3].includes(config.solar.mppts) ? 'st12' : ''}"
fill="${Math.round(data.pv4PowerWatts) <= 0 ? 'transparent' : `${data.solarColour}`}">
<animateMotion dur="${data.durationCur['pv4']}s" repeatCount="indefinite"
keyPoints="0;1"
keyPoints=${config.solar.invert_flow === true ? Utils.invertKeyPoints("0;1") : "0;1"}
keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#pv4-line"/>
</animateMotion>
Expand All @@ -482,7 +482,8 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
class="${!config.show_battery ? 'st12' : ''}"
fill="${data.batteryPower < 0 || data.batteryPower === 0 ? 'transparent' : `${data.batteryColour}`}">
<animateMotion dur="${data.durationCur['battery']}s" repeatCount="indefinite"
keyPoints="1;0" keyTimes="0;1" calcMode="linear">
keyPoints=${config.battery.invert_flow === true ? Utils.invertKeyPoints("1;0") : "1;0"}
keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#bat-line"/>
</animateMotion>
</circle>
Expand All @@ -491,7 +492,8 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
class="${!config.show_battery ? 'st12' : ''}"
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">
keyPoints=${config.battery.invert_flow === true ? Utils.invertKeyPoints("0;1") : "0;1"}
keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#bat-line"/>
</animateMotion>
</circle>
Expand All @@ -507,7 +509,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
class="${!config.show_solar || config.solar.mppts === 1 ? 'st12' : ''}"
fill="${data.totalPV === 0 ? 'transparent' : `${data.solarColour}`}">
<animateMotion dur="${data.durationCur['solar']}s" repeatCount="indefinite"
keyPoints="1;0"
keyPoints=${config.solar.invert_flow === true ? Utils.invertKeyPoints("1;0") : "1;0"}
keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#so-line"/>
</animateMotion>
Expand All @@ -522,7 +524,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
fill="${data.totalGridPower < 0 || data.totalGridPower === 0 ? 'transparent' : `${data.gridColour}`}"
display="${!config.show_grid ? 'none' : ''}">
<animateMotion dur="${data.durationCur['grid']}s" repeatCount="indefinite"
keyPoints="0;1"
keyPoints=${config.grid.invert_flow === true ? Utils.invertKeyPoints("0;1") : "0;1"}
keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#grid-line"/>
</animateMotion>
Expand All @@ -532,7 +534,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
fill="${data.totalGridPower > 0 || data.totalGridPower === 0 ? 'transparent' : `${data.gridColour}`}"
display="${!config.show_grid ? 'none' : ''}">
<animateMotion dur="${data.durationCur['grid']}s" repeatCount="indefinite"
keyPoints="1;0"
keyPoints=${config.grid.invert_flow === true ? Utils.invertKeyPoints("1;0") : "1;0"}
keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#grid-line"/>
</animateMotion>
Expand All @@ -547,7 +549,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
fill="${data.totalGridPower < 0 || data.totalGridPower === 0 ? 'transparent' : `${data.gridColour}`}"
display="${!config.show_grid ? 'none' : ''}">
<animateMotion dur="${data.durationCur['grid']}s" repeatCount="indefinite"
keyPoints="1;0"
keyPoints=${config.grid.invert_flow === true ? Utils.invertKeyPoints("1;0") : "1;0"}
keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#grid-line1"/>
</animateMotion>
Expand All @@ -557,7 +559,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
fill="${data.totalGridPower > 0 || data.totalGridPower === 0 ? 'transparent' : `${data.gridColour}`}"
display="${!config.show_grid ? 'none' : ''}">
<animateMotion dur="${data.durationCur['grid']}s" repeatCount="indefinite"
keyPoints="0;1"
keyPoints=${config.grid.invert_flow === true ? Utils.invertKeyPoints("0;1") : "0;1"}
keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#grid-line1"/>
</animateMotion>
Expand All @@ -570,7 +572,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
r="${Math.min(2 + data.loadLineWidth + Math.max(data.minLineWidth - 2, 0), 8)}"
fill="${data.essentialPower === 0 || data.essentialPower < 0 ? 'transparent' : `${config.load.dynamic_colour ? data.flowColour : data.loadColour}`}">
<animateMotion dur="${data.durationCur['load']}s" repeatCount="indefinite"
keyPoints="1;0"
keyPoints=${config.load.invert_flow === true ? Utils.invertKeyPoints("1;0") : "1;0"}
keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#es-line"/>
</animateMotion>
Expand All @@ -579,7 +581,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
r="${Math.min(2 + data.loadLineWidth + Math.max(data.minLineWidth - 2, 0), 8)}"
fill="${data.essentialPower === 0 || data.essentialPower > 0 ? 'transparent' : `${config.load.dynamic_colour ? data.flowColour : data.loadColour}`}">
<animateMotion dur="${data.durationCur['load']}s" repeatCount="indefinite"
keyPoints="0;1"
keyPoints=${config.load.invert_flow === true ? Utils.invertKeyPoints("0;1") : "0;1"}
keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#es-line"/>
</animateMotion>
Expand All @@ -592,7 +594,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
r="${Math.min(2 + data.loadLineWidth + Math.max(data.minLineWidth - 2, 0), 8)}"
fill="${data.essentialPower === 0 || data.essentialPower < 0 ? 'transparent' : `${config.load.dynamic_colour ? data.flowColour : data.loadColour}`}">
<animateMotion dur="${data.durationCur['load']}s" repeatCount="indefinite"
keyPoints="0;1"
keyPoints=${config.load.invert_flow === true ? Utils.invertKeyPoints("0;1") : "0;1"}
keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#es-line1"/>
</animateMotion>
Expand All @@ -601,7 +603,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
r="${Math.min(2 + data.loadLineWidth + Math.max(data.minLineWidth - 2, 0), 8)}"
fill="${data.essentialPower === 0 || data.essentialPower > 0 ? 'transparent' : `${config.load.dynamic_colour ? data.flowColour : data.loadColour}`}">
<animateMotion dur="${data.durationCur['load']}s" repeatCount="indefinite"
keyPoints="1;0"
keyPoints=${config.load.invert_flow === true ? Utils.invertKeyPoints("1;0") : "1;0"}
keyTimes="0;1" calcMode="linear">
<mpath xlink:href="#es-line1"/>
</animateMotion>
Expand Down
Loading

0 comments on commit 8640b96

Please sign in to comment.