Card chart (#593)

* Initial import of cardChart

* iobroker nspanel type script changes regarding card chart

* Added payload definition/example

* iobroker nspanel type script changes regarding card chart

* Added payload definition/example

Co-authored-by: Johannes <johannes@braun-rheingau.de>

HMI/README.md

@@ -181,6 +181,11 @@ tIconBtnEntityName is the entiy name used in the button event for pressing the u
 
 `entityUpd~test~1|1~6666~A~hu~8888~B~1~t0u~9999~C~2~t1u~1111~D~3~t2u~33333~E~-1~t3u~3333~F~-2~t4u~4444~G~-3~t5u`
 
+### cardPower Page
+`entityUpd~heading~navigation~color~yAxisLabel~yAxisTick:[yAxisTick]*[~value[:xAxisLabel]?]*
+`entityUpd~Chart Demo~1|1~6666~Gas [kWh]~20:40:60:80:100~10~7^2:00~7~6^4:00~6~7^6:00~0~7^8:00~5~1^10:00~1~10^12:00~5~6^14:00~8`
+
+
 ## Messages from Nextion Display
 
 `event,buttonPress2,pageName,bNext`

ioBroker/NsPanelTs.ts

@@ -382,6 +382,18 @@ let Subpages_1: PageEntities =
             "items": [<PageItem>{ id: "alias.0.NSPanel_1.Guest_Wifi", hidePassword: true }]
         };
 
+let ChartDemo: PageChart =
+{
+    "type": "cardChart",
+    "heading": "ChartsDmo",
+    "useColor": true,
+    "subPage": false,
+    "parent": undefined,
+    "yAxis": "Gas [kWh]",
+    "yAxisTicks": [2,4,6,8,10,12,14],
+    "items": [<PageItem>{ id: "0_userdata.0.NSPanel_1.TDSF.gas", onColor: {red:156, green:56, blue:86}}]
+};
+
 let Buero_Seite_2: PageGrid =
 {
     "type": "cardGrid",
@@ -644,7 +656,7 @@ export const config: Config = {
             Subpages_1,         //Beispiel-Seite
             Buero_Themostat,    //Beispiel-Seite
             Buero_Alarm,        //Beispiel-Seite
-
+			ChartDemo,			//Beispiel-Seite
             Service             //Auto-Alias Service Page
     ],
     subPages: [
@@ -1687,6 +1699,9 @@ function GeneratePage(page: Page): void {
                 break;
             case 'cardPower':
                 SendToPanel(GeneratePowerPage(<PagePower>page));
+                break;
+			case 'cardChart':
+                SendToPanel(GenerateChartPage(<PageChart>page));
                 break;
         }
     } catch (err) {
@@ -3101,6 +3116,36 @@ function GeneratePowerPage(page: PagePower): Payload[] {
     }
 }
 
+function GenerateChartPage(page: PageChart): Payload[] {
+    try {
+        activePage = page;
+
+        let id = page.items[0].id
+        let out_msgs: Array<Payload> = [];
+        out_msgs.push({ payload: 'pageType~cardChart' });
+
+        let heading = page.heading !== undefined ? page.heading : "chart..."
+
+        let txt = getState(id).val
+
+        out_msgs.push({
+            payload: 'entityUpd~' +                     //entityUpd
+                heading + '~' +                         //heading
+                GetNavigationString(pageId) + '~' +     //navigation
+                rgb_dec565(page.items[0].onColor) + '~' +                      //color
+                page.yAxis + '~' +
+                page.yAxisTicks.join(':') + '~' +
+                txt
+        });     
+
+        //entityUpd,<heading>,<navigation>,<color>,<yAxisLabel>,<yAxisTic>:[<yAxisTic>]*[~<Value[:xAxisLabel]?>]*
+        return out_msgs
+
+    } catch (err) {
+        console.warn('function GenerateChartPage: ' + err.message);
+    }
+}
+
 function setIfExists(id: string, value: any, type: string | null = null): boolean {
     try {
         if (type === null) {
@@ -5018,10 +5063,10 @@ type Config = {
     defaultOnColor: RGB,
     defaultOffColor: RGB,
     defaultBackgroundColor: RGB,
-    pages: (PageThermo | PageMedia | PageAlarm | PageQR | PageEntities | PageGrid | PagePower)[],
+    pages: (PageThermo | PageMedia | PageAlarm | PageQR | PageEntities | PageGrid | PagePower | PageChart)[],
-    subPages: (PageThermo | PageMedia | PageAlarm | PageQR | PageEntities | PageGrid | PagePower)[],
+    subPages: (PageThermo | PageMedia | PageAlarm | PageQR | PageEntities | PageGrid | PagePower | PageChart)[],
-    button1Page: (PageThermo | PageMedia | PageAlarm | PageQR | PageEntities | PageGrid | PagePower | null),
+    button1Page: (PageThermo | PageMedia | PageAlarm | PageQR | PageEntities | PageGrid | PagePower | PageChart | null),
-    button2Page: (PageThermo | PageMedia | PageAlarm | PageQR | PageEntities | PageGrid | PagePower | null),
+    button2Page: (PageThermo | PageMedia | PageAlarm | PageQR | PageEntities | PageGrid | PagePower | PageChart | null),
 }
 
 type ScreenSaverElement = {