feat: adds off_colour: and remaining_energy_to_shutdown: closes #577

closes #554
slipx06 · Dec 18, 2024 · a230418 · a230418
1 parent ddb7fdb
commit a230418
Show file tree

Hide file tree

Showing 23 changed files with 163 additions and 48 deletions.
diff --git a/docs/configuration.md b/docs/configuration.md
@@ -76,7 +76,8 @@ The `invert_power` attribute can be used to reverse direction if needed by your
 | show_absolute:   | Optional     | `false` | set to `true` to display power and current as absolute values.                                                                                                                   
 | auto_scale:      | Optional     | `true` | If set to `true` the card will use the entities `unit_of_measurement` attribute to perform the correct scaling (i,e, power values greater than 999W will be displayed as kW e.g. 1.23kW) and display the correct unit. The number of decimal places can be changed using the `decimal_places` card attribute apart from the daily energy values which are set using the `decimal_places_energy` attribute.                                                                                  |
 | hide_soc:        | Optional     | `false` | If set to `true` the current program capacity (soc), or for Goodwe inverters the shutdown soc and offgrid shutdown soc that is shown to the left of the current battery one SOC will be hidden.      |
-| show_remaining_energy:        | Optional     | `true` | Set to `true` to display the remaining battery one energy in kWh based on the current SOC. Only visable on the `lite` and `full` cards.     |
+| show_remaining_energy:        | Optional     | `true` | Set to `true` to display the remaining battery one energy in kWh based on the current SOC.   |
+| remaining_energy_to_shutdown: | Optional     | `false` | If set to `true` the displayed remaining battery energy will be the available energy to the shutdown SOC and not to 0%.     |
 | navigate:        | Optional    |     | Sets the navigation path when clicking on the battery one image. Can be used to link to other dashboards and views e.g. `/lovelace/1`.    
 | invert_flow:      | Optional    |  `false`   | Inverts the animated flow. Expects a positive number for battery charging and a negative number for battery discharging   
 
@@ -96,7 +97,8 @@ The `invert_power` attribute can be used to reverse direction if needed by your
 | show_absolute:   | Optional     | `false` | set to `true` to display power and current as absolute values.                                                                                                                   
 | auto_scale:      | Optional     | `true` | If set to `true` the card will use the entities `unit_of_measurement` attribute to perform the correct scaling (i,e, power values greater than 999W will be displayed as kW e.g. 1.23kW) and display the correct unit. The number of decimal places can be changed using the `decimal_places` card attribute apart from the daily energy values which are set using the `decimal_places_energy` attribute.                                                                                  |
 | hide_soc:        | Optional     | `false` | If set to `true` the current program capacity (soc), or for Goodwe inverters the shutdown soc and offgrid shutdown soc that is shown to the left of the current battery SOC will be hidden.      |
-| show_remaining_energy:        | Optional     | `true` | Set to `true` to display the remaining battery two energy in kWh based on the current SOC. Only visable on the `lite` and `full` cards.     |
+| show_remaining_energy:        | Optional     | `true` | Set to `true` to display the remaining battery two energy in kWh based on the current SOC.      |
+| remaining_energy_to_shutdown: | Optional     | `false` | If set to `true` the displayed remaining battery energy will be the available energy to the shutdown SOC and not to 0%.     |
 | navigate:        | Optional    |     | Sets the navigation path when clicking on the battery two image. Can be used to link to other dashboards and views e.g. `/lovelace/1`.    
 | invert_flow:      | Optional    |  `false`   | Inverts the animated flow. Expects a positive number for battery two charging and a negative number for battery two discharging   
 
@@ -131,7 +133,8 @@ These attributes are only needed if `show_solar` is set to `true`.
 
 | Attribute          | Requirement | Default           | Description                                                                                                                                                                |
 |--------------------|-------------|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| colour:            | Optional    | `'#5fb6ad'`       | Setss the colour of all the load card objects. Hex codes (`'#66ff00'` etc) or names (`red`, `green`, `blue` etc).                                                         |
