Add rest of the widget functions help resources. Improved map widgets settings schema.

@@ -163,7 +163,7 @@
         "templateHtml": "<tb-qrcode-widget \n    [ctx]=\"ctx\">\n</tb-qrcode-widget>",
         "templateHtml": "<tb-qrcode-widget \n    [ctx]=\"ctx\">\n</tb-qrcode-widget>",
         "templateCss": "#container {\n    overflow: auto;\n}\n\n.tbDatasource-container {\n    margin: 5px;\n    padding: 8px;\n}\n\n.tbDatasource-title {\n    font-size: 1.200rem;\n    font-weight: 500;\n    padding-bottom: 10px;\n}\n\n.tbDatasource-table {\n    width: 100%;\n    box-shadow: 0 0 10px #ccc;\n    border-collapse: collapse;\n    white-space: nowrap;\n    font-size: 1.000rem;\n    color: #757575;\n}\n\n.tbDatasource-table td {\n    position: relative;\n    border-top: 1px solid rgba(0, 0, 0, 0.12);\n    border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n    padding: 0px 18px;\n    box-sizing: border-box;\n}",
         "templateCss": "#container {\n    overflow: auto;\n}\n\n.tbDatasource-container {\n    margin: 5px;\n    padding: 8px;\n}\n\n.tbDatasource-title {\n    font-size: 1.200rem;\n    font-weight: 500;\n    padding-bottom: 10px;\n}\n\n.tbDatasource-table {\n    width: 100%;\n    box-shadow: 0 0 10px #ccc;\n    border-collapse: collapse;\n    white-space: nowrap;\n    font-size: 1.000rem;\n    color: #757575;\n}\n\n.tbDatasource-table td {\n    position: relative;\n    border-top: 1px solid rgba(0, 0, 0, 0.12);\n    border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n    padding: 0px 18px;\n    box-sizing: border-box;\n}",
         "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n   self.ctx.$scope.qrCodeWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        dataKeysOptional: true,\n        datasourcesOptional: true\n    };\n}\n\nself.onDestroy = function() {\n}\n\n",
         "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n   self.ctx.$scope.qrCodeWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        dataKeysOptional: true,\n        datasourcesOptional: true\n    };\n}\n\nself.onDestroy = function() {\n}\n\n",
-        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"QR Code\",\n        \"properties\": {\n            \"qrCodeTextPattern\": {\n                \"title\": \"QR code text pattern (for ex. '${entityName} | ${keyName} - some text.')\",\n                \"type\": \"string\",\n                \"default\": \"${entityName}\"\n            },\n            \"useQrCodeTextFunction\": {\n                \"title\": \"Use QR code text function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"qrCodeTextFunction\": {\n                \"title\": \"QR code text function: f(data)\",\n                \"type\": \"string\",\n                \"default\": \"return data[0]['entityName'];\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        {\n            \"key\": \"qrCodeTextPattern\",\n            \"condition\": \"model.useQrCodeTextFunction !== true\"\n        },\n        \"useQrCodeTextFunction\",\n        {\n            \"key\": \"qrCodeTextFunction\",\n            \"type\": \"javascript\",\n            \"helpId\": \"widget/lib/qrcode/qrcode_text_fn\",\n            \"condition\": \"model.useQrCodeTextFunction === true\"\n        }\n    ]\n}\n",
+        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"QR Code\",\n        \"properties\": {\n            \"qrCodeTextPattern\": {\n                \"title\": \"QR code text pattern (for ex. '${entityName} | ${keyName} - some text.')\",\n                \"type\": \"string\",\n                \"default\": \"${entityName}\"\n            },\n            \"useQrCodeTextFunction\": {\n                \"title\": \"Use QR code text function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"qrCodeTextFunction\": {\n                \"title\": \"QR code text function: f(data)\",\n                \"type\": \"string\",\n                \"default\": \"return data[0]['entityName'];\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"useQrCodeTextFunction\",\n        {\n            \"key\": \"qrCodeTextPattern\",\n            \"condition\": \"model.useQrCodeTextFunction !== true\"\n        },\n        {\n            \"key\": \"qrCodeTextFunction\",\n            \"type\": \"javascript\",\n            \"helpId\": \"widget/lib/qrcode/qrcode_text_fn\",\n            \"condition\": \"model.useQrCodeTextFunction === true\"\n        }\n    ]\n}\n",
         "dataKeySettingsSchema": "{}\n",
         "dataKeySettingsSchema": "{}\n",
         "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"entityAliasId\":null,\"filterId\":null,\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7036904308224163,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"qrCodeTextPattern\":\"${entityName}\",\"useQrCodeTextFunction\":false,\"qrCodeTextFunction\":\"return data[0] ? data[0]['entityName'] : '';\"},\"title\":\"QR Code\"}"
         "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"entityAliasId\":null,\"filterId\":null,\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7036904308224163,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"qrCodeTextPattern\":\"${entityName}\",\"useQrCodeTextFunction\":false,\"qrCodeTextFunction\":\"return data[0] ? data[0]['entityName'] : '';\"},\"title\":\"QR Code\"}"
       }
       }
@@ -181,7 +181,7 @@
         "templateHtml": "<tb-markdown-widget \n    [ctx]=\"ctx\">\n</tb-markdown-widget>",
         "templateHtml": "<tb-markdown-widget \n    [ctx]=\"ctx\">\n</tb-markdown-widget>",
         "templateCss": "#container tb-markdown-widget {\n    height: 100%;\n    display: block;\n}\n\n#container tb-markdown-widget .tb-markdown-view {\n    height: 100%;\n    overflow: auto;\n}\n",
         "templateCss": "#container tb-markdown-widget {\n    height: 100%;\n    display: block;\n}\n\n#container tb-markdown-widget .tb-markdown-view {\n    height: 100%;\n    overflow: auto;\n}\n",
         "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n   self.ctx.$scope.markdownWidget.onDataUpdated();\n}\n\nself.actionSources = function() {\n    return {\n        'elementClick': {\n            name: 'widget-action.element-click',\n            multiple: true\n        }\n    };\n}\n\nself.typeParameters = function() {\n    return {\n        dataKeysOptional: true,\n        datasourcesOptional: true\n    };\n}\n\nself.onDestroy = function() {\n}\n\n",
         "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n   self.ctx.$scope.markdownWidget.onDataUpdated();\n}\n\nself.actionSources = function() {\n    return {\n        'elementClick': {\n            name: 'widget-action.element-click',\n            multiple: true\n        }\n    };\n}\n\nself.typeParameters = function() {\n    return {\n        dataKeysOptional: true,\n        datasourcesOptional: true\n    };\n}\n\nself.onDestroy = function() {\n}\n\n",
-        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Markdown/HTML card\",\n        \"properties\": {\n            \"markdownTextPattern\": {\n                \"title\": \"Markdown/HTML pattern (markdown or HTML with variables, for ex. '${entityName} or ${keyName} - some text.')\",\n                \"type\": \"string\",\n                \"default\": \"# Markdown/HTML card \\n - **Current entity**: **${entityName}**. \\n - **Current value**: **${Random}**.\"\n            },\n            \"markdownCss\": {\n                \"title\": \"Markdown/HTML CSS\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"useMarkdownTextFunction\": {\n                \"title\": \"Use markdown/HTML value function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"markdownTextFunction\": {\n                \"title\": \"Markdown/HTML value function: f(data)\",\n                \"type\": \"string\",\n                \"default\": \"return '# Some title\\\\n - Entity name: ' + data[0]['entityName'];\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        {\n            \"key\": \"markdownTextPattern\",\n            \"type\": \"markdown\",\n            \"condition\": \"model.useMarkdownTextFunction !== true\"\n        },\n        {\n            \"key\": \"markdownCss\",\n            \"type\": \"css\"\n        },\n        \"useMarkdownTextFunction\",\n        {\n            \"key\": \"markdownTextFunction\",\n            \"type\": \"javascript\",\n            \"helpId\": \"widget/lib/markdown/markdown_text_fn\",\n            \"condition\": \"model.useMarkdownTextFunction === true\"\n        }\n    ]\n}\n",
+        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Markdown/HTML card\",\n        \"properties\": {\n            \"markdownTextPattern\": {\n                \"title\": \"Markdown/HTML pattern (markdown or HTML with variables, for ex. '${entityName} or ${keyName} - some text.')\",\n                \"type\": \"string\",\n                \"default\": \"# Markdown/HTML card \\n - **Current entity**: **${entityName}**. \\n - **Current value**: **${Random}**.\"\n            },\n            \"markdownCss\": {\n                \"title\": \"Markdown/HTML CSS\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"useMarkdownTextFunction\": {\n                \"title\": \"Use markdown/HTML value function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"markdownTextFunction\": {\n                \"title\": \"Markdown/HTML value function: f(data)\",\n                \"type\": \"string\",\n                \"default\": \"return '# Some title\\\\n - Entity name: ' + data[0]['entityName'];\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"useMarkdownTextFunction\",\n        {\n            \"key\": \"markdownTextPattern\",\n            \"type\": \"markdown\",\n            \"condition\": \"model.useMarkdownTextFunction !== true\"\n        },\n        {\n            \"key\": \"markdownTextFunction\",\n            \"type\": \"javascript\",\n            \"helpId\": \"widget/lib/markdown/markdown_text_fn\",\n            \"condition\": \"model.useMarkdownTextFunction === true\"\n        },\n        {\n            \"key\": \"markdownCss\",\n            \"type\": \"css\"\n        }\n    ]\n}\n",
         "dataKeySettingsSchema": "{}\n",
         "dataKeySettingsSchema": "{}\n",
         "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"markdownTextPattern\":\"### Markdown/HTML card\\n - **Current entity**: ${entityName}.\\n - **Current value**: ${Random}.\",\"markdownTextFunction\":\"return '# Some title\\\\n - Entity name: ' + data[0]['entityName'];\",\"useMarkdownTextFunction\":false},\"title\":\"Markdown/HTML Card\",\"showTitleIcon\":false,\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"dropShadow\":true,\"enableFullscreen\":true,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"showLegend\":false}"
         "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"markdownTextPattern\":\"### Markdown/HTML card\\n - **Current entity**: ${entityName}.\\n - **Current value**: ${Random}.\",\"markdownTextFunction\":\"return '# Some title\\\\n - Entity name: ' + data[0]['entityName'];\",\"useMarkdownTextFunction\":false},\"title\":\"Markdown/HTML Card\",\"showTitleIcon\":false,\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"dropShadow\":true,\"enableFullscreen\":true,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"showLegend\":false}"
       }
       }

@@ -73,7 +73,7 @@
         "templateHtml": "<tb-switch [ctx]='ctx'></tb-switch>",
         "templateHtml": "<tb-switch [ctx]='ctx'></tb-switch>",
         "templateCss": "",
         "templateCss": "",
         "controllerScript": "self.onInit = function() {\n}\n\nself.onResize = function() {\n}\n\nself.onDestroy = function() {\n}\n",
         "controllerScript": "self.onInit = function() {\n}\n\nself.onResize = function() {\n}\n\nself.onDestroy = function() {\n}\n",
-        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Settings\",\n        \"properties\": {\n            \"initialValue\": {\n                \"title\": \"Initial value\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"title\": {\n                \"title\": \"Switch title\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"showOnOffLabels\": {\n                \"title\": \"Show on/off labels\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"retrieveValueMethod\": {\n                \"title\": \"Retrieve on/off value using method\",\n                \"type\": \"string\",\n                \"default\": \"rpc\"\n            },\n            \"valueKey\": {\n                \"title\": \"Attribute/Timeseries value key (only when subscribe for attribute/timeseries method)\",\n                \"type\": \"string\",\n                \"default\": \"value\"\n            },\n            \"getValueMethod\": {\n                \"title\": \"RPC get value method\",\n                \"type\": \"string\",\n                \"default\": \"getValue\"\n            },\n            \"setValueMethod\": {\n                \"title\": \"RPC set value method\",\n                \"type\": \"string\",\n                \"default\": \"setValue\"\n            },\n            \"parseValueFunction\": {\n                \"title\": \"Parse value function, f(data), returns boolean\",\n                \"type\": \"string\",\n                \"default\": \"return data ? true : false;\"\n            },\n            \"convertValueFunction\": {\n                \"title\": \"Convert value function, f(value), returns payload used by RPC set value method\",\n                \"type\": \"string\",\n                \"default\": \"return value;\"\n            },\n            \"requestTimeout\": {\n                \"title\": \"RPC request timeout\",\n                \"type\": \"number\",\n                \"default\": 500\n            },\n            \"requestPersistent\": {\n                \"title\": \"RPC request persistent\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"persistentPollingInterval\": {\n                \"title\": \"Polling interval in milliseconds to get persistent RPC command response\",\n                \"type\": \"number\",\n                \"default\": 5000,\n                \"minimum\": 1000\n            }\n        },\n        \"required\": [\"requestTimeout\"]\n    },\n    \"form\": [\n        \"initialValue\",\n        \"title\",\n        \"showOnOffLabels\",\n        {\n            \"key\": \"retrieveValueMethod\",\n            \"type\": \"rc-select\",\n            \"multiple\": false,\n            \"items\": [\n                {\n                    \"value\": \"none\",\n                    \"label\": \"Don't retrieve\"\n                },\n                {\n                    \"value\": \"rpc\",\n                    \"label\": \"Call RPC get value method\"\n                },\n                {\n                    \"value\": \"attribute\",\n                    \"label\": \"Subscribe for attribute\"\n                },\n                {\n                    \"value\": \"timeseries\",\n                    \"label\": \"Subscribe for timeseries\"\n                }\n            ]\n        },\n        \"valueKey\",\n        \"getValueMethod\",\n        \"setValueMethod\",\n        {\n            \"key\": \"parseValueFunction\",\n            \"type\": \"javascript\"\n        },\n        {\n            \"key\": \"convertValueFunction\",\n            \"type\": \"javascript\"\n        },\n        \"requestTimeout\",\n        \"requestPersistent\",\n        {\n            \"key\": \"persistentPollingInterval\",\n            \"condition\": \"model.requestPersistent === true\"\n        }\n    ]\n}",
+        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Settings\",\n        \"properties\": {\n            \"initialValue\": {\n                \"title\": \"Initial value\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"title\": {\n                \"title\": \"Switch title\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"showOnOffLabels\": {\n                \"title\": \"Show on/off labels\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"retrieveValueMethod\": {\n                \"title\": \"Retrieve on/off value using method\",\n                \"type\": \"string\",\n                \"default\": \"rpc\"\n            },\n            \"valueKey\": {\n                \"title\": \"Attribute/Timeseries value key (only when subscribe for attribute/timeseries method)\",\n                \"type\": \"string\",\n                \"default\": \"value\"\n            },\n            \"getValueMethod\": {\n                \"title\": \"RPC get value method\",\n                \"type\": \"string\",\n                \"default\": \"getValue\"\n            },\n            \"setValueMethod\": {\n                \"title\": \"RPC set value method\",\n                \"type\": \"string\",\n                \"default\": \"setValue\"\n            },\n            \"parseValueFunction\": {\n                \"title\": \"Parse value function, f(data), returns boolean\",\n                \"type\": \"string\",\n                \"default\": \"return data ? true : false;\"\n            },\n            \"convertValueFunction\": {\n                \"title\": \"Convert value function, f(value), returns payload used by RPC set value method\",\n                \"type\": \"string\",\n                \"default\": \"return value;\"\n            },\n            \"requestTimeout\": {\n                \"title\": \"RPC request timeout\",\n                \"type\": \"number\",\n                \"default\": 500\n            },\n            \"requestPersistent\": {\n                \"title\": \"RPC request persistent\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"persistentPollingInterval\": {\n                \"title\": \"Polling interval in milliseconds to get persistent RPC command response\",\n                \"type\": \"number\",\n                \"default\": 5000,\n                \"minimum\": 1000\n            }\n        },\n        \"required\": [\"requestTimeout\"]\n    },\n    \"form\": [\n        \"initialValue\",\n        \"title\",\n        \"showOnOffLabels\",\n        {\n            \"key\": \"retrieveValueMethod\",\n            \"type\": \"rc-select\",\n            \"multiple\": false,\n            \"items\": [\n                {\n                    \"value\": \"none\",\n                    \"label\": \"Don't retrieve\"\n                },\n                {\n                    \"value\": \"rpc\",\n                    \"label\": \"Call RPC get value method\"\n                },\n                {\n                    \"value\": \"attribute\",\n                    \"label\": \"Subscribe for attribute\"\n                },\n                {\n                    \"value\": \"timeseries\",\n                    \"label\": \"Subscribe for timeseries\"\n                }\n            ]\n        },\n        \"valueKey\",\n        \"getValueMethod\",\n        \"setValueMethod\",\n        {\n            \"key\": \"parseValueFunction\",\n            \"type\": \"javascript\",\n            \"helpId\": \"widget/lib/rpc/parse_value_fn\"\n        },\n        {\n            \"key\": \"convertValueFunction\",\n            \"type\": \"javascript\",\n            \"helpId\": \"widget/lib/rpc/convert_value_fn\"\n        },\n        \"requestTimeout\",\n        \"requestPersistent\",\n        {\n            \"key\": \"persistentPollingInterval\",\n            \"condition\": \"model.requestPersistent === true\"\n        }\n    ]\n}",
         "dataKeySettingsSchema": "{}\n",
         "dataKeySettingsSchema": "{}\n",
         "defaultConfig": "{\"targetDeviceAliases\":[],\"showTitle\":false,\"backgroundColor\":\"#e6e7e8\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"requestTimeout\":500,\"initialValue\":false,\"getValueMethod\":\"getValue\",\"setValueMethod\":\"setValue\",\"showOnOffLabels\":true,\"title\":\"Switch control\"},\"title\":\"Switch Control\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{},\"decimals\":2}"
         "defaultConfig": "{\"targetDeviceAliases\":[],\"showTitle\":false,\"backgroundColor\":\"#e6e7e8\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"requestTimeout\":500,\"initialValue\":false,\"getValueMethod\":\"getValue\",\"setValueMethod\":\"setValue\",\"showOnOffLabels\":true,\"title\":\"Switch control\"},\"title\":\"Switch Control\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{},\"decimals\":2}"
       }
       }
@@ -91,7 +91,7 @@
         "templateHtml": "<tb-round-switch [ctx]='ctx'></tb-round-switch>",
         "templateHtml": "<tb-round-switch [ctx]='ctx'></tb-round-switch>",
         "templateCss": "",
         "templateCss": "",
         "controllerScript": "self.onInit = function() {\n}\n\nself.onResize = function() {\n}\n\nself.onDestroy = function() {\n}\n",
         "controllerScript": "self.onInit = function() {\n}\n\nself.onResize = function() {\n}\n\nself.onDestroy = function() {\n}\n",
-        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Settings\",\n        \"properties\": {\n            \"initialValue\": {\n                \"title\": \"Initial value\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"title\": {\n                \"title\": \"Switch title\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"retrieveValueMethod\": {\n                \"title\": \"Retrieve on/off value using method\",\n                \"type\": \"string\",\n                \"default\": \"rpc\"\n            },\n            \"valueKey\": {\n                \"title\": \"Attribute/Timeseries value key (only when subscribe for attribute/timeseries method)\",\n                \"type\": \"string\",\n                \"default\": \"value\"\n            },\n            \"getValueMethod\": {\n                \"title\": \"RPC get value method\",\n                \"type\": \"string\",\n                \"default\": \"getValue\"\n            },\n            \"setValueMethod\": {\n                \"title\": \"RPC set value method\",\n                \"type\": \"string\",\n                \"default\": \"setValue\"\n            },\n            \"parseValueFunction\": {\n                \"title\": \"Parse value function, f(data), returns boolean\",\n                \"type\": \"string\",\n                \"default\": \"return data ? true : false;\"\n            },\n            \"convertValueFunction\": {\n                \"title\": \"Convert value function, f(value), returns payload used by RPC set value method\",\n                \"type\": \"string\",\n                \"default\": \"return value;\"\n            },\n            \"requestTimeout\": {\n                \"title\": \"RPC request timeout\",\n                \"type\": \"number\",\n                \"default\": 500\n            },\n            \"requestPersistent\": {\n                \"title\": \"RPC request persistent\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"persistentPollingInterval\": {\n                \"title\": \"Polling interval in milliseconds to get persistent RPC command response\",\n                \"type\": \"number\",\n                \"default\": 5000,\n                \"minimum\": 1000\n            }\n        },\n        \"required\": [\"requestTimeout\"]\n    },\n    \"form\": [\n        \"initialValue\",\n        \"title\",\n        {\n            \"key\": \"retrieveValueMethod\",\n            \"type\": \"rc-select\",\n            \"multiple\": false,\n            \"items\": [\n                {\n                    \"value\": \"none\",\n                    \"label\": \"Don't retrieve\"\n                },\n                {\n                    \"value\": \"rpc\",\n                    \"label\": \"Call RPC get value method\"\n                },\n                {\n                    \"value\": \"attribute\",\n                    \"label\": \"Subscribe for attribute\"\n                },\n                {\n                    \"value\": \"timeseries\",\n                    \"label\": \"Subscribe for timeseries\"\n                }\n            ]\n        },\n        \"valueKey\",\n        \"getValueMethod\",\n        \"setValueMethod\",\n        {\n            \"key\": \"parseValueFunction\",\n            \"type\": \"javascript\"\n        },\n        {\n            \"key\": \"convertValueFunction\",\n            \"type\": \"javascript\"\n        },\n        \"requestTimeout\",\n        \"requestPersistent\",\n        {\n            \"key\": \"persistentPollingInterval\",\n            \"condition\": \"model.requestPersistent === true\"\n        }\n    ]\n}",
+        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Settings\",\n        \"properties\": {\n            \"initialValue\": {\n                \"title\": \"Initial value\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"title\": {\n                \"title\": \"Switch title\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"retrieveValueMethod\": {\n                \"title\": \"Retrieve on/off value using method\",\n                \"type\": \"string\",\n                \"default\": \"rpc\"\n            },\n            \"valueKey\": {\n                \"title\": \"Attribute/Timeseries value key (only when subscribe for attribute/timeseries method)\",\n                \"type\": \"string\",\n                \"default\": \"value\"\n            },\n            \"getValueMethod\": {\n                \"title\": \"RPC get value method\",\n                \"type\": \"string\",\n                \"default\": \"getValue\"\n            },\n            \"setValueMethod\": {\n                \"title\": \"RPC set value method\",\n                \"type\": \"string\",\n                \"default\": \"setValue\"\n            },\n            \"parseValueFunction\": {\n                \"title\": \"Parse value function, f(data), returns boolean\",\n                \"type\": \"string\",\n                \"default\": \"return data ? true : false;\"\n            },\n            \"convertValueFunction\": {\n                \"title\": \"Convert value function, f(value), returns payload used by RPC set value method\",\n                \"type\": \"string\",\n                \"default\": \"return value;\"\n            },\n            \"requestTimeout\": {\n                \"title\": \"RPC request timeout\",\n                \"type\": \"number\",\n                \"default\": 500\n            },\n            \"requestPersistent\": {\n                \"title\": \"RPC request persistent\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"persistentPollingInterval\": {\n                \"title\": \"Polling interval in milliseconds to get persistent RPC command response\",\n                \"type\": \"number\",\n                \"default\": 5000,\n                \"minimum\": 1000\n            }\n        },\n        \"required\": [\"requestTimeout\"]\n    },\n    \"form\": [\n        \"initialValue\",\n        \"title\",\n        {\n            \"key\": \"retrieveValueMethod\",\n            \"type\": \"rc-select\",\n            \"multiple\": false,\n            \"items\": [\n                {\n                    \"value\": \"none\",\n                    \"label\": \"Don't retrieve\"\n                },\n                {\n                    \"value\": \"rpc\",\n                    \"label\": \"Call RPC get value method\"\n                },\n                {\n                    \"value\": \"attribute\",\n                    \"label\": \"Subscribe for attribute\"\n                },\n                {\n                    \"value\": \"timeseries\",\n                    \"label\": \"Subscribe for timeseries\"\n                }\n            ]\n        },\n        \"valueKey\",\n        \"getValueMethod\",\n        \"setValueMethod\",\n        {\n            \"key\": \"parseValueFunction\",\n            \"type\": \"javascript\",\n            \"helpId\": \"widget/lib/rpc/parse_value_fn\"\n        },\n        {\n            \"key\": \"convertValueFunction\",\n            \"type\": \"javascript\",\n            \"helpId\": \"widget/lib/rpc/convert_value_fn\"\n        },\n        \"requestTimeout\",\n        \"requestPersistent\",\n        {\n            \"key\": \"persistentPollingInterval\",\n            \"condition\": \"model.requestPersistent === true\"\n        }\n    ]\n}",
         "dataKeySettingsSchema": "{}\n",
         "dataKeySettingsSchema": "{}\n",
         "defaultConfig": "{\"targetDeviceAliases\":[],\"showTitle\":false,\"backgroundColor\":\"#e6e7e8\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"requestTimeout\":500,\"initialValue\":false,\"getValueMethod\":\"getValue\",\"setValueMethod\":\"setValue\",\"title\":\"Round switch\",\"retrieveValueMethod\":\"rpc\",\"valueKey\":\"value\",\"parseValueFunction\":\"return data ? true : false;\",\"convertValueFunction\":\"return value;\"},\"title\":\"Round switch\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{},\"decimals\":2}"
         "defaultConfig": "{\"targetDeviceAliases\":[],\"showTitle\":false,\"backgroundColor\":\"#e6e7e8\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"requestTimeout\":500,\"initialValue\":false,\"getValueMethod\":\"getValue\",\"setValueMethod\":\"setValue\",\"title\":\"Round switch\",\"retrieveValueMethod\":\"rpc\",\"valueKey\":\"value\",\"parseValueFunction\":\"return data ? true : false;\",\"convertValueFunction\":\"return value;\"},\"title\":\"Round switch\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{},\"decimals\":2}"
       }
       }
