UI: Outdoor Environment: Temperature widgets

application/src/main/data/json/system/widget_bundles/outdoor_environment.json

@@ -0,0 +1,20 @@
+{
+  "widgetsBundle": {
+    "alias": "outdoor_environment",
+    "title": "Outdoor Environment",
+    "image": null,
+    "description": null,
+    "externalId": null,
+    "name": "Outdoor Environment"
+  },
+  "widgetTypeFqns": [
+    "temperature_card",
+    "temperature_card_with_background",
+    "horizontal_temperature_card",
+    "horizontal_temperature_card_with_background",
+    "temperature_chart_card",
+    "temperature_chart_card_with_background",
+    "simple_temperature_chart_card",
+    "simple_temperature_chart_card_with_background"
+  ]
+}

application/src/main/data/json/system/widget_types/horizontal_temperature_card.json

@@ -0,0 +1,28 @@
+{
+  "fqn": "horizontal_temperature_card",
+  "name": "Horizontal temperature card",
+  "deprecated": false,
+  "image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACgCAMAAAB+IdObAAAAsVBMVEUAAADf39/u7u7x8fHr6+vl5eXf39/f39/r6+vq6ur////z8/MjTMc+Ys7IyMjj4+Pk6fitvOqRpePPz8/x8fGtra2QkJDCwsLy9Pv5+fnI0vHV1dW2trZYWFg9PT3n5+cwV8vt7e1aeNXW3fV1j9zb29tog9laedW8vLxmZma6x+5MbtGCgoIvLy88PDyfsOeDmt+enp50dHRKSkrU1NSRpuNMbtIhISHd3d0xV8qdnZ2QKY5sAAAACnRSTlMAIN/vz6AQML+/B+y1FwAAA4lJREFUeNrt2glzmkAYxnHTptfLsssNCgoqGPCsR8/v/8H6LjTVaqsZ66TGeX4ZDbDMZP+yDpPRFgAAAAAAAAAAAAAAAAAAAAAAAAAAAMBzenv3wr1tae8+GC+dd3/Xat29phvw+q71hm7Cm9Y93YRXrVd0ExBybRBybRBybRBybW47ZGiKPKL/IurY9pAalm13dofs8a8te2zRrr+EmOZIOLTVZT4d4cV0GXYm2Mgi9lEwk6salpmJSZ3BA81Jp0Is4TjZgLaU31UexYqUkiqWPG/eJk8SxbHnSUX+WilFkmJ+5vGzdYQYOLkQD7z9SYiPjim+RdTIzcgS+ppM+KSPI26MnhASmQPaIbtE3elaBvNpb9VdynUwl/F82qVeFfe+z+V0LgOfvvCunK6qJZ3roU5whLCITL0oooyfG6MRUWYT2ULYepJ65HTIMNsPUbOgmgYB9cgPeDdYrqpg5vV4bNrz+UATomgWrCo6lxCL+u+Ljr44Q72+OK1hi9FDVgfmxHjEfELI4jCkp5S3DVktp0uleM+bedVvIXp5ncuyomaBWTQWgthiO117MOK0SPD60obOU64IHS6tYF3Jx5BZtVZqXa10yLya+d7cl71qpkO+97pL+je5GNQrqLkO5sHbqENbJ0LMBzGgfd5Ol7dzwGse3va8f8PvcusyIUPBPtPfqYAuzBSsQ0yvKYcuEzIR2oKe0cBkHWLDjDuOhAyfHmKL2reIHvXpj/oG7Wi3+ZHSP7JM7tgJcfaXRvT4Eo/z/ETISDTG9ChpZs3T3Gx4tvqH2/puyr/aZTP92NcnuFQPGf12nXlOR/5zq3nlR2L0x3uNHvl8IiQXjc5uSOom7cRVUhKFRmj4sfwqwzRWYT8xEtclfdjw9YarSqOUxUaW7XM6JtsFntc59uHd/1NzxewTIQvRiHZDvrqJUci0KJqQhEI3LVJ3UxJXuXEd0ncNHbJJiiItSnLTM+7sIjO1vH7Tmw+ZMGmfowdMwcknQqKJ0BzahoSyKH0jCeM0JCpC3/C5IyzT0k0oMUpX1SHtRHIIH2uXYRGHCZ0T0hjwjm3qDYv2NQOZQ6dCKMozMbHpmOOTbBdS0QVYw+hvA9x3GHKGPh1l9Ol53fp/iC8RQq4NQq4NQq4NQq7N/e18PH0zXxho3d17xkv3/t0tfakGAAAAAAAAAAAAAAAAAAAAAAAAAAAA4Jn8AJ01hSMevW95AAAAAElFTkSuQmCC",
+  "description": "Displays a latest temperature telemetry data in a horizontal layout.",
+  "descriptor": {
+    "type": "latest",
+    "sizeX": 5,
+    "sizeY": 1.5,
+    "resources": [],
+    "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
+    "templateCss": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '130px',\n        embedTitlePanel: true\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsSchema": "",
+    "dataKeySettingsSchema": "",
+    "settingsDirective": "tb-value-card-widget-settings",
+    "hasBasicMode": true,
+    "basicModeDirective": "tb-value-card-basic-config",
+    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temperature\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.2392660816082064,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgba(0, 0, 0, 0)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"labelPosition\":\"top\",\"layout\":\"horizontal\",\"showLabel\":true,\"labelFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\"},\"labelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"showIcon\":true,\"iconSize\":40,\"iconSizeUnit\":\"px\",\"icon\":\"thermostat\",\"iconColor\":{\"type\":\"range\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"rangeList\":[{\"from\":null,\"to\":-20,\"color\":\"#234CC7\"},{\"from\":-20,\"to\":0,\"color\":\"#305AD7\"},{\"from\":0,\"to\":10,\"color\":\"#7191EF\"},{\"from\":10,\"to\":20,\"color\":\"#FFA600\"},{\"from\":20,\"to\":30,\"color\":\"#F36900\"},{\"from\":30,\"to\":40,\"color\":\"#F04022\"},{\"from\":40,\"to\":null,\"color\":\"#D81838\"}],\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"valueFont\":{\"size\":36,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\"},\"valueColor\":{\"type\":\"range\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\",\"rangeList\":[{\"from\":null,\"to\":-20,\"color\":\"#234CC7\"},{\"from\":-20,\"to\":0,\"color\":\"#305AD7\"},{\"from\":0,\"to\":10,\"color\":\"#7191EF\"},{\"from\":10,\"to\":20,\"color\":\"#FFA600\"},{\"from\":20,\"to\":30,\"color\":\"#F36900\"},{\"from\":30,\"to\":40,\"color\":\"#F04022\"},{\"from\":40,\"to\":null,\"color\":\"#D81838\"}]},\"showDate\":true,\"dateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"dateFont\":{\"family\":\"Roboto\",\"size\":12,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\"},\"dateColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.38)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}},\"autoScale\":true},\"title\":\"Horizontal temperature card\",\"dropShadow\":true,\"enableFullscreen\":false,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"units\":\"°C\",\"decimals\":0,\"useDashboardTimewindow\":true,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{},\"configMode\":\"basic\",\"displayTimewindow\":true,\"margin\":\"0px\",\"borderRadius\":\"0px\",\"widgetCss\":\"\",\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"showTitleIcon\":false,\"titleTooltip\":\"\",\"titleFont\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":null,\"weight\":null,\"style\":null,\"lineHeight\":\"1.6\"},\"titleIcon\":\"\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"14px\",\"timewindowStyle\":{\"showIcon\":true,\"iconSize\":\"14px\",\"icon\":\"query_builder\",\"iconPosition\":\"left\",\"font\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":null,\"weight\":null,\"style\":null,\"lineHeight\":\"1\"},\"color\":null}}"
+  },
+  "externalId": null,
+  "tags": [
+    "temperature",
+    "weather",
+    "environment"
+  ]
+}