+| colour:            | Optional    | `'#5fb6ad'`       | Sets the colour of all the load card objects. Hex codes (`'#66ff00'` etc) or names (`red`, `green`, `blue` etc).                                                         |
+| off_colour:         | Optional    | `grey`       | Sets the off colour for the additional essential loads. Set this to `transparent` to hide the load when power is below the `off_threshold`                                                        |
 | dynamic_colour:    | Optional    | `true`            | The essential icon colour will change based on the % contribution of the power source (battery, grid, solar) supplying the load. Set to `false`  to disable.                |
 | dynamic_icon:      | Optional    | `true`            | The essential icon will change when there is 100% contribution from a single power source (battery, grid, solar). Set to `false`  to disable.               |
 | invert_load:          | Optional    | `false`         | Set to `true` if your sensor provides a negative number when the load is drawing power.                          |

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sunsynk-power-flow-card",
-  "version": "6.1.7",
+  "version": "6.2.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
@@ -560,8 +560,10 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
                                 class="${!config.entities?.battery_status && !data.compactMode ? 'st3' : 'st3 left-align'}"
                                 display="${!config.battery.show_remaining_energy || (data.compactMode && data.batteryCount === 2) ? 'none' : ''}"
                                 fill="${data.batteryColour}">
-                                ${Utils.toNum((data.batteryEnergy * (data.stateBatterySoc.toNum(2) / 100) / 1000), 2)}
-                                ${UnitOfEnergy.KILO_WATT_HOUR}
+                                ${!config.battery.remaining_energy_to_shutdown
+                                    ? `${Utils.toNum((data.batteryEnergy * (data.stateBatterySoc.toNum() / 100) / 1000), 2)} ${UnitOfEnergy.KILO_WATT_HOUR}`
+                                    : `${Utils.toNum((data.batteryEnergy * ((data.stateBatterySoc?.toNum() - data.batteryOneShutdown) / 100) / 1000), 2)} ${UnitOfEnergy.KILO_WATT_HOUR}`
+                                }
                             </text>
                             <text x="169" y="${!config.battery.show_remaining_energy ? '320' : '311'}" class="st3 left-align"
                                 display="${data.compactMode  ? 'none' : ''}"
@@ -610,8 +612,10 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
                                 class="st3 left-align"
                                 display="${!config.battery.show_remaining_energy ? 'none' : ''}"
                                 fill="${data.batteryColour}">
-                                ${Utils.toNum((data.batteryEnergy * (data.stateBatterySoc.toNum(2) / 100) / 1000), 2)}
-                                ${UnitOfEnergy.KILO_WATT_HOUR}
+                                ${!config.battery.remaining_energy_to_shutdown
+                                    ? `${Utils.toNum((data.batteryEnergy * (data.stateBatterySoc.toNum() / 100) / 1000), 2)} ${UnitOfEnergy.KILO_WATT_HOUR}`
+                                    : `${Utils.toNum((data.batteryEnergy * ((data.stateBatterySoc?.toNum() - data.batteryOneShutdown) / 100) / 1000), 2)} ${UnitOfEnergy.KILO_WATT_HOUR}`
+                                }
                             </text>
                         </svg>
                         <svg id="two_batteries_data_compact_bat2" 
@@ -655,8 +659,10 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
                                 class="st3 left-align"
                                 display="${!config.battery2.show_remaining_energy ? 'none' : ''}"
                                 fill="${data.battery2Colour}">
-                                ${Utils.toNum((data.battery2Energy * (data.stateBattery2Soc.toNum(2) / 100) / 1000), 2)}
-                                ${UnitOfEnergy.KILO_WATT_HOUR}
+                                ${!config.battery2.remaining_energy_to_shutdown
+                                    ? `${Utils.toNum((data.battery2Energy * (data.stateBattery2Soc.toNum() / 100) / 1000), 2)} ${UnitOfEnergy.KILO_WATT_HOUR}`
+                                    : `${Utils.toNum((data.battery2Energy * ((data.stateBattery2Soc?.toNum() - data.batteryTwoShutdown) / 100) / 1000), 2)} ${UnitOfEnergy.KILO_WATT_HOUR}`
+                                }
                             </text>
                         </svg>
                         <svg id="battery2_data_lite" 
@@ -705,8 +711,10 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
                                 class="${!config.entities?.battery2_status ? 'st3' : 'st3 left-align'}"
                                 display="${!config.show_battery || !config.battery2.show_remaining_energy ? 'none' : ''}"
                                 fill="${data.battery2Colour}">
