tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

pull/5422/head
Igor Kulikov 5 years ago
parent
3e798d13aa
commit
106ba88293
25 changed files with 876 additions and 64 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      application/src/main/data/json/system/widget_bundles/cards.json
  2. 8
      application/src/main/data/json/system/widget_bundles/control_widgets.json
  3. 8
      application/src/main/data/json/system/widget_bundles/entity_admin_widgets.json
  4. 4
      application/src/main/data/json/system/widget_bundles/gpio_widgets.json
  5. 208
      ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts
  6. 2
      ui-ngx/src/app/shared/components/json-form/react/json-form-ace-editor.tsx
  7. 1
      ui-ngx/src/app/shared/models/ace/ace.models.ts
  8. 42
      ui-ngx/src/assets/help/en_US/widget/lib/map/color_fn.md
  9. 40
      ui-ngx/src/assets/help/en_US/widget/lib/map/label_fn.md
  10. 10
      ui-ngx/src/assets/help/en_US/widget/lib/map/map_fn_args.md
  11. 62
      ui-ngx/src/assets/help/en_US/widget/lib/map/marker_image_fn.md
  12. 42
      ui-ngx/src/assets/help/en_US/widget/lib/map/polygon_color_fn.md
  13. 40
      ui-ngx/src/assets/help/en_US/widget/lib/map/polygon_tooltip_fn.md
  14. 41
      ui-ngx/src/assets/help/en_US/widget/lib/map/position_fn.md
  15. 40
      ui-ngx/src/assets/help/en_US/widget/lib/map/tooltip_fn.md
  16. 11
      ui-ngx/src/assets/help/en_US/widget/lib/map/trip_fn_args.md
  17. 40
      ui-ngx/src/assets/help/en_US/widget/lib/map/trip_label_fn.md
  18. 62
      ui-ngx/src/assets/help/en_US/widget/lib/map/trip_marker_image_fn.md
  19. 42
      ui-ngx/src/assets/help/en_US/widget/lib/map/trip_path_color_fn.md
  20. 43
      ui-ngx/src/assets/help/en_US/widget/lib/map/trip_path_point_color_fn.md
  21. 34
      ui-ngx/src/assets/help/en_US/widget/lib/map/trip_point_as_anchor_fn.md
  22. 40
      ui-ngx/src/assets/help/en_US/widget/lib/map/trip_tooltip_fn.md
  23. 40
      ui-ngx/src/assets/help/en_US/widget/lib/rpc/convert_value_fn.md
  24. 35
      ui-ngx/src/assets/help/en_US/widget/lib/rpc/parse_gpio_status_fn.md
  25. 41
      ui-ngx/src/assets/help/en_US/widget/lib/rpc/parse_value_fn.md

4
application/src/main/data/json/system/widget_bundles/cards.json
View File

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

8
application/src/main/data/json/system/widget_bundles/control_widgets.json
View File

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

8
application/src/main/data/json/system/widget_bundles/entity_admin_widgets.json
View File

File diff suppressed because one or more lines are too long

4
application/src/main/data/json/system/widget_bundles/gpio_widgets.json
View File

File diff suppressed because one or more lines are too long

208
ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts
View File

@ -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'
},
'useMarkerImageFunction',
{
key: 'markerImage',
type: 'image'
type: 'image',
condition: 'model.useMarkerImageFunction !== true'
},
{
key: 'markerImageSize',
condition: 'model.useMarkerImageFunction !== true'
},
'markerImageSize',
'useMarkerImageFunction',
{
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: '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',
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'
}]
};

2
ui-ngx/src/app/shared/components/json-form/react/json-form-ace-editor.tsx
View File

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

1
ui-ngx/src/app/shared/models/ace/ace.models.ts
View File

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

62
ui-ngx/src/assets/help/en_US/widget/lib/map/marker_image_fn.md
View File

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

42
ui-ngx/src/assets/help/en_US/widget/lib/map/polygon_color_fn.md
View File

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

40
ui-ngx/src/assets/help/en_US/widget/lib/map/polygon_tooltip_fn.md
View File

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

62
ui-ngx/src/assets/help/en_US/widget/lib/map/trip_marker_image_fn.md
View File

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

42
ui-ngx/src/assets/help/en_US/widget/lib/map/trip_path_color_fn.md
View File

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

43
ui-ngx/src/assets/help/en_US/widget/lib/map/trip_path_point_color_fn.md
View File

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

34
ui-ngx/src/assets/help/en_US/widget/lib/map/trip_point_as_anchor_fn.md
View File

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

40
ui-ngx/src/assets/help/en_US/widget/lib/map/trip_tooltip_fn.md
View File

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

40
ui-ngx/src/assets/help/en_US/widget/lib/rpc/convert_value_fn.md
View File

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

35
ui-ngx/src/assets/help/en_US/widget/lib/rpc/parse_gpio_status_fn.md
View File

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

41
ui-ngx/src/assets/help/en_US/widget/lib/rpc/parse_value_fn.md
View File

@ -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>
Write Preview
Loading…
Cancel
Save