application/src/main/data/json/system/widget_types/simple_temperature_chart_card.json

@@ -0,0 +1,31 @@
+{
+  "fqn": "simple_temperature_chart_card",
+  "name": "Simple temperature chart card",
+  "deprecated": false,
+  "image": "data:image/png;base64,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",
+  "description": "Displays historical temperature values as a simplified chart. Optionally may display the corresponding latest temperature value.",
+  "descriptor": {
+    "type": "timeseries",
+    "sizeX": 4.5,
+    "sizeY": 2,
+    "resources": [],
+    "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
+    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'temperature', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsSchema": "{}",
+    "dataKeySettingsSchema": "{}",
+    "latestDataKeySettingsSchema": "{}",
+    "settingsDirective": "tb-value-chart-card-widget-settings",
+    "dataKeySettingsDirective": "",
+    "latestDataKeySettingsDirective": "",
+    "hasBasicMode": true,
+    "basicModeDirective": "tb-value-chart-card-basic-config",
+    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temperature\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"settings\":{},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"latestDataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Latest\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"settings\":{},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}]}],\"showTitle\":true,\"backgroundColor\":\"rgba(0, 0, 0, 0)\",\"color\":null,\"padding\":\"0\",\"settings\":{\"layout\":\"left\",\"autoScale\":true,\"showValue\":true,\"valueFont\":{\"family\":\"Roboto\",\"size\":28,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"32px\"},\"valueColor\":{\"type\":\"range\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"rangeList\":[{\"from\":null,\"to\":-20,\"color\":\"#234CC7\"},{\"from\":-20,\"to\":0,\"color\":\"#305AD7\"},{\"from\":0,\"to\":10,\"color\":\"#7191EF\"},{\"from\":10,\"to\":20,\"color\":\"#FFA600\"},{\"from\":20,\"to\":30,\"color\":\"#F36900\"},{\"from\":30,\"to\":40,\"color\":\"#F04022\"},{\"from\":40,\"to\":null,\"color\":\"#D81838\"}],\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}}},\"title\":\"Temperature\",\"dropShadow\":true,\"enableFullscreen\":false,\"titleStyle\":null,\"mobileHeight\":null,\"configMode\":\"basic\",\"actions\":{},\"showTitleIcon\":true,\"titleIcon\":\"thermostat\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"titleFont\":{\"size\":16,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\",\"lineHeight\":\"24px\"},\"iconSize\":\"18px\",\"titleTooltip\":\"\",\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"useDashboardTimewindow\":true,\"decimals\":0,\"titleColor\":\"rgba(0, 0, 0, 0.87)\",\"borderRadius\":null,\"units\":\"°C\",\"displayTimewindow\":true,\"timewindow\":{\"hideInterval\":false,\"hideLastInterval\":false,\"hideQuickInterval\":false,\"hideAggregation\":false,\"hideAggInterval\":false,\"hideTimezone\":false,\"selectedTab\":1,\"history\":{\"historyType\":2,\"timewindowMs\":60000,\"interval\":43200000,\"fixedTimewindow\":{\"startTimeMs\":1697382151041,\"endTimeMs\":1697468551041},\"quickInterval\":\"CURRENT_MONTH_SO_FAR\"},\"aggregation\":{\"type\":\"AVG\",\"limit\":25000}},\"timewindowStyle\":{\"showIcon\":false,\"iconSize\":\"24px\",\"icon\":\"query_builder\",\"iconPosition\":\"left\",\"font\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"400\",\"style\":\"normal\",\"lineHeight\":\"16px\"},\"color\":\"rgba(0, 0, 0, 0.38)\",\"displayTypePrefix\":true}}"
+  },
+  "externalId": null,
+  "tags": [
+    "temperature",
+    "weather",
+    "environment"
+  ]
+}