-                                ${Utils.toNum((data.battery2Energy * (data.stateBattery2Soc.toNum(2) / 100) / 1000), 2)}
-                                ${UnitOfEnergy.KILO_WATT_HOUR}
+                                ${!config.battery2.remaining_energy_to_shutdown
+                                    ? `${Utils.toNum((data.battery2Energy * (data.stateBattery2Soc.toNum() / 100) / 1000), 2)} ${UnitOfEnergy.KILO_WATT_HOUR}`
+                                    : `${Utils.toNum((data.battery2Energy * ((data.stateBattery2Soc?.toNum() - data.batteryTwoShutdown) / 100) / 1000), 2)} ${UnitOfEnergy.KILO_WATT_HOUR}`
+                                }
                             </text>
                             <text x="169" y="${!config.battery2.show_remaining_energy ? '320' : '311'}" class="st3 left-align"
                                 display="${!config.show_battery ? 'none' : ''}"
@@ -1973,15 +1981,15 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
                             </circle>
                         </svg>
                         <path id="es-load1" d="M 441 180 L 441 147" class="${data.additionalLoad === 1 ? '' : 'st12'}"
-                            fill="none" stroke="${data.loadColour}" stroke-width="1" stroke-miterlimit="10"
+                            fill="none" stroke="${data.load1Colour}" stroke-width="1" stroke-miterlimit="10"
                             pointer-events="stroke"/>
                         <path id="es-load1" d="M 441 180 L 441 147"
                             class="${[2, 3, 4, 5, 6].includes(data.additionalLoad) ? '' : 'st12'}" fill="none"
-                            stroke="${data.loadColour}" stroke-width="1" stroke-miterlimit="10"
+                            stroke="${data.load1Colour}" stroke-width="1" stroke-miterlimit="10"
                             pointer-events="stroke"/>
                         <path id="es-load2" d="M 441 290 L 441 257"
                             class="${[2, 3, 4, 5, 6].includes(data.additionalLoad) ? '' : 'st12'}" fill="none"