@@ -109,7 +109,7 @@
         "templateHtml": "<tb-led-indicator [ctx]='ctx'></tb-led-indicator>",
         "templateHtml": "<tb-led-indicator [ctx]='ctx'></tb-led-indicator>",
         "templateCss": "",
         "templateCss": "",
         "controllerScript": "self.onInit = function() {\n}\n\nself.onResize = function() {\n}\n\nself.onDestroy = function() {\n}\n",
         "controllerScript": "self.onInit = function() {\n}\n\nself.onResize = function() {\n}\n\nself.onDestroy = function() {\n}\n",
-        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Settings\",\n        \"properties\": {\n            \"initialValue\": {\n                \"title\": \"Initial value\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"title\": {\n                \"title\": \"LED title\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"ledColor\": {\n                \"title\": \"LED Color\",\n                \"type\": \"string\",\n                \"default\": \"green\"\n            },\n            \"performCheckStatus\": {\n                \"title\": \"Perform RPC device status check\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"checkStatusMethod\": {\n                \"title\": \"RPC check device status method\",\n                \"type\": \"string\",\n                \"default\": \"checkStatus\"\n            },\n            \"retrieveValueMethod\": {\n                \"title\": \"Retrieve led status value using method\",\n                \"type\": \"string\",\n                \"default\": \"attribute\"\n            },\n            \"valueAttribute\": {\n                \"title\": \"Device attribute/timeseries containing led status value\",\n                \"type\": \"string\",\n                \"default\": \"value\"\n            },\n            \"parseValueFunction\": {\n                \"title\": \"Parse led status value function, f(data), returns boolean\",\n                \"type\": \"string\",\n                \"default\": \"return data ? true : false;\"\n            },\n            \"requestTimeout\": {\n                \"title\": \"RPC request timeout (ms)\",\n                \"type\": \"number\",\n                \"default\": 500\n            },\n            \"requestPersistent\": {\n                \"title\": \"RPC request persistent\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"persistentPollingInterval\": {\n                \"title\": \"Polling interval in milliseconds to get persistent RPC command response\",\n                \"type\": \"number\",\n                \"default\": 5000,\n                \"minimum\": 1000\n            }\n        },\n        \"required\": [\"valueAttribute\", \"requestTimeout\"]\n    },\n    \"form\": [\n        \"initialValue\",\n        \"title\",\n        {\n          \"key\": \"ledColor\",\n          \"type\": \"color\"\n        },\n        \"performCheckStatus\",\n        \"checkStatusMethod\",\n        {\n            \"key\": \"retrieveValueMethod\",\n            \"type\": \"rc-select\",\n            \"multiple\": false,\n            \"items\": [\n                {\n                    \"value\": \"attribute\",\n                    \"label\": \"Subscribe for attribute\"\n                },\n                {\n                    \"value\": \"timeseries\",\n                    \"label\": \"Subscribe for timeseries\"\n                }\n            ]\n        },\n        \"valueAttribute\",\n        {\n            \"key\": \"parseValueFunction\",\n            \"type\": \"javascript\"\n        },\n        \"requestTimeout\",\n        \"requestPersistent\",\n        {\n            \"key\": \"persistentPollingInterval\",\n            \"condition\": \"model.requestPersistent === true\"\n        }\n    ]\n}",
+        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Settings\",\n        \"properties\": {\n            \"initialValue\": {\n                \"title\": \"Initial value\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"title\": {\n                \"title\": \"LED title\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"ledColor\": {\n                \"title\": \"LED Color\",\n                \"type\": \"string\",\n                \"default\": \"green\"\n            },\n            \"performCheckStatus\": {\n                \"title\": \"Perform RPC device status check\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"checkStatusMethod\": {\n                \"title\": \"RPC check device status method\",\n                \"type\": \"string\",\n                \"default\": \"checkStatus\"\n            },\n            \"retrieveValueMethod\": {\n                \"title\": \"Retrieve led status value using method\",\n                \"type\": \"string\",\n                \"default\": \"attribute\"\n            },\n            \"valueAttribute\": {\n                \"title\": \"Device attribute/timeseries containing led status value\",\n                \"type\": \"string\",\n                \"default\": \"value\"\n            },\n            \"parseValueFunction\": {\n                \"title\": \"Parse led status value function, f(data), returns boolean\",\n                \"type\": \"string\",\n                \"default\": \"return data ? true : false;\"\n            },\n            \"requestTimeout\": {\n                \"title\": \"RPC request timeout (ms)\",\n                \"type\": \"number\",\n                \"default\": 500\n            },\n            \"requestPersistent\": {\n                \"title\": \"RPC request persistent\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"persistentPollingInterval\": {\n                \"title\": \"Polling interval in milliseconds to get persistent RPC command response\",\n                \"type\": \"number\",\n                \"default\": 5000,\n                \"minimum\": 1000\n            }\n        },\n        \"required\": [\"valueAttribute\", \"requestTimeout\"]\n    },\n    \"form\": [\n        \"initialValue\",\n        \"title\",\n        {\n          \"key\": \"ledColor\",\n          \"type\": \"color\"\n        },\n        \"performCheckStatus\",\n        \"checkStatusMethod\",\n        {\n            \"key\": \"retrieveValueMethod\",\n            \"type\": \"rc-select\",\n            \"multiple\": false,\n            \"items\": [\n                {\n                    \"value\": \"attribute\",\n                    \"label\": \"Subscribe for attribute\"\n                },\n                {\n                    \"value\": \"timeseries\",\n                    \"label\": \"Subscribe for timeseries\"\n                }\n            ]\n        },\n        \"valueAttribute\",\n        {\n            \"key\": \"parseValueFunction\",\n            \"type\": \"javascript\",\n            \"helpId\": \"widget/lib/rpc/parse_value_fn\"\n        },\n        \"requestTimeout\",\n        \"requestPersistent\",\n        {\n            \"key\": \"persistentPollingInterval\",\n            \"condition\": \"model.requestPersistent === true\"\n        }\n    ]\n}",
         "dataKeySettingsSchema": "{}\n",
         "dataKeySettingsSchema": "{}\n",
         "defaultConfig": "{\"targetDeviceAliases\":[],\"showTitle\":false,\"backgroundColor\":\"#e6e7e8\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"requestTimeout\":500,\"initialValue\":true,\"title\":\"Led indicator\",\"ledColor\":\"#4caf50\",\"valueAttribute\":\"value\",\"retrieveValueMethod\":\"attribute\",\"parseValueFunction\":\"return data ? true : false;\",\"performCheckStatus\":true,\"checkStatusMethod\":\"checkStatus\"},\"title\":\"Led indicator\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{},\"decimals\":2}"
         "defaultConfig": "{\"targetDeviceAliases\":[],\"showTitle\":false,\"backgroundColor\":\"#e6e7e8\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"requestTimeout\":500,\"initialValue\":true,\"title\":\"Led indicator\",\"ledColor\":\"#4caf50\",\"valueAttribute\":\"value\",\"retrieveValueMethod\":\"attribute\",\"parseValueFunction\":\"return data ? true : false;\",\"performCheckStatus\":true,\"checkStatusMethod\":\"checkStatus\"},\"title\":\"Led indicator\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{},\"decimals\":2}"
       }
       }
@@ -151,4 +151,4 @@
       }
       }
     }
     }
   ]
   ]
-}
+}

@@ -19,8 +19,8 @@
         "templateHtml": "<tb-entities-table-widget \n    [ctx]=\"ctx\">\n</tb-entities-table-widget>",
         "templateHtml": "<tb-entities-table-widget \n    [ctx]=\"ctx\">\n</tb-entities-table-widget>",
         "templateCss": "",
         "templateCss": "",
         "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
         "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
