Merge pull request #556 from slipx06/NewDev

New wide screen view

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunsynk-power-flow-card",
-  "version": "5.4.0",
+  "version": "6.0.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": {

src/const.ts

@@ -2,7 +2,7 @@ import {version} from '../package.json';
 
 export const CARD_VERSION = version;
 
-export const validLoadValues = [0, 1, 2, 3, 4]
+export const validLoadValues = [0, 1, 2, 3, 4, 5, 6]
 export const validnonLoadValues = [0, 1, 2, 3]
 export const valid3phase = [true, false]
 export const validaux = [true, false]

src/defaults.ts

@@ -4,6 +4,7 @@ import {InverterModel} from './types';
 export default {
 	cardstyle: 'lite',
 	panel_mode: false,
+	wide: false,
 	large_font: false,
 	show_solar: true,
 	show_battery: true,
@@ -90,6 +91,8 @@ export default {
 		load2_name: '',
 		load3_name: '',
 		load4_name: '',
+		load5_name: '',
+		load6_name: '',
 		auto_scale: true,
 		path_threshold: 100,
 		navigate:'',

src/editor.ts

@@ -60,6 +60,7 @@ export class SunSynkCardEditor extends LitElement implements LovelaceCardEditor
 								schema: [
 									{name: 'large_font', selector: {boolean: {}}},
 									{name: 'panel_mode', selector: {boolean: {}}},
+									{name: 'wide', selector: {boolean: {}}},
 									{name: 'card_height', selector: {text: {}}},
 									{name: 'card_width', selector: {text: {}}},
 									{name: 'show_solar', selector: {boolean: {}}},
@@ -242,7 +243,7 @@ export class SunSynkCardEditor extends LitElement implements LovelaceCardEditor
 									{name: 'dynamic_icon', selector: {boolean: {}}},
 									{name: 'invert_load', selector: {boolean: {}}},
 									{name: 'essential_name', selector: {text: {}}},
-									{name: 'additional_loads', selector: {number: {mode: 'box', min: 0, max: 4}}},
+									{name: 'additional_loads', selector: {number: {mode: 'box', min: 0, max: 6}}},
 									{name: 'load1_name', selector: {text: {}}},
 									{name: 'load1_icon', selector: {icon: {}}},
 									{name: 'load2_name', selector: {text: {}}},
@@ -251,6 +252,10 @@ export class SunSynkCardEditor extends LitElement implements LovelaceCardEditor
 									{name: 'load3_icon', selector: {icon: {}}},
 									{name: 'load4_name', selector: {text: {}}},
 									{name: 'load4_icon', selector: {icon: {}}},
+									{name: 'load5_name', selector: {text: {}}},
+									{name: 'load5_icon', selector: {icon: {}}},
+									{name: 'load6_name', selector: {text: {}}},
+									{name: 'load6_icon', selector: {icon: {}}},
 									{name: 'animation_speed', selector: {number: {}}},
 									{name: 'max_power', selector: {number: {}}},
 									{name: 'off_threshold', selector: {number: {}}},
@@ -612,10 +617,20 @@ export class SunSynkCardEditor extends LitElement implements LovelaceCardEditor
 												name: 'essential_load4',
 												selector: {entity: {device_class: SensorDeviceClass.POWER}},
 											},
+											{
+												name: 'essential_load5',
+												selector: {entity: {device_class: SensorDeviceClass.POWER}},
+											},
+											{
+												name: 'essential_load6',
+												selector: {entity: {device_class: SensorDeviceClass.POWER}},
+											},
 											{name: 'essential_load1_extra', selector: {entity: {}}},
 											{name: 'essential_load2_extra', selector: {entity: {}}},
 											{name: 'essential_load3_extra', selector: {entity: {}}},
 											{name: 'essential_load4_extra', selector: {entity: {}}},
+											{name: 'essential_load5_extra', selector: {entity: {}}},
+											{name: 'essential_load6_extra', selector: {entity: {}}},
 											{
 												name: 'load_power_L1',
 												selector: {entity: {device_class: SensorDeviceClass.POWER}},
@@ -701,6 +716,7 @@ export class SunSynkCardEditor extends LitElement implements LovelaceCardEditor
 											},
 											{name: 'non_essential_load1_extra', selector: {entity: {}}},
 											{name: 'non_essential_load2_extra', selector: {entity: {}}},
+											{name: 'non_essential_load3_extra', selector: {entity: {}}},
 											{name: 'grid_connected_status_194', selector: {entity: {}}},
 											{name: 'energy_cost_buy', selector: {entity: {}}},
 											{name: 'energy_cost_sell', selector: {entity: {}}},

src/index.ts

@@ -170,17 +170,22 @@ export class SunsynkPowerFlowCard extends LitElement {
         const stateNonessentialLoad3 = this.getEntity('entities.non_essential_load3');
         const stateNonEssentialLoad1Extra = this.getEntity('entities.non_essential_load1_extra');
         const stateNonEssentialLoad2Extra = this.getEntity('entities.non_essential_load2_extra');
+        const stateNonEssentialLoad3Extra = this.getEntity('entities.non_essential_load3_extra');
         const stateEssentialLoad1 = this.getEntity('entities.essential_load1');
         const stateEssentialLoad2 = this.getEntity('entities.essential_load2');
         const stateEssentialLoad3 = this.getEntity('entities.essential_load3');
         const stateEssentialLoad4 = this.getEntity('entities.essential_load4');
+        const stateEssentialLoad5 = this.getEntity('entities.essential_load5');
+        const stateEssentialLoad6 = this.getEntity('entities.essential_load6');
         const stateAuxConnectedStatus = this.getEntity('entities.aux_connected_status', {state: 'on'});
         const stateAuxLoad1 = this.getEntity('entities.aux_load1');
         const stateAuxLoad2 = this.getEntity('entities.aux_load2');
         const stateEssentialLoad1Extra = this.getEntity('entities.essential_load1_extra');
         const stateEssentialLoad2Extra = this.getEntity('entities.essential_load2_extra');
         const stateEssentialLoad3Extra = this.getEntity('entities.essential_load3_extra');
         const stateEssentialLoad4Extra = this.getEntity('entities.essential_load4_extra');
+        const stateEssentialLoad5Extra = this.getEntity('entities.essential_load5_extra');
+        const stateEssentialLoad6Extra = this.getEntity('entities.essential_load6_extra');
         const stateLoadPowerL1 = this.getEntity('entities.load_power_L1');
         const stateLoadPowerL2 = this.getEntity('entities.load_power_L2');
         const stateLoadPowerL3 = this.getEntity('entities.load_power_L3');
@@ -254,6 +259,8 @@ export class SunsynkPowerFlowCard extends LitElement {
         const dynamicColourEssentialLoad2 = this.calculateEssentialLoadColour(stateEssentialLoad2.toPower(false), Utils.toNum(config.load?.off_threshold, 0)) || loadColour;
         const dynamicColourEssentialLoad3 = this.calculateEssentialLoadColour(stateEssentialLoad3.toPower(false), Utils.toNum(config.load?.off_threshold, 0)) || loadColour;
         const dynamicColourEssentialLoad4 = this.calculateEssentialLoadColour(stateEssentialLoad4.toPower(false), Utils.toNum(config.load?.off_threshold, 0)) || loadColour;
+        const dynamicColourEssentialLoad5 = this.calculateEssentialLoadColour(stateEssentialLoad5.toPower(false), Utils.toNum(config.load?.off_threshold, 0)) || loadColour;
+        const dynamicColourEssentialLoad6 = this.calculateEssentialLoadColour(stateEssentialLoad6.toPower(false), Utils.toNum(config.load?.off_threshold, 0)) || loadColour;
 
         config.title_colour = this.colourConvert(config.title_colour);
 
@@ -364,8 +371,14 @@ export class SunsynkPowerFlowCard extends LitElement {
         const showDailyAux = config.load?.show_daily_aux;
 
         let additionalLoad = config.load?.additional_loads;
-        if (!validLoadValues.includes(additionalLoad) || (this.isFullCard && [3, 4].includes(additionalLoad) && showAux) || (this.isFullCard && [3].includes(additionalLoad))) {
-            additionalLoad = 0;
+        const invalidLoad =
+            !validLoadValues.includes(additionalLoad) ||
+            (this.isFullCard && [3, 4, 5, 6].includes(additionalLoad) && showAux) ||
+            (this.isFullCard && additionalLoad === 3) ||
+            (!config.wide && additionalLoad >= 5); // New condition
+
+        if (invalidLoad) {
+        additionalLoad = 0;
         }
 
         let additionalAuxLoad = config.load?.aux_loads;
@@ -380,6 +393,8 @@ export class SunsynkPowerFlowCard extends LitElement {
         const iconEssentialLoad2 = this.getEntity('load.load2_icon', {state: config.load?.load2_icon?.toString() ?? ''}).state;
         const iconEssentialLoad3 = this.getEntity('load.load3_icon', {state: config.load?.load3_icon?.toString() ?? ''}).state;
         const iconEssentialLoad4 = this.getEntity('load.load4_icon', {state: config.load?.load4_icon?.toString() ?? ''}).state;
+        const iconEssentialLoad5 = this.getEntity('load.load5_icon', {state: config.load?.load5_icon?.toString() ?? ''}).state;
+        const iconEssentialLoad6 = this.getEntity('load.load6_icon', {state: config.load?.load6_icon?.toString() ?? ''}).state;
         const iconAuxLoad1 = this.getEntity('load.aux_load1_icon', {state: config.load?.aux_load1_icon?.toString() ?? ''}).state;
         const iconAuxLoad2 = this.getEntity('load.aux_load2_icon', {state: config.load?.aux_load2_icon?.toString() ?? ''}).state;
         const nonessentialIcon = this.getEntity('grid.nonessential_icon', {state: config.grid?.nonessential_icon?.toString() ?? ''}).state;
@@ -1127,7 +1142,19 @@ export class SunsynkPowerFlowCard extends LitElement {
                 customGridIconColour = gridColour;
                 break;
         }
-
+
+        const viewBoxYLite = !config.show_solar 
+            ? (additionalLoad !== 0 || !config.show_battery ? 80 : 145.33) 
+            : 1;
+
+        const viewBoxHeightLite = !config.show_solar 
+            ? (config.show_battery 
+                ? (additionalLoad !== 0 ? 350 : 270.67) 
+                : 270.67) 
+            : (!config.show_battery 
+                ? ([2, 3, 4].includes(additionalLoad) ? 350 : 300) 
+                : 408);
+
         /**
          * The current structure of this data object is intentional, but it is considered temporary.
          * There is a need to evaluate the data being passed, as there might be duplication.
@@ -1137,6 +1164,8 @@ export class SunsynkPowerFlowCard extends LitElement {
             config,
             panelMode,
             compactMode,
+            viewBoxYLite,
+            viewBoxHeightLite,
             cardHeight,
             cardWidth,
             loadColour,
@@ -1172,6 +1201,8 @@ export class SunsynkPowerFlowCard extends LitElement {
             stateEssentialLoad2,
             stateEssentialLoad3,
             stateEssentialLoad4,
+            stateEssentialLoad5,
+            stateEssentialLoad6,
             gridPower,
             gridPowerL2,
             gridPowerL3,
@@ -1181,8 +1212,11 @@ export class SunsynkPowerFlowCard extends LitElement {
             stateEssentialLoad2Extra,
             stateEssentialLoad3Extra,
             stateEssentialLoad4Extra,
+            stateEssentialLoad5Extra,
+            stateEssentialLoad6Extra,
             stateNonEssentialLoad1Extra,
             stateNonEssentialLoad2Extra,
+            stateNonEssentialLoad3Extra,
             loadFrequency,
             statePV4Current,
             gridShowDailyBuy,
@@ -1242,6 +1276,8 @@ export class SunsynkPowerFlowCard extends LitElement {
             iconEssentialLoad2,
             iconEssentialLoad3,
             iconEssentialLoad4,
+            iconEssentialLoad5,
+            iconEssentialLoad6,
             enableTimer,
             stateSolarSell,
             priorityLoad,
@@ -1312,6 +1348,8 @@ export class SunsynkPowerFlowCard extends LitElement {
             dynamicColourEssentialLoad2,
             dynamicColourEssentialLoad3,
             dynamicColourEssentialLoad4,
+            dynamicColourEssentialLoad5,
+            dynamicColourEssentialLoad6,
             dynamicColourNonEssentialLoad1,
             dynamicColourNonEssentialLoad2,
             dynamicColourNonEssentialLoad3,

src/localize/languages/ca.json

@@ -98,6 +98,7 @@
       "card_height": "Alçada Targeta (px)",
       "card_width": "Amplada Targeta (px)",
       "model": "Model",
+      "wide": "Wide Screen Layout",
       "autarky": "Autarquia",
       "cardstyle": "Estil Targeta",
       "large_font": "Font Gran",
@@ -134,6 +135,10 @@
       "load2_icon": "Icona Càrrega 2",
       "load3_icon": "Icona Càrrega 3",
       "load4_icon": "Icona Càrrega 4",
+      "load5_name": "Load 5 Name",
+      "load6_name": "Load 6 Name",
+      "load5_icon": "Load 5 Icon",
+      "load6_icon": "Load 6 Icon",
       "aux_load1_name": "Nom Càrrega Aux 1",
       "aux_load2_name": "Nom Càrrega Aux 2",
       "aux_load1_icon": "Icona Càrrega Aux 1",

src/localize/languages/cs.json

@@ -98,6 +98,7 @@
       "decimal_places": "Decimal Places",
       "decimal_places_energy": "Decimal Places (Daily Energy)",
       "model": "Model",
+      "wide": "Wide Screen Layout",
       "autarky": "Autarky",
       "cardstyle": "Card Style",
       "large_font": "Large Font",
@@ -135,6 +136,10 @@
       "load2_icon": "Load 2 Icon",
       "load3_icon": "Load 3 Icon",
       "load4_icon": "Load 4 Icon",
+      "load5_name": "Load 5 Name",
+      "load6_name": "Load 6 Name",
+      "load5_icon": "Load 5 Icon",
+      "load6_icon": "Load 6 Icon",
       "aux_load1_name": "Aux Load 1 Name",
       "aux_load2_name": "Aux Load 2 Name",
       "aux_load1_icon": "Aux Load 1 Icon",

src/localize/languages/da.json

@@ -98,6 +98,7 @@
       "decimal_places": "Antal viste Decimaler",
       "decimal_places_energy": "Decimal Places (Daily Energy)",
       "model": "Model",
+      "wide": "Wide Screen Layout",
       "autarky": "Autarky",
       "cardstyle": "Kortstil",
       "large_font": "Stor Font",
@@ -134,6 +135,10 @@
       "load2_icon": "Load 2 Ikon",
       "load3_icon": "Load 3 Ikon",
       "load4_icon": "Load 4 Ikon",
+      "load5_name": "Load 5 Name",
+      "load6_name": "Load 6 Name",
+      "load5_icon": "Load 5 Icon",
+      "load6_icon": "Load 6 Icon",
       "aux_load1_name": "Aux Load 1 Navn",
       "aux_load2_name": "Aux Load 2 Navn",
       "aux_load1_icon": "Aux Load 1 Ikon",

src/localize/languages/de.json

@@ -134,6 +134,10 @@
       "load2_icon": "Load 2 Icon",
       "load3_icon": "Load 3 Icon",
       "load4_icon": "Load 4 Icon",
+      "load5_name": "Load 5 Name",
+      "load6_name": "Load 6 Name",
+      "load5_icon": "Load 5 Icon",
+      "load6_icon": "Load 6 Icon",
       "aux_load1_name": "Aux Load 1 Name",
       "aux_load2_name": "Aux Load 2 Name",
       "aux_load1_icon": "Aux Load 1 Icon",
@@ -185,6 +189,7 @@
       "label_daily_grid_sell": "Daily Grid Sell Label",
       "invert_flow": "Invert Flow",
       "label_daily_load": "Daily Load Label",
+      "wide": "Wide Screen Layout",
       "cat_title": {
         "title": "Title Options",
         "general": "General Options",

src/localize/languages/en.json

@@ -101,6 +101,7 @@
     "autarky": "Autarky",
     "cardstyle": "Card Style",
     "large_font": "Large Font",
+    "wide": "Wide Screen Layout",
     "modern": "Modern",
     "show_solar": "Show Solar",
     "show_battery": "Show Battery",
@@ -134,6 +135,10 @@
     "load2_icon": "Load 2 Icon",
     "load3_icon": "Load 3 Icon",
     "load4_icon": "Load 4 Icon",
+    "load5_name": "Load 5 Name",
+    "load6_name": "Load 6 Name",
+    "load5_icon": "Load 5 Icon",
+    "load6_icon": "Load 6 Icon",
     "aux_load1_name": "Aux Load 1 Name",
     "aux_load2_name": "Aux Load 2 Name",
     "aux_load1_icon": "Aux Load 1 Icon",

src/localize/languages/es.json

@@ -134,6 +134,10 @@
       "load2_icon": "Load 2 Icon",
       "load3_icon": "Load 3 Icon",
       "load4_icon": "Load 4 Icon",
+      "load5_name": "Load 5 Name",
+      "load6_name": "Load 6 Name",
+      "load5_icon": "Load 5 Icon",
+      "load6_icon": "Load 6 Icon",
       "aux_load1_name": "Aux Load 1 Name",
       "aux_load2_name": "Aux Load 2 Name",
       "aux_load1_icon": "Aux Load 1 Icon",
@@ -185,6 +189,7 @@
       "label_daily_grid_sell": "Daily Grid Sell Label",
       "invert_flow": "Invert Flow",
       "label_daily_load": "Daily Load Label",
+      "wide": "Wide Screen Layout",
       "cat_title": {
         "title": "Title Options",
         "general": "General Options",

src/localize/languages/et.json

@@ -134,6 +134,10 @@
       "load2_icon": "Load 2 Icon",
       "load3_icon": "Load 3 Icon",
       "load4_icon": "Load 4 Icon",
+      "load5_name": "Load 5 Name",
+      "load6_name": "Load 6 Name",
+      "load5_icon": "Load 5 Icon",
+      "load6_icon": "Load 6 Icon",
       "aux_load1_name": "Aux Load 1 Name",
       "aux_load2_name": "Aux Load 2 Name",
       "aux_load1_icon": "Aux Load 1 Icon",
@@ -185,6 +189,7 @@
       "label_daily_grid_sell": "Daily Grid Sell Label",
       "invert_flow": "Invert Flow",
       "label_daily_load": "Daily Load Label",
+      "wide": "Wide Screen Layout",
       "cat_title": {
         "title": "Title Options",
         "general": "General Options",

src/localize/languages/fr.json

@@ -134,6 +134,10 @@
       "load2_icon": "Load 2 Icon",
       "load3_icon": "Load 3 Icon",
       "load4_icon": "Load 4 Icon",
+      "load5_name": "Load 5 Name",
+      "load6_name": "Load 6 Name",
+      "load5_icon": "Load 5 Icon",
+      "load6_icon": "Load 6 Icon",
       "aux_load1_name": "Aux Load 1 Name",
       "aux_load2_name": "Aux Load 2 Name",
       "aux_load1_icon": "Aux Load 1 Icon",
@@ -185,6 +189,7 @@
       "label_daily_grid_sell": "Daily Grid Sell Label",
       "invert_flow": "Invert Flow",
       "label_daily_load": "Daily Load Label",
+      "wide": "Wide Screen Layout",
       "cat_title": {
         "title": "Title Options",
         "general": "General Options",

src/localize/languages/it.json

@@ -134,6 +134,10 @@
       "load2_icon": "Load 2 Icon",
       "load3_icon": "Load 3 Icon",
       "load4_icon": "Load 4 Icon",
+      "load5_name": "Load 5 Name",
+      "load6_name": "Load 6 Name",
+      "load5_icon": "Load 5 Icon",
+      "load6_icon": "Load 6 Icon",
       "aux_load1_name": "Aux Load 1 Name",
       "aux_load2_name": "Aux Load 2 Name",
       "aux_load1_icon": "Aux Load 1 Icon",
@@ -185,6 +189,7 @@
       "label_daily_grid_sell": "Daily Grid Sell Label",
       "label_daily_load": "Daily Load Label",
       "invert_flow": "Invert Flow",
+      "wide": "Wide Screen Layout",
       "cat_title": {
         "title": "Title Options",
         "general": "General Options",