application/src/main/data/json/system/widget_types/temperature_card.json

@@ -0,0 +1,28 @@
+{
+  "fqn": "temperature_card",
+  "name": "Temperature card",
+  "deprecated": false,
+  "image": "data:image/png;base64,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",
+  "description": "Displays a latest temperature telemetry data in a box layout.",
+  "descriptor": {
+    "type": "latest",
+    "sizeX": 3,
+    "sizeY": 3,
+    "resources": [],
+    "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
+    "templateCss": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsSchema": "",
+    "dataKeySettingsSchema": "",
+    "settingsDirective": "tb-value-card-widget-settings",
+    "hasBasicMode": true,
+    "basicModeDirective": "tb-value-card-basic-config",
+    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temperature\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.2392660816082064,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgba(0, 0, 0, 0)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"labelPosition\":\"top\",\"layout\":\"square\",\"showLabel\":true,\"labelFont\":{\"family\":\"Roboto\",\"size\":16,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\"},\"labelColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"showIcon\":true,\"iconSize\":40,\"iconSizeUnit\":\"px\",\"icon\":\"thermostat\",\"iconColor\":{\"type\":\"range\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"rangeList\":[{\"from\":null,\"to\":-20,\"color\":\"#234CC7\"},{\"from\":-20,\"to\":0,\"color\":\"#305AD7\"},{\"from\":0,\"to\":10,\"color\":\"#7191EF\"},{\"from\":10,\"to\":20,\"color\":\"#FFA600\"},{\"from\":20,\"to\":30,\"color\":\"#F36900\"},{\"from\":30,\"to\":40,\"color\":\"#F04022\"},{\"from\":40,\"to\":null,\"color\":\"#D81838\"}],\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":52,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\"},\"valueColor\":{\"type\":\"range\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\",\"rangeList\":[{\"from\":null,\"to\":-20,\"color\":\"#234CC7\"},{\"from\":-20,\"to\":0,\"color\":\"#305AD7\"},{\"from\":0,\"to\":10,\"color\":\"#7191EF\"},{\"from\":10,\"to\":20,\"color\":\"#FFA600\"},{\"from\":20,\"to\":30,\"color\":\"#F36900\"},{\"from\":30,\"to\":40,\"color\":\"#F04022\"},{\"from\":40,\"to\":null,\"color\":\"#D81838\"}]},\"showDate\":true,\"dateFormat\":{\"format\":null,\"lastUpdateAgo\":true,\"custom\":false},\"dateFont\":{\"family\":\"Roboto\",\"size\":12,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\"},\"dateColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.38)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n  var percent = (temperature + 60)/120 * 100;\\n  return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}},\"autoScale\":true},\"title\":\"Temperature card\",\"dropShadow\":true,\"enableFullscreen\":false,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"units\":\"°C\",\"decimals\":0,\"useDashboardTimewindow\":true,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{},\"configMode\":\"basic\",\"displayTimewindow\":true,\"margin\":\"0px\",\"borderRadius\":\"0px\",\"widgetCss\":\"\",\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"showTitleIcon\":false,\"titleTooltip\":\"\",\"titleFont\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":null,\"weight\":null,\"style\":null,\"lineHeight\":\"1.6\"},\"titleIcon\":\"\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"14px\",\"timewindowStyle\":{\"showIcon\":true,\"iconSize\":\"14px\",\"icon\":\"query_builder\",\"iconPosition\":\"left\",\"font\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":null,\"weight\":null,\"style\":null,\"lineHeight\":\"1\"},\"color\":null}}"
+  },
+  "externalId": null,
+  "tags": [
+    "temperature",
+    "weather",
+    "environment"
+  ]
+}