-        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"EntitiesTableSettings\",\n        \"properties\": {\n            \"entitiesTitle\": {\n                \"title\": \"Entities table title\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"enableSearch\": {\n                \"title\": \"Enable entities search\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"enableSelectColumnDisplay\": {\n                \"title\": \"Enable select columns to display\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"enableStickyHeader\": {\n                \"title\": \"Always display header\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"enableStickyAction\": {\n                \"title\": \"Always display actions column\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"reserveSpaceForHiddenAction\": {\n                \"title\": \"Hidden cell button actions display mode\",\n                \"type\": \"string\",\n                \"default\": \"true\"\n            },\n            \"displayEntityName\": {\n                \"title\": \"Display entity name column\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"entityNameColumnTitle\": {\n                \"title\": \"Entity name column title\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"displayEntityLabel\": {\n                \"title\": \"Display entity label column\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"entityLabelColumnTitle\": {\n                \"title\": \"Entity label column title\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"displayEntityType\": {\n                \"title\": \"Display entity type column\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"displayPagination\": {\n                \"title\": \"Display pagination\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"defaultPageSize\": {\n                \"title\": \"Default page size\",\n                \"type\": \"number\",\n                \"default\": 10\n            },\n            \"defaultSortOrder\": {\n                \"title\": \"Default sort order\",\n                \"type\": \"string\",\n                \"default\": \"entityName\"\n            },\n            \"useRowStyleFunction\": {\n                \"title\": \"Use row style function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"rowStyleFunction\": {\n                \"title\": \"Row style function: f(entity, ctx)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"entitiesTitle\",\n        \"enableSearch\",\n        \"enableSelectColumnDisplay\",\n        \"enableStickyHeader\",\n        \"enableStickyAction\",\n        {\n          \"key\": \"reserveSpaceForHiddenAction\",\n          \"type\": \"rc-select\",\n          \"multiple\": false,\n          \"items\": [\n            {\n              \"value\": \"true\",\n              \"label\": \"Show empty space instead of hidden cell button action\"\n            },\n            {\n              \"value\": \"false\",\n              \"label\": \"Don't reserve space for hidden action buttons\"\n            }\n          ]\n        },\n        \"displayEntityName\",\n        \"entityNameColumnTitle\",\n        \"displayEntityLabel\",\n        \"entityLabelColumnTitle\",\n        \"displayEntityType\",\n        \"displayPagination\",\n        \"defaultPageSize\",\n        \"defaultSortOrder\",\n        \"useRowStyleFunction\",\n        {\n            \"key\": \"rowStyleFunction\",\n            \"type\": \"javascript\",\n            \"condition\": \"model.useRowStyleFunction === true\"\n        }\n    ]\n}",
-        "dataKeySettingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"DataKeySettings\",\n        \"properties\": {\n            \"columnWidth\": {\n                \"title\": \"Column width (px or %)\",\n                \"type\": \"string\",\n                \"default\": \"0px\"\n            },\n            \"useCellStyleFunction\": {\n                \"title\": \"Use cell style function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"cellStyleFunction\": {\n                \"title\": \"Cell style function: f(value, entity, ctx)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"useCellContentFunction\": {\n                \"title\": \"Use cell content function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"cellContentFunction\": {\n                \"title\": \"Cell content function: f(value, entity, ctx)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"defaultColumnVisibility\": {\n                \"title\": \"Default column visibility\",\n                \"type\": \"string\",\n                \"default\": \"visible\"\n            },\n            \"columnSelectionToDisplay\": {\n                \"title\": \"Column selection in 'Columns to Display'\",\n                \"type\": \"string\",\n                \"default\": \"enabled\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"columnWidth\",\n        \"useCellStyleFunction\",\n        {\n            \"key\": \"cellStyleFunction\",\n            \"type\": \"javascript\",\n            \"condition\": \"model.useCellStyleFunction === true\"\n        },\n        \"useCellContentFunction\",\n        {\n            \"key\": \"cellContentFunction\",\n            \"type\": \"javascript\",\n            \"condition\": \"model.useCellContentFunction === true\"\n        },\n        {\n            \"key\": \"defaultColumnVisibility\",\n            \"type\": \"rc-select\",\n            \"multiple\": false,\n            \"items\": [\n                {\n                    \"value\": \"visible\",\n                    \"label\": \"Visible\"\n                },\n                {\n                    \"value\": \"hidden\",\n                    \"label\": \"Hidden\"\n                }    \n            ]\n        },\n        {\n            \"key\": \"columnSelectionToDisplay\",\n            \"type\": \"rc-select\",\n            \"multiple\": false,\n            \"items\": [\n                {\n                    \"value\": \"enabled\",\n                    \"label\": \"Enabled\"\n                },\n                {\n                    \"value\": \"disabled\",\n                    \"label\": \"Disabled\"\n                }    \n            ]\n        }\n    ]\n}",
+        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"EntitiesTableSettings\",\n        \"properties\": {\n            \"entitiesTitle\": {\n                \"title\": \"Entities table title\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"enableSearch\": {\n                \"title\": \"Enable entities search\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"enableSelectColumnDisplay\": {\n                \"title\": \"Enable select columns to display\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"enableStickyHeader\": {\n                \"title\": \"Always display header\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"enableStickyAction\": {\n                \"title\": \"Always display actions column\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"reserveSpaceForHiddenAction\": {\n                \"title\": \"Hidden cell button actions display mode\",\n                \"type\": \"string\",\n                \"default\": \"true\"\n            },\n            \"displayEntityName\": {\n                \"title\": \"Display entity name column\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"entityNameColumnTitle\": {\n                \"title\": \"Entity name column title\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"displayEntityLabel\": {\n                \"title\": \"Display entity label column\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"entityLabelColumnTitle\": {\n                \"title\": \"Entity label column title\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"displayEntityType\": {\n                \"title\": \"Display entity type column\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"displayPagination\": {\n                \"title\": \"Display pagination\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"defaultPageSize\": {\n                \"title\": \"Default page size\",\n                \"type\": \"number\",\n                \"default\": 10\n            },\n            \"defaultSortOrder\": {\n                \"title\": \"Default sort order\",\n                \"type\": \"string\",\n                \"default\": \"entityName\"\n            },\n            \"useRowStyleFunction\": {\n                \"title\": \"Use row style function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"rowStyleFunction\": {\n                \"title\": \"Row style function: f(entity, ctx)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"entitiesTitle\",\n        \"enableSearch\",\n        \"enableSelectColumnDisplay\",\n        \"enableStickyHeader\",\n        \"enableStickyAction\",\n        {\n          \"key\": \"reserveSpaceForHiddenAction\",\n          \"type\": \"rc-select\",\n          \"multiple\": false,\n          \"items\": [\n            {\n              \"value\": \"true\",\n              \"label\": \"Show empty space instead of hidden cell button action\"\n            },\n            {\n              \"value\": \"false\",\n              \"label\": \"Don't reserve space for hidden action buttons\"\n            }\n          ]\n        },\n        \"displayEntityName\",\n        \"entityNameColumnTitle\",\n        \"displayEntityLabel\",\n        \"entityLabelColumnTitle\",\n        \"displayEntityType\",\n        \"displayPagination\",\n        \"defaultPageSize\",\n        \"defaultSortOrder\",\n        \"useRowStyleFunction\",\n        {\n            \"key\": \"rowStyleFunction\",\n            \"type\": \"javascript\",\n            \"helpId\": \"widget/lib/entity/row_style_fn\",\n            \"condition\": \"model.useRowStyleFunction === true\"\n        }\n    ]\n}",
+        "dataKeySettingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"DataKeySettings\",\n        \"properties\": {\n            \"columnWidth\": {\n                \"title\": \"Column width (px or %)\",\n                \"type\": \"string\",\n                \"default\": \"0px\"\n            },\n            \"useCellStyleFunction\": {\n                \"title\": \"Use cell style function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"cellStyleFunction\": {\n                \"title\": \"Cell style function: f(value, entity, ctx)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"useCellContentFunction\": {\n                \"title\": \"Use cell content function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"cellContentFunction\": {\n                \"title\": \"Cell content function: f(value, entity, ctx)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"defaultColumnVisibility\": {\n                \"title\": \"Default column visibility\",\n                \"type\": \"string\",\n                \"default\": \"visible\"\n            },\n            \"columnSelectionToDisplay\": {\n                \"title\": \"Column selection in 'Columns to Display'\",\n                \"type\": \"string\",\n                \"default\": \"enabled\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"columnWidth\",\n        \"useCellStyleFunction\",\n        {\n            \"key\": \"cellStyleFunction\",\n            \"type\": \"javascript\",\n            \"helpId\": \"widget/lib/entity/cell_style_fn\",\n            \"condition\": \"model.useCellStyleFunction === true\"\n        },\n        \"useCellContentFunction\",\n        {\n            \"key\": \"cellContentFunction\",\n            \"type\": \"javascript\",\n            \"helpId\": \"widget/lib/entity/cell_content_fn\",\n            \"condition\": \"model.useCellContentFunction === true\"\n        },\n        {\n            \"key\": \"defaultColumnVisibility\",\n            \"type\": \"rc-select\",\n            \"multiple\": false,\n            \"items\": [\n                {\n                    \"value\": \"visible\",\n                    \"label\": \"Visible\"\n                },\n                {\n                    \"value\": \"hidden\",\n                    \"label\": \"Hidden\"\n                }    \n            ]\n        },\n        {\n            \"key\": \"columnSelectionToDisplay\",\n            \"type\": \"rc-select\",\n            \"multiple\": false,\n            \"items\": [\n                {\n                    \"value\": \"enabled\",\n                    \"label\": \"Enabled\"\n                },\n                {\n                    \"value\": \"disabled\",\n                    \"label\": \"Disabled\"\n                }    \n            ]\n        }\n    ]\n}",
         "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"enableSearch\":true,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"entityName\",\"displayEntityName\":true,\"displayEntityType\":true,\"entitiesTitle\":\"Device admin table\",\"enableSelectColumnDisplay\":true},\"title\":\"Device admin table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#f44336\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6401141393938932,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{\"headerButton\":[{\"name\":\"Add device\",\"icon\":\"add\",\"type\":\"customPretty\",\"customHtml\":\"<form #addDeviceForm=\\\"ngForm\\\" [formGroup]=\\\"addDeviceFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar fxLayout=\\\"row\\\" color=\\\"primary\\\">\\n    <h2>Add device</h2>\\n    <span fxFlex></span>\\n    <button mat-button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n      <div class=\\\"mat-padding\\\" fxLayout=\\\"column\\\">\\n            <mat-form-field class=\\\"mat-block\\\">\\n                <mat-label>Device name</mat-label>\\n                <input matInput formControlName=\\\"deviceName\\\" required>\\n                <mat-error *ngIf=\\\"addDeviceFormGroup.get('deviceName').hasError('required')\\\">\\n                    Device name is required.\\n                </mat-error>\\n            </mat-form-field>\\n            <div fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <tb-entity-subtype-autocomplete\\n                    fxFlex=\\\"50\\\"\\n                    formControlName=\\\"deviceType\\\"\\n                    [required]=\\\"true\\\"\\n                    [entityType]=\\\"'DEVICE'\\\"\\n                ></tb-entity-subtype-autocomplete>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Label</mat-label>\\n                    <input matInput formControlName=\\\"deviceLabel\\\">\\n                </mat-form-field>\\n            </div>\\n            <div formGroupName=\\\"attributes\\\" fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Latitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n                </mat-form-field>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Longitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n                </mat-form-field>\\n            </div>\\n      </div>  \\n  </div>\\n  <div mat-dialog-actions fxLayout=\\\"row\\\">\\n    <span fxFlex></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            type=\\\"submit\\\"\\n            [disabled]=\\\"(isLoading$ | async) || addDeviceForm.invalid || !addDeviceForm.dirty\\\">\\n      Create\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenAddDeviceDialog();\\n\\nfunction openAddDeviceDialog() {\\n    customDialog.customDialog(htmlTemplate, AddDeviceDialogController).subscribe();\\n}\\n\\nfunction AddDeviceDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.addDeviceFormGroup = vm.fb.group({\\n      deviceName: ['', [vm.validators.required]],\\n      deviceType: ['', [vm.validators.required]],\\n      deviceLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.addDeviceFormGroup.markAsPristine();\\n        let device = {\\n            name: vm.addDeviceFormGroup.get('deviceName').value,\\n            type: vm.addDeviceFormGroup.get('deviceType').value,\\n            label: vm.addDeviceFormGroup.get('deviceLabel').value\\n        };\\n        deviceService.saveDevice(device).subscribe(\\n            function (device) {\\n                saveAttributes(device.id).subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    function saveAttributes(entityId) {\\n        let attributes = vm.addDeviceFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, \\\"SERVER_SCOPE\\\", attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"70837a9d-c3de-a9a7-03c5-dccd14998758\"}],\"actionCellButton\":[{\"name\":\"Edit device\",\"icon\":\"edit\",\"type\":\"customPretty\",\"customHtml\":\"<form #editDeviceForm=\\\"ngForm\\\" [formGroup]=\\\"editDeviceFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar fxLayout=\\\"row\\\" color=\\\"primary\\\">\\n    <h2>Edit device</h2>\\n    <span fxFlex></span>\\n    <button mat-button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n      <div class=\\\"mat-padding\\\" fxLayout=\\\"column\\\">\\n            <mat-form-field class=\\\"mat-block\\\">\\n                <mat-label>Device name</mat-label>\\n                <input matInput formControlName=\\\"deviceName\\\" required>\\n                <mat-error *ngIf=\\\"editDeviceFormGroup.get('deviceName').hasError('required')\\\">\\n                    Device name is required.\\n                </mat-error>\\n            </mat-form-field>\\n            <div fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <tb-entity-subtype-autocomplete\\n                    fxFlex=\\\"50\\\"\\n                    formControlName=\\\"deviceType\\\"\\n                    [required]=\\\"true\\\"\\n                    [entityType]=\\\"'DEVICE'\\\"\\n                ></tb-entity-subtype-autocomplete>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Label</mat-label>\\n                    <input matInput formControlName=\\\"deviceLabel\\\">\\n                </mat-form-field>\\n            </div>\\n            <div formGroupName=\\\"attributes\\\" fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Latitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n                </mat-form-field>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Longitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n                </mat-form-field>\\n            </div>\\n      </div>  \\n  </div>\\n  <div mat-dialog-actions fxLayout=\\\"row\\\">\\n    <span fxFlex></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            type=\\\"submit\\\"\\n            [disabled]=\\\"(isLoading$ | async) || editDeviceForm.invalid || !editDeviceForm.dirty\\\">\\n      Update\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenEditDeviceDialog();\\n\\nfunction openEditDeviceDialog() {\\n    customDialog.customDialog(htmlTemplate, EditDeviceDialogController).subscribe();\\n}\\n\\nfunction EditDeviceDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.device = null;\\n    vm.attributes = {};\\n    \\n    vm.editDeviceFormGroup = vm.fb.group({\\n      deviceName: ['', [vm.validators.required]],\\n      deviceType: ['', [vm.validators.required]],\\n      deviceLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.editDeviceFormGroup.markAsPristine();\\n        vm.device.name = vm.editDeviceFormGroup.get('deviceName').value,\\n        vm.device.type = vm.editDeviceFormGroup.get('deviceType').value,\\n        vm.device.label = vm.editDeviceFormGroup.get('deviceLabel').value\\n        deviceService.saveDevice(vm.device).subscribe(\\n            function () {\\n                saveAttributes().subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    getEntityInfo();\\n    \\n    function getEntityInfo() {\\n        deviceService.getDevice(entityId.id).subscribe(\\n            function (device) {\\n                attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE',\\n                                                    ['latitude', 'longitude']).subscribe(\\n                   function (attributes) {\\n                        for (let i = 0; i < attributes.length; i++) {\\n                            vm.attributes[attributes[i].key] = attributes[i].value; \\n                        }\\n                        vm.device = device;\\n                        vm.editDeviceFormGroup.patchValue(\\n                            {\\n                                deviceName: vm.device.name,\\n                                deviceType: vm.device.type,\\n                                deviceLabel: vm.device.label,\\n                                attributes: {\\n                                    latitude: vm.attributes.latitude,\\n                                    longitude: vm.attributes.longitude\\n                                }\\n                            }, {emitEvent: false}\\n                        );\\n                   } \\n                );\\n            }\\n        );    \\n    }\\n    \\n    function saveAttributes() {\\n        let attributes = vm.editDeviceFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, 'SERVER_SCOPE', attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"93931e52-5d7c-903e-67aa-b9435df44ff4\"},{\"name\":\"Delete device\",\"icon\":\"delete\",\"type\":\"custom\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet dialogs = $injector.get(widgetContext.servicesMap.get('dialogs'));\\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\\n\\nopenDeleteDeviceDialog();\\n\\nfunction openDeleteDeviceDialog() {\\n    let title = \\\"Are you sure you want to delete the device \\\" + entityName +  \\\"?\\\";\\n    let content = \\\"Be careful, after the confirmation, the device and all related data will become unrecoverable!\\\";\\n    dialogs.confirm(title, content, 'Cancel', 'Delete').subscribe(\\n        function (result) {\\n            if (result) {\\n                deleteDevice();\\n            }\\n        }\\n    );\\n}\\n\\nfunction deleteDevice() {\\n    deviceService.deleteDevice(entityId.id).subscribe(\\n        function () {\\n            widgetContext.updateAliases();\\n        }\\n    );\\n}\\n\",\"id\":\"ec2708f6-9ff0-186b-e4fc-7635ebfa3074\"}]}}"
         "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"enableSearch\":true,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"entityName\",\"displayEntityName\":true,\"displayEntityType\":true,\"entitiesTitle\":\"Device admin table\",\"enableSelectColumnDisplay\":true},\"title\":\"Device admin table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#f44336\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6401141393938932,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{\"headerButton\":[{\"name\":\"Add device\",\"icon\":\"add\",\"type\":\"customPretty\",\"customHtml\":\"<form #addDeviceForm=\\\"ngForm\\\" [formGroup]=\\\"addDeviceFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar fxLayout=\\\"row\\\" color=\\\"primary\\\">\\n    <h2>Add device</h2>\\n    <span fxFlex></span>\\n    <button mat-button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n      <div class=\\\"mat-padding\\\" fxLayout=\\\"column\\\">\\n            <mat-form-field class=\\\"mat-block\\\">\\n                <mat-label>Device name</mat-label>\\n                <input matInput formControlName=\\\"deviceName\\\" required>\\n                <mat-error *ngIf=\\\"addDeviceFormGroup.get('deviceName').hasError('required')\\\">\\n                    Device name is required.\\n                </mat-error>\\n            </mat-form-field>\\n            <div fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <tb-entity-subtype-autocomplete\\n                    fxFlex=\\\"50\\\"\\n                    formControlName=\\\"deviceType\\\"\\n                    [required]=\\\"true\\\"\\n                    [entityType]=\\\"'DEVICE'\\\"\\n                ></tb-entity-subtype-autocomplete>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Label</mat-label>\\n                    <input matInput formControlName=\\\"deviceLabel\\\">\\n                </mat-form-field>\\n            </div>\\n            <div formGroupName=\\\"attributes\\\" fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Latitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n                </mat-form-field>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Longitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n                </mat-form-field>\\n            </div>\\n      </div>  \\n  </div>\\n  <div mat-dialog-actions fxLayout=\\\"row\\\">\\n    <span fxFlex></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            type=\\\"submit\\\"\\n            [disabled]=\\\"(isLoading$ | async) || addDeviceForm.invalid || !addDeviceForm.dirty\\\">\\n      Create\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenAddDeviceDialog();\\n\\nfunction openAddDeviceDialog() {\\n    customDialog.customDialog(htmlTemplate, AddDeviceDialogController).subscribe();\\n}\\n\\nfunction AddDeviceDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.addDeviceFormGroup = vm.fb.group({\\n      deviceName: ['', [vm.validators.required]],\\n      deviceType: ['', [vm.validators.required]],\\n      deviceLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.addDeviceFormGroup.markAsPristine();\\n        let device = {\\n            name: vm.addDeviceFormGroup.get('deviceName').value,\\n            type: vm.addDeviceFormGroup.get('deviceType').value,\\n            label: vm.addDeviceFormGroup.get('deviceLabel').value\\n        };\\n        deviceService.saveDevice(device).subscribe(\\n            function (device) {\\n                saveAttributes(device.id).subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    function saveAttributes(entityId) {\\n        let attributes = vm.addDeviceFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, \\\"SERVER_SCOPE\\\", attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"70837a9d-c3de-a9a7-03c5-dccd14998758\"}],\"actionCellButton\":[{\"name\":\"Edit device\",\"icon\":\"edit\",\"type\":\"customPretty\",\"customHtml\":\"<form #editDeviceForm=\\\"ngForm\\\" [formGroup]=\\\"editDeviceFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar fxLayout=\\\"row\\\" color=\\\"primary\\\">\\n    <h2>Edit device</h2>\\n    <span fxFlex></span>\\n    <button mat-button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n      <div class=\\\"mat-padding\\\" fxLayout=\\\"column\\\">\\n            <mat-form-field class=\\\"mat-block\\\">\\n                <mat-label>Device name</mat-label>\\n                <input matInput formControlName=\\\"deviceName\\\" required>\\n                <mat-error *ngIf=\\\"editDeviceFormGroup.get('deviceName').hasError('required')\\\">\\n                    Device name is required.\\n                </mat-error>\\n            </mat-form-field>\\n            <div fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <tb-entity-subtype-autocomplete\\n                    fxFlex=\\\"50\\\"\\n                    formControlName=\\\"deviceType\\\"\\n                    [required]=\\\"true\\\"\\n                    [entityType]=\\\"'DEVICE'\\\"\\n                ></tb-entity-subtype-autocomplete>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Label</mat-label>\\n                    <input matInput formControlName=\\\"deviceLabel\\\">\\n                </mat-form-field>\\n            </div>\\n            <div formGroupName=\\\"attributes\\\" fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Latitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n                </mat-form-field>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Longitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n                </mat-form-field>\\n            </div>\\n      </div>  \\n  </div>\\n  <div mat-dialog-actions fxLayout=\\\"row\\\">\\n    <span fxFlex></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            type=\\\"submit\\\"\\n            [disabled]=\\\"(isLoading$ | async) || editDeviceForm.invalid || !editDeviceForm.dirty\\\">\\n      Update\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenEditDeviceDialog();\\n\\nfunction openEditDeviceDialog() {\\n    customDialog.customDialog(htmlTemplate, EditDeviceDialogController).subscribe();\\n}\\n\\nfunction EditDeviceDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.device = null;\\n    vm.attributes = {};\\n    \\n    vm.editDeviceFormGroup = vm.fb.group({\\n      deviceName: ['', [vm.validators.required]],\\n      deviceType: ['', [vm.validators.required]],\\n      deviceLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.editDeviceFormGroup.markAsPristine();\\n        vm.device.name = vm.editDeviceFormGroup.get('deviceName').value,\\n        vm.device.type = vm.editDeviceFormGroup.get('deviceType').value,\\n        vm.device.label = vm.editDeviceFormGroup.get('deviceLabel').value\\n        deviceService.saveDevice(vm.device).subscribe(\\n            function () {\\n                saveAttributes().subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    getEntityInfo();\\n    \\n    function getEntityInfo() {\\n        deviceService.getDevice(entityId.id).subscribe(\\n            function (device) {\\n                attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE',\\n                                                    ['latitude', 'longitude']).subscribe(\\n                   function (attributes) {\\n                        for (let i = 0; i < attributes.length; i++) {\\n                            vm.attributes[attributes[i].key] = attributes[i].value; \\n                        }\\n                        vm.device = device;\\n                        vm.editDeviceFormGroup.patchValue(\\n                            {\\n                                deviceName: vm.device.name,\\n                                deviceType: vm.device.type,\\n                                deviceLabel: vm.device.label,\\n                                attributes: {\\n                                    latitude: vm.attributes.latitude,\\n                                    longitude: vm.attributes.longitude\\n                                }\\n                            }, {emitEvent: false}\\n                        );\\n                   } \\n                );\\n            }\\n        );    \\n    }\\n    \\n    function saveAttributes() {\\n        let attributes = vm.editDeviceFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, 'SERVER_SCOPE', attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"93931e52-5d7c-903e-67aa-b9435df44ff4\"},{\"name\":\"Delete device\",\"icon\":\"delete\",\"type\":\"custom\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet dialogs = $injector.get(widgetContext.servicesMap.get('dialogs'));\\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\\n\\nopenDeleteDeviceDialog();\\n\\nfunction openDeleteDeviceDialog() {\\n    let title = \\\"Are you sure you want to delete the device \\\" + entityName +  \\\"?\\\";\\n    let content = \\\"Be careful, after the confirmation, the device and all related data will become unrecoverable!\\\";\\n    dialogs.confirm(title, content, 'Cancel', 'Delete').subscribe(\\n        function (result) {\\n            if (result) {\\n                deleteDevice();\\n            }\\n        }\\n    );\\n}\\n\\nfunction deleteDevice() {\\n    deviceService.deleteDevice(entityId.id).subscribe(\\n        function () {\\n            widgetContext.updateAliases();\\n        }\\n    );\\n}\\n\",\"id\":\"ec2708f6-9ff0-186b-e4fc-7635ebfa3074\"}]}}"
       }
       }
     },
     },
@@ -37,8 +37,8 @@
         "templateHtml": "<tb-entities-table-widget \n    [ctx]=\"ctx\">\n</tb-entities-table-widget>",
         "templateHtml": "<tb-entities-table-widget \n    [ctx]=\"ctx\">\n</tb-entities-table-widget>",
         "templateCss": "",
         "templateCss": "",
         "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
         "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
