Merge branch 'rc' into feature/add_show_total_legend_setting_to_latest-chart-widgets

application/src/main/data/json/demo/dashboards/rule_engine_statistics.json

@@ -564,7 +564,7 @@
             },
             "tooltipDateColor": "rgba(0, 0, 0, 0.76)",
             "tooltipDateInterval": true,
-            "tooltipHideZeroFalse": true,
+            "tooltipHideZeroValues": true,
             "tooltipBackgroundColor": "rgba(255, 255, 255, 0.76)",
             "tooltipBackgroundBlur": 4,
             "animation": {
@@ -978,7 +978,7 @@
             },
             "tooltipDateColor": "rgba(0, 0, 0, 0.76)",
             "tooltipDateInterval": true,
-            "tooltipHideZeroFalse": true,
+            "tooltipHideZeroValues": true,
             "tooltipBackgroundColor": "rgba(255, 255, 255, 0.76)",
             "tooltipBackgroundBlur": 4,
             "animation": {

application/src/main/data/json/system/scada_symbols/3-phase-voltage-relay-hp.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" width="400" height="400" fill="none" version="1.1" viewBox="0 0 400 400"><tb:metadata xmlns=""><![CDATA[{
   "title": "HP 3 phase voltage relay",
-  "description": "Three phase voltage relay with various states and inications.",
+  "description": "Three phase voltage relay with various states and indications.",
   "searchTags": [
     "energy",
     "power",
@@ -39,7 +39,7 @@
     },
     {
       "tag": "firstPhaseValue",
-      "stateRenderFunction": "if (ctx.values.running) {\n    element.show();\n    ctx.api.font(element, ctx.properties.currentVoltageFont, ctx.properties.currentVoltageColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.firstPhaseVoltage, 0, null, 0));\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.values.running) {\n    element.show();\n    ctx.api.font(element, ctx.properties.currentVoltageFont, ctx.properties.currentVoltageColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.firstPhaseVoltage, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));\n} else {\n    element.hide();\n}",
       "actions": null
     },
     {
@@ -49,7 +49,7 @@
     },
     {
       "tag": "secondPhaseValue",
-      "stateRenderFunction": "if (ctx.values.running) {\n    element.show();\n    ctx.api.font(element, ctx.properties.currentVoltageFont, ctx.properties.currentVoltageColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.secondPhaseVoltage, 0, null, 0));\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.values.running) {\n    element.show();\n    ctx.api.font(element, ctx.properties.currentVoltageFont, ctx.properties.currentVoltageColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.secondPhaseVoltage, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));\n} else {\n    element.hide();\n}",
       "actions": null
     },
     {
@@ -59,12 +59,12 @@
     },
     {
       "tag": "thirdPhaseValue",
-      "stateRenderFunction": "if (ctx.values.running) {\n    element.show();\n    ctx.api.font(element, ctx.properties.currentVoltageFont, ctx.properties.currentVoltageColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.thirdPhaseVoltage, 0, null, 0));\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.values.running) {\n    element.show();\n    ctx.api.font(element, ctx.properties.currentVoltageFont, ctx.properties.currentVoltageColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.thirdPhaseVoltage, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));\n} else {\n    element.hide();\n}",
       "actions": null
     },
     {
       "tag": "units",
-      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.properties.units);\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.api.unitSymbol(ctx.properties.units));\n} else {\n    element.hide();\n}",
       "actions": null
     },
     {
@@ -488,6 +488,7 @@
       "name": "{i18n:scada.symbol.units}",
       "type": "units",
       "default": "V",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },

application/src/main/data/json/system/scada_symbols/bottom-flow-meter.svg

@@ -57,7 +57,7 @@
     },
     {
       "tag": "value",
-      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, '', false);\nctx.api.text(element, value);\n",
+      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, {units: ctx.properties.valueUnits, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true});\nctx.api.text(element, value);\n",
       "actions": {
         "click": {
           "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@@ -66,7 +66,7 @@
     },
     {
       "tag": "valueUnits",
-      "stateRenderFunction": "var units = ctx.properties.valueUnits;\nctx.api.text(element, units || '');\n",
+      "stateRenderFunction": "var units = ctx.api.unitSymbol(ctx.properties.valueUnits);\nctx.api.text(element, units || '');\n",
       "actions": {
         "click": {
           "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@@ -464,8 +464,7 @@
       "type": "units",
       "default": "m³/hr",
       "fieldClass": "medium-width",
-      "disabled": false,
+      "supportsUnitConversion": true
-      "visible": true
     },
     {
       "id": "valueDecimals",

application/src/main/data/json/system/scada_symbols/conical-tank.svg

@@ -159,96 +159,51 @@
       "name": "Stand",
       "type": "switch",
       "default": false,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "tankColor",
       "name": "{i18n:scada.symbol.tank-color}",
       "type": "color",
       "default": "#E5E5E5",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "fluidColor",
       "name": "{i18n:scada.symbol.fluid-color}",
       "type": "color",
       "default": "#1EC1F480",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueBox",
       "name": "{i18n:scada.symbol.value-box}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueBoxColor",
       "name": "{i18n:scada.symbol.value-box}",
       "type": "color",
       "default": "#F3F3F3",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "valueBox",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueUnits",
       "name": "{i18n:scada.symbol.value-text}",
       "type": "units",
       "default": "gal",
-      "required": null,
       "subLabel": "{i18n:scada.symbol.units}",
-      "divider": null,
+      "supportsUnitConversion": true,
-      "fieldSuffix": null,
+      "disabled": false,
-      "disableOnProperty": "valueBox",
+      "visible": true
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueTextFont",
@@ -261,64 +216,35 @@
         "weight": "500",
         "style": "normal"
       },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "valueBox",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueTextColor",
       "name": "{i18n:scada.symbol.value-text}",
       "type": "color",
       "default": "#0000008A",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "valueBox",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "scale",
       "name": "{i18n:scada.symbol.scale}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "transparent",
       "name": "{i18n:scada.symbol.transparent-mode}",
       "type": "switch",
       "default": false,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "scale",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     }
   ]
 }]]></tb:metadata>

application/src/main/data/json/system/scada_symbols/cylindrical-tank.svg

@@ -33,7 +33,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 205;\n        var majorIntervalLength = 760 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(340, y, 372, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 330, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(352, minorY, 372, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 205;\n        var majorIntervalLength = 760 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(340, y, 372, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.valueUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 330, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(352, minorY, 372, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -312,8 +312,8 @@
       "type": "units",
       "default": "gal",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
-      "disabled": true,
+      "disabled": false,
       "visible": true
     },
     {
@@ -368,6 +368,14 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
+    },
     {
       "id": "transparent",
       "name": "{i18n:scada.symbol.transparent-mode}",
@@ -390,16 +398,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "majorFont",
       "name": "{i18n:scada.symbol.major-ticks}",

application/src/main/data/json/system/scada_symbols/dynamic-horizontal-scale-hp.svg

@@ -43,7 +43,7 @@
     },
     {
       "tag": "maxValue",
-      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.properties.maxValue);\n}",
+      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.api.convertUnitValue(ctx.properties.maxValue, ctx.properties.units).toFixed(0));\n}",
       "actions": null
     },
     {
@@ -53,7 +53,7 @@
     },
     {
       "tag": "minValue",
-      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.properties.minValue);\n}",
+      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.api.convertUnitValue(ctx.properties.minValue, ctx.properties.units).toFixed(0));\n}",
       "actions": null
     },
     {
@@ -73,12 +73,12 @@
     },
     {
       "tag": "units",
-      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.properties.units);\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.api.unitSymbol(ctx.properties.units));\n} else {\n    element.hide();\n}",
       "actions": null
     },
     {
       "tag": "value",
-      "stateRenderFunction": "if (ctx.properties.value) {\n    element.show();\n    ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, null, ctx.properties.valueDecimals));\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.value) {\n    element.show();\n    ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.value, {units: ctx.properties.units, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true}));\n} else {\n    element.hide();\n}",
       "actions": null
     },
     {
@@ -329,16 +329,8 @@
       "name": "{i18n:scada.symbol.min-max-value}",
       "type": "switch",
       "default": false,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "minValue",
@@ -347,14 +339,9 @@
       "default": 0,
       "required": true,
       "subLabel": "{i18n:scada.symbol.min-value}",
-      "divider": null,
+      "step": 1,
-      "fieldSuffix": null,
+      "disabled": false,
-      "disableOnProperty": null,
+      "visible": true
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
     },
     {
       "id": "maxValue",
@@ -363,30 +350,17 @@
       "default": 100,
       "required": true,
       "subLabel": "{i18n:scada.symbol.max-value}",
-      "divider": null,
+      "step": 1,
-      "fieldSuffix": null,
+      "disabled": false,
-      "disableOnProperty": null,
+      "visible": true
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
     },
     {
       "id": "value",
       "name": "{i18n:scada.symbol.value}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueDecimals",
@@ -395,14 +369,12 @@
       "default": 0,
       "required": true,
       "subLabel": "Decimals",
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "value",
-      "rowClass": "",
-      "fieldClass": "",
       "min": 0,
       "max": 10,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
     },
     {
       "id": "valueFont",
@@ -415,64 +387,36 @@
         "weight": "400",
         "style": "normal"
       },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "value",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueColor",
       "name": "{i18n:scada.symbol.value}",
       "type": "color",
       "default": "#002878",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "value",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "label",
       "name": "{i18n:scada.symbol.label}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "labelText",
       "name": "{i18n:scada.symbol.label}",
       "type": "text",
       "default": "Outdoor",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "label",
-      "rowClass": "",
       "fieldClass": "flex",
-      "min": null,
+      "disabled": false,
-      "max": null,
+      "visible": true
-      "step": null
     },
     {
       "id": "labelFont",
@@ -485,64 +429,35 @@
         "weight": "500",
         "style": "normal"
       },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "label",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "labelColor",
       "name": "{i18n:scada.symbol.label}",
       "type": "color",
       "default": "#000000DE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "label",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "showUnits",
       "name": "{i18n:scada.symbol.units}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "units",
       "name": "{i18n:scada.symbol.units}",
       "type": "units",
       "default": "°C",
-      "required": null,
+      "supportsUnitConversion": true,
-      "subLabel": null,
+      "disabled": false,
-      "divider": null,
+      "visible": true
-      "fieldSuffix": null,
-      "disableOnProperty": "showUnits",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "unitsFont",
@@ -555,224 +470,119 @@
         "weight": "500",
         "style": "normal"
       },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "showUnits",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "unitsColor",
       "name": "{i18n:scada.symbol.units}",
       "type": "color",
       "default": "#000000DE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "showUnits",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "arrowColor",
       "name": "{i18n:scada.symbol.arrow-color}",
       "type": "color",
       "default": "#666666",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "showTarget",
       "name": "{i18n:scada.symbol.target}",
       "type": "switch",
       "default": false,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "targetColor",
       "name": "{i18n:scada.symbol.target}",
       "type": "color",
       "default": "#DEDEDE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "showTarget",
-      "rowClass": "",
+      "disabled": true,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "showHighCriticalScale",
       "name": "{i18n:scada.symbol.show-high-critical-scale}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "showHighWarningScale",
       "name": "{i18n:scada.symbol.show-high-warning-scale}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "showLowWarningScale",
       "name": "{i18n:scada.symbol.show-low-warning-scale}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "showLowCriticalScale",
       "name": "{i18n:scada.symbol.show-low-critical-scale}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "scaleColor",
       "name": "{i18n:scada.symbol.scale-color}",
       "type": "color",
       "default": "#C8DFF7",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "defaultWarningScaleColor",
       "name": "{i18n:scada.symbol.warning-scale-color}",
       "type": "color",
       "default": "#EBEBEB",
-      "required": null,
       "subLabel": "Default",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "activeWarningScaleColor",
       "name": "{i18n:scada.symbol.warning-scale-color}",
       "type": "color",
       "default": "#FAA405",
-      "required": null,
       "subLabel": "Active",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "defaultCriticalScaleColor",
       "name": "{i18n:scada.symbol.critical-scale-color}",
       "type": "color",
       "default": "#666666",
-      "required": null,
       "subLabel": "Default",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "activeCriticalScaleColor",
       "name": "{i18n:scada.symbol.critical-scale-color}",
       "type": "color",
       "default": "#D12730",
-      "required": null,
       "subLabel": "Active",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     }
   ]
 }]]></tb:metadata>

application/src/main/data/json/system/scada_symbols/dynamic-vertical-scale-hp.svg

@@ -43,7 +43,7 @@
     },
     {
       "tag": "maxValue",
-      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.properties.maxValue);\n}",
+      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.api.convertUnitValue(ctx.properties.maxValue, ctx.properties.units).toFixed(0));\n}",
       "actions": null
     },
     {
@@ -53,7 +53,7 @@
     },
     {
       "tag": "minValue",
-      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.properties.minValue);\n}",
+      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.api.convertUnitValue(ctx.properties.minValue, ctx.properties.units).toFixed(0));\n}",
       "actions": null
     },
     {
@@ -73,12 +73,12 @@
     },
     {
       "tag": "units",
-      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.properties.units);\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.api.unitSymbol(ctx.properties.units));\n} else {\n    element.hide();\n}",
       "actions": null
     },
     {
       "tag": "value",
-      "stateRenderFunction": "if (ctx.properties.value) {\n    element.show();\n    ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, null, ctx.properties.valueDecimals));\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.value) {\n    element.show();\n    ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.value, {units: ctx.properties.units, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true}));\n} else {\n    element.hide();\n}",
       "actions": null
     },
     {
@@ -329,16 +329,8 @@
       "name": "{i18n:scada.symbol.min-max-value}",
       "type": "switch",
       "default": false,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "minValue",
@@ -347,14 +339,9 @@
       "default": 0,
       "required": true,
       "subLabel": "{i18n:scada.symbol.min-value}",
-      "divider": null,
+      "step": 1,
-      "fieldSuffix": null,
+      "disabled": false,
-      "disableOnProperty": null,
+      "visible": true
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
     },
     {
       "id": "maxValue",
@@ -363,30 +350,17 @@
       "default": 100,
       "required": true,
       "subLabel": "{i18n:scada.symbol.max-value}",
-      "divider": null,
+      "step": 1,
-      "fieldSuffix": null,
+      "disabled": false,
-      "disableOnProperty": null,
+      "visible": true
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
     },
     {
       "id": "value",
       "name": "{i18n:scada.symbol.value}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueDecimals",
@@ -395,14 +369,11 @@
       "default": 0,
       "required": true,
       "subLabel": "Decimals",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
       "min": 0,
       "max": 10,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
     },
     {
       "id": "valueFont",
@@ -415,64 +386,33 @@
         "weight": "400",
         "style": "normal"
       },
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueColor",
       "name": "{i18n:scada.symbol.value}",
       "type": "color",
       "default": "#002878",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "label",
       "name": "{i18n:scada.symbol.label}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "labelText",
       "name": "{i18n:scada.symbol.label}",
       "type": "text",
       "default": "Outdoor",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
       "fieldClass": "flex",
-      "min": null,
+      "disabled": false,
-      "max": null,
+      "visible": true
-      "step": null
     },
     {
       "id": "labelFont",
@@ -485,64 +425,34 @@
         "weight": "500",
         "style": "normal"
       },
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "labelColor",
       "name": "{i18n:scada.symbol.label}",
       "type": "color",
       "default": "#000000DE",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "showUnits",
       "name": "{i18n:scada.symbol.units}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "units",
       "name": "{i18n:scada.symbol.units}",
       "type": "units",
       "default": "°C",
-      "required": null,
+      "required": false,
-      "subLabel": null,
+      "supportsUnitConversion": true,
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "unitsFont",
@@ -555,224 +465,117 @@
         "weight": "500",
         "style": "normal"
       },
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "unitsColor",
       "name": "{i18n:scada.symbol.units}",
       "type": "color",
       "default": "#000000DE",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "arrowColor",
       "name": "{i18n:scada.symbol.arrow-color}",
       "type": "color",
       "default": "#666666",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "showTarget",
       "name": "{i18n:scada.symbol.target}",
       "type": "switch",
       "default": false,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "targetColor",
       "name": "{i18n:scada.symbol.target}",
       "type": "color",
       "default": "#DEDEDE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "showTarget",
-      "rowClass": "",
+      "disabled": true,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "showHighCriticalScale",
       "name": "{i18n:scada.symbol.show-high-critical-scale}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "showHighWarningScale",
       "name": "{i18n:scada.symbol.show-high-warning-scale}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "showLowWarningScale",
       "name": "{i18n:scada.symbol.show-low-warning-scale}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "showLowCriticalScale",
       "name": "{i18n:scada.symbol.show-low-critical-scale}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "scaleColor",
       "name": "{i18n:scada.symbol.scale-color}",
       "type": "color",
       "default": "#C8DFF7",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "defaultWarningScaleColor",
       "name": "{i18n:scada.symbol.warning-scale-color}",
       "type": "color",
       "default": "#EBEBEB",
-      "required": null,
       "subLabel": "Default",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "activeWarningScaleColor",
       "name": "{i18n:scada.symbol.warning-scale-color}",
       "type": "color",
       "default": "#FAA405",
-      "required": null,
       "subLabel": "Active",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "defaultCriticalScaleColor",
       "name": "{i18n:scada.symbol.critical-scale-color}",
       "type": "color",
       "default": "#666666",
-      "required": null,
       "subLabel": "Default",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "activeCriticalScaleColor",
       "name": "{i18n:scada.symbol.critical-scale-color}",
       "type": "color",
       "default": "#D12730",
-      "required": null,
       "subLabel": "Active",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     }
   ]
 }]]></tb:metadata>

application/src/main/data/json/system/scada_symbols/elevated-tank.svg

@@ -34,7 +34,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 265;\n        var majorIntervalLength = 895 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(825, y, 857, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 815, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(837, minorY, 857, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 265;\n        var majorIntervalLength = 895 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(825, y, 857, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.valueUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 815, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(837, minorY, 857, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -308,7 +308,7 @@
       "type": "units",
       "default": "gal",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },
@@ -373,6 +373,15 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disableOnProperty": "scale",
+      "disabled": false,
+      "visible": true
+    },
     {
       "id": "majorIntervals",
       "name": "{i18n:scada.symbol.major-ticks}",
@@ -386,16 +395,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "majorFont",
       "name": "{i18n:scada.symbol.major-ticks}",

application/src/main/data/json/system/scada_symbols/energy-meter-hp.svg

@@ -38,12 +38,12 @@
     },
     {
       "tag": "units",
-      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.properties.units);\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.api.unitSymbol(ctx.properties.units));\n} else {\n    element.hide();\n}",
       "actions": null
     },
     {
       "tag": "value",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.measured, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.measured, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
       "actions": null
     },
     {
@@ -353,6 +353,7 @@
       "name": "{i18n:scada.symbol.label}",
       "type": "text",
       "default": "T1",
+      "disableOnProperty": "showLabel",
       "fieldClass": "medium-width",
       "disabled": false,
       "visible": true
@@ -368,6 +369,7 @@
         "weight": "400",
         "style": "normal"
       },