application/src/main/data/json/system/widget_types/value_and_chart_card.json

@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'watermeter', label: 'Watermeter', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys('watermeter', 'm³');\n        }\n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'watermeter', label: 'Watermeter', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'watermeter', 'm³');\n        }\n    };\n}\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}",
     "latestDataKeySettingsSchema": "{}",

application/src/main/java/org/thingsboard/server/service/install/DefaultSystemDataLoaderService.java

@@ -534,6 +534,7 @@ public class DefaultSystemDataLoaderService implements SystemDataLoaderService {
         this.deleteSystemWidgetBundle("count_widgets");
         this.deleteSystemWidgetBundle("weather_widgets");
         this.deleteSystemWidgetBundle("status_indicators");
+        this.deleteSystemWidgetBundle("outdoor_environment");
         installScripts.loadSystemWidgets();
     }
 

ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.ts

@@ -117,27 +117,81 @@ export class AggregatedValueCardBasicConfigComponent extends BasicWidgetConfigCo
   }
 
   protected defaultLatestDataKeys(configData: WidgetConfigComponentData): DataKey[] {
-    return this.createDefaultAggregatedValueLatestDataKeys('watermeter', 'm³');
+    return this.createDefaultAggregatedValueLatestDataKeys(configData, 'watermeter', 'm³');
   }
 
