Merge remote-tracking branch 'upstream/rc' into merge

12 months ago · 46a920bd0b
1270 changed files with 93573 additions and 24582 deletions
--- a/README.md
+++ b/README.md
@ -5,6 +5,7 @@ ThingsBoard is an open-source IoT platform for data collection, processing, visu

 <img src="./img/logo.png?raw=true" width="100" height="100">

+
 ## Documentation

 ThingsBoard documentation is hosted on [thingsboard.io](https://thingsboard.io/docs).
@ -14,6 +15,9 @@ ThingsBoard documentation is hosted on [thingsboard.io](https://thingsboard.io/d
 [**Smart energy**](https://thingsboard.io/smart-energy/)
 [![Smart energy](https://user-images.githubusercontent.com/8308069/152984256-eb48564a-645c-468d-912b-f554b63104a5.gif "Smart energy")](https://thingsboard.io/smart-energy/)

+[**SCADA Swimming pool**](https://thingsboard.io/use-cases/scada/)
+[![SCADA Swimming pool](https://github.com/user-attachments/assets/0878a2f5-d358-47c5-b295-03b4533685cf "SCADA Swimming pool")](https://thingsboard.io/use-cases/scada/)
+
 [**Fleet tracking**](https://thingsboard.io/fleet-tracking/)
 [![Fleet tracking](https://user-images.githubusercontent.com/8308069/152984528-0054ed55-8b8b-4cda-ba45-02fe95a81222.gif "Fleet tracking")](https://thingsboard.io/fleet-tracking/)

@ -32,7 +36,6 @@ Collect and Visualize your IoT data in minutes by following this [guide](https:/

 ## Support

- - [Q&A forum](https://groups.google.com/forum/#!forum/thingsboard)
 - [Stackoverflow](http://stackoverflow.com/questions/tagged/thingsboard)

 ## Licenses
--- a/application/pom.xml
+++ b/application/pom.xml
@ -20,7 +20,7 @@
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.thingsboard</groupId>
-        <version>4.0.1-RC</version>
+        <version>4.1.0-RC</version>
        <artifactId>thingsboard</artifactId>
    </parent>
    <artifactId>application</artifactId>
@ -128,6 +128,10 @@
            <groupId>org.thingsboard.common</groupId>
            <artifactId>edqs</artifactId>
        </dependency>
+        <dependency>
+            <groupId>org.thingsboard.common</groupId>
+            <artifactId>discovery-api</artifactId>
+        </dependency>
        <dependency>
            <groupId>org.thingsboard</groupId>
            <artifactId>dao</artifactId>
--- a/application/src/main/data/json/demo/dashboards/rule_engine_statistics.json
+++ b/application/src/main/data/json/demo/dashboards/rule_engine_statistics.json
@ -564,6 +564,7 @@
            },
            "tooltipDateColor": "rgba(0, 0, 0, 0.76)",
            "tooltipDateInterval": true,
+            "tooltipHideZeroValues": true,
            "tooltipBackgroundColor": "rgba(255, 255, 255, 0.76)",
            "tooltipBackgroundBlur": 4,
            "animation": {
@ -977,6 +978,7 @@
            },
            "tooltipDateColor": "rgba(0, 0, 0, 0.76)",
            "tooltipDateInterval": true,
+            "tooltipHideZeroValues": true,
            "tooltipBackgroundColor": "rgba(255, 255, 255, 0.76)",
            "tooltipBackgroundBlur": 4,
            "animation": {
--- a/application/src/main/data/json/system/scada_symbols/3-phase-voltage-relay-hp.svg
+++ b/application/src/main/data/json/system/scada_symbols/3-phase-voltage-relay-hp.svg
@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" width="400" height="400" fill="none" version="1.1" viewBox="0 0 400 400"><tb:metadata xmlns=""><![CDATA[{
  "title": "HP 3 phase voltage relay",
-  "description": "Three phase voltage relay with various states and inications.",
+  "description": "Three phase voltage relay with various states and indications.",
  "searchTags": [
    "energy",
    "power",
@ -39,7 +39,7 @@
    },
    {
      "tag": "firstPhaseValue",
-      "stateRenderFunction": "if (ctx.values.running) {\n    element.show();\n    ctx.api.font(element, ctx.properties.currentVoltageFont, ctx.properties.currentVoltageColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.firstPhaseVoltage, 0, null, 0));\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.values.running) {\n    element.show();\n    ctx.api.font(element, ctx.properties.currentVoltageFont, ctx.properties.currentVoltageColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.firstPhaseVoltage, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
@ -49,7 +49,7 @@
    },
    {
      "tag": "secondPhaseValue",
-      "stateRenderFunction": "if (ctx.values.running) {\n    element.show();\n    ctx.api.font(element, ctx.properties.currentVoltageFont, ctx.properties.currentVoltageColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.secondPhaseVoltage, 0, null, 0));\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.values.running) {\n    element.show();\n    ctx.api.font(element, ctx.properties.currentVoltageFont, ctx.properties.currentVoltageColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.secondPhaseVoltage, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
@ -59,12 +59,12 @@
    },
    {
      "tag": "thirdPhaseValue",
-      "stateRenderFunction": "if (ctx.values.running) {\n    element.show();\n    ctx.api.font(element, ctx.properties.currentVoltageFont, ctx.properties.currentVoltageColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.thirdPhaseVoltage, 0, null, 0));\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.values.running) {\n    element.show();\n    ctx.api.font(element, ctx.properties.currentVoltageFont, ctx.properties.currentVoltageColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.thirdPhaseVoltage, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
      "tag": "units",
-      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.properties.units);\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.api.unitSymbol(ctx.properties.units));\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
@ -488,6 +488,7 @@
      "name": "{i18n:scada.symbol.units}",
      "type": "units",
      "default": "V",
+      "supportsUnitConversion": true,
      "disabled": false,
      "visible": true
    },
--- a/application/src/main/data/json/system/scada_symbols/bottom-flow-meter.svg
+++ b/application/src/main/data/json/system/scada_symbols/bottom-flow-meter.svg
@ -57,7 +57,7 @@
    },
    {
      "tag": "value",
-      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, '', false);\nctx.api.text(element, value);\n",
+      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, {units: ctx.properties.valueUnits, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true});\nctx.api.text(element, value);\n",
      "actions": {
        "click": {
          "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@ -66,7 +66,7 @@
    },
    {
      "tag": "valueUnits",
-      "stateRenderFunction": "var units = ctx.properties.valueUnits;\nctx.api.text(element, units || '');\n",
+      "stateRenderFunction": "var units = ctx.api.unitSymbol(ctx.properties.valueUnits);\nctx.api.text(element, units || '');\n",
      "actions": {
        "click": {
          "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@ -464,8 +464,7 @@
      "type": "units",
      "default": "m³/hr",
      "fieldClass": "medium-width",
-      "disabled": false,
-      "visible": true
+      "supportsUnitConversion": true
    },
    {
      "id": "valueDecimals",
--- a/application/src/main/data/json/system/scada_symbols/conical-tank.svg
+++ b/application/src/main/data/json/system/scada_symbols/conical-tank.svg
@ -159,96 +159,51 @@
      "name": "Stand",
      "type": "switch",
      "default": false,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "tankColor",
      "name": "{i18n:scada.symbol.tank-color}",
      "type": "color",
      "default": "#E5E5E5",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "fluidColor",
      "name": "{i18n:scada.symbol.fluid-color}",
      "type": "color",
      "default": "#1EC1F480",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueBox",
      "name": "{i18n:scada.symbol.value-box}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueBoxColor",
      "name": "{i18n:scada.symbol.value-box}",
      "type": "color",
      "default": "#F3F3F3",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "valueBox",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueUnits",
      "name": "{i18n:scada.symbol.value-text}",
      "type": "units",
      "default": "gal",
-      "required": null,
      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": "valueBox",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "supportsUnitConversion": true,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueTextFont",
@ -261,64 +216,35 @@
        "weight": "500",
        "style": "normal"
      },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "valueBox",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueTextColor",
      "name": "{i18n:scada.symbol.value-text}",
      "type": "color",
      "default": "#0000008A",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "valueBox",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "scale",
      "name": "{i18n:scada.symbol.scale}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "transparent",
      "name": "{i18n:scada.symbol.transparent-mode}",
      "type": "switch",
      "default": false,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "scale",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    }
  ]
 }]]></tb:metadata>
--- a/application/src/main/data/json/system/scada_symbols/cylindrical-tank.svg
+++ b/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",
-      "disabled": true,
+      "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}",
--- a/application/src/main/data/json/system/scada_symbols/dynamic-horizontal-scale-hp.svg
+++ b/application/src/main/data/json/system/scada_symbols/dynamic-horizontal-scale-hp.svg
@ -43,7 +43,7 @@
    },
    {
      "tag": "maxValue",
-      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.properties.maxValue);\n}",
+      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.api.convertUnitValue(ctx.properties.maxValue, ctx.properties.units).toFixed(0));\n}",
      "actions": null
    },
    {
@ -53,7 +53,7 @@
    },
    {
      "tag": "minValue",
-      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.properties.minValue);\n}",
+      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.api.convertUnitValue(ctx.properties.minValue, ctx.properties.units).toFixed(0));\n}",
      "actions": null
    },
    {
@ -73,12 +73,12 @@
    },
    {
      "tag": "units",
-      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.properties.units);\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.api.unitSymbol(ctx.properties.units));\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
      "tag": "value",
-      "stateRenderFunction": "if (ctx.properties.value) {\n    element.show();\n    ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, null, ctx.properties.valueDecimals));\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.value) {\n    element.show();\n    ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.value, {units: ctx.properties.units, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true}));\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
@ -329,16 +329,8 @@
      "name": "{i18n:scada.symbol.min-max-value}",
      "type": "switch",
      "default": false,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "minValue",
@ -347,14 +339,9 @@
      "default": 0,
      "required": true,
      "subLabel": "{i18n:scada.symbol.min-value}",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "maxValue",
@ -363,30 +350,17 @@
      "default": 100,
      "required": true,
      "subLabel": "{i18n:scada.symbol.max-value}",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "value",
      "name": "{i18n:scada.symbol.value}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "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": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueColor",
      "name": "{i18n:scada.symbol.value}",
      "type": "color",
      "default": "#002878",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "value",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "label",
      "name": "{i18n:scada.symbol.label}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "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,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "labelFont",
@ -485,64 +429,35 @@
        "weight": "500",
        "style": "normal"
      },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "label",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "labelColor",
      "name": "{i18n:scada.symbol.label}",
      "type": "color",
      "default": "#000000DE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "label",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showUnits",
      "name": "{i18n:scada.symbol.units}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "units",
      "name": "{i18n:scada.symbol.units}",
      "type": "units",
      "default": "°C",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": "showUnits",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "supportsUnitConversion": true,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "unitsFont",