+      "disableOnProperty": "showLabel",
       "disabled": false,
       "visible": true
     },
@@ -376,6 +378,7 @@
       "name": "{i18n:scada.symbol.label}",
       "type": "color",
       "default": "#000",
+      "disableOnProperty": "showLabel",
       "disabled": false,
       "visible": true
     },
@@ -392,6 +395,7 @@
       "name": "{i18n:scada.symbol.units}",
       "type": "units",
       "default": "kWh",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },
@@ -406,6 +410,7 @@
         "weight": "500",
         "style": "normal"
       },
+      "disableOnProperty": "showUnits",
       "disabled": false,
       "visible": true
     },
@@ -414,6 +419,7 @@
       "name": "{i18n:scada.symbol.units}",
       "type": "color",
       "default": "#000",
+      "disableOnProperty": "showUnits",
       "disabled": false,
       "visible": true
     },

application/src/main/data/json/system/scada_symbols/four-rate-energy-meter-hp.svg

@@ -38,7 +38,7 @@
     },
     {
       "tag": "export-rate",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.exportValueFont, ctx.properties.exportValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.exportRate, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.exportValueFont, ctx.properties.exportValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.exportRate, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
       "actions": null
     },
     {
@@ -48,7 +48,7 @@
     },
     {
       "tag": "night-rate",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.nightValueFont, ctx.properties.nightValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.nightRate, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.nightValueFont, ctx.properties.nightValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.nightRate, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
       "actions": null
     },
     {
@@ -58,7 +58,7 @@
     },
     {
       "tag": "off-peak-rate",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.offPeakValueFont, ctx.properties.offPeakValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.offPeakRate, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.offPeakValueFont, ctx.properties.offPeakValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.offPeakRate, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
       "actions": null
     },
     {
@@ -68,12 +68,12 @@
     },
     {
       "tag": "peak-rate",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.peakValueFont, ctx.properties.peakValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.peakRate, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.peakValueFont, ctx.properties.peakValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.peakRate, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
       "actions": null
     },
     {
       "tag": "units",
-      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.properties.units);\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.api.unitSymbol(ctx.properties.units));\n} else {\n    element.hide();\n}",
       "actions": null
     },
     {
@@ -533,6 +533,7 @@
       "group": "{i18n:scada.symbol.off-peak-rate}",
       "type": "text",
       "default": "T1",
+      "disableOnProperty": "showOffPeakLabel",
       "fieldClass": "medium-width",
       "disabled": false,
       "visible": true
@@ -549,6 +550,7 @@
         "weight": "normal",
         "style": "normal"
       },
+      "disableOnProperty": "showOffPeakLabel",
       "disabled": false,
       "visible": true
     },
@@ -558,6 +560,7 @@
       "group": "{i18n:scada.symbol.off-peak-rate}",
       "type": "color",
       "default": "#000000",
+      "disableOnProperty": "showOffPeakLabel",
       "disabled": false,
       "visible": true
     },
@@ -609,6 +612,7 @@
       "group": "{i18n:scada.symbol.night-rate}",
       "type": "text",
       "default": "T2",
+      "disableOnProperty": "showNightLabel",
       "fieldClass": "medium-width",
       "disabled": false,
       "visible": true
@@ -625,6 +629,7 @@
         "weight": "normal",
         "style": "normal"
       },
+      "disableOnProperty": "showNightLabel",
       "disabled": false,
       "visible": true
     },
@@ -634,6 +639,7 @@
       "group": "{i18n:scada.symbol.night-rate}",
       "type": "color",
       "default": "#000",
+      "disableOnProperty": "showNightLabel",
       "disabled": false,
       "visible": true
     },
@@ -685,6 +691,7 @@
       "group": "{i18n:scada.symbol.peak-rate}",
       "type": "text",
       "default": "T3",
+      "disableOnProperty": "showPeakLabel",
       "fieldClass": "medium-width",
       "disabled": false,
       "visible": true
@@ -701,6 +708,7 @@
         "weight": "normal",
         "style": "normal"
       },
+      "disableOnProperty": "showPeakLabel",
       "disabled": false,
       "visible": true
     },
@@ -710,6 +718,7 @@
       "group": "{i18n:scada.symbol.peak-rate}",
       "type": "color",
       "default": "#000",
+      "disableOnProperty": "showPeakLabel",
       "disabled": false,
       "visible": true
     },
@@ -761,6 +770,7 @@
       "group": "{i18n:scada.symbol.export-rate}",
       "type": "text",
       "default": "Export",
+      "disableOnProperty": "showExportLabel",
       "fieldClass": "medium-width",
       "disabled": false,
       "visible": true
@@ -777,6 +787,7 @@
         "weight": "normal",
         "style": "normal"
       },
+      "disableOnProperty": "showExportLabel",
       "disabled": false,
       "visible": true
     },
@@ -786,6 +797,7 @@
       "group": "{i18n:scada.symbol.export-rate}",
       "type": "color",
       "default": "#000",
+      "disableOnProperty": "showExportLabel",
       "disabled": false,
       "visible": true
     },
@@ -835,6 +847,7 @@
       "name": "{i18n:scada.symbol.units}",
       "type": "units",
       "default": "kWh",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },
@@ -849,6 +862,7 @@
         "weight": "normal",
         "style": "normal"
       },
+      "disableOnProperty": "showUnits",
       "disabled": false,
       "visible": true
     },
@@ -857,6 +871,7 @@
       "name": "{i18n:scada.symbol.units}",
       "type": "color",
       "default": "#000",
+      "disableOnProperty": "showUnits",
       "disabled": false,
       "visible": true
     }

application/src/main/data/json/system/scada_symbols/heat-pump-hp.svg

@@ -62,7 +62,7 @@
     },
     {
       "tag": "value-text",
-      "stateRenderFunction": "var valueTextFont = ctx.properties.valueTextFont;\nvar valueTextColor = ctx.properties.valueTextColor;\nvar units = ctx.properties.valueUnits ? ctx.properties.units : null;\nvar currentVolume = ctx.values.temperature;\nvar decimals = Math.floor(ctx.properties.temperatureStep) === ctx.properties.temperatureStep;\nvar valueText = ctx.api.formatValue(currentVolume, decimals ? 0 : 1, units, !decimals);\nctx.api.font(element, valueTextFont, valueTextColor);\nctx.api.text(element, valueText);",
+      "stateRenderFunction": "var valueTextFont = ctx.properties.valueTextFont;\nvar valueTextColor = ctx.properties.valueTextColor;\nvar currentVolume = ctx.values.temperature;\nvar decimals = Math.floor(ctx.properties.temperatureStep) === ctx.properties.temperatureStep;\nvar valueText = ctx.api.formatValue(currentVolume, {units: ctx.properties.units, decimals: decimals ? 0 : 1, ignoreUnitSymbol: !ctx.properties.valueUnits});\nctx.api.font(element, valueTextFont, valueTextColor);\nctx.api.text(element, valueText);",
       "actions": null
     },
     {
@@ -366,80 +366,49 @@
       "name": "{i18n:scada.symbol.colors}",
       "type": "color",
       "default": "#FFFFFF",
-      "required": null,
       "subLabel": "{i18n:scada.symbol.running}",
       "divider": true,
-      "fieldSuffix": null,
+      "disabled": false,
-      "disableOnProperty": null,
+      "visible": true
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "stoppedColor",
       "name": "{i18n:scada.symbol.colors}",
       "type": "color",
       "default": "#666666",
-      "required": null,
       "subLabel": "{i18n:scada.symbol.stopped}",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "warningColor",
       "name": "{i18n:scada.symbol.alarm-colors}",
       "type": "color",
       "default": "#FAA405",
-      "required": null,
       "subLabel": "{i18n:scada.symbol.warning}",
       "divider": true,
-      "fieldSuffix": null,
+      "disabled": false,
-      "disableOnProperty": null,
+      "visible": true
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "criticalColor",
       "name": "{i18n:scada.symbol.alarm-colors}",
       "type": "color",
       "default": "#D12730",
-      "required": null,
       "subLabel": "{i18n:scada.symbol.critical}",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "minTemperature",
       "name": "{i18n:scada.symbol.temperature}",
       "type": "number",
       "default": 10,
-      "required": null,
       "subLabel": "Min",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
       "rowClass": "column-xs",
-      "fieldClass": "",
+      "step": 1,
-      "min": null,
+      "disabled": false,
-      "max": null,
+      "visible": true
-      "step": 1
     },
     {
       "id": "maxTemperature",
@@ -448,14 +417,9 @@
       "default": 45,
       "required": true,
       "subLabel": "Max",
-      "divider": null,
+      "step": 1,
-      "fieldSuffix": null,
+      "disabled": false,
-      "disableOnProperty": null,
+      "visible": true
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
     },
     {
       "id": "temperatureStep",
@@ -463,31 +427,17 @@
       "type": "number",
       "default": 1,
       "required": true,
-      "subLabel": null,
+      "step": 0.5,
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 0.5
     },
     {
       "id": "valueTextColor",
       "name": "{i18n:scada.symbol.value-text}",
       "type": "color",
       "default": "#002878",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueTextFont",
@@ -500,64 +450,33 @@
         "weight": "500",
         "style": "normal"
       },
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueUnits",
       "name": "{i18n:scada.symbol.value-units}",
       "type": "switch",
       "default": false,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "units",
       "name": "{i18n:scada.symbol.value-units}",
       "type": "units",
       "default": "°C",
-      "required": null,
+      "supportsUnitConversion": true,
-      "subLabel": null,
+      "disabled": false,
-      "divider": null,
+      "visible": true
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueBoxBackground",
       "name": "{i18n:scada.symbol.value-box-background}",
       "type": "color",
       "default": "#FFFFFF",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     }
   ]
 }]]></tb:metadata>

application/src/main/data/json/system/scada_symbols/horizontal-inline-flow-meter.svg

