fixes #282

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': "",
+            'dateAdditionalTemplate': "",
-            'timeAdditonalTemplate': "",
+            'timeAdditionalTemplate': "",
             'dateFormat': "%A, %d. %B %Y",
             'cards': [{
                 'type': 'cardEntities',

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
@@ -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

@@ -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.
+`alarmControl` | True | complex | `None` | overwrites the action executed on pressing the left upper icon (red circle), by default this button is used to show a list of open sensors on a failed attempt to arm.

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') }}"`
+`dateAdditionalTemplate` | 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
+`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,12 +7,13 @@ 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
+        - 13.06.2022 - GitHub Issue #277 - HandleMessage -> pageOpenDetail does not work for Sub-Page
  
     Known-Bugs --> Bugfix folgt:
         - Aktion auf Submenüs schaltet unmittelbar auf vorheriges Mainmenu
@@ -144,7 +145,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
@@ -440,7 +441,6 @@ export const config: Config = {
             Buero_Seite_2,
             Buero_Seite_1,
             Buero_Klimaanlage, 
-            //WLAN,
             Button_1,
             Test_Licht,
             Test_Funktionen,
@@ -451,6 +451,13 @@ export const config: Config = {
             Buero_Alarm,
             Service
     ],
+    subPages: [
+                Abfall,
+                WLAN,
+                NSPanel_Infos,
+                NSPanel_Einstellungen,
+                NSPanel_Firmware_Updates
+    ],
     button1Page: button1Page,
     button2Page: button2Page
 };
@@ -845,6 +852,18 @@ function HandleMessage(typ: string, method: string, page: number, words: Array<s
                 let pageItem = config.pages[pageId].items.find(e => e.id === words[3]);
                 if (pageItem !== undefined)
                     SendToPanel(GenerateDetailPage(words[2], pageItem));
+                else {
+                    config.subPages.every (sp => {
+                        let pageItem =  sp.items.find(e => e.id === words[3]);
+                        if (pageItem !== undefined) {
+                            SendToPanel(GenerateDetailPage(words[2], pageItem));
+                            console.log(words[2] + " - " + pageItem);
+                            return false;
+                        }
+                        return true;
+                        }
+                    )
+                }  
             case "buttonPress2":
                 screensaverEnabled = false;
                 HandleButtonEvent(words);
@@ -1983,6 +2002,17 @@ function HandleButtonEvent(words): void {
                 if (existsObject(id)) {
                     let o = getObject(id);
                     let pageItem = config.pages[pageId].items.find(e => e.id === id);
+                    if (pageItem == undefined) {
+                        config.subPages.every (sp => {
+                            pageItem =  sp.items.find(e => e.id === id);
+                            if (pageItem !== undefined) {
+                           
+                                return false;
+                            }
+                            return true;
+                            }
+                        )
+                    } 
                     switch (o.common.role) {
                         case "dimmer":
                             if (pageItem.minValueBrightness != undefined && pageItem.maxValueBrightness != undefined) {  
@@ -2011,6 +2041,16 @@ function HandleButtonEvent(words): void {
             (function () {if (timeoutSlider) {clearTimeout(timeoutSlider); timeoutSlider = null;}})();
             timeoutSlider = setTimeout(async function () {
                 let pageItem = config.pages[pageId].items.find(e => e.id === id);
+                if (pageItem == undefined) {
+                    config.subPages.every (sp => {
+                        pageItem =  sp.items.find(e => e.id === id);
+                        if (pageItem !== undefined) {                        
+                            return false;
+                        }
+                        return true;
+                        }
+                    )
+                }
                 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));
@@ -2903,6 +2943,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),
 };