-        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"EntitiesTableSettings\",\n        \"properties\": {\n            \"entitiesTitle\": {\n                \"title\": \"Entities table title\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"enableSearch\": {\n                \"title\": \"Enable entities search\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"enableSelectColumnDisplay\": {\n                \"title\": \"Enable select columns to display\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"enableStickyHeader\": {\n                \"title\": \"Always display header\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"enableStickyAction\": {\n                \"title\": \"Always display actions column\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"reserveSpaceForHiddenAction\": {\n                \"title\": \"Hidden cell button actions display mode\",\n                \"type\": \"string\",\n                \"default\": \"true\"\n            },\n            \"displayEntityName\": {\n                \"title\": \"Display entity name column\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"entityNameColumnTitle\": {\n                \"title\": \"Entity name column title\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"displayEntityLabel\": {\n                \"title\": \"Display entity label column\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"entityLabelColumnTitle\": {\n                \"title\": \"Entity label column title\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"displayEntityType\": {\n                \"title\": \"Display entity type column\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"displayPagination\": {\n                \"title\": \"Display pagination\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"defaultPageSize\": {\n                \"title\": \"Default page size\",\n                \"type\": \"number\",\n                \"default\": 10\n            },\n            \"defaultSortOrder\": {\n                \"title\": \"Default sort order\",\n                \"type\": \"string\",\n                \"default\": \"entityName\"\n            },\n            \"useRowStyleFunction\": {\n                \"title\": \"Use row style function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"rowStyleFunction\": {\n                \"title\": \"Row style function: f(entity, ctx)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"entitiesTitle\",\n        \"enableSearch\",\n        \"enableSelectColumnDisplay\",\n        \"enableStickyHeader\",\n        \"enableStickyAction\",\n        {\n          \"key\": \"reserveSpaceForHiddenAction\",\n          \"type\": \"rc-select\",\n          \"multiple\": false,\n          \"items\": [\n            {\n              \"value\": \"true\",\n              \"label\": \"Show empty space instead of hidden cell button action\"\n            },\n            {\n              \"value\": \"false\",\n              \"label\": \"Don't reserve space for hidden action buttons\"\n            }\n          ]\n        },\n        \"displayEntityName\",\n        \"entityNameColumnTitle\",\n        \"displayEntityLabel\",\n        \"entityLabelColumnTitle\",\n        \"displayEntityType\",\n        \"displayPagination\",\n        \"defaultPageSize\",\n        \"defaultSortOrder\",\n        \"useRowStyleFunction\",\n        {\n            \"key\": \"rowStyleFunction\",\n            \"type\": \"javascript\",\n            \"condition\": \"model.useRowStyleFunction === true\"\n        }\n    ]\n}",
-        "dataKeySettingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"DataKeySettings\",\n        \"properties\": {\n            \"columnWidth\": {\n                \"title\": \"Column width (px or %)\",\n                \"type\": \"string\",\n                \"default\": \"0px\"\n            },\n            \"useCellStyleFunction\": {\n                \"title\": \"Use cell style function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"cellStyleFunction\": {\n                \"title\": \"Cell style function: f(value, entity, ctx)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"useCellContentFunction\": {\n                \"title\": \"Use cell content function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"cellContentFunction\": {\n                \"title\": \"Cell content function: f(value, entity, ctx)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"defaultColumnVisibility\": {\n                \"title\": \"Default column visibility\",\n                \"type\": \"string\",\n                \"default\": \"visible\"\n            },\n            \"columnSelectionToDisplay\": {\n                \"title\": \"Column selection in 'Columns to Display'\",\n                \"type\": \"string\",\n                \"default\": \"enabled\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"columnWidth\",\n        \"useCellStyleFunction\",\n        {\n            \"key\": \"cellStyleFunction\",\n            \"type\": \"javascript\",\n            \"condition\": \"model.useCellStyleFunction === true\"\n        },\n        \"useCellContentFunction\",\n        {\n            \"key\": \"cellContentFunction\",\n            \"type\": \"javascript\",\n            \"condition\": \"model.useCellContentFunction === true\"\n        },\n        {\n            \"key\": \"defaultColumnVisibility\",\n            \"type\": \"rc-select\",\n            \"multiple\": false,\n            \"items\": [\n                {\n                    \"value\": \"visible\",\n                    \"label\": \"Visible\"\n                },\n                {\n                    \"value\": \"hidden\",\n                    \"label\": \"Hidden\"\n                }    \n            ]\n        },\n        {\n            \"key\": \"columnSelectionToDisplay\",\n            \"type\": \"rc-select\",\n            \"multiple\": false,\n            \"items\": [\n                {\n                    \"value\": \"enabled\",\n                    \"label\": \"Enabled\"\n                },\n                {\n                    \"value\": \"disabled\",\n                    \"label\": \"Disabled\"\n                }    \n            ]\n        }\n    ]\n}",
+        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"EntitiesTableSettings\",\n        \"properties\": {\n            \"entitiesTitle\": {\n                \"title\": \"Entities table title\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"enableSearch\": {\n                \"title\": \"Enable entities search\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"enableSelectColumnDisplay\": {\n                \"title\": \"Enable select columns to display\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"enableStickyHeader\": {\n                \"title\": \"Always display header\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"enableStickyAction\": {\n                \"title\": \"Always display actions column\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"reserveSpaceForHiddenAction\": {\n                \"title\": \"Hidden cell button actions display mode\",\n                \"type\": \"string\",\n                \"default\": \"true\"\n            },\n            \"displayEntityName\": {\n                \"title\": \"Display entity name column\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"entityNameColumnTitle\": {\n                \"title\": \"Entity name column title\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"displayEntityLabel\": {\n                \"title\": \"Display entity label column\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"entityLabelColumnTitle\": {\n                \"title\": \"Entity label column title\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"displayEntityType\": {\n                \"title\": \"Display entity type column\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"displayPagination\": {\n                \"title\": \"Display pagination\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"defaultPageSize\": {\n                \"title\": \"Default page size\",\n                \"type\": \"number\",\n                \"default\": 10\n            },\n            \"defaultSortOrder\": {\n                \"title\": \"Default sort order\",\n                \"type\": \"string\",\n                \"default\": \"entityName\"\n            },\n            \"useRowStyleFunction\": {\n                \"title\": \"Use row style function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"rowStyleFunction\": {\n                \"title\": \"Row style function: f(entity, ctx)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"entitiesTitle\",\n        \"enableSearch\",\n        \"enableSelectColumnDisplay\",\n        \"enableStickyHeader\",\n        \"enableStickyAction\",\n        {\n          \"key\": \"reserveSpaceForHiddenAction\",\n          \"type\": \"rc-select\",\n          \"multiple\": false,\n          \"items\": [\n            {\n              \"value\": \"true\",\n              \"label\": \"Show empty space instead of hidden cell button action\"\n            },\n            {\n              \"value\": \"false\",\n              \"label\": \"Don't reserve space for hidden action buttons\"\n            }\n          ]\n        },\n        \"displayEntityName\",\n        \"entityNameColumnTitle\",\n        \"displayEntityLabel\",\n        \"entityLabelColumnTitle\",\n        \"displayEntityType\",\n        \"displayPagination\",\n        \"defaultPageSize\",\n        \"defaultSortOrder\",\n        \"useRowStyleFunction\",\n        {\n            \"key\": \"rowStyleFunction\",\n            \"type\": \"javascript\",\n            \"helpId\": \"widget/lib/entity/row_style_fn\",\n            \"condition\": \"model.useRowStyleFunction === true\"\n        }\n    ]\n}",
+        "dataKeySettingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"DataKeySettings\",\n        \"properties\": {\n            \"columnWidth\": {\n                \"title\": \"Column width (px or %)\",\n                \"type\": \"string\",\n                \"default\": \"0px\"\n            },\n            \"useCellStyleFunction\": {\n                \"title\": \"Use cell style function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"cellStyleFunction\": {\n                \"title\": \"Cell style function: f(value, entity, ctx)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"useCellContentFunction\": {\n                \"title\": \"Use cell content function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"cellContentFunction\": {\n                \"title\": \"Cell content function: f(value, entity, ctx)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"defaultColumnVisibility\": {\n                \"title\": \"Default column visibility\",\n                \"type\": \"string\",\n                \"default\": \"visible\"\n            },\n            \"columnSelectionToDisplay\": {\n                \"title\": \"Column selection in 'Columns to Display'\",\n                \"type\": \"string\",\n                \"default\": \"enabled\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"columnWidth\",\n        \"useCellStyleFunction\",\n        {\n            \"key\": \"cellStyleFunction\",\n            \"type\": \"javascript\",\n            \"helpId\": \"widget/lib/entity/cell_style_fn\",\n            \"condition\": \"model.useCellStyleFunction === true\"\n        },\n        \"useCellContentFunction\",\n        {\n            \"key\": \"cellContentFunction\",\n            \"type\": \"javascript\",\n            \"helpId\": \"widget/lib/entity/cell_content_fn\",\n            \"condition\": \"model.useCellContentFunction === true\"\n        },\n        {\n            \"key\": \"defaultColumnVisibility\",\n            \"type\": \"rc-select\",\n            \"multiple\": false,\n            \"items\": [\n                {\n                    \"value\": \"visible\",\n                    \"label\": \"Visible\"\n                },\n                {\n                    \"value\": \"hidden\",\n                    \"label\": \"Hidden\"\n                }    \n            ]\n        },\n        {\n            \"key\": \"columnSelectionToDisplay\",\n            \"type\": \"rc-select\",\n            \"multiple\": false,\n            \"items\": [\n                {\n                    \"value\": \"enabled\",\n                    \"label\": \"Enabled\"\n                },\n                {\n                    \"value\": \"disabled\",\n                    \"label\": \"Disabled\"\n                }    \n            ]\n        }\n    ]\n}",
         "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"enableSearch\":true,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"entityName\",\"displayEntityName\":true,\"displayEntityType\":true,\"entitiesTitle\":\"Asset admin table\",\"enableSelectColumnDisplay\":true},\"title\":\"Asset admin table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#f44336\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6401141393938932,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{\"headerButton\":[{\"name\":\"Add asset\",\"icon\":\"add\",\"type\":\"customPretty\",\"customHtml\":\"<form #addAssetForm=\\\"ngForm\\\" [formGroup]=\\\"addAssetFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar fxLayout=\\\"row\\\" color=\\\"primary\\\">\\n    <h2>Add asset</h2>\\n    <span fxFlex></span>\\n    <button mat-button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n      <div class=\\\"mat-padding\\\" fxLayout=\\\"column\\\">\\n            <mat-form-field class=\\\"mat-block\\\">\\n                <mat-label>Asset name</mat-label>\\n                <input matInput formControlName=\\\"assetName\\\" required>\\n                <mat-error *ngIf=\\\"addAssetFormGroup.get('assetName').hasError('required')\\\">\\n                    Asset name is required.\\n                </mat-error>\\n            </mat-form-field>\\n            <div fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <tb-entity-subtype-autocomplete\\n                    fxFlex=\\\"50\\\"\\n                    formControlName=\\\"assetType\\\"\\n                    [required]=\\\"true\\\"\\n                    [entityType]=\\\"'ASSET'\\\"\\n                ></tb-entity-subtype-autocomplete>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Label</mat-label>\\n                    <input matInput formControlName=\\\"assetLabel\\\">\\n                </mat-form-field>\\n            </div>\\n            <div formGroupName=\\\"attributes\\\" fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Latitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n                </mat-form-field>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Longitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n                </mat-form-field>\\n            </div>\\n      </div>  \\n  </div>\\n  <div mat-dialog-actions fxLayout=\\\"row\\\">\\n    <span fxFlex></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            type=\\\"submit\\\"\\n            [disabled]=\\\"(isLoading$ | async) || addAssetForm.invalid || !addAssetForm.dirty\\\">\\n      Create\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenAddAssetDialog();\\n\\nfunction openAddAssetDialog() {\\n    customDialog.customDialog(htmlTemplate, AddAssetDialogController).subscribe();\\n}\\n\\nfunction AddAssetDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.addAssetFormGroup = vm.fb.group({\\n      assetName: ['', [vm.validators.required]],\\n      assetType: ['', [vm.validators.required]],\\n      assetLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.addAssetFormGroup.markAsPristine();\\n        let asset = {\\n            name: vm.addAssetFormGroup.get('assetName').value,\\n            type: vm.addAssetFormGroup.get('assetType').value,\\n            label: vm.addAssetFormGroup.get('assetLabel').value\\n        };\\n        assetService.saveAsset(asset).subscribe(\\n            function (asset) {\\n                saveAttributes(asset.id).subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    function saveAttributes(entityId) {\\n        let attributes = vm.addAssetFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, \\\"SERVER_SCOPE\\\", attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"70837a9d-c3de-a9a7-03c5-dccd14998758\"}],\"actionCellButton\":[{\"name\":\"Edit asset\",\"icon\":\"edit\",\"type\":\"customPretty\",\"customHtml\":\"<form #editAssetForm=\\\"ngForm\\\" [formGroup]=\\\"editAssetFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar fxLayout=\\\"row\\\" color=\\\"primary\\\">\\n    <h2>Edit asset</h2>\\n    <span fxFlex></span>\\n    <button mat-button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n      <div class=\\\"mat-padding\\\" fxLayout=\\\"column\\\">\\n            <mat-form-field class=\\\"mat-block\\\">\\n                <mat-label>Asset name</mat-label>\\n                <input matInput formControlName=\\\"assetName\\\" required>\\n                <mat-error *ngIf=\\\"editAssetFormGroup.get('assetName').hasError('required')\\\">\\n                    Asset name is required.\\n                </mat-error>\\n            </mat-form-field>\\n            <div fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <tb-entity-subtype-autocomplete\\n                    fxFlex=\\\"50\\\"\\n                    formControlName=\\\"assetType\\\"\\n                    [required]=\\\"true\\\"\\n                    [entityType]=\\\"'ASSET'\\\"\\n                ></tb-entity-subtype-autocomplete>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Label</mat-label>\\n                    <input matInput formControlName=\\\"assetLabel\\\">\\n                </mat-form-field>\\n            </div>\\n            <div formGroupName=\\\"attributes\\\" fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Latitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n                </mat-form-field>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Longitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n                </mat-form-field>\\n            </div>\\n      </div>  \\n  </div>\\n  <div mat-dialog-actions fxLayout=\\\"row\\\">\\n    <span fxFlex></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            type=\\\"submit\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            [disabled]=\\\"(isLoading$ | async) || editAssetForm.invalid || !editAssetForm.dirty\\\">\\n      Update\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenEditAssetDialog();\\n\\nfunction openEditAssetDialog() {\\n    customDialog.customDialog(htmlTemplate, EditAssetDialogController).subscribe();\\n}\\n\\nfunction EditAssetDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.asset = null;\\n    vm.attributes = {};\\n    \\n    vm.editAssetFormGroup = vm.fb.group({\\n      assetName: ['', [vm.validators.required]],\\n      assetType: ['', [vm.validators.required]],\\n      assetLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.editAssetFormGroup.markAsPristine();\\n        vm.asset.name = vm.editAssetFormGroup.get('assetName').value,\\n        vm.asset.type = vm.editAssetFormGroup.get('assetType').value,\\n        vm.asset.label = vm.editAssetFormGroup.get('assetLabel').value\\n        assetService.saveAsset(vm.asset).subscribe(\\n            function () {\\n                saveAttributes().subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    getEntityInfo();\\n    \\n    function getEntityInfo() {\\n        assetService.getAsset(entityId.id).subscribe(\\n            function (asset) {\\n                attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE',\\n                                                    ['latitude', 'longitude']).subscribe(\\n                   function (attributes) {\\n                        for (let i = 0; i < attributes.length; i++) {\\n                            vm.attributes[attributes[i].key] = attributes[i].value; \\n                        }\\n                        vm.asset = asset;\\n                        vm.editAssetFormGroup.patchValue(\\n                            {\\n                                assetName: vm.asset.name,\\n                                assetType: vm.asset.type,\\n                                assetLabel: vm.asset.label,\\n                                attributes: {\\n                                    latitude: vm.attributes.latitude,\\n                                    longitude: vm.attributes.longitude\\n                                }\\n                            }, {emitEvent: false}\\n                        );\\n                   } \\n                );\\n            }\\n        );    \\n    }\\n    \\n    function saveAttributes() {\\n        let attributes = vm.editAssetFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, 'SERVER_SCOPE', attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"93931e52-5d7c-903e-67aa-b9435df44ff4\"},{\"name\":\"Delete asset\",\"icon\":\"delete\",\"type\":\"custom\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet dialogs = $injector.get(widgetContext.servicesMap.get('dialogs'));\\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\\n\\nopenDeleteAssetDialog();\\n\\nfunction openDeleteAssetDialog() {\\n    let title = \\\"Are you sure you want to delete the asset \\\" + entityName +  \\\"?\\\";\\n    let content = \\\"Be careful, after the confirmation, the asset and all related data will become unrecoverable!\\\";\\n    dialogs.confirm(title, content, 'Cancel', 'Delete').subscribe(\\n        function (result) {\\n            if (result) {\\n                deleteAsset();\\n            }\\n        }\\n    );\\n}\\n\\nfunction deleteAsset() {\\n    assetService.deleteAsset(entityId.id).subscribe(\\n        function () {\\n            widgetContext.updateAliases();\\n        }\\n    );\\n}\\n\",\"id\":\"ec2708f6-9ff0-186b-e4fc-7635ebfa3074\"}]}}"
         "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{\"enableSearch\":true,\"displayPagination\":true,\"defaultPageSize\":10,\"defaultSortOrder\":\"entityName\",\"displayEntityName\":true,\"displayEntityType\":true,\"entitiesTitle\":\"Asset admin table\",\"enableSelectColumnDisplay\":true},\"title\":\"Asset admin table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#f44336\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.6401141393938932,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"showTitleIcon\":false,\"titleIcon\":\"more_horiz\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"displayTimewindow\":true,\"actions\":{\"headerButton\":[{\"name\":\"Add asset\",\"icon\":\"add\",\"type\":\"customPretty\",\"customHtml\":\"<form #addAssetForm=\\\"ngForm\\\" [formGroup]=\\\"addAssetFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar fxLayout=\\\"row\\\" color=\\\"primary\\\">\\n    <h2>Add asset</h2>\\n    <span fxFlex></span>\\n    <button mat-button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n      <div class=\\\"mat-padding\\\" fxLayout=\\\"column\\\">\\n            <mat-form-field class=\\\"mat-block\\\">\\n                <mat-label>Asset name</mat-label>\\n                <input matInput formControlName=\\\"assetName\\\" required>\\n                <mat-error *ngIf=\\\"addAssetFormGroup.get('assetName').hasError('required')\\\">\\n                    Asset name is required.\\n                </mat-error>\\n            </mat-form-field>\\n            <div fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <tb-entity-subtype-autocomplete\\n                    fxFlex=\\\"50\\\"\\n                    formControlName=\\\"assetType\\\"\\n                    [required]=\\\"true\\\"\\n                    [entityType]=\\\"'ASSET'\\\"\\n                ></tb-entity-subtype-autocomplete>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Label</mat-label>\\n                    <input matInput formControlName=\\\"assetLabel\\\">\\n                </mat-form-field>\\n            </div>\\n            <div formGroupName=\\\"attributes\\\" fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Latitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n                </mat-form-field>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Longitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n                </mat-form-field>\\n            </div>\\n      </div>  \\n  </div>\\n  <div mat-dialog-actions fxLayout=\\\"row\\\">\\n    <span fxFlex></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            type=\\\"submit\\\"\\n            [disabled]=\\\"(isLoading$ | async) || addAssetForm.invalid || !addAssetForm.dirty\\\">\\n      Create\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenAddAssetDialog();\\n\\nfunction openAddAssetDialog() {\\n    customDialog.customDialog(htmlTemplate, AddAssetDialogController).subscribe();\\n}\\n\\nfunction AddAssetDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.addAssetFormGroup = vm.fb.group({\\n      assetName: ['', [vm.validators.required]],\\n      assetType: ['', [vm.validators.required]],\\n      assetLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.addAssetFormGroup.markAsPristine();\\n        let asset = {\\n            name: vm.addAssetFormGroup.get('assetName').value,\\n            type: vm.addAssetFormGroup.get('assetType').value,\\n            label: vm.addAssetFormGroup.get('assetLabel').value\\n        };\\n        assetService.saveAsset(asset).subscribe(\\n            function (asset) {\\n                saveAttributes(asset.id).subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    function saveAttributes(entityId) {\\n        let attributes = vm.addAssetFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, \\\"SERVER_SCOPE\\\", attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"70837a9d-c3de-a9a7-03c5-dccd14998758\"}],\"actionCellButton\":[{\"name\":\"Edit asset\",\"icon\":\"edit\",\"type\":\"customPretty\",\"customHtml\":\"<form #editAssetForm=\\\"ngForm\\\" [formGroup]=\\\"editAssetFormGroup\\\"\\n      (ngSubmit)=\\\"save()\\\" style=\\\"width: 480px;\\\">\\n  <mat-toolbar fxLayout=\\\"row\\\" color=\\\"primary\\\">\\n    <h2>Edit asset</h2>\\n    <span fxFlex></span>\\n    <button mat-button mat-icon-button\\n            (click)=\\\"cancel()\\\"\\n            type=\\\"button\\\">\\n      <mat-icon class=\\\"material-icons\\\">close</mat-icon>\\n    </button>\\n  </mat-toolbar>\\n  <mat-progress-bar color=\\\"warn\\\" mode=\\\"indeterminate\\\" *ngIf=\\\"isLoading$ | async\\\">\\n  </mat-progress-bar>\\n  <div style=\\\"height: 4px;\\\" *ngIf=\\\"!(isLoading$ | async)\\\"></div>\\n  <div mat-dialog-content>\\n      <div class=\\\"mat-padding\\\" fxLayout=\\\"column\\\">\\n            <mat-form-field class=\\\"mat-block\\\">\\n                <mat-label>Asset name</mat-label>\\n                <input matInput formControlName=\\\"assetName\\\" required>\\n                <mat-error *ngIf=\\\"editAssetFormGroup.get('assetName').hasError('required')\\\">\\n                    Asset name is required.\\n                </mat-error>\\n            </mat-form-field>\\n            <div fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <tb-entity-subtype-autocomplete\\n                    fxFlex=\\\"50\\\"\\n                    formControlName=\\\"assetType\\\"\\n                    [required]=\\\"true\\\"\\n                    [entityType]=\\\"'ASSET'\\\"\\n                ></tb-entity-subtype-autocomplete>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Label</mat-label>\\n                    <input matInput formControlName=\\\"assetLabel\\\">\\n                </mat-form-field>\\n            </div>\\n            <div formGroupName=\\\"attributes\\\" fxLayout=\\\"row\\\" fxLayoutGap=\\\"8px\\\">\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Latitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"latitude\\\">\\n                </mat-form-field>\\n                <mat-form-field fxFlex=\\\"50\\\" class=\\\"mat-block\\\">\\n                    <mat-label>Longitude</mat-label>\\n                    <input type=\\\"number\\\" step=\\\"any\\\" matInput formControlName=\\\"longitude\\\">\\n                </mat-form-field>\\n            </div>\\n      </div>  \\n  </div>\\n  <div mat-dialog-actions fxLayout=\\\"row\\\">\\n    <span fxFlex></span>\\n    <button mat-button color=\\\"primary\\\"\\n            type=\\\"button\\\"\\n            [disabled]=\\\"(isLoading$ | async)\\\"\\n            (click)=\\\"cancel()\\\" cdkFocusInitial>\\n      Cancel\\n    </button>\\n    <button mat-button mat-raised-button color=\\\"primary\\\"\\n            type=\\\"submit\\\"\\n            style=\\\"margin-right: 20px;\\\"\\n            [disabled]=\\\"(isLoading$ | async) || editAssetForm.invalid || !editAssetForm.dirty\\\">\\n      Update\\n    </button>\\n  </div>\\n</form>\\n\",\"customCss\":\"\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\\nlet attributeService = $injector.get(widgetContext.servicesMap.get('attributeService'));\\n\\nopenEditAssetDialog();\\n\\nfunction openEditAssetDialog() {\\n    customDialog.customDialog(htmlTemplate, EditAssetDialogController).subscribe();\\n}\\n\\nfunction EditAssetDialogController(instance) {\\n    let vm = instance;\\n    \\n    vm.asset = null;\\n    vm.attributes = {};\\n    \\n    vm.editAssetFormGroup = vm.fb.group({\\n      assetName: ['', [vm.validators.required]],\\n      assetType: ['', [vm.validators.required]],\\n      assetLabel: [''],\\n      attributes: vm.fb.group({\\n          latitude: [null],\\n          longitude: [null]\\n      })      \\n    });\\n    \\n    vm.cancel = function() {\\n        vm.dialogRef.close(null);\\n    };\\n    \\n    vm.save = function() {\\n        vm.editAssetFormGroup.markAsPristine();\\n        vm.asset.name = vm.editAssetFormGroup.get('assetName').value,\\n        vm.asset.type = vm.editAssetFormGroup.get('assetType').value,\\n        vm.asset.label = vm.editAssetFormGroup.get('assetLabel').value\\n        assetService.saveAsset(vm.asset).subscribe(\\n            function () {\\n                saveAttributes().subscribe(\\n                    function () {\\n                        widgetContext.updateAliases();\\n                        vm.dialogRef.close(null);\\n                    }\\n                );\\n            }\\n        );\\n    };\\n    \\n    getEntityInfo();\\n    \\n    function getEntityInfo() {\\n        assetService.getAsset(entityId.id).subscribe(\\n            function (asset) {\\n                attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE',\\n                                                    ['latitude', 'longitude']).subscribe(\\n                   function (attributes) {\\n                        for (let i = 0; i < attributes.length; i++) {\\n                            vm.attributes[attributes[i].key] = attributes[i].value; \\n                        }\\n                        vm.asset = asset;\\n                        vm.editAssetFormGroup.patchValue(\\n                            {\\n                                assetName: vm.asset.name,\\n                                assetType: vm.asset.type,\\n                                assetLabel: vm.asset.label,\\n                                attributes: {\\n                                    latitude: vm.attributes.latitude,\\n                                    longitude: vm.attributes.longitude\\n                                }\\n                            }, {emitEvent: false}\\n                        );\\n                   } \\n                );\\n            }\\n        );    \\n    }\\n    \\n    function saveAttributes() {\\n        let attributes = vm.editAssetFormGroup.get('attributes').value;\\n        let attributesArray = [];\\n        for (let key in attributes) {\\n            attributesArray.push({key: key, value: attributes[key]});\\n        }\\n        if (attributesArray.length > 0) {\\n            return attributeService.saveEntityAttributes(entityId, 'SERVER_SCOPE', attributesArray);\\n        } else {\\n            return widgetContext.rxjs.of([]);\\n        }\\n    }\\n}\",\"customResources\":[],\"id\":\"93931e52-5d7c-903e-67aa-b9435df44ff4\"},{\"name\":\"Delete asset\",\"icon\":\"delete\",\"type\":\"custom\",\"customFunction\":\"let $injector = widgetContext.$scope.$injector;\\nlet dialogs = $injector.get(widgetContext.servicesMap.get('dialogs'));\\nlet assetService = $injector.get(widgetContext.servicesMap.get('assetService'));\\n\\nopenDeleteAssetDialog();\\n\\nfunction openDeleteAssetDialog() {\\n    let title = \\\"Are you sure you want to delete the asset \\\" + entityName +  \\\"?\\\";\\n    let content = \\\"Be careful, after the confirmation, the asset and all related data will become unrecoverable!\\\";\\n    dialogs.confirm(title, content, 'Cancel', 'Delete').subscribe(\\n        function (result) {\\n            if (result) {\\n                deleteAsset();\\n            }\\n        }\\n    );\\n}\\n\\nfunction deleteAsset() {\\n    assetService.deleteAsset(entityId.id).subscribe(\\n        function () {\\n            widgetContext.updateAliases();\\n        }\\n    );\\n}\\n\",\"id\":\"ec2708f6-9ff0-186b-e4fc-7635ebfa3074\"}]}}"
       }
       }
     }
     }