-                            stroke="${data.loadColour}" stroke-width="1" stroke-miterlimit="10"
+                            stroke="${data.load2Colour}" stroke-width="1" stroke-miterlimit="10"
                             pointer-events="stroke"/>
                         ${config.load?.navigate
                             ? svg`

diff --git a/src/cards/full-card.ts b/src/cards/full-card.ts
@@ -658,8 +658,10 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
                             <text x="101" y="378" class="st3"
                                 display="${!config.battery.show_remaining_energy ? 'none' : ''}"
                                 fill="${data.batteryColour}">
-                                ${Utils.toNum((data.batteryEnergy * (data.stateBatterySoc?.toNum() / 100) / 1000), 2)}
-                                ${UnitOfEnergy.KILO_WATT_HOUR}
+                                ${!config.battery.remaining_energy_to_shutdown
+                                    ? `${Utils.toNum((data.batteryEnergy * (data.stateBatterySoc.toNum() / 100) / 1000), 2)} ${UnitOfEnergy.KILO_WATT_HOUR}`
+                                    : `${Utils.toNum((data.batteryEnergy * ((data.stateBatterySoc?.toNum() - data.batteryOneShutdown) / 100) / 1000), 2)} ${UnitOfEnergy.KILO_WATT_HOUR}`
+                                }
                             </text>
                         </svg>
                         <svg id="battery2_icon" 
@@ -768,8 +770,10 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
                             <text x="101" y="378" class="st3"
                                 display="${!config.battery2.show_remaining_energy ? 'none' : ''}"
                                 fill="${data.battery2Colour}">
-                                ${Utils.toNum((data.battery2Energy * (data.stateBattery2Soc?.toNum() / 100) / 1000), 2)}
-                                ${UnitOfEnergy.KILO_WATT_HOUR}
+                                ${!config.battery2.remaining_energy_to_shutdown
+                                    ? `${Utils.toNum((data.battery2Energy * (data.stateBattery2Soc.toNum() / 100) / 1000), 2)} ${UnitOfEnergy.KILO_WATT_HOUR}`
+                                    : `${Utils.toNum((data.battery2Energy * ((data.stateBattery2Soc?.toNum() - data.batteryTwoShutdown) / 100) / 1000), 2)} ${UnitOfEnergy.KILO_WATT_HOUR}`
+                                }
                             </text>
                         </svg>
                         <svg id="battery1_remaining" 
@@ -1952,17 +1956,17 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
                         </text>
                         <path id="es-load1" d="M 409 143 L 409 135" display="${data.showAux ? '' : 'none'}"
                             class="${[1, 2].includes(data.additionalLoad) ? '' : 'st12'}" fill="none"
-                            stroke="${data.loadColour}" stroke-width="1" stroke-miterlimit="10"
+                            stroke="${data.load1Colour}" stroke-width="1" stroke-miterlimit="10"
                             pointer-events="stroke"/>
                         <path id="es-load1" d="M 412 143 L 412 135" display="${!data.showAux ? '' : 'none'}"
                             class="${[4, 5, 6].includes(data.additionalLoad) ? '' : 'st12'}" fill="none"
-                            stroke="${data.loadColour}" stroke-width="1" stroke-miterlimit="10"
+                            stroke="${data.load2Colour}" stroke-width="1" stroke-miterlimit="10"
                             pointer-events="stroke"/>
                         <path id="es-load1" d="M 412 80 L 412 60" display="${!data.showAux ? '' : 'none'}"
-                            class="${data.additionalLoad === 1 ? '' : 'st12'}" fill="none" stroke="${data.loadColour}"
+                            class="${data.additionalLoad === 1 ? '' : 'st12'}" fill="none" stroke="${data.load1Colour}"
                             stroke-width="1" stroke-miterlimit="10" pointer-events="stroke"/>
                         <path id="es-load2" d="M 412 80 L 412 53" display="${!data.showAux ? '' : 'none'}"
-                            class="${[2, 4, 5, 6].includes(data.additionalLoad) ? '' : 'st12'}" fill="none" stroke="${data.loadColour}"
+                            class="${[2, 4, 5, 6].includes(data.additionalLoad) ? '' : 'st12'}" fill="none" stroke="${data.load1Colour}"
                             stroke-width="1" stroke-miterlimit="10" pointer-events="stroke"/>
                         <svg id="load-flow">
                             <circle id="es-dot" cx="0" cy="0"

diff --git a/src/defaults.ts b/src/defaults.ts
@@ -34,6 +34,7 @@ export default {
 		colour: 'pink',
 		show_daily: false,
 		show_remaining_energy: true,
+		remaining_energy_to_shutdown: false,
 		animation_speed: 6,
 		max_power: 4500,
 		show_absolute: false,
@@ -53,6 +54,7 @@ export default {
 		hide_soc: false,
 		colour: 'pink',
 		show_remaining_energy: true,
+		remaining_energy_to_shutdown: false,
 		show_absolute: false,
 		auto_scale: true,
 		dynamic_colour: true,
@@ -82,6 +84,7 @@ export default {
 	},
 	load: {
 		colour: '#5fb6ad',
+		off_colour: 'grey',
 		dynamic_colour: true,
 		dynamic_icon: true,
 		aux_dynamic_colour: true,

diff --git a/src/editor.ts b/src/editor.ts
@@ -215,6 +215,7 @@ export class SunSynkCardEditor extends LitElement implements LovelaceCardEditor
 											{name: 'animate', selector: {boolean: {}}},
 											{name: 'hide_soc', selector: {boolean: {}}},
 											{name: 'show_remaining_energy', selector: {boolean: {}}},
+											{name: 'remaining_energy_to_shutdown', selector: {boolean: {}}},
 											{name: 'navigate', selector: {text: {}}},
 											{name: 'invert_flow', selector: {boolean: {}}},
 										],
@@ -263,7 +264,9 @@ export class SunSynkCardEditor extends LitElement implements LovelaceCardEditor
 											{name: 'animate', selector: {boolean: {}}},
 											{name: 'hide_soc', selector: {boolean: {}}},
 											{name: 'show_remaining_energy', selector: {boolean: {}}},
+											{name: 'remaining_energy_to_shutdown', selector: {boolean: {}}},
 											{name: 'navigate', selector: {text: {}}},
+											{name: 'invert_flow', selector: {boolean: {}}},
 										],
 									},
 									{
@@ -297,6 +300,7 @@ export class SunSynkCardEditor extends LitElement implements LovelaceCardEditor
 									{name: 'show_daily', selector: {boolean: {}}},
 									{name: 'auto_scale', selector: {boolean: {}}},
 									{name: 'colour', selector: {color_rgb: {}}},
+									{name: 'off_colour', selector: {color_rgb: {}}},
 									{name: 'dynamic_colour', selector: {boolean: {}}},
 									{name: 'dynamic_icon', selector: {boolean: {}}},
 									{name: 'invert_load', selector: {boolean: {}}},