improve error handling navigation

README.md

@@ -16,7 +16,7 @@ Or an TypeScript on your ioBroker Instance in case you are an ioBroker User.
 
 NsPanel needs to be flashed with Tasmota (or upcoming with ESPHome)
 
-![nspanel-rl](doc-pics/nspanel-rl.png)
+![nspanel-rl](docs/img/nspanel-rl.png)
 
 ## Features
 
@@ -44,4 +44,4 @@ Some (not all) screenshots from the US Portrait Version:
 
 ## Documentation
 
-Visit https://docs.nspanel.pky.eu/ for installation instructions and documentation of the configuration.
+Visit https://docs.nspanel.pky.eu/ for installation instructions and documentation of the configuration.

apps/nspanel-lovelace-ui/luibackend/config.py

@@ -80,8 +80,8 @@ class LuiBackendConfig(object):
             'locale': "en_US",
             'timeFormat': "%H:%M",
             'dateFormatBabel': "full",
-            'dateAdditonalTemplate': "",
-            'timeAdditonalTemplate': "",
+            'dateAdditionalTemplate': "",
+            'timeAdditionalTemplate': "",
             'dateFormat': "%A, %d. %B %Y",
             'cards': [{
                 'type': 'cardEntities',

apps/nspanel-lovelace-ui/luibackend/controller.py

@@ -241,9 +241,13 @@ class LuiController(object):
         if button_type == "button":
             if entity_id.startswith('navigate'):
                 # internal for navigation to nested pages
-                self._previous_cards.append(self._current_card)
-                self._current_card = self._config.searchCard(entity_id)
-                self._pages_gen.render_card(self._current_card)
+                dstCard = self._config.searchCard(entity_id)
+                if dstCard is not None:
+                    self._previous_cards.append(self._current_card)
+                    self._current_card = dstCard
+                    self._pages_gen.render_card(self._current_card)
+                else:
+                    self._ha_api.log(f"No page with key {entity_id} found")
             elif entity_id.startswith('scene'):
                 self._ha_api.get_entity(entity_id).call_service("turn_on")
             elif entity_id.startswith('script'):

apps/nspanel-lovelace-ui/luibackend/pages.py

@@ -42,7 +42,7 @@ class LuiPagesGen(object):
 
     def update_time(self, kwargs):
         time = datetime.datetime.now().strftime(self._config.get("timeFormat"))
-        addTemplate = self._config.get("timeAdditonalTemplate")
+        addTemplate = self._config.get("timeAdditionalTemplate")
         addTimeText = self._ha_api.render_template(addTemplate)
         self._send_mqtt_msg(f"time~{time}~{addTimeText}")
 
@@ -55,7 +55,7 @@ class LuiPagesGen(object):
             dateformat = self._config.get("dateFormat")
             date = datetime.datetime.now().strftime(dateformat)
             
-        addTemplate = self._config.get("dateAdditonalTemplate")
+        addTemplate = self._config.get("dateAdditionalTemplate")
         addDateText = self._ha_api.render_template(addTemplate)
         self._send_mqtt_msg(f"date~{date}{addDateText}")
 
@@ -222,7 +222,7 @@ class LuiPagesGen(object):
         if entityType in "light":
             switch_val = 1 if entity.state == "on" else 0
             icon_color = self.get_entity_color(entity, overwrite=colorOverride)
-            icon_id = get_icon_id_ha("light", overwrite=icon)
+            icon_id = get_icon_id_ha("light", state=entity.state, overwrite=icon)
             return f"~{entityType}~{entityId}~{icon_id}~{icon_color}~{name}~{switch_val}"
         if entityType in ["switch", "input_boolean", "automation"]:
             switch_val = 1 if entity.state == "on" else 0
@@ -234,7 +234,7 @@ class LuiPagesGen(object):
             unit_of_measurement = entity.attributes.get("unit_of_measurement", "")
             value = entity.state + " " + unit_of_measurement
             if cardType == "cardGrid" and entityType == "sensor":
-                icon_id = entity.state[:4]
+                icon_id = entity.state[:3]
                 if icon_id[-1] == ".":
                     icon_id = icon_id[:-1]
             else:
@@ -251,8 +251,9 @@ class LuiPagesGen(object):
             return f"~button~{entityId}~{icon_id}~17299~{name}~{text}"
         if entityType == "script":
             icon_id = get_icon_id_ha("script", overwrite=icon)
+            icon_color = self.get_entity_color(entity, overwrite=colorOverride)
             text = get_translation(self._locale, "frontend.ui.card.script.run")
-            return f"~button~{entityId}~{icon_id}~17299~{name}~{text}"
+            return f"~button~{entityId}~{icon_id}~{icon_color}~{name}~{text}"
         if entityType == "lock":
             icon_id = get_icon_id_ha("lock", state=entity.state, overwrite=icon)
             icon_color = self.get_entity_color(entity, overwrite=colorOverride)

docs/card-media.md

@@ -1,4 +1,4 @@
-# Alarm Card
+# Media Card
 
 ![card-media](img/card-media.png)
 
@@ -16,4 +16,4 @@ key | optional | type | default | description
 `title` | True | string | `None` | Title of the Page 
 `entity` | False | string | `None` | contains the entity of the current card
 `key` | True | string | `None` | Used by navigate items
-`alarmControl` | True | complex | `None` | overwrites the action executed on pressing the left bottom icon, by default this button is used to show a list of open sensors on a failed attempt to arm.
+`mediaControl` | True | complex | `None` | overwrites the action executed on pressing the left upper icon (red circle), icon is showing the current type of media and cannot be changed

docs/config-overview.md

@@ -62,8 +62,8 @@ key | optional | type | default | description
 `locale` | True | string | `en_US` | Used by babel to determinante Date format on screensaver, also used for localization.
 `dateFormatBabel` | True | string | `full` | formatting options on https://babel.pocoo.org/en/latest/dates.html?highlight=name%20of%20day#date-fields
 `timeFormat` | True | string | `%H:%M` | Time Format on screensaver. Substring after `?` is displayed in a seperate smaller textbox. Useful for 12h time format with AM/PM  <pre>`"%I:%M   ?%p"`</pre>
-`dateAdditonalTemplate` | True | string | `""` | Addional Text dispayed after Date, can contain a Homeassistant Template Example `" - {{ states('sun.sun') }}"`
-`timeAdditonalTemplate` | True | string | `""` | Addional Text dispayed below Time, can contain a Homeassistant Template
+`dateAdditionalTemplate` | True | string | `""` | Addional Text dispayed after Date, can contain a Homeassistant Template Example `" - {{ states('sun.sun') }}"`
+`timeAdditionalTemplate` | True | string | `""` | Addional Text dispayed below Time, can contain a Homeassistant Template
 `dateFormat` | True | string | `%A, %d. %B %Y` | date format used if babel is not installed
 `cards` | False | complex | | configuration for cards that are displayed on panel; see docs for cards
 `screensaver` | True | complex | | configuration for screensaver; see docs for screensaver

docs/entities.md

@@ -36,7 +36,7 @@ It is also possible to configure different icon overwrites per state:
                 "off": mdi:lightbulb
 ```
 
-# Hide item based on state
+## Hide item based on state
 
 This sensor will only be shown on the card if it's state is equal to `off`
 

docs/prepare_nspanel.md

@@ -6,6 +6,10 @@ You can use the Tasmota Web Installer to do so. [Tasmota Web Installer](https://
 Checkout Blakadders Template Repo for more information on flashing, do not use the autoexec.be from this page.
 [NSPanel Page of the Tasmota Template Repository](https://templates.blakadder.com/sonoff_NSPanel.html)
 
+If you prefer EspHome over Tasmota, you can use this thrid party esphome component, which is replacing tasmota and the berry driver of this project.
+[ESPHome component](https://github.com/sairon/esphome-nspanel-lovelace-ui)
+
+
 ## Configure Tasmota Template for NSPanel
 
 Configure the NSPanel template for Tasmota. (Go to Configuration and Configure Other and paste the template there, make sure to tick the activate checkbox)

ioBroker/NsPanelTs.ts

@@ -7,16 +7,14 @@ icon_mapping.ts: https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroke
 ioBroker-Unterstützung: https://forum.iobroker.net/topic/50888/sonoff-nspanel
  
 ReleaseNotes:
-    Bugfixes und Erweiterungen seit letzter Verion:
+    Bugfixes und Erweiterungen seit letzter Version:
         - cardQR (für Gäste WLAN)
         - cardThermo (Neues Design für Alias Thermostat und zusätzlich für Alias Klimaanlage)
         - 08.05.2022 - Menüpfeile bei HardwareButtons (button1Page; button2Page) mit Navigation auf Page 0
         - 08.05.2022 - Standard-Brightness über neuen Parameter active einstellbar (Test mit 2.9.3)
         - 08.05.2022 - Schalter (Licht, Dimmer, Hue, etc) in cardGrid lassen sich wieder schalten
- 
-    Known-Bugs --> Bugfix folgt:
-        - Aktion auf Submenüs schaltet unmittelbar auf vorheriges Mainmenu
-        - Menü-Pfeile in Subpages (z.B. card QR, cardMedia, etc)
+        - 14.06.2022 - Aktion auf Submenüs schaltet unmittelbar auf vorheriges Mainmenu (Many thanks to Grrzzz)
+        - 14.06.2022 - Menü-Pfeile in Subpages (z.B. card QR, cardMedia, etc) (Many thanks to Grrzzz)
     
 Wenn Rule definiert, dann können die Hardware-Tasten ebenfalls für Seitensteuerung (dann nicht mehr als Releais) genutzt werden
 Tasmota Konsole: 
@@ -144,7 +142,7 @@ var weatherForecast = true; //true = WheatherForecast 5 Days --- false = Config
 
 //Alexa-Instanz
 var alexaInstanz = "alexa2.0"
-var alexaDevice = "G0XXXXXXXXXXXXXXX"; //Primär zu steuerndes Device oder Gruppe aus alexa2-Adapter (Seriennummer)
+var alexaDevice = "G0XXXXXXXXXXXXXX"; //Primär zu steuerndes Device oder Gruppe aus alexa2-Adapter (Seriennummer)
 
 // Wenn alexaSpeakerList definiert, dann werden Einträge verwendet, sonst alle relevanten Devices aus Alexa-Instanz
 // Speakerwechsel funktioniert nicht bei Radio/TuneIn sonden bei Playlists
@@ -179,6 +177,7 @@ var Test_Licht: PageEntities =
     "heading": "Color Aliase",
     "useColor": true,
     "subPage": false,
+    "parent": Test_Licht,
     "items": [
         <PageItem>{ id: "alias.0.NSPanel_1.TestRGBLichteinzeln", name: "RGB-Licht Hex-Color", interpolateColor: true},
         //<PageItem>{ id: "alias.0.NSPanel_1.TestFarbtemperatur", name: "Farbtemperatur", interpolateColor: true},
@@ -194,6 +193,7 @@ var Test_Funktionen: PageEntities =
     "heading": "Sonstige Aliase",
     "useColor": true,
     "subPage": false,
+    "parent": Test_Funktionen,
     "items": [
         <PageItem>{ id: "alias.0.NSPanel_1.TestLautstärke", offColor: MSRed /*if mute=true*/, onColor: MSGreen ,name: "Echo Spot Büro", minValue: 0, maxValue: 100},
         <PageItem>{ id: "alias.0.NSPanel_1.TestTemperatur",name: "Temperatur außen", icon: "thermometer", onColor: White},
@@ -208,6 +208,7 @@ var Buero_Seite_1: PageEntities =
     "heading": "Büro",
     "useColor": true,
     "subPage": false,
+    "parent": Buero_Seite_1,
     "items": [
         <PageItem>{ id: "alias.0.NSPanel_1.Schreibtischlampe", interpolateColor: true},
         <PageItem>{ id: "alias.0.NSPanel_1.Deckenbeleuchtung", interpolateColor: true},
@@ -222,6 +223,7 @@ var Fenster_1: PageEntities =
     "heading": "Fenster und Türen",
     "useColor": true,
     "subPage": false,
+    "parent": Fenster_1,
     "items": [
         <PageItem>{ id: "alias.0.NSPanel_1.TestFenster", offColor: MSRed, onColor: MSGreen, name: "Büro Fenster"},
         <PageItem>{ id: "alias.0.NSPanel_1.Haustuer", offColor: MSRed, onColor: MSGreen, name: "Haustür"},
@@ -236,6 +238,7 @@ var Button_1: PageEntities =
     "heading": "Button Aliase",
     "useColor": true,
     "subPage": false,
+    "parent": Button_1,
     "items": [
         <PageItem>{ id: "alias.0.NSPanel_1.TestTastensensor", name: "Tastensensor (FFN)"},
         <PageItem>{ id: "alias.0.NSPanel_1.Radio.NDR2", icon: "radio", name: "Taste (NDR2)", onColor: colorRadio},
@@ -248,6 +251,7 @@ var Subpages_1: PageEntities =
     "heading": "Test Subpages",
     "useColor": true,
     "subPage": false,
+    "parent": Subpages_1,
     "items": [
         <PageItem>{ navigate: true, id: "Abfall", onColor: White, name: "Abfallkalender"},
         <PageItem>{ navigate: true, id: "WLAN", onColor: White, name: "Gäste WLAN"},
@@ -261,6 +265,7 @@ var Abfall: PageEntities =
     "heading": "Abfallkalender",
     "useColor": true,
     "subPage": true,
+    "parent": Subpages_1,
     "items": [
         <PageItem>{ id: "alias.0.NSPanel_1.Abfall.event1",icon: "trash-can"},
         <PageItem>{ id: "alias.0.NSPanel_1.Abfall.event2",icon: "trash-can"},
@@ -275,6 +280,7 @@ var Buero_Seite_2: PageGrid =
     "heading": "Büro 2",
     "useColor": true,
     "subPage": false,
+    "parent": Buero_Seite_2,
     "items": [
         <PageItem>{ id: "alias.0.NSPanel_1.Schreibtischlampe", name: "Schreibtisch"},
         <PageItem>{ id: "alias.0.NSPanel_1.Deckenbeleuchtung", name: "Deckenlampe"},
@@ -291,6 +297,7 @@ var Alexa: PageMedia =
     "heading": "Alexa",
     "useColor": true,
     "subPage": false,
+    "parent": Alexa,
     "items": [<PageItem>{ id: "alias.0.NSPanel_1.Alexa.PlayerBuero" }]
 };
 
@@ -300,6 +307,7 @@ var Buero_Themostat: PageThermo =
     "heading": "Test Thermostat",
     "useColor": true,
     "subPage": false,
+    "parent": Buero_Themostat,
     "items": [<PageItem>{ id: "alias.0.NSPanel_1.Thermostat_Büro", minValue: 50, maxValue: 300 }]
 };
 
@@ -309,6 +317,7 @@ var Buero_Klimaanlage: PageThermo =
     "heading": "Test Klimaanlage",
     "useColor": true,
     "subPage": false,
+    "parent": Buero_Klimaanlage,
     "items": [<PageItem>{ id: "alias.0.NSPanel_1.TestKlimaanlage", minValue: 170, maxValue: 250}]
 };
 
@@ -319,6 +328,7 @@ var WLAN: PageQR =
     "heading": "Gäste WLAN",
     "useColor": true,
     "subPage": true,
+    "parent": WLAN,
     "items": [<PageItem>{ id: "alias.0.NSPanel_1.Guest_Wifi" }]
 };
 
@@ -328,6 +338,7 @@ var Buero_Alarm: PageAlarm =
     "heading": "Alarm",
     "useColor": true,
     "subPage": false,
+    "parent": Buero_Alarm,
     "items": [<PageItem>{ id: "alias.0.NSPanel_1.Alarm" }]
 };
 
@@ -337,6 +348,7 @@ var button1Page: PageGrid =
     "heading": "Radio",
     "useColor": true,
     "subPage": false,
+    "parent": button1Page,
     "items": [
         <PageItem>{ id: "alias.0.NSPanel_1.Radio.FFN", icon: "radio", name: "FFN", onColor: colorRadio},
         <PageItem>{ id: "alias.0.NSPanel_1.Radio.Antenne" , icon: "radio", name: "Antenne Nds.", onColor: colorRadio},
@@ -353,6 +365,7 @@ var button2Page: PageEntities =
     "heading": "Büro",
     "useColor": true,
     "subPage": false,
+    "parent": button2Page,
     "items": [
         <PageItem>{ id: "alias.0.NSPanel_1.Schreibtischlampe"},
         <PageItem>{ id: "alias.0.NSPanel_1.Deckenbeleuchtung"}
@@ -366,6 +379,7 @@ var Service: PageEntities =
     "heading": "NSPanel Service",
     "useColor": true,
     "subPage": false,
+    "parent": Service,
     "items": [
         <PageItem>{ id: "alias.0.NSPanel_1.NSPanel_AutoUpdate", name: "Auto-Updates" ,icon: "update", offColor: MSRed, onColor: MSGreen},
         <PageItem>{ navigate: true, id: "NSPanel_Infos", icon: "information-outline", onColor: White, name: "NSPanel Infos"},
@@ -381,6 +395,7 @@ var NSPanel_Infos: PageEntities =
     "heading": "NSPanel Infos",
     "useColor": true,
     "subPage": true,
+    "parent": Service,
     "items": [
         <PageItem>{ id: "alias.0.NSPanel_1.NSPanel_Hardware", name: "Hardware", icon: "memory", offColor: MSYellow, onColor: MSYellow, useColor: true},
         <PageItem>{ id: "alias.0.NSPanel_1.NSPanel_ESP_Temp", name: "ESP Temperatur", icon: "thermometer", unit: "°C", offColor: MSYellow, onColor: MSYellow, useColor: true},
@@ -396,6 +411,7 @@ var NSPanel_Einstellungen: PageEntities =
     "heading": "Screensaver",
     "useColor": true,
     "subPage": true,
+    "parent": Service,
     "items": [
         <PageItem>{ id: "alias.0.NSPanel_1.Dimmode_BrightnessDay", name: "Brightness Tag", icon: "brightness-5", offColor: MSYellow, onColor: MSYellow, useColor: true, minValue: 5, maxValue: 10},
         <PageItem>{ id: "alias.0.NSPanel_1.Dimmode_BrightnessNight", name: "Brightness Nacht", icon: "brightness-4", offColor: MSYellow, onColor: MSYellow, useColor: true, minValue: 0, maxValue: 4},
@@ -411,6 +427,7 @@ var NSPanel_Firmware_Updates: PageEntities =
     "heading": "Firmware-Updates",
     "useColor": true,
     "subPage": true,
+    "parent": Service,
     "items": [
         <PageItem>{ id: "alias.0.NSPanel_1.Tasmota_Version", name: "Tasmota Firmware", useColor: true},
         <PageItem>{ id: "alias.0.NSPanel_1.TFT_Firmware", name: "TFT-Firmware", useColor: true},
@@ -440,7 +457,6 @@ export const config: Config = {
             Buero_Seite_2,
             Buero_Seite_1,
             Buero_Klimaanlage, 
-            //WLAN,
             Button_1,
             Test_Licht,
             Test_Funktionen,
@@ -451,6 +467,13 @@ export const config: Config = {
             Buero_Alarm,
             Service
     ],
+    subPages: [
+                Abfall,
+                WLAN,
+                NSPanel_Infos,
+                NSPanel_Einstellungen,
+                NSPanel_Firmware_Updates
+    ],
     button1Page: button1Page,
     button2Page: button2Page
 };
@@ -487,7 +510,7 @@ var screensaverEnabled : boolean = false;
 var pageId = 0;
 
 //Neu für Subpages
-var subPage_open = false;
+var activePage = undefined;
 
 schedule("* * * * *", function () {
     SendTime();
@@ -658,7 +681,7 @@ function get_panel_update_data() {
     check_version_tft_firmware();
     check_online_display_firmware();
 }
-
+ 
 function get_current_tasmota_ip_address() {
     let mqttInfo2 =  config.panelRecvTopic.substring(0, config.panelRecvTopic.length - 6) + "INFO2";
     let Tasmota_Info2 = JSON.parse(getState(mqttInfo2).val);
@@ -743,7 +766,7 @@ function check_online_display_firmware() {
 }
 
 on({ id: config.panelRecvTopic }, function (obj) {
-    if (obj.state.val.startsWith('\{"CustomRecv":')) {
+    if (obj.state.val.startsWith('\{"CustomRecv":')) {      
         var json = JSON.parse(obj.state.val);
         var split = json.CustomRecv.split(",");
         if (split[0] == "event" && split[1] == "startup") {
@@ -842,9 +865,9 @@ function HandleMessage(typ: string, method: string, page: number, words: Array<s
             case "pageOpenDetail":
                 screensaverEnabled = false;
                 UnsubscribeWatcher();
-                let pageItem = config.pages[pageId].items.find(e => e.id === words[3]);
+                let pageItem = findPageItem(words[3]);  
                 if (pageItem !== undefined)
-                    SendToPanel(GenerateDetailPage(words[2], pageItem));
+                    SendToPanel(GenerateDetailPage(words[2], pageItem));                                         
             case "buttonPress2":
                 screensaverEnabled = false;
                 HandleButtonEvent(words);
@@ -860,6 +883,23 @@ function HandleMessage(typ: string, method: string, page: number, words: Array<s
     }
 }
 
+function findPageItem(searching: String) : PageItem {
+    let pageItem = config.pages[pageId].items.find(e => e.id === searching);
+    
+    if (pageItem !== undefined) {
+        return pageItem;
+    }
+    config.subPages.every (sp => {
+        pageItem =  sp.items.find(e => e.id === searching);
+        if (pageItem !== undefined) {           
+            return false;
+        }
+        return true;
+    });   
+    
+    return pageItem;
+}
+
 function GeneratePage(page: Page): void {
     switch (page.type) {
         case "cardEntities":
@@ -957,6 +997,7 @@ function GenerateGridPage(page: PageGrid): Payload[] {
 }
 
 function GeneratePageElements(page: Page): string {
+    activePage = page;
     let maxItems = 0;
     switch (page.type) {
         case "cardThermo":
@@ -981,22 +1022,10 @@ function GeneratePageElements(page: Page): string {
 
     let pageData = "entityUpd~" + page.heading + "~" + GetNavigationString(pageId);
 
-//--------------------------------------Subpage----------------
-    if (page.subPage) {
-        subPage_open = true;
-        pageData = "entityUpd~" + page.heading + "~" + "1|0";
-    } 
-//---------------------------------------------------------    
     for (let index = 0; index < maxItems; index++) {
         if (page.items[index] !== undefined) {
             pageData += CreateEntity(page.items[index], index + 1, page.useColor);
         }
-/*
-        else {
-            pageData += CreateEntity(<PageItem>{ id: "delete" }, index + 1); 
-            //muss das wirklich? Wo erforderlich wird es mitgegeben!
-        }
-*/
     }
     return pageData;
 }
@@ -1017,7 +1046,7 @@ function CreateEntity(pageItem: PageItem, placeId: number, useColors: boolean =
             type = "button";
             iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("gesture-tap-button");
             iconColor = GetIconColor(pageItem, true, useColors);
-            let buttonText = pageItem.buttonText !== undefined ? pageItem.buttonText : "PRESS";
+            let buttonText = pageItem.buttonText !== undefined ? pageItem.buttonText : "PRESS";        
             return "~" + type + "~" + "navigate." + pageItem.id + "~" + iconId + "~" + iconColor + "~" + pageItem.name + "~" + buttonText;
         }
 
@@ -1169,7 +1198,7 @@ function CreateEntity(pageItem: PageItem, placeId: number, useColors: boolean =
                 if (val === true || val === "true") {
                     optVal = "1"
                     iconColor = GetIconColor(pageItem, existsState(pageItem.id + ".ACTUAL") ? 100 - getState(pageItem.id + ".ACTUAL").val : true, useColors);
-                }
+                }  
 
                 return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~" + optVal;
                 
@@ -1259,6 +1288,7 @@ function CreateEntity(pageItem: PageItem, placeId: number, useColors: boolean =
                         iconColor = GetIconColor(pageItem, false, useColors);
                         var lockState = "LOCK"
                     }
+                    lockState = pageItem.buttonText !== undefined ? pageItem.buttonText : lockState;
                     RegisterEntityWatcher(pageItem.id + ".ACTUAL");
                 }
 
@@ -1350,12 +1380,12 @@ function GetIconColor(pageItem: PageItem, value: (boolean | number), useColors:
 }
 
 function RegisterEntityWatcher(id: string): void {
-    if (subscriptions.hasOwnProperty(id)) {
+    if (subscriptions.hasOwnProperty(id) || activePage.subPage ) {
         return;
     }
     subscriptions[id] = (on({ id: id, change: 'any' }, function (data) {
         if(pageId >= 0)
-            SendToPanel({ payload: GeneratePageElements(config.pages[pageId]) });
+            SendToPanel({ payload: GeneratePageElements(config.pages[pageId]) });            
         if(pageId == -1 && config.button1Page != undefined)
             SendToPanel({ payload: GeneratePageElements(config.button1Page) });
         if(pageId == -2 && config.button2Page != undefined)
@@ -1620,7 +1650,7 @@ function GenerateMediaPage(page: PageMedia): Payload[] {
     out_msgs.push({ payload: "pageType~cardMedia" });
     if (existsObject(id)) {
 
-        let name = getState(id + ".ALBUM").val;     
+        let name = getState(id + ".ALBUM").val;             
         let media_icon = Icons.GetIcon("playlist-music");
         let title = getState(id + ".TITLE").val;
         let author = getState(id + ".ARTIST").val;
@@ -1674,7 +1704,7 @@ function GenerateMediaPage(page: PageMedia): Payload[] {
     }
     if (Debug) console.log(out_msgs);
     return out_msgs
-}
+} 
 
 function GenerateAlarmPage(page: PageAlarm): Payload[] {
     var id = page.items[0].id
@@ -1769,6 +1799,8 @@ function GenerateAlarmPage(page: PageAlarm): Payload[] {
 }
 
 function GenerateQRPage(page: PageQR): Payload[] {
+    activePage = page;
+    
     var id = page.items[0].id
     var out_msgs: Array<Payload> = [];
     out_msgs.push({ payload: "pageType~cardQR" });
@@ -1857,8 +1889,8 @@ function HandleButtonEvent(words): void {
         GeneratePage(eval((words[2]).substring(9, (words[2]).length)));
         return;
     }
-
-    switch (buttonAction) {
+         
+    switch (buttonAction) {        
         case "bUp":
             if (pageId < 0) { //Prüfen, ob button1page oder button2page 
                 pageId = 0;
@@ -1876,16 +1908,21 @@ function HandleButtonEvent(words): void {
             break;
         case "bPrev":
             var pageNum = ((pageId - 1) % config.pages.length);
-            pageId = Math.abs(pageNum);
-            UnsubscribeWatcher();
-            GeneratePage(config.pages[pageId]);
-
-//-------------Subpage
-            if (subPage_open) {
-                subPage_open = false;
-                HandleButtonEvent(['event','buttonPress2','cardEntities','bNext'])
-            } 
-//--------------------------------
+            pageId = Math.abs(pageNum);          
+            UnsubscribeWatcher();            
+            if(activePage!=undefined && activePage.parent!=undefined) {                                    
+                //update pageID
+                for (let i=0; i<config.pages.length; i++) {
+                    if(config.pages[i] == activePage.parent) {
+                        pageId = i;
+                        break;
+                    }
+                }                
+                GeneratePage(activePage.parent);                                
+            }
+            else {
+                GeneratePage(config.pages[pageId]);                               
+            }                      
             break;
         case "bExit":
             if (config.screenSaverDoubleClick) {
@@ -1907,7 +1944,7 @@ function HandleButtonEvent(words): void {
             }
             setIfExists(config.panelSendTopic, "exitPopup")
             break;
-        case "OnOff":
+        case "OnOff":            
             if (existsObject(id)) {
                 var action = false
                 if (words[4] == "1")
@@ -1940,7 +1977,7 @@ function HandleButtonEvent(words): void {
         case "down":
             setIfExists(id + ".CLOSE", true)
             break;
-        case "button":
+        case "button":            
             if (existsObject(id)) {
                 var action = false
                 if (words[4] == "1")
@@ -1977,14 +2014,15 @@ function HandleButtonEvent(words): void {
                 setIfExists(id + ".SET", parseInt(words[4])) ? true : setIfExists(id + ".ACTUAL", parseInt(words[4]));
             }, 250);    
             break;
-        case "brightnessSlider":
+        case "brightnessSlider":            
             (function () {if (timeoutSlider) {clearTimeout(timeoutSlider); timeoutSlider = null;}})();
             timeoutSlider = setTimeout(async function () {
-                if (existsObject(id)) {
+                if (existsObject(id)) { 
                     let o = getObject(id);
-                    let pageItem = config.pages[pageId].items.find(e => e.id === id);
+                    let pageItem = findPageItem(id);
+                                                                     
                     switch (o.common.role) {
-                        case "dimmer":
+                        case "dimmer":                            
                             if (pageItem.minValueBrightness != undefined && pageItem.maxValueBrightness != undefined) {  
                                 let sliderPos = Math.trunc(scale(parseInt(words[4]), 0, 100, pageItem.maxValueBrightness, pageItem.minValueBrightness))
                                 setIfExists(id + ".SET", sliderPos) ? true : setIfExists(id + ".ACTUAL", sliderPos);
@@ -2010,7 +2048,7 @@ function HandleButtonEvent(words): void {
         case "colorTempSlider": // Armilar - Slider tickt verkehrt - Hell = 0 / Dunkel = 100 -> Korrektur
             (function () {if (timeoutSlider) {clearTimeout(timeoutSlider); timeoutSlider = null;}})();
             timeoutSlider = setTimeout(async function () {
-                let pageItem = config.pages[pageId].items.find(e => e.id === id);
+                let pageItem = findPageItem(id);                
                 if (pageItem.minValueColorTemp !== undefined && pageItem.minValueColorTemp !== undefined) {
                     let colorTempK = Math.trunc(scale(parseInt(words[4]), 0, 100, pageItem.minValueColorTemp, pageItem.maxValueColorTemp));
                     setIfExists(id + ".TEMPERATURE", (colorTempK));
@@ -2181,7 +2219,9 @@ function HandleButtonEvent(words): void {
 
 function GetNavigationString(pageId: number): string {
     if (Debug) console.log(pageId);
-    if (Debug) console.log(subPage_open);
+   
+    if(activePage.subPage)
+        return "1|0";
 
     switch (pageId) {
         case 0:
@@ -2241,7 +2281,7 @@ function GenerateDetailPage(type: string, pageItem: PageItem): Payload[] {
                                          + "Brightness" })                     //Brightness-Bezeichnung
             }
 
-            //Dimmer
+            //Dimmer          
             if (o.common.role == "dimmer") {
                 if (existsState(id + ".ON_ACTUAL")) {
                     val = getState(id + ".ON_ACTUAL").val;
@@ -2256,8 +2296,8 @@ function GenerateDetailPage(type: string, pageItem: PageItem): Payload[] {
                     var iconColor = GetIconColor(pageItem, val, false);
                     switchVal = "1"
                 }
-
-                if (existsState(id + ".ACTUAL")) {
+                
+                if (existsState(id + ".ACTUAL")) {                     
                     if (pageItem.minValueBrightness != undefined && pageItem.maxValueBrightness != undefined) {
                         brightness = Math.trunc(scale(getState(id + ".ACTUAL").val, pageItem.minValueBrightness, pageItem.maxValueBrightness, 100, 0));
                     } else {
@@ -2824,6 +2864,7 @@ type Page = {
     items: PageItem[],
     useColor: boolean,
     subPage: boolean,
+    parent: Page,
 };
 
 interface PageEntities extends Page {
@@ -2903,6 +2944,7 @@ type Config = {
     defaultOnColor: RGB,
     defaultOffColor: RGB,
     pages: (PageThermo | PageMedia | PageAlarm | PageQR | PageEntities | PageGrid)[],
+    subPages: (PageThermo | PageMedia | PageAlarm | PageQR | PageEntities | PageGrid)[],
     button1Page: (PageThermo | PageMedia | PageAlarm | PageQR | PageEntities | PageGrid | null),
     button2Page: (PageThermo | PageMedia | PageAlarm | PageQR | PageEntities | PageGrid | null),
 };