@ -555,224 +470,119 @@
        "weight": "500",
        "style": "normal"
      },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "showUnits",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "unitsColor",
      "name": "{i18n:scada.symbol.units}",
      "type": "color",
      "default": "#000000DE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "showUnits",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "arrowColor",
      "name": "{i18n:scada.symbol.arrow-color}",
      "type": "color",
      "default": "#666666",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showTarget",
      "name": "{i18n:scada.symbol.target}",
      "type": "switch",
      "default": false,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "targetColor",
      "name": "{i18n:scada.symbol.target}",
      "type": "color",
      "default": "#DEDEDE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "showTarget",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": true,
+      "visible": true
    },
    {
      "id": "showHighCriticalScale",
      "name": "{i18n:scada.symbol.show-high-critical-scale}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showHighWarningScale",
      "name": "{i18n:scada.symbol.show-high-warning-scale}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showLowWarningScale",
      "name": "{i18n:scada.symbol.show-low-warning-scale}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showLowCriticalScale",
      "name": "{i18n:scada.symbol.show-low-critical-scale}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "scaleColor",
      "name": "{i18n:scada.symbol.scale-color}",
      "type": "color",
      "default": "#C8DFF7",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "defaultWarningScaleColor",
      "name": "{i18n:scada.symbol.warning-scale-color}",
      "type": "color",
      "default": "#EBEBEB",
-      "required": null,
      "subLabel": "Default",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "activeWarningScaleColor",
      "name": "{i18n:scada.symbol.warning-scale-color}",
      "type": "color",
      "default": "#FAA405",
-      "required": null,
      "subLabel": "Active",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "defaultCriticalScaleColor",
      "name": "{i18n:scada.symbol.critical-scale-color}",
      "type": "color",
      "default": "#666666",
-      "required": null,
      "subLabel": "Default",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "activeCriticalScaleColor",
      "name": "{i18n:scada.symbol.critical-scale-color}",
      "type": "color",
      "default": "#D12730",
-      "required": null,
      "subLabel": "Active",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    }
  ]
 }]]></tb:metadata>
--- a/application/src/main/data/json/system/scada_symbols/dynamic-vertical-scale-hp.svg
+++ b/application/src/main/data/json/system/scada_symbols/dynamic-vertical-scale-hp.svg
@ -43,7 +43,7 @@
    },
    {
      "tag": "maxValue",
-      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.properties.maxValue);\n}",
+      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.api.convertUnitValue(ctx.properties.maxValue, ctx.properties.units).toFixed(0));\n}",
      "actions": null
    },
    {
@ -53,7 +53,7 @@
    },
    {
      "tag": "minValue",
-      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.properties.minValue);\n}",
+      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.api.convertUnitValue(ctx.properties.minValue, ctx.properties.units).toFixed(0));\n}",
      "actions": null
    },
    {
@ -73,12 +73,12 @@
    },
    {
      "tag": "units",
-      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.properties.units);\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.api.unitSymbol(ctx.properties.units));\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
      "tag": "value",
-      "stateRenderFunction": "if (ctx.properties.value) {\n    element.show();\n    ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, null, ctx.properties.valueDecimals));\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.value) {\n    element.show();\n    ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.value, {units: ctx.properties.units, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true}));\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
@ -329,16 +329,8 @@
      "name": "{i18n:scada.symbol.min-max-value}",
      "type": "switch",
      "default": false,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "minValue",
@ -347,14 +339,9 @@
      "default": 0,
      "required": true,
      "subLabel": "{i18n:scada.symbol.min-value}",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "maxValue",
@ -363,30 +350,17 @@
      "default": 100,
      "required": true,
      "subLabel": "{i18n:scada.symbol.max-value}",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "value",
      "name": "{i18n:scada.symbol.value}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "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,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueColor",
      "name": "{i18n:scada.symbol.value}",
      "type": "color",
      "default": "#002878",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "label",
      "name": "{i18n:scada.symbol.label}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "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,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "labelFont",
@ -485,64 +425,34 @@
        "weight": "500",
        "style": "normal"
      },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "labelColor",
      "name": "{i18n:scada.symbol.label}",
      "type": "color",
      "default": "#000000DE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showUnits",
      "name": "{i18n:scada.symbol.units}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "units",
      "name": "{i18n:scada.symbol.units}",
      "type": "units",
      "default": "°C",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "required": false,
+      "supportsUnitConversion": true,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "unitsFont",
@ -555,224 +465,117 @@
        "weight": "500",
        "style": "normal"
      },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "unitsColor",
      "name": "{i18n:scada.symbol.units}",
      "type": "color",
      "default": "#000000DE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "arrowColor",
      "name": "{i18n:scada.symbol.arrow-color}",
      "type": "color",
      "default": "#666666",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showTarget",
      "name": "{i18n:scada.symbol.target}",
      "type": "switch",
      "default": false,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "targetColor",
      "name": "{i18n:scada.symbol.target}",
      "type": "color",
      "default": "#DEDEDE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "showTarget",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": true,
+      "visible": true
    },
    {
      "id": "showHighCriticalScale",
      "name": "{i18n:scada.symbol.show-high-critical-scale}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showHighWarningScale",
      "name": "{i18n:scada.symbol.show-high-warning-scale}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showLowWarningScale",
      "name": "{i18n:scada.symbol.show-low-warning-scale}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showLowCriticalScale",
      "name": "{i18n:scada.symbol.show-low-critical-scale}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "scaleColor",
      "name": "{i18n:scada.symbol.scale-color}",
      "type": "color",
      "default": "#C8DFF7",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "defaultWarningScaleColor",
      "name": "{i18n:scada.symbol.warning-scale-color}",
      "type": "color",
      "default": "#EBEBEB",
-      "required": null,
      "subLabel": "Default",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "activeWarningScaleColor",
      "name": "{i18n:scada.symbol.warning-scale-color}",
      "type": "color",
      "default": "#FAA405",
-      "required": null,
      "subLabel": "Active",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "defaultCriticalScaleColor",
      "name": "{i18n:scada.symbol.critical-scale-color}",
      "type": "color",
      "default": "#666666",
-      "required": null,
      "subLabel": "Default",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "activeCriticalScaleColor",
      "name": "{i18n:scada.symbol.critical-scale-color}",
      "type": "color",
      "default": "#D12730",
-      "required": null,
      "subLabel": "Active",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    }
  ]
 }]]></tb:metadata>
--- a/application/src/main/data/json/system/scada_symbols/elevated-tank.svg
+++ b/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}",
--- a/application/src/main/data/json/system/scada_symbols/energy-meter-hp.svg
+++ b/application/src/main/data/json/system/scada_symbols/energy-meter-hp.svg
@ -38,12 +38,12 @@
    },
    {
      "tag": "units",
-      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.properties.units);\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.api.unitSymbol(ctx.properties.units));\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
      "tag": "value",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.measured, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.measured, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
      "actions": null
    },
    {
@ -353,6 +353,7 @@
      "name": "{i18n:scada.symbol.label}",
      "type": "text",
      "default": "T1",
+      "disableOnProperty": "showLabel",
      "fieldClass": "medium-width",
      "disabled": false,
      "visible": true
@ -368,6 +369,7 @@
        "weight": "400",
        "style": "normal"
      },
+      "disableOnProperty": "showLabel",
      "disabled": false,
      "visible": true
    },
@ -376,6 +378,7 @@
      "name": "{i18n:scada.symbol.label}",
      "type": "color",
      "default": "#000",
+      "disableOnProperty": "showLabel",
      "disabled": false,
      "visible": true
    },
@ -392,6 +395,7 @@
      "name": "{i18n:scada.symbol.units}",
      "type": "units",
      "default": "kWh",
+      "supportsUnitConversion": true,
      "disabled": false,
      "visible": true
    },
@ -406,6 +410,7 @@
        "weight": "500",
        "style": "normal"
      },
+      "disableOnProperty": "showUnits",
      "disabled": false,
      "visible": true
    },
@ -414,6 +419,7 @@
      "name": "{i18n:scada.symbol.units}",
      "type": "color",
      "default": "#000",
+      "disableOnProperty": "showUnits",
      "disabled": false,
      "visible": true
    },
--- a/application/src/main/data/json/system/scada_symbols/four-rate-energy-meter-hp.svg
+++ b/application/src/main/data/json/system/scada_symbols/four-rate-energy-meter-hp.svg
@ -38,7 +38,7 @@
    },
    {
      "tag": "export-rate",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.exportValueFont, ctx.properties.exportValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.exportRate, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.exportValueFont, ctx.properties.exportValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.exportRate, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
      "actions": null
    },
    {
@ -48,7 +48,7 @@
    },
    {
      "tag": "night-rate",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.nightValueFont, ctx.properties.nightValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.nightRate, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.nightValueFont, ctx.properties.nightValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.nightRate, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
      "actions": null
    },
    {
@ -58,7 +58,7 @@
    },
    {
      "tag": "off-peak-rate",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.offPeakValueFont, ctx.properties.offPeakValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.offPeakRate, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.offPeakValueFont, ctx.properties.offPeakValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.offPeakRate, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
      "actions": null
    },
    {
@ -68,12 +68,12 @@
    },
    {
      "tag": "peak-rate",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.peakValueFont, ctx.properties.peakValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.peakRate, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.peakValueFont, ctx.properties.peakValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.peakRate, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
      "actions": null
    },
    {
      "tag": "units",
-      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.properties.units);\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.api.unitSymbol(ctx.properties.units));\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
@ -533,6 +533,7 @@
      "group": "{i18n:scada.symbol.off-peak-rate}",
      "type": "text",
      "default": "T1",
+      "disableOnProperty": "showOffPeakLabel",
      "fieldClass": "medium-width",
      "disabled": false,
      "visible": true
@ -549,6 +550,7 @@
        "weight": "normal",
        "style": "normal"
      },
+      "disableOnProperty": "showOffPeakLabel",
      "disabled": false,
      "visible": true
    },
@ -558,6 +560,7 @@
      "group": "{i18n:scada.symbol.off-peak-rate}",
      "type": "color",
      "default": "#000000",
+      "disableOnProperty": "showOffPeakLabel",
      "disabled": false,
      "visible": true
    },
@ -609,6 +612,7 @@
      "group": "{i18n:scada.symbol.night-rate}",
      "type": "text",
      "default": "T2",
+      "disableOnProperty": "showNightLabel",
      "fieldClass": "medium-width",
      "disabled": false,
      "visible": true
@ -625,6 +629,7 @@
        "weight": "normal",
        "style": "normal"
      },
+      "disableOnProperty": "showNightLabel",
      "disabled": false,
      "visible": true
    },