@@ -57,7 +57,7 @@
     },
     {
       "tag": "value",
-      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, '', false);\nctx.api.text(element, value);\n",
+      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, {units: ctx.properties.valueUnits, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true});\nctx.api.text(element, value);\n",
       "actions": {
         "click": {
           "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@@ -66,7 +66,7 @@
     },
     {
       "tag": "valueUnits",
-      "stateRenderFunction": "var units = ctx.properties.valueUnits;\nctx.api.text(element, units || '');\n",
+      "stateRenderFunction": "var units = ctx.api.unitSymbol(ctx.properties.valueUnits);\nctx.api.text(element, units || '');\n",
       "actions": {
         "click": {
           "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@@ -464,6 +464,7 @@
       "type": "units",
       "default": "m³/hr",
       "fieldClass": "medium-width",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },

application/src/main/data/json/system/scada_symbols/horizontal-tank-hp.svg

@@ -38,7 +38,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 3;\n        var majorIntervalLength = 592 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(208, y, 240, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            if (i === 0) {\n                majorTickText.attr({x: 198, y: y + 10, 'text-anchor': 'end', class: 'majorTickText'});\n            } else if (i === majorIntervals) {\n                majorTickText.attr({x: 198, y: y - 5, 'text-anchor': 'end', class: 'majorTickText'});\n            } else {\n                majorTickText.attr({x: 198, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            }\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(220, minorY, 240, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 3;\n        var majorIntervalLength = 592 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(208, y, 240, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.majorUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            if (i === 0) {\n                majorTickText.attr({x: 198, y: y + 10, 'text-anchor': 'end', class: 'majorTickText'});\n            } else if (i === majorIntervals) {\n                majorTickText.attr({x: 198, y: y - 5, 'text-anchor': 'end', class: 'majorTickText'});\n            } else {\n                majorTickText.attr({x: 198, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            }\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(220, minorY, 240, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -346,6 +346,24 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
+    },
+    {
+      "id": "majorUnits",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "units",
+      "subLabel": "{i18n:scada.symbol.units}",
+      "divider": false,
+      "supportsUnitConversion": true,
+      "disabled": false,
+      "visible": true
+    },
     {
       "id": "majorIntervals",
       "name": "{i18n:scada.symbol.major-ticks}",
@@ -359,16 +377,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "majorFont",
       "name": "{i18n:scada.symbol.major-ticks}",

application/src/main/data/json/system/scada_symbols/horizontal-tank.svg

@@ -33,7 +33,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 17;\n        var majorIntervalLength = 568 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(715, y, 747, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 705, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(727, minorY, 747, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 17;\n        var majorIntervalLength = 568 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(715, y, 747, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.valueUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 705, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(727, minorY, 747, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -312,7 +312,7 @@
       "type": "units",
       "default": "gal",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },
@@ -368,6 +368,14 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
+    },
     {
       "id": "transparent",
       "name": "{i18n:scada.symbol.transparent-mode}",
@@ -390,16 +398,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "majorFont",
       "name": "{i18n:scada.symbol.major-ticks}",

application/src/main/data/json/system/scada_symbols/large-conical-tank.svg

@@ -160,96 +160,51 @@
       "name": "Stand",
       "type": "switch",
       "default": false,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "tankColor",
       "name": "{i18n:scada.symbol.tank-color}",
       "type": "color",
       "default": "#E5E5E5",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "fluidColor",
       "name": "{i18n:scada.symbol.fluid-color}",
       "type": "color",
       "default": "#1EC1F480",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueBox",
       "name": "{i18n:scada.symbol.value-box}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueBoxColor",
       "name": "{i18n:scada.symbol.value-box}",
       "type": "color",
       "default": "#F3F3F3",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "valueBox",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueUnits",
       "name": "{i18n:scada.symbol.value-text}",
       "type": "units",
       "default": "gal",
-      "required": null,
       "subLabel": "{i18n:scada.symbol.units}",
-      "divider": null,
+      "supportsUnitConversion": true,
-      "fieldSuffix": null,
+      "disabled": false,
-      "disableOnProperty": "valueBox",
+      "visible": true
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueTextFont",
@@ -262,64 +217,35 @@
         "weight": "500",
         "style": "normal"
       },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "valueBox",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueTextColor",
       "name": "{i18n:scada.symbol.value-text}",
       "type": "color",
       "default": "#0000008A",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "valueBox",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "scale",
       "name": "{i18n:scada.symbol.scale}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "transparent",
       "name": "{i18n:scada.symbol.transparent-mode}",
       "type": "switch",
       "default": false,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "scale",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     }
   ]
 }]]></tb:metadata>

application/src/main/data/json/system/scada_symbols/large-cylindrical-tank.svg

@@ -33,7 +33,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 60;\n        var majorIntervalLength = 910 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(656, y, 688, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 646, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(668, minorY, 688, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 60;\n        var majorIntervalLength = 910 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(656, y, 688, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.valueUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 646, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(668, minorY, 688, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -312,7 +312,7 @@
       "type": "units",
       "default": "gal",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },
@@ -368,6 +368,14 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
+    },
     {
       "id": "transparent",
       "name": "{i18n:scada.symbol.transparent-mode}",
@@ -390,16 +398,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "majorFont",
       "name": "{i18n:scada.symbol.major-ticks}",

application/src/main/data/json/system/scada_symbols/large-stand-cylindrical-tank.svg

@@ -34,7 +34,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 60;\n        var majorIntervalLength = 910 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(656, y, 688, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 646, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(668, minorY, 688, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 60;\n        var majorIntervalLength = 910 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(656, y, 688, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.valueUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 646, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(668, minorY, 688, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -313,7 +313,7 @@
       "type": "units",
       "default": "gal",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },
@@ -365,7 +365,17 @@
           "value": false,
           "label": "Absolute"
         }
-      ]
+      ],
+      "disabled": false,
+      "visible": true
+    },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
     },
     {
       "id": "transparent",
@@ -389,16 +399,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "majorFont",
       "name": "{i18n:scada.symbol.major-ticks}",

application/src/main/data/json/system/scada_symbols/large-stand-vertical-tank.svg

@@ -34,7 +34,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 203;\n        var majorIntervalLength = 763 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(676, y, 708, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 666, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(688, minorY, 708, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 203;\n        var majorIntervalLength = 763 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(676, y, 708, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.valueUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 666, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(688, minorY, 708, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -313,7 +313,7 @@
       "type": "units",
       "default": "gal",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },
@@ -369,6 +369,14 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
+    },
     {
       "id": "transparent",
       "name": "{i18n:scada.symbol.transparent-mode}",
@@ -391,16 +399,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "majorFont",
       "name": "{i18n:scada.symbol.major-ticks}",

application/src/main/data/json/system/scada_symbols/large-vertical-tank.svg

@@ -33,7 +33,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 203;\n        var majorIntervalLength = 763 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(676, y, 708, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 666, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(688, minorY, 708, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 203;\n        var majorIntervalLength = 763 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(676, y, 708, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.valueUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 666, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(688, minorY, 708, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -312,7 +312,7 @@
       "type": "units",
       "default": "gal",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },
@@ -368,6 +368,14 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
+    },
     {
       "id": "transparent",
       "name": "{i18n:scada.symbol.transparent-mode}",
@@ -390,16 +398,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "majorFont",
       "name": "{i18n:scada.symbol.major-ticks}",

application/src/main/data/json/system/scada_symbols/left-flow-meter.svg

@@ -57,7 +57,7 @@
     },
     {
       "tag": "value",
-      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, '', false);\nctx.api.text(element, value);\n",
+      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, {units: ctx.properties.valueUnits, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true});\nctx.api.text(element, value);\n",
       "actions": {
         "click": {
           "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@@ -66,7 +66,7 @@
     },
     {
       "tag": "valueUnits",
-      "stateRenderFunction": "var units = ctx.properties.valueUnits;\nctx.api.text(element, units || '');\n",
+      "stateRenderFunction": "var units = ctx.api.unitSymbol(ctx.properties.valueUnits);\nctx.api.text(element, units || '');\n",
       "actions": {
         "click": {
           "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@@ -463,7 +463,8 @@
       "name": "{i18n:scada.symbol.units}",
       "type": "units",
       "default": "m³/hr",
-      "fieldClass": "medium-width"
+      "fieldClass": "medium-width",
+      "supportsUnitConversion": true
     },
     {
       "id": "valueDecimals",

application/src/main/data/json/system/scada_symbols/left-heat-pump.svg

@@ -72,7 +72,7 @@
     },
     {
       "tag": "value-text",
-      "stateRenderFunction": "var valueTextFont = ctx.properties.valueTextFont;\nvar valueTextColor = ctx.properties.valueTextColor;\nvar units = ctx.properties.valueUnits ? ctx.properties.units : null;\nvar currentVolume = ctx.values.temperature;\nvar decimals = Math.floor(ctx.properties.temperatureStep) === ctx.properties.temperatureStep;\nvar valueText = ctx.api.formatValue(currentVolume, decimals ? 0 : 1, units, !decimals);\nctx.api.font(element, valueTextFont, valueTextColor);\nctx.api.text(element, valueText);",
+      "stateRenderFunction": "var valueTextFont = ctx.properties.valueTextFont;\nvar valueTextColor = ctx.properties.valueTextColor;\nvar currentVolume = ctx.values.temperature;\nvar decimals = Math.floor(ctx.properties.temperatureStep) === ctx.properties.temperatureStep;\nvar valueText = ctx.api.formatValue(currentVolume, {units: ctx.properties.units, decimals: decimals ? 0 : 1, ignoreUnitSymbol: !ctx.properties.valueUnits});\nctx.api.font(element, valueTextFont, valueTextColor);\nctx.api.text(element, valueText);",
       "actions": null
     }
   ],
@@ -432,13 +432,11 @@
       "required": true,
       "subLabel": "Min",
       "divider": true,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
       "rowClass": "column-xs",
-      "fieldClass": "",
       "min": 0,
-      "max": null,
+      "step": 1,
-      "step": 1
+      "disabled": false,
+      "visible": true
     },
     {
       "id": "maxTemperature",
@@ -447,14 +445,10 @@
       "default": 45,
       "required": true,
       "subLabel": "Max",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
       "min": 0,
-      "max": null,
+      "step": 1,
-      "step": 1
+      "disabled": false,
+      "visible": true
     },
     {
       "id": "temperatureStep",
@@ -462,31 +456,17 @@
       "type": "number",
       "default": 1,
       "required": true,
-      "subLabel": null,
+      "step": 0.5,
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 0.5
     },
     {
       "id": "valueTextColor",
       "name": "{i18n:scada.symbol.value-text}",
       "type": "color",
       "default": "#000000C2",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueTextFont",
@@ -499,192 +479,101 @@
         "weight": "500",
         "style": "normal"
       },
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueUnits",
       "name": "{i18n:scada.symbol.value-units}",
       "type": "switch",
       "default": false,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "units",
       "name": "{i18n:scada.symbol.value-units}",
       "type": "units",
       "default": "°C",
-      "required": null,
+      "supportsUnitConversion": true,
-      "subLabel": null,
+      "disabled": false,
-      "divider": null,
+      "visible": true
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueBoxBackground",
       "name": "{i18n:scada.symbol.value-box-background}",
       "type": "color",
       "default": "#FFFFFF",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "powerButtonBackground",
       "name": "{i18n:scada.symbol.power-button-background}",
       "type": "color",
       "default": "#1ABB48",
-      "required": null,
       "subLabel": "Enabled",
       "divider": true,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
       "rowClass": "column-xs",
-      "fieldClass": "",
+      "disabled": false,
-      "min": null,
+      "visible": true
-      "max": null,
-      "step": null
     },
     {
       "id": "disabledPowerButtonBackground",
       "name": "{i18n:scada.symbol.power-button-background}",
       "type": "color",
       "default": "#FFFFFF",
-      "required": null,
       "subLabel": "Disabled",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "runningColor",
       "name": "{i18n:scada.symbol.running-color}",
       "type": "color",
       "default": "#1C943E",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "stoppedColor",
       "name": "{i18n:scada.symbol.stopped-color}",
       "type": "color",
       "default": "#696969",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "warningColor",
       "name": "{i18n:scada.symbol.warning-color}",
       "type": "color",
       "default": "#FAA405",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "criticalColor",
       "name": "{i18n:scada.symbol.critical-color}",
       "type": "color",
       "default": "#D12730",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "heatPumpColor",
       "name": "{i18n:scada.symbol.heat-pump-color}",
       "type": "color",
       "default": "#E5E5E5",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "pipeColor",
       "name": "{i18n:scada.symbol.pipe-color}",
       "type": "color",
       "default": "#FFFFFF",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     }
   ]
 }]]></tb:metadata>

application/src/main/data/json/system/scada_symbols/meter.svg

@@ -51,7 +51,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "var scaleSet = element.remember('scaleSet');\nif (!scaleSet) {\n    element.remember('scaleSet', true);\n    element.clear();\n    \n    var majorIntervals = ctx.properties.majorIntervals;\n    var minorIntervals = ctx.properties.minorIntervals;\n    var minValue = ctx.properties.minValue;\n    var maxValue = ctx.properties.maxValue;\n    \n    var start = 11;\n    var end = ctx.properties.valueBox ? 328 : 365;\n    var majorIntervalLength = end / majorIntervals;\n    var minorIntervalLength = majorIntervalLength / minorIntervals;\n    element.add(ctx.svg.line(63, end+11, 63, 11).stroke({ width: 1 }).attr({class: 'majorTick'}));\n    for (var i = 0; i < majorIntervals+1; i++) {\n        var y = start + i * majorIntervalLength;\n        var line = ctx.svg.line(51, y, 63, y).stroke({ width: 1 }).attr({class: 'majorTick'});\n        element.add(line);\n        var majorText = (maxValue - ((maxValue - (minValue)) / (majorIntervals) * i)).toFixed(0);\n        var majorTickText = ctx.svg.text(majorText);\n        majorTickText.attr({x: 45, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n        majorTickText.first().attr({'dominant-baseline': 'middle'});\n        element.add(majorTickText);\n        if (i < majorIntervals) {\n            drawMinorTicks(y, minorIntervals, minorIntervalLength);\n        }\n    }\n}\n\nvar majorFont = ctx.properties.majorFont;\nvar majorColor = ctx.properties.majorColor;\nvar minorColor = ctx.properties.minorColor;\nif (ctx.values.critical) {\n    majorColor = ctx.properties.majorCriticalColor;\n    minorColor = ctx.properties.minorCriticalColor;\n} else if (ctx.values.warning) {\n    majorColor = ctx.properties.minorWarningColor;\n    minorColor = ctx.properties.minorWarningColor;\n}\n\nvar majorTicks = element.find('line.majorTick');\nmajorTicks.forEach(t => t.attr({stroke: majorColor}));\n\nvar majorTicksText = element.find('text.majorTickText');\nctx.api.font(majorTicksText, majorFont, majorColor);\n\nvar minorTicks = element.find('line.minorTick');\nminorTicks.forEach(t => t.attr({stroke: minorColor}));\n\nvar elementCriticalAnimation = element.remember('criticalAnimation');\nvar criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\nif (elementCriticalAnimation !== criticalAnimation) {\n    element.remember('criticalAnimation', criticalAnimation);\n    if (criticalAnimation) {\n        ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n    } else {\n        ctx.api.resetCssAnimation(element);\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(57, minorY, 63, minorY).stroke({ width: 1 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "var scaleSet = element.remember('scaleSet');\nif (!scaleSet) {\n    element.remember('scaleSet', true);\n    element.clear();\n    \n    var majorIntervals = ctx.properties.majorIntervals;\n    var minorIntervals = ctx.properties.minorIntervals;\n    var minValue = ctx.api.convertUnitValue(ctx.properties.minValue, ctx.properties.valueUnits);\n    var maxValue = ctx.api.convertUnitValue(ctx.properties.maxValue, ctx.properties.valueUnits);\n    \n    var start = 11;\n    var end = ctx.properties.valueBox ? 328 : 365;\n    var majorIntervalLength = end / majorIntervals;\n    var minorIntervalLength = majorIntervalLength / minorIntervals;\n    element.add(ctx.svg.line(63, end+11, 63, 11).stroke({ width: 1 }).attr({class: 'majorTick'}));\n    for (var i = 0; i < majorIntervals+1; i++) {\n        var y = start + i * majorIntervalLength;\n        var line = ctx.svg.line(51, y, 63, y).stroke({ width: 1 }).attr({class: 'majorTick'});\n        element.add(line);\n        var majorText = (maxValue - ((maxValue - (minValue)) / (majorIntervals) * i)).toFixed(0);\n        if (ctx.properties.enableUnitScale) {\n            majorText = majorText + ctx.api.unitSymbol(ctx.properties.valueUnits);\n        }\n        var majorTickText = ctx.svg.text(majorText);\n        majorTickText.attr({x: 45, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n        majorTickText.first().attr({'dominant-baseline': 'middle'});\n        element.add(majorTickText);\n        if (i < majorIntervals) {\n            drawMinorTicks(y, minorIntervals, minorIntervalLength);\n        }\n    }\n}\n\nvar majorFont = ctx.properties.majorFont;\nvar majorColor = ctx.properties.majorColor;\nvar minorColor = ctx.properties.minorColor;\nif (ctx.values.critical) {\n    majorColor = ctx.properties.majorCriticalColor;\n    minorColor = ctx.properties.minorCriticalColor;\n} else if (ctx.values.warning) {\n    majorColor = ctx.properties.minorWarningColor;\n    minorColor = ctx.properties.minorWarningColor;\n}\n\nvar majorTicks = element.find('line.majorTick');\nmajorTicks.forEach(t => t.attr({stroke: majorColor}));\n\nvar majorTicksText = element.find('text.majorTickText');\nctx.api.font(majorTicksText, majorFont, majorColor);\n\nvar minorTicks = element.find('line.minorTick');\nminorTicks.forEach(t => t.attr({stroke: minorColor}));\n\nvar elementCriticalAnimation = element.remember('criticalAnimation');\nvar criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\nif (elementCriticalAnimation !== criticalAnimation) {\n    element.remember('criticalAnimation', criticalAnimation);\n    if (criticalAnimation) {\n        ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n    } else {\n        ctx.api.resetCssAnimation(element);\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(57, minorY, 63, minorY).stroke({ width: 1 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -433,7 +433,7 @@
       "type": "units",
       "default": "%",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },
@@ -493,6 +493,14 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
+    },
     {
       "id": "majorIntervals",
       "name": "{i18n:scada.symbol.major-ticks}",
@@ -510,7 +518,7 @@
       "name": "{i18n:scada.symbol.major-ticks}",
       "type": "font",
       "default": {
-        "size": 12,
+        "size": 10,
         "sizeUnit": "px",
         "family": "Roboto",
         "weight": "500",

application/src/main/data/json/system/scada_symbols/pool-hp.svg

@@ -38,7 +38,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 3;\n        var majorIntervalLength = 792 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(298, y, 330, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            if (i === 0) {\n                majorTickText.attr({x: 288, y: y + 10, 'text-anchor': 'end', class: 'majorTickText'});\n            } else if (i === majorIntervals) {\n                majorTickText.attr({x: 288, y: y - 5, 'text-anchor': 'end', class: 'majorTickText'});\n            } else {\n                majorTickText.attr({x: 288, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            }\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(310, minorY, 330, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 3;\n        var majorIntervalLength = 792 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(298, y, 330, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.majorUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            if (i === 0) {\n                majorTickText.attr({x: 288, y: y + 10, 'text-anchor': 'end', class: 'majorTickText'});\n            } else if (i === majorIntervals) {\n                majorTickText.attr({x: 288, y: y - 5, 'text-anchor': 'end', class: 'majorTickText'});\n            } else {\n                majorTickText.attr({x: 288, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            }\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(310, minorY, 330, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -346,6 +346,24 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
+    },
+    {
+      "id": "majorUnits",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "units",
+      "subLabel": "{i18n:scada.symbol.units}",
+      "divider": false,
+      "supportsUnitConversion": true,
+      "disabled": false,
+      "visible": true
+    },
     {
       "id": "majorIntervals",
       "name": "{i18n:scada.symbol.major-ticks}",
@@ -394,16 +412,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "minorColor",
       "name": "{i18n:scada.symbol.minor-ticks}",

application/src/main/data/json/system/scada_symbols/pool.svg

@@ -148,80 +148,43 @@
       "name": "{i18n:scada.symbol.tank-color}",
       "type": "color",
       "default": "#E5E5E5",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "fluidColor",
       "name": "{i18n:scada.symbol.fluid-color}",
       "type": "color",
       "default": "#1EC1F480",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueBox",
       "name": "{i18n:scada.symbol.value-box}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueBoxColor",
       "name": "{i18n:scada.symbol.value-box}",
       "type": "color",
       "default": "#F3F3F3",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "valueBox",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueUnits",
       "name": "{i18n:scada.symbol.value-text}",
       "type": "units",
       "default": "gal",
-      "required": null,
       "subLabel": "{i18n:scada.symbol.units}",
-      "divider": null,
+      "supportsUnitConversion": true,
-      "fieldSuffix": null,
+      "disabled": false,
-      "disableOnProperty": "valueBox",
+      "visible": true
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueTextFont",
@@ -234,48 +197,26 @@
         "weight": "500",
         "style": "normal"
       },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "valueBox",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueTextColor",
       "name": "{i18n:scada.symbol.value-text}",
       "type": "color",
       "default": "#0000008A",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "valueBox",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "transparent",
       "name": "{i18n:scada.symbol.transparent-mode}",
       "type": "switch",
       "default": false,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     }
   ]
 }]]></tb:metadata>

application/src/main/data/json/system/scada_symbols/right-flow-meter.svg

@@ -57,7 +57,7 @@
     },
     {
       "tag": "value",
-      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, '', false);\nctx.api.text(element, value);\n",
+      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, {units: ctx.properties.valueUnits, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true});\nctx.api.text(element, value);\n",
       "actions": {
         "click": {
           "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@@ -66,7 +66,7 @@
     },
     {
       "tag": "valueUnits",
-      "stateRenderFunction": "var units = ctx.properties.valueUnits;\nctx.api.text(element, units || '');\n",
+      "stateRenderFunction": "var units = ctx.api.unitSymbol(ctx.properties.valueUnits);\nctx.api.text(element, units || '');\n",
       "actions": {
         "click": {
           "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@@ -463,7 +463,8 @@
       "name": "{i18n:scada.symbol.units}",
       "type": "units",
       "default": "m³/hr",
-      "fieldClass": "medium-width"
+      "fieldClass": "medium-width",
+      "supportsUnitConversion": true
     },
     {
       "id": "valueDecimals",

application/src/main/data/json/system/scada_symbols/right-heat-pump.svg

@@ -72,7 +72,7 @@
     },
     {
       "tag": "value-text",
-      "stateRenderFunction": "var valueTextFont = ctx.properties.valueTextFont;\nvar valueTextColor = ctx.properties.valueTextColor;\nvar units = ctx.properties.valueUnits ? ctx.properties.units : null;\nvar currentVolume = ctx.values.temperature;\nvar decimals = Math.floor(ctx.properties.temperatureStep) === ctx.properties.temperatureStep;\nvar valueText = ctx.api.formatValue(currentVolume, decimals ? 0 : 1, units, !decimals);\nctx.api.font(element, valueTextFont, valueTextColor);\nctx.api.text(element, valueText);",
+      "stateRenderFunction": "var valueTextFont = ctx.properties.valueTextFont;\nvar valueTextColor = ctx.properties.valueTextColor;\nvar currentVolume = ctx.values.temperature;\nvar decimals = Math.floor(ctx.properties.temperatureStep) === ctx.properties.temperatureStep;\nvar valueText = ctx.api.formatValue(currentVolume, {units: ctx.properties.units, decimals: decimals ? 0 : 1, ignoreUnitSymbol: !ctx.properties.valueUnits});\nctx.api.font(element, valueTextFont, valueTextColor);\nctx.api.text(element, valueText);",
       "actions": null
     }
   ],
@@ -432,13 +432,11 @@
       "required": true,
       "subLabel": "Min",
       "divider": true,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
       "rowClass": "column-xs",
-      "fieldClass": "",
       "min": 0,
-      "max": null,
+      "step": 1,
-      "step": 1
+      "disabled": false,
+      "visible": true
     },
     {
       "id": "maxTemperature",
@@ -447,14 +445,10 @@
       "default": 45,
       "required": true,
       "subLabel": "Max",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
       "min": 0,
-      "max": null,
+      "step": 1,
-      "step": 1
+      "disabled": false,
+      "visible": true
     },
     {
       "id": "temperatureStep",
@@ -462,31 +456,17 @@
       "type": "number",
       "default": 1,
       "required": true,
-      "subLabel": null,
+      "step": 0.5,
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 0.5
     },
     {
       "id": "valueTextColor",
       "name": "{i18n:scada.symbol.value-text}",
       "type": "color",
       "default": "#000000C2",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueTextFont",
@@ -499,192 +479,101 @@
         "weight": "500",
         "style": "normal"
       },
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueUnits",
       "name": "{i18n:scada.symbol.value-units}",
       "type": "switch",
       "default": false,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "units",
       "name": "{i18n:scada.symbol.value-units}",
       "type": "units",
       "default": "°C",
-      "required": null,
+      "supportsUnitConversion": true,
-      "subLabel": null,
+      "disabled": false,
-      "divider": null,
+      "visible": true
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueBoxBackground",
       "name": "{i18n:scada.symbol.value-box-background}",
       "type": "color",
       "default": "#FFFFFF",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "powerButtonBackground",
       "name": "{i18n:scada.symbol.power-button-background}",
       "type": "color",
       "default": "#1ABB48",
-      "required": null,
       "subLabel": "Enabled",
       "divider": true,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
       "rowClass": "column-xs",
-      "fieldClass": "",
+      "disabled": false,
-      "min": null,
+      "visible": true
-      "max": null,
-      "step": null
     },
     {
       "id": "disabledPowerButtonBackground",
       "name": "{i18n:scada.symbol.power-button-background}",
       "type": "color",
       "default": "#FFFFFF",
-      "required": null,
       "subLabel": "Disabled",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "runningColor",
       "name": "{i18n:scada.symbol.running-color}",
       "type": "color",
       "default": "#1C943E",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "stoppedColor",
       "name": "{i18n:scada.symbol.stopped-color}",
       "type": "color",
       "default": "#696969",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "warningColor",
       "name": "{i18n:scada.symbol.warning-color}",
       "type": "color",
       "default": "#FAA405",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "criticalColor",
       "name": "{i18n:scada.symbol.critical-color}",
       "type": "color",
       "default": "#D12730",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "heatPumpColor",
       "name": "{i18n:scada.symbol.heat-pump-color}",
       "type": "color",
       "default": "#E5E5E5",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "pipeColor",
       "name": "{i18n:scada.symbol.pipe-color}",
       "type": "color",
       "default": "#FFFFFF",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     }
   ]
 }]]></tb:metadata>

application/src/main/data/json/system/scada_symbols/short-vertical-tank-hp.svg

@@ -38,7 +38,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 3;\n        var majorIntervalLength = 594 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(170, y, 202, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            if (i === 0) {\n                majorTickText.attr({x: 160, y: y + 10, 'text-anchor': 'end', class: 'majorTickText'});\n            } else if (i === majorIntervals) {\n                majorTickText.attr({x: 160, y: y - 5, 'text-anchor': 'end', class: 'majorTickText'});\n            } else {\n                majorTickText.attr({x: 160, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            }\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(182, minorY, 202, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 3;\n        var majorIntervalLength = 594 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(170, y, 202, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.majorUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            if (i === 0) {\n                majorTickText.attr({x: 160, y: y + 10, 'text-anchor': 'end', class: 'majorTickText'});\n            } else if (i === majorIntervals) {\n                majorTickText.attr({x: 160, y: y - 5, 'text-anchor': 'end', class: 'majorTickText'});\n            } else {\n                majorTickText.attr({x: 160, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            }\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(182, minorY, 202, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -346,6 +346,22 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
+    },
+    {
+      "id": "majorUnits",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "units",
+      "subLabel": "{i18n:scada.symbol.units}",
+      "divider": false,
+      "supportsUnitConversion": true
+    },
     {
       "id": "majorIntervals",
       "name": "{i18n:scada.symbol.major-ticks}",
@@ -359,16 +375,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "majorFont",
       "name": "{i18n:scada.symbol.major-ticks}",

application/src/main/data/json/system/scada_symbols/simple-horizontal-scale-hp.svg

@@ -43,7 +43,7 @@
     },
     {
       "tag": "maxValue",
-      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.properties.maxValue);\n}",
+      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.api.convertUnitValue(ctx.properties.maxValue, ctx.properties.units).toFixed(0));\n}",
       "actions": null
     },
     {
@@ -53,7 +53,7 @@
     },
     {
       "tag": "minValue",
-      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.properties.minValue);\n}",
+      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.api.convertUnitValue(ctx.properties.minValue, ctx.properties.units).toFixed(0));\n}",
       "actions": null
     },
     {
@@ -73,12 +73,12 @@
     },
     {
       "tag": "units",
-      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.properties.units);\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.api.unitSymbol(ctx.properties.units));\n} else {\n    element.hide();\n}",
       "actions": null
     },
     {
       "tag": "value",
-      "stateRenderFunction": "if (ctx.properties.value) {\n    element.show();\n    ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, null, ctx.properties.valueDecimals));\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.value) {\n    element.show();\n    ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.value, {units: ctx.properties.units, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true}));\n} else {\n    element.hide();\n}",
       "actions": null
     },
     {
@@ -193,16 +193,8 @@
       "name": "{i18n:scada.symbol.min-max-value}",
       "type": "switch",
       "default": false,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "minValue",
@@ -211,14 +203,9 @@
       "default": 0,
       "required": true,
       "subLabel": "{i18n:scada.symbol.min-value}",
-      "divider": null,
+      "step": 1,
-      "fieldSuffix": null,
+      "disabled": false,
-      "disableOnProperty": null,
+      "visible": true
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
     },
     {
       "id": "maxValue",
@@ -227,158 +214,89 @@
       "default": 100,
       "required": true,
       "subLabel": "{i18n:scada.symbol.max-value}",
-      "divider": null,
+      "step": 1,
-      "fieldSuffix": null,
+      "disabled": false,
-      "disableOnProperty": null,
+      "visible": true
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
     },
     {
       "id": "showHighCriticalScale",
       "name": "{i18n:scada.symbol.high-critical-scale}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "highCriticalScale",
       "name": "{i18n:scada.symbol.high-critical-scale}",
       "type": "number",
       "default": 85,
-      "required": null,
-      "subLabel": "",
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "showHighCriticalScale",
-      "rowClass": "",
+      "step": 1,
-      "fieldClass": "",
+      "disabled": false,
-      "min": null,
+      "visible": true
-      "max": null,
-      "step": 1
     },
     {
       "id": "showHighWarningScale",
       "name": "{i18n:scada.symbol.high-warning-scale}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "highWarningScale",
       "name": "{i18n:scada.symbol.high-warning-scale}",
       "type": "number",
       "default": 70,
-      "required": null,
-      "subLabel": "",
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "showHighWarningScale",
-      "rowClass": "",
+      "step": 1,
-      "fieldClass": "",
+      "disabled": false,
-      "min": null,
+      "visible": true
-      "max": null,
-      "step": 1
     },
     {
       "id": "showLowWarningScale",
       "name": "{i18n:scada.symbol.low-warning-scale}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "lowWarningScale",
       "name": "{i18n:scada.symbol.low-warning-scale}",
       "type": "number",
       "default": 30,
-      "required": null,
-      "subLabel": "",
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "showLowWarningScale",
-      "rowClass": "",
+      "step": 1,
-      "fieldClass": "",
+      "disabled": false,
-      "min": null,
+      "visible": true
-      "max": null,
-      "step": 1
     },
     {
       "id": "showLowCriticalScale",
       "name": "{i18n:scada.symbol.low-critical-scale}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "lowCriticalScale",
       "name": "{i18n:scada.symbol.low-critical-scale}",
       "type": "number",
       "default": 15,
-      "required": null,
-      "subLabel": "",
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "showLowCriticalScale",
-      "rowClass": "",
+      "step": 1,
-      "fieldClass": "",
+      "disabled": false,
-      "min": null,
+      "visible": true
-      "max": null,
-      "step": 1
     },
     {
       "id": "value",
       "name": "{i18n:scada.symbol.value}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueDecimals",
@@ -387,14 +305,12 @@
       "default": 0,
       "required": true,
       "subLabel": "Decimals",
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "value",
-      "rowClass": "",
-      "fieldClass": "",
       "min": 0,
       "max": 10,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
     },
     {
       "id": "valueFont",
@@ -407,64 +323,36 @@
         "weight": "400",
         "style": "normal"
       },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "value",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueColor",
       "name": "{i18n:scada.symbol.value}",
       "type": "color",
       "default": "#002878",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "value",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "label",
       "name": "{i18n:scada.symbol.label}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "labelText",
       "name": "{i18n:scada.symbol.label}",
       "type": "text",
       "default": "Outdoor",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "label",
-      "rowClass": "",
       "fieldClass": "flex",
-      "min": null,
+      "disabled": false,
-      "max": null,
+      "visible": true
-      "step": null
     },
     {
       "id": "labelFont",
@@ -477,64 +365,35 @@
         "weight": "500",
         "style": "normal"
       },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "label",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "labelColor",
       "name": "{i18n:scada.symbol.label}",
       "type": "color",
       "default": "#000000DE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "label",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "showUnits",
       "name": "{i18n:scada.symbol.units}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "units",
       "name": "{i18n:scada.symbol.units}",
       "type": "units",
       "default": "°C",
-      "required": null,
+      "supportsUnitConversion": true,
-      "subLabel": null,
+      "disabled": false,
-      "divider": null,
+      "visible": true
-      "fieldSuffix": null,
-      "disableOnProperty": "showUnits",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "unitsFont",
@@ -547,160 +406,87 @@
         "weight": "500",
         "style": "normal"
       },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "showUnits",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "unitsColor",
       "name": "{i18n:scada.symbol.units}",
       "type": "color",
       "default": "#000000DE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "showUnits",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "arrowColor",
       "name": "{i18n:scada.symbol.arrow-color}",
       "type": "color",
       "default": "#666666",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "showTarget",
       "name": "{i18n:scada.symbol.target}",
       "type": "switch",
       "default": false,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "targetColor",
       "name": "{i18n:scada.symbol.target}",
       "type": "color",
       "default": "#DEDEDE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "showTarget",
-      "rowClass": "",
+      "disabled": true,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "scaleColor",
       "name": "{i18n:scada.symbol.scale-color}",
       "type": "color",
       "default": "#C8DFF7",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "defaultWarningScaleColor",
       "name": "{i18n:scada.symbol.warning-scale-color}",
       "type": "color",
       "default": "#EBEBEB",
-      "required": null,
       "subLabel": "Default",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "activeWarningScaleColor",
       "name": "{i18n:scada.symbol.warning-scale-color}",
       "type": "color",
       "default": "#FAA405",
-      "required": null,
       "subLabel": "Active",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "defaultCriticalScaleColor",
       "name": "{i18n:scada.symbol.critical-scale-color}",
       "type": "color",
       "default": "#666666",
-      "required": null,
       "subLabel": "Default",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "activeCriticalScaleColor",
       "name": "{i18n:scada.symbol.critical-scale-color}",
       "type": "color",
       "default": "#D12730",
-      "required": null,
       "subLabel": "Active",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     }
   ]
 }]]></tb:metadata>

application/src/main/data/json/system/scada_symbols/simple-vertical-scale-hp.svg

@@ -43,7 +43,7 @@
     },
     {
       "tag": "maxValue",
-      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.properties.maxValue);\n}",
+      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.api.convertUnitValue(ctx.properties.maxValue, ctx.properties.units).toFixed(0));\n}",
       "actions": null
     },
     {
@@ -53,7 +53,7 @@
     },
     {
       "tag": "minValue",
-      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.properties.minValue);\n}",
+      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.api.convertUnitValue(ctx.properties.minValue, ctx.properties.units).toFixed(0));\n}",
       "actions": null
     },
     {
@@ -73,12 +73,12 @@
     },
     {
       "tag": "units",
-      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.properties.units);\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.api.unitSymbol(ctx.properties.units));\n} else {\n    element.hide();\n}",
       "actions": null
     },
     {
       "tag": "value",
-      "stateRenderFunction": "if (ctx.properties.value) {\n    element.show();\n    ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, null, ctx.properties.valueDecimals));\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.value) {\n    element.show();\n    ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.value, {units: ctx.properties.units, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true}));\n} else {\n    element.hide();\n}",
       "actions": null
     },
     {
@@ -193,16 +193,8 @@
       "name": "{i18n:scada.symbol.min-max-value}",
       "type": "switch",
       "default": false,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "minValue",
@@ -211,14 +203,9 @@
       "default": 0,
       "required": true,
       "subLabel": "{i18n:scada.symbol.min-value}",
-      "divider": null,
+      "step": 1,
-      "fieldSuffix": null,
+      "disabled": false,
-      "disableOnProperty": null,
+      "visible": true
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
     },
     {
       "id": "maxValue",
@@ -227,158 +214,89 @@
       "default": 100,
       "required": true,
       "subLabel": "{i18n:scada.symbol.max-value}",
-      "divider": null,
+      "step": 1,
-      "fieldSuffix": null,
+      "disabled": false,
-      "disableOnProperty": null,
+      "visible": true
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
     },
     {
       "id": "showHighCriticalScale",
       "name": "{i18n:scada.symbol.high-critical-scale}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "highCriticalScale",
       "name": "{i18n:scada.symbol.high-critical-scale}",
       "type": "number",
       "default": 85,
-      "required": null,
-      "subLabel": "",
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "showHighCriticalScale",
-      "rowClass": "",
+      "step": 1,
-      "fieldClass": "",
+      "disabled": false,
-      "min": null,
+      "visible": true
-      "max": null,
-      "step": 1
     },
     {
       "id": "showHighWarningScale",
       "name": "{i18n:scada.symbol.high-warning-scale}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "highWarningScale",
       "name": "{i18n:scada.symbol.high-warning-scale}",
       "type": "number",
       "default": 70,
-      "required": null,
-      "subLabel": "",
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "showHighWarningScale",
-      "rowClass": "",
+      "step": 1,
-      "fieldClass": "",
+      "disabled": false,
-      "min": null,
+      "visible": true
-      "max": null,
-      "step": 1
     },
     {
       "id": "showLowWarningScale",
       "name": "{i18n:scada.symbol.low-warning-scale}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "lowWarningScale",
       "name": "{i18n:scada.symbol.low-warning-scale}",
       "type": "number",
       "default": 30,
-      "required": null,
-      "subLabel": "",
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "showLowWarningScale",
-      "rowClass": "",
+      "step": 1,
-      "fieldClass": "",
+      "disabled": false,
-      "min": null,
+      "visible": true
-      "max": null,
-      "step": 1
     },
     {
       "id": "showLowCriticalScale",
       "name": "{i18n:scada.symbol.low-critical-scale}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "lowCriticalScale",
       "name": "{i18n:scada.symbol.low-critical-scale}",
       "type": "number",
       "default": 15,
-      "required": null,
-      "subLabel": "",
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "showLowCriticalScale",
-      "rowClass": "",
+      "step": 1,
-      "fieldClass": "",
+      "disabled": false,
-      "min": null,
+      "visible": true
-      "max": null,
-      "step": 1
     },
     {
       "id": "value",
       "name": "{i18n:scada.symbol.value}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueDecimals",
@@ -387,14 +305,12 @@
       "default": 0,
       "required": true,
       "subLabel": "Decimals",
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "value",
-      "rowClass": "",
-      "fieldClass": "",
       "min": 0,
       "max": 10,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
     },
     {
       "id": "valueFont",
@@ -407,64 +323,36 @@
         "weight": "400",
         "style": "normal"
       },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "value",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "valueColor",
       "name": "{i18n:scada.symbol.value}",
       "type": "color",
       "default": "#002878",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "value",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "label",
       "name": "{i18n:scada.symbol.label}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "labelText",
       "name": "{i18n:scada.symbol.label}",
       "type": "text",
       "default": "Outdoor",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "label",
