Add configurable navigation buttons by @ravenst0ne

ioBroker/NsPanelTs_without_Examples.ts

@@ -1,5 +1,5 @@
 /*-----------------------------------------------------------------------
-TypeScript v3.8.1 zur Steuerung des SONOFF NSPanel mit dem ioBroker by @Armilar/@Sternmiere/@Britzelpuf
+TypeScript v3.8.1.1 zur Steuerung des SONOFF NSPanel mit dem ioBroker by @Armilar/@Sternmiere/@Britzelpuf
 - abgestimmt auf TFT 47 / v3.8.1 / BerryDriver 8 / Tasmota 12.3.1
 @joBr99 Projekt: https://github.com/joBr99/nspanel-lovelace-ui/tree/main/ioBroker
 NsPanelTs.ts (dieses TypeScript in ioBroker) Stable: https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/NsPanelTs.ts
@@ -114,6 +114,7 @@ ReleaseNotes:
         - 05.01.2023 - v3.8.0   Upgrade TFT 47
         - 06.01.2023 - v3.8.0   Add Volumio Tracklist
         - 06.01.2023 - v3.8.1   HMI-Hotfix
+        - 11.01.2023 - v3.8.1.1 Add configurable navigation buttons by @ravenst0ne
 
 *****************************************************************************************************************
 * Falls Aliase durch das Skript erstellt werden sollen, muss in der JavaScript Instanz "setObect" gesetzt sein! *
@@ -302,16 +303,12 @@ let vwIconColor = [];
 //Service Pages mit Auto-Alias (Nachfolgende Seiten werden mit Alias automatisch angelegt)
 /********************************************************************************************************** */
 