@@ -19,7 +19,7 @@
         "templateHtml": "<fieldset class=\"gpio-panel\" style=\"height: 100%;\">\n    <section class=\"gpio-row\" fxLayout=\"row\" *ngFor=\"let row of rows\" \n            [ngStyle]=\"{'height': prefferedRowHeight+'px'}\">\n        <section fxFlex fxLayout=\"row\" *ngFor=\"let cell of row; let $index = index\">\n            <section fxLayout=\"row\" fxFlex *ngIf=\"cell\" fxLayoutAlign=\"{{$index===0 ? 'end center' : 'start center'}}\">\n                <span class=\"gpio-left-label\" [fxShow]=\"$index===0\">{{ cell.label }}</span>\n                <section fxLayout=\"row\" class=\"switch-panel\" fxLayoutAlign=\"start center\" [ngClass]=\"$index===0 ? 'col-0' : 'col-1'\"\n                      [ngStyle]=\"{'height': prefferedRowHeight+'px', 'backgroundColor':  switchPanelBackgroundColor }\">\n                    <span class=\"pin\" [fxShow]=\"$index===0\">{{cell.pin}}</span>\n                    <span fxFlex [fxShow]=\"$index===1\"></span>\n                    <mat-slide-toggle\n                        [disabled]=\"!rpcEnabled || executingRpcRequest\"\n                        [checked]=\"cell.enabled\" \n                        (change)=\"gpioToggleChange($event, cell)\" \n                        (click)=\"gpioClick($event, cell)\">\n                    </mat-slide-toggle>\n                    <span fxFlex [fxShow]=\"$index===0\"></span>\n                    <span class=\"pin\" [fxShow]=\"$index===1\">{{cell.pin}}</span>\n                </section>\n                <span class=\"gpio-right-label\" [fxShow]=\"$index===1\">{{ cell.label }}</span>\n            </section>\n            <section fxLayout=\"row\" fxFlex *ngIf=\"!cell\">\n                <span fxFlex [fxShow]=\"$index===0\"></span>\n                <span class=\"switch-panel\"\n                      [ngStyle]=\"{'height': prefferedRowHeight+'px', 'backgroundColor':  switchPanelBackgroundColor }\"></span>\n                <span fxFlex [fxShow]=\"$index===1\"></span>\n            </section>\n        </section>\n    </section>                            \n    <span class=\"error\" style=\"position: absolute; bottom: 5px;\" [fxShow]=\"rpcErrorText\">{{rpcErrorText}}</span>\n    <mat-progress-bar [fxShow]=\"executingRpcRequest\" style=\"position: absolute; bottom: 0;\" mode=\"indeterminate\"></mat-progress-bar>\n</fieldset>",
         "templateHtml": "<fieldset class=\"gpio-panel\" style=\"height: 100%;\">\n    <section class=\"gpio-row\" fxLayout=\"row\" *ngFor=\"let row of rows\" \n            [ngStyle]=\"{'height': prefferedRowHeight+'px'}\">\n        <section fxFlex fxLayout=\"row\" *ngFor=\"let cell of row; let $index = index\">\n            <section fxLayout=\"row\" fxFlex *ngIf=\"cell\" fxLayoutAlign=\"{{$index===0 ? 'end center' : 'start center'}}\">\n                <span class=\"gpio-left-label\" [fxShow]=\"$index===0\">{{ cell.label }}</span>\n                <section fxLayout=\"row\" class=\"switch-panel\" fxLayoutAlign=\"start center\" [ngClass]=\"$index===0 ? 'col-0' : 'col-1'\"\n                      [ngStyle]=\"{'height': prefferedRowHeight+'px', 'backgroundColor':  switchPanelBackgroundColor }\">\n                    <span class=\"pin\" [fxShow]=\"$index===0\">{{cell.pin}}</span>\n                    <span fxFlex [fxShow]=\"$index===1\"></span>\n                    <mat-slide-toggle\n                        [disabled]=\"!rpcEnabled || executingRpcRequest\"\n                        [checked]=\"cell.enabled\" \n                        (change)=\"gpioToggleChange($event, cell)\" \n                        (click)=\"gpioClick($event, cell)\">\n                    </mat-slide-toggle>\n                    <span fxFlex [fxShow]=\"$index===0\"></span>\n                    <span class=\"pin\" [fxShow]=\"$index===1\">{{cell.pin}}</span>\n                </section>\n                <span class=\"gpio-right-label\" [fxShow]=\"$index===1\">{{ cell.label }}</span>\n            </section>\n            <section fxLayout=\"row\" fxFlex *ngIf=\"!cell\">\n                <span fxFlex [fxShow]=\"$index===0\"></span>\n                <span class=\"switch-panel\"\n                      [ngStyle]=\"{'height': prefferedRowHeight+'px', 'backgroundColor':  switchPanelBackgroundColor }\"></span>\n                <span fxFlex [fxShow]=\"$index===1\"></span>\n            </section>\n        </section>\n    </section>                            \n    <span class=\"error\" style=\"position: absolute; bottom: 5px;\" [fxShow]=\"rpcErrorText\">{{rpcErrorText}}</span>\n    <mat-progress-bar [fxShow]=\"executingRpcRequest\" style=\"position: absolute; bottom: 0;\" mode=\"indeterminate\"></mat-progress-bar>\n</fieldset>",
         "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section[fxflex] {\n    min-width: 0px;\n}\n\n\n.switch-panel {\n    margin: 0;\n    height: 32px;\n    width: 66px;\n    min-width: 66px;\n}\n\n.switch-panel mat-slide-toggle {\n    margin: 0;\n    width: 36px;\n    min-width: 36px;\n}\n\n.switch-panel.col-0 mat-slide-toggle {\n    margin-left: 8px;\n    margin-right: 4px;\n}\n\n.switch-panel.col-1 mat-slide-toggle {\n    margin-left: 4px;\n    margin-right: 8px;\n}\n\n.gpio-row {\n    height: 32px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.switch-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.switch-panel.col-1 .pin {\n    margin-right: auto;\n    \n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
         "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section[fxflex] {\n    min-width: 0px;\n}\n\n\n.switch-panel {\n    margin: 0;\n    height: 32px;\n    width: 66px;\n    min-width: 66px;\n}\n\n.switch-panel mat-slide-toggle {\n    margin: 0;\n    width: 36px;\n    min-width: 36px;\n}\n\n.switch-panel.col-0 mat-slide-toggle {\n    margin-left: 8px;\n    margin-right: 4px;\n}\n\n.switch-panel.col-1 mat-slide-toggle {\n    margin-left: 4px;\n    margin-right: 8px;\n}\n\n.gpio-row {\n    height: 32px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.switch-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.switch-panel.col-1 .pin {\n    margin-right: auto;\n    \n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
         "controllerScript": "var namespace;\nvar cssParser = new cssjs();\n\nself.onInit = function() {\n    var utils = self.ctx.$injector.get(self.ctx.servicesMap.get('utils'));\n    namespace = 'gpio-control-' + utils.guid();\n    cssParser.testMode = false;\n    cssParser.cssPreviewNamespace = namespace;\n    self.ctx.$container.addClass(namespace);\n    self.ctx.ngZone.run(function() {\n       init(); \n    });\n}\n\nfunction init() {\n        \n    var i, gpio;\n    var scope = self.ctx.$scope;\n    var settings = self.ctx.settings;\n    scope.gpioList = [];\n    for (var g = 0; g < settings.gpioList.length; g++) {\n        gpio = settings.gpioList[g];\n        scope.gpioList.push(\n            {\n                row: gpio.row,\n                col: gpio.col,\n                pin: gpio.pin,\n                label: gpio.label,\n                enabled: false\n            }\n        );\n    }\n\n    scope.requestTimeout = settings.requestTimeout || 1000;\n\n    scope.switchPanelBackgroundColor = settings.switchPanelBackgroundColor || tinycolor('green').lighten(2).toRgbString();\n\n    scope.gpioStatusRequest = {\n        method: \"getGpioStatus\",\n        paramsBody: \"{}\"\n    };\n    \n    if (settings.gpioStatusRequest) {\n        scope.gpioStatusRequest.method = settings.gpioStatusRequest.method || scope.gpioStatusRequest.method;\n        scope.gpioStatusRequest.paramsBody = settings.gpioStatusRequest.paramsBody || scope.gpioStatusRequest.paramsBody;\n    }\n    \n    scope.gpioStatusChangeRequest = {\n        method: \"setGpioStatus\",\n        paramsBody: \"{\\n   \\\"pin\\\": \\\"{$pin}\\\",\\n   \\\"enabled\\\": \\\"{$enabled}\\\"\\n}\"\n    };\n    \n    if (settings.gpioStatusChangeRequest) {\n        scope.gpioStatusChangeRequest.method = settings.gpioStatusChangeRequest.method || scope.gpioStatusChangeRequest.method;\n        scope.gpioStatusChangeRequest.paramsBody = settings.gpioStatusChangeRequest.paramsBody || scope.gpioStatusChangeRequest.paramsBody;\n    }\n    \n    scope.parseGpioStatusFunction = \"return body[pin] === true;\";\n    \n    if (settings.parseGpioStatusFunction && settings.parseGpioStatusFunction.length > 0) {\n        scope.parseGpioStatusFunction = settings.parseGpioStatusFunction;\n    }\n    \n    scope.parseGpioStatusFunction = new Function(\"body, pin\", scope.parseGpioStatusFunction);\n    \n    function requestGpioStatus() {\n        self.ctx.controlApi.sendTwoWayCommand(scope.gpioStatusRequest.method, \n                            scope.gpioStatusRequest.paramsBody, \n                            scope.requestTimeout)\n            .subscribe(\n                function success(responseBody) {\n                    for (var g = 0; g < scope.gpioList.length; g++) {\n                        var gpio = scope.gpioList[g];\n                        var enabled = scope.parseGpioStatusFunction.apply(this, [responseBody, gpio.pin]);\n                        gpio.enabled = enabled;   \n                        self.ctx.detectChanges();\n                    }\n                }\n            );\n    }\n    \n    function changeGpioStatus(gpio) {\n        var pin = gpio.pin + '';\n        var enabled = !gpio.enabled;\n        enabled = enabled === true ? 'true' : 'false';\n        var paramsBody = scope.gpioStatusChangeRequest.paramsBody;\n        var requestBody = JSON.parse(paramsBody.replace(\"\\\"{$pin}\\\"\", pin).replace(\"\\\"{$enabled}\\\"\", enabled));\n        self.ctx.controlApi.sendTwoWayCommand(scope.gpioStatusChangeRequest.method, \n                                    requestBody, scope.requestTimeout)\n                    .subscribe(\n                        function success(responseBody) {\n                            var enabled = scope.parseGpioStatusFunction.apply(this, [responseBody, gpio.pin]);\n                            gpio.enabled = enabled;\n                            self.ctx.detectChanges();\n                        }\n                    );\n    }\n    \n    scope.gpioCells = {};\n    var rowCount = 0;\n    for (i = 0; i < scope.gpioList.length; i++) {\n        gpio = scope.gpioList[i];\n        scope.gpioCells[gpio.row+'_'+gpio.col] = gpio;\n        rowCount = Math.max(rowCount, gpio.row+1);\n    }\n    \n    scope.prefferedRowHeight = 32;\n    scope.rows = [];\n    for (i = 0; i < rowCount; i++) {\n        var row = [];\n        for (var c =0; c<2;c++) {\n            if (scope.gpioCells[i+'_'+c]) {\n                row[c] = scope.gpioCells[i+'_'+c];\n            } else {\n                row[c] = null;\n            }\n        }\n        scope.rows.push(row);\n    }\n\n    scope.gpioClick = function($event, gpio) {\n        if (scope.rpcEnabled && !scope.executingRpcRequest) {\n            changeGpioStatus(gpio);\n        }\n    };\n    \n    scope.gpioToggleChange = function($event, gpio) {\n        gpio.enabled = !$event.checked;\n        $event.source.toggle();\n        self.ctx.detectChanges();\n    }\n    \n    if (scope.rpcEnabled) {\n        requestGpioStatus();   \n    }\n    \n    self.onResize();\n}\n\nself.onResize = function() {\n    var scope = self.ctx.$scope;\n    var rowCount = scope.rows.length;\n    var prefferedRowHeight = (self.ctx.height - 35)/rowCount;\n    prefferedRowHeight = Math.min(32, prefferedRowHeight);\n    prefferedRowHeight = Math.max(12, prefferedRowHeight);\n    scope.prefferedRowHeight = prefferedRowHeight;\n    var ratio = prefferedRowHeight/32;\n    \n    var css = '.mat-slide-toggle .mat-slide-toggle-bar {\\n' +\n        '   height: ' + 14*ratio+'px;\\n'+\n        '   width: ' + 36*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-thumb-container {\\n' +\n        '   height: ' + 20*ratio+'px;\\n'+\n        '   width: ' + 20*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-thumb {\\n' +\n        '   height: ' + 20*ratio+'px;\\n'+\n        '   width: ' + 20*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-ripple {\\n' +\n        '   height: ' + 40*ratio+'px;\\n'+\n        '   width: ' + 40*ratio+'px;\\n'+\n        '   top: calc(50% - '+20*ratio+'px);\\n'+\n        '   left: calc(50% - '+20*ratio+'px);\\n'+\n    '}\\n';\n    css += '.gpio-left-label, .gpio-right-label {\\n' +\n        '   font-size: ' + 16*ratio+'px;\\n'+\n    '}\\n';\n    var pinsFontSize = Math.max(9, 12*ratio);\n    css += '.pin {\\n' +\n        '   font-size: ' + pinsFontSize+'px;\\n'+\n    '}\\n';\n\n    cssParser.createStyleElement(namespace, css);\n    \n    self.ctx.detectChanges();\n}\n\nself.onDestroy = function() {\n}\n",
         "controllerScript": "var namespace;\nvar cssParser = new cssjs();\n\nself.onInit = function() {\n    var utils = self.ctx.$injector.get(self.ctx.servicesMap.get('utils'));\n    namespace = 'gpio-control-' + utils.guid();\n    cssParser.testMode = false;\n    cssParser.cssPreviewNamespace = namespace;\n    self.ctx.$container.addClass(namespace);\n    self.ctx.ngZone.run(function() {\n       init(); \n    });\n}\n\nfunction init() {\n        \n    var i, gpio;\n    var scope = self.ctx.$scope;\n    var settings = self.ctx.settings;\n    scope.gpioList = [];\n    for (var g = 0; g < settings.gpioList.length; g++) {\n        gpio = settings.gpioList[g];\n        scope.gpioList.push(\n            {\n                row: gpio.row,\n                col: gpio.col,\n                pin: gpio.pin,\n                label: gpio.label,\n                enabled: false\n            }\n        );\n    }\n\n    scope.requestTimeout = settings.requestTimeout || 1000;\n\n    scope.switchPanelBackgroundColor = settings.switchPanelBackgroundColor || tinycolor('green').lighten(2).toRgbString();\n\n    scope.gpioStatusRequest = {\n        method: \"getGpioStatus\",\n        paramsBody: \"{}\"\n    };\n    \n    if (settings.gpioStatusRequest) {\n        scope.gpioStatusRequest.method = settings.gpioStatusRequest.method || scope.gpioStatusRequest.method;\n        scope.gpioStatusRequest.paramsBody = settings.gpioStatusRequest.paramsBody || scope.gpioStatusRequest.paramsBody;\n    }\n    \n    scope.gpioStatusChangeRequest = {\n        method: \"setGpioStatus\",\n        paramsBody: \"{\\n   \\\"pin\\\": \\\"{$pin}\\\",\\n   \\\"enabled\\\": \\\"{$enabled}\\\"\\n}\"\n    };\n    \n    if (settings.gpioStatusChangeRequest) {\n        scope.gpioStatusChangeRequest.method = settings.gpioStatusChangeRequest.method || scope.gpioStatusChangeRequest.method;\n        scope.gpioStatusChangeRequest.paramsBody = settings.gpioStatusChangeRequest.paramsBody || scope.gpioStatusChangeRequest.paramsBody;\n    }\n    \n    scope.parseGpioStatusFunction = \"return body[pin] === true;\";\n    \n    if (settings.parseGpioStatusFunction && settings.parseGpioStatusFunction.length > 0) {\n        scope.parseGpioStatusFunction = settings.parseGpioStatusFunction;\n    }\n    \n    scope.parseGpioStatusFunction = new Function(\"body, pin\", scope.parseGpioStatusFunction);\n    \n    function requestGpioStatus() {\n        self.ctx.controlApi.sendTwoWayCommand(scope.gpioStatusRequest.method, \n                            scope.gpioStatusRequest.paramsBody, \n                            scope.requestTimeout)\n            .subscribe(\n                function success(responseBody) {\n                    for (var g = 0; g < scope.gpioList.length; g++) {\n                        var gpio = scope.gpioList[g];\n                        var enabled = scope.parseGpioStatusFunction.apply(this, [responseBody, gpio.pin]);\n                        gpio.enabled = enabled;   \n                        self.ctx.detectChanges();\n                    }\n                }\n            );\n    }\n    \n    function changeGpioStatus(gpio) {\n        var pin = gpio.pin + '';\n        var enabled = !gpio.enabled;\n        enabled = enabled === true ? 'true' : 'false';\n        var paramsBody = scope.gpioStatusChangeRequest.paramsBody;\n        var requestBody = JSON.parse(paramsBody.replace(\"\\\"{$pin}\\\"\", pin).replace(\"\\\"{$enabled}\\\"\", enabled));\n        self.ctx.controlApi.sendTwoWayCommand(scope.gpioStatusChangeRequest.method, \n                                    requestBody, scope.requestTimeout)\n                    .subscribe(\n                        function success(responseBody) {\n                            var enabled = scope.parseGpioStatusFunction.apply(this, [responseBody, gpio.pin]);\n                            gpio.enabled = enabled;\n                            self.ctx.detectChanges();\n                        }\n                    );\n    }\n    \n    scope.gpioCells = {};\n    var rowCount = 0;\n    for (i = 0; i < scope.gpioList.length; i++) {\n        gpio = scope.gpioList[i];\n        scope.gpioCells[gpio.row+'_'+gpio.col] = gpio;\n        rowCount = Math.max(rowCount, gpio.row+1);\n    }\n    \n    scope.prefferedRowHeight = 32;\n    scope.rows = [];\n    for (i = 0; i < rowCount; i++) {\n        var row = [];\n        for (var c =0; c<2;c++) {\n            if (scope.gpioCells[i+'_'+c]) {\n                row[c] = scope.gpioCells[i+'_'+c];\n            } else {\n                row[c] = null;\n            }\n        }\n        scope.rows.push(row);\n    }\n\n    scope.gpioClick = function($event, gpio) {\n        if (scope.rpcEnabled && !scope.executingRpcRequest) {\n            changeGpioStatus(gpio);\n        }\n    };\n    \n    scope.gpioToggleChange = function($event, gpio) {\n        gpio.enabled = !$event.checked;\n        $event.source.toggle();\n        self.ctx.detectChanges();\n    }\n    \n    if (scope.rpcEnabled) {\n        requestGpioStatus();   \n    }\n    \n    self.onResize();\n}\n\nself.onResize = function() {\n    var scope = self.ctx.$scope;\n    var rowCount = scope.rows.length;\n    var prefferedRowHeight = (self.ctx.height - 35)/rowCount;\n    prefferedRowHeight = Math.min(32, prefferedRowHeight);\n    prefferedRowHeight = Math.max(12, prefferedRowHeight);\n    scope.prefferedRowHeight = prefferedRowHeight;\n    var ratio = prefferedRowHeight/32;\n    \n    var css = '.mat-slide-toggle .mat-slide-toggle-bar {\\n' +\n        '   height: ' + 14*ratio+'px;\\n'+\n        '   width: ' + 36*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-thumb-container {\\n' +\n        '   height: ' + 20*ratio+'px;\\n'+\n        '   width: ' + 20*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-thumb {\\n' +\n        '   height: ' + 20*ratio+'px;\\n'+\n        '   width: ' + 20*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-ripple {\\n' +\n        '   height: ' + 40*ratio+'px;\\n'+\n        '   width: ' + 40*ratio+'px;\\n'+\n        '   top: calc(50% - '+20*ratio+'px);\\n'+\n        '   left: calc(50% - '+20*ratio+'px);\\n'+\n    '}\\n';\n    css += '.gpio-left-label, .gpio-right-label {\\n' +\n        '   font-size: ' + 16*ratio+'px;\\n'+\n    '}\\n';\n    var pinsFontSize = Math.max(9, 12*ratio);\n    css += '.pin {\\n' +\n        '   font-size: ' + pinsFontSize+'px;\\n'+\n    '}\\n';\n\n    cssParser.createStyleElement(namespace, css);\n    \n    self.ctx.detectChanges();\n}\n\nself.onDestroy = function() {\n}\n",
-        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Settings\",\n        \"properties\": {\n            \"gpioList\": {\n                \"title\": \"Gpio switches\",\n                \"type\": \"array\",\n                \"minItems\" : 1,\n                \"items\": {\n                    \"title\": \"Gpio switch\",\n                    \"type\": \"object\",\n                    \"properties\": {\n                        \"pin\": {\n                            \"title\": \"Pin\",\n                            \"type\": \"number\"\n                        },\n                        \"label\": {\n                            \"title\": \"Label\",\n                            \"type\": \"string\"\n                        },\n                        \"row\": {\n                            \"title\": \"Row\",\n                            \"type\": \"number\"\n                        },\n                        \"col\": {\n                            \"title\": \"Column\",\n                            \"type\": \"number\"\n                        }\n                    },\n                    \"required\": [\"pin\", \"label\", \"row\", \"col\"]\n                }\n            },\n            \"requestTimeout\": {\n                \"title\": \"RPC request timeout\",\n                \"type\": \"number\",\n                \"default\": 500\n            },\n            \"switchPanelBackgroundColor\": {\n                \"title\": \"Switches panel background color\",\n                \"type\": \"string\",\n                \"default\": \"#008a00\"\n            },\n            \"gpioStatusRequest\": {\n                \"title\": \"GPIO status request\",\n                \"type\": \"object\",\n                 \"properties\": {\n                    \"method\": {\n                        \"title\": \"Method name\",\n                        \"type\": \"string\",\n                        \"default\": \"getGpioStatus\"\n                    },\n                    \"paramsBody\": {\n                      \"title\": \"Method body\",\n                      \"type\": \"string\",\n                      \"default\": \"{}\"\n                    }\n                },\n                \"required\": [\"method\", \"paramsBody\"]\n            },\n            \"gpioStatusChangeRequest\": {\n                \"title\": \"GPIO status change request\",\n                \"type\": \"object\",\n                 \"properties\": {\n                    \"method\": {\n                        \"title\": \"Method name\",\n                        \"type\": \"string\",\n                        \"default\": \"setGpioStatus\"\n                    },\n                    \"paramsBody\": {\n                      \"title\": \"Method body\",\n                      \"type\": \"string\",\n                      \"default\": \"{\\n   \\\"pin\\\": \\\"{$pin}\\\",\\n   \\\"enabled\\\": \\\"{$enabled}\\\"\\n}\"\n                    }\n                },\n                \"required\": [\"method\", \"paramsBody\"]\n            },\n            \"parseGpioStatusFunction\": {\n                \"title\": \"Parse gpio status function\",\n                \"type\": \"string\",\n                \"default\": \"return body[pin] === true;\"\n            } \n        },\n        \"required\": [\"gpioList\", \n                     \"requestTimeout\",\n                     \"switchPanelBackgroundColor\",\n                     \"gpioStatusRequest\",\n                     \"gpioStatusChangeRequest\",\n                     \"parseGpioStatusFunction\"]\n    },\n    \"form\": [\n        \"gpioList\",\n        \"requestTimeout\",\n        {\n            \"key\": \"switchPanelBackgroundColor\",\n            \"type\": \"color\"\n        },\n        {\n            \"key\": \"gpioStatusRequest\",\n            \"items\": [\n                \"gpioStatusRequest.method\",\n                {\n                    \"key\": \"gpioStatusRequest.paramsBody\",\n                    \"type\": \"json\"\n                }\n            ]\n        },\n        {\n            \"key\": \"gpioStatusChangeRequest\",\n            \"items\": [\n                \"gpioStatusChangeRequest.method\",\n                {\n                    \"key\": \"gpioStatusChangeRequest.paramsBody\",\n                    \"type\": \"json\"\n                }\n            ]\n        },\n        {\n            \"key\": \"parseGpioStatusFunction\",\n            \"type\": \"javascript\"\n        }\n    ]\n}",
+        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Settings\",\n        \"properties\": {\n            \"gpioList\": {\n                \"title\": \"Gpio switches\",\n                \"type\": \"array\",\n                \"minItems\" : 1,\n                \"items\": {\n                    \"title\": \"Gpio switch\",\n                    \"type\": \"object\",\n                    \"properties\": {\n                        \"pin\": {\n                            \"title\": \"Pin\",\n                            \"type\": \"number\"\n                        },\n                        \"label\": {\n                            \"title\": \"Label\",\n                            \"type\": \"string\"\n                        },\n                        \"row\": {\n                            \"title\": \"Row\",\n                            \"type\": \"number\"\n                        },\n                        \"col\": {\n                            \"title\": \"Column\",\n                            \"type\": \"number\"\n                        }\n                    },\n                    \"required\": [\"pin\", \"label\", \"row\", \"col\"]\n                }\n            },\n            \"requestTimeout\": {\n                \"title\": \"RPC request timeout\",\n                \"type\": \"number\",\n                \"default\": 500\n            },\n            \"switchPanelBackgroundColor\": {\n                \"title\": \"Switches panel background color\",\n                \"type\": \"string\",\n                \"default\": \"#008a00\"\n            },\n            \"gpioStatusRequest\": {\n                \"title\": \"GPIO status request\",\n                \"type\": \"object\",\n                 \"properties\": {\n                    \"method\": {\n                        \"title\": \"Method name\",\n                        \"type\": \"string\",\n                        \"default\": \"getGpioStatus\"\n                    },\n                    \"paramsBody\": {\n                      \"title\": \"Method body\",\n                      \"type\": \"string\",\n                      \"default\": \"{}\"\n                    }\n                },\n                \"required\": [\"method\", \"paramsBody\"]\n            },\n            \"gpioStatusChangeRequest\": {\n                \"title\": \"GPIO status change request\",\n                \"type\": \"object\",\n                 \"properties\": {\n                    \"method\": {\n                        \"title\": \"Method name\",\n                        \"type\": \"string\",\n                        \"default\": \"setGpioStatus\"\n                    },\n                    \"paramsBody\": {\n                      \"title\": \"Method body\",\n                      \"type\": \"string\",\n                      \"default\": \"{\\n   \\\"pin\\\": \\\"{$pin}\\\",\\n   \\\"enabled\\\": \\\"{$enabled}\\\"\\n}\"\n                    }\n                },\n                \"required\": [\"method\", \"paramsBody\"]\n            },\n            \"parseGpioStatusFunction\": {\n                \"title\": \"Parse gpio status function\",\n                \"type\": \"string\",\n                \"default\": \"return body[pin] === true;\"\n            } \n        },\n        \"required\": [\"gpioList\", \n                     \"requestTimeout\",\n                     \"switchPanelBackgroundColor\",\n                     \"gpioStatusRequest\",\n                     \"gpioStatusChangeRequest\",\n                     \"parseGpioStatusFunction\"]\n    },\n    \"form\": [\n        \"gpioList\",\n        \"requestTimeout\",\n        {\n            \"key\": \"switchPanelBackgroundColor\",\n            \"type\": \"color\"\n        },\n        {\n            \"key\": \"gpioStatusRequest\",\n            \"items\": [\n                \"gpioStatusRequest.method\",\n                {\n                    \"key\": \"gpioStatusRequest.paramsBody\",\n                    \"type\": \"json\"\n                }\n            ]\n        },\n        {\n            \"key\": \"gpioStatusChangeRequest\",\n            \"items\": [\n                \"gpioStatusChangeRequest.method\",\n                {\n                    \"key\": \"gpioStatusChangeRequest.paramsBody\",\n                    \"type\": \"json\"\n                }\n            ]\n        },\n        {\n            \"key\": \"parseGpioStatusFunction\",\n            \"type\": \"javascript\",\n            \"helpId\": \"widget/lib/rpc/parse_gpio_status_fn\"\n        }\n    ]\n}",
         "dataKeySettingsSchema": "{}\n",
         "dataKeySettingsSchema": "{}\n",
         "defaultConfig": "{\"targetDeviceAliases\":[],\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"parseGpioStatusFunction\":\"return body[pin] === true;\",\"gpioStatusChangeRequest\":{\"method\":\"setGpioStatus\",\"paramsBody\":\"{\\n   \\\"pin\\\": \\\"{$pin}\\\",\\n   \\\"enabled\\\": \\\"{$enabled}\\\"\\n}\"},\"requestTimeout\":500,\"switchPanelBackgroundColor\":\"#b71c1c\",\"gpioStatusRequest\":{\"method\":\"getGpioStatus\",\"paramsBody\":\"{}\"},\"gpioList\":[{\"pin\":1,\"label\":\"GPIO 1\",\"row\":0,\"col\":0,\"_uniqueKey\":0},{\"pin\":2,\"label\":\"GPIO 2\",\"row\":0,\"col\":1,\"_uniqueKey\":1},{\"pin\":3,\"label\":\"GPIO 3\",\"row\":1,\"col\":0,\"_uniqueKey\":2}]},\"title\":\"Basic GPIO Control\"}"
         "defaultConfig": "{\"targetDeviceAliases\":[],\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"parseGpioStatusFunction\":\"return body[pin] === true;\",\"gpioStatusChangeRequest\":{\"method\":\"setGpioStatus\",\"paramsBody\":\"{\\n   \\\"pin\\\": \\\"{$pin}\\\",\\n   \\\"enabled\\\": \\\"{$enabled}\\\"\\n}\"},\"requestTimeout\":500,\"switchPanelBackgroundColor\":\"#b71c1c\",\"gpioStatusRequest\":{\"method\":\"getGpioStatus\",\"paramsBody\":\"{}\"},\"gpioList\":[{\"pin\":1,\"label\":\"GPIO 1\",\"row\":0,\"col\":0,\"_uniqueKey\":0},{\"pin\":2,\"label\":\"GPIO 2\",\"row\":0,\"col\":1,\"_uniqueKey\":1},{\"pin\":3,\"label\":\"GPIO 3\",\"row\":1,\"col\":0,\"_uniqueKey\":2}]},\"title\":\"Basic GPIO Control\"}"
       }
       }