-  createDefaultAggregatedValueLatestDataKeys(keyName: string, units): DataKey[] {
+  createDefaultAggregatedValueLatestDataKeys(configData: WidgetConfigComponentData, keyName: string, units): DataKey[] {
+    let centerKeySettings: AggregatedValueCardKeySettings = {
+      position: AggregatedValueCardKeyPosition.center,
+      font: {
+        family: 'Roboto',
+        size: 52,
+        sizeUnit: 'px',
+        style: 'normal',
+        weight: '500',
+        lineHeight: '1'
+      },
+      color: constantColor('rgba(0, 0, 0, 0.87)'),
+      showArrow: false
+    };
+    let rightTopKeySettings: AggregatedValueCardKeySettings = {
+      position: AggregatedValueCardKeyPosition.rightTop,
+      font: {
+        family: 'Roboto',
+        size: 14,
+        sizeUnit: 'px',
+        style: 'normal',
+        weight: '500',
+        lineHeight: '1'
+      },
+      color: {
+        color: 'rgba(0, 0, 0, 0.87)',
+        type: ColorType.range,
+        rangeList: [
+          {to: 0, color: '#198038'},
+          {from: 0, to: 0, color: 'rgba(0, 0, 0, 0.87)'},
+          {from: 0, color: '#D12730'}
+        ],
+        colorFunction: ''
+      },
+      showArrow: true
+    };
+    let rightBottomKeySettings: AggregatedValueCardKeySettings = {
+      position: AggregatedValueCardKeyPosition.rightBottom,
+      font: {
+        family: 'Roboto',
+        size: 11,
+        sizeUnit: 'px',
+        style: 'normal',
+        weight: '400',
+        lineHeight: '1'
+      },
+      color: constantColor('rgba(0, 0, 0, 0.38)'),
+      showArrow: false
+    };
+    const datasources: Datasource[] = configData.config.datasources;
+    if (datasources?.length) {
+      const latestDataKeys = datasources[0].latestDataKeys;
+      if (latestDataKeys) {
+        const center = latestDataKeys.find(dataKey => dataKey.settings?.position === AggregatedValueCardKeyPosition.center);
+        if (center) {
+          centerKeySettings = {...centerKeySettings, ...center.settings};
+        }
+        const rightTop = latestDataKeys.find(dataKey => dataKey.settings?.position === AggregatedValueCardKeyPosition.rightTop);
+        if (rightTop) {
+          rightTopKeySettings = {...rightTopKeySettings, ...rightTop.settings};
+        }
+        const rightBottom = latestDataKeys.find(dataKey => dataKey.settings?.position === AggregatedValueCardKeyPosition.rightBottom);
+        if (rightBottom) {
+          rightBottomKeySettings = {...rightBottomKeySettings, ...rightBottom.settings};
+        }
+      }
+    }
     return [
       {
         name: keyName, label: 'Latest', type: DataKeyType.timeseries, units, decimals: 0,
         aggregationType: AggregationType.NONE,
-        settings: {
+        settings: centerKeySettings
-          position: AggregatedValueCardKeyPosition.center,
-          font: {
-            family: 'Roboto',
-            size: 52,
-            sizeUnit: 'px',
-            style: 'normal',
-            weight: '500',
-            lineHeight: '1'
-          },
-          color: constantColor('rgba(0, 0, 0, 0.87)'),
-          showArrow: false
-        } as AggregatedValueCardKeySettings
       },
       {
         name: keyName, label: 'Delta percent', type: DataKeyType.timeseries, units: '%', decimals: 0,
@@ -145,28 +199,7 @@ export class AggregatedValueCardBasicConfigComponent extends BasicWidgetConfigCo
         comparisonEnabled: true,
         timeForComparison: 'previousInterval',
         comparisonResultType: ComparisonResultType.DELTA_PERCENT,
-        settings: {
+        settings: rightTopKeySettings
-          position: AggregatedValueCardKeyPosition.rightTop,
-          font: {
-            family: 'Roboto',
-            size: 14,
-            sizeUnit: 'px',
-            style: 'normal',
-            weight: '500',
-            lineHeight: '1'
-          },
-          color: {
-            color: 'rgba(0, 0, 0, 0.87)',
-            type: ColorType.range,
-            rangeList: [
-              {to: 0, color: '#198038'},
-              {from: 0, to: 0, color: 'rgba(0, 0, 0, 0.87)'},
-              {from: 0, color: '#D12730'}
-            ],
-            colorFunction: ''
-          },
-          showArrow: true
-        } as AggregatedValueCardKeySettings
       },
       {
         name: keyName, label: 'Delta absolute', type: DataKeyType.timeseries, units, decimals: 1,
@@ -174,19 +207,7 @@ export class AggregatedValueCardBasicConfigComponent extends BasicWidgetConfigCo
         comparisonEnabled: true,
         timeForComparison: 'previousInterval',
         comparisonResultType: ComparisonResultType.DELTA_ABSOLUTE,
-        settings: {
+        settings: rightBottomKeySettings
-          position: AggregatedValueCardKeyPosition.rightBottom,
-          font: {
-            family: 'Roboto',
-            size: 11,
-            sizeUnit: 'px',
-            style: 'normal',
-            weight: '400',
-            lineHeight: '1'
-          },
-          color: constantColor('rgba(0, 0, 0, 0.38)'),
-          showArrow: false
-        } as AggregatedValueCardKeySettings
       }
     ];
   }

ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts

@@ -607,7 +607,9 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
     this.gotError = false;
     this.iframeWidgetEditModeInited = false;
     const config: WidgetConfig = JSON.parse(this.widget.defaultConfig);
-    config.title = this.widget.widgetName;
+    if (!config.title) {
+      config.title = this.widget.widgetName;
+    }
     this.widget.defaultConfig = JSON.stringify(config);
     this.iframe.attr('data-widget', JSON.stringify(this.widget));
     // @ts-ignore