feat: add battery animation, improve layout closes #414

slipx06 · Apr 30, 2024 · 4d93b98 · 4d93b98
1 parent 418828b
commit 4d93b98
Show file tree

Hide file tree

Showing 21 changed files with 42 additions and 22 deletions.
diff --git a/dist/sunsynk-power-flow-card.js b/dist/sunsynk-power-flow-card.js
diff --git a/docs/configuration.md b/docs/configuration.md
@@ -60,6 +60,7 @@ The `invert_power` attribute can be used to reverse direction if needed by your
 | charge_colour:          | Optional     |   | Sets the colour of all the battery card objects when charging. Hex codes (`'#66ff00'` etc) or names (`red`, `green`, `blue` etc)                                                           |
 | dynamic_colour:          | Optional     |  `true` | The battery icon colour will change based on the % contribution of the power source (grid, solar) supplying the battery. Set to `false`  to disable. If `priority_load_243: on` solar will prioritise the essential load. If `false` or ommited solar will prioritise the battery.                                                        |
 | linear_gradient:          | Optional     |  `true` | The blocks inside the battery icon that represent SOC will be coloured using a linear gradient that ranges from red to green                                                            |
+| animate:         | Optional     |  `true` | Animates the linear gradient inside the battery icon                                                            |
 | show_daily:      | Optional     | `false` | Toggles the daily total                                                                                                                                                         |
 | animation_speed: | Optional     | `6`     | Set slowest animation speed in seconds, depending on power draw                                                                                                                 |
 | max_power:       | Optional     | `4500`  | Maximum power draw to calculate animation speed. Numeric value or sensor i.e. `number.battery_maximum_discharging_power`                                                                                                                                |

diff --git a/docs/examples/sunsynk.rst b/docs/examples/sunsynk.rst
@@ -218,6 +218,7 @@ Full Configuration (All Options)
     hide_soc: false
     dynamic_colour: true
     linear_gradient: true