@ -634,6 +639,7 @@
      "group": "{i18n:scada.symbol.night-rate}",
      "type": "color",
      "default": "#000",
+      "disableOnProperty": "showNightLabel",
      "disabled": false,
      "visible": true
    },
@ -685,6 +691,7 @@
      "group": "{i18n:scada.symbol.peak-rate}",
      "type": "text",
      "default": "T3",
+      "disableOnProperty": "showPeakLabel",
      "fieldClass": "medium-width",
      "disabled": false,
      "visible": true
@ -701,6 +708,7 @@
        "weight": "normal",
        "style": "normal"
      },
+      "disableOnProperty": "showPeakLabel",
      "disabled": false,
      "visible": true
    },
@ -710,6 +718,7 @@
      "group": "{i18n:scada.symbol.peak-rate}",
      "type": "color",
      "default": "#000",
+      "disableOnProperty": "showPeakLabel",
      "disabled": false,
      "visible": true
    },
@ -761,6 +770,7 @@
      "group": "{i18n:scada.symbol.export-rate}",
      "type": "text",
      "default": "Export",
+      "disableOnProperty": "showExportLabel",
      "fieldClass": "medium-width",
      "disabled": false,
      "visible": true
@ -777,6 +787,7 @@
        "weight": "normal",
        "style": "normal"
      },
+      "disableOnProperty": "showExportLabel",
      "disabled": false,
      "visible": true
    },
@ -786,6 +797,7 @@
      "group": "{i18n:scada.symbol.export-rate}",
      "type": "color",
      "default": "#000",
+      "disableOnProperty": "showExportLabel",
      "disabled": false,
      "visible": true
    },
@ -835,6 +847,7 @@
      "name": "{i18n:scada.symbol.units}",
      "type": "units",
      "default": "kWh",
+      "supportsUnitConversion": true,
      "disabled": false,
      "visible": true
    },
@ -849,6 +862,7 @@
        "weight": "normal",
        "style": "normal"
      },
+      "disableOnProperty": "showUnits",
      "disabled": false,
      "visible": true
    },
@ -857,6 +871,7 @@
      "name": "{i18n:scada.symbol.units}",
      "type": "color",
      "default": "#000",
+      "disableOnProperty": "showUnits",
      "disabled": false,
      "visible": true
    }
--- a/application/src/main/data/json/system/scada_symbols/heat-pump-hp.svg
+++ b/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,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "stoppedColor",
      "name": "{i18n:scada.symbol.colors}",
      "type": "color",
      "default": "#666666",
-      "required": null,
      "subLabel": "{i18n:scada.symbol.stopped}",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "warningColor",
      "name": "{i18n:scada.symbol.alarm-colors}",
      "type": "color",
      "default": "#FAA405",
-      "required": null,
      "subLabel": "{i18n:scada.symbol.warning}",
      "divider": true,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "criticalColor",
      "name": "{i18n:scada.symbol.alarm-colors}",
      "type": "color",
      "default": "#D12730",
-      "required": null,
      "subLabel": "{i18n:scada.symbol.critical}",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "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": "",
-      "min": null,
-      "max": null,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "maxTemperature",
@ -448,14 +417,9 @@
      "default": 45,
      "required": true,
      "subLabel": "Max",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "temperatureStep",
@ -463,31 +427,17 @@
      "type": "number",
      "default": 1,
      "required": true,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 0.5
+      "step": 0.5,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueTextColor",
      "name": "{i18n:scada.symbol.value-text}",
      "type": "color",
      "default": "#002878",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueTextFont",
@ -500,64 +450,33 @@
        "weight": "500",
        "style": "normal"
      },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueUnits",
      "name": "{i18n:scada.symbol.value-units}",
      "type": "switch",
      "default": false,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "units",
      "name": "{i18n:scada.symbol.value-units}",
      "type": "units",
      "default": "°C",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "supportsUnitConversion": true,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueBoxBackground",
      "name": "{i18n:scada.symbol.value-box-background}",
      "type": "color",
      "default": "#FFFFFF",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    }
  ]
 }]]></tb:metadata>
--- a/application/src/main/data/json/system/scada_symbols/horizontal-connector-hp.svg
+++ b/application/src/main/data/json/system/scada_symbols/horizontal-connector-hp.svg
@ -7,7 +7,7 @@
  "tags": [
    {
      "tag": "arrow",
-      "stateRenderFunction": "var arrow = ctx.values.arrow;\nif (arrow) {\n    element.show();\n    var arrowDirection = ctx.values.arrowDirection;\n    var direticon = element.remember('direticon');\n    var angle = arrowDirection ? 0 : 180;\n    if (!direticon) {\n        element.transform({rotate: angle});\n    } else {\n        ctx.api.transform({rotate: angle, originY: 100});\n        element.remember('direticon', false);\n    }\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "var arrow = ctx.values.arrow;\nif (arrow) {\n    element.show();\n    element.stroke(ctx.properties.lineColor).fill(ctx.properties.lineColor);\n    var arrowDirection = ctx.values.arrowDirection;\n    var direticon = element.remember('direticon');\n    var angle = arrowDirection ? 0 : 180;\n    if (!direticon) {\n        element.transform({rotate: angle});\n    } else {\n        ctx.api.transform({rotate: angle, originY: 100});\n        element.remember('direticon', false);\n    }\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
--- a/application/src/main/data/json/system/scada_symbols/horizontal-inline-flow-meter.svg
+++ b/application/src/main/data/json/system/scada_symbols/horizontal-inline-flow-meter.svg
@ -57,7 +57,7 @@
    },
    {
      "tag": "value",
-      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, '', false);\nctx.api.text(element, value);\n",
+      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, {units: ctx.properties.valueUnits, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true});\nctx.api.text(element, value);\n",
      "actions": {
        "click": {
          "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@ -66,7 +66,7 @@
    },
    {
      "tag": "valueUnits",
-      "stateRenderFunction": "var units = ctx.properties.valueUnits;\nctx.api.text(element, units || '');\n",
+      "stateRenderFunction": "var units = ctx.api.unitSymbol(ctx.properties.valueUnits);\nctx.api.text(element, units || '');\n",
      "actions": {
        "click": {
          "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@ -464,6 +464,7 @@
      "type": "units",
      "default": "m³/hr",
      "fieldClass": "medium-width",
+      "supportsUnitConversion": true,
      "disabled": false,
      "visible": true
    },
--- a/application/src/main/data/json/system/scada_symbols/horizontal-tank-hp.svg
+++ b/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}",
--- a/application/src/main/data/json/system/scada_symbols/horizontal-tank.svg
+++ b/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}",
--- a/application/src/main/data/json/system/scada_symbols/large-conical-tank.svg
+++ b/application/src/main/data/json/system/scada_symbols/large-conical-tank.svg
@ -160,96 +160,51 @@
      "name": "Stand",
      "type": "switch",
      "default": false,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "tankColor",
      "name": "{i18n:scada.symbol.tank-color}",
      "type": "color",
      "default": "#E5E5E5",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "fluidColor",
      "name": "{i18n:scada.symbol.fluid-color}",
      "type": "color",
      "default": "#1EC1F480",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueBox",
      "name": "{i18n:scada.symbol.value-box}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueBoxColor",
      "name": "{i18n:scada.symbol.value-box}",
      "type": "color",
      "default": "#F3F3F3",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "valueBox",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueUnits",
      "name": "{i18n:scada.symbol.value-text}",
      "type": "units",
      "default": "gal",
-      "required": null,
      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": "valueBox",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "supportsUnitConversion": true,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueTextFont",
@ -262,64 +217,35 @@
        "weight": "500",
        "style": "normal"
      },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "valueBox",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueTextColor",
      "name": "{i18n:scada.symbol.value-text}",
      "type": "color",
      "default": "#0000008A",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "valueBox",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "scale",
      "name": "{i18n:scada.symbol.scale}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "transparent",
      "name": "{i18n:scada.symbol.transparent-mode}",
      "type": "switch",
      "default": false,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "scale",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    }
  ]
 }]]></tb:metadata>
--- a/application/src/main/data/json/system/scada_symbols/large-cylindrical-tank.svg
+++ b/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}",
--- a/application/src/main/data/json/system/scada_symbols/large-stand-cylindrical-tank.svg
+++ b/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}",
--- a/application/src/main/data/json/system/scada_symbols/large-stand-vertical-tank.svg
+++ b/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}",
--- a/application/src/main/data/json/system/scada_symbols/large-vertical-tank.svg
+++ b/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}",
--- a/application/src/main/data/json/system/scada_symbols/left-flow-meter.svg
+++ b/application/src/main/data/json/system/scada_symbols/left-flow-meter.svg
@ -57,7 +57,7 @@
    },
    {
      "tag": "value",
-      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, '', false);\nctx.api.text(element, value);\n",
+      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, {units: ctx.properties.valueUnits, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true});\nctx.api.text(element, value);\n",
      "actions": {
        "click": {
          "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@ -66,7 +66,7 @@
    },
    {
      "tag": "valueUnits",
-      "stateRenderFunction": "var units = ctx.properties.valueUnits;\nctx.api.text(element, units || '');\n",
+      "stateRenderFunction": "var units = ctx.api.unitSymbol(ctx.properties.valueUnits);\nctx.api.text(element, units || '');\n",
      "actions": {
        "click": {
          "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@ -463,7 +463,8 @@
      "name": "{i18n:scada.symbol.units}",
      "type": "units",
      "default": "m³/hr",
-      "fieldClass": "medium-width"
+      "fieldClass": "medium-width",
+      "supportsUnitConversion": true
    },
    {
      "id": "valueDecimals",
--- a/application/src/main/data/json/system/scada_symbols/left-heat-pump.svg
+++ b/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,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 0.5
+      "step": 0.5,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueTextColor",
      "name": "{i18n:scada.symbol.value-text}",
      "type": "color",
      "default": "#000000C2",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueTextFont",
@ -499,192 +479,101 @@
        "weight": "500",
        "style": "normal"
      },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueUnits",
      "name": "{i18n:scada.symbol.value-units}",
      "type": "switch",
      "default": false,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "units",
      "name": "{i18n:scada.symbol.value-units}",
      "type": "units",
      "default": "°C",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "supportsUnitConversion": true,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueBoxBackground",
      "name": "{i18n:scada.symbol.value-box-background}",
      "type": "color",
      "default": "#FFFFFF",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "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": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "disabledPowerButtonBackground",
      "name": "{i18n:scada.symbol.power-button-background}",
      "type": "color",
      "default": "#FFFFFF",
-      "required": null,
      "subLabel": "Disabled",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "runningColor",
      "name": "{i18n:scada.symbol.running-color}",
      "type": "color",
      "default": "#1C943E",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "stoppedColor",
      "name": "{i18n:scada.symbol.stopped-color}",
      "type": "color",
      "default": "#696969",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "warningColor",
      "name": "{i18n:scada.symbol.warning-color}",
      "type": "color",
      "default": "#FAA405",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "criticalColor",
      "name": "{i18n:scada.symbol.critical-color}",
      "type": "color",
      "default": "#D12730",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "heatPumpColor",
      "name": "{i18n:scada.symbol.heat-pump-color}",
      "type": "color",
      "default": "#E5E5E5",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "pipeColor",
      "name": "{i18n:scada.symbol.pipe-color}",
      "type": "color",
      "default": "#FFFFFF",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    }
  ]
 }]]></tb:metadata>