@@ -73,7 +73,7 @@
         "templateHtml": "<fieldset class=\"gpio-panel\" style=\"height: 100%;\">\n    <section class=\"gpio-row\" fxLayout=\"row\" *ngFor=\"let row of rows\" \n            [ngStyle]=\"{'height': prefferedRowHeight+'px'}\">\n        <section fxFlex fxLayout=\"row\" *ngFor=\"let cell of row; let $index = index\">\n            <section fxLayout=\"row\" fxFlex *ngIf=\"cell\" fxLayoutAlign=\"{{$index===0 ? 'end center' : 'start center'}}\">\n                <span class=\"gpio-left-label\" [fxShow]=\"$index===0\">{{ cell.label }}</span>\n                <section fxLayout=\"row\" class=\"switch-panel\" fxLayoutAlign=\"start center\" [ngClass]=\"$index===0 ? 'col-0' : 'col-1'\"\n                      [ngStyle]=\"{'height': prefferedRowHeight+'px', 'backgroundColor':  switchPanelBackgroundColor }\">\n                    <span class=\"pin\" [fxShow]=\"$index===0\">{{cell.pin}}</span>\n                    <span fxFlex [fxShow]=\"$index===1\"></span>\n                    <mat-slide-toggle\n                        [disabled]=\"!rpcEnabled || executingRpcRequest\"\n                        [checked]=\"cell.enabled\" \n                        (change)=\"gpioToggleChange($event, cell)\" \n                        (click)=\"gpioClick($event, cell)\">\n                    </mat-slide-toggle>\n                    <span fxFlex [fxShow]=\"$index===0\"></span>\n                    <span class=\"pin\" [fxShow]=\"$index===1\">{{cell.pin}}</span>\n                </section>\n                <span class=\"gpio-right-label\" [fxShow]=\"$index===1\">{{ cell.label }}</span>\n            </section>\n            <section fxLayout=\"row\" fxFlex *ngIf=\"!cell\">\n                <span fxFlex [fxShow]=\"$index===0\"></span>\n                <span class=\"switch-panel\"\n                      [ngStyle]=\"{'height': prefferedRowHeight+'px', 'backgroundColor':  switchPanelBackgroundColor }\"></span>\n                <span fxFlex [fxShow]=\"$index===1\"></span>\n            </section>\n        </section>\n    </section>                            \n    <span class=\"error\" style=\"position: absolute; bottom: 5px;\" [fxShow]=\"rpcErrorText\">{{rpcErrorText}}</span>\n    <mat-progress-bar [fxShow]=\"executingRpcRequest\" style=\"position: absolute; bottom: 0;\" mode=\"indeterminate\"></mat-progress-bar>\n</fieldset>",
         "templateHtml": "<fieldset class=\"gpio-panel\" style=\"height: 100%;\">\n    <section class=\"gpio-row\" fxLayout=\"row\" *ngFor=\"let row of rows\" \n            [ngStyle]=\"{'height': prefferedRowHeight+'px'}\">\n        <section fxFlex fxLayout=\"row\" *ngFor=\"let cell of row; let $index = index\">\n            <section fxLayout=\"row\" fxFlex *ngIf=\"cell\" fxLayoutAlign=\"{{$index===0 ? 'end center' : 'start center'}}\">\n                <span class=\"gpio-left-label\" [fxShow]=\"$index===0\">{{ cell.label }}</span>\n                <section fxLayout=\"row\" class=\"switch-panel\" fxLayoutAlign=\"start center\" [ngClass]=\"$index===0 ? 'col-0' : 'col-1'\"\n                      [ngStyle]=\"{'height': prefferedRowHeight+'px', 'backgroundColor':  switchPanelBackgroundColor }\">\n                    <span class=\"pin\" [fxShow]=\"$index===0\">{{cell.pin}}</span>\n                    <span fxFlex [fxShow]=\"$index===1\"></span>\n                    <mat-slide-toggle\n                        [disabled]=\"!rpcEnabled || executingRpcRequest\"\n                        [checked]=\"cell.enabled\" \n                        (change)=\"gpioToggleChange($event, cell)\" \n                        (click)=\"gpioClick($event, cell)\">\n                    </mat-slide-toggle>\n                    <span fxFlex [fxShow]=\"$index===0\"></span>\n                    <span class=\"pin\" [fxShow]=\"$index===1\">{{cell.pin}}</span>\n                </section>\n                <span class=\"gpio-right-label\" [fxShow]=\"$index===1\">{{ cell.label }}</span>\n            </section>\n            <section fxLayout=\"row\" fxFlex *ngIf=\"!cell\">\n                <span fxFlex [fxShow]=\"$index===0\"></span>\n                <span class=\"switch-panel\"\n                      [ngStyle]=\"{'height': prefferedRowHeight+'px', 'backgroundColor':  switchPanelBackgroundColor }\"></span>\n                <span fxFlex [fxShow]=\"$index===1\"></span>\n            </section>\n        </section>\n    </section>                            \n    <span class=\"error\" style=\"position: absolute; bottom: 5px;\" [fxShow]=\"rpcErrorText\">{{rpcErrorText}}</span>\n    <mat-progress-bar [fxShow]=\"executingRpcRequest\" style=\"position: absolute; bottom: 0;\" mode=\"indeterminate\"></mat-progress-bar>\n</fieldset>",
         "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section[fxflex] {\n    min-width: 0px;\n}\n\n.switch-panel {\n    margin: 0;\n    height: 32px;\n    width: 66px;\n    min-width: 66px;\n}\n\n.switch-panel mat-slide-toggle {\n    margin: 0;\n    width: 36px;\n    min-width: 36px;\n}\n\n.switch-panel.col-0 mat-slide-toggle {\n    margin-left: 8px;\n    margin-right: 4px;\n}\n\n.switch-panel.col-1 mat-slide-toggle {\n    margin-left: 4px;\n    margin-right: 8px;\n}\n\n.gpio-row {\n    height: 32px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.switch-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.switch-panel.col-1 .pin {\n    margin-right: auto;\n    \n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
         "templateCss": ".error {\n    font-size: 14px !important;\n    color: maroon;/*rgb(250,250,250);*/\n    background-color: transparent;\n    padding: 6px;\n}\n\n.error span {\n    margin: auto;\n}\n\n.gpio-panel {\n    padding-top: 10px;\n    white-space: nowrap;\n}\n\n.gpio-panel section[fxflex] {\n    min-width: 0px;\n}\n\n.switch-panel {\n    margin: 0;\n    height: 32px;\n    width: 66px;\n    min-width: 66px;\n}\n\n.switch-panel mat-slide-toggle {\n    margin: 0;\n    width: 36px;\n    min-width: 36px;\n}\n\n.switch-panel.col-0 mat-slide-toggle {\n    margin-left: 8px;\n    margin-right: 4px;\n}\n\n.switch-panel.col-1 mat-slide-toggle {\n    margin-left: 4px;\n    margin-right: 8px;\n}\n\n.gpio-row {\n    height: 32px;\n}\n\n.pin {\n    margin-top: auto;\n    margin-bottom: auto;\n    color: white;\n    font-size: 12px;\n    width: 16px;\n    min-width: 16px;\n}\n\n.switch-panel.col-0 .pin {\n    margin-left: auto;\n    padding-left: 2px;\n    text-align: right;\n}\n\n.switch-panel.col-1 .pin {\n    margin-right: auto;\n    \n    text-align: left;\n}\n\n.gpio-left-label {\n    margin-right: 8px;\n}\n\n.gpio-right-label {\n    margin-left: 8px;\n}",
         "controllerScript": "var namespace;\nvar cssParser = new cssjs();\n\nself.onInit = function() {\n    var utils = self.ctx.$injector.get(self.ctx.servicesMap.get('utils'));\n    namespace = 'gpio-control-' + utils.guid();\n    cssParser.testMode = false;\n    cssParser.cssPreviewNamespace = namespace;\n    self.ctx.$container.addClass(namespace);\n    self.ctx.ngZone.run(function() {\n       init(); \n    });\n}\n\nfunction init() {\n        \n    var i, gpio;\n    var scope = self.ctx.$scope;\n    var settings = self.ctx.settings;\n    scope.gpioList = [];\n    for (var g = 0; g < settings.gpioList.length; g++) {\n        gpio = settings.gpioList[g];\n        scope.gpioList.push(\n            {\n                row: gpio.row,\n                col: gpio.col,\n                pin: gpio.pin,\n                label: gpio.label,\n                enabled: false\n            }\n        );\n    }\n\n    scope.requestTimeout = settings.requestTimeout || 1000;\n\n    scope.switchPanelBackgroundColor = settings.switchPanelBackgroundColor || tinycolor('green').lighten(2).toRgbString();\n\n    scope.gpioStatusRequest = {\n        method: \"getGpioStatus\",\n        paramsBody: \"{}\"\n    };\n    \n    if (settings.gpioStatusRequest) {\n        scope.gpioStatusRequest.method = settings.gpioStatusRequest.method || scope.gpioStatusRequest.method;\n        scope.gpioStatusRequest.paramsBody = settings.gpioStatusRequest.paramsBody || scope.gpioStatusRequest.paramsBody;\n    }\n    \n    scope.gpioStatusChangeRequest = {\n        method: \"setGpioStatus\",\n        paramsBody: \"{\\n   \\\"pin\\\": \\\"{$pin}\\\",\\n   \\\"enabled\\\": \\\"{$enabled}\\\"\\n}\"\n    };\n    \n    if (settings.gpioStatusChangeRequest) {\n        scope.gpioStatusChangeRequest.method = settings.gpioStatusChangeRequest.method || scope.gpioStatusChangeRequest.method;\n        scope.gpioStatusChangeRequest.paramsBody = settings.gpioStatusChangeRequest.paramsBody || scope.gpioStatusChangeRequest.paramsBody;\n    }\n    \n    scope.parseGpioStatusFunction = \"return body[pin] === true;\";\n    \n    if (settings.parseGpioStatusFunction && settings.parseGpioStatusFunction.length > 0) {\n        scope.parseGpioStatusFunction = settings.parseGpioStatusFunction;\n    }\n    \n    scope.parseGpioStatusFunction = new Function(\"body, pin\", scope.parseGpioStatusFunction);\n    \n    function requestGpioStatus() {\n        self.ctx.controlApi.sendTwoWayCommand(scope.gpioStatusRequest.method, \n                            scope.gpioStatusRequest.paramsBody, \n                            scope.requestTimeout)\n            .subscribe(\n                function success(responseBody) {\n                    for (var g = 0; g < scope.gpioList.length; g++) {\n                        var gpio = scope.gpioList[g];\n                        var enabled = scope.parseGpioStatusFunction.apply(this, [responseBody, gpio.pin]);\n                        gpio.enabled = enabled;   \n                        self.ctx.detectChanges();\n                    }\n                }\n            );\n    }\n    \n    function changeGpioStatus(gpio) {\n        var pin = gpio.pin + '';\n        var enabled = !gpio.enabled;\n        enabled = enabled === true ? 'true' : 'false';\n        var paramsBody = scope.gpioStatusChangeRequest.paramsBody;\n        var requestBody = JSON.parse(paramsBody.replace(\"\\\"{$pin}\\\"\", pin).replace(\"\\\"{$enabled}\\\"\", enabled));\n        self.ctx.controlApi.sendTwoWayCommand(scope.gpioStatusChangeRequest.method, \n                                    requestBody, scope.requestTimeout)\n                    .subscribe(\n                        function success(responseBody) {\n                            var enabled = scope.parseGpioStatusFunction.apply(this, [responseBody, gpio.pin]);\n                            gpio.enabled = enabled;\n                            self.ctx.detectChanges();\n                        }\n                    );\n    }\n    \n    scope.gpioCells = {};\n    var rowCount = 0;\n    for (i = 0; i < scope.gpioList.length; i++) {\n        gpio = scope.gpioList[i];\n        scope.gpioCells[gpio.row+'_'+gpio.col] = gpio;\n        rowCount = Math.max(rowCount, gpio.row+1);\n    }\n    \n    scope.prefferedRowHeight = 32;\n    scope.rows = [];\n    for (i = 0; i < rowCount; i++) {\n        var row = [];\n        for (var c =0; c<2;c++) {\n            if (scope.gpioCells[i+'_'+c]) {\n                row[c] = scope.gpioCells[i+'_'+c];\n            } else {\n                row[c] = null;\n            }\n        }\n        scope.rows.push(row);\n    }\n\n    scope.gpioClick = function($event, gpio) {\n        if (scope.rpcEnabled && !scope.executingRpcRequest) {\n            changeGpioStatus(gpio);\n        }\n    };\n    \n    scope.gpioToggleChange = function($event, gpio) {\n        gpio.enabled = !$event.checked;\n        $event.source.toggle();\n        self.ctx.detectChanges();\n    }\n    \n    if (scope.rpcEnabled) {\n        requestGpioStatus();   \n    }\n    \n    self.onResize();\n}\n\nself.onResize = function() {\n    var scope = self.ctx.$scope;\n    var rowCount = scope.rows.length;\n    var prefferedRowHeight = (self.ctx.height - 35)/rowCount;\n    prefferedRowHeight = Math.min(32, prefferedRowHeight);\n    prefferedRowHeight = Math.max(12, prefferedRowHeight);\n    scope.prefferedRowHeight = prefferedRowHeight;\n    var ratio = prefferedRowHeight/32;\n    \n    var css = '.mat-slide-toggle .mat-slide-toggle-bar {\\n' +\n        '   height: ' + 14*ratio+'px;\\n'+\n        '   width: ' + 36*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-thumb-container {\\n' +\n        '   height: ' + 20*ratio+'px;\\n'+\n        '   width: ' + 20*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-thumb {\\n' +\n        '   height: ' + 20*ratio+'px;\\n'+\n        '   width: ' + 20*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-ripple {\\n' +\n        '   height: ' + 40*ratio+'px;\\n'+\n        '   width: ' + 40*ratio+'px;\\n'+\n        '   top: calc(50% - '+20*ratio+'px);\\n'+\n        '   left: calc(50% - '+20*ratio+'px);\\n'+\n    '}\\n';\n    css += '.gpio-left-label, .gpio-right-label {\\n' +\n        '   font-size: ' + 16*ratio+'px;\\n'+\n    '}\\n';\n    var pinsFontSize = Math.max(9, 12*ratio);\n    css += '.pin {\\n' +\n        '   font-size: ' + pinsFontSize+'px;\\n'+\n    '}\\n';\n\n    cssParser.createStyleElement(namespace, css);\n    \n    self.ctx.detectChanges();\n}\n\nself.onDestroy = function() {\n}\n",
         "controllerScript": "var namespace;\nvar cssParser = new cssjs();\n\nself.onInit = function() {\n    var utils = self.ctx.$injector.get(self.ctx.servicesMap.get('utils'));\n    namespace = 'gpio-control-' + utils.guid();\n    cssParser.testMode = false;\n    cssParser.cssPreviewNamespace = namespace;\n    self.ctx.$container.addClass(namespace);\n    self.ctx.ngZone.run(function() {\n       init(); \n    });\n}\n\nfunction init() {\n        \n    var i, gpio;\n    var scope = self.ctx.$scope;\n    var settings = self.ctx.settings;\n    scope.gpioList = [];\n    for (var g = 0; g < settings.gpioList.length; g++) {\n        gpio = settings.gpioList[g];\n        scope.gpioList.push(\n            {\n                row: gpio.row,\n                col: gpio.col,\n                pin: gpio.pin,\n                label: gpio.label,\n                enabled: false\n            }\n        );\n    }\n\n    scope.requestTimeout = settings.requestTimeout || 1000;\n\n    scope.switchPanelBackgroundColor = settings.switchPanelBackgroundColor || tinycolor('green').lighten(2).toRgbString();\n\n    scope.gpioStatusRequest = {\n        method: \"getGpioStatus\",\n        paramsBody: \"{}\"\n    };\n    \n    if (settings.gpioStatusRequest) {\n        scope.gpioStatusRequest.method = settings.gpioStatusRequest.method || scope.gpioStatusRequest.method;\n        scope.gpioStatusRequest.paramsBody = settings.gpioStatusRequest.paramsBody || scope.gpioStatusRequest.paramsBody;\n    }\n    \n    scope.gpioStatusChangeRequest = {\n        method: \"setGpioStatus\",\n        paramsBody: \"{\\n   \\\"pin\\\": \\\"{$pin}\\\",\\n   \\\"enabled\\\": \\\"{$enabled}\\\"\\n}\"\n    };\n    \n    if (settings.gpioStatusChangeRequest) {\n        scope.gpioStatusChangeRequest.method = settings.gpioStatusChangeRequest.method || scope.gpioStatusChangeRequest.method;\n        scope.gpioStatusChangeRequest.paramsBody = settings.gpioStatusChangeRequest.paramsBody || scope.gpioStatusChangeRequest.paramsBody;\n    }\n    \n    scope.parseGpioStatusFunction = \"return body[pin] === true;\";\n    \n    if (settings.parseGpioStatusFunction && settings.parseGpioStatusFunction.length > 0) {\n        scope.parseGpioStatusFunction = settings.parseGpioStatusFunction;\n    }\n    \n    scope.parseGpioStatusFunction = new Function(\"body, pin\", scope.parseGpioStatusFunction);\n    \n    function requestGpioStatus() {\n        self.ctx.controlApi.sendTwoWayCommand(scope.gpioStatusRequest.method, \n                            scope.gpioStatusRequest.paramsBody, \n                            scope.requestTimeout)\n            .subscribe(\n                function success(responseBody) {\n                    for (var g = 0; g < scope.gpioList.length; g++) {\n                        var gpio = scope.gpioList[g];\n                        var enabled = scope.parseGpioStatusFunction.apply(this, [responseBody, gpio.pin]);\n                        gpio.enabled = enabled;   \n                        self.ctx.detectChanges();\n                    }\n                }\n            );\n    }\n    \n    function changeGpioStatus(gpio) {\n        var pin = gpio.pin + '';\n        var enabled = !gpio.enabled;\n        enabled = enabled === true ? 'true' : 'false';\n        var paramsBody = scope.gpioStatusChangeRequest.paramsBody;\n        var requestBody = JSON.parse(paramsBody.replace(\"\\\"{$pin}\\\"\", pin).replace(\"\\\"{$enabled}\\\"\", enabled));\n        self.ctx.controlApi.sendTwoWayCommand(scope.gpioStatusChangeRequest.method, \n                                    requestBody, scope.requestTimeout)\n                    .subscribe(\n                        function success(responseBody) {\n                            var enabled = scope.parseGpioStatusFunction.apply(this, [responseBody, gpio.pin]);\n                            gpio.enabled = enabled;\n                            self.ctx.detectChanges();\n                        }\n                    );\n    }\n    \n    scope.gpioCells = {};\n    var rowCount = 0;\n    for (i = 0; i < scope.gpioList.length; i++) {\n        gpio = scope.gpioList[i];\n        scope.gpioCells[gpio.row+'_'+gpio.col] = gpio;\n        rowCount = Math.max(rowCount, gpio.row+1);\n    }\n    \n    scope.prefferedRowHeight = 32;\n    scope.rows = [];\n    for (i = 0; i < rowCount; i++) {\n        var row = [];\n        for (var c =0; c<2;c++) {\n            if (scope.gpioCells[i+'_'+c]) {\n                row[c] = scope.gpioCells[i+'_'+c];\n            } else {\n                row[c] = null;\n            }\n        }\n        scope.rows.push(row);\n    }\n\n    scope.gpioClick = function($event, gpio) {\n        if (scope.rpcEnabled && !scope.executingRpcRequest) {\n            changeGpioStatus(gpio);\n        }\n    };\n    \n    scope.gpioToggleChange = function($event, gpio) {\n        gpio.enabled = !$event.checked;\n        $event.source.toggle();\n        self.ctx.detectChanges();\n    }\n    \n    if (scope.rpcEnabled) {\n        requestGpioStatus();   \n    }\n    \n    self.onResize();\n}\n\nself.onResize = function() {\n    var scope = self.ctx.$scope;\n    var rowCount = scope.rows.length;\n    var prefferedRowHeight = (self.ctx.height - 35)/rowCount;\n    prefferedRowHeight = Math.min(32, prefferedRowHeight);\n    prefferedRowHeight = Math.max(12, prefferedRowHeight);\n    scope.prefferedRowHeight = prefferedRowHeight;\n    var ratio = prefferedRowHeight/32;\n    \n    var css = '.mat-slide-toggle .mat-slide-toggle-bar {\\n' +\n        '   height: ' + 14*ratio+'px;\\n'+\n        '   width: ' + 36*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-thumb-container {\\n' +\n        '   height: ' + 20*ratio+'px;\\n'+\n        '   width: ' + 20*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-thumb {\\n' +\n        '   height: ' + 20*ratio+'px;\\n'+\n        '   width: ' + 20*ratio+'px;\\n'+\n    '}\\n';\n    css += '.mat-slide-toggle .mat-slide-toggle-ripple {\\n' +\n        '   height: ' + 40*ratio+'px;\\n'+\n        '   width: ' + 40*ratio+'px;\\n'+\n        '   top: calc(50% - '+20*ratio+'px);\\n'+\n        '   left: calc(50% - '+20*ratio+'px);\\n'+\n    '}\\n';\n    css += '.gpio-left-label, .gpio-right-label {\\n' +\n        '   font-size: ' + 16*ratio+'px;\\n'+\n    '}\\n';\n    var pinsFontSize = Math.max(9, 12*ratio);\n    css += '.pin {\\n' +\n        '   font-size: ' + pinsFontSize+'px;\\n'+\n    '}\\n';\n\n    cssParser.createStyleElement(namespace, css);\n    \n    self.ctx.detectChanges();\n}\n\nself.onDestroy = function() {\n}\n",