-let Service: PageEntities =
+let Service = <PageEntities> 
 {
     'type': 'cardEntities',
     'heading': 'NSPanel Service',
     'useColor': true,
     'subPage': false,
-    'parent': undefined,
-    'prev': undefined,
-    'next': undefined,
-    'home': undefined, 
     'items': [
         <PageItem>{ id: AliasPath + 'autoUpdate', name: 'Auto-Updates' ,icon: 'update', offColor: MSRed, onColor: MSGreen},
         <PageItem>{ navigate: true, id: 'NSPanel_Infos', icon: 'information-outline', onColor: White, name: 'NSPanel Infos'},
@@ -321,16 +318,13 @@ let Service: PageEntities =
 };
 
         //Subpage 1 von Subpages_2
-        let NSPanel_Infos: PageEntities =
+        let NSPanel_Infos = <PageEntities> 
         {
             'type': 'cardEntities',
             'heading': 'NSPanel Infos',
             'useColor': true,
             'subPage': true,
             'parent': Service,
-            'prev': undefined,
-            'next': undefined,
-            'home': undefined,
             'items': [
                 <PageItem>{ id: AliasPath + 'Tasmota.Hardware', name: 'Hardware', icon: 'memory', offColor: MSYellow, onColor: MSYellow, useColor: true},
                 <PageItem>{ id: AliasPath + 'Sensor.ESP32.Temperature', name: 'ESP Temperatur', icon: 'thermometer', unit: '°C', offColor: MSYellow, onColor: MSYellow, useColor: true},
@@ -340,16 +334,13 @@ let Service: PageEntities =
         };
 
         //Subpage 2 von Subpages_2
-        let NSPanel_Einstellungen: PageEntities =
+        let NSPanel_Einstellungen = <PageEntities> 
         {
             'type': 'cardEntities',
             'heading': 'Screensaver',
             'useColor': true,
             'subPage': true,
             'parent': Service,
-            'prev': undefined,
-            'next': undefined,
-            'home': undefined,
             'items': [
                 <PageItem>{ id: AliasPath + 'Dimmode.brightnessDay', name: 'Brightness Tag', icon: 'brightness-5', offColor: MSYellow, onColor: MSYellow, useColor: true, minValue: 5, maxValue: 10},
                 <PageItem>{ id: AliasPath + 'Dimmode.brightnessNight', name: 'Brightness Nacht', icon: 'brightness-4', offColor: MSYellow, onColor: MSYellow, useColor: true, minValue: 0, maxValue: 4},
@@ -359,16 +350,13 @@ let Service: PageEntities =
         };
 
         //Subpage 3 von Subpages_2
-        let NSPanel_Firmware_Info: PageEntities =
+        let NSPanel_Firmware_Info = <PageEntities> 
         {
             'type': 'cardEntities',
             'heading': 'Firmware-Updates',
             'useColor': true,
             'subPage': true,
             'parent': Service,
-            'prev': undefined,
-            'next': undefined,
-            'home': undefined,
             'items': [
                 <PageItem>{ id: AliasPath + 'Tasmota.Version', name: 'Tasmota Firmware', offColor: MSYellow, onColor: MSYellow, useColor: true},
                 <PageItem>{ id: AliasPath + 'Display.TFTVersion', name: 'TFT-Firmware', offColor: MSYellow, onColor: MSYellow, useColor: true},
@@ -4177,14 +4165,40 @@ function GetNavigationString(pageId: number): string {
             console.log(pageId);
         }
 
-        if (activePage.subPage && activePage.prev == undefined && activePage.next == undefined) {
+        var navigationString:string = "";
-            return 'button~bUp~' + Icons.GetIcon('arrow-up-bold') + '~' + rgb_dec565(White) + '~~~button~bHome~' + Icons.GetIcon('home') + '~' + rgb_dec565(White) + '~~';
+
-        } else if (activePage.subPage && activePage.prev == undefined && activePage.next != undefined) {
+        if (activePage.subPage){
-            return 'button~bUp~' + Icons.GetIcon('arrow-up-bold') + '~' + rgb_dec565(White) + '~~~button~bSubNext~' + Icons.GetIcon('arrow-right-bold') + '~' + rgb_dec565(White) + '~~';
+            if (activePage.prev == undefined){
-        } else if (activePage.subPage && activePage.prev != undefined && activePage.next != undefined) {
+                if (activePage.parentIcon != undefined){                    
-            return 'button~bSubPrev~' + Icons.GetIcon('arrow-left-bold') + '~' + rgb_dec565(White) + '~~~button~bSubNext~' + Icons.GetIcon('arrow-right-bold') + '~' + rgb_dec565(White) + '~~';
+                    navigationString = navigationString = 'button~bUp~' + Icons.GetIcon(activePage.parentIcon) + '~';                    
-        } else if (activePage.subPage && activePage.prev != undefined && activePage.next == undefined) {
+                } else {
-            return 'button~bSubPrev~' + Icons.GetIcon('arrow-left-bold') + '~' + rgb_dec565(White) + '~~~button~bHome~' + Icons.GetIcon('home') + '~' + rgb_dec565(White) + '~~';
+                    navigationString = navigationString = 'button~bUp~' + Icons.GetIcon('arrow-up-bold') + '~';
+                }
+            } else {
+                if (activePage.prevIcon != undefined){                    
+                    navigationString = 'button~bSubPrev~' + Icons.GetIcon(activePage.prevIcon) + '~';                    
+                } else {
+                    navigationString = 'button~bSubPrev~' + Icons.GetIcon('arrow-left-bold') + '~';
+                }                
+            }
+
+            if (activePage.next == undefined){
+                if (activePage.homeIcon != undefined){                    
+                    navigationString += rgb_dec565(White) + '~~~button~bHome~' + Icons.GetIcon(activePage.homeIcon) + '~' + rgb_dec565(White) + '~~';                  
+                } else {
+                    navigationString += rgb_dec565(White) + '~~~button~bHome~' + Icons.GetIcon('home') + '~' + rgb_dec565(White) + '~~';  
+                }
+            } else {
+                if (activePage.nextIcon != undefined){                    
+                    navigationString += rgb_dec565(White) + '~~~button~bSubNext~' + Icons.GetIcon(activePage.nextIcon) + '~' + rgb_dec565(White) + '~~';                     
+                } else {
+                    navigationString += rgb_dec565(White) + '~~~button~bSubNext~' + Icons.GetIcon('arrow-right-bold') + '~' + rgb_dec565(White) + '~~';  
+                }                
+            }
+        }
+
+        if (navigationString != ""){
+            return navigationString
         }
 
         switch (pageId) {
@@ -5998,11 +6012,15 @@ type Page = {
     heading: string,
     items: PageItem[],
     useColor: boolean,
-    subPage: boolean,
+    subPage: (boolean | undefined),
-    parent: Page,
+    parent: (Page | undefined),
-    prev: string,
+    parentIcon: (string | undefined),
-    next: string,
+    prev: (string | undefined),
-    home: string
+    prevIcon: (string | undefined),
+    next: (string | undefined),
+    nextIcon: (string | undefined),
+    home: (string | undefined),
+    homeIcon: (string | undefined)
 };
 
 interface PageEntities extends Page {