--- a/application/src/main/data/json/system/scada_symbols/long-horizontal-connector-hp.svg
+++ b/application/src/main/data/json/system/scada_symbols/long-horizontal-connector-hp.svg
@ -7,7 +7,7 @@
  "tags": [
    {
      "tag": "arrow",
-      "stateRenderFunction": "var arrow = ctx.values.arrow;\nif (arrow) {\n    element.show();\n    var arrowDirection = ctx.values.arrowDirection;\n    var direticon = element.remember('direticon');\n    var angle = arrowDirection ? 0 : 180;\n    if (!direticon) {\n        element.transform({rotate: angle});\n    } else {\n        ctx.api.transform({rotate: angle, originY: 100});\n        element.remember('direticon', false);\n    }\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "var arrow = ctx.values.arrow;\nif (arrow) {\n    element.show();\n    element.stroke(ctx.properties.lineColor).fill(ctx.properties.lineColor);\n    var arrowDirection = ctx.values.arrowDirection;\n    var direticon = element.remember('direticon');\n    var angle = arrowDirection ? 0 : 180;\n    if (!direticon) {\n        element.transform({rotate: angle});\n    } else {\n        ctx.api.transform({rotate: angle, originY: 100});\n        element.remember('direticon', false);\n    }\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
--- a/application/src/main/data/json/system/scada_symbols/long-vertical-connector-hp.svg
+++ b/application/src/main/data/json/system/scada_symbols/long-vertical-connector-hp.svg
@ -7,7 +7,7 @@
  "tags": [
    {
      "tag": "arrow",
-      "stateRenderFunction": "var arrow = ctx.values.arrow;\nif (arrow) {\n    element.show();\n    var arrowDirection = ctx.values.arrowDirection;\n    var direticon = element.remember('direticon');\n    var angle = arrowDirection ? 0 : 180;\n    if (!direticon) {\n        element.transform({rotate: angle});\n    } else {\n        ctx.api.transform({rotate: angle, originY: 100});\n        element.remember('direticon', false);\n    }\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "var arrow = ctx.values.arrow;\nif (arrow) {\n    element.show();\n    element.stroke(ctx.properties.lineColor).fill(ctx.properties.lineColor);\n    var arrowDirection = ctx.values.arrowDirection;\n    var direticon = element.remember('direticon');\n    var angle = arrowDirection ? 0 : 180;\n    if (!direticon) {\n        element.transform({rotate: angle});\n    } else {\n        ctx.api.transform({rotate: angle, originY: 100});\n        element.remember('direticon', false);\n    }\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
--- a/application/src/main/data/json/system/scada_symbols/meter.svg
+++ b/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",
--- a/application/src/main/data/json/system/scada_symbols/pool-hp.svg
+++ b/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}",
--- a/application/src/main/data/json/system/scada_symbols/pool.svg
+++ b/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,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "fluidColor",
      "name": "{i18n:scada.symbol.fluid-color}",
      "type": "color",
      "default": "#1EC1F480",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueBox",
      "name": "{i18n:scada.symbol.value-box}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueBoxColor",
      "name": "{i18n:scada.symbol.value-box}",
      "type": "color",
      "default": "#F3F3F3",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "valueBox",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueUnits",
      "name": "{i18n:scada.symbol.value-text}",
      "type": "units",
      "default": "gal",
-      "required": null,
      "subLabel": "{i18n:scada.symbol.units}",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": "valueBox",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "supportsUnitConversion": true,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueTextFont",
@ -234,48 +197,26 @@
        "weight": "500",
        "style": "normal"
      },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "valueBox",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueTextColor",
      "name": "{i18n:scada.symbol.value-text}",
      "type": "color",
      "default": "#0000008A",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "valueBox",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "transparent",
      "name": "{i18n:scada.symbol.transparent-mode}",
      "type": "switch",
      "default": false,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    }
  ]
 }]]></tb:metadata>
--- a/application/src/main/data/json/system/scada_symbols/right-flow-meter.svg
+++ b/application/src/main/data/json/system/scada_symbols/right-flow-meter.svg
@ -57,7 +57,7 @@
    },
    {
      "tag": "value",
-      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, '', false);\nctx.api.text(element, value);\n",
+      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, {units: ctx.properties.valueUnits, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true});\nctx.api.text(element, value);\n",
      "actions": {
        "click": {
          "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@ -66,7 +66,7 @@
    },
    {
      "tag": "valueUnits",
-      "stateRenderFunction": "var units = ctx.properties.valueUnits;\nctx.api.text(element, units || '');\n",
+      "stateRenderFunction": "var units = ctx.api.unitSymbol(ctx.properties.valueUnits);\nctx.api.text(element, units || '');\n",
      "actions": {
        "click": {
          "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@ -463,7 +463,8 @@
      "name": "{i18n:scada.symbol.units}",
      "type": "units",
      "default": "m³/hr",
-      "fieldClass": "medium-width"
+      "fieldClass": "medium-width",
+      "supportsUnitConversion": true
    },
    {
      "id": "valueDecimals",
--- a/application/src/main/data/json/system/scada_symbols/right-heat-pump.svg
+++ b/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,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 0.5
+      "step": 0.5,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueTextColor",
      "name": "{i18n:scada.symbol.value-text}",
      "type": "color",
      "default": "#000000C2",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueTextFont",
@ -499,192 +479,101 @@
        "weight": "500",
        "style": "normal"
      },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueUnits",
      "name": "{i18n:scada.symbol.value-units}",
      "type": "switch",
      "default": false,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "units",
      "name": "{i18n:scada.symbol.value-units}",
      "type": "units",
      "default": "°C",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "supportsUnitConversion": true,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueBoxBackground",
      "name": "{i18n:scada.symbol.value-box-background}",
      "type": "color",
      "default": "#FFFFFF",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "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": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "disabledPowerButtonBackground",
      "name": "{i18n:scada.symbol.power-button-background}",
      "type": "color",
      "default": "#FFFFFF",
-      "required": null,
      "subLabel": "Disabled",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "runningColor",
      "name": "{i18n:scada.symbol.running-color}",
      "type": "color",
      "default": "#1C943E",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "stoppedColor",
      "name": "{i18n:scada.symbol.stopped-color}",
      "type": "color",
      "default": "#696969",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "warningColor",
      "name": "{i18n:scada.symbol.warning-color}",
      "type": "color",
      "default": "#FAA405",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "criticalColor",
      "name": "{i18n:scada.symbol.critical-color}",
      "type": "color",
      "default": "#D12730",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "heatPumpColor",
      "name": "{i18n:scada.symbol.heat-pump-color}",
      "type": "color",
      "default": "#E5E5E5",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "pipeColor",
      "name": "{i18n:scada.symbol.pipe-color}",
      "type": "color",
      "default": "#FFFFFF",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    }
  ]
 }]]></tb:metadata>
--- a/application/src/main/data/json/system/scada_symbols/short-vertical-tank-hp.svg
+++ b/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}",
--- a/application/src/main/data/json/system/scada_symbols/simple-horizontal-scale-hp.svg
+++ b/application/src/main/data/json/system/scada_symbols/simple-horizontal-scale-hp.svg
@ -43,7 +43,7 @@
    },
    {
      "tag": "maxValue",
-      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.properties.maxValue);\n}",
+      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.api.convertUnitValue(ctx.properties.maxValue, ctx.properties.units).toFixed(0));\n}",
      "actions": null
    },
    {
@ -53,7 +53,7 @@
    },
    {
      "tag": "minValue",
-      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.properties.minValue);\n}",
+      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.api.convertUnitValue(ctx.properties.minValue, ctx.properties.units).toFixed(0));\n}",
      "actions": null
    },
    {
@ -73,12 +73,12 @@
    },
    {
      "tag": "units",
-      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.properties.units);\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.api.unitSymbol(ctx.properties.units));\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
      "tag": "value",
-      "stateRenderFunction": "if (ctx.properties.value) {\n    element.show();\n    ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, null, ctx.properties.valueDecimals));\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.value) {\n    element.show();\n    ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.value, {units: ctx.properties.units, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true}));\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
@ -193,16 +193,8 @@
      "name": "{i18n:scada.symbol.min-max-value}",
      "type": "switch",
      "default": false,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "minValue",
@ -211,14 +203,9 @@
      "default": 0,
      "required": true,
      "subLabel": "{i18n:scada.symbol.min-value}",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "maxValue",
@ -227,158 +214,89 @@
      "default": 100,
      "required": true,
      "subLabel": "{i18n:scada.symbol.max-value}",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showHighCriticalScale",
      "name": "{i18n:scada.symbol.high-critical-scale}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "highCriticalScale",
      "name": "{i18n:scada.symbol.high-critical-scale}",
      "type": "number",
      "default": 85,
-      "required": null,
-      "subLabel": "",
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "showHighCriticalScale",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showHighWarningScale",
      "name": "{i18n:scada.symbol.high-warning-scale}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "highWarningScale",
      "name": "{i18n:scada.symbol.high-warning-scale}",
      "type": "number",
      "default": 70,
-      "required": null,
-      "subLabel": "",
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "showHighWarningScale",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showLowWarningScale",
      "name": "{i18n:scada.symbol.low-warning-scale}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "lowWarningScale",
      "name": "{i18n:scada.symbol.low-warning-scale}",
      "type": "number",
      "default": 30,
-      "required": null,
-      "subLabel": "",
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "showLowWarningScale",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showLowCriticalScale",
      "name": "{i18n:scada.symbol.low-critical-scale}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "lowCriticalScale",
      "name": "{i18n:scada.symbol.low-critical-scale}",
      "type": "number",
      "default": 15,
-      "required": null,
-      "subLabel": "",
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "showLowCriticalScale",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "value",
      "name": "{i18n:scada.symbol.value}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "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": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueColor",
      "name": "{i18n:scada.symbol.value}",
      "type": "color",
      "default": "#002878",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "value",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "label",
      "name": "{i18n:scada.symbol.label}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "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,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "labelFont",