+    animate: true
   solar:
     colour: orange
     show_daily: true

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sunsynk-power-flow-card",
-  "version": "4.34.1",
+  "version": "4.35.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": {

diff --git a/src/cards/compact-card.ts b/src/cards/compact-card.ts
@@ -218,35 +218,35 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
                           fill="${!data.solarShowDaily || !config.show_solar ? 'transparent' : `${data.solarColour}`}">
                         ${localize('common.total_solar_generation')}
                     </text>
-                    <text x="${config.solar.mppts === 1 ? '212.7' : '162'}" y="94" class="st3 st8"
+                    <text x="${config.solar.mppts === 1 ? '230' : '179'}" y="94" class="st3 st8 right-align"
                           display="${!config.show_solar ? 'none' : ''}" fill="${data.solarColour}">
                         ${config.solar.pv1_name}
                     </text>
-                    <text x="${config.solar.mppts === 1 ? '212.7' : '162'}" y="106" class="${[2, 3].includes(config.solar.efficiency) ? 'st3 st8' : 'st12'}"
+                    <text x="${config.solar.mppts === 1 ? '230' : '179'}" y="106" class="${[2, 3].includes(config.solar.efficiency) ? 'st3 st8 right-align' : 'st12'}"
                           display="${!config.show_solar || [0, 1].includes(config.solar.efficiency) ? 'none' : ''}" fill="${data.solarColour}">
                         ${data.PV1Efficiency}%
                     </text>
-                    <text x="264" y="94" class="st3 st8"
+                    <text x="281" y="94" class="st3 st8 right-align"
                           display="${!config.show_solar || config.solar.mppts === 1 ? 'none' : ''}"
                           fill="${data.solarColour}">${config.solar.pv2_name}
                     </text>
-                    <text x="264" y="106" class="${[2, 3].includes(config.solar.efficiency) ? 'st3 st8' : 'st12'}"
+                    <text x="281" y="106" class="${[2, 3].includes(config.solar.efficiency) ? 'st3 st8 right-align' : 'st12'}"
                           display="${!config.show_solar || config.solar.mppts === 1 || [0, 1].includes(config.solar.efficiency) ? 'none' : ''}"
                           fill="${data.solarColour}">${data.PV2Efficiency}%
                     </text>
-                    <text x="88" y="94" class="st3 st8"
+                    <text x="105" y="94" class="st3 st8 right-align"
                           display="${!config.show_solar || [1, 2].includes(config.solar.mppts) ? 'none' : ''}"
                           fill="${data.solarColour}">${config.solar.pv3_name}
                     </text>
-                    <text x="88" y="106" class="${[2, 3].includes(config.solar.efficiency) ? 'st3 st8' : 'st12'}"
+                    <text x="105" y="106" class="${[2, 3].includes(config.solar.efficiency) ? 'st3 st8 right-align' : 'st12'}"
                           display="${!config.show_solar || [1, 2].includes(config.solar.mppts) || [0, 1].includes(config.solar.efficiency) ? 'none' : ''}"
                           fill="${data.solarColour}">${data.PV3Efficiency}%
                     </text>
-                    <text x="340" y="94" class="st3 st8"
+                    <text x="357" y="94" class="st3 st8 right-align"
                           display="${!config.show_solar || [1, 2, 3].includes(config.solar.mppts) ? 'none' : ''}"
                           fill="${data.solarColour}">${config.solar.pv4_name}
                     </text>
-                    <text x="340" y="106" class="${[2, 3].includes(config.solar.efficiency) ? 'st3 st8' : 'st12'}"
+                    <text x="357" y="106" class="${[2, 3].includes(config.solar.efficiency) ? 'st3 st8 right-align' : 'st12'}"
                           display="${!config.show_solar || [1, 2, 3].includes(config.solar.mppts) || [0, 1].includes(config.solar.efficiency) ? 'none' : ''}"
                           fill="${data.solarColour}">${data.PV4Efficiency}%
                     </text>
@@ -731,6 +731,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
                                       stop-color="red"/>
                                 <stop offset="100%"
                                       stop-color="${data.stopColour}"/>
+                                <animate attributeName="${config.battery.animate ? 'y2' : 'none'}" dur="6s" values="100%; 0%" repeatCount="indefinite" />
                             </linearGradient>
                         </defs>
                         <path class="${!config.show_battery ? 'st12' : ''}"
@@ -931,7 +932,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
                     </a>
                     <a href="#" @click=${(e) => Utils.handlePopup(e, config.entities.max_sell_power)}>
                         <text id="max_sell_power" x="5" y="150" class="st3 left-align"
-                            fill="${data.gridColour}"
+                            fill="${['off', '0'].includes(data.stateSolarSell.state) ? 'grey' : data.gridColour}"
                             display="${!config.show_grid || !data.stateMaxSellPower.isValid || !config.entities?.max_sell_power ? 'none' : ''}">
                             ${localize('common.limit')}: ${data.stateMaxSellPower.toPowerString(config.grid.auto_scale, data.decimalPlaces)}
                     </text>
@@ -1097,14 +1098,14 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
                         <text id="pv1_voltage" x="${config.solar.mppts === 1 ? '244.7' : '194'}" y="106"
                               class="st3 left-align"
                               display="${!config.show_solar || !config.entities.pv1_voltage_109 || config.entities.pv1_voltage_109 === 'none' || !data.statePV1Voltage.isValid() ? 'none' : ''}"
-                              fill="${data.solarColour}">${data.statePV1Voltage.toNum(1)} V
+                              fill="${data.solarColour}">${data.statePV1Voltage.toNum(1)} ${UnitOfElectricPotential.VOLT}
                         </text>
                     </a>
                     <a href="#" @click=${(e) => Utils.handlePopup(e, config.entities.pv1_current_110)}>
                         <text id="pv1_current" x="${config.solar.mppts === 1 ? '244.7' : '194'}" y="94"
                               class="st3 left-align"
                               display="${!config.show_solar || !config.entities.pv1_current_110 || config.entities.pv1_current_110 === 'none' || !data.statePV1Current.isValid() ? 'none' : ''}"
-                              fill="${data.solarColour}">${data.statePV1Current.toNum(1)} A
+                              fill="${data.solarColour}">${data.statePV1Current.toNum(1)} ${UnitOfElectricalCurrent.AMPERE}
                         </text>
                     </a>
                     <a href="#" @click=${(e) => Utils.handlePopup(e, config.entities.pv2_voltage_111)}>

diff --git a/src/cards/full-card.ts b/src/cards/full-card.ts
@@ -799,6 +799,7 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
                                       stop-color="red"/>
                                 <stop offset="100%"
                                       stop-color="${data.stopColour}"/>
+                                <animate attributeName="${config.battery.animate ? 'y2' : 'none'}" dur="6s" values="100%; 0%" repeatCount="indefinite" />
                             </linearGradient>
                         </defs>
                         <path class="${!config.show_battery ? 'st12' : ''}"
@@ -1577,7 +1578,7 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
                     <a href="#" @click=${(e) => Utils.handlePopup(e, config.entities.max_sell_power)}>
                         <text id="max_sell_power" x="${!data.showNonessential ? '311' : '347'}"
                             y="${!data.showNonessential ? '309' : '198'}" class="st3 left-align"
-                            fill="${data.gridColour}"
+                            fill="${['off', '0'].includes(data.stateSolarSell.state) ? 'grey' : data.gridColour}"
                             display="${!config.show_grid || !data.stateMaxSellPower.isValid || !config.entities?.max_sell_power ? 'none' : ''}">
                             ${localize('common.limit')}: ${data.stateMaxSellPower.toPowerString(config.grid.auto_scale, data.decimalPlaces)}
                     </text>

diff --git a/src/editor.ts b/src/editor.ts
@@ -149,6 +149,7 @@ export class SunSynkCardEditor extends ScopedRegistryHost(LitElement) implements
                                     {name: 'charge_colour', selector: {color_rgb: {}}},
                                     {name: 'dynamic_colour', selector: {boolean: {}}},
                                     {name: 'linear_gradient', selector: {boolean: {}}},
+                                    {name: 'animate', selector: {boolean: {}}},
                                     {name: 'hide_soc', selector: {boolean: {}}},
                                     {name: 'show_remaining_energy', selector: {boolean: {}}},
                                     {name: 'animation_speed', selector: {number: {}}},

diff --git a/src/localize/languages/ca.json b/src/localize/languages/ca.json
@@ -133,6 +133,7 @@
       "colour": "Colour",
       "charge_colour": "Charge Colour",
       "linear_gradient": "Linear Gradient",
+      "animate": "Animate Linear Gradient",
       "aux_colour": "Colour",
       "aux_off_colour": "Off Colour",
       "panel_mode": "Panel Mode",

diff --git a/src/localize/languages/cs.json b/src/localize/languages/cs.json
@@ -134,6 +134,7 @@
       "colour": "Colour",
       "charge_colour": "Charge Colour",
       "linear_gradient": "Linear Gradient",
+      "animate": "Animate Linear Gradient",
       "aux_colour": "Colour",
       "aux_off_colour": "Off Colour",
       "panel_mode": "Panel Mode",

diff --git a/src/localize/languages/da.json b/src/localize/languages/da.json
@@ -133,6 +133,7 @@
       "colour": "Farve",
       "charge_colour": "Ladnings Farve",
       "linear_gradient": "Lineær Gradient",
+      "animate": "Animate Linear Gradient",
       "aux_colour": "Farve",
       "aux_dynamic_colour": "Aux Dynamisk Farve",
       "aux_off_colour": "Off Farve",

diff --git a/src/localize/languages/de.json b/src/localize/languages/de.json
@@ -133,6 +133,7 @@
       "colour": "Colour",
       "charge_colour": "Charge Colour",
       "linear_gradient": "Linear Gradient",
+      "animate": "Animate Linear Gradient",
       "aux_colour": "Colour",
       "aux_off_colour": "Off Colour",
       "panel_mode": "Panel Mode",

diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json
@@ -134,6 +134,7 @@
     "colour": "Colour",
     "charge_colour": "Charge Colour",
     "linear_gradient": "Linear Gradient",
+    "animate": "Animate Linear Gradient",
     "aux_colour": "Colour",
     "aux_off_colour": "Off Colour",
     "panel_mode": "Panel Mode",

diff --git a/src/localize/languages/es.json b/src/localize/languages/es.json
@@ -134,6 +134,7 @@
       "colour": "Colour",
       "charge_colour": "Charge Colour",
       "linear_gradient": "Linear Gradient",
+      "animate": "Animate Linear Gradient",
       "aux_colour": "Colour",
       "aux_off_colour": "Off Colour",
       "panel_mode": "Panel Mode",

diff --git a/src/localize/languages/et.json b/src/localize/languages/et.json
@@ -134,6 +134,7 @@
       "colour": "Colour",
       "charge_colour": "Charge Colour",
       "linear_gradient": "Linear Gradient",
+      "animate": "Animate Linear Gradient",
       "aux_colour": "Colour",
       "aux_off_colour": "Off Colour",
       "panel_mode": "Panel Mode",

diff --git a/src/localize/languages/fr.json b/src/localize/languages/fr.json
@@ -134,6 +134,7 @@
       "colour": "Colour",
       "charge_colour": "Charge Colour",
       "linear_gradient": "Linear Gradient",
+      "animate": "Animate Linear Gradient",
       "aux_colour": "Colour",
       "aux_off_colour": "Off Colour",
       "panel_mode": "Panel Mode",

diff --git a/src/localize/languages/it.json b/src/localize/languages/it.json
@@ -134,6 +134,7 @@
       "colour": "Colour",
       "charge_colour": "Charge Colour",
       "linear_gradient": "Linear Gradient",
+      "animate": "Animate Linear Gradient",
       "aux_colour": "Colour",
       "aux_off_colour": "Off Colour",
       "panel_mode": "Panel Mode",

diff --git a/src/localize/languages/nl.json b/src/localize/languages/nl.json
@@ -134,6 +134,7 @@
       "colour": "Colour",
       "charge_colour": "Charge Colour",
       "linear_gradient": "Linear Gradient",
+      "animate": "Animate Linear Gradient",
       "aux_colour": "Colour",
       "aux_off_colour": "Off Colour",
       "panel_mode": "Panel Mode",

diff --git a/src/localize/languages/pt-br.json b/src/localize/languages/pt-br.json
@@ -133,6 +133,8 @@
       "grid_name": "Nome Grid",
       "colour": "Cor",
       "charge_colour": "Cor Charge",
+      "linear_gradient": "Linear Gradient",
+      "animate": "Animate Linear Gradient",
       "aux_colour": "Cor",
       "aux_off_colour": "Cor Off",
       "panel_mode": "Modo do Painel",

diff --git a/src/localize/languages/ru.json b/src/localize/languages/ru.json
@@ -134,6 +134,7 @@
       "colour": "Colour",
       "charge_colour": "Charge Colour",
       "linear_gradient": "Linear Gradient",
+      "animate": "Animate Linear Gradient",
       "aux_colour": "Colour",
       "aux_off_colour": "Off Colour",
       "panel_mode": "Panel Mode",

diff --git a/src/localize/languages/sk.json b/src/localize/languages/sk.json
@@ -134,6 +134,7 @@
       "colour": "Colour",
       "charge_colour": "Charge Colour",
       "linear_gradient": "Linear Gradient",
+      "animate": "Animate Linear Gradient",
       "aux_colour": "Colour",
       "aux_off_colour": "Off Colour",
       "panel_mode": "Panel Mode",

diff --git a/src/types.ts b/src/types.ts
@@ -84,6 +84,7 @@ export interface sunsynkPowerFlowCardConfig extends LovelaceCardConfig {
         show_remaining_energy: boolean;
         dynamic_colour: boolean;
         linear_gradient: boolean;
+        animate: boolean;
     }
     solar: {
         colour: string;