-        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Settings\",\n        \"properties\": {\n            \"gpioList\": {\n                \"title\": \"Gpio switches\",\n                \"type\": \"array\",\n                \"minItems\" : 1,\n                \"items\": {\n                    \"title\": \"Gpio switch\",\n                    \"type\": \"object\",\n                    \"properties\": {\n                        \"pin\": {\n                            \"title\": \"Pin\",\n                            \"type\": \"number\"\n                        },\n                        \"label\": {\n                            \"title\": \"Label\",\n                            \"type\": \"string\"\n                        },\n                        \"row\": {\n                            \"title\": \"Row\",\n                            \"type\": \"number\"\n                        },\n                        \"col\": {\n                            \"title\": \"Column\",\n                            \"type\": \"number\"\n                        }\n                    },\n                    \"required\": [\"pin\", \"label\", \"row\", \"col\"]\n                }\n            },\n            \"requestTimeout\": {\n                \"title\": \"RPC request timeout\",\n                \"type\": \"number\",\n                \"default\": 500\n            },\n            \"switchPanelBackgroundColor\": {\n                \"title\": \"Switches panel background color\",\n                \"type\": \"string\",\n                \"default\": \"#008a00\"\n            },\n            \"gpioStatusRequest\": {\n                \"title\": \"GPIO status request\",\n                \"type\": \"object\",\n                 \"properties\": {\n                    \"method\": {\n                        \"title\": \"Method name\",\n                        \"type\": \"string\",\n                        \"default\": \"getGpioStatus\"\n                    },\n                    \"paramsBody\": {\n                      \"title\": \"Method body\",\n                      \"type\": \"string\",\n                      \"default\": \"{}\"\n                    }\n                },\n                \"required\": [\"method\", \"paramsBody\"]\n            },\n            \"gpioStatusChangeRequest\": {\n                \"title\": \"GPIO status change request\",\n                \"type\": \"object\",\n                 \"properties\": {\n                    \"method\": {\n                        \"title\": \"Method name\",\n                        \"type\": \"string\",\n                        \"default\": \"setGpioStatus\"\n                    },\n                    \"paramsBody\": {\n                      \"title\": \"Method body\",\n                      \"type\": \"string\",\n                      \"default\": \"{\\n   \\\"pin\\\": \\\"{$pin}\\\",\\n   \\\"enabled\\\": \\\"{$enabled}\\\"\\n}\"\n                    }\n                },\n                \"required\": [\"method\", \"paramsBody\"]\n            },\n            \"parseGpioStatusFunction\": {\n                \"title\": \"Parse gpio status function\",\n                \"type\": \"string\",\n                \"default\": \"return body[pin] === true;\"\n            } \n        },\n        \"required\": [\"gpioList\", \n                     \"requestTimeout\",\n                     \"switchPanelBackgroundColor\",\n                     \"gpioStatusRequest\",\n                     \"gpioStatusChangeRequest\",\n                     \"parseGpioStatusFunction\"]\n    },\n    \"form\": [\n        \"gpioList\",\n        \"requestTimeout\",\n        {\n            \"key\": \"switchPanelBackgroundColor\",\n            \"type\": \"color\"\n        },\n        {\n            \"key\": \"gpioStatusRequest\",\n            \"items\": [\n                \"gpioStatusRequest.method\",\n                {\n                    \"key\": \"gpioStatusRequest.paramsBody\",\n                    \"type\": \"json\"\n                }\n            ]\n        },\n        {\n            \"key\": \"gpioStatusChangeRequest\",\n            \"items\": [\n                \"gpioStatusChangeRequest.method\",\n                {\n                    \"key\": \"gpioStatusChangeRequest.paramsBody\",\n                    \"type\": \"json\"\n                }\n            ]\n        },\n        {\n            \"key\": \"parseGpioStatusFunction\",\n            \"type\": \"javascript\"\n        }\n    ]\n}",
+        "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Settings\",\n        \"properties\": {\n            \"gpioList\": {\n                \"title\": \"Gpio switches\",\n                \"type\": \"array\",\n                \"minItems\" : 1,\n                \"items\": {\n                    \"title\": \"Gpio switch\",\n                    \"type\": \"object\",\n                    \"properties\": {\n                        \"pin\": {\n                            \"title\": \"Pin\",\n                            \"type\": \"number\"\n                        },\n                        \"label\": {\n                            \"title\": \"Label\",\n                            \"type\": \"string\"\n                        },\n                        \"row\": {\n                            \"title\": \"Row\",\n                            \"type\": \"number\"\n                        },\n                        \"col\": {\n                            \"title\": \"Column\",\n                            \"type\": \"number\"\n                        }\n                    },\n                    \"required\": [\"pin\", \"label\", \"row\", \"col\"]\n                }\n            },\n            \"requestTimeout\": {\n                \"title\": \"RPC request timeout\",\n                \"type\": \"number\",\n                \"default\": 500\n            },\n            \"switchPanelBackgroundColor\": {\n                \"title\": \"Switches panel background color\",\n                \"type\": \"string\",\n                \"default\": \"#008a00\"\n            },\n            \"gpioStatusRequest\": {\n                \"title\": \"GPIO status request\",\n                \"type\": \"object\",\n                 \"properties\": {\n                    \"method\": {\n                        \"title\": \"Method name\",\n                        \"type\": \"string\",\n                        \"default\": \"getGpioStatus\"\n                    },\n                    \"paramsBody\": {\n                      \"title\": \"Method body\",\n                      \"type\": \"string\",\n                      \"default\": \"{}\"\n                    }\n                },\n                \"required\": [\"method\", \"paramsBody\"]\n            },\n            \"gpioStatusChangeRequest\": {\n                \"title\": \"GPIO status change request\",\n                \"type\": \"object\",\n                 \"properties\": {\n                    \"method\": {\n                        \"title\": \"Method name\",\n                        \"type\": \"string\",\n                        \"default\": \"setGpioStatus\"\n                    },\n                    \"paramsBody\": {\n                      \"title\": \"Method body\",\n                      \"type\": \"string\",\n                      \"default\": \"{\\n   \\\"pin\\\": \\\"{$pin}\\\",\\n   \\\"enabled\\\": \\\"{$enabled}\\\"\\n}\"\n                    }\n                },\n                \"required\": [\"method\", \"paramsBody\"]\n            },\n            \"parseGpioStatusFunction\": {\n                \"title\": \"Parse gpio status function\",\n                \"type\": \"string\",\n                \"default\": \"return body[pin] === true;\"\n            } \n        },\n        \"required\": [\"gpioList\", \n                     \"requestTimeout\",\n                     \"switchPanelBackgroundColor\",\n                     \"gpioStatusRequest\",\n                     \"gpioStatusChangeRequest\",\n                     \"parseGpioStatusFunction\"]\n    },\n    \"form\": [\n        \"gpioList\",\n        \"requestTimeout\",\n        {\n            \"key\": \"switchPanelBackgroundColor\",\n            \"type\": \"color\"\n        },\n        {\n            \"key\": \"gpioStatusRequest\",\n            \"items\": [\n                \"gpioStatusRequest.method\",\n                {\n                    \"key\": \"gpioStatusRequest.paramsBody\",\n                    \"type\": \"json\"\n                }\n            ]\n        },\n        {\n            \"key\": \"gpioStatusChangeRequest\",\n            \"items\": [\n                \"gpioStatusChangeRequest.method\",\n                {\n                    \"key\": \"gpioStatusChangeRequest.paramsBody\",\n                    \"type\": \"json\"\n                }\n            ]\n        },\n        {\n            \"key\": \"parseGpioStatusFunction\",\n            \"type\": \"javascript\",\n            \"helpId\": \"widget/lib/rpc/parse_gpio_status_fn\"\n        }\n    ]\n}",
         "dataKeySettingsSchema": "{}\n",
         "dataKeySettingsSchema": "{}\n",
         "defaultConfig": "{\"targetDeviceAliases\":[],\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"parseGpioStatusFunction\":\"return body[pin] === true;\",\"gpioStatusChangeRequest\":{\"method\":\"setGpioStatus\",\"paramsBody\":\"{\\n   \\\"pin\\\": \\\"{$pin}\\\",\\n   \\\"enabled\\\": \\\"{$enabled}\\\"\\n}\"},\"requestTimeout\":500,\"switchPanelBackgroundColor\":\"#008a00\",\"gpioStatusRequest\":{\"method\":\"getGpioStatus\",\"paramsBody\":\"{}\"},\"gpioList\":[{\"pin\":7,\"label\":\"GPIO 4 (GPCLK0)\",\"row\":3,\"col\":0,\"_uniqueKey\":0},{\"pin\":11,\"label\":\"GPIO 17\",\"row\":5,\"col\":0,\"_uniqueKey\":1},{\"pin\":12,\"label\":\"GPIO 18\",\"row\":5,\"col\":1,\"_uniqueKey\":2},{\"_uniqueKey\":3,\"pin\":13,\"label\":\"GPIO 27\",\"row\":6,\"col\":0},{\"_uniqueKey\":4,\"pin\":15,\"label\":\"GPIO 22\",\"row\":7,\"col\":0},{\"_uniqueKey\":5,\"pin\":16,\"label\":\"GPIO 23\",\"row\":7,\"col\":1},{\"_uniqueKey\":6,\"pin\":18,\"label\":\"GPIO 24\",\"row\":8,\"col\":1},{\"_uniqueKey\":7,\"pin\":22,\"label\":\"GPIO 25\",\"row\":10,\"col\":1},{\"_uniqueKey\":8,\"pin\":29,\"label\":\"GPIO 5\",\"row\":14,\"col\":0},{\"_uniqueKey\":9,\"pin\":31,\"label\":\"GPIO 6\",\"row\":15,\"col\":0},{\"_uniqueKey\":10,\"pin\":32,\"label\":\"GPIO 12\",\"row\":15,\"col\":1},{\"_uniqueKey\":11,\"pin\":33,\"label\":\"GPIO 13\",\"row\":16,\"col\":0},{\"_uniqueKey\":12,\"pin\":35,\"label\":\"GPIO 19\",\"row\":17,\"col\":0},{\"_uniqueKey\":13,\"pin\":36,\"label\":\"GPIO 16\",\"row\":17,\"col\":1},{\"_uniqueKey\":14,\"pin\":37,\"label\":\"GPIO 26\",\"row\":18,\"col\":0},{\"_uniqueKey\":15,\"pin\":38,\"label\":\"GPIO 20\",\"row\":18,\"col\":1},{\"_uniqueKey\":16,\"pin\":40,\"label\":\"GPIO 21\",\"row\":19,\"col\":1}]},\"title\":\"Raspberry Pi GPIO Control\"}"
         "defaultConfig": "{\"targetDeviceAliases\":[],\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"parseGpioStatusFunction\":\"return body[pin] === true;\",\"gpioStatusChangeRequest\":{\"method\":\"setGpioStatus\",\"paramsBody\":\"{\\n   \\\"pin\\\": \\\"{$pin}\\\",\\n   \\\"enabled\\\": \\\"{$enabled}\\\"\\n}\"},\"requestTimeout\":500,\"switchPanelBackgroundColor\":\"#008a00\",\"gpioStatusRequest\":{\"method\":\"getGpioStatus\",\"paramsBody\":\"{}\"},\"gpioList\":[{\"pin\":7,\"label\":\"GPIO 4 (GPCLK0)\",\"row\":3,\"col\":0,\"_uniqueKey\":0},{\"pin\":11,\"label\":\"GPIO 17\",\"row\":5,\"col\":0,\"_uniqueKey\":1},{\"pin\":12,\"label\":\"GPIO 18\",\"row\":5,\"col\":1,\"_uniqueKey\":2},{\"_uniqueKey\":3,\"pin\":13,\"label\":\"GPIO 27\",\"row\":6,\"col\":0},{\"_uniqueKey\":4,\"pin\":15,\"label\":\"GPIO 22\",\"row\":7,\"col\":0},{\"_uniqueKey\":5,\"pin\":16,\"label\":\"GPIO 23\",\"row\":7,\"col\":1},{\"_uniqueKey\":6,\"pin\":18,\"label\":\"GPIO 24\",\"row\":8,\"col\":1},{\"_uniqueKey\":7,\"pin\":22,\"label\":\"GPIO 25\",\"row\":10,\"col\":1},{\"_uniqueKey\":8,\"pin\":29,\"label\":\"GPIO 5\",\"row\":14,\"col\":0},{\"_uniqueKey\":9,\"pin\":31,\"label\":\"GPIO 6\",\"row\":15,\"col\":0},{\"_uniqueKey\":10,\"pin\":32,\"label\":\"GPIO 12\",\"row\":15,\"col\":1},{\"_uniqueKey\":11,\"pin\":33,\"label\":\"GPIO 13\",\"row\":16,\"col\":0},{\"_uniqueKey\":12,\"pin\":35,\"label\":\"GPIO 19\",\"row\":17,\"col\":0},{\"_uniqueKey\":13,\"pin\":36,\"label\":\"GPIO 16\",\"row\":17,\"col\":1},{\"_uniqueKey\":14,\"pin\":37,\"label\":\"GPIO 26\",\"row\":18,\"col\":0},{\"_uniqueKey\":15,\"pin\":38,\"label\":\"GPIO 20\",\"row\":18,\"col\":1},{\"_uniqueKey\":16,\"pin\":40,\"label\":\"GPIO 21\",\"row\":19,\"col\":1}]},\"title\":\"Raspberry Pi GPIO Control\"}"
       }
       }

@@ -431,11 +431,19 @@ export const commonMapSettingsSchema =
             condition: 'model.provider === "image-map"'
             condition: 'model.provider === "image-map"'
         },
         },
         'showLabel',
         'showLabel',
-        'label',
-        'useLabelFunction',
+        {
+          key: 'useLabelFunction',
+          condition: 'model.showLabel === true'
+        },
+        {
+            key: 'label',
+            condition: 'model.showLabel === true && model.useLabelFunction !== true'
+        },
         {
         {
             key: 'labelFunction',
             key: 'labelFunction',
-            type: 'javascript'
+            type: 'javascript',
+            helpId: 'widget/lib/map/label_fn',
+            condition: 'model.showLabel === true && model.useLabelFunction === true'
         },
         },
         'showTooltip',
         'showTooltip',
         {
         {
@@ -451,17 +459,27 @@ export const commonMapSettingsSchema =
                     value: 'hover',
                     value: 'hover',
                     label: 'Show tooltip on hover'
                     label: 'Show tooltip on hover'
                 }
                 }
-            ]
+            ],
+            condition: 'model.showTooltip === true'
+        },
+        {
+            key: 'autocloseTooltip',
+            condition: 'model.showTooltip === true'
+        },
+        {
+          key: 'useTooltipFunction',
+          condition: 'model.showTooltip === true'
         },
         },
-        'autocloseTooltip',
         {
         {
             key: 'tooltipPattern',
             key: 'tooltipPattern',
-            type: 'textarea'
+            type: 'textarea',
+            condition: 'model.showTooltip === true && model.useTooltipFunction !== true'
         },
         },
-        'useTooltipFunction',
         {
         {
             key: 'tooltipFunction',
             key: 'tooltipFunction',
-            type: 'javascript'
+            type: 'javascript',
+            helpId: 'widget/lib/map/tooltip_fn',
+            condition: 'model.showTooltip === true && model.useTooltipFunction === true'
         },
         },
         {
         {
             key: 'markerOffsetX',
             key: 'markerOffsetX',
@@ -474,6 +492,7 @@ export const commonMapSettingsSchema =
         {
         {
             key: 'posFunction',
             key: 'posFunction',
             type: 'javascript',
             type: 'javascript',
+            helpId: 'widget/lib/map/position_fn',
             condition: 'model.provider === "image-map"'
             condition: 'model.provider === "image-map"'
         },
         },
         {
         {
@@ -483,17 +502,25 @@ export const commonMapSettingsSchema =
         'useColorFunction',
         'useColorFunction',
         {
         {
             key: 'colorFunction',
             key: 'colorFunction',
-            type: 'javascript'
+            type: 'javascript',
+            helpId: 'widget/lib/map/color_fn',
+            condition: 'model.useColorFunction === true'
         },
         },
+        'useMarkerImageFunction',
         {
         {
             key: 'markerImage',
             key: 'markerImage',
-            type: 'image'
+            type: 'image',
+            condition: 'model.useMarkerImageFunction !== true'
+        },
+        {
+            key: 'markerImageSize',
+            condition: 'model.useMarkerImageFunction !== true'
         },
         },
-        'markerImageSize',
-        'useMarkerImageFunction',
         {
         {
             key: 'markerImageFunction',
             key: 'markerImageFunction',
-            type: 'javascript'
+            type: 'javascript',
+            helpId: 'widget/lib/map/marker_image_fn',
+            condition: 'model.useMarkerImageFunction === true'
         },
         },
         {
         {
             key: 'markerImages',
             key: 'markerImages',
@@ -502,7 +529,8 @@ export const commonMapSettingsSchema =
                     key: 'markerImages[]',
                     key: 'markerImages[]',
                     type: 'image'
                     type: 'image'
                 }
                 }
-            ]
+            ],
+            condition: 'model.useMarkerImageFunction === true'
         }
         }
     ]
     ]
 };
 };
@@ -590,24 +618,36 @@ export const mapPolygonSchema =
             key: 'polygonColor',
             key: 'polygonColor',
             type: 'color'
             type: 'color'
         },
         },
+        'usePolygonColorFunction',
+        {
+            key: 'polygonColorFunction',
+            helpId: 'widget/lib/map/polygon_color_fn',
+            type: 'javascript',
+            condition: 'model.usePolygonColorFunction === true'
+        },
         'polygonOpacity',
         'polygonOpacity',
         {
         {
             key: 'polygonStrokeColor',
             key: 'polygonStrokeColor',
             type: 'color'
             type: 'color'
         },
         },
-        'polygonStrokeOpacity', 'polygonStrokeWeight', 'showPolygonTooltip',
+        'polygonStrokeOpacity',
+        'polygonStrokeWeight',
+        'showPolygonTooltip',
         {
         {
-            key: 'polygonTooltipPattern',
-            type: 'textarea'
-        }, 'usePolygonTooltipFunction', {
-            key: 'polygonTooltipFunction',
-            type: 'javascript'
+          key: 'usePolygonTooltipFunction',
+          condition: 'model.showPolygonTooltip === true'
         },
         },
-        'usePolygonColorFunction',
         {
         {
-            key: 'polygonColorFunction',
-            type: 'javascript'
+            key: 'polygonTooltipPattern',
+            type: 'textarea',
+            condition: 'model.showPolygonTooltip === true && model.usePolygonTooltipFunction !== true'
         },
         },
+        {
+            key: 'polygonTooltipFunction',
+            helpId: 'widget/lib/map/polygon_tooltip_fn',
+            type: 'javascript',
+            condition: 'model.showPolygonTooltip === true && model.usePolygonTooltipFunction === true'
+        }
     ]
     ]
 };
 };
 
 
@@ -822,11 +862,18 @@ export const pathSchema =
         {
         {
             key: 'color',
             key: 'color',
             type: 'color'
             type: 'color'
-        }, 'useColorFunction', {
+        },
+        'useColorFunction',
+        {
             key: 'colorFunction',
             key: 'colorFunction',
-            type: 'javascript'
-        }, 'strokeWeight', 'strokeOpacity',
-        'usePolylineDecorator', {
+            helpId: 'widget/lib/map/trip_path_color_fn',
+            type: 'javascript',
+            condition: 'model.useColorFunction === true'
+        },
+        'strokeWeight',
+        'strokeOpacity',
+        'usePolylineDecorator',
+        {
             key: 'decoratorSymbol',
             key: 'decoratorSymbol',
             type: 'rc-select',
             type: 'rc-select',
             multiple: false,
             multiple: false,
@@ -837,16 +884,22 @@ export const pathSchema =
                 value: 'dash',
                 value: 'dash',
                 label: 'Dash'
                 label: 'Dash'
             }]
             }]
-        }, 'decoratorSymbolSize', 'useDecoratorCustomColor', {
+        },
+        'decoratorSymbolSize',
+        'useDecoratorCustomColor',
+        {
             key: 'decoratorCustomColor',
             key: 'decoratorCustomColor',
             type: 'color'
             type: 'color'
-        }, {
+        },
+        {
             key: 'decoratorOffset',
             key: 'decoratorOffset',
             type: 'textarea'
             type: 'textarea'
-        }, {
+        },
+        {
             key: 'endDecoratorOffset',
             key: 'endDecoratorOffset',
             type: 'textarea'
             type: 'textarea'
-        }, {
+        },
+        {
             key: 'decoratorRepeat',
             key: 'decoratorRepeat',
             type: 'textarea'
             type: 'textarea'
         }
         }