@ -477,64 +365,35 @@
        "weight": "500",
        "style": "normal"
      },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "label",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "labelColor",
      "name": "{i18n:scada.symbol.label}",
      "type": "color",
      "default": "#000000DE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "label",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showUnits",
      "name": "{i18n:scada.symbol.units}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "units",
      "name": "{i18n:scada.symbol.units}",
      "type": "units",
      "default": "°C",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": "showUnits",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "supportsUnitConversion": true,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "unitsFont",
@ -547,160 +406,87 @@
        "weight": "500",
        "style": "normal"
      },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "showUnits",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "unitsColor",
      "name": "{i18n:scada.symbol.units}",
      "type": "color",
      "default": "#000000DE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "showUnits",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "arrowColor",
      "name": "{i18n:scada.symbol.arrow-color}",
      "type": "color",
      "default": "#666666",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showTarget",
      "name": "{i18n:scada.symbol.target}",
      "type": "switch",
      "default": false,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "targetColor",
      "name": "{i18n:scada.symbol.target}",
      "type": "color",
      "default": "#DEDEDE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "showTarget",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": true,
+      "visible": true
    },
    {
      "id": "scaleColor",
      "name": "{i18n:scada.symbol.scale-color}",
      "type": "color",
      "default": "#C8DFF7",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "defaultWarningScaleColor",
      "name": "{i18n:scada.symbol.warning-scale-color}",
      "type": "color",
      "default": "#EBEBEB",
-      "required": null,
      "subLabel": "Default",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "activeWarningScaleColor",
      "name": "{i18n:scada.symbol.warning-scale-color}",
      "type": "color",
      "default": "#FAA405",
-      "required": null,
      "subLabel": "Active",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "defaultCriticalScaleColor",
      "name": "{i18n:scada.symbol.critical-scale-color}",
      "type": "color",
      "default": "#666666",
-      "required": null,
      "subLabel": "Default",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "activeCriticalScaleColor",
      "name": "{i18n:scada.symbol.critical-scale-color}",
      "type": "color",
      "default": "#D12730",
-      "required": null,
      "subLabel": "Active",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    }
  ]
 }]]></tb:metadata>
--- a/application/src/main/data/json/system/scada_symbols/simple-vertical-scale-hp.svg
+++ b/application/src/main/data/json/system/scada_symbols/simple-vertical-scale-hp.svg
@ -43,7 +43,7 @@
    },
    {
      "tag": "maxValue",
-      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.properties.maxValue);\n}",
+      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.api.convertUnitValue(ctx.properties.maxValue, ctx.properties.units).toFixed(0));\n}",
      "actions": null
    },
    {
@ -53,7 +53,7 @@
    },
    {
      "tag": "minValue",
-      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.properties.minValue);\n}",
+      "stateRenderFunction": "if (ctx.properties.minMaxValue) {\n    ctx.api.text(element, ctx.api.convertUnitValue(ctx.properties.minValue, ctx.properties.units).toFixed(0));\n}",
      "actions": null
    },
    {
@ -73,12 +73,12 @@
    },
    {
      "tag": "units",
-      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.properties.units);\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.api.unitSymbol(ctx.properties.units));\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
      "tag": "value",
-      "stateRenderFunction": "if (ctx.properties.value) {\n    element.show();\n    ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, null, ctx.properties.valueDecimals));\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.value) {\n    element.show();\n    ctx.api.font(element, ctx.properties.valueFont, ctx.properties.valueColor);\n    ctx.api.text(element, ctx.api.formatValue(ctx.values.value, {units: ctx.properties.units, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true}));\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
@ -193,16 +193,8 @@
      "name": "{i18n:scada.symbol.min-max-value}",
      "type": "switch",
      "default": false,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "minValue",
@ -211,14 +203,9 @@
      "default": 0,
      "required": true,
      "subLabel": "{i18n:scada.symbol.min-value}",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "maxValue",
@ -227,158 +214,89 @@
      "default": 100,
      "required": true,
      "subLabel": "{i18n:scada.symbol.max-value}",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showHighCriticalScale",
      "name": "{i18n:scada.symbol.high-critical-scale}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "highCriticalScale",
      "name": "{i18n:scada.symbol.high-critical-scale}",
      "type": "number",
      "default": 85,
-      "required": null,
-      "subLabel": "",
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "showHighCriticalScale",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showHighWarningScale",
      "name": "{i18n:scada.symbol.high-warning-scale}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "highWarningScale",
      "name": "{i18n:scada.symbol.high-warning-scale}",
      "type": "number",
      "default": 70,
-      "required": null,
-      "subLabel": "",
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "showHighWarningScale",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showLowWarningScale",
      "name": "{i18n:scada.symbol.low-warning-scale}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "lowWarningScale",
      "name": "{i18n:scada.symbol.low-warning-scale}",
      "type": "number",
      "default": 30,
-      "required": null,
-      "subLabel": "",
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "showLowWarningScale",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showLowCriticalScale",
      "name": "{i18n:scada.symbol.low-critical-scale}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "lowCriticalScale",
      "name": "{i18n:scada.symbol.low-critical-scale}",
      "type": "number",
      "default": 15,
-      "required": null,
-      "subLabel": "",
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "showLowCriticalScale",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": 1
+      "step": 1,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "value",
      "name": "{i18n:scada.symbol.value}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "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": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "valueColor",
      "name": "{i18n:scada.symbol.value}",
      "type": "color",
      "default": "#002878",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "value",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "label",
      "name": "{i18n:scada.symbol.label}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "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,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "labelFont",
@ -477,64 +365,35 @@
        "weight": "500",
        "style": "normal"
      },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "label",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "labelColor",
      "name": "{i18n:scada.symbol.label}",
      "type": "color",
      "default": "#000000DE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "label",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showUnits",
      "name": "{i18n:scada.symbol.units}",
      "type": "switch",
      "default": true,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "units",
      "name": "{i18n:scada.symbol.units}",
      "type": "units",
      "default": "°C",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": "showUnits",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "supportsUnitConversion": true,
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "unitsFont",
@ -547,160 +406,87 @@
        "weight": "500",
        "style": "normal"
      },
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "showUnits",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "unitsColor",
      "name": "{i18n:scada.symbol.units}",
      "type": "color",
      "default": "#000000DE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "showUnits",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "arrowColor",
      "name": "{i18n:scada.symbol.arrow-color}",
      "type": "color",
      "default": "#666666",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "showTarget",
      "name": "{i18n:scada.symbol.target}",
      "type": "switch",
      "default": false,
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "targetColor",
      "name": "{i18n:scada.symbol.target}",
      "type": "color",
      "default": "#DEDEDE",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
      "disableOnProperty": "showTarget",
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": true,
+      "visible": true
    },
    {
      "id": "scaleColor",
      "name": "{i18n:scada.symbol.scale-color}",
      "type": "color",
      "default": "#C8DFF7",
-      "required": null,
-      "subLabel": null,
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "defaultWarningScaleColor",
      "name": "{i18n:scada.symbol.warning-scale-color}",
      "type": "color",
      "default": "#EBEBEB",
-      "required": null,
      "subLabel": "Default",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "activeWarningScaleColor",
      "name": "{i18n:scada.symbol.warning-scale-color}",
      "type": "color",
      "default": "#FAA405",
-      "required": null,
      "subLabel": "Active",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "defaultCriticalScaleColor",
      "name": "{i18n:scada.symbol.critical-scale-color}",
      "type": "color",
      "default": "#666666",
-      "required": null,
      "subLabel": "Default",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    },
    {
      "id": "activeCriticalScaleColor",
      "name": "{i18n:scada.symbol.critical-scale-color}",
      "type": "color",
      "default": "#D12730",
-      "required": null,
      "subLabel": "Active",
-      "divider": null,
-      "fieldSuffix": null,
-      "disableOnProperty": null,
-      "rowClass": "",
-      "fieldClass": "",
-      "min": null,
-      "max": null,
-      "step": null
+      "disabled": false,
+      "visible": true
    }
  ]
 }]]></tb:metadata>
--- a/application/src/main/data/json/system/scada_symbols/small-cylindrical-tank.svg
+++ b/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",
-      "disabled": true,
+      "supportsUnitConversion": 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}",
--- a/application/src/main/data/json/system/scada_symbols/small-left-meter.svg
+++ b/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",
--- a/application/src/main/data/json/system/scada_symbols/small-meter.svg
+++ b/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",
-      "disabled": true,
+      "supportsUnitConversion": 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",
--- a/application/src/main/data/json/system/scada_symbols/small-right-center.svg
+++ b/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",
-      "disabled": true,
+      "supportsUnitConversion": 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",
--- a/application/src/main/data/json/system/scada_symbols/small-spherical-tank.svg
+++ b/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",
-      "disabled": true,
+      "supportsUnitConversion": 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}",
--- a/application/src/main/data/json/system/scada_symbols/spherical-tank.svg
+++ b/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",
-      "disabled": true,
+      "supportsUnitConversion": 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}",
--- a/application/src/main/data/json/system/scada_symbols/stand-cylindrical-tank.svg
+++ b/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}",
--- a/application/src/main/data/json/system/scada_symbols/stand-horizontal-tank.svg
+++ b/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}",
--- a/application/src/main/data/json/system/scada_symbols/stand-vertical-short-tank.svg
+++ b/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}",
--- a/application/src/main/data/json/system/scada_symbols/stand-vertical-tank.svg
+++ b/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}",
--- a/application/src/main/data/json/system/scada_symbols/three-rate-energy-meter-hp.svg
+++ b/application/src/main/data/json/system/scada_symbols/three-rate-energy-meter-hp.svg
@ -38,7 +38,7 @@
    },
    {
      "tag": "night-rate",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.nightValueFont, ctx.properties.nightValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.nightRate, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.nightValueFont, ctx.properties.nightValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.nightRate, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
      "actions": null
    },
    {
@ -48,7 +48,7 @@
    },
    {
      "tag": "off-peak-rate",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.offPeakValueFont, ctx.properties.offPeakValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.offPeakRate, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.offPeakValueFont, ctx.properties.offPeakValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.offPeakRate, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
      "actions": null
    },
    {
@ -58,12 +58,12 @@
    },
    {
      "tag": "peak-rate",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.peakValueFont, ctx.properties.peakValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.peakRate, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.peakValueFont, ctx.properties.peakValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.peakRate, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
      "actions": null
    },
    {
      "tag": "units",
-      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.properties.units);\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.api.unitSymbol(ctx.properties.units));\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
@ -480,6 +480,7 @@
      "group": "{i18n:scada.symbol.off-peak-rate}",
      "type": "text",
      "default": "T1",
+      "disableOnProperty": "showOffPeakLabel",
      "fieldClass": "medium-width",
      "disabled": false,
      "visible": true
@ -496,6 +497,7 @@
        "weight": "normal",
        "style": "normal"
      },
+      "disableOnProperty": "showOffPeakLabel",
      "disabled": false,
      "visible": true
    },