-      "rowClass": "",
       "fieldClass": "flex",
-      "min": null,
+      "disabled": false,
-      "max": null,
+      "visible": true
-      "step": null
     },
     {
       "id": "labelFont",
@@ -477,64 +365,35 @@
         "weight": "500",
         "style": "normal"
       },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "label",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "labelColor",
       "name": "{i18n:scada.symbol.label}",
       "type": "color",
       "default": "#000000DE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "label",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "showUnits",
       "name": "{i18n:scada.symbol.units}",
       "type": "switch",
       "default": true,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "units",
       "name": "{i18n:scada.symbol.units}",
       "type": "units",
       "default": "°C",
-      "required": null,
+      "supportsUnitConversion": true,
-      "subLabel": null,
+      "disabled": false,
-      "divider": null,
+      "visible": true
-      "fieldSuffix": null,
-      "disableOnProperty": "showUnits",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "unitsFont",
@@ -547,160 +406,87 @@
         "weight": "500",
         "style": "normal"
       },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "showUnits",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "unitsColor",
       "name": "{i18n:scada.symbol.units}",
       "type": "color",
       "default": "#000000DE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "showUnits",
-      "rowClass": "",
+      "disabled": false,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "arrowColor",
       "name": "{i18n:scada.symbol.arrow-color}",
       "type": "color",
       "default": "#666666",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "showTarget",
       "name": "{i18n:scada.symbol.target}",
       "type": "switch",
       "default": false,
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "targetColor",
       "name": "{i18n:scada.symbol.target}",
       "type": "color",
       "default": "#DEDEDE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
       "disableOnProperty": "showTarget",
-      "rowClass": "",
+      "disabled": true,
-      "fieldClass": "",
+      "visible": true
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "scaleColor",
       "name": "{i18n:scada.symbol.scale-color}",
       "type": "color",
       "default": "#C8DFF7",
-      "required": null,
+      "disabled": false,
-      "subLabel": null,
+      "visible": true
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "defaultWarningScaleColor",
       "name": "{i18n:scada.symbol.warning-scale-color}",
       "type": "color",
       "default": "#EBEBEB",
-      "required": null,
       "subLabel": "Default",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "activeWarningScaleColor",
       "name": "{i18n:scada.symbol.warning-scale-color}",
       "type": "color",
       "default": "#FAA405",
-      "required": null,
       "subLabel": "Active",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "defaultCriticalScaleColor",
       "name": "{i18n:scada.symbol.critical-scale-color}",
       "type": "color",
       "default": "#666666",
-      "required": null,
       "subLabel": "Default",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     },
     {
       "id": "activeCriticalScaleColor",
       "name": "{i18n:scada.symbol.critical-scale-color}",
       "type": "color",
       "default": "#D12730",
-      "required": null,
       "subLabel": "Active",
-      "divider": null,
+      "disabled": false,
-      "fieldSuffix": null,
+      "visible": true
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
     }
   ]
 }]]></tb:metadata>

application/src/main/data/json/system/scada_symbols/small-cylindrical-tank.svg