@@ -856,7 +909,7 @@ export const pathSchema =
 export const pointSchema =
 export const pointSchema =
 {
 {
     schema: {
     schema: {
-        title: 'Trip Animation Path Configuration',
+        title: 'Trip Animation Points Configuration',
         type: 'object',
         type: 'object',
         properties: {
         properties: {
             showPoints: {
             showPoints: {
@@ -908,13 +961,17 @@ export const pointSchema =
         'useColorPointFunction',
         'useColorPointFunction',
         {
         {
           key: 'colorPointFunction',
           key: 'colorPointFunction',
-          type: 'javascript'
+          helpId: 'widget/lib/map/trip_path_point_color_fn',
+          type: 'javascript',
+          condition: 'model.useColorPointFunction === true'
         },
         },
         'pointSize',
         'pointSize',
         'usePointAsAnchor',
         'usePointAsAnchor',
         {
         {
             key: 'pointAsAnchorFunction',
             key: 'pointAsAnchorFunction',
-            type: 'javascript'
+            helpId: 'widget/lib/map/trip_point_as_anchor_fn',
+            type: 'javascript',
+            condition: 'model.usePointAsAnchor === true'
         },
         },
         'pointTooltipOnRightPanel',
         'pointTooltipOnRightPanel',
     ]
     ]
@@ -1077,36 +1134,85 @@ export const tripAnimationSchema = {
         },
         },
         required: []
         required: []
     },
     },
-    form: ['normalizationStep', 'latKeyName', 'lngKeyName', 'showLabel', 'label', 'useLabelFunction', {
+    form: [
+      'normalizationStep',
+      'latKeyName',
+      'lngKeyName',
+      'showLabel',
+      {
+        key: 'useLabelFunction',
+        condition: 'model.showLabel === true'
+      },
+      {
+        key: 'label',
+        condition: 'model.showLabel === true && model.useLabelFunction !== true'
+      },
+      {
         key: 'labelFunction',
         key: 'labelFunction',
-        type: 'javascript'
-    }, 'showTooltip', {
+        type: 'javascript',
+        helpId: 'widget/lib/map/trip_label_fn',
+        condition: 'model.showLabel === true && model.useLabelFunction === true'
+      },
+      'showTooltip',
+      {
         key: 'tooltipColor',
         key: 'tooltipColor',
-        type: 'color'
-    }, {
+        type: 'color',
+        condition: 'model.showTooltip === true'
+      },
+      {
         key: 'tooltipFontColor',
         key: 'tooltipFontColor',
-        type: 'color'
-    }, 'tooltipOpacity', {
+        type: 'color',
+        condition: 'model.showTooltip === true'
+      },
+      {
+        key: 'tooltipOpacity',
+        condition: 'model.showTooltip === true'
+      },
+      {
+        key: 'autocloseTooltip',
+        condition: 'model.showTooltip === true'
+      },
+      {
+        key: 'useTooltipFunction',
+        condition: 'model.showTooltip === true',
+      },
+      {
         key: 'tooltipPattern',
         key: 'tooltipPattern',
-        type: 'textarea'
-    }, 'useTooltipFunction', {
+        type: 'textarea',
+        condition: 'model.showTooltip === true && model.useTooltipFunction !== true'
+      },
+      {
         key: 'tooltipFunction',
         key: 'tooltipFunction',
-        type: 'javascript'
-    }, 'autocloseTooltip', {
+        type: 'javascript',
+        helpId: 'widget/lib/map/trip_tooltip_fn',
+        condition: 'model.showTooltip === true && model.useTooltipFunction === true'
+      },
+      'rotationAngle',
+      'useMarkerImageFunction',
+      {
         key: 'markerImage',
         key: 'markerImage',
-        type: 'image'
-    }, 'markerImageSize', 'rotationAngle', 'useMarkerImageFunction',
-    {
+        type: 'image',
+        condition: 'model.useMarkerImageFunction !== true'
+      },
+      {
+        key: 'markerImageSize',
+        condition: 'model.useMarkerImageFunction !== true'
+      },
+      {
         key: 'markerImageFunction',
         key: 'markerImageFunction',
-        type: 'javascript'
-    }, {
+        type: 'javascript',
+        helpId: 'widget/lib/map/trip_marker_image_fn',
+        condition: 'model.useMarkerImageFunction === true'
+      },
+      {
         key: 'markerImages',
         key: 'markerImages',
         items: [
         items: [
             {
             {
                 key: 'markerImages[]',
                 key: 'markerImages[]',
                 type: 'image'
                 type: 'image'
             }
             }
-        ]
+        ],
+        condition: 'model.useMarkerImageFunction === true'
     }]
     }]
 };
 };
 
 

@@ -205,9 +205,9 @@ class ThingsboardAceEditor extends React.Component<ThingsboardAceEditorProps, Th
                       </div>
                       </div>
                       <React.Suspense fallback={<div>Loading...</div>}>
                       <React.Suspense fallback={<div>Loading...</div>}>
                         <ReactAce  mode={this.props.mode}
                         <ReactAce  mode={this.props.mode}
+                                   theme={'textmate'}
                                    height={this.state.isFull ? '100%' : '150px'}
                                    height={this.state.isFull ? '100%' : '150px'}
                                    width={this.state.isFull ? '100%' : '300px'}
                                    width={this.state.isFull ? '100%' : '300px'}
-                                   theme='github'
                                    onChange={this.onValueChanged}
                                    onChange={this.onValueChanged}
                                    onFocus={this.onFocus}
                                    onFocus={this.onFocus}
                                    onBlur={this.onBlur}
                                    onBlur={this.onBlur}

@@ -43,6 +43,7 @@ export function loadAceDependencies(): Observable<any> {
     aceObservables.push(from(import('ace-builds/src-noconflict/snippets/text')));
     aceObservables.push(from(import('ace-builds/src-noconflict/snippets/text')));
     aceObservables.push(from(import('ace-builds/src-noconflict/snippets/markdown')));
     aceObservables.push(from(import('ace-builds/src-noconflict/snippets/markdown')));
     aceObservables.push(from(import('ace-builds/src-noconflict/snippets/html')));
     aceObservables.push(from(import('ace-builds/src-noconflict/snippets/html')));
+    aceObservables.push(from(import('ace-builds/src-noconflict/theme-textmate')));
     aceObservables.push(from(import('ace-builds/src-noconflict/theme-github')));
     aceObservables.push(from(import('ace-builds/src-noconflict/theme-github')));
     return forkJoin(aceObservables).pipe(
     return forkJoin(aceObservables).pipe(
       tap(() => {
       tap(() => {

+#### Marker color function
+
+<div class="divider"></div>
+<br/>
+
+*function (data, dsData, dsIndex): string*
+
+A JavaScript function used to compute color of the marker.
+
+**Parameters:**
+
+<ul>
+  {% include widget/lib/map/map_fn_args %}
+</ul>
+
+**Returns:**
+
+Should return string value presenting color of the marker.
+
+In case no data is returned, color value from **Color** settings field will be used.
+
+<div class="divider"></div>
+
+##### Examples
+
+* Calculate color depending on `temperature` telemetry value for `colorpin` device type:
+
+```javascript
+var type = data['Type'];
+if (type == 'colorpin') {
+  var temperature = data['temperature'];
+  if (typeof temperature !== undefined) {
+    var percent = (temperature + 60)/120 * 100;
+    return tinycolor.mix('blue', 'red', amount = percent).toHexString();
+  }
+  return 'blue';
+}
+{:copy-code}
+```
+
+<br>
+<br>

+#### Marker label function
+
+<div class="divider"></div>
+<br/>
+
+*function (data, dsData, dsIndex): string*
+
+A JavaScript function used to compute text or HTML code of the marker label.
+
+**Parameters:**
+
+<ul>
+  {% include widget/lib/map/map_fn_args %}
+</ul>
+
+**Returns:**
+
+Should return string value presenting text or HTML of the marker label.
+
+<div class="divider"></div>
+
+##### Examples
+
+* Display styled label with corresponding latest telemetry data for `energy meter` or `thermometer` device types:
+
+```javascript
+var deviceType = data['Type'];
+if (typeof deviceType !== undefined) {
+  if (deviceType == "energy meter") {
+    return '<span style="color:orange;">${entityName}, ${energy:2} kWt</span>';
+  } else if (deviceType == "thermometer") {
+    return '<span style="color:blue;">${entityName}, ${temperature:2} °C</span>';
+  }
+}
+return data.entityName;
+{:copy-code}
+```
+
+<br>
+<br>

+  <li><b>data:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts#L108" target="_blank">FormattedData</a></code> - A <a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts#L108" target="_blank">FormattedData</a> object associated with marker.<br/>
+     Represents basic entity properties (ex. <code>entityId</code>, <code>entityName</code>)<br/>and provides access to other entity attributes/timeseries declared in widget datasource configuration.
+  </li>
+  <li><b>dsData:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts#L108" target="_blank">FormattedData[]</a></code> - All available widget data (entities) as array of <a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts#L108" target="_blank">FormattedData</a> objects<br/>
+     resolved from configured datasources. Each object represents basic entity properties (ex. <code>entityId</code>, <code>entityName</code>)<br/>
+     and provides access to other entity attributes/timeseries declared in widget datasource configuration.
+  </li>
+  <li><b>dsIndex</b> <code>number</code> - index of the current marker data in <code>dsData</code> array.<br>
+     <strong>Note: </strong> The <code>data</code> argument is equivalent to <code>dsData[dsIndex]</code> expression. 
+  </li>

+#### Marker image function
+
+<div class="divider"></div>
+<br/>
+
+*function (data, images, dsData, dsIndex): {url: string, size: number}*
+
+A JavaScript function used to compute marker image.
+
+**Parameters:**
+
+<ul>
+  {% include widget/lib/map/map_fn_args %}
+</ul>
+
+**Returns:**
+
+Should return marker image data having the following structure:
+
+```typescript
+{ 
+   url: string,
+   size: number
+}
+```
+
+- *url* - marker image url;
+- *size* - marker image size;
+
+In case no data is returned, default marker image will be used. 
+
+<div class="divider"></div>
+
+##### Examples
+
+<ul>
+<li>
+Calculate image url depending on <code>temperature</code> telemetry value for <code>thermometer</code> device type.<br>
+Let's assume 4 images are defined in <b>Marker images</b> section. Each image corresponds to particular temperature level:
+</li>
+</ul>
+
+```javascript
+var type = data['Type'];
+if (type == 'thermometer') {
+  var res = {
+    url: images[0],
+    size: 40
+  }
+  var temperature = data['temperature'];
+  if (typeof temperature !== undefined) {
+    var percent = (temperature + 60)/120;
+    var index = Math.min(3, Math.floor(4 * percent));
+    res.url = images[index];
+  }
+  return res;
+}
+{:copy-code}
+```
+
+<br>
+<br>

+#### Polygon color function
+
+<div class="divider"></div>
+<br/>
+
+*function (data, dsData, dsIndex): string*
+
+A JavaScript function used to compute color of the polygon.
+
+**Parameters:**
+
+<ul>
+  {% include widget/lib/map/map_fn_args %}
+</ul>
+
+**Returns:**
+
+Should return string value presenting color of the polygon.
+
+In case no data is returned, color value from **Polygon color** settings field will be used.
+
+<div class="divider"></div>
+
+##### Examples
+
+* Calculate color depending on `temperature` telemetry value for `thermostat` device type:
+
+```javascript
+var type = data['Type'];
+if (type == 'thermostat') {
+  var temperature = data['temperature'];
+  if (typeof temperature !== undefined) {
+    var percent = (temperature + 60)/120 * 100;
+    return tinycolor.mix('blue', 'red', amount = percent).toHexString();
+  }
+  return 'blue';
+}
+{:copy-code}
+```
+
+<br>
+<br>

+#### Polygon tooltip function
+
+<div class="divider"></div>
+<br/>
+
+*function (data, dsData, dsIndex): string*
+
+A JavaScript function used to compute text or HTML code to be displayed in the polygon tooltip.
+
+**Parameters:**
+
+<ul>
+  {% include widget/lib/map/map_fn_args %}
+</ul>
+
+**Returns:**
+
+Should return string value presenting text or HTML for the polygon tooltip.
+
+<div class="divider"></div>
+
+##### Examples
+
+* Display details with corresponding telemetry data for `energy meter` or `thermostat` device types:
+
+```javascript
+var deviceType = data['Type'];
+if (typeof deviceType !== undefined) {
+  if (deviceType == "energy meter") {
+    return '<b>${entityName}</b><br/><b>Energy:</b> ${energy:2} kWt<br/>';
+  } else if (deviceType == "thermostat") {
+    return '<b>${entityName}</b><br/><b>Temperature:</b> ${temperature:2} °C<br/>';
+  }
+}
+return data.entityName;
+{:copy-code}
+```
+
+<br>
+<br>

+#### Position conversion function
+
+<div class="divider"></div>
+<br/>
+
+*function (origXPos, origYPos): {x: number, y: number}*
+
+A JavaScript function used to convert original relative x, y coordinates of the marker.
+
+**Parameters:**
+
+- **origXPos:** <code>number</code> - original relative x coordinate as double from 0 to 1;
+- **origYPos:** <code>number</code> - original relative y coordinate as double from 0 to 1;
+
+**Returns:**
+
+Should return position data having the following structure:
+
+```typescript
+{ 
+   x: number,
+   y: number
+}
+```
+
+- *x* - new relative x coordinate as double from 0 to 1;
+- *y* - new relative y coordinate as double from 0 to 1;
+
+<div class="divider"></div>
+
+##### Examples
+
+* Scale the coordinates to half the original:
+
+```javascript
+return {x: origXPos / 2, y: origYPos / 2};
+{:copy-code}
+```
+
+<br>
+<br>

+#### Marker tooltip function
+
+<div class="divider"></div>
+<br/>
+
+*function (data, dsData, dsIndex): string*
+
+A JavaScript function used to compute text or HTML code to be displayed in the marker tooltip.
+
+**Parameters:**
+
+<ul>
+  {% include widget/lib/map/map_fn_args %}
+</ul>
+
+**Returns:**
+
+Should return string value presenting text or HTML for the marker tooltip.
+
+<div class="divider"></div>
+
+##### Examples
+
+* Display details with corresponding telemetry data for `thermostat` device type:
+
+```javascript
+var deviceType = data['Type'];
+if (typeof deviceType !== undefined) {
+  if (deviceType == "energy meter") {
+    return '<b>${entityName}</b><br/><b>Energy:</b> ${energy:2} kWt<br/>';
+  } else if (deviceType == "thermometer") {
+    return '<b>${entityName}</b><br/><b>Temperature:</b> ${temperature:2} °C<br/>';
+  }
+}
+return data.entityName;
+{:copy-code}
+```
+
+<br>
+<br>

+  <li><b>data:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts#L108" target="_blank">FormattedData</a></code> - A <a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts#L108" target="_blank">FormattedData</a> object associated with the point of the trip.<br/>
+     Represents basic entity properties (ex. <code>entityId</code>, <code>entityName</code>)<br/>and provides access to other entity attributes/timeseries declared in widget datasource configuration.
+  </li>
+  <li><b>dsData:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts#L108" target="_blank">FormattedData[][]</a></code> - two-dimensional array of <a href="https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts#L108" target="_blank">FormattedData</a> objects presenting<br/>
+     array of trips (entities with timeseries data) resolved from configured datasources.<br/>
+     Each element of array is particular entity trip data presented as array of <b>FormattedData</b> object (trip point).<br/>
+     Each object represents basic entity properties (ex. <code>entityId</code>, <code>entityName</code>)<br/>
+     and provides access to other entity attributes/timeseries declared in widget datasource configuration.
+  </li>
+  <li><b>dsIndex</b> <code>number</code> - index of the current trip data in <code>dsData</code> array.
+  </li>

+#### Trip animation widget label function
+
+<div class="divider"></div>
+<br/>
+
+*function (data, dsData, dsIndex): string*
+
+A JavaScript function used to compute text or HTML code of the marker label.
+
+**Parameters:**
+
+<ul>
+  {% include widget/lib/map/trip_fn_args %}
+</ul>
+
+**Returns:**
+
+Should return string value presenting text or HTML of the marker label.
+
+<div class="divider"></div>
+
+##### Examples
+
+* Display styled label with corresponding latest telemetry data for `energy meter` or `thermometer` device types:
+
+```javascript
+var deviceType = data['Type'];
+if (typeof deviceType !== undefined) {
+  if (deviceType == "energy meter") {
+    return '<span style="color:orange;">${entityName}, ${energy:2} kWt</span>';
+  } else if (deviceType == "thermometer") {
+    return '<span style="color:blue;">${entityName}, ${temperature:2} °C</span>';
+  }
+}
+return data.entityName;
+{:copy-code}
+```
+
+<br>
+<br>

+#### Marker image function
+
+<div class="divider"></div>
+<br/>
+
+*function (data, images, dsData, dsIndex): {url: string, size: number}*
+
+A JavaScript function used to compute marker image.
+
+**Parameters:**
+
+<ul>
+  {% include widget/lib/map/trip_fn_args %}
+</ul>
+
+**Returns:**
+
+Should return marker image data having the following structure:
+
+```typescript
+{ 
+   url: string,
+   size: number
+}
+```
+
+- *url* - marker image url;
+- *size* - marker image size;
+
+In case no data is returned, default marker image will be used.
+
+<div class="divider"></div>
+
+##### Examples
+
+<ul>
+<li>
+Calculate image url depending on <code>temperature</code> telemetry value for <code>thermometer</code> device type.<br>
+Let's assume 4 images are defined in <b>Marker images</b> section. Each image corresponds to particular temperature level:
+</li>
+</ul>
+
+```javascript
+var type = data['Type'];
+if (type == 'thermometer') {
+  var res = {
+    url: images[0],
+    size: 40
+  }
+  var temperature = data['temperature'];
+  if (typeof temperature !== undefined) {
+    var percent = (temperature + 60)/120;
+    var index = Math.min(3, Math.floor(4 * percent));
+    res.url = images[index];
+  }
+  return res;
+}
+{:copy-code}
+```
+
+<br>
+<br>

+#### Path color function
+
+<div class="divider"></div>
+<br/>
+
+*function (data, dsData, dsIndex): string*
+
+A JavaScript function used to compute color of the trip path.
+
+**Parameters:**
+
+<ul>
+  {% include widget/lib/map/trip_fn_args %}
+</ul>
+
+**Returns:**
+
+Should return string value presenting color of the trip path.
+
+In case no data is returned, color value from **Path color** settings field will be used.
+
+<div class="divider"></div>
+
+##### Examples
+
+* Calculate color depending on `temperature` telemetry value for `colorpin` device type:
+
+```javascript
+var type = data['Type'];
+if (type == 'colorpin') {
+  var temperature = data['temperature'];
+  if (typeof temperature !== undefined) {
+    var percent = (temperature + 60)/120 * 100;
+    return tinycolor.mix('blue', 'red', amount = percent).toHexString();
+  }
+  return 'blue';
+}
+{:copy-code}
+```
+
+<br>
+<br>

+#### Path point color function
+
+<div class="divider"></div>
+<br/>
+
+*function (data, dsData, dsIndex): string*
+
+A JavaScript function used to compute color of the trip path point.
+
+**Parameters:**
+
+<ul>
+  {% include widget/lib/map/trip_fn_args %}
+</ul>
+
+**Returns:**
+
+Should return string value presenting color of the trip path point.
+
+In case no data is returned, color value from **Point color** settings field will be used.
+
+<div class="divider"></div>
+
+##### Examples
+
+* Calculate color depending on `temperature` telemetry value for `colorpin` device type:
+
+```javascript
+var type = data['Type'];
+if (type == 'colorpin') {
+  var temperature = data['temperature'];
+  if (typeof temperature !== undefined) {
+    var percent = (temperature + 60)/120 * 100;
+    return tinycolor.mix('blue', 'red', amount = percent).toHexString();
+  }
+  return 'blue';
+}
+{:copy-code}
+```
+
+<br>
+<br>
+

+#### Point as anchor function
+
+<div class="divider"></div>
+<br/>
+
+*function (data, dsData, dsIndex): boolean*
+
+A JavaScript function evaluating whether to use trip point as time anchor used in time selector.
+
+**Parameters:**
+
+<ul>
+  {% include widget/lib/map/trip_fn_args %}
+</ul>
+
+**Returns:**
+
+`true` if the point should be decided as anchor, `false` otherwise.
+
+In case no data is returned, the point is not used as anchor.
+
+<div class="divider"></div>
+
+##### Examples
+
+* Make anchors with 5 seconds step interval:
+
+```javascript
+return data.time % 5000 < 1000;
+{:copy-code}
+```
+
+<br>
+<br>

+#### Trip animation widget tooltip function
+
+<div class="divider"></div>
+<br/>
+
+*function (data, dsData, dsIndex): string*
+
+A JavaScript function used to compute text or HTML code to be displayed in the marker tooltip.
+
+**Parameters:**
+
+<ul>
+  {% include widget/lib/map/trip_fn_args %}
+</ul>
+
+**Returns:**
+
+Should return string value presenting text or HTML for the marker tooltip.
+
+<div class="divider"></div>
+
+##### Examples
+
+* Display details with corresponding telemetry data for `thermostat` device type:
+
+```javascript
+var deviceType = data['Type'];
+if (typeof deviceType !== undefined) {
+  if (deviceType == "energy meter") {
+    return '<b>${entityName}</b><br/><b>Energy:</b> ${energy:2} kWt<br/>';
+  } else if (deviceType == "thermometer") {
+    return '<b>${entityName}</b><br/><b>Temperature:</b> ${temperature:2} °C<br/>';
+  }
+}
+return data.entityName;
+{:copy-code}
+```
+
+<br>
+<br>

+#### Convert value function
+
+<div class="divider"></div>
+<br/>
+
+*function (value): any*
+
+A JavaScript function converting target on/off state of the control widget to payload of the RPC set value command.
+
+**Parameters:**
+
+<ul>
+  <li><b>value:</b> <code>boolean</code> - value indicating target on/off state of the control widget.
+   </li>
+</ul>
+
+**Returns:**
+
+Payload object or primitive to be used by the RPC set value command.
+
+<div class="divider"></div>
+
+##### Examples
+
+* Use original target value as payload:
+
+```javascript
+return value;
+{:copy-code}
+```
+
+* Create json payload with `enabled` boolean property:
+
+```javascript
+return { enabled: value };
+{:copy-code}
+```
+
+<br>
+<br>

+#### Parse GPIO status function
+
+<div class="divider"></div>
+<br/>
+
+*function (body, pin): boolean*
+
+A JavaScript function evaluating enabled/disable state of GPIO pin from the response of GPIO status request.
+
+**Parameters:**
+
+<ul>
+  <li><b>body:</b> <code>any</code> - response body of the GPIO status request.
+   </li>
+  <li><b>pin:</b> <code>number</code> - number of the GPIO pin.
+   </li>
+</ul>
+
+**Returns:**
+
+`true` if GPIO pin should be enabled, `false` otherwise.
+
+<div class="divider"></div>
+
+##### Examples
+
+* Detect status of the pin assuming response body is array of boolean pins states:
+
+```javascript
+return body[pin] === true;
+{:copy-code}
+```
+
+<br>
+<br>

+#### Parse value function
+
+<div class="divider"></div>
+<br/>
+
+*function (data): boolean*
+
+A JavaScript function converting attribute/timeseries value or value of the RPC command response to boolean value.
+
+**Parameters:**
+
+<ul>
+  <li><b>data:</b> <code>any</code> - attribute/timeseries value or value of the RPC command response.
+   </li>
+</ul>
+
+**Returns:**
+
+`true` if control widget should be switched on, `false` otherwise.
+
+<div class="divider"></div>
+
+##### Examples
+
+* Switch on control widget for any positive value:
+
+```javascript
+return data ? true : false;
+{:copy-code}
+```
+
+* Parse control widget state from json payload having `enabled` boolean property:
+
+```javascript
+var payload = typeof data === 'string' ? JSON.parse(data) : data;
+return payload && payload.enabled ? true : false;
+{:copy-code}
+```
+
+<br>
+<br>