@ -505,6 +507,7 @@
      "group": "{i18n:scada.symbol.off-peak-rate}",
      "type": "color",
      "default": "#000000",
+      "disableOnProperty": "showOffPeakLabel",
      "disabled": false,
      "visible": true
    },
@ -556,6 +559,7 @@
      "group": "{i18n:scada.symbol.night-rate}",
      "type": "text",
      "default": "T2",
+      "disableOnProperty": "showNightLabel",
      "fieldClass": "medium-width",
      "disabled": false,
      "visible": true
@ -572,6 +576,7 @@
        "weight": "normal",
        "style": "normal"
      },
+      "disableOnProperty": "showNightLabel",
      "disabled": false,
      "visible": true
    },
@ -581,6 +586,7 @@
      "group": "{i18n:scada.symbol.night-rate}",
      "type": "color",
      "default": "#000",
+      "disableOnProperty": "showNightLabel",
      "disabled": false,
      "visible": true
    },
@ -632,6 +638,7 @@
      "group": "{i18n:scada.symbol.peak-rate}",
      "type": "text",
      "default": "T3",
+      "disableOnProperty": "showPeakLabel",
      "fieldClass": "medium-width",
      "disabled": false,
      "visible": true
@ -648,6 +655,7 @@
        "weight": "normal",
        "style": "normal"
      },
+      "disableOnProperty": "showPeakLabel",
      "disabled": false,
      "visible": true
    },
@ -657,6 +665,7 @@
      "group": "{i18n:scada.symbol.peak-rate}",
      "type": "color",
      "default": "#000",
+      "disableOnProperty": "showPeakLabel",
      "disabled": false,
      "visible": true
    },
@ -706,6 +715,7 @@
      "name": "{i18n:scada.symbol.units}",
      "type": "units",
      "default": "kWh",
+      "supportsUnitConversion": true,
      "disabled": false,
      "visible": true
    },
@ -720,6 +730,7 @@
        "weight": "normal",
        "style": "normal"
      },
+      "disableOnProperty": "showUnits",
      "disabled": false,
      "visible": true
    },
@ -728,6 +739,7 @@
      "name": "{i18n:scada.symbol.units}",
      "type": "color",
      "default": "#000",
+      "disableOnProperty": "showUnits",
      "disabled": false,
      "visible": true
    }
--- a/application/src/main/data/json/system/scada_symbols/top-flow-meter.svg
+++ b/application/src/main/data/json/system/scada_symbols/top-flow-meter.svg
@ -57,7 +57,7 @@
    },
    {
      "tag": "value",
-      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, '', false);\nctx.api.text(element, value);\n",
+      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, {units: ctx.properties.valueUnits, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true});\nctx.api.text(element, value);\n",
      "actions": {
        "click": {
          "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@ -66,7 +66,7 @@
    },
    {
      "tag": "valueUnits",
-      "stateRenderFunction": "var units = ctx.properties.valueUnits;\nctx.api.text(element, units || '');\n",
+      "stateRenderFunction": "var units = ctx.api.unitSymbol(ctx.properties.valueUnits);\nctx.api.text(element, units || '');\n",
      "actions": {
        "click": {
          "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@ -464,8 +464,7 @@
      "type": "units",
      "default": "m³/hr",
      "fieldClass": "medium-width",
-      "disabled": false,
-      "visible": true
+      "supportsUnitConversion": true
    },
    {
      "id": "valueDecimals",
--- a/application/src/main/data/json/system/scada_symbols/two-rate-energy-meter-hp.svg
+++ b/application/src/main/data/json/system/scada_symbols/two-rate-energy-meter-hp.svg
@ -38,7 +38,7 @@
    },
    {
      "tag": "day-rate",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.dayValueFont, ctx.properties.dayValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.dayRate, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.dayValueFont, ctx.properties.dayValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.dayRate, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
      "actions": null
    },
    {
@ -48,12 +48,12 @@
    },
    {
      "tag": "night-rate",
-      "stateRenderFunction": "ctx.api.font(element, ctx.properties.nightValueFont, ctx.properties.nightValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.nightRate, 0, null, 0));",
+      "stateRenderFunction": "ctx.api.font(element, ctx.properties.nightValueFont, ctx.properties.nightValueColor);\nctx.api.text(element, ctx.api.formatValue(ctx.values.nightRate, {units: ctx.properties.units, decimals: 0, ignoreUnitSymbol: true}));",
      "actions": null
    },
    {
      "tag": "units",
-      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.properties.units);\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "if (ctx.properties.showUnits) {\n    element.show();\n    ctx.api.font(element, ctx.properties.unitsFont, ctx.properties.unitsColor);\n    ctx.api.text(element, ctx.api.unitSymbol(ctx.properties.units));\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
@ -427,8 +427,9 @@
      "group": "{i18n:scada.symbol.day-rate}",
      "type": "text",
      "default": "T1",
+      "disableOnProperty": "showDayLabel",
      "fieldClass": "medium-width",
-      "disabled": false,
+      "disabled": true,
      "visible": true
    },
    {
@ -443,7 +444,8 @@
        "weight": "normal",
        "style": "normal"
      },
-      "disabled": false,
+      "disableOnProperty": "showDayLabel",
+      "disabled": true,
      "visible": true
    },
    {
@ -452,7 +454,8 @@
      "group": "{i18n:scada.symbol.day-rate}",
      "type": "color",
      "default": "#000000",
-      "disabled": false,
+      "disableOnProperty": "showDayLabel",
+      "disabled": true,
      "visible": true
    },
    {
@ -503,8 +506,9 @@
      "group": "{i18n:scada.symbol.night-rate}",
      "type": "text",
      "default": "T2",
+      "disableOnProperty": "showNightLabel",
      "fieldClass": "medium-width",
-      "disabled": false,
+      "disabled": true,
      "visible": true
    },
    {
@ -519,7 +523,8 @@
        "weight": "normal",
        "style": "normal"
      },
-      "disabled": false,
+      "disableOnProperty": "showNightLabel",
+      "disabled": true,
      "visible": true
    },
    {
@ -528,7 +533,8 @@
      "group": "{i18n:scada.symbol.night-rate}",
      "type": "color",
      "default": "#000",
-      "disabled": false,
+      "disableOnProperty": "showNightLabel",
+      "disabled": true,
      "visible": true
    },
    {
@ -577,6 +583,7 @@
      "name": "{i18n:scada.symbol.units}",
      "type": "units",
      "default": "kWh",
+      "supportsUnitConversion": true,
      "disabled": false,
      "visible": true
    },
@ -591,7 +598,8 @@
        "weight": "normal",
        "style": "normal"
      },
-      "disabled": false,
+      "disableOnProperty": "showUnits",
+      "disabled": true,
      "visible": true
    },
    {
@ -599,7 +607,8 @@
      "name": "{i18n:scada.symbol.units}",
      "type": "color",
      "default": "#000",
-      "disabled": false,
+      "disableOnProperty": "showUnits",
+      "disabled": true,
      "visible": true
    }
  ]
--- a/application/src/main/data/json/system/scada_symbols/vertical-connector-hp.svg
+++ b/application/src/main/data/json/system/scada_symbols/vertical-connector-hp.svg
@ -7,7 +7,7 @@
  "tags": [
    {
      "tag": "arrow",
-      "stateRenderFunction": "var arrow = ctx.values.arrow;\nif (arrow) {\n    element.show();\n    var arrowDirection = ctx.values.arrowDirection;\n    var direticon = element.remember('direticon');\n    var angle = arrowDirection ? 0 : 180;\n    if (!direticon) {\n        element.transform({rotate: angle});\n    } else {\n        ctx.api.transform({rotate: angle, originY: 100});\n        element.remember('direticon', false);\n    }\n} else {\n    element.hide();\n}",
+      "stateRenderFunction": "var arrow = ctx.values.arrow;\nif (arrow) {\n    element.show();\n    element.stroke(ctx.properties.lineColor).fill(ctx.properties.lineColor);\n    var arrowDirection = ctx.values.arrowDirection;\n    var direticon = element.remember('direticon');\n    var angle = arrowDirection ? 0 : 180;\n    if (!direticon) {\n        element.transform({rotate: angle});\n    } else {\n        ctx.api.transform({rotate: angle, originY: 100});\n        element.remember('direticon', false);\n    }\n} else {\n    element.hide();\n}",
      "actions": null
    },
    {
--- a/application/src/main/data/json/system/scada_symbols/vertical-inline-flow-meter.svg
+++ b/application/src/main/data/json/system/scada_symbols/vertical-inline-flow-meter.svg
@ -57,7 +57,7 @@
    },
    {
      "tag": "value",
-      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, ctx.properties.valueDecimals, '', false);\nctx.api.text(element, value);\n",
+      "stateRenderFunction": "var value = ctx.api.formatValue(ctx.values.value, {units: ctx.properties.valueUnits, decimals: ctx.properties.valueDecimals, ignoreUnitSymbol: true});\nctx.api.text(element, value);\n",
      "actions": {
        "click": {
          "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@ -66,7 +66,7 @@
    },
    {
      "tag": "valueUnits",
-      "stateRenderFunction": "var units = ctx.properties.valueUnits;\nctx.api.text(element, units || '');\n",
+      "stateRenderFunction": "var units = ctx.api.unitSymbol(ctx.properties.valueUnits);\nctx.api.text(element, units || '');\n",
      "actions": {
        "click": {
          "actionFunction": "ctx.api.callAction(event, 'displayClick');"
@ -464,6 +464,7 @@
      "type": "units",
      "default": "m³/hr",
      "fieldClass": "medium-width",
+      "supportsUnitConversion": true,
      "disabled": false,
      "visible": true
    },
--- a/application/src/main/data/json/system/scada_symbols/vertical-short-tank.svg
+++ b/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}",
--- a/application/src/main/data/json/system/scada_symbols/vertical-tank-hp.svg
+++ b/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}",
--- a/application/src/main/data/json/system/scada_symbols/vertical-tank.svg
+++ b/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}",
--- a/application/src/main/data/json/system/scada_symbols/voltage-relay-hp.svg
+++ b/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
    },
--- a/application/src/main/data/json/system/widget_types/air_quality_index_card.json
+++ b/application/src/main/data/json/system/widget_types/air_quality_index_card.json
@ -11,9 +11,9 @@
    "resources": [],
    "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'air', label: 'Air Quality Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'air', label: 'Air Quality Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
    "settingsDirective": "tb-value-card-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-value-card-basic-config",
--- a/application/src/main/data/json/system/widget_types/air_quality_index_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/air_quality_index_card_with_background.json
@ -11,9 +11,9 @@
    "resources": [],
    "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'air', label: 'Air Quality Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'air', label: 'Air Quality Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
    "settingsDirective": "tb-value-card-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-value-card-basic-config",
