Fixed Typo in HMI/README.md

Updated to NsPanelTs.ts to support new FW
Updated README.md

ioBroker/README.md

@@ -24,8 +24,13 @@ You can find this in the device raw settings.
   
 ## Installation
 - Import this script into the ioBroker javascript instance and choose Typescript.
+- Make sure the version of the adapter is not to old.
 - Find the config variable and update to your needs.
 - The format strings are not used right now.
+- Make sure your device is connected with the mqtt instance. I didn't get it working with the sonoff adapter, but I didn't tried it too long.
+- Create a state with a mqtt client or create one per hand. The mqtt adapter will not create the state CustomSend
+    - you only need to send a dummy message to cmnd/<yourPanel>/CustomSend 
+    - then the state will be created 
 
 ## Update the screensaver string
 The screensaver string which is send to the display looks something like this:
@@ -37,21 +42,16 @@ See the icons currently usable in the following table:
 
 [Icon Table](../HMI#icons-ids)
 
-You can change the string in this function:
+You can change the string and devices in the config object.
+
+## Buttons
+If you like you can add special pages for the buttons, but there is a problem currently which will open the last page again. But if you press the button again, the correct page will open.
+
+First you need to add this rule to Tasmota:
+
 ```
-function HandleScreensaverUpdate(): void {
-    if (config.weatherEntity != null && existsObject(config.weatherEntity)) {
-        var icon = getState(config.weatherEntity + ".ICON").val;
-
-        let temperature: string = getState(config.weatherEntity + ".TEMP").val;
-        let humidity = getState(config.weatherEntity + ".HUMIDITY").val;
-        let u1 = getState(config.batEntity).val;
-        let u2 = getState(config.pvEntity).val;
-
-        SendToPanel(<Payload>{ payload: "weatherUpdate,?" + GetAccuWeatherIcon(parseInt(icon)) + "?" + temperature.toString() + " " + config.temperatureUnit + "?26?" + humidity + " %?Batterie?4?" + u1 + "%?PV?23?" + u2 + "W" })
-    }
-}
-
+Rule2 on Button1#state do Publish tele/%topic%/RESULT {"CustomRecv":"event,button1"} endon on Button2#state do Publish tele/%topic%/RESULT {"CustomRecv":"event,button2"} endon
+Rule2
 ```
 
 ## The config element in the script which needs to be configured
@@ -59,11 +59,14 @@ function HandleScreensaverUpdate(): void {
 var config: Config = {
     panelRecvTopic: "mqtt.0.tele.WzDisplay.RESULT",       // This is the object where the panel send the data to.
     panelSendTopic: "mqtt.0.cmnd.WzDisplay.CustomSend",   // This is the object where data is send to the panel.
-    batEntity: "alias.0.Batterie.ACTUAL",                 // This is a state which can be used to display the battery state.
-    pvEntity: "alias.0.Pv.ACTUAL",                        // This is a state which can be used to display the current solar yield.
-                                                          // Both values are send via the HandleScreensaverUpdate() function, you need to update this string to your needs.
-                                                          // Currently the icons are hardcoded.
-                                                          
+    leftEntity: "alias.0.Batterie.ACTUAL",                // This is a state will be displayed on the left side.
+    leftEntityIcon: 34,                                   // This is a icon which will be displayed on the left side.  
+    leftEntityText: "Batterie",                           // The label for the left side.  
+    leftEntityUnitText: "%",                              // The unit which will be appendon the left side.  
+    rightEntity: "alias.0.Pv.ACTUAL",                     // The same but for the right side.
+    rightEntityIcon: 32,
+    rightEntityText: "PV",
+    rightEntityUnitText: "W",                                                                                     
     timeoutScreensaver: 15,                               // Timeout for screensaver
     dimmode: 8,                                           // Display dim
     locale: "de_DE",                                      // not used right now
@@ -100,7 +103,42 @@ var config: Config = {
             "heading": "Thermostat",
             "item": "alias.0.WzNsPanel"                   // Needs to be a thermostat in the device panel
         }
+    ],
+    button1Page: button1Page,                             // A cardEntities, cardThermo or nothing. This will be opened when pressing button1 
+    button2Page: button2Page                              // you guess it 
+};
+```
+
+If you want you can create dedicated objects, so you don't need to declare them again. Then you can use tehm in the pages array and button pages.
+
+```
+var button1Page: PageEntities =
+{
+    "type": "cardEntities",
+    "heading": "Knopf1",
+    "items": [
+        "alias.0.Schlafen",
+        "alias.0.Stern",
+        "delete",
+        "delete"
     ]
 };
 ```
 
+Pages array can look like this:
+
+```
+pages: [
+        button1Page,
+        {
+            "type": "cardEntities",
+            "heading": "Strom",
+            "items": [
+                "alias.0.Netz",
+                "alias.0.Hausverbrauch",
+                "alias.0.Pv",
+                "alias.0.Batterie"
+
+            ]
+        }]
+```