UI: Add unit converter support in scada system

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, id: 0}));\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, id: 1}));\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, id: 2}));\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, showZeroDecimals: false});\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, showZeroDecimals: false}));\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, showZeroDecimals: false}));\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, showZeroDecimals: false}));",
       "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, showZeroDecimals: false, id: 3}));",
       "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, showZeroDecimals: false, id: 1}));",
       "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, showZeroDecimals: false, id: 0}));",
       "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, showZeroDecimals: false, id: 2}));",
       "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, showZeroDecimals: false});\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, showZeroDecimals: false});\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, showZeroDecimals: false});\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, showZeroDecimals: false}));\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, showZeroDecimals: false}));\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, showZeroDecimals: false, id: 1}));",
       "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, showZeroDecimals: false, id: 0}));",
       "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, showZeroDecimals: false, id: 2}));",
       "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, showZeroDecimals: false});\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, showZeroDecimals: false, id: 0}));",
       "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, showZeroDecimals: false, id: 1}));",
       "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, showZeroDecimals: false});\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
     },

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,
@@ -58,7 +57,13 @@ import {
 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 +77,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: ValueFormatIdSettings): 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 +98,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 {
@@ -175,6 +184,10 @@ export interface ScadaSymbolMetadata {
   properties: FormProperty[];
 }
 
+interface ValueFormatIdSettings extends ValueFormatSettings {
+  id?: number;
+}
+
 export const emptyMetadata = (width?: number, height?: number): ScadaSymbolMetadata => ({
   title: '',
   widgetSizeX: width ? Math.max(Math.round(width/100), 1) : 3,
@@ -502,6 +515,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 +630,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 +646,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 +827,34 @@ export class ScadaSymbolObject {
     }
   }
 
+  private unitSymbol(unit: TbUnit): string {
+    return this.ctx.$scope.$injector.get(this.ctx.servicesMap.get('unitService')).getTargetUnitSymbol(unit);
+  }
+
+  private convertUnitValue(value: number, unit: TbUnit): number {
+    return this.ctx.$scope.$injector.get(this.ctx.servicesMap.get('unitService')).convertUnitValue(value, unit);
+  }
+
+  private formatValue(value: any, settings: ValueFormatIdSettings): string;
+  private formatValue(value: any, dec?: number, units?: string, showZeroDecimals?: boolean): string | undefined;
+  private formatValue(value: any, settingsOrDec?: ValueFormatIdSettings | number, units?: string, showZeroDecimals?: boolean): string {
+    const id = (settingsOrDec as ValueFormatIdSettings)?.id || 0;
+    if (!this.valueProcessor[id]) {
+      let valueFormatSettings: ValueFormatSettings;
+      if (typeof settingsOrDec === 'object') {
+        valueFormatSettings = deepClone(settingsOrDec, ['id']);
+      } else {
+        valueFormatSettings = {
+          units,
+          decimals: settingsOrDec,
+          showZeroDecimals
+        }
+      }
+      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/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,26 @@ export const scadaSymbolContextCompletion = (metadata: ScadaSymbolMetadata, tags
                 type: 'any'
               },
               {
-                name: 'dec',
+                name: 'settingsOrDec',
-                description: 'Number of decimal digits',
+                description: 'Either a ValueFormatIdSettings object containing formatting settings or the number of decimal digits. ValueFormatIdSettings 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), and id (unique identifier for the processor, optional).',                type: 'ValueFormatIdSettings | number',
-                type: '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 +1478,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/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",