--- a/application/src/main/data/json/system/widget_types/air_quality_index_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/air_quality_index_chart_card.json
@ -11,10 +11,10 @@
    "resources": [],
    "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'air', label: 'Air Quality Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'AQI', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'air', 'AQI', 1);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'air', label: 'Air Quality Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'AQI', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'air', 'AQI', 1);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
    "settingsDirective": "tb-aggregated-value-card-widget-settings",
    "dataKeySettingsDirective": "",
    "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
--- a/application/src/main/data/json/system/widget_types/air_quality_index_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/air_quality_index_chart_card_with_background.json
@ -11,10 +11,10 @@
    "resources": [],
    "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'air', label: 'Air Quality Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'AQI', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'air', 'AQI', 1);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'air', label: 'Air Quality Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'AQI', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'air', 'AQI', 1);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
    "settingsDirective": "tb-aggregated-value-card-widget-settings",
    "dataKeySettingsDirective": "",
    "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
--- a/application/src/main/data/json/system/widget_types/alarms_table.json
+++ b/application/src/main/data/json/system/widget_types/alarms_table.json
@ -11,7 +11,7 @@
    "resources": [],
    "templateHtml": "<tb-alarms-table-widget \n    [ctx]=\"ctx\">\n</tb-alarms-table-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.alarmsTableWidget.onDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.alarmsTableWidget.onEditModeChanged();\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'cellClick': {\n            name: 'widget-action.cell-click',\n            multiple: true\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.alarmsTableWidget.onDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.alarmsTableWidget.onEditModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        supportsUnitConversion: true\n    };\n};\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'cellClick': {\n            name: 'widget-action.cell-click',\n            multiple: true\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
    "settingsSchema": "",
    "dataKeySettingsSchema": "",
    "settingsDirective": "tb-alarms-table-widget-settings",
--- a/application/src/main/data/json/system/widget_types/asset_admin_table.json
+++ b/application/src/main/data/json/system/widget_types/asset_admin_table.json
@ -11,7 +11,7 @@
    "resources": [],
    "templateHtml": "<tb-entities-table-widget \n    [ctx]=\"ctx\">\n</tb-entities-table-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.entitiesTableWidget.onEditModeChanged();\n}\n\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        },\n        'cellClick': {\n            name: 'widget-action.cell-click',\n            multiple: true\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.entitiesTableWidget.onEditModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        },\n        'cellClick': {\n            name: 'widget-action.cell-click',\n            multiple: true\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
    "settingsSchema": "",
    "dataKeySettingsSchema": "",
    "settingsDirective": "tb-entities-table-widget-settings",
--- a/application/src/main/data/json/system/widget_types/bar_chart.json
+++ b/application/src/main/data/json/system/widget_types/bar_chart.json
@ -11,10 +11,10 @@
    "resources": [],
    "templateHtml": "<tb-time-series-chart-widget \n    [ctx]=\"ctx\">\n</tb-time-series-chart-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        chartType: 'bar',\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings('bar'),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        chartType: 'bar',\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: true,\n        supportsUnitConversion: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings('bar'),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
    "settingsDirective": "tb-time-series-chart-widget-settings",
    "dataKeySettingsDirective": "tb-time-series-chart-key-settings",
    "latestDataKeySettingsDirective": "",
--- a/application/src/main/data/json/system/widget_types/bar_chart_with_labels.json
+++ b/application/src/main/data/json/system/widget_types/bar_chart_with_labels.json
@ -11,10 +11,10 @@
    "resources": [],
    "templateHtml": "<tb-bar-chart-with-labels-widget \n    [ctx]=\"ctx\">\n</tb-bar-chart-with-labels-widget>",
    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.barChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.barChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.barChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.barChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
    "settingsDirective": "tb-bar-chart-with-labels-widget-settings",
    "dataKeySettingsDirective": "",
    "latestDataKeySettingsDirective": "",
--- a/application/src/main/data/json/system/widget_types/bars.json
+++ b/application/src/main/data/json/system/widget_types/bars.json
@ -11,9 +11,7 @@
    "resources": [],
    "templateHtml": "<tb-bar-chart-widget \n    [ctx]=\"ctx\">\n</tb-bar-chart-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.barChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.barChartWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '500px',\n        previewHeight: '380px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar', type: 'timeseries', color: '#FF4D5A' },\n                    { name: 'hydroelectricPower', label: 'Hydroelectric', type: 'timeseries', color: '#FFDE30' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.barChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.barChartWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '500px',\n        previewHeight: '380px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar', type: 'timeseries', color: '#FF4D5A' },\n                    { name: 'hydroelectricPower', label: 'Hydroelectric', type: 'timeseries', color: '#FFDE30' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n\n",
    "settingsDirective": "tb-bar-chart-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-bar-chart-basic-config",
--- a/application/src/main/data/json/system/widget_types/battery_level.json
+++ b/application/src/main/data/json/system/widget_types/battery_level.json
@ -11,9 +11,7 @@
    "resources": [],
    "templateHtml": "<tb-battery-level-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-battery-level-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.batteryLevelWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.batteryLevelWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '200px',\n        previewHeight: '200px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'batteryLevel', label: 'batteryLevel', type: 'timeseries' }];\n        }\n    };\n};\n\nself.actionSources = function() {\n    return {\n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.batteryLevelWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.batteryLevelWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '200px',\n        previewHeight: '200px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'batteryLevel', label: 'batteryLevel', type: 'timeseries' }];\n        }\n    };\n};\n\nself.actionSources = function() {\n    return {\n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n};\n",
    "settingsDirective": "tb-battery-level-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-battery-level-basic-config",
--- a/application/src/main/data/json/system/widget_types/carbon_monoxidecocard.json
+++ b/application/src/main/data/json/system/widget_types/carbon_monoxidecocard.json
@ -11,9 +11,9 @@
    "resources": [],
    "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'carbon', label: 'Carbon monoxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'carbon', label: 'Carbon monoxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
    "settingsDirective": "tb-value-card-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-value-card-basic-config",
--- a/application/src/main/data/json/system/widget_types/carbon_monoxidecocard_with_background.json
+++ b/application/src/main/data/json/system/widget_types/carbon_monoxidecocard_with_background.json
@ -11,9 +11,9 @@
    "resources": [],
    "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'carbon', label: 'Carbon monoxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'carbon', label: 'Carbon monoxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
    "settingsDirective": "tb-value-card-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-value-card-basic-config",
--- a/application/src/main/data/json/system/widget_types/carbon_monoxidecochart_card.json
+++ b/application/src/main/data/json/system/widget_types/carbon_monoxidecochart_card.json
@ -11,10 +11,10 @@
    "resources": [],
    "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'carbon', label: 'Carbon monoxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'mg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'carbon', 'mg/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'carbon', label: 'Carbon monoxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'mg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'carbon', 'mg/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
    "settingsDirective": "tb-aggregated-value-card-widget-settings",
    "dataKeySettingsDirective": "",
    "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
--- a/application/src/main/data/json/system/widget_types/carbon_monoxidecochart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/carbon_monoxidecochart_card_with_background.json
@ -11,10 +11,10 @@
    "resources": [],
    "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'carbon', label: 'Carbon monoxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'mg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'carbon', 'mg/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'carbon', label: 'Carbon monoxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'mg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'carbon', 'mg/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
    "settingsDirective": "tb-aggregated-value-card-widget-settings",
    "dataKeySettingsDirective": "",
    "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
--- a/application/src/main/data/json/system/widget_types/co2_card.json
+++ b/application/src/main/data/json/system/widget_types/co2_card.json
@ -11,9 +11,9 @@
    "resources": [],
    "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
    "settingsDirective": "tb-value-card-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-value-card-basic-config",
--- a/application/src/main/data/json/system/widget_types/co2_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/co2_card_with_background.json
@ -11,9 +11,9 @@
    "resources": [],
    "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
    "settingsDirective": "tb-value-card-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-value-card-basic-config",
--- a/application/src/main/data/json/system/widget_types/co2_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/co2_chart_card.json
@ -11,10 +11,10 @@
    "resources": [],
    "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'ppm', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'co2', 'ppm', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'ppm', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'co2', 'ppm', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
    "settingsDirective": "tb-aggregated-value-card-widget-settings",
    "dataKeySettingsDirective": "",
    "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
--- a/application/src/main/data/json/system/widget_types/co2_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/co2_chart_card_with_background.json
@ -11,10 +11,10 @@
    "resources": [],
    "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'ppm', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'co2', 'ppm', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'ppm', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'co2', 'ppm', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
    "settingsDirective": "tb-aggregated-value-card-widget-settings",
    "dataKeySettingsDirective": "",
    "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
--- a/application/src/main/data/json/system/widget_types/device_admin_table.json
+++ b/application/src/main/data/json/system/widget_types/device_admin_table.json
@ -11,7 +11,7 @@
    "resources": [],
    "templateHtml": "<tb-entities-table-widget \n    [ctx]=\"ctx\">\n</tb-entities-table-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.entitiesTableWidget.onEditModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        },\n        'cellClick': {\n            name: 'widget-action.cell-click',\n            multiple: true\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.entitiesTableWidget.onEditModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        },\n        'cellClick': {\n            name: 'widget-action.cell-click',\n            multiple: true\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
    "settingsSchema": "",
    "dataKeySettingsSchema": "",
    "settingsDirective": "tb-entities-table-widget-settings",
--- a/application/src/main/data/json/system/widget_types/digital_horizontal_bar.json
+++ b/application/src/main/data/json/system/widget_types/digital_horizontal_bar.json
@ -11,9 +11,9 @@
    "resources": [],
    "templateHtml": "<canvas id=\"digitalGauge\"></canvas>",
    "templateCss": "#gauge {\n    text-align: center;\n   /* margin-left: -100px;\n    margin-right: -100px;*/\n    /*margin-top: -50px;*/\n    \n}\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
    "settingsDirective": "tb-digital-gauge-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-digital-simple-gauge-basic-config",
--- a/application/src/main/data/json/system/widget_types/digital_speedometer.json
+++ b/application/src/main/data/json/system/widget_types/digital_speedometer.json
@ -11,9 +11,9 @@
    "resources": [],
    "templateHtml": "<canvas id=\"digitalGauge\"></canvas>",
    "templateCss": "#gauge {\n    text-align: center;\n   /* margin-left: -100px;\n    margin-right: -100px;*/\n    /*margin-top: -50px;*/\n    \n}\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
    "settingsDirective": "tb-digital-gauge-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-digital-simple-gauge-basic-config",
