Add rest of the widget functions help resources. Improved map widgets settings schema.
This commit is contained in:
Igor Kulikov
parent
3e798d13aa
commit
106ba88293
@ -163,7 +163,7 @@
|
||||
"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}",
|
||||
"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",
|
||||
"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>",
|
||||
"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",
|
||||
"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",
|
||||
"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>",
|
||||
"templateCss": "",
|
||||
"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",
|
||||
"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>",
|
||||
"templateCss": "",
|
||||
"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",
|
||||
"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>",
|
||||
"templateCss": "",
|
||||
"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",
|
||||
"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 @@
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -431,11 +431,19 @@ export const commonMapSettingsSchema =
|
||||
condition: 'model.provider === "image-map"'
|
||||
},
|
||||
'showLabel',
|
||||
'label',
|
||||
'useLabelFunction',
|
||||
{
|
||||
key: 'useLabelFunction',
|
||||
condition: 'model.showLabel === true'
|
||||
},
|
||||
{
|
||||
key: 'label',
|
||||
condition: 'model.showLabel === true && model.useLabelFunction !== true'
|
||||
},
|
||||
{
|
||||
key: 'labelFunction',
|
||||
type: 'javascript'
|
||||
type: 'javascript',
|
||||
helpId: 'widget/lib/map/label_fn',
|
||||
condition: 'model.showLabel === true && model.useLabelFunction === true'
|
||||
},
|
||||
'showTooltip',
|
||||
{
|
||||
@ -451,17 +459,27 @@ export const commonMapSettingsSchema =
|
||||
value: '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',
|
||||
type: 'textarea'
|
||||
type: 'textarea',
|
||||
condition: 'model.showTooltip === true && model.useTooltipFunction !== true'
|
||||
},
|
||||
'useTooltipFunction',
|
||||
{
|
||||
key: 'tooltipFunction',
|
||||
type: 'javascript'
|
||||
type: 'javascript',
|
||||
helpId: 'widget/lib/map/tooltip_fn',
|
||||
condition: 'model.showTooltip === true && model.useTooltipFunction === true'
|
||||
},
|
||||
{
|
||||
key: 'markerOffsetX',
|
||||
@ -474,6 +492,7 @@ export const commonMapSettingsSchema =
|
||||
{
|
||||
key: 'posFunction',
|
||||
type: 'javascript',
|
||||
helpId: 'widget/lib/map/position_fn',
|
||||
condition: 'model.provider === "image-map"'
|
||||
},
|
||||
{
|
||||
@ -483,17 +502,25 @@ export const commonMapSettingsSchema =
|
||||
'useColorFunction',
|
||||
{
|
||||
key: 'colorFunction',
|
||||
type: 'javascript'
|
||||
type: 'javascript',
|
||||
helpId: 'widget/lib/map/color_fn',
|
||||
condition: 'model.useColorFunction === true'
|
||||
},
|
||||
{
|
||||
key: 'markerImage',
|
||||
type: 'image'
|
||||
},
|
||||
'markerImageSize',
|
||||
'useMarkerImageFunction',
|
||||
{
|
||||
key: 'markerImage',
|
||||
type: 'image',
|
||||
condition: 'model.useMarkerImageFunction !== true'
|
||||
},
|
||||
{
|
||||
key: 'markerImageSize',
|
||||
condition: 'model.useMarkerImageFunction !== true'
|
||||
},
|
||||
{
|
||||
key: 'markerImageFunction',
|
||||
type: 'javascript'
|
||||
type: 'javascript',
|
||||
helpId: 'widget/lib/map/marker_image_fn',
|
||||
condition: 'model.useMarkerImageFunction === true'
|
||||
},
|
||||
{
|
||||
key: 'markerImages',
|
||||
@ -502,7 +529,8 @@ export const commonMapSettingsSchema =
|
||||
key: 'markerImages[]',
|
||||
type: 'image'
|
||||
}
|
||||
]
|
||||
],
|
||||
condition: 'model.useMarkerImageFunction === true'
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -590,24 +618,36 @@ export const mapPolygonSchema =
|
||||
key: 'polygonColor',
|
||||
type: 'color'
|
||||
},
|
||||
'usePolygonColorFunction',
|
||||
{
|
||||
key: 'polygonColorFunction',
|
||||
helpId: 'widget/lib/map/polygon_color_fn',
|
||||
type: 'javascript',
|
||||
condition: 'model.usePolygonColorFunction === true'
|
||||
},
|
||||
'polygonOpacity',
|
||||
{
|
||||
key: 'polygonStrokeColor',
|
||||
type: 'color'
|
||||
},
|
||||
'polygonStrokeOpacity', 'polygonStrokeWeight', 'showPolygonTooltip',
|
||||
'polygonStrokeOpacity',
|
||||
'polygonStrokeWeight',
|
||||
'showPolygonTooltip',
|
||||
{
|
||||
key: 'usePolygonTooltipFunction',
|
||||
condition: 'model.showPolygonTooltip === true'
|
||||
},
|
||||
{
|
||||
key: 'polygonTooltipPattern',
|
||||
type: 'textarea'
|
||||
}, 'usePolygonTooltipFunction', {
|
||||
key: 'polygonTooltipFunction',
|
||||
type: 'javascript'
|
||||
type: 'textarea',
|
||||
condition: 'model.showPolygonTooltip === true && model.usePolygonTooltipFunction !== true'
|
||||
},
|
||||
'usePolygonColorFunction',
|
||||
{
|
||||
key: 'polygonColorFunction',
|
||||
type: 'javascript'
|
||||
},
|
||||
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',
|
||||
type: 'color'
|
||||
}, 'useColorFunction', {
|
||||
},
|
||||
'useColorFunction',
|
||||
{
|
||||
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',
|
||||
type: 'rc-select',
|
||||
multiple: false,
|
||||
@ -837,16 +884,22 @@ export const pathSchema =
|
||||
value: 'dash',
|
||||
label: 'Dash'
|
||||
}]
|
||||
}, 'decoratorSymbolSize', 'useDecoratorCustomColor', {
|
||||
},
|
||||
'decoratorSymbolSize',
|
||||
'useDecoratorCustomColor',
|
||||
{
|
||||
key: 'decoratorCustomColor',
|
||||
type: 'color'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
key: 'decoratorOffset',
|
||||
type: 'textarea'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
key: 'endDecoratorOffset',
|
||||
type: 'textarea'
|
||||
}, {
|
||||
},
|
||||
{
|
||||
key: 'decoratorRepeat',
|
||||
type: 'textarea'
|
||||
}
|
||||
@ -856,7 +909,7 @@ export const pathSchema =
|
||||
export const pointSchema =
|
||||
{
|
||||
schema: {
|
||||
title: 'Trip Animation Path Configuration',
|
||||
title: 'Trip Animation Points Configuration',
|
||||
type: 'object',
|
||||
properties: {
|
||||
showPoints: {
|
||||
@ -908,13 +961,17 @@ export const pointSchema =
|
||||
'useColorPointFunction',
|
||||
{
|
||||
key: 'colorPointFunction',
|
||||
type: 'javascript'
|
||||
helpId: 'widget/lib/map/trip_path_point_color_fn',
|
||||
type: 'javascript',
|
||||
condition: 'model.useColorPointFunction === true'
|
||||
},
|
||||
'pointSize',
|
||||
'usePointAsAnchor',
|
||||
{
|
||||
key: 'pointAsAnchorFunction',
|
||||
type: 'javascript'
|
||||
helpId: 'widget/lib/map/trip_point_as_anchor_fn',
|
||||
type: 'javascript',
|
||||
condition: 'model.usePointAsAnchor === true'
|
||||
},
|
||||
'pointTooltipOnRightPanel',
|
||||
]
|
||||
@ -1077,36 +1134,85 @@ export const tripAnimationSchema = {
|
||||
},
|
||||
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',
|
||||
type: 'javascript'
|
||||
}, 'showTooltip', {
|
||||
type: 'javascript',
|
||||
helpId: 'widget/lib/map/trip_label_fn',
|
||||
condition: 'model.showLabel === true && model.useLabelFunction === true'
|
||||
},
|
||||
'showTooltip',
|
||||
{
|
||||
key: 'tooltipColor',
|
||||
type: 'color'
|
||||
}, {
|
||||
type: 'color',
|
||||
condition: 'model.showTooltip === true'
|
||||
},
|
||||
{
|
||||
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',
|
||||
type: 'textarea'
|
||||
}, 'useTooltipFunction', {
|
||||
type: 'textarea',
|
||||
condition: 'model.showTooltip === true && model.useTooltipFunction !== true'
|
||||
},
|
||||
{
|
||||
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',
|
||||
type: 'image'
|
||||
}, 'markerImageSize', 'rotationAngle', 'useMarkerImageFunction',
|
||||
{
|
||||
type: 'image',
|
||||
condition: 'model.useMarkerImageFunction !== true'
|
||||
},
|
||||
{
|
||||
key: 'markerImageSize',
|
||||
condition: 'model.useMarkerImageFunction !== true'
|
||||
},
|
||||
{
|
||||
key: 'markerImageFunction',
|
||||
type: 'javascript'
|
||||
}, {
|
||||
type: 'javascript',
|
||||
helpId: 'widget/lib/map/trip_marker_image_fn',
|
||||
condition: 'model.useMarkerImageFunction === true'
|
||||
},
|
||||
{
|
||||
key: 'markerImages',
|
||||
items: [
|
||||
{
|
||||
key: 'markerImages[]',
|
||||
type: 'image'
|
||||
}
|
||||
]
|
||||
],
|
||||
condition: 'model.useMarkerImageFunction === true'
|
||||
}]
|
||||
};
|
||||
|
||||
|
||||
@ -205,9 +205,9 @@ class ThingsboardAceEditor extends React.Component<ThingsboardAceEditorProps, Th
|
||||
</div>
|
||||
<React.Suspense fallback={<div>Loading...</div>}>
|
||||
<ReactAce mode={this.props.mode}
|
||||
theme={'textmate'}
|
||||
height={this.state.isFull ? '100%' : '150px'}
|
||||
width={this.state.isFull ? '100%' : '300px'}
|
||||
theme='github'
|
||||
onChange={this.onValueChanged}
|
||||
onFocus={this.onFocus}
|
||||
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/markdown')));
|
||||
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')));
|
||||
return forkJoin(aceObservables).pipe(
|
||||
tap(() => {
|
||||
|
||||
42
ui-ngx/src/assets/help/en_US/widget/lib/map/color_fn.md
Normal file
42
ui-ngx/src/assets/help/en_US/widget/lib/map/color_fn.md
Normal file
@ -0,0 +1,42 @@
|
||||
#### 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>
|
||||
40
ui-ngx/src/assets/help/en_US/widget/lib/map/label_fn.md
Normal file
40
ui-ngx/src/assets/help/en_US/widget/lib/map/label_fn.md
Normal file
@ -0,0 +1,40 @@
|
||||
#### 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>
|
||||
10
ui-ngx/src/assets/help/en_US/widget/lib/map/map_fn_args.md
Normal file
10
ui-ngx/src/assets/help/en_US/widget/lib/map/map_fn_args.md
Normal file
@ -0,0 +1,10 @@
|
||||
<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>
|
||||
@ -0,0 +1,62 @@
|
||||
#### 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>
|
||||
@ -0,0 +1,42 @@
|
||||
#### 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>
|
||||
@ -0,0 +1,40 @@
|
||||
#### 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>
|
||||
41
ui-ngx/src/assets/help/en_US/widget/lib/map/position_fn.md
Normal file
41
ui-ngx/src/assets/help/en_US/widget/lib/map/position_fn.md
Normal file
@ -0,0 +1,41 @@
|
||||
#### 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>
|
||||
40
ui-ngx/src/assets/help/en_US/widget/lib/map/tooltip_fn.md
Normal file
40
ui-ngx/src/assets/help/en_US/widget/lib/map/tooltip_fn.md
Normal file
@ -0,0 +1,40 @@
|
||||
#### 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>
|
||||
11
ui-ngx/src/assets/help/en_US/widget/lib/map/trip_fn_args.md
Normal file
11
ui-ngx/src/assets/help/en_US/widget/lib/map/trip_fn_args.md
Normal file
@ -0,0 +1,11 @@
|
||||
<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>
|
||||
40
ui-ngx/src/assets/help/en_US/widget/lib/map/trip_label_fn.md
Normal file
40
ui-ngx/src/assets/help/en_US/widget/lib/map/trip_label_fn.md
Normal file
@ -0,0 +1,40 @@
|
||||
#### 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>
|
||||
@ -0,0 +1,62 @@
|
||||
#### 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>
|
||||
@ -0,0 +1,42 @@
|
||||
#### 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>
|
||||
@ -0,0 +1,43 @@
|
||||
#### 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>
|
||||
|
||||
@ -0,0 +1,34 @@
|
||||
#### 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>
|
||||
@ -0,0 +1,40 @@
|
||||
#### 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>
|
||||
@ -0,0 +1,40 @@
|
||||
#### 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>
|
||||
@ -0,0 +1,35 @@
|
||||
#### 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>
|
||||
@ -0,0 +1,41 @@
|
||||
#### 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>
|
||||
Loading…
x
Reference in New Issue
Block a user