diff --git 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
index 5576c939c4..bfd711cd38 100644
--- 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
@@ -18,12 +18,12 @@
     },
     {
       "tag": "highCriticalScale",
-      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showHighCriticalScale = ctx.properties.showHighCriticalScale;\nvar highCriticalState = ctx.values.highCriticalState;\nif (showHighCriticalScale && highCriticalState !== null) {\n    element.show();\n    var offset = calculateOffset(highCriticalState, minValue, maxValue);\n    element.width(653-offset);\n} else {\n    element.hide();\n}\n\nif (showHighCriticalScale && value !== null && highCriticalState !== null) {\n    if (value >= highCriticalState && value <= ctx.properties.maxValue) {\n        element.fill(ctx.properties.activeCriticalScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultCriticalScaleColor)\n    }\n}",
+      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showHighCriticalScale = ctx.properties.showHighCriticalScale;\nvar highCriticalState = ctx.values.highCriticalState;\nif (showHighCriticalScale && highCriticalState !== null) {\n    element.show();\n    var offset = calculateOffset(highCriticalState, minValue, maxValue);\n    element.width(653-offset);\n} else {\n    element.hide();\n}\n\nif (showHighCriticalScale && value !== null && highCriticalState !== null) {\n    if (value >= highCriticalState) {\n        element.fill(ctx.properties.activeCriticalScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultCriticalScaleColor)\n    }\n}",
       "actions": null
     },
     {
       "tag": "highWarningScale",
-      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showHighCriticalScale = ctx.properties.showHighCriticalScale;\nvar showHighWarningScale = ctx.properties.showHighWarningScale;\nvar highWarningState = ctx.values.highWarningState;\nvar highCriticalState = ctx.values.highCriticalState;\nif (showHighWarningScale && highWarningState !== null) {\n    element.show();\n    var offset = calculateOffset(highWarningState, minValue, maxValue);\n    element.width(653-offset);\n} else {\n    element.hide();\n}\n\nif (showHighWarningScale && value !== null) {\n    if (!showHighCriticalScale) {\n        highCriticalState = ctx.properties.maxValue;\n    }\n    \n    if (highWarningState !== null && highCriticalState !== null) {\n        if (value < highCriticalState && value >= highWarningState) {\n            element.fill(ctx.properties.activeWarningScaleColor);\n        } else {\n            element.fill(ctx.properties.defaultWarningScaleColor);\n        }\n    }\n}",
+      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showHighCriticalScale = ctx.properties.showHighCriticalScale;\nvar showHighWarningScale = ctx.properties.showHighWarningScale;\nvar highWarningState = ctx.values.highWarningState;\nvar highCriticalState = ctx.values.highCriticalState;\nif (showHighWarningScale && highWarningState !== null) {\n    element.show();\n    var offset = calculateOffset(highWarningState, minValue, maxValue);\n    element.width(653-offset);\n} else {\n    element.hide();\n}\n\nif (showHighWarningScale && value !== null) {\n    if (!showHighCriticalScale) {\n        highCriticalState = Number.MAX_SAFE_INTEGER;\n    }\n    \n    if (highWarningState !== null && highCriticalState !== null) {\n        if (value < highCriticalState && value >= highWarningState) {\n            element.fill(ctx.properties.activeWarningScaleColor);\n        } else {\n            element.fill(ctx.properties.defaultWarningScaleColor);\n        }\n    }\n}",
       "actions": null
     },
     {
@@ -33,12 +33,12 @@
     },
     {
       "tag": "lowCriticalScale",
-      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showLowCriticalScale = ctx.properties.showLowCriticalScale;\nvar lowCriticalValue = ctx.values.lowCriticalState;\n\nif (showLowCriticalScale && lowCriticalValue !== null) {\n    element.show();\n    var offset = calculateOffset(lowCriticalValue, minValue, maxValue);\n    element.width(offset);\n} else {\n    element.hide();\n}\n\nif (showLowCriticalScale && value !== null) {\n    var lowCriticalScale = ctx.values.lowCriticalState;\n    if (value <= lowCriticalScale && value >= ctx.properties.minValue) {\n        element.fill(ctx.properties.activeCriticalScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultCriticalScaleColor)\n    }\n}",
+      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showLowCriticalScale = ctx.properties.showLowCriticalScale;\nvar lowCriticalValue = ctx.values.lowCriticalState;\n\nif (showLowCriticalScale && lowCriticalValue !== null) {\n    element.show();\n    var offset = calculateOffset(lowCriticalValue, minValue, maxValue);\n    element.width(offset);\n} else {\n    element.hide();\n}\n\nif (showLowCriticalScale && value !== null) {\n    var lowCriticalScale = ctx.values.lowCriticalState;\n    if (value <= lowCriticalScale) {\n        element.fill(ctx.properties.activeCriticalScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultCriticalScaleColor)\n    }\n}",
       "actions": null
     },
     {
       "tag": "lowWarningScale",
-      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showLowWarningScale = ctx.properties.showLowWarningScale;\nvar showLowCriticalScale = ctx.properties.showLowCriticalScale;\nvar lowWarningState = ctx.values.lowWarningState;\nvar lowCriticalState = ctx.values.lowCriticalState;\nif (showLowWarningScale && lowWarningState !== null) {\n    element.show();\n    var offset = calculateOffset(lowWarningState, minValue, maxValue);\n    element.width(offset);\n} else {\n    element.hide();\n}\n\nif (showLowWarningScale && value !== null) {\n    if (!showLowCriticalScale) {\n        lowCriticalState = ctx.properties.minValue;\n    }\n    if (lowCriticalState !== null && lowWarningState !== null) {\n        if (value > lowCriticalState && value <= lowWarningState) {\n            element.fill(ctx.properties.activeWarningScaleColor);\n        } else {\n            element.fill(ctx.properties.defaultWarningScaleColor);\n        }\n    }\n}",
+      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showLowWarningScale = ctx.properties.showLowWarningScale;\nvar showLowCriticalScale = ctx.properties.showLowCriticalScale;\nvar lowWarningState = ctx.values.lowWarningState;\nvar lowCriticalState = ctx.values.lowCriticalState;\nif (showLowWarningScale && lowWarningState !== null) {\n    element.show();\n    var offset = calculateOffset(lowWarningState, minValue, maxValue);\n    element.width(offset);\n} else {\n    element.hide();\n}\n\nif (showLowWarningScale && value !== null) {\n    if (!showLowCriticalScale) {\n        lowCriticalState = Number.MIN_SAFE_INTEGER;\n    }\n    if (lowCriticalState !== null && lowWarningState !== null) {\n        if (value > lowCriticalState && value <= lowWarningState) {\n            element.fill(ctx.properties.activeWarningScaleColor);\n        } else {\n            element.fill(ctx.properties.defaultWarningScaleColor);\n        }\n    }\n}",
       "actions": null
     },
     {
diff --git 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
index b7d5e0184b..5dd6dd43a3 100644
--- 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
@@ -18,12 +18,12 @@
     },
     {
       "tag": "highCriticalScale",
-      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showHighCriticalScale = ctx.properties.showHighCriticalScale;\nvar highCriticalState = ctx.values.highCriticalState;\nif (showHighCriticalScale && highCriticalState !== null) {\n    element.show();\n    var offset = calculateOffset(highCriticalState, minValue, maxValue);\n    element.height(653-offset);\n} else {\n    element.hide();\n}\n\nif (showHighCriticalScale && value !== null && highCriticalState !== null) {\n    if (value >= highCriticalState && value <= ctx.properties.maxValue) {\n        element.fill(ctx.properties.activeCriticalScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultCriticalScaleColor)\n    }\n}",
+      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showHighCriticalScale = ctx.properties.showHighCriticalScale;\nvar highCriticalState = ctx.values.highCriticalState;\nif (showHighCriticalScale && highCriticalState !== null) {\n    element.show();\n    var offset = calculateOffset(highCriticalState, minValue, maxValue);\n    element.height(653-offset);\n} else {\n    element.hide();\n}\n\nif (showHighCriticalScale && value !== null && highCriticalState !== null) {\n    if (value >= highCriticalState) {\n        element.fill(ctx.properties.activeCriticalScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultCriticalScaleColor)\n    }\n}",
       "actions": null
     },
     {
       "tag": "highWarningScale",
-      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showHighCriticalScale = ctx.properties.showHighCriticalScale;\nvar showHighWarningScale = ctx.properties.showHighWarningScale;\nvar highWarningState = ctx.values.highWarningState;\nvar highCriticalState = ctx.values.highCriticalState;\nif (showHighWarningScale && highWarningState !== null) {\n    element.show();\n    var offset = calculateOffset(highWarningState, minValue, maxValue);\n    element.height(653-offset);\n} else {\n    element.hide();\n}\nif (showHighWarningScale && value !== null) {\n    if (!showHighCriticalScale) {\n        highCriticalState = ctx.properties.maxValue;\n    }\n    if (highWarningState !== null && highCriticalState !== null) {\n        if (value < highCriticalState && value >= highWarningState) {\n            element.fill(ctx.properties.activeWarningScaleColor);\n        } else {\n            element.fill(ctx.properties.defaultWarningScaleColor);\n        }\n    }\n}",
+      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showHighCriticalScale = ctx.properties.showHighCriticalScale;\nvar showHighWarningScale = ctx.properties.showHighWarningScale;\nvar highWarningState = ctx.values.highWarningState;\nvar highCriticalState = ctx.values.highCriticalState;\nif (showHighWarningScale && highWarningState !== null) {\n    element.show();\n    var offset = calculateOffset(highWarningState, minValue, maxValue);\n    element.height(653-offset);\n} else {\n    element.hide();\n}\nif (showHighWarningScale && value !== null) {\n    if (!showHighCriticalScale) {\n        highCriticalState = Number.MAX_SAFE_INTEGER;\n    }\n    if (highWarningState !== null && highCriticalState !== null) {\n        if (value < highCriticalState && value >= highWarningState) {\n            element.fill(ctx.properties.activeWarningScaleColor);\n        } else {\n            element.fill(ctx.properties.defaultWarningScaleColor);\n        }\n    }\n}",
       "actions": null
     },
     {
@@ -33,12 +33,12 @@
     },
     {
       "tag": "lowCriticalScale",
-      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showLowCriticalScale = ctx.properties.showLowCriticalScale;\nvar lowCriticalValue = ctx.values.lowCriticalState;\n\nif (showLowCriticalScale && lowCriticalValue !== null) {\n    element.show();\n    var offset = calculateOffset(lowCriticalValue, minValue, maxValue);\n    element.height(offset);\n} else {\n    element.hide();\n}\nif (showLowCriticalScale && value !== null) {\n    var lowCriticalScale = ctx.values.lowCriticalState;\n    if (value <= lowCriticalScale && value >= ctx.properties.minValue) {\n        element.fill(ctx.properties.activeCriticalScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultCriticalScaleColor)\n    }\n}",
+      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showLowCriticalScale = ctx.properties.showLowCriticalScale;\nvar lowCriticalValue = ctx.values.lowCriticalState;\n\nif (showLowCriticalScale && lowCriticalValue !== null) {\n    element.show();\n    var offset = calculateOffset(lowCriticalValue, minValue, maxValue);\n    element.height(offset);\n} else {\n    element.hide();\n}\nif (showLowCriticalScale && value !== null) {\n    var lowCriticalScale = ctx.values.lowCriticalState;\n    if (value <= lowCriticalScale) {\n        element.fill(ctx.properties.activeCriticalScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultCriticalScaleColor)\n    }\n}",
       "actions": null
     },
     {
       "tag": "lowWarningScale",
-      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showLowWarningScale = ctx.properties.showLowWarningScale;\nvar showLowCriticalScale = ctx.properties.showLowCriticalScale;\nvar lowWarningState = ctx.values.lowWarningState;\nvar lowCriticalState = ctx.values.lowCriticalState;\nif (showLowWarningScale && lowWarningState !== null) {\n    element.show();\n    var offset = calculateOffset(lowWarningState, minValue, maxValue);\n    element.height(offset);\n} else {\n    element.hide();\n}\nif (showLowWarningScale && value !== null) {\n    if (!showLowCriticalScale) {\n        lowCriticalState = ctx.properties.minValue;\n    }\n    if (lowCriticalState !== null && lowWarningState !== null) {\n        if (value > lowCriticalState && value <= lowWarningState) {\n            element.fill(ctx.properties.activeWarningScaleColor);\n        } else {\n            element.fill(ctx.properties.defaultWarningScaleColor);\n        }\n    }\n}",
+      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showLowWarningScale = ctx.properties.showLowWarningScale;\nvar showLowCriticalScale = ctx.properties.showLowCriticalScale;\nvar lowWarningState = ctx.values.lowWarningState;\nvar lowCriticalState = ctx.values.lowCriticalState;\nif (showLowWarningScale && lowWarningState !== null) {\n    element.show();\n    var offset = calculateOffset(lowWarningState, minValue, maxValue);\n    element.height(offset);\n} else {\n    element.hide();\n}\nif (showLowWarningScale && value !== null) {\n    if (!showLowCriticalScale) {\n        lowCriticalState = Number.MIN_SAFE_INTEGER;\n    }\n    if (lowCriticalState !== null && lowWarningState !== null) {\n        if (value > lowCriticalState && value <= lowWarningState) {\n            element.fill(ctx.properties.activeWarningScaleColor);\n        } else {\n            element.fill(ctx.properties.defaultWarningScaleColor);\n        }\n    }\n}",
       "actions": null
     },
     {
diff --git 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
index e69daae548..7b43164cce 100644
--- 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
@@ -18,12 +18,12 @@
     },
     {
       "tag": "highCriticalScale",
-      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n    return offset;\n}\n\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showHighCriticalScale = ctx.properties.showHighCriticalScale;\nvar highCriticalValue = ctx.properties.highCriticalScale;\nvar value = ctx.values.value;\n\nif (showHighCriticalScale) {\n    element.show();\n    var offset = calculateOffset(highCriticalValue, minValue, maxValue);\n    element.width(653-offset);\n} else {\n    element.hide();\n}\n\nif (showHighCriticalScale && value !== null) {\n    var highCriticalScale = ctx.properties.highCriticalScale;\n    if (value >= highCriticalScale && value <= ctx.properties.maxValue) {\n        element.fill(ctx.properties.activeCriticalScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultCriticalScaleColor)\n    }\n}",
+      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n    return offset;\n}\n\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showHighCriticalScale = ctx.properties.showHighCriticalScale;\nvar highCriticalValue = ctx.properties.highCriticalScale;\nvar value = ctx.values.value;\n\nif (showHighCriticalScale) {\n    element.show();\n    var offset = calculateOffset(highCriticalValue, minValue, maxValue);\n    element.width(653-offset);\n} else {\n    element.hide();\n}\nif (showHighCriticalScale && value !== null) {\n    var highCriticalScale = ctx.properties.highCriticalScale;\n    if (value >= highCriticalScale) {\n        element.fill(ctx.properties.activeCriticalScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultCriticalScaleColor)\n    }\n}",
       "actions": null
     },
     {
       "tag": "highWarningScale",
-      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n    return offset;\n}\n\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showHighWarningScale = ctx.properties.showHighWarningScale;\nvar showHighCriticalScale = ctx.properties.showHighCriticalScale;\nvar highWarningValue = ctx.properties.highWarningScale;\nvar value = ctx.values.value;\n\nif (showHighWarningScale) {\n    element.show();\n    var offset = calculateOffset(highWarningValue, minValue, maxValue);\n    element.width(653-offset);\n} else {\n    element.hide();\n}\n\nif (showHighWarningScale && value !== null) {\n    var highCriticalScale = ctx.properties.highCriticalScale;\n    if (!showHighCriticalScale) {\n        highCriticalScale = ctx.properties.maxValue;\n    }\n    var highWarningScale = ctx.properties.highWarningScale;\n    if (value < highCriticalScale && value >= highWarningScale) {\n        element.fill(ctx.properties.activeWarningScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultWarningScaleColor);\n    }\n}",
+      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n    return offset;\n}\n\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showHighWarningScale = ctx.properties.showHighWarningScale;\nvar showHighCriticalScale = ctx.properties.showHighCriticalScale;\nvar highWarningValue = ctx.properties.highWarningScale;\nvar value = ctx.values.value;\n\nif (showHighWarningScale) {\n    element.show();\n    var offset = calculateOffset(highWarningValue, minValue, maxValue);\n    element.width(653-offset);\n} else {\n    element.hide();\n}\n\nif (showHighWarningScale && value !== null) {\n    var highCriticalScale = ctx.properties.highCriticalScale;\n    if (!showHighCriticalScale) {\n        highCriticalScale = Number.MAX_SAFE_INTEGER;\n    }\n    var highWarningScale = ctx.properties.highWarningScale;\n    if (value < highCriticalScale && value >= highWarningScale) {\n        element.fill(ctx.properties.activeWarningScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultWarningScaleColor);\n    }\n}",
       "actions": null
     },
     {
@@ -33,12 +33,12 @@
     },
     {
       "tag": "lowCriticalScale",
-      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showLowCriticalScale = ctx.properties.showLowCriticalScale;\nvar lowCriticalScale = ctx.properties.lowCriticalScale;\n\nif (showLowCriticalScale) {\n    element.show();\n    var offset = calculateOffset(lowCriticalScale, minValue, maxValue);\n    var childrenElement = element.children();\n    element.width(offset);\n} else {\n    element.hide();\n}\n\nif (showLowCriticalScale && value !== null) {\n    if (value <= lowCriticalScale && value >= ctx.properties.minValue) {\n        element.fill(ctx.properties.activeCriticalScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultCriticalScaleColor)\n    }\n}",
+      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showLowCriticalScale = ctx.properties.showLowCriticalScale;\nvar lowCriticalScale = ctx.properties.lowCriticalScale;\n\nif (showLowCriticalScale) {\n    element.show();\n    var offset = calculateOffset(lowCriticalScale, minValue, maxValue);\n    var childrenElement = element.children();\n    element.width(offset);\n} else {\n    element.hide();\n}\n\nif (showLowCriticalScale && value !== null) {\n    if (value <= lowCriticalScale) {\n        element.fill(ctx.properties.activeCriticalScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultCriticalScaleColor)\n    }\n}",
       "actions": null
     },
     {
       "tag": "lowWarningScale",
-      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showLowWarningScale = ctx.properties.showLowWarningScale;\nvar showLowCriticalScale = ctx.properties.showLowCriticalScale;\nvar lowWarningScale = ctx.properties.lowWarningScale;\nif (showLowWarningScale) {\n    element.show();\n    var offset = calculateOffset(lowWarningScale, minValue, maxValue);\n    element.width(offset);\n} else {\n    element.hide();\n}\n\nif (showLowWarningScale && value !== null) {\n    var lowCriticalScale = ctx.properties.lowCriticalScale;\n    if (!showLowCriticalScale) {\n        lowCriticalScale = ctx.properties.minValue;\n    }\n    if (value > lowCriticalScale && value <= lowWarningScale) {\n        element.fill(ctx.properties.activeWarningScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultWarningScaleColor);\n    }\n}",
+      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showLowWarningScale = ctx.properties.showLowWarningScale;\nvar showLowCriticalScale = ctx.properties.showLowCriticalScale;\nvar lowWarningScale = ctx.properties.lowWarningScale;\nif (showLowWarningScale) {\n    element.show();\n    var offset = calculateOffset(lowWarningScale, minValue, maxValue);\n    element.width(offset);\n} else {\n    element.hide();\n}\n\nif (showLowWarningScale && value !== null) {\n    var lowCriticalScale = ctx.properties.lowCriticalScale;\n    if (!showLowCriticalScale) {\n        lowCriticalScale = Number.MIN_SAFE_INTEGER;\n    }\n    if (value > lowCriticalScale && value <= lowWarningScale) {\n        element.fill(ctx.properties.activeWarningScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultWarningScaleColor);\n    }\n}",
       "actions": null
     },
     {
diff --git 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
index 7f9244eaea..8cceb84a74 100644
--- 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
@@ -18,12 +18,12 @@
     },
     {
       "tag": "highCriticalScale",
-      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showHighCriticalScale = ctx.properties.showHighCriticalScale;\nvar highCriticalScale = ctx.properties.highCriticalScale;\n\nif (showHighCriticalScale) {\n    element.show();\n    var offset = calculateOffset(highCriticalScale, minValue, maxValue);\n    element.height(653-offset);\n} else {\n    element.hide();\n}\n\nif (showHighCriticalScale && value !== null) {\n    var highCriticalScale = ctx.properties.highCriticalScale;\n    if (value >= highCriticalScale && value <= ctx.properties.maxValue) {\n        element.fill(ctx.properties.activeCriticalScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultCriticalScaleColor)\n    }\n}",
+      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showHighCriticalScale = ctx.properties.showHighCriticalScale;\nvar highCriticalScale = ctx.properties.highCriticalScale;\n\nif (showHighCriticalScale) {\n    element.show();\n    var offset = calculateOffset(highCriticalScale, minValue, maxValue);\n    element.height(653-offset);\n} else {\n    element.hide();\n}\n\nif (showHighCriticalScale && value !== null) {\n    var highCriticalScale = ctx.properties.highCriticalScale;\n    if (value >= highCriticalScale) {\n        element.fill(ctx.properties.activeCriticalScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultCriticalScaleColor)\n    }\n}",
       "actions": null
     },
     {
       "tag": "highWarningScale",
-      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showHighWarningScale = ctx.properties.showHighWarningScale;\nvar showHighCriticalScale = ctx.properties.showHighCriticalScale;\nvar highWarningValue = ctx.properties.highWarningScale;\nif (showHighWarningScale) {\n    element.show();\n    var offset = calculateOffset(highWarningValue, minValue, maxValue);\n    element.height(653-offset);\n} else {\n    element.hide();\n}\nif (showHighWarningScale && value !== null) {\n    var highCriticalScale = ctx.properties.highCriticalScale;\n    if (!showHighCriticalScale) {\n        highCriticalScale = ctx.properties.maxValue;\n    }\n    var highWarningScale = ctx.properties.highWarningScale;\n    if (value < highCriticalScale && value >= highWarningScale) {\n        element.fill(ctx.properties.activeWarningScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultWarningScaleColor);\n    }\n}",
+      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showHighWarningScale = ctx.properties.showHighWarningScale;\nvar showHighCriticalScale = ctx.properties.showHighCriticalScale;\nvar highWarningValue = ctx.properties.highWarningScale;\nif (showHighWarningScale) {\n    element.show();\n    var offset = calculateOffset(highWarningValue, minValue, maxValue);\n    element.height(653-offset);\n} else {\n    element.hide();\n}\nif (showHighWarningScale && value !== null) {\n    var highCriticalScale = ctx.properties.highCriticalScale;\n    if (!showHighCriticalScale) {\n        highCriticalScale = Number.MAX_SAFE_INTEGER;\n    }\n    var highWarningScale = ctx.properties.highWarningScale;\n    if (value < highCriticalScale && value >= highWarningScale) {\n        element.fill(ctx.properties.activeWarningScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultWarningScaleColor);\n    }\n}",
       "actions": null
     },
     {
@@ -33,12 +33,12 @@
     },
     {
       "tag": "lowCriticalScale",
-      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showLowCriticalScale = ctx.properties.showLowCriticalScale;\nvar lowCriticalScale = ctx.properties.lowCriticalScale;\nif (showLowCriticalScale) {\n    element.show();\n    var offset = calculateOffset(lowCriticalScale, minValue, maxValue);\n    element.height(offset);\n} else {\n    element.hide();\n}\n\nif (showLowCriticalScale && value !== null) {\n    if (value <= lowCriticalScale && value >= ctx.properties.minValue) {\n        element.fill(ctx.properties.activeCriticalScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultCriticalScaleColor)\n    }\n}",
+      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showLowCriticalScale = ctx.properties.showLowCriticalScale;\nvar lowCriticalScale = ctx.properties.lowCriticalScale;\nif (showLowCriticalScale) {\n    element.show();\n    var offset = calculateOffset(lowCriticalScale, minValue, maxValue);\n    element.height(offset);\n} else {\n    element.hide();\n}\n\nif (showLowCriticalScale && value !== null) {\n    if (value <= lowCriticalScale) {\n        element.fill(ctx.properties.activeCriticalScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultCriticalScaleColor)\n    }\n}",
       "actions": null
     },
     {
       "tag": "lowWarningScale",
-      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showLowWarningScale = ctx.properties.showLowWarningScale;\nvar showLowCriticalScale = ctx.properties.showLowCriticalScale;\nvar lowWarningScale = ctx.properties.lowWarningScale;\nif (showLowWarningScale) {\n    element.show();\n    var offset = calculateOffset(lowWarningScale, minValue, maxValue);\n    element.height(offset);\n} else {\n    element.hide();\n}\n\nif (showLowWarningScale && value !== null) {\n    var lowCriticalScale = ctx.properties.lowCriticalScale;\n    if (!showLowCriticalScale) {\n        lowCriticalScale = ctx.properties.minValue;\n    }\n    if (value > lowCriticalScale && value <= lowWarningScale) {\n        element.fill(ctx.properties.activeWarningScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultWarningScaleColor);\n    }\n}",
+      "stateRenderFunction": "function calculateOffset(value, minValue, maxValue) {\n    var clampedValue = Math.max(minValue, Math.min(value, maxValue));\n    var normalizedValue = (clampedValue - minValue) / (maxValue - minValue);\n    var offset = normalizedValue * 653;\n    return offset;\n}\n\nvar value = ctx.values.value;\nvar minValue = ctx.properties.minValue;\nvar maxValue = ctx.properties.maxValue;\nvar showLowWarningScale = ctx.properties.showLowWarningScale;\nvar showLowCriticalScale = ctx.properties.showLowCriticalScale;\nvar lowWarningScale = ctx.properties.lowWarningScale;\nif (showLowWarningScale) {\n    element.show();\n    var offset = calculateOffset(lowWarningScale, minValue, maxValue);\n    element.height(offset);\n} else {\n    element.hide();\n}\nif (showLowWarningScale && value !== null) {\n    var lowCriticalScale = ctx.properties.lowCriticalScale;\n    if (!showLowCriticalScale) {\n        lowCriticalScale = Number.MIN_SAFE_INTEGER;\n    }\n    if (value > lowCriticalScale && value <= lowWarningScale) {\n        element.fill(ctx.properties.activeWarningScaleColor);\n    } else {\n        element.fill(ctx.properties.defaultWarningScaleColor);\n    }\n}",
       "actions": null
     },
     {