--- a/application/src/main/data/json/system/widget_types/digital_thermometer.json
+++ b/application/src/main/data/json/system/widget_types/digital_thermometer.json
@ -11,9 +11,9 @@
    "resources": [],
    "templateHtml": "<canvas id=\"digitalGauge\"></canvas>",
    "templateCss": "#gauge {\n    text-align: center;\n   /* margin-left: -100px;\n    margin-right: -100px;*/\n    /*margin-top: -50px;*/\n    \n}\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
    "settingsDirective": "tb-digital-gauge-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-digital-simple-gauge-basic-config",
--- a/application/src/main/data/json/system/widget_types/digital_vertical_bar.json
+++ b/application/src/main/data/json/system/widget_types/digital_vertical_bar.json
@ -11,9 +11,9 @@
    "resources": [],
    "templateHtml": "<canvas id=\"digitalGauge\"></canvas>",
    "templateCss": "#gauge {\n    text-align: center;\n   /* margin-left: -100px;\n    margin-right: -100px;*/\n    /*margin-top: -50px;*/\n    \n}\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
    "settingsDirective": "tb-digital-gauge-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-digital-simple-gauge-basic-config",
--- a/application/src/main/data/json/system/widget_types/doughnut.json
+++ b/application/src/main/data/json/system/widget_types/doughnut.json
@ -11,9 +11,7 @@
    "resources": [],
    "templateHtml": "<tb-doughnut-widget \n    [ctx]=\"ctx\">\n</tb-doughnut-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.doughnutWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.doughnutWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '380px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind power', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar power', type: 'timeseries', color: '#FF4D5A' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.doughnutWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.doughnutWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '380px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind power', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar power', type: 'timeseries', color: '#FF4D5A' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
    "settingsDirective": "tb-doughnut-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-doughnut-basic-config",
--- a/application/src/main/data/json/system/widget_types/efficiency_card.json
+++ b/application/src/main/data/json/system/widget_types/efficiency_card.json
@ -11,7 +11,7 @@
    "resources": [],
    "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
    "settingsSchema": "{}",
    "dataKeySettingsSchema": "{}\n",
    "settingsDirective": "tb-value-card-widget-settings",
--- a/application/src/main/data/json/system/widget_types/efficiency_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/efficiency_card_with_background.json
@ -11,7 +11,7 @@
    "resources": [],
    "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
    "settingsSchema": "{}",
    "dataKeySettingsSchema": "{}\n",
    "settingsDirective": "tb-value-card-widget-settings",
--- a/application/src/main/data/json/system/widget_types/efficiency_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/efficiency_chart_card.json
@ -11,10 +11,10 @@
    "resources": [],
    "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'efficiency', label: 'Efficiency', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'efficiency', '%', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'efficiency', label: 'Efficiency', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'efficiency', '%', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
    "settingsDirective": "tb-aggregated-value-card-widget-settings",
    "dataKeySettingsDirective": "",
    "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
--- a/application/src/main/data/json/system/widget_types/efficiency_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/efficiency_chart_card_with_background.json
@ -11,10 +11,10 @@
    "resources": [],
    "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'efficiency', label: 'Efficiency', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'efficiency', '%', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'efficiency', label: 'Efficiency', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'efficiency', '%', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
    "settingsDirective": "tb-aggregated-value-card-widget-settings",
    "dataKeySettingsDirective": "",
    "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
--- a/application/src/main/data/json/system/widget_types/efficiency_progress_bar.json
+++ b/application/src/main/data/json/system/widget_types/efficiency_progress_bar.json
@ -11,9 +11,9 @@
    "resources": [],
    "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
    "settingsDirective": "tb-progress-bar-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-progress-bar-basic-config",
--- a/application/src/main/data/json/system/widget_types/efficiency_progress_bar_with_background.json
+++ b/application/src/main/data/json/system/widget_types/efficiency_progress_bar_with_background.json
@ -11,9 +11,9 @@
    "resources": [],
    "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
    "settingsDirective": "tb-progress-bar-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-progress-bar-basic-config",
--- a/application/src/main/data/json/system/widget_types/efficiency_range_chart.json
+++ b/application/src/main/data/json/system/widget_types/efficiency_range_chart.json
@ -11,10 +11,10 @@
    "resources": [],
    "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
    "settingsDirective": "tb-range-chart-widget-settings",
    "dataKeySettingsDirective": "",
    "latestDataKeySettingsDirective": "",
--- a/application/src/main/data/json/system/widget_types/efficiency_range_chart_with_background.json
+++ b/application/src/main/data/json/system/widget_types/efficiency_range_chart_with_background.json
@ -11,10 +11,10 @@
    "resources": [],
    "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
    "settingsDirective": "tb-range-chart-widget-settings",
    "dataKeySettingsDirective": "",
    "latestDataKeySettingsDirective": "",
--- a/application/src/main/data/json/system/widget_types/entities_table.json
+++ b/application/src/main/data/json/system/widget_types/entities_table.json
@ -11,7 +11,7 @@
    "resources": [],
    "templateHtml": "<tb-entities-table-widget \n    [ctx]=\"ctx\">\n</tb-entities-table-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.entitiesTableWidget.onEditModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'name', type: 'entityField' }];\n        }\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        },\n        'cellClick': {\n            name: 'widget-action.cell-click',\n            multiple: true\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.entitiesTableWidget.onEditModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'name', type: 'entityField' }];\n        }\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        },\n        'cellClick': {\n            name: 'widget-action.cell-click',\n            multiple: true\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
    "settingsSchema": "",
    "dataKeySettingsSchema": "",
    "settingsDirective": "tb-entities-table-widget-settings",
--- a/application/src/main/data/json/system/widget_types/flooding_level_card.json
+++ b/application/src/main/data/json/system/widget_types/flooding_level_card.json
@ -11,9 +11,9 @@
    "resources": [],
    "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
    "settingsDirective": "tb-value-card-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-value-card-basic-config",
--- a/application/src/main/data/json/system/widget_types/flooding_level_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/flooding_level_card_with_background.json
@ -11,9 +11,9 @@
    "resources": [],
    "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
    "settingsDirective": "tb-value-card-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-value-card-basic-config",
--- a/application/src/main/data/json/system/widget_types/flooding_level_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/flooding_level_chart_card.json
@ -11,10 +11,10 @@
    "resources": [],
    "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flooding', label: 'Flooding level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'flooding', 'm', 1);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flooding', label: 'Flooding level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'flooding', 'm', 1);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
    "settingsDirective": "tb-aggregated-value-card-widget-settings",
    "dataKeySettingsDirective": "",
    "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
--- a/application/src/main/data/json/system/widget_types/flooding_level_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/flooding_level_chart_card_with_background.json
@ -11,10 +11,10 @@
    "resources": [],
    "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flooding', label: 'Flooding level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'flooding', 'm', 1);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flooding', label: 'Flooding level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'flooding', 'm', 1);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
    "settingsDirective": "tb-aggregated-value-card-widget-settings",
    "dataKeySettingsDirective": "",
    "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
--- a/application/src/main/data/json/system/widget_types/flooding_level_progress_bar.json
+++ b/application/src/main/data/json/system/widget_types/flooding_level_progress_bar.json
@ -11,9 +11,9 @@
    "resources": [],
    "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
    "settingsDirective": "tb-progress-bar-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-progress-bar-basic-config",
--- a/application/src/main/data/json/system/widget_types/flooding_level_progress_bar_with_background.json
+++ b/application/src/main/data/json/system/widget_types/flooding_level_progress_bar_with_background.json
@ -11,9 +11,9 @@
    "resources": [],
    "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
    "settingsDirective": "tb-progress-bar-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-progress-bar-basic-config",
--- a/application/src/main/data/json/system/widget_types/flow_rate_card.json
+++ b/application/src/main/data/json/system/widget_types/flow_rate_card.json
@ -11,7 +11,7 @@
    "resources": [],
    "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
    "settingsSchema": "{}",
    "dataKeySettingsSchema": "{}\n",
    "settingsDirective": "tb-value-card-widget-settings",
--- a/application/src/main/data/json/system/widget_types/flow_rate_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/flow_rate_card_with_background.json
@ -11,7 +11,7 @@
    "resources": [],
    "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
    "settingsSchema": "{}",
    "dataKeySettingsSchema": "{}\n",
    "settingsDirective": "tb-value-card-widget-settings",
--- a/application/src/main/data/json/system/widget_types/flow_rate_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/flow_rate_chart_card.json
@ -11,10 +11,10 @@
    "resources": [],
    "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flowRate', label: 'Flow rate', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm³/hr', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'flowRate', 'm³/hr', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flowRate', label: 'Flow rate', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm³/hr', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'flowRate', 'm³/hr', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
    "settingsDirective": "tb-aggregated-value-card-widget-settings",
    "dataKeySettingsDirective": "",
    "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
--- a/application/src/main/data/json/system/widget_types/flow_rate_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/flow_rate_chart_card_with_background.json
@ -11,10 +11,10 @@
    "resources": [],
    "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flowRate', label: 'Flow rate', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm³/hr', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'flowRate', 'm³/hr', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flowRate', label: 'Flow rate', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm³/hr', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'flowRate', 'm³/hr', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
    "settingsDirective": "tb-aggregated-value-card-widget-settings",
    "dataKeySettingsDirective": "",
    "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
--- a/application/src/main/data/json/system/widget_types/flow_rate_gauge.json
+++ b/application/src/main/data/json/system/widget_types/flow_rate_gauge.json
@ -11,9 +11,9 @@
    "resources": [],
    "templateHtml": "<canvas id=\"radialGauge\"></canvas>\n",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
    "settingsDirective": "tb-analogue-radial-gauge-widget-settings",
    "dataKeySettingsDirective": "",
    "hasBasicMode": true,
--- a/application/src/main/data/json/system/widget_types/flow_rate_progress_bar.json
+++ b/application/src/main/data/json/system/widget_types/flow_rate_progress_bar.json
@ -11,9 +11,9 @@
    "resources": [],
    "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow Rate', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow Rate', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
    "settingsDirective": "tb-progress-bar-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-progress-bar-basic-config",
--- a/application/src/main/data/json/system/widget_types/flow_rate_progress_bar_with_background.json
+++ b/application/src/main/data/json/system/widget_types/flow_rate_progress_bar_with_background.json
@ -11,9 +11,9 @@
    "resources": [],
    "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
    "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow Rate', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow Rate', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
    "settingsDirective": "tb-progress-bar-widget-settings",
    "hasBasicMode": true,
    "basicModeDirective": "tb-progress-bar-basic-config",
--- a/application/src/main/data/json/system/widget_types/flow_rate_range_chart.json
+++ b/application/src/main/data/json/system/widget_types/flow_rate_range_chart.json
@ -11,10 +11,10 @@
    "resources": [],
    "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
    "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
    "settingsDirective": "tb-range-chart-widget-settings",
    "dataKeySettingsDirective": "",
    "latestDataKeySettingsDirective": "",