@@ -34,7 +34,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 45;\n        var majorIntervalLength = 525 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(340, y, 372, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 330, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(352, minorY, 372, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 45;\n        var majorIntervalLength = 525 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(340, y, 372, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.valueUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 330, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(352, minorY, 372, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -304,7 +304,7 @@
       "type": "color",
       "default": "#F3F3F3",
       "disableOnProperty": "valueBox",
-      "disabled": true,
+      "disabled": false,
       "visible": true
     },
     {
@@ -313,8 +313,8 @@
       "type": "units",
       "default": "gal",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
-      "disabled": true,
+      "disabled": false,
       "visible": true
     },
     {
@@ -329,7 +329,7 @@
         "style": "normal"
       },
       "disableOnProperty": "valueBox",
-      "disabled": true,
+      "disabled": false,
       "visible": true
     },
     {
@@ -338,7 +338,7 @@
       "type": "color",
       "default": "#0000008A",
       "disableOnProperty": "valueBox",
-      "disabled": true,
+      "disabled": false,
       "visible": true
     },
     {
@@ -369,6 +369,14 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
+    },
     {
       "id": "transparent",
       "name": "{i18n:scada.symbol.transparent-mode}",
@@ -391,16 +399,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "majorFont",
       "name": "{i18n:scada.symbol.major-ticks}",

application/src/main/data/json/system/scada_symbols/small-left-meter.svg

@@ -51,7 +51,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "var scaleSet = element.remember('scaleSet');\nif (!scaleSet) {\n    element.remember('scaleSet', true);\n    element.clear();\n    \n    var majorIntervals = ctx.properties.majorIntervals;\n    var minorIntervals = ctx.properties.minorIntervals;\n    var minValue = ctx.properties.minValue;\n    var maxValue = ctx.properties.maxValue;\n    \n    var start = 11;\n    var end = ctx.properties.valueBox ? 134 : 167;\n    var majorIntervalLength = end / majorIntervals;\n    var minorIntervalLength = majorIntervalLength / minorIntervals;\n    element.add(ctx.svg.line(50, end+11, 50, 11).stroke({ width: 1 }).attr({class: 'majorTick'}));\n    for (var i = 0; i < majorIntervals+1; i++) {\n        var y = start + i * majorIntervalLength;\n        var line = ctx.svg.line(38, y, 50, y).stroke({ width: 1 }).attr({class: 'majorTick'});\n        element.add(line);\n        var majorText = (maxValue - ((maxValue - (minValue)) / (majorIntervals) * i)).toFixed(0);\n        var majorTickText = ctx.svg.text(majorText);\n        majorTickText.attr({x: 32, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n        majorTickText.first().attr({'dominant-baseline': 'middle'});\n        element.add(majorTickText);\n        if (i < majorIntervals) {\n            drawMinorTicks(y, minorIntervals, minorIntervalLength);\n        }\n    }\n}\n\nvar majorFont = ctx.properties.majorFont;\nvar majorColor = ctx.properties.majorColor;\nvar minorColor = ctx.properties.minorColor;\nif (ctx.values.critical) {\n    majorColor = ctx.properties.majorCriticalColor;\n    minorColor = ctx.properties.minorCriticalColor;\n} else if (ctx.values.warning) {\n    majorColor = ctx.properties.minorWarningColor;\n    minorColor = ctx.properties.minorWarningColor;\n}\n\nvar majorTicks = element.find('line.majorTick');\nmajorTicks.forEach(t => t.attr({stroke: majorColor}));\n\nvar majorTicksText = element.find('text.majorTickText');\nctx.api.font(majorTicksText, majorFont, majorColor);\n\nvar minorTicks = element.find('line.minorTick');\nminorTicks.forEach(t => t.attr({stroke: minorColor}));\n\nvar elementCriticalAnimation = element.remember('criticalAnimation');\nvar criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\nif (elementCriticalAnimation !== criticalAnimation) {\n    element.remember('criticalAnimation', criticalAnimation);\n    if (criticalAnimation) {\n        ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n    } else {\n        ctx.api.resetCssAnimation(element);\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(44, minorY, 50, minorY).stroke({ width: 1 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "var scaleSet = element.remember('scaleSet');\nif (!scaleSet) {\n    element.remember('scaleSet', true);\n    element.clear();\n    \n    var majorIntervals = ctx.properties.majorIntervals;\n    var minorIntervals = ctx.properties.minorIntervals;\n    var minValue = ctx.api.convertUnitValue(ctx.properties.minValue, ctx.properties.valueUnits);\n    var maxValue = ctx.api.convertUnitValue(ctx.properties.maxValue, ctx.properties.valueUnits);\n    \n    var start = 11;\n    var end = ctx.properties.valueBox ? 134 : 167;\n    var majorIntervalLength = end / majorIntervals;\n    var minorIntervalLength = majorIntervalLength / minorIntervals;\n    element.add(ctx.svg.line(50, end+11, 50, 11).stroke({ width: 1 }).attr({class: 'majorTick'}));\n    for (var i = 0; i < majorIntervals+1; i++) {\n        var y = start + i * majorIntervalLength;\n        var line = ctx.svg.line(38, y, 50, y).stroke({ width: 1 }).attr({class: 'majorTick'});\n        element.add(line);\n        var majorText = (maxValue - ((maxValue - (minValue)) / (majorIntervals) * i)).toFixed(0);\n        if (ctx.properties.enableUnitScale) {\n            majorText = majorText + ctx.api.unitSymbol(ctx.properties.valueUnits);\n        }\n        var majorTickText = ctx.svg.text(majorText);\n        majorTickText.attr({x: 32, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n        majorTickText.first().attr({'dominant-baseline': 'middle'});\n        element.add(majorTickText);\n        if (i < majorIntervals) {\n            drawMinorTicks(y, minorIntervals, minorIntervalLength);\n        }\n    }\n}\n\nvar majorFont = ctx.properties.majorFont;\nvar majorColor = ctx.properties.majorColor;\nvar minorColor = ctx.properties.minorColor;\nif (ctx.values.critical) {\n    majorColor = ctx.properties.majorCriticalColor;\n    minorColor = ctx.properties.minorCriticalColor;\n} else if (ctx.values.warning) {\n    majorColor = ctx.properties.minorWarningColor;\n    minorColor = ctx.properties.minorWarningColor;\n}\n\nvar majorTicks = element.find('line.majorTick');\nmajorTicks.forEach(t => t.attr({stroke: majorColor}));\n\nvar majorTicksText = element.find('text.majorTickText');\nctx.api.font(majorTicksText, majorFont, majorColor);\n\nvar minorTicks = element.find('line.minorTick');\nminorTicks.forEach(t => t.attr({stroke: minorColor}));\n\nvar elementCriticalAnimation = element.remember('criticalAnimation');\nvar criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\nif (elementCriticalAnimation !== criticalAnimation) {\n    element.remember('criticalAnimation', criticalAnimation);\n    if (criticalAnimation) {\n        ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n    } else {\n        ctx.api.resetCssAnimation(element);\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(44, minorY, 50, minorY).stroke({ width: 1 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -433,7 +433,7 @@
       "type": "units",
       "default": "%",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },
@@ -493,6 +493,14 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
+    },
     {
       "id": "majorIntervals",
       "name": "{i18n:scada.symbol.major-ticks}",
@@ -510,7 +518,7 @@
       "name": "{i18n:scada.symbol.major-ticks}",
       "type": "font",
       "default": {
-        "size": 12,
+        "size": 10,
         "sizeUnit": "px",
         "family": "Roboto",
         "weight": "500",

application/src/main/data/json/system/scada_symbols/small-meter.svg

@@ -51,7 +51,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "var scaleSet = element.remember('scaleSet');\nif (!scaleSet) {\n    element.remember('scaleSet', true);\n    element.clear();\n    \n    var majorIntervals = ctx.properties.majorIntervals;\n    var minorIntervals = ctx.properties.minorIntervals;\n    var minValue = ctx.properties.minValue;\n    var maxValue = ctx.properties.maxValue;\n    \n    var start = 11;\n    var end = ctx.properties.valueBox ? 132 : 167;\n    var majorIntervalLength = end / majorIntervals;\n    var minorIntervalLength = majorIntervalLength / minorIntervals;\n    element.add(ctx.svg.line(63, end+11, 63, 11).stroke({ width: 1 }).attr({class: 'majorTick'}));\n    for (var i = 0; i < majorIntervals+1; i++) {\n        var y = start + i * majorIntervalLength;\n        var line = ctx.svg.line(51, y, 63, y).stroke({ width: 1 }).attr({class: 'majorTick'});\n        element.add(line);\n        var majorText = (maxValue - ((maxValue - (minValue)) / (majorIntervals) * i)).toFixed(0);\n        var majorTickText = ctx.svg.text(majorText);\n        majorTickText.attr({x: 45, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n        majorTickText.first().attr({'dominant-baseline': 'middle'});\n        element.add(majorTickText);\n        if (i < majorIntervals) {\n            drawMinorTicks(y, minorIntervals, minorIntervalLength);\n        }\n    }\n}\n\nvar majorFont = ctx.properties.majorFont;\nvar majorColor = ctx.properties.majorColor;\nvar minorColor = ctx.properties.minorColor;\nif (ctx.values.critical) {\n    majorColor = ctx.properties.majorCriticalColor;\n    minorColor = ctx.properties.minorCriticalColor;\n} else if (ctx.values.warning) {\n    majorColor = ctx.properties.minorWarningColor;\n    minorColor = ctx.properties.minorWarningColor;\n}\n\nvar majorTicks = element.find('line.majorTick');\nmajorTicks.forEach(t => t.attr({stroke: majorColor}));\n\nvar majorTicksText = element.find('text.majorTickText');\nctx.api.font(majorTicksText, majorFont, majorColor);\n\nvar minorTicks = element.find('line.minorTick');\nminorTicks.forEach(t => t.attr({stroke: minorColor}));\n\nvar elementCriticalAnimation = element.remember('criticalAnimation');\nvar criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\nif (elementCriticalAnimation !== criticalAnimation) {\n    element.remember('criticalAnimation', criticalAnimation);\n    if (criticalAnimation) {\n        ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n    } else {\n        ctx.api.resetCssAnimation(element);\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(57, minorY, 63, minorY).stroke({ width: 1 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "var scaleSet = element.remember('scaleSet');\nif (!scaleSet) {\n    element.remember('scaleSet', true);\n    element.clear();\n    \n    var majorIntervals = ctx.properties.majorIntervals;\n    var minorIntervals = ctx.properties.minorIntervals;\n    var minValue = ctx.api.convertUnitValue(ctx.properties.minValue, ctx.properties.valueUnits);\n    var maxValue = ctx.api.convertUnitValue(ctx.properties.maxValue, ctx.properties.valueUnits);\n    \n    var start = 11;\n    var end = ctx.properties.valueBox ? 132 : 167;\n    var majorIntervalLength = end / majorIntervals;\n    var minorIntervalLength = majorIntervalLength / minorIntervals;\n    element.add(ctx.svg.line(63, end+11, 63, 11).stroke({ width: 1 }).attr({class: 'majorTick'}));\n    for (var i = 0; i < majorIntervals+1; i++) {\n        var y = start + i * majorIntervalLength;\n        var line = ctx.svg.line(51, y, 63, y).stroke({ width: 1 }).attr({class: 'majorTick'});\n        element.add(line);\n        var majorText = (maxValue - ((maxValue - (minValue)) / (majorIntervals) * i)).toFixed(0);\n        if (ctx.properties.enableUnitScale) {\n            majorText = majorText + ctx.api.unitSymbol(ctx.properties.valueUnits);\n        }\n        var majorTickText = ctx.svg.text(majorText);\n        majorTickText.attr({x: 45, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n        majorTickText.first().attr({'dominant-baseline': 'middle'});\n        element.add(majorTickText);\n        if (i < majorIntervals) {\n            drawMinorTicks(y, minorIntervals, minorIntervalLength);\n        }\n    }\n}\n\nvar majorFont = ctx.properties.majorFont;\nvar majorColor = ctx.properties.majorColor;\nvar minorColor = ctx.properties.minorColor;\nif (ctx.values.critical) {\n    majorColor = ctx.properties.majorCriticalColor;\n    minorColor = ctx.properties.minorCriticalColor;\n} else if (ctx.values.warning) {\n    majorColor = ctx.properties.minorWarningColor;\n    minorColor = ctx.properties.minorWarningColor;\n}\n\nvar majorTicks = element.find('line.majorTick');\nmajorTicks.forEach(t => t.attr({stroke: majorColor}));\n\nvar majorTicksText = element.find('text.majorTickText');\nctx.api.font(majorTicksText, majorFont, majorColor);\n\nvar minorTicks = element.find('line.minorTick');\nminorTicks.forEach(t => t.attr({stroke: minorColor}));\n\nvar elementCriticalAnimation = element.remember('criticalAnimation');\nvar criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\nif (elementCriticalAnimation !== criticalAnimation) {\n    element.remember('criticalAnimation', criticalAnimation);\n    if (criticalAnimation) {\n        ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n    } else {\n        ctx.api.resetCssAnimation(element);\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(57, minorY, 63, minorY).stroke({ width: 1 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -424,7 +424,7 @@
         "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';"
       },
       "disableOnProperty": "valueBox",
-      "disabled": true,
+      "disabled": false,
       "visible": true
     },
     {
@@ -433,8 +433,8 @@
       "type": "units",
       "default": "%",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
-      "disabled": true,
+      "disabled": false,
       "visible": true
     },
     {
@@ -449,7 +449,7 @@
         "style": "normal"
       },
       "disableOnProperty": "valueBox",
-      "disabled": true,
+      "disabled": false,
       "visible": true
     },
     {
@@ -490,7 +490,15 @@
         "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';"
       },
       "disableOnProperty": "valueBox",
-      "disabled": true,
+      "disabled": false,
+      "visible": true
+    },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
       "visible": true
     },
     {
@@ -510,14 +518,12 @@
       "name": "{i18n:scada.symbol.major-ticks}",
       "type": "font",
       "default": {
-        "size": 12,
+        "size": 10,
         "sizeUnit": "px",
         "family": "Roboto",
         "weight": "500",
         "style": "normal"
-      },
+      }
-      "disabled": false,
-      "visible": true
     },
     {
       "id": "majorColor",

application/src/main/data/json/system/scada_symbols/small-right-center.svg

@@ -51,7 +51,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "var scaleSet = element.remember('scaleSet');\nif (!scaleSet) {\n    element.remember('scaleSet', true);\n    element.clear();\n    \n    var majorIntervals = ctx.properties.majorIntervals;\n    var minorIntervals = ctx.properties.minorIntervals;\n    var minValue = ctx.properties.minValue;\n    var maxValue = ctx.properties.maxValue;\n    \n    var start = 11;\n    var end = ctx.properties.valueBox ? 134 : 167;\n    var majorIntervalLength = end / majorIntervals;\n    var minorIntervalLength = majorIntervalLength / minorIntervals;\n    element.add(ctx.svg.line(73, end+11, 73, 11).stroke({ width: 1 }).attr({class: 'majorTick'}));\n    for (var i = 0; i < majorIntervals+1; i++) {\n        var y = start + i * majorIntervalLength;\n        var line = ctx.svg.line(61, y, 73, y).stroke({ width: 1 }).attr({class: 'majorTick'});\n        element.add(line);\n        var majorText = (maxValue - ((maxValue - (minValue)) / (majorIntervals) * i)).toFixed(0);\n        var majorTickText = ctx.svg.text(majorText);\n        majorTickText.attr({x: 55, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n        majorTickText.first().attr({'dominant-baseline': 'middle'});\n        element.add(majorTickText);\n        if (i < majorIntervals) {\n            drawMinorTicks(y, minorIntervals, minorIntervalLength);\n        }\n    }\n}\n\nvar majorFont = ctx.properties.majorFont;\nvar majorColor = ctx.properties.majorColor;\nvar minorColor = ctx.properties.minorColor;\nif (ctx.values.critical) {\n    majorColor = ctx.properties.majorCriticalColor;\n    minorColor = ctx.properties.minorCriticalColor;\n} else if (ctx.values.warning) {\n    majorColor = ctx.properties.minorWarningColor;\n    minorColor = ctx.properties.minorWarningColor;\n}\n\nvar majorTicks = element.find('line.majorTick');\nmajorTicks.forEach(t => t.attr({stroke: majorColor}));\n\nvar majorTicksText = element.find('text.majorTickText');\nctx.api.font(majorTicksText, majorFont, majorColor);\n\nvar minorTicks = element.find('line.minorTick');\nminorTicks.forEach(t => t.attr({stroke: minorColor}));\n\nvar elementCriticalAnimation = element.remember('criticalAnimation');\nvar criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\nif (elementCriticalAnimation !== criticalAnimation) {\n    element.remember('criticalAnimation', criticalAnimation);\n    if (criticalAnimation) {\n        ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n    } else {\n        ctx.api.resetCssAnimation(element);\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(67, minorY, 73, minorY).stroke({ width: 1 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "var scaleSet = element.remember('scaleSet');\nif (!scaleSet) {\n    element.remember('scaleSet', true);\n    element.clear();\n    \n    var majorIntervals = ctx.properties.majorIntervals;\n    var minorIntervals = ctx.properties.minorIntervals;\n    var minValue = ctx.api.convertUnitValue(ctx.properties.minValue, ctx.properties.valueUnits);\n    var maxValue = ctx.api.convertUnitValue(ctx.properties.maxValue, ctx.properties.valueUnits);\n    \n    var start = 11;\n    var end = ctx.properties.valueBox ? 134 : 167;\n    var majorIntervalLength = end / majorIntervals;\n    var minorIntervalLength = majorIntervalLength / minorIntervals;\n    element.add(ctx.svg.line(73, end+11, 73, 11).stroke({ width: 1 }).attr({class: 'majorTick'}));\n    for (var i = 0; i < majorIntervals+1; i++) {\n        var y = start + i * majorIntervalLength;\n        var line = ctx.svg.line(61, y, 73, y).stroke({ width: 1 }).attr({class: 'majorTick'});\n        element.add(line);\n        var majorText = (maxValue - ((maxValue - (minValue)) / (majorIntervals) * i)).toFixed(0);\n        if (ctx.properties.enableUnitScale) {\n            majorText = majorText + ctx.api.unitSymbol(ctx.properties.valueUnits);\n        }\n        var majorTickText = ctx.svg.text(majorText);\n        majorTickText.attr({x: 55, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n        majorTickText.first().attr({'dominant-baseline': 'middle'});\n        element.add(majorTickText);\n        if (i < majorIntervals) {\n            drawMinorTicks(y, minorIntervals, minorIntervalLength);\n        }\n    }\n}\n\nvar majorFont = ctx.properties.majorFont;\nvar majorColor = ctx.properties.majorColor;\nvar minorColor = ctx.properties.minorColor;\nif (ctx.values.critical) {\n    majorColor = ctx.properties.majorCriticalColor;\n    minorColor = ctx.properties.minorCriticalColor;\n} else if (ctx.values.warning) {\n    majorColor = ctx.properties.minorWarningColor;\n    minorColor = ctx.properties.minorWarningColor;\n}\n\nvar majorTicks = element.find('line.majorTick');\nmajorTicks.forEach(t => t.attr({stroke: majorColor}));\n\nvar majorTicksText = element.find('text.majorTickText');\nctx.api.font(majorTicksText, majorFont, majorColor);\n\nvar minorTicks = element.find('line.minorTick');\nminorTicks.forEach(t => t.attr({stroke: minorColor}));\n\nvar elementCriticalAnimation = element.remember('criticalAnimation');\nvar criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\nif (elementCriticalAnimation !== criticalAnimation) {\n    element.remember('criticalAnimation', criticalAnimation);\n    if (criticalAnimation) {\n        ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n    } else {\n        ctx.api.resetCssAnimation(element);\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(67, minorY, 73, minorY).stroke({ width: 1 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -375,7 +375,7 @@
         "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';"
       },
       "disableOnProperty": "progressArrow",
-      "disabled": false,
+      "disabled": true,
       "visible": true
     },
     {
@@ -424,7 +424,7 @@
         "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';"
       },
       "disableOnProperty": "valueBox",
-      "disabled": true,
+      "disabled": false,
       "visible": true
     },
     {
@@ -433,8 +433,8 @@
       "type": "units",
       "default": "%",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
-      "disabled": true,
+      "disabled": false,
       "visible": true
     },
     {
@@ -449,7 +449,7 @@
         "style": "normal"
       },
       "disableOnProperty": "valueBox",
-      "disabled": true,
+      "disabled": false,
       "visible": true
     },
     {
@@ -490,7 +490,15 @@
         "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';"
       },
       "disableOnProperty": "valueBox",
-      "disabled": true,
+      "disabled": false,
+      "visible": true
+    },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
       "visible": true
     },
     {
@@ -510,7 +518,7 @@
       "name": "{i18n:scada.symbol.major-ticks}",
       "type": "font",
       "default": {
-        "size": 12,
+        "size": 10,
         "sizeUnit": "px",
         "family": "Roboto",
         "weight": "500",

application/src/main/data/json/system/scada_symbols/small-spherical-tank.svg

@@ -34,7 +34,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 23;\n        var majorIntervalLength = 560 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(268, y, 300, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 258, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(280, minorY, 300, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 23;\n        var majorIntervalLength = 560 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(268, y, 300, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.valueUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 258, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(280, minorY, 300, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -304,7 +304,7 @@
       "type": "color",
       "default": "#F3F3F3",
       "disableOnProperty": "valueBox",
-      "disabled": true,
+      "disabled": false,
       "visible": true
     },
     {
@@ -313,8 +313,8 @@
       "type": "units",
       "default": "gal",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
-      "disabled": true,
+      "disabled": false,
       "visible": true
     },
     {
@@ -329,7 +329,7 @@
         "style": "normal"
       },
       "disableOnProperty": "valueBox",
-      "disabled": true,
+      "disabled": false,
       "visible": true
     },
     {
@@ -338,7 +338,7 @@
       "type": "color",
       "default": "#0000008A",
       "disableOnProperty": "valueBox",
-      "disabled": true,
+      "disabled": false,
       "visible": true
     },
     {
@@ -369,6 +369,14 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
+    },
     {
       "id": "transparent",
       "name": "{i18n:scada.symbol.transparent-mode}",
@@ -391,16 +399,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "majorFont",
       "name": "{i18n:scada.symbol.major-ticks}",

application/src/main/data/json/system/scada_symbols/spherical-tank.svg

@@ -34,7 +34,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 23;\n        var majorIntervalLength = 960 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(458, y, 490, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 448, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(470, minorY, 490, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 23;\n        var majorIntervalLength = 960 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(458, y, 490, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.valueUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 448, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(470, minorY, 490, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -304,7 +304,7 @@
       "type": "color",
       "default": "#F3F3F3",
       "disableOnProperty": "valueBox",
-      "disabled": true,
+      "disabled": false,
       "visible": true
     },
     {
@@ -313,8 +313,8 @@
       "type": "units",
       "default": "gal",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
-      "disabled": true,
+      "disabled": false,
       "visible": true
     },
     {
@@ -329,7 +329,7 @@
         "style": "normal"
       },
       "disableOnProperty": "valueBox",
-      "disabled": true,
+      "disabled": false,
       "visible": true
     },
     {
@@ -338,7 +338,7 @@
       "type": "color",
       "default": "#0000008A",
       "disableOnProperty": "valueBox",
-      "disabled": true,
+      "disabled": false,
       "visible": true
     },
     {
@@ -369,6 +369,14 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
+    },
     {
       "id": "transparent",
       "name": "{i18n:scada.symbol.transparent-mode}",
@@ -391,16 +399,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "majorFont",
       "name": "{i18n:scada.symbol.major-ticks}",

application/src/main/data/json/system/scada_symbols/stand-cylindrical-tank.svg

@@ -34,7 +34,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 205;\n        var majorIntervalLength = 760 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(340, y, 372, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 330, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(352, minorY, 372, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 205;\n        var majorIntervalLength = 760 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(340, y, 372, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.valueUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 330, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(352, minorY, 372, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -313,7 +313,7 @@
       "type": "units",
       "default": "gal",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },
@@ -369,6 +369,14 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
+    },
     {
       "id": "transparent",
       "name": "{i18n:scada.symbol.transparent-mode}",
@@ -391,16 +399,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "majorFont",
       "name": "{i18n:scada.symbol.major-ticks}",

application/src/main/data/json/system/scada_symbols/stand-horizontal-tank.svg

@@ -34,7 +34,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 17;\n        var majorIntervalLength = 568 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(715, y, 747, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 705, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(727, minorY, 747, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 17;\n        var majorIntervalLength = 568 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(715, y, 747, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.valueUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 705, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(727, minorY, 747, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -313,7 +313,7 @@
       "type": "units",
       "default": "gal",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },
@@ -369,6 +369,14 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
+    },
     {
       "id": "transparent",
       "name": "{i18n:scada.symbol.transparent-mode}",
@@ -391,16 +399,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "majorFont",
       "name": "{i18n:scada.symbol.major-ticks}",

application/src/main/data/json/system/scada_symbols/stand-vertical-short-tank.svg

@@ -35,7 +35,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 137;\n        var majorIntervalLength = 442 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(523, y, 555, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 513, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(535, minorY, 555, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 137;\n        var majorIntervalLength = 442 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(523, y, 555, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.valueUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 513, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(535, minorY, 555, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -314,7 +314,7 @@
       "type": "units",
       "default": "gal",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },
@@ -370,6 +370,14 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
+    },
     {
       "id": "transparent",
       "name": "{i18n:scada.symbol.transparent-mode}",
@@ -392,16 +400,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "majorFont",
       "name": "{i18n:scada.symbol.major-ticks}",

application/src/main/data/json/system/scada_symbols/stand-vertical-tank.svg

@@ -34,7 +34,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 205;\n        var majorIntervalLength = 760 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(340, y, 372, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 330, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(352, minorY, 372, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 205;\n        var majorIntervalLength = 760 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(340, y, 372, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.valueUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 330, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(352, minorY, 372, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -313,7 +313,7 @@
       "type": "units",
       "default": "gal",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },
@@ -365,7 +365,17 @@
           "value": false,
           "label": "Absolute"
         }
-      ]
+      ],
+      "disabled": false,
+      "visible": true
+    },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
     },
     {
       "id": "transparent",
@@ -389,16 +399,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "majorFont",
       "name": "{i18n:scada.symbol.major-ticks}",

application/src/main/data/json/system/scada_symbols/three-rate-energy-meter-hp.svg

@@ -38,7 +38,7 @@
     },
     {
       "tag": "night-rate",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.nightValueFont, ctx.properties.nightValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.nightRate, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.nightValueFont, ctx.properties.nightValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.nightRate, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
       "actions": null
     },
     {
@@ -48,7 +48,7 @@
     },
     {
       "tag": "off-peak-rate",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.offPeakValueFont, ctx.properties.offPeakValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.offPeakRate, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.offPeakValueFont, ctx.properties.offPeakValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.offPeakRate, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
       "actions": null
     },
     {
@@ -58,12 +58,12 @@
     },
     {
       "tag": "peak-rate",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.peakValueFont, ctx.properties.peakValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.peakRate, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.peakValueFont, ctx.properties.peakValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.peakRate, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
       "actions": null
     },
     {
       "tag": "units",
-      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.properties.units);\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.api.unitSymbol(ctx.properties.units));\n} else {\n    element.hide();\n}",
       "actions": null
     },
     {
@@ -480,6 +480,7 @@
       "group": "{i18n:scada.symbol.off-peak-rate}",
       "type": "text",
       "default": "T1",
+      "disableOnProperty": "showOffPeakLabel",
       "fieldClass": "medium-width",
       "disabled": false,
       "visible": true
@@ -496,6 +497,7 @@
         "weight": "normal",
         "style": "normal"
       },
+      "disableOnProperty": "showOffPeakLabel",
       "disabled": false,
       "visible": true
     },
@@ -505,6 +507,7 @@
       "group": "{i18n:scada.symbol.off-peak-rate}",
       "type": "color",
       "default": "#000000",
+      "disableOnProperty": "showOffPeakLabel",
       "disabled": false,
       "visible": true
     },
@@ -556,6 +559,7 @@
       "group": "{i18n:scada.symbol.night-rate}",
       "type": "text",
       "default": "T2",
+      "disableOnProperty": "showNightLabel",
       "fieldClass": "medium-width",
       "disabled": false,
       "visible": true
@@ -572,6 +576,7 @@
         "weight": "normal",
         "style": "normal"
       },
+      "disableOnProperty": "showNightLabel",
       "disabled": false,
       "visible": true
     },
@@ -581,6 +586,7 @@
       "group": "{i18n:scada.symbol.night-rate}",
       "type": "color",
       "default": "#000",
+      "disableOnProperty": "showNightLabel",
       "disabled": false,
       "visible": true
     },
@@ -632,6 +638,7 @@
       "group": "{i18n:scada.symbol.peak-rate}",
       "type": "text",
       "default": "T3",
+      "disableOnProperty": "showPeakLabel",
       "fieldClass": "medium-width",
       "disabled": false,
       "visible": true
@@ -648,6 +655,7 @@
         "weight": "normal",
         "style": "normal"
       },
+      "disableOnProperty": "showPeakLabel",
       "disabled": false,
       "visible": true
     },
@@ -657,6 +665,7 @@
       "group": "{i18n:scada.symbol.peak-rate}",
       "type": "color",
       "default": "#000",
+      "disableOnProperty": "showPeakLabel",
       "disabled": false,
       "visible": true
     },
@@ -706,6 +715,7 @@
       "name": "{i18n:scada.symbol.units}",
       "type": "units",
       "default": "kWh",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },
@@ -720,6 +730,7 @@
         "weight": "normal",
         "style": "normal"
       },
+      "disableOnProperty": "showUnits",
       "disabled": false,
       "visible": true
     },
@@ -728,6 +739,7 @@
       "name": "{i18n:scada.symbol.units}",
       "type": "color",
       "default": "#000",
+      "disableOnProperty": "showUnits",
       "disabled": false,
       "visible": true
     }

application/src/main/data/json/system/scada_symbols/top-flow-meter.svg

@@ -57,7 +57,7 @@
     },
     {
       "tag": "value",
-      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, '', false);\nctx.api.text(element, value);\n",
+      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, {units: ctx.properties.valueUnits, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true});\nctx.api.text(element, value);\n",
       "actions": {
         "click": {
           "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@@ -66,7 +66,7 @@
     },
     {
       "tag": "valueUnits",
-      "stateRenderFunction": "var units = ctx.properties.valueUnits;\nctx.api.text(element, units || '');\n",
+      "stateRenderFunction": "var units = ctx.api.unitSymbol(ctx.properties.valueUnits);\nctx.api.text(element, units || '');\n",
       "actions": {
         "click": {
           "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@@ -464,8 +464,7 @@
       "type": "units",
       "default": "m³/hr",
       "fieldClass": "medium-width",
-      "disabled": false,
+      "supportsUnitConversion": true
-      "visible": true
     },
     {
       "id": "valueDecimals",

application/src/main/data/json/system/scada_symbols/two-rate-energy-meter-hp.svg

@@ -38,7 +38,7 @@
     },
     {
       "tag": "day-rate",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.dayValueFont, ctx.properties.dayValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.dayRate, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.dayValueFont, ctx.properties.dayValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.dayRate, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
       "actions": null
     },
     {
@@ -48,12 +48,12 @@
     },
     {
       "tag": "night-rate",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.nightValueFont, ctx.properties.nightValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.nightRate, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.nightValueFont, ctx.properties.nightValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.nightRate, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
       "actions": null
     },
     {
       "tag": "units",
-      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.properties.units);\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.api.unitSymbol(ctx.properties.units));\n} else {\n    element.hide();\n}",
       "actions": null
     },
     {
@@ -427,8 +427,9 @@
       "group": "{i18n:scada.symbol.day-rate}",
       "type": "text",
       "default": "T1",
+      "disableOnProperty": "showDayLabel",
       "fieldClass": "medium-width",
-      "disabled": false,
+      "disabled": true,
       "visible": true
     },
     {
@@ -443,7 +444,8 @@
         "weight": "normal",
         "style": "normal"
       },
-      "disabled": false,
+      "disableOnProperty": "showDayLabel",
+      "disabled": true,
       "visible": true
     },
     {
@@ -452,7 +454,8 @@
       "group": "{i18n:scada.symbol.day-rate}",
       "type": "color",
       "default": "#000000",
-      "disabled": false,
+      "disableOnProperty": "showDayLabel",
+      "disabled": true,
       "visible": true
     },
     {
@@ -503,8 +506,9 @@
       "group": "{i18n:scada.symbol.night-rate}",
       "type": "text",
       "default": "T2",
+      "disableOnProperty": "showNightLabel",
       "fieldClass": "medium-width",
-      "disabled": false,
+      "disabled": true,
       "visible": true
     },
     {
@@ -519,7 +523,8 @@
         "weight": "normal",
         "style": "normal"
       },
-      "disabled": false,
+      "disableOnProperty": "showNightLabel",
+      "disabled": true,
       "visible": true
     },
     {
@@ -528,7 +533,8 @@
       "group": "{i18n:scada.symbol.night-rate}",
       "type": "color",
       "default": "#000",
-      "disabled": false,
+      "disableOnProperty": "showNightLabel",
+      "disabled": true,
       "visible": true
     },
     {
@@ -577,6 +583,7 @@
       "name": "{i18n:scada.symbol.units}",
       "type": "units",
       "default": "kWh",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },
@@ -591,7 +598,8 @@
         "weight": "normal",
         "style": "normal"
       },
-      "disabled": false,
+      "disableOnProperty": "showUnits",
+      "disabled": true,
       "visible": true
     },
     {
@@ -599,7 +607,8 @@
       "name": "{i18n:scada.symbol.units}",
       "type": "color",
       "default": "#000",
-      "disabled": false,
+      "disableOnProperty": "showUnits",
+      "disabled": true,
       "visible": true
     }
   ]

application/src/main/data/json/system/scada_symbols/vertical-inline-flow-meter.svg

@@ -57,7 +57,7 @@
     },
     {
       "tag": "value",
-      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, '', false);\nctx.api.text(element, value);\n",
+      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, {units: ctx.properties.valueUnits, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true});\nctx.api.text(element, value);\n",
       "actions": {
         "click": {
           "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@@ -66,7 +66,7 @@
     },
     {
       "tag": "valueUnits",
-      "stateRenderFunction": "var units = ctx.properties.valueUnits;\nctx.api.text(element, units || '');\n",
+      "stateRenderFunction": "var units = ctx.api.unitSymbol(ctx.properties.valueUnits);\nctx.api.text(element, units || '');\n",
       "actions": {
         "click": {
           "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@@ -464,6 +464,7 @@
       "type": "units",
       "default": "m³/hr",
       "fieldClass": "medium-width",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },

application/src/main/data/json/system/scada_symbols/vertical-short-tank.svg

@@ -34,7 +34,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 137;\n        var majorIntervalLength = 442 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(523, y, 555, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 513, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(535, minorY, 555, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 137;\n        var majorIntervalLength = 442 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(523, y, 555, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.valueUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 513, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(535, minorY, 555, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -313,7 +313,7 @@
       "type": "units",
       "default": "gal",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },
@@ -369,6 +369,14 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
+    },
     {
       "id": "transparent",
       "name": "{i18n:scada.symbol.transparent-mode}",
@@ -391,17 +399,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "required": false,
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "majorFont",
       "name": "{i18n:scada.symbol.major-ticks}",

application/src/main/data/json/system/scada_symbols/vertical-tank-hp.svg

@@ -38,7 +38,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 3;\n        var majorIntervalLength = 994 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(160, y, 192, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            if (i === 0) {\n                majorTickText.attr({x: 150, y: y + 10, 'text-anchor': 'end', class: 'majorTickText'});\n            } else if (i === majorIntervals) {\n                majorTickText.attr({x: 150, y: y - 5, 'text-anchor': 'end', class: 'majorTickText'});\n            } else {\n                majorTickText.attr({x: 150, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            }\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(172, minorY, 192, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 3;\n        var majorIntervalLength = 994 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(160, y, 192, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.majorUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            if (i === 0) {\n                majorTickText.attr({x: 150, y: y + 10, 'text-anchor': 'end', class: 'majorTickText'});\n            } else if (i === majorIntervals) {\n                majorTickText.attr({x: 150, y: y - 5, 'text-anchor': 'end', class: 'majorTickText'});\n            } else {\n                majorTickText.attr({x: 150, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            }\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(172, minorY, 192, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -346,6 +346,24 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
+    },
+    {
+      "id": "majorUnits",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "units",
+      "subLabel": "{i18n:scada.symbol.units}",
+      "divider": false,
+      "supportsUnitConversion": true,
+      "disabled": false,
+      "visible": true
+    },
     {
       "id": "majorIntervals",
       "name": "{i18n:scada.symbol.major-ticks}",
@@ -359,16 +377,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "majorFont",
       "name": "{i18n:scada.symbol.major-ticks}",

application/src/main/data/json/system/scada_symbols/vertical-tank.svg

@@ -33,7 +33,7 @@
     },
     {
       "tag": "scale",
-      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 205;\n        var majorIntervalLength = 760 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(340, y, 372, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var majorText = ctx.api.formatValue((tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0), 0, ctx.properties.majorUnits, false);\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 330, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(352, minorY, 372, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
+      "stateRenderFunction": "if (!ctx.properties.scale) {\n        element.hide();\n} else {\n    var scaleSet = element.remember('scaleSet');\n    if (!scaleSet) {\n        element.remember('scaleSet', true);\n        element.clear();\n        \n        var majorIntervals = ctx.properties.majorIntervals;\n        var minorIntervals = ctx.properties.minorIntervals;\n        \n        var start = 205;\n        var majorIntervalLength = 760 / majorIntervals;\n        var minorIntervalLength = majorIntervalLength / minorIntervals;\n        var tankCapacity = ctx.properties.scaleDisplayFormat ? 100 : (ctx.values.tankCapacity || 100);\n        for (var i = 0; i < majorIntervals + 1; i++) {\n            var y = start + i * majorIntervalLength;\n            var line = ctx.svg.line(340, y, 372, y).stroke({ width: 3 }).attr({class: 'majorTick'});\n            element.add(line);\n            var currentVolume = (tankCapacity - i * (tankCapacity/majorIntervals)).toFixed(0);\n            var majorText = ctx.properties.scaleDisplayFormat ? currentVolume : ctx.api.formatValue(currentVolume, {units: ctx.properties.valueUnits, decimals: 0, ignoreUnitSymbol: !ctx.properties.enableUnitScale});\n            var majorTickText = ctx.svg.text(majorText);\n            majorTickText.attr({x: 330, y: y + 2, 'text-anchor': 'end', class: 'majorTickText'});\n            majorTickText.first().attr({'dominant-baseline': 'middle'});\n            element.add(majorTickText);\n            if (i < majorIntervals) {\n                drawMinorTicks(y, minorIntervals, minorIntervalLength);\n            }\n        }\n    }\n    \n    var majorFont = ctx.properties.majorFont;\n    var majorColor = ctx.properties.majorColor;\n    var minorColor = ctx.properties.minorColor;\n    if (ctx.values.critical) {\n        majorColor = ctx.properties.majorCriticalColor;\n        minorColor = ctx.properties.minorCriticalColor;\n    } else if (ctx.values.warning) {\n        majorColor = ctx.properties.minorWarningColor;\n        minorColor = ctx.properties.minorWarningColor;\n    }\n    \n    var majorTicks = element.find('line.majorTick');\n    majorTicks.forEach(t => t.attr({stroke: majorColor}));\n    \n    var majorTicksText = element.find('text.majorTickText');\n    ctx.api.font(majorTicksText, majorFont, majorColor);\n    \n    var minorTicks = element.find('line.minorTick');\n    minorTicks.forEach(t => t.attr({stroke: minorColor}));\n    \n    var elementCriticalAnimation = element.remember('criticalAnimation');\n    var criticalAnimation = ctx.values.critical && ctx.values.criticalAnimation;\n\n    if (elementCriticalAnimation !== criticalAnimation) {\n        element.remember('criticalAnimation', criticalAnimation);\n        if (criticalAnimation) {\n            ctx.api.cssAnimate(element, 500).attr({opacity: 0.15}).loop(0, true);\n        } else {\n            ctx.api.resetCssAnimation(element);\n        }\n    }\n}\n\nfunction drawMinorTicks(start, minorIntervals, minorIntervalLength) {\n    for (var i = 1; i < minorIntervals; i++) {\n        var minorY = start + i * minorIntervalLength;\n        var minorLine = ctx.svg.line(352, minorY, 372, minorY).stroke({ width: 3 }).attr({class: 'minorTick'});\n        element.add(minorLine);\n    }\n}",
       "actions": null
     },
     {
@@ -312,7 +312,7 @@
       "type": "units",
       "default": "gal",
       "subLabel": "{i18n:scada.symbol.units}",
-      "disableOnProperty": "valueBox",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },
@@ -369,6 +369,14 @@
       "disabled": false,
       "visible": true
     },
+    {
+      "id": "enableUnitScale",
+      "name": "{i18n:scada.symbol.enable-units-scale}",
+      "type": "switch",
+      "default": false,
+      "disabled": false,
+      "visible": true
+    },
     {
       "id": "transparent",
       "name": "{i18n:scada.symbol.transparent-mode}",
@@ -391,16 +399,6 @@
       "disabled": false,
       "visible": true
     },
-    {
-      "id": "majorUnits",
-      "name": "{i18n:scada.symbol.major-ticks}",
-      "type": "units",
-      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": true,
-      "disableOnProperty": "scale",
-      "disabled": false,
-      "visible": true
-    },
     {
       "id": "majorFont",
       "name": "{i18n:scada.symbol.major-ticks}",

application/src/main/data/json/system/scada_symbols/voltage-relay-hp.svg

@@ -34,12 +34,12 @@
     },
     {
       "tag": "units",
-      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.properties.units);\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.api.unitSymbol(ctx.properties.units));\n} else {\n    element.hide();\n}",
       "actions": null
     },
     {
       "tag": "value",
-      "stateRenderFunction": "if (ctx.values.running) {\n    element.show();\n    ctx.api.font(element, ctx.properties.currentVoltageFont, ctx.properties.currentVoltageColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.voltage, 0, null, 0));\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.values.running) {\n    element.show();\n    ctx.api.font(element, ctx.properties.currentVoltageFont, ctx.properties.currentVoltageColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.voltage, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));\n} else {\n    element.hide();\n}",
       "actions": null
     },
     {
@@ -379,6 +379,7 @@
       "name": "{i18n:scada.symbol.units}",
       "type": "units",
       "default": "V",
+      "supportsUnitConversion": true,
       "disabled": false,
       "visible": true
     },

monitoring/pom.xml

@@ -41,7 +41,6 @@
         <pkg.win.dist>${project.build.directory}/windows</pkg.win.dist>
         <pkg.implementationTitle>ThingsBoard Monitoring Service</pkg.implementationTitle>
         <pkg.mainClass>org.thingsboard.monitoring.ThingsboardMonitoringApplication</pkg.mainClass>
-
     </properties>
 
     <dependencies>

monitoring/src/main/java/org/thingsboard/monitoring/client/Lwm2mClient.java

@@ -56,7 +56,6 @@ import org.thingsboard.monitoring.util.ResourceUtils;
 import javax.security.auth.Destroyable;
 import java.io.IOException;
 import java.util.ArrayList;
-import java.util.Collections;
 import java.util.List;
 import java.util.concurrent.TimeUnit;
 
@@ -73,7 +72,7 @@ public class Lwm2mClient extends BaseInstanceEnabler implements Destroyable {
     @Setter
     private LeshanClient leshanClient;
 
-    private static final List<Integer> supportedResources = Collections.singletonList(0);
+    private static final List<Integer> supportedResources = List.of(0, 16);
 
     private String data = "";
 
@@ -158,6 +157,7 @@ public class Lwm2mClient extends BaseInstanceEnabler implements Destroyable {
 
             @Override
             public void onBootstrapFailure(LwM2mServer bsserver, BootstrapRequest request, ResponseCode responseCode, String errorMessage, Exception cause) {
+                log.debug("onBootstrapFailure [{}] [{}] [{}]", request.getEndpointName(), responseCode, errorMessage);
                 // No implementation needed
             }
 
@@ -245,10 +245,11 @@ public class Lwm2mClient extends BaseInstanceEnabler implements Destroyable {
 
     @Override
     public ReadResponse read(LwM2mServer server, int resourceId) {
-        if (supportedResources.contains(resourceId)) {
+        return switch (resourceId) {
-            return ReadResponse.success(resourceId, data);
+            case 0 -> ReadResponse.success(0, data);
-        }
+            case 16 -> ReadResponse.success(16, "U");
-        return super.read(server, resourceId);
+            default -> super.read(server, resourceId);
+        };
     }
 
     @SneakyThrows

monitoring/src/main/java/org/thingsboard/monitoring/service/transport/impl/CoapTransportHealthChecker.java

@@ -20,6 +20,7 @@ import org.eclipse.californium.core.CoapClient;
 import org.eclipse.californium.core.CoapResponse;
 import org.eclipse.californium.core.coap.CoAP;
 import org.eclipse.californium.core.coap.MediaTypeRegistry;
+import org.eclipse.californium.elements.config.SystemConfig;
 import org.springframework.beans.factory.config.ConfigurableBeanFactory;
 import org.springframework.context.annotation.Scope;
 import org.springframework.stereotype.Component;
@@ -35,6 +36,10 @@ import java.io.IOException;
 @Slf4j
 public class CoapTransportHealthChecker extends TransportHealthChecker<CoapTransportMonitoringConfig> {
 
+    static {
+        SystemConfig.register();
+    }
+
     private CoapClient coapClient;
 
     protected CoapTransportHealthChecker(CoapTransportMonitoringConfig config, TransportMonitoringTarget target) {

ui-ngx/src/app/core/services/dashboard-utils.service.ts

@@ -31,7 +31,8 @@ import {
   DashboardLayoutsInfo,
   DashboardState,
   DashboardStateLayouts,
-  GridSettings, LayoutType,
+  GridSettings,
+  LayoutType,
   WidgetLayout
 } from '@shared/models/dashboard.models';
 import { deepClone, isDefined, isDefinedAndNotNull, isNotEmptyStr, isString, isUndefined } from '@core/utils';
@@ -61,6 +62,7 @@ import { MediaBreakpoints } from '@shared/models/constants';
 import { TranslateService } from '@ngx-translate/core';
 import { DashboardPageLayout } from '@home/components/dashboard-page/dashboard-page.models';
 import { maxGridsterCol, maxGridsterRow } from '@home/models/dashboard-component.models';
+import { findWidgetModelDefinition } from '@shared/models/widget/widget-model.definition';
 
 @Injectable({
   providedIn: 'root'
@@ -398,6 +400,14 @@ export class DashboardUtilsService {
     return datasources;
   }
 
+  public getWidgetDatasources(widget: Widget): Datasource[] {
+    const widgetDefinition = findWidgetModelDefinition(widget);
+    if (widgetDefinition) {
+      return widgetDefinition.datasources(widget);
+    }
+    return this.validateAndUpdateDatasources(widget.config.datasources);
+  }
+
   public createDefaultLayoutData(): DashboardLayout {
     return {
       widgets: {},

ui-ngx/src/app/core/services/item-buffer.service.ts

@@ -35,7 +35,7 @@ import { FcRuleNode, ruleNodeTypeDescriptors } from '@shared/models/rule-node.mo
 import { RuleChainService } from '@core/http/rule-chain.service';
 import { RuleChainImport } from '@shared/models/rule-chain.models';
 import { Filter, FilterInfo, Filters, FiltersInfo, getFilterId } from '@shared/models/query/query.models';
-import { getWidgetExportDefinition } from '@shared/models/widget/widget-export.models';
+import { findWidgetModelDefinition } from '@shared/models/widget/widget-model.definition';
 
 const WIDGET_ITEM = 'widget_item';
 const WIDGET_REFERENCE = 'widget_reference';
@@ -142,7 +142,7 @@ export class ItemBufferService {
       }
     }
     let widgetExportInfo: any;
-    const exportDefinition = getWidgetExportDefinition(widget);
+    const exportDefinition = findWidgetModelDefinition(widget);
     if (exportDefinition) {
       widgetExportInfo = exportDefinition.prepareExportInfo(dashboard, widget);
     }
@@ -270,7 +270,7 @@ export class ItemBufferService {
     let callFilterUpdateFunction = false;
     let newEntityAliases: EntityAliases;
     let newFilters: Filters;
-    const exportDefinition = getWidgetExportDefinition(widget);
+    const exportDefinition = findWidgetModelDefinition(widget);
     if (exportDefinition && widgetExportInfo || aliasesInfo) {
       newEntityAliases = deepClone(dashboard.configuration.entityAliases);
     }

ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, DestroyRef, Inject, OnInit, SkipSelf } from '@angular/core';
+import { Component, DestroyRef, Inject, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
@@ -60,7 +60,7 @@ export interface EntityAliasesDialogData {
   styleUrls: ['./entity-aliases-dialog.component.scss']
 })
 export class EntityAliasesDialogComponent extends DialogComponent<EntityAliasesDialogComponent, EntityAliases>
-  implements OnInit, ErrorStateMatcher {
+  implements ErrorStateMatcher {
 
   title: string;
   disableAdd: boolean;
@@ -107,8 +107,7 @@ export class EntityAliasesDialogComponent extends DialogComponent<EntityAliasesD
               this.addWidgetTitleToWidgetsMap(widget.config.alarmSource.entityAliasId, widget.config.title);
             }
           } else {
-            const datasources = this.dashboardUtils.validateAndUpdateDatasources(widget.config.datasources);
+            this.dashboardUtils.getWidgetDatasources(widget).forEach((datasource) => {
-            datasources.forEach((datasource) => {
               if ([DatasourceType.entity, DatasourceType.entityCount, DatasourceType.alarmCount].includes(datasource.type)
                 && datasource.entityAliasId) {
                 this.addWidgetTitleToWidgetsMap(datasource.entityAliasId, widget.config.title);
@@ -143,7 +142,9 @@ export class EntityAliasesDialogComponent extends DialogComponent<EntityAliasesD
       widgetsTitleList = [];
       this.aliasToWidgetsMap[aliasId] = widgetsTitleList;
     }
-    widgetsTitleList.push(widgetTitle);
+    if (!widgetsTitleList.includes(widgetTitle)) {
+      widgetsTitleList.push(widgetTitle);
+    }
   }
 
   private createEntityAliasFormControl(aliasId: string, entityAlias: EntityAlias): AbstractControl {
@@ -166,9 +167,6 @@ export class EntityAliasesDialogComponent extends DialogComponent<EntityAliasesD
     return this.entityAliasesFormGroup.get('entityAliases') as UntypedFormArray;
   }
 
-  ngOnInit(): void {
-  }
-
   isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);

ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.ts

@@ -14,19 +14,19 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
+import { Component, Inject, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import {
   AbstractControl,
+  FormGroupDirective,
+  NgForm,
   UntypedFormArray,
   UntypedFormBuilder,
   UntypedFormControl,
   UntypedFormGroup,
-  FormGroupDirective,
-  NgForm,
   Validators
 } from '@angular/forms';
 import { Router } from '@angular/router';
@@ -58,7 +58,7 @@ export interface FiltersDialogData {
   styleUrls: ['./filters-dialog.component.scss']
 })
 export class FiltersDialogComponent extends DialogComponent<FiltersDialogComponent, Filters>
-  implements OnInit, ErrorStateMatcher {
+  implements ErrorStateMatcher {
 
   title: string;
   disableAdd: boolean;
@@ -96,15 +96,16 @@ export class FiltersDialogComponent extends DialogComponent<FiltersDialogCompone
         }
       } else {
         this.data.widgets.forEach((widget) => {
-          const datasources = this.dashboardUtils.validateAndUpdateDatasources(widget.config.datasources);
+          this.dashboardUtils.getWidgetDatasources(widget).forEach((datasource) => {
-          datasources.forEach((datasource) => {
+            if (datasource.type !== DatasourceType.function && datasource.filterId) {
-            if (datasource.type === DatasourceType.entity && datasource.filterId) {
               widgetsTitleList = this.filterToWidgetsMap[datasource.filterId];
               if (!widgetsTitleList) {
                 widgetsTitleList = [];
                 this.filterToWidgetsMap[datasource.filterId] = widgetsTitleList;
               }
-              widgetsTitleList.push(widget.config.title);
+              if (!widgetsTitleList.includes(widget.config.title)) {
+                widgetsTitleList.push(widget.config.title);
+              }
             }
           });
         });
@@ -140,9 +141,6 @@ export class FiltersDialogComponent extends DialogComponent<FiltersDialogCompone
     return this.filtersFormGroup.get('filters') as UntypedFormArray;
   }
 
-  ngOnInit(): void {
-  }
-
   isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html

@@ -314,8 +314,8 @@
           </mat-slide-toggle>
         </div>
         <div class="tb-form-row">
-          <mat-slide-toggle class="mat-slide" formControlName="tooltipHideZeroFalse">
+          <mat-slide-toggle class="mat-slide" formControlName="tooltipHideZeroValues">
-              {{ 'tooltip.hide-zero-false-tooltip-values' | translate }}
+              {{ 'tooltip.hide-zero-tooltip-values' | translate }}
           </mat-slide-toggle>
         </div>
         <div class="tb-form-row space-between">

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts

@@ -188,7 +188,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
       tooltipDateFont: [settings.tooltipDateFont, []],
       tooltipDateColor: [settings.tooltipDateColor, []],
       tooltipDateInterval: [settings.tooltipDateInterval, []],
-      tooltipHideZeroFalse: [settings.tooltipHideZeroFalse ,[]],
+      tooltipHideZeroValues: [settings.tooltipHideZeroValues ,[]],
 
       tooltipBackgroundColor: [settings.tooltipBackgroundColor, []],
       tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []],
@@ -265,7 +265,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
     this.widgetConfig.config.settings.tooltipDateFont = config.tooltipDateFont;
     this.widgetConfig.config.settings.tooltipDateColor = config.tooltipDateColor;
     this.widgetConfig.config.settings.tooltipDateInterval = config.tooltipDateInterval;
-    this.widgetConfig.config.settings.tooltipHideZeroFalse = config.tooltipHideZeroFalse;
+    this.widgetConfig.config.settings.tooltipHideZeroValues = config.tooltipHideZeroValues;
     this.widgetConfig.config.settings.tooltipBackgroundColor = config.tooltipBackgroundColor;
     this.widgetConfig.config.settings.tooltipBackgroundBlur = config.tooltipBackgroundBlur;
 
@@ -359,7 +359,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
       this.timeSeriesChartWidgetConfigForm.get('tooltipValueFont').enable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipValueColor').enable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipShowDate').enable({emitEvent: false});
-      this.timeSeriesChartWidgetConfigForm.get('tooltipHideZeroFalse').enable({emitEvent: false});
+      this.timeSeriesChartWidgetConfigForm.get('tooltipHideZeroValues').enable({emitEvent: false});
       this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundColor').enable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundBlur').enable();
       if (tooltipShowDate) {
@@ -384,7 +384,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
       this.timeSeriesChartWidgetConfigForm.get('tooltipDateFont').disable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipDateColor').disable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipDateInterval').disable();
-      this.timeSeriesChartWidgetConfigForm.get('tooltipHideZeroFalse').disable();
+      this.timeSeriesChartWidgetConfigForm.get('tooltipHideZeroValues').disable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundColor').disable();
       this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundBlur').disable();
     }

ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts

@@ -52,6 +52,7 @@ import { MillisecondsToTimeStringPipe } from '@shared/pipe/milliseconds-to-time-
 import { UserSettingsService } from '@core/http/user-settings.service';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { UtilsService } from '@core/services/utils.service';
+import { UnitService } from '@core/services/unit.service';
 
 @Directive()
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
@@ -92,6 +93,7 @@ export class DynamicWidgetComponent extends PageComponent implements IDynamicWid
     this.ctx.userSettingsService = this.$injector.get(UserSettingsService);
     this.ctx.utilsService = this.$injector.get(UtilsService);
     this.ctx.telemetryWsService = this.$injector.get(TelemetryWebsocketService);
+    this.ctx.unitService = this.$injector.get(UnitService);
     this.ctx.date = this.$injector.get(DatePipe);
     this.ctx.imagePipe = this.$injector.get(ImagePipe);
     this.ctx.milliSecondsToTimeString = this.$injector.get(MillisecondsToTimeStringPipe);

ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-tooltip.models.ts

@@ -37,7 +37,7 @@ export interface TimeSeriesChartTooltipWidgetSettings {
   tooltipValueFormatter?: string | TimeSeriesChartTooltipValueFormatFunction;
   tooltipShowDate: boolean;
   tooltipDateInterval?: boolean;
-  tooltipHideZeroFalse?: boolean;
+  tooltipHideZeroValues?: boolean;
   tooltipDateFormat: DateFormatSettings;
   tooltipDateFont: Font;
   tooltipDateColor: string;
@@ -102,7 +102,7 @@ export class TimeSeriesChartTooltip {
     if (!tooltipParams.items.length && !tooltipParams.comparisonItems.length) {
       return null;
     }
-    if (this.settings.tooltipHideZeroFalse && !tooltipParams.items.some(value => value.param.value[1] && value.param.value[1] !== 'false')) {
+    if (this.settings.tooltipHideZeroValues && !tooltipParams.items.some(value => value.param.value[1] && value.param.value[1] !== 'false')) {
       return undefined;
     }
 
@@ -131,7 +131,7 @@ export class TimeSeriesChartTooltip {
         this.renderer.appendChild(tooltipItemsElement, this.constructTooltipDateElement(items[0].param, interval));
       }
       for (const item of items) {
-        if (!this.settings.tooltipHideZeroFalse || (item.param.value[1] && item.param.value[1] !== 'false')) {
+        if (!this.settings.tooltipHideZeroValues || (item.param.value[1] && item.param.value[1] !== 'false')) {
           this.renderer.appendChild(tooltipItemsElement, this.constructTooltipSeriesElement(item));
         }
       }

ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts

@@ -43,7 +43,6 @@ import {
 import {
   createLabelFromSubscriptionEntityInfo,
   deepClone,
-  formatValue,
   guid,
   isDefinedAndNotNull,
   isFirefox,
@@ -53,12 +52,19 @@ import {
   isUndefinedOrNull,
   mergeDeep,
   mergeDeepIgnoreArray,
+  objectHashCode,
   parseFunction
 } from '@core/utils';
 import { BehaviorSubject, forkJoin, Observable, Observer, of, Subject } from 'rxjs';
 import { ValueAction, ValueGetter, ValueSetter } from '@home/components/widget/lib/action/action-widget.models';
 import { WidgetContext } from '@home/models/widget-component.models';
-import { ColorProcessor, constantColor, Font } from '@shared/models/widget-settings.models';
+import {
+  ColorProcessor,
+  constantColor,
+  Font,
+  ValueFormatProcessor,
+  ValueFormatSettings
+} from '@shared/models/widget-settings.models';
 import { AttributeScope } from '@shared/models/telemetry/telemetry.models';
 import { UtilsService } from '@core/services/utils.service';
 import { WidgetAction, WidgetActionType, widgetActionTypeTranslationMap } from '@shared/models/widget.models';
@@ -72,10 +78,12 @@ import {
   FormProperty,
   FormPropertyType
 } from '@shared/models/dynamic-form.models';
+import { TbUnit } from '@shared/models/unit.models';
 
 export interface ScadaSymbolApi {
   generateElementId: () => string;
-  formatValue: (value: any, dec?: number, units?: string, showZeroDecimals?: boolean) => string | undefined;
+  formatValue(value: any, dec?: number, units?: string, showZeroDecimals?: boolean): string | undefined;
+  formatValue(value: any, settings: ValueFormatSettings): string;
   text: (element: Element | Element[], text: string) => void;
   font: (element: Element | Element[], font: Font, color: string) => void;
   icon: (element: Element | Element[], icon: string, size?: number, color?: string, center?: boolean) => void;
@@ -91,6 +99,8 @@ export interface ScadaSymbolApi {
   enable: (element: Element | Element[]) => void;
   callAction: (event: Event, behaviorId: string, value?: any, observer?: Partial<Observer<void>>) => void;
   setValue: (valueId: string, value: any) => void;
+  unitSymbol: (unit: TbUnit) => string;
+  convertUnitValue: (value: any, unit: TbUnit) => number;
 }
 
 export interface ScadaSymbolContext {
@@ -502,6 +512,8 @@ export class ScadaSymbolObject {
 
   private stateValueSubjects: {[id: string]: BehaviorSubject<any>} = {};
 
+  private valueProcessor: {[id: string]: ValueFormatProcessor} = {};
+
   private readonly shapeResize$: ResizeObserver;
   private readonly destroy$ = new Subject<void>();
 
@@ -615,7 +627,7 @@ export class ScadaSymbolObject {
     this.context = {
       api: {
         generateElementId: () => generateElementId(),
-        formatValue,
+        formatValue: this.formatValue.bind(this),
         text: this.setElementText.bind(this),
         font: this.setElementFont.bind(this),
         icon: this.setElementIcon.bind(this),
@@ -631,6 +643,8 @@ export class ScadaSymbolObject {
         enable: this.enableElement.bind(this),
         callAction: this.callAction.bind(this),
         setValue: this.setValue.bind(this),
+        unitSymbol: this.unitSymbol.bind(this),
+        convertUnitValue: this.convertUnitValue.bind(this),
       },
       tags: {},
       properties: {},
@@ -810,6 +824,34 @@ export class ScadaSymbolObject {
     }
   }
 
+  private unitSymbol(unit: TbUnit): string {
+    return this.ctx.unitService.getTargetUnitSymbol(unit);
+  }
+
+  private convertUnitValue(value: number, unit: TbUnit): number {
+    return this.ctx.unitService.convertUnitValue(value, unit);
+  }
+
+  private formatValue(value: any, settings: ValueFormatSettings): string;
+  private formatValue(value: any, dec?: number, units?: string, showZeroDecimals?: boolean): string | undefined;
+  private formatValue(value: any, settingsOrDec?: ValueFormatSettings | number, units?: string, showZeroDecimals?: boolean): string {
+    let valueFormatSettings: ValueFormatSettings;
+    if (typeof settingsOrDec === 'object') {
+      valueFormatSettings = deepClone(settingsOrDec);
+    } else {
+      valueFormatSettings = {
+        units,
+        decimals: settingsOrDec,
+        showZeroDecimals
+      }
+    }
+    const id = objectHashCode(valueFormatSettings) + '';
+    if (!this.valueProcessor[id]) {
+      this.valueProcessor[id] = ValueFormatProcessor.fromSettings(this.ctx.$injector, valueFormatSettings);
+    }
+    return this.valueProcessor[id].format(value);
+  }
+
   private onStateValueChanged(id: string, value: any) {
     if (this.context.values[id] !== value) {
       this.context.values[id] = value;

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html

@@ -238,8 +238,8 @@
             </mat-slide-toggle>
           </div>
           <div class="tb-form-row">
-            <mat-slide-toggle class="mat-slide" formControlName="tooltipHideZeroFalse">
+            <mat-slide-toggle class="mat-slide" formControlName="tooltipHideZeroValues">
-              {{ 'tooltip.hide-zero-false-tooltip-values' | translate }}
+              {{ 'tooltip.hide-zero-tooltip-values' | translate }}
             </mat-slide-toggle>
           </div>
           <div class="tb-form-row space-between">

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts

@@ -163,7 +163,7 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
       tooltipDateFont: [settings.tooltipDateFont, []],
       tooltipDateColor: [settings.tooltipDateColor, []],
       tooltipDateInterval: [settings.tooltipDateInterval, []],
-      tooltipHideZeroFalse: [settings.tooltipHideZeroFalse ,[]],
+      tooltipHideZeroValues: [settings.tooltipHideZeroValues ,[]],
 
       tooltipBackgroundColor: [settings.tooltipBackgroundColor, []],
       tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []],
@@ -224,7 +224,7 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
       this.timeSeriesChartWidgetSettingsForm.get('tooltipValueColor').enable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipValueFormatter').enable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipShowDate').enable({emitEvent: false});
-      this.timeSeriesChartWidgetSettingsForm.get('tooltipHideZeroFalse').enable();
+      this.timeSeriesChartWidgetSettingsForm.get('tooltipHideZeroValues').enable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundColor').enable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundBlur').enable();
       if (tooltipShowDate) {
@@ -250,7 +250,7 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
       this.timeSeriesChartWidgetSettingsForm.get('tooltipDateFont').disable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipDateColor').disable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipDateInterval').disable();
-      this.timeSeriesChartWidgetSettingsForm.get('tooltipHideZeroFalse').disable();
+      this.timeSeriesChartWidgetSettingsForm.get('tooltipHideZeroValues').disable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundColor').disable();
       this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundBlur').disable();
     }

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

@@ -118,6 +118,7 @@ import { CompiledTbFunction } from '@shared/models/js-function.models';
 import { FormProperty } from '@shared/models/dynamic-form.models';
 import { ExportableEntity } from '@shared/models/base-data';
 import { TbUnit } from '@shared/models/unit.models';
+import { UnitService } from '@core/services/unit.service';
 
 export interface IWidgetAction {
   name: string;
@@ -225,6 +226,7 @@ export class WidgetContext {
   userSettingsService: UserSettingsService;
   utilsService: UtilsService;
   telemetryWsService: TelemetryWebsocketService;
+  unitService: UnitService;
   telemetrySubscribers?: Array<TelemetrySubscriber | SharedTelemetrySubscriber>;
   date: DatePipe;
   imagePipe: ImagePipe;

ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html

@@ -484,7 +484,7 @@
             <span translate>notification.threshold</span>
             <div class="flex flex-1 flex-row items-center justify-start">
               <mat-slider class="flex-1" min="0" max="100" step="1" discrete [displayWith]="formatLabel">
-                <input matSliderThumb formControlName="threshold">
+                <input matSliderThumb formControlName="threshold" [value]="entitiesLimitTemplateForm.get('triggerConfig.threshold').value">
               </mat-slider>
               <mat-form-field class="limit-slider-value" subscriptSizing="dynamic">
                 <input matInput formControlName="threshold" type="number" step="1"
@@ -603,7 +603,7 @@
             <span translate>notification.cpu-threshold</span>
             <div class="flex flex-1 flex-row items-center justify-start">
               <mat-slider class="flex-1" min="0" max="100" step="1" discrete [displayWith]="formatLabel">
-                <input matSliderThumb formControlName="cpuThreshold">
+                <input matSliderThumb formControlName="cpuThreshold" [value]="resourceUsageShortageTemplateForm.get('triggerConfig.cpuThreshold').value">
               </mat-slider>
               <mat-form-field class="limit-slider-value" subscriptSizing="dynamic">
                 <input matInput formControlName="cpuThreshold" type="number" step="1"
@@ -618,7 +618,7 @@
             <span translate>notification.ram-threshold</span>
             <div class="flex flex-1 flex-row items-center justify-start">
               <mat-slider class="flex-1" min="0" max="100" step="1" discrete [displayWith]="formatLabel">
-                <input matSliderThumb formControlName="ramThreshold">
+                <input matSliderThumb formControlName="ramThreshold" [value]="resourceUsageShortageTemplateForm.get('triggerConfig.ramThreshold').value">
               </mat-slider>
               <mat-form-field class="limit-slider-value" subscriptSizing="dynamic">
                 <input matInput formControlName="ramThreshold" type="number" step="1"
@@ -633,7 +633,7 @@
             <span translate>notification.storage-threshold</span>
             <div class="flex flex-1 flex-row items-center justify-start">
               <mat-slider class="flex-1" min="0" max="100" step="1" discrete [displayWith]="formatLabel">
-                <input matSliderThumb formControlName="storageThreshold">
+                <input matSliderThumb formControlName="storageThreshold" [value]="resourceUsageShortageTemplateForm.get('triggerConfig.storageThreshold').value">
               </mat-slider>
               <mat-form-field class="limit-slider-value" subscriptSizing="dynamic">
                 <input matInput formControlName="storageThreshold" type="number" step="1"

ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts

@@ -1304,7 +1304,7 @@ export const scadaSymbolContextCompletion = (metadata: ScadaSymbolMetadata, tags
           },
           formatValue: {
             meta: 'function',
-            description: 'Formats numeric value according to specified decimals and units',
+            description: 'Formats a numeric value according to specified settings or individual parameters for decimals and units, using a ValueFormatProcessor instance.',
             args: [
               {
                 name: 'value',
@@ -1312,27 +1312,27 @@ export const scadaSymbolContextCompletion = (metadata: ScadaSymbolMetadata, tags
                 type: 'any'
               },
               {
-                name: 'dec',
+                name: 'settingsOrDec',
-                description: 'Number of decimal digits',
+                description: 'Either a ValueFormatSettings object containing formatting settings or the number of decimal digits. ValueFormatSettings includes: decimals (number of decimal digits, optional), units (unit specification as string or TbUnitMapping, optional), showZeroDecimals (whether to keep zero decimal digits, optional), ignoreUnitSymbol (whether to exclude unit symbol from output, optional).',
-                type: 'number',
+                type: 'ValueFormatSettings | number',
                 optional: true
               },
               {
                 name: 'units',
-                description: 'Units to append to the formatted value',
+                description: 'Units to append to the formatted value, applied only if settingsOrDec is a number',
                 type: 'string',
                 optional: true
               },
               {
                 name: 'showZeroDecimals',
-                description: 'Whether to keep zero decimal digits',
+                description: 'Whether to keep zero decimal digits, applied only if settingsOrDec is a number',
                 type: 'boolean',
                 optional: true
               }
             ],
             return: {
-              type: 'string',
+              description: 'The formatted value as a string. Returns undefined if the value cannot be formatted and settingsOrDec is not an object.',
-              description: 'Formatted value'
+              type: 'string | undefined'
             }
           },
           text: {
@@ -1479,6 +1479,47 @@ export const scadaSymbolContextCompletion = (metadata: ScadaSymbolMetadata, tags
                 type: 'any'
               }
             ]
+          },
+          unitSymbol: {
+            meta: 'function',
+            description: 'Retrieves the target unit symbol based on the current unit system or the provided unit.',
+            args: [
+              {
+                name: 'unit',
+                description: 'Unit specification, either a string or a TbUnitMapping object defining unit mappings for different systems.',
+                type: 'TbUnit'
+              }
+            ],
+            return: {
+              description: 'The target unit symbol as a string, or the \'from\' unit if no mapping is found for the current unit system.',
+              type: 'string'
+            }
+          },
+          convertUnitValue: {
+            meta: 'function',
+            description: 'Converts a numeric value from one unit to another, either using a TbUnit mapping or explicit from/to units. Returns the original value on conversion failure.',
+            args: [
+              {
+                name: 'value',
+                description: 'Numeric value to be converted',
+                type: 'number'
+              },
+              {
+                name: 'unit',
+                description: 'Unit specification, either a string representing the source unit or a TbUnitMapping object for system-based conversion',
+                type: 'TbUnit'
+              },
+              {
+                name: 'to',
+                description: 'Optional target unit to convert to. If not provided, the target unit is derived from the TbUnitMapping and current unit system.',
+                type: 'string',
+                optional: true
+              }
+            ],
+            return: {
+              description: 'The converted numeric value. Returns the original value if conversion fails or no conversion is needed.',
+              type: 'number'
+            }
           }
         }
       },

ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts

@@ -294,7 +294,8 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit, O
           disabled: hideAggInterval
         }],
         fixedTimewindow: [{
-          value: isDefined(history?.fixedTimewindow) ? history.fixedTimewindow : null,
+          value: isDefined(history?.fixedTimewindow) && this.timewindow.selectedTab === TimewindowType.HISTORY
+            && history.historyType === HistoryWindowType.FIXED ? history.fixedTimewindow : null,
           disabled: history.hideInterval || history.hideFixedInterval
         }],
         quickInterval: [{

ui-ngx/src/app/shared/models/widget/maps/map-export.models.ts → ui-ngx/src/app/shared/models/widget/maps/map-model.definition.ts

@@ -17,14 +17,15 @@
 import { EntityAliases, EntityAliasInfo, getEntityAliasId } from '@shared/models/alias.models';
 import { FilterInfo, Filters, getFilterId } from '@shared/models/query/query.models';
 import { Dashboard } from '@shared/models/dashboard.models';
-import { DatasourceType, Widget } from '@shared/models/widget.models';
+import { Datasource, DatasourceType, Widget } from '@shared/models/widget.models';
 import {
   BaseMapSettings,
   MapDataLayerSettings,
   MapDataSourceSettings,
+  mapDataSourceSettingsToDatasource,
   MapType
 } from '@shared/models/widget/maps/map.models';
-import { WidgetExportDefinition } from '@shared/models/widget/widget-export.models';
+import { WidgetModelDefinition } from '@shared/models/widget/widget-model.definition';
 
 interface AliasFilterPair {
   alias?: EntityAliasInfo,
@@ -45,7 +46,7 @@ interface MapDatasourcesInfo {
   additionalDataSources?: ExportDataSourceInfo;
 }
 
-export const MapExportDefinition: WidgetExportDefinition<MapDatasourcesInfo> = {
+export const MapModelDefinition: WidgetModelDefinition<MapDatasourcesInfo> = {
   testWidget(widget: Widget): boolean {
     if (widget?.config?.settings) {
       const settings = widget.config.settings;
@@ -103,6 +104,26 @@ export const MapExportDefinition: WidgetExportDefinition<MapDatasourcesInfo> = {
     if (info?.additionalDataSources) {
       updateMapDatasourceFromExportInfo(entityAliases, filters, settings.additionalDataSources, info.additionalDataSources);
     }
+  },
+  datasources(widget: Widget): Datasource[] {
+    const settings: BaseMapSettings = widget.config.settings as BaseMapSettings;
+    const datasources: Datasource[] = [];
+    if (settings.trips?.length) {
+      datasources.push(...getMapDataLayersDatasources(settings.trips));
+    }
+    if (settings.markers?.length) {
+      datasources.push(...getMapDataLayersDatasources(settings.markers));
+    }
+    if (settings.polygons?.length) {
+      datasources.push(...getMapDataLayersDatasources(settings.polygons));
+    }
+    if (settings.circles?.length) {
+      datasources.push(...getMapDataLayersDatasources(settings.circles));
+    }
+    if (settings.additionalDataSources?.length) {
+      datasources.push(...getMapDataLayersDatasources(settings.additionalDataSources));
+    }
+    return datasources;
   }
 };
 
@@ -189,3 +210,16 @@ const prepareAliasAndFilterPair = (dashboard: Dashboard, settings: MapDataSource
     return null;
   }
 }
+
+const getMapDataLayersDatasources = (settings: MapDataLayerSettings[] | MapDataSourceSettings[]): Datasource[] => {
+  const datasources: Datasource[] = [];
+  settings.forEach((dsSettings) => {
+    datasources.push(mapDataSourceSettingsToDatasource(dsSettings));
+    if ((dsSettings as MapDataLayerSettings).additionalDataSources?.length) {
+      (dsSettings as MapDataLayerSettings).additionalDataSources.forEach((ds) => {
+        datasources.push(mapDataSourceSettingsToDatasource(ds));
+      });
+    }
+  });
+  return datasources;
+};

ui-ngx/src/app/shared/models/widget/widget-export.models.ts → ui-ngx/src/app/shared/models/widget/widget-model.definition.ts

@@ -14,22 +14,23 @@
 /// limitations under the License.
 ///
 
-import { Widget } from '@shared/models/widget.models';
+import { Datasource, Widget } from '@shared/models/widget.models';
 import { Dashboard } from '@shared/models/dashboard.models';
 import { EntityAliases } from '@shared/models/alias.models';
 import { Filters } from '@shared/models/query/query.models';
-import { MapExportDefinition } from '@shared/models/widget/maps/map-export.models';
+import { MapModelDefinition } from '@shared/models/widget/maps/map-model.definition';
 
-export interface WidgetExportDefinition<T = any> {
+export interface WidgetModelDefinition<T = any> {
   testWidget(widget: Widget): boolean;
   prepareExportInfo(dashboard: Dashboard, widget: Widget): T;
   updateFromExportInfo(widget: Widget, entityAliases: EntityAliases, filters: Filters, info: T): void;
+  datasources(widget: Widget): Datasource[];
 }
 
-const widgetExportDefinitions: WidgetExportDefinition[] = [
+const widgetModelRegistry: WidgetModelDefinition[] = [
-  MapExportDefinition
+  MapModelDefinition
 ];
 
-export const getWidgetExportDefinition = (widget: Widget): WidgetExportDefinition => {
+export const findWidgetModelDefinition = (widget: Widget): WidgetModelDefinition => {
-  return widgetExportDefinitions.find(def => def.testWidget(widget));
+  return widgetModelRegistry.find(def => def.testWidget(widget));
 }

ui-ngx/src/assets/dashboard/api_usage.json

@@ -7885,7 +7885,7 @@
                         },
                         "tooltipDateColor": "rgba(0, 0, 0, 0.76)",
                         "tooltipDateInterval": true,
-                        "tooltipHideZeroFalse": true,
+                        "tooltipHideZeroValues": true,
                         "tooltipBackgroundColor": "rgba(255, 255, 255, 0.76)",
                         "tooltipBackgroundBlur": 4,
                         "animation": {
@@ -8294,7 +8294,7 @@
                         },
                         "tooltipDateColor": "rgba(0, 0, 0, 0.76)",
                         "tooltipDateInterval": true,
-                        "tooltipHideZeroFalse": true,
+                        "tooltipHideZeroValues": true,
                         "tooltipBackgroundColor": "rgba(255, 255, 255, 0.76)",
                         "tooltipBackgroundBlur": 4,
                         "animation": {

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3442,6 +3442,7 @@
             "power-button-background": "Power button background",
             "value-box-background": "Value box background",
             "value-units": "Value units",
+            "enable-units-scale": "Enable units on scale",
             "filtration-mode": "Filtration mode",
             "filtration-mode-hint": "Integer value indication the current filtration mode.",
             "filtration-mode-update": "Filtration mode update state",
@@ -5885,7 +5886,7 @@
         "date": "Date",
         "show-date-time-interval": "Show date time interval",
         "show-date-time-interval-hint": "Show date time interval according to the data aggregation.",
-        "hide-zero-false-tooltip-values": "Hide zero/false values",
+        "hide-zero-tooltip-values": "Hide zero values",
         "background-color": "Background color",
         "background-blur": "Background blur"
     },