From e48fad57c59ea1f51ee272064d728c10cd8b324d Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 26 Jul 2024 14:40:17 +0300
Subject: [PATCH] UI: Valve SCADA symbols.

---
 .../scada_symbols/horizontal-ball-valve.svg   | 213 ++++++++++++++
 .../scada_symbols/vertical-ball-valve.svg     | 213 ++++++++++++++
 .../scada_symbols/vertical-wheel-valve.svg    | 260 ++++++++++++++++++
 .../scada_water_system_symbols.json           |   3 +
 4 files changed, 689 insertions(+)
 create mode 100644 application/src/main/data/json/system/scada_symbols/horizontal-ball-valve.svg
 create mode 100644 application/src/main/data/json/system/scada_symbols/vertical-ball-valve.svg
 create mode 100644 application/src/main/data/json/system/scada_symbols/vertical-wheel-valve.svg

diff --git a/application/src/main/data/json/system/scada_symbols/horizontal-ball-valve.svg b/application/src/main/data/json/system/scada_symbols/horizontal-ball-valve.svg
new file mode 100644
index 0000000000..faad4a5ba5
--- /dev/null
+++ b/application/src/main/data/json/system/scada_symbols/horizontal-ball-valve.svg
@@ -0,0 +1,213 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" width="200" height="200" fill="none" version="1.1" viewBox="0 0 200 200">
+<tb:metadata xmlns=""><![CDATA[{
+  "title": "Horizontal ball valve",
+  "description": "Horizontal ball valve with open/close animation and state colors.",
+  "searchTags": [
+    "valve",
+    "ball"
+  ],
+  "widgetSizeX": 1,
+  "widgetSizeY": 1,
+  "tags": [
+    {
+      "tag": "background",
+      "stateRenderFunction": "var opened = ctx.values.opened;\nvar openAnimate = element.remember('openAnimate');\nvar color = opened ? ctx.properties.openedColor : ctx.properties.closedColor;\nif (!openAnimate) {\n    element.attr({fill: color});\n} else {\n    ctx.api.animate(element, 500).attr({fill: color});\n    element.remember('openAnimate', false);\n}\n",
+      "actions": null
+    },
+    {
+      "tag": "clickArea",
+      "stateRenderFunction": null,
+      "actions": {
+        "click": {
+          "actionFunction": " ctx.tags.wheel.forEach(e => {\n     e.remember('openAnimate', true);\n });\n ctx.tags.background.forEach(e => {\n     e.remember('openAnimate', true);\n });\n\n\nvar opened = ctx.values.opened;\nvar action = opened ? 'close' : 'open';\n\nctx.api.callAction(event, action, undefined, {\n  next: () => {\n     ctx.api.setValue('opened', !opened);\n  }\n});"
+        }
+      }
+    },
+    {
+      "tag": "wheel",
+      "stateRenderFunction": "var opened = ctx.values.opened;\nvar openAnimate = element.remember('openAnimate');\nvar angle = opened ? ctx.properties.openedRotationAngle : ctx.properties.closedRotationAngle;\nif (!openAnimate) {\n    element.transform({rotate: angle, originX: 100});\n} else {\n    ctx.api.animate(element, 500).transform({rotate: angle, originX: 100});\n    element.remember('openAnimate', false);\n}\n",
+      "actions": null
+    }
+  ],
+  "behavior": [
+    {
+      "id": "opened",
+      "name": "{i18n:scada.symbol.opened}",
+      "hint": "{i18n:scada.symbol.opened-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "BOOLEAN",
+      "defaultValue": false,
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": "{i18n:scada.symbol.opened}",
+      "valueToDataType": "CONSTANT",
+      "constantValue": false,
+      "valueToDataFunction": ""
+    },
+    {
+      "id": "open",
+      "name": "{i18n:scada.symbol.open}",
+      "hint": "{i18n:scada.symbol.open-hint}",
+      "group": null,
+      "type": "action",
+      "valueType": "BOOLEAN",
+      "defaultValue": false,
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "valueToDataType": "CONSTANT",
+      "constantValue": true,
+      "valueToDataFunction": ""
+    },
+    {
+      "id": "close",
+      "name": "{i18n:scada.symbol.close}",
+      "hint": "{i18n:scada.symbol.close-hint}",
+      "group": null,
+      "type": "action",
+      "valueType": "BOOLEAN",
+      "defaultValue": false,
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "valueToDataType": "CONSTANT",
+      "constantValue": false,
+      "valueToDataFunction": ""
+    }
+  ],
+  "properties": [
+    {
+      "id": "openedColor",
+      "name": "{i18n:scada.symbol.opened-color}",
+      "type": "color",
+      "default": "#1C943E",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "closedColor",
+      "name": "{i18n:scada.symbol.closed-color}",
+      "type": "color",
+      "default": "#696969",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "openedRotationAngle",
+      "name": "{i18n:scada.symbol.opened-rotation-angle}",
+      "type": "number",
+      "default": 0,
+      "required": true,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": -179,
+      "max": 179,
+      "step": null
+    },
+    {
+      "id": "closedRotationAngle",
+      "name": "{i18n:scada.symbol.closed-rotation-angle}",
+      "type": "number",
+      "default": 90,
+      "required": true,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": -179,
+      "max": 179,
+      "step": null
+    }
+  ]
+}]]></tb:metadata><defs>
+  <linearGradient id="paint0_linear_1595_99338" x1="58.72" x2="58.3" y1="46.5" y2="153.51" gradientTransform="translate(-1.1e-6)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#020202" stop-opacity=".35" offset="0"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".18316"/>
+   <stop stop-color="#fff" stop-opacity=".08" offset=".35085"/>
+   <stop stop-color="#fff" stop-opacity=".25" offset=".49829"/>
+   <stop stop-color="#fff" stop-opacity=".08" offset=".64825"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".82318"/>
+   <stop stop-color="#020202" stop-opacity=".35" offset="1"/>
+  </linearGradient>
+  <filter id="filter0_d_1595_99338" x="65" y="65" width="131" height="70" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+   <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+   <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+   <feOffset/>
+   <feGaussianBlur stdDeviation="4"/>
+   <feComposite in2="hardAlpha" operator="out"/>
+   <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+   <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1595_99338"/>
+   <feBlend in="SourceGraphic" in2="effect1_dropShadow_1595_99338" result="shape"/>
+  </filter>
+  <filter id="filter1_d_1595_99338" x="100" y="76.174" width="100" height="47.652" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+   <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+   <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+   <feOffset/>
+   <feGaussianBlur stdDeviation="2"/>
+   <feComposite in2="hardAlpha" operator="out"/>
+   <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+   <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1595_99338"/>
+   <feBlend in="SourceGraphic" in2="effect1_dropShadow_1595_99338" result="shape"/>
+  </filter>
+  <radialGradient id="paint1_radial_1595_99338" cx="0" cy="0" r="1" gradientTransform="matrix(0 10.846 -89.342 0 180.83 100.52)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#9B9B9B" offset="1"/>
+  </radialGradient>
+  <filter id="filter2_ii_1595_99338" x="69.875" y="69.875" width="60.25" height="60.25" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+   <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+   <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+   <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+   <feOffset dx="3.12497" dy="-3.12497"/>
+   <feGaussianBlur stdDeviation="3.12497"/>
+   <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+   <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+   <feBlend in2="shape" result="effect1_innerShadow_1595_99338"/>
+   <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+   <feOffset dx="-3.12497" dy="3.12497"/>
+   <feGaussianBlur stdDeviation="3.12497"/>
+   <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+   <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
+   <feBlend in2="effect1_innerShadow_1595_99338" result="effect2_innerShadow_1595_99338"/>
+  </filter>
+  <filter id="filter3_i_1595_99338" x="72" y="77" width="51" height="51" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+   <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+   <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+   <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+   <feOffset dx="-5" dy="5"/>
+   <feGaussianBlur stdDeviation="4"/>
+   <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+   <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+   <feBlend in2="shape" result="effect1_innerShadow_1595_99338"/>
+  </filter>
+ </defs><rect x="1.5" y="51.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" stroke-width="3"/><path d="m14 63.075s25.882-5.5691 43-8.8079c16.632-3.1469 26.182-3.767 43-3.767 16.818 0 26.368 0.6201 43 3.767 17.118 3.2388 43 8.8079 43 8.8079v73.833s-25.882 4.816-43 8.055c-16.632 3.147-26.182 4.374-43 4.52-16.807 0.147-26.377-0.639-43-3.767-17.177-3.231-43-8.808-43-8.808z" fill="#1c943e" tb:tag="background"/><path d="m14 63.075s25.882-5.5691 43-8.8079c16.632-3.1469 26.182-3.767 43-3.767 16.818 0 26.368 0.6201 43 3.767 17.118 3.2388 43 8.8079 43 8.8079v73.833s-25.882 4.816-43 8.055c-16.632 3.147-26.182 4.374-43 4.52-16.807 0.147-26.377-0.639-43-3.767-17.177-3.231-43-8.808-43-8.808z" fill="url(#paint0_linear_1595_99338)" style="fill:url(#paint0_linear_1595_99338)"/><path d="m181.38 63.621c1.321 0.281 2.384 0.5079 3.123 0.6661v71.375c-0.738 0.137-1.787 0.333-3.086 0.575-2.694 0.502-6.465 1.205-10.77 2.01-8.611 1.608-19.362 3.622-27.923 5.242-16.568 3.135-26.026 4.349-42.734 4.494-16.714 0.146-26.186-0.632-42.71-3.741-8.5733-1.613-19.311-3.812-27.912-5.61-4.299-0.898-8.0616-1.696-10.749-2.269-1.3186-0.281-2.3784-0.508-3.1159-0.666v-71.41c0.7391-0.1582 1.8016-0.3851 3.1235-0.6661 2.6925-0.5724 6.4608-1.3694 10.764-2.2675 8.6083-1.7967 19.347-3.9963 27.892-5.6129 16.521-3.1259 25.975-3.7409 42.721-3.7409 16.746 0 26.2 0.615 42.721 3.7409 8.545 1.6166 19.283 3.8162 27.892 5.6129 4.303 0.8981 8.071 1.6951 10.764 2.2675z" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect x="187.5" y="51.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" stroke-width="3"/><g tb:tag="wheel">
+  <path d="m100 80.174s21.238 7.876 45.5 8c14.198 0.0726 28.327-1.0525 38.64-2.1526 8.35-0.8908 15.86 5.581 15.86 13.979 0 8.3981-7.51 14.869-15.86 13.979-10.313-1.1-24.442-2.226-38.64-2.153-24.262 0.124-45.5 8-45.5 8z" fill="url(#paint1_radial_1595_99338)" style="fill:url(#paint1_radial_1595_99338);filter:url(#filter1_d_1595_99338)"/>
+  <path d="m100.5 119.12v-38.234c0.09 0.0315 0.19 0.0659 0.298 0.1029 0.632 0.217 1.561 0.5266 2.75 0.8983 2.38 0.7432 5.804 1.7348 9.988 2.7301 8.365 1.99 19.78 3.9978 31.961 4.06 14.224 0.0727 28.373-1.0542 38.696-2.1554 8.068-0.8607 15.307 5.3942 15.307 13.482 0 8.0871-7.239 14.342-15.307 13.481-10.323-1.101-24.472-2.228-38.696-2.155-12.181 0.062-23.596 2.07-31.961 4.06-4.184 0.995-7.608 1.987-9.988 2.73-1.189 0.372-2.118 0.681-2.75 0.898-0.108 0.037-0.208 0.072-0.298 0.103z" stroke="#000" stroke-opacity=".12" style="filter:url(#filter1_d_1595_99338)"/>
+ </g><g filter="url(#filter2_ii_1595_99338)">
+  <circle cx="100" cy="100" r="27" fill="#d9d9d9"/>
+ </g><path d="m123 100c0 12.703-10.297 23-23 23-12.702 0-23-10.297-23-23 0-12.702 10.298-23 23-23 12.703 0 23 10.298 23 23z" fill="#000" fill-opacity=".05" style="filter:url(#filter0_d_1595_99338)"/><g filter="url(#filter3_i_1595_99338)">
+  <path d="m123 100c0 12.703-10.297 23-23 23-12.702 0-23-10.297-23-23 0-12.702 10.298-23 23-23 12.703 0 23 10.298 23 23z" fill="#1c943e" tb:tag="background"/>
+ </g><path d="m122 100c0 12.15-9.85 22-22 22-12.15 0-22-9.85-22-22 0-12.15 9.8497-22 22-22 12.15 0 22 9.8497 22 22z" stroke="#fff" stroke-width="2"/><path d="m97.283 90.614c0-0.647-0.6112-1.1214-1.2155-0.8901-4.133 1.5825-7.0677 5.5867-7.0677 10.276 0 6.0751 4.9249 11 11 11 6.075 0 11-4.925 11-11 0-4.5642-2.78-8.4791-6.739-10.144-0.609-0.2563-1.243 0.2209-1.243 0.882 0 0.4223 0.268 0.7938 0.655 0.9649 3.18 1.4098 5.398 4.5944 5.398 8.2973 0 5.0101-4.061 9.0711-9.071 9.0711-5.01 0-9.0714-4.061-9.0714-9.0711 0-3.8068 2.3447-7.0658 5.6688-8.4117 0.4019-0.1628 0.6858-0.541 0.6858-0.9746z" clip-rule="evenodd" fill="#fff" fill-rule="evenodd"/><path d="m99.514 87.637c0-0.3519 0.2852-0.6372 0.6373-0.6372 0.352 0 0.637 0.2853 0.637 0.6372v10.401c0 0.3519-0.285 0.6372-0.637 0.6372-0.3521 0-0.6373-0.2853-0.6373-0.6372z" fill="#fff"/><rect y="50" width="200" height="100" fill="#000" fill-opacity="0" stroke-width="0" tb:tag="clickArea"/>
+</svg>
\ No newline at end of file
diff --git a/application/src/main/data/json/system/scada_symbols/vertical-ball-valve.svg b/application/src/main/data/json/system/scada_symbols/vertical-ball-valve.svg
new file mode 100644
index 0000000000..9aa3fcdefa
--- /dev/null
+++ b/application/src/main/data/json/system/scada_symbols/vertical-ball-valve.svg
@@ -0,0 +1,213 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" width="200" height="200" fill="none" version="1.1" viewBox="0 0 200 200">
+<tb:metadata xmlns=""><![CDATA[{
+  "title": "Vertical ball valve",
+  "description": "Vertical ball valve with open/close animation and state colors.",
+  "searchTags": [
+    "valve",
+    "ball"
+  ],
+  "widgetSizeX": 1,
+  "widgetSizeY": 1,
+  "tags": [
+    {
+      "tag": "background",
+      "stateRenderFunction": "var opened = ctx.values.opened;\nvar openAnimate = element.remember('openAnimate');\nvar color = opened ? ctx.properties.openedColor : ctx.properties.closedColor;\nif (!openAnimate) {\n    element.attr({fill: color});\n} else {\n    ctx.api.animate(element, 500).attr({fill: color});\n    element.remember('openAnimate', false);\n}\n",
+      "actions": null
+    },
+    {
+      "tag": "clickArea",
+      "stateRenderFunction": null,
+      "actions": {
+        "click": {
+          "actionFunction": " ctx.tags.wheel.forEach(e => {\n     e.remember('openAnimate', true);\n });\n ctx.tags.background.forEach(e => {\n     e.remember('openAnimate', true);\n });\n\n\nvar opened = ctx.values.opened;\nvar action = opened ? 'close' : 'open';\n\nctx.api.callAction(event, action, undefined, {\n  next: () => {\n     ctx.api.setValue('opened', !opened);\n  }\n});"
+        }
+      }
+    },
+    {
+      "tag": "wheel",
+      "stateRenderFunction": "var opened = ctx.values.opened;\nvar openAnimate = element.remember('openAnimate');\nvar angle = opened ? ctx.properties.openedRotationAngle : ctx.properties.closedRotationAngle;\nif (!openAnimate) {\n    element.transform({rotate: angle, originY: 100});\n} else {\n    ctx.api.animate(element, 500).transform({rotate: angle, originY: 100});\n    element.remember('openAnimate', false);\n}\n",
+      "actions": null
+    }
+  ],
+  "behavior": [
+    {
+      "id": "opened",
+      "name": "{i18n:scada.symbol.opened}",
+      "hint": "{i18n:scada.symbol.opened-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "BOOLEAN",
+      "defaultValue": false,
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": "{i18n:scada.symbol.opened}",
+      "valueToDataType": "CONSTANT",
+      "constantValue": false,
+      "valueToDataFunction": ""
+    },
+    {
+      "id": "open",
+      "name": "{i18n:scada.symbol.open}",
+      "hint": "{i18n:scada.symbol.open-hint}",
+      "group": null,
+      "type": "action",
+      "valueType": "BOOLEAN",
+      "defaultValue": false,
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "valueToDataType": "CONSTANT",
+      "constantValue": true,
+      "valueToDataFunction": ""
+    },
+    {
+      "id": "close",
+      "name": "{i18n:scada.symbol.close}",
+      "hint": "{i18n:scada.symbol.close-hint}",
+      "group": null,
+      "type": "action",
+      "valueType": "BOOLEAN",
+      "defaultValue": false,
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "valueToDataType": "CONSTANT",
+      "constantValue": false,
+      "valueToDataFunction": ""
+    }
+  ],
+  "properties": [
+    {
+      "id": "openedColor",
+      "name": "{i18n:scada.symbol.opened-color}",
+      "type": "color",
+      "default": "#1C943E",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "closedColor",
+      "name": "{i18n:scada.symbol.closed-color}",
+      "type": "color",
+      "default": "#696969",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "openedRotationAngle",
+      "name": "{i18n:scada.symbol.opened-rotation-angle}",
+      "type": "number",
+      "default": 0,
+      "required": true,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": -179,
+      "max": 179,
+      "step": null
+    },
+    {
+      "id": "closedRotationAngle",
+      "name": "{i18n:scada.symbol.closed-rotation-angle}",
+      "type": "number",
+      "default": 90,
+      "required": true,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": -179,
+      "max": 179,
+      "step": null
+    }
+  ]
+}]]></tb:metadata><defs>
+  <linearGradient id="paint0_linear_1595_99338" x1="58.72" x2="58.3" y1="46.5" y2="153.51" gradientTransform="rotate(-90,100,100)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#020202" stop-opacity=".35" offset="0"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".18316"/>
+   <stop stop-color="#fff" stop-opacity=".08" offset=".35085"/>
+   <stop stop-color="#fff" stop-opacity=".25" offset=".49829"/>
+   <stop stop-color="#fff" stop-opacity=".08" offset=".64825"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".82318"/>
+   <stop stop-color="#020202" stop-opacity=".35" offset="1"/>
+  </linearGradient>
+  <filter id="filter0_d_1595_99338" x="65" y="65" width="131" height="70" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+   <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+   <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+   <feOffset/>
+   <feGaussianBlur stdDeviation="4"/>
+   <feComposite in2="hardAlpha" operator="out"/>
+   <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+   <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1595_99338"/>
+   <feBlend in="SourceGraphic" in2="effect1_dropShadow_1595_99338" result="shape"/>
+  </filter>
+  <filter id="filter1_d_1595_99338" x="100" y="76.174" width="100" height="47.652" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+   <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+   <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+   <feOffset/>
+   <feGaussianBlur stdDeviation="2"/>
+   <feComposite in2="hardAlpha" operator="out"/>
+   <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+   <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1595_99338"/>
+   <feBlend in="SourceGraphic" in2="effect1_dropShadow_1595_99338" result="shape"/>
+  </filter>
+  <radialGradient id="paint1_radial_1595_99338" cx="0" cy="0" r="1" gradientTransform="matrix(0,10.846,-89.342,0,180.83,100.52)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#9B9B9B" offset="1"/>
+  </radialGradient>
+  <filter id="filter2_ii_1595_99338" x="69.875" y="69.875" width="60.25" height="60.25" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+   <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+   <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+   <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+   <feOffset dx="3.12497" dy="-3.12497"/>
+   <feGaussianBlur stdDeviation="3.12497"/>
+   <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+   <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+   <feBlend in2="shape" result="effect1_innerShadow_1595_99338"/>
+   <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+   <feOffset dx="-3.12497" dy="3.12497"/>
+   <feGaussianBlur stdDeviation="3.12497"/>
+   <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+   <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
+   <feBlend in2="effect1_innerShadow_1595_99338" result="effect2_innerShadow_1595_99338"/>
+  </filter>
+  <filter id="filter3_i_1595_99338" x="72" y="77" width="51" height="51" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+   <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+   <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+   <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+   <feOffset dx="-5" dy="5"/>
+   <feGaussianBlur stdDeviation="4"/>
+   <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+   <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+   <feBlend in2="shape" result="effect1_innerShadow_1595_99338"/>
+  </filter>
+ </defs><rect transform="rotate(-90)" x="-198.5" y="51.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" stroke-width="3"/><path d="m63.075 186s-5.5691-25.882-8.8079-43c-3.1469-16.632-3.767-26.182-3.767-43s0.6201-26.368 3.767-43c3.2388-17.118 8.8079-43 8.8079-43h73.833s4.816 25.882 8.055 43c3.147 16.632 4.374 26.182 4.52 43 0.147 16.807-0.639 26.377-3.767 43-3.231 17.177-8.808 43-8.808 43z" fill="#1c943e" tb:tag="background"/><path d="m63.075 186s-5.5691-25.882-8.8079-43c-3.1469-16.632-3.767-26.182-3.767-43s0.6201-26.368 3.767-43c3.2388-17.118 8.8079-43 8.8079-43h73.833s4.816 25.882 8.055 43c3.147 16.632 4.374 26.182 4.52 43 0.147 16.807-0.639 26.377-3.767 43-3.231 17.177-8.808 43-8.808 43z" fill="url(#paint0_linear_1595_99338)" style="fill:url(#paint0_linear_1595_99338)"/><path d="m63.621 18.62c0.281-1.321 0.5079-2.384 0.6661-3.123h71.375c0.137 0.738 0.333 1.787 0.575 3.086 0.502 2.694 1.205 6.465 2.01 10.77 1.608 8.611 3.622 19.362 5.242 27.923 3.135 16.568 4.349 26.026 4.494 42.734 0.146 16.714-0.632 26.186-3.741 42.71-1.613 8.5733-3.812 19.311-5.61 27.912-0.898 4.299-1.696 8.0616-2.269 10.749-0.281 1.3186-0.508 2.3784-0.666 3.1159h-71.41c-0.1582-0.7391-0.3851-1.8016-0.6661-3.1235-0.5724-2.6925-1.3694-6.4608-2.2675-10.764-1.7967-8.6083-3.9963-19.347-5.6129-27.892-3.1259-16.521-3.7409-25.975-3.7409-42.721s0.615-26.2 3.7409-42.721c1.6166-8.545 3.8162-19.283 5.6129-27.892 0.8981-4.303 1.6951-8.071 2.2675-10.764z" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect transform="rotate(-90)" x="-12.5" y="51.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" stroke-width="3"/><g tb:tag="wheel">
+  <path transform="rotate(-90,100,100)" d="m100 80.174s21.238 7.876 45.5 8c14.198 0.0726 28.327-1.0525 38.64-2.1526 8.35-0.8908 15.86 5.581 15.86 13.979 0 8.3981-7.51 14.869-15.86 13.979-10.313-1.1-24.442-2.226-38.64-2.153-24.262 0.124-45.5 8-45.5 8z" fill="url(#paint1_radial_1595_99338)" style="fill:url(#paint1_radial_1595_99338);filter:url(#filter1_d_1595_99338)"/>
+  <path transform="rotate(-90,100,100)" d="m100.5 119.12v-38.234c0.09 0.0315 0.19 0.0659 0.298 0.1029 0.632 0.217 1.561 0.5266 2.75 0.8983 2.38 0.7432 5.804 1.7348 9.988 2.7301 8.365 1.99 19.78 3.9978 31.961 4.06 14.224 0.0727 28.373-1.0542 38.696-2.1554 8.068-0.8607 15.307 5.3942 15.307 13.482 0 8.0871-7.239 14.342-15.307 13.481-10.323-1.101-24.472-2.228-38.696-2.155-12.181 0.062-23.596 2.07-31.961 4.06-4.184 0.995-7.608 1.987-9.988 2.73-1.189 0.372-2.118 0.681-2.75 0.898-0.108 0.037-0.208 0.072-0.298 0.103z" stroke="#000" stroke-opacity=".12" style="filter:url(#filter1_d_1595_99338)"/>
+ </g><g filter="url(#filter2_ii_1595_99338)">
+  <circle cx="100" cy="100" r="27" fill="#d9d9d9"/>
+ </g><path d="m123 100c0 12.703-10.297 23-23 23-12.702 0-23-10.297-23-23 0-12.702 10.298-23 23-23 12.703 0 23 10.298 23 23z" fill="#000" fill-opacity=".05" style="filter:url(#filter0_d_1595_99338)"/><g filter="url(#filter3_i_1595_99338)">
+  <path d="m123 100c0 12.703-10.297 23-23 23-12.702 0-23-10.297-23-23 0-12.702 10.298-23 23-23 12.703 0 23 10.298 23 23z" fill="#1c943e" tb:tag="background"/>
+ </g><path d="m122 100c0 12.15-9.85 22-22 22s-22-9.85-22-22 9.8497-22 22-22c12.15 0 22 9.8497 22 22z" stroke="#fff" stroke-width="2"/><path d="m97.283 90.614c0-0.647-0.6112-1.1214-1.2155-0.8901-4.133 1.5825-7.0677 5.5867-7.0677 10.276 0 6.0751 4.9249 11 11 11 6.075 0 11-4.925 11-11 0-4.5642-2.78-8.4791-6.739-10.144-0.609-0.2563-1.243 0.2209-1.243 0.882 0 0.4223 0.268 0.7938 0.655 0.9649 3.18 1.4098 5.398 4.5944 5.398 8.2973 0 5.0101-4.061 9.0711-9.071 9.0711s-9.0714-4.061-9.0714-9.0711c0-3.8068 2.3447-7.0658 5.6688-8.4117 0.4019-0.1628 0.6858-0.541 0.6858-0.9746z" clip-rule="evenodd" fill="#fff" fill-rule="evenodd"/><path d="m99.514 87.637c0-0.3519 0.2852-0.6372 0.6373-0.6372 0.352 0 0.637 0.2853 0.637 0.6372v10.401c0 0.3519-0.285 0.6372-0.637 0.6372-0.3521 0-0.6373-0.2853-0.6373-0.6372z" fill="#fff"/><rect transform="rotate(-90)" x="-200" y="50" width="200" height="100" fill="#000" fill-opacity="0" stroke-width="0" tb:tag="clickArea"/>
+</svg>
\ No newline at end of file
diff --git a/application/src/main/data/json/system/scada_symbols/vertical-wheel-valve.svg b/application/src/main/data/json/system/scada_symbols/vertical-wheel-valve.svg
new file mode 100644
index 0000000000..e304b52f4f
--- /dev/null
+++ b/application/src/main/data/json/system/scada_symbols/vertical-wheel-valve.svg
@@ -0,0 +1,260 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" width="200" height="400" fill="none" version="1.1" viewBox="0 0 200 400">
+ <tb:metadata><![CDATA[{
+  "title": "Vertical wheel valve",
+  "description": "Vertical wheel valve with open/close animation and state colors.",
+  "searchTags": [
+    "valve",
+    "wheel"
+  ],
+  "widgetSizeX": 1,
+  "widgetSizeY": 2,
+  "tags": [
+    {
+      "tag": "background",
+      "stateRenderFunction": "var opened = ctx.values.opened;\nvar openAnimate = element.remember('openAnimate');\nvar color = opened ? ctx.properties.openedColor : ctx.properties.closedColor;\nif (!openAnimate) {\n    element.attr({fill: color});\n} else {\n    ctx.api.animate(element, 500).attr({fill: color});\n    element.remember('openAnimate', false);\n}\n",
+      "actions": null
+    },
+    {
+      "tag": "clickArea",
+      "stateRenderFunction": null,
+      "actions": {
+        "click": {
+          "actionFunction": " ctx.tags.wheel.forEach(e => {\n     e.remember('openAnimate', true);\n });\n ctx.tags.background.forEach(e => {\n     e.remember('openAnimate', true);\n });\n\n\nvar opened = ctx.values.opened;\nvar action = opened ? 'close' : 'open';\n\nctx.api.callAction(event, action, undefined, {\n  next: () => {\n     ctx.api.setValue('opened', !opened);\n  }\n});"
+        }
+      }
+    },
+    {
+      "tag": "wheel",
+      "stateRenderFunction": "var opened = ctx.values.opened;\nvar openAnimate = element.remember('openAnimate');\nvar angle = opened ? ctx.properties.openedRotationAngle : ctx.properties.closedRotationAngle;\nif (!openAnimate) {\n    element.transform({rotate: angle});\n} else {\n    ctx.api.animate(element, 500).transform({rotate: angle});\n    element.remember('openAnimate', false);\n}\n",
+      "actions": null
+    }
+  ],
+  "behavior": [
+    {
+      "id": "opened",
+      "name": "{i18n:scada.symbol.opened}",
+      "hint": "{i18n:scada.symbol.opened-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "BOOLEAN",
+      "defaultValue": false,
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": "{i18n:scada.symbol.opened}",
+      "valueToDataType": "CONSTANT",
+      "constantValue": false,
+      "valueToDataFunction": ""
+    },
+    {
+      "id": "open",
+      "name": "{i18n:scada.symbol.open}",
+      "hint": "{i18n:scada.symbol.open-hint}",
+      "group": null,
+      "type": "action",
+      "valueType": "BOOLEAN",
+      "defaultValue": false,
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "valueToDataType": "CONSTANT",
+      "constantValue": true,
+      "valueToDataFunction": ""
+    },
+    {
+      "id": "close",
+      "name": "{i18n:scada.symbol.close}",
+      "hint": "{i18n:scada.symbol.close-hint}",
+      "group": null,
+      "type": "action",
+      "valueType": "BOOLEAN",
+      "defaultValue": false,
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "valueToDataType": "CONSTANT",
+      "constantValue": false,
+      "valueToDataFunction": ""
+    }
+  ],
+  "properties": [
+    {
+      "id": "openedColor",
+      "name": "{i18n:scada.symbol.opened-color}",
+      "type": "color",
+      "default": "#1C943E",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "closedColor",
+      "name": "{i18n:scada.symbol.closed-color}",
+      "type": "color",
+      "default": "#696969",
+      "required": null,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": null,
+      "max": null,
+      "step": null
+    },
+    {
+      "id": "openedRotationAngle",
+      "name": "{i18n:scada.symbol.opened-rotation-angle}",
+      "type": "number",
+      "default": 0,
+      "required": true,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": -179,
+      "max": 179,
+      "step": null
+    },
+    {
+      "id": "closedRotationAngle",
+      "name": "{i18n:scada.symbol.closed-rotation-angle}",
+      "type": "number",
+      "default": 90,
+      "required": true,
+      "subLabel": null,
+      "divider": null,
+      "fieldSuffix": null,
+      "disableOnProperty": null,
+      "rowClass": "",
+      "fieldClass": "",
+      "min": -179,
+      "max": 179,
+      "step": null
+    }
+  ]
+}]]></tb:metadata>
+ <path d="m171.26 200c0-28.161-0.82311-44.15-5-72-4.2988-28.662-17-72-17-72h13.99c4.4182 0 8-3.5817 8-8v-26c0-4.4183-3.5818-8-8-8h-126c-4.418 0-8 3.5817-8 8v26c0 4.4183 3.582 8 8 8h14.01s-12.711 43.238-17 72c-4.151 27.834-5.195 43.859-5 72 0.19499 28.16 1.823 44.15 6 72 4.299 28.663 16 72 16 72h-14.01c-4.418 0-8 3.582-8 8v26c0 4.418 3.582 8 8 8h126c4.4182 0 8-3.582 8-8v-26c0-4.418-3.5818-8-8-8h-13.99s12.701-43.337 17-72c4.1769-27.85 5-43.839 5-72z" fill="#1c943e" tb:tag="background"/>
+ <rect transform="rotate(90)" x="1.5" y="-148.25" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" stroke-width="3"/>
+ <rect transform="rotate(90)" x="14" y="-170.75" width="42" height="142" rx="8" fill="url(#paint0_linear_1343_53957)" style="fill:url(#paint0_linear_1343_53957)"/>
+ <rect transform="rotate(90)" x="15.5" y="-169.25" width="39" height="139" rx="6.5" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+ <path d="m148.76 56s12.701 43.338 17 72c4.1769 27.85 5 43.839 5 72s-0.8231 44.15-5 72c-4.2988 28.663-17 72-17 72h-98s-11.701-43.337-16-72c-4.177-27.85-5.806-43.84-6-72-0.195-28.141 0.849-44.166 5-72 4.289-28.762 17-72 17-72z" fill="url(#paint1_linear_1343_53957)" style="fill:url(#paint1_linear_1343_53957)"/>
+ <path d="m147.87 341.67c-0.09 0.314-0.1699 0.591-0.239 0.831h-95.722c-0.062-0.233-0.133-0.501-0.212-0.802-0.328-1.238-0.801-3.04-1.382-5.292-1.163-4.505-2.758-10.809-4.487-18.008-3.46-14.409-7.448-32.357-9.587-46.62-4.169-27.798-5.789-43.715-5.983-71.788-0.194-28.068 0.844-44.015 4.983-71.769 2.133-14.3 6.366-32.237 10.078-46.632 1.854-7.1905 3.574-13.484 4.83-17.98 0.629-2.2476 1.141-4.0454 1.496-5.2807 0.09-0.3128 0.17-0.5896 0.239-0.8284h95.747c0.0691 0.2396 0.149 0.5174 0.239 0.8314 0.3548 1.2379 0.8668 3.0393 1.4947 5.2909 1.2558 4.5034 2.9751 10.806 4.8284 18.003 3.7103 14.408 7.9439 32.345 10.081 46.596 4.1635 27.761 4.9834 43.674 4.9834 71.778s-0.8199 44.017-4.9834 71.778c-2.1374 14.251-6.371 32.189-10.081 46.596-1.8533 7.197-3.5726 13.5-4.8284 18.004-0.6279 2.251-1.1399 4.053-1.4947 5.291z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+ <rect transform="rotate(90)" x="344" y="-170.75" width="42" height="142" rx="8" fill="url(#paint2_linear_1343_53957)" style="fill:url(#paint2_linear_1343_53957)"/>
+ <rect transform="rotate(90)" x="345.5" y="-169.25" width="39" height="139" rx="6.5" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+ <rect transform="rotate(90)" x="387.5" y="-148.25" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" stroke-width="3"/>
+ <defs>
+  <filter id="filter0_ii_1343_53957" x="166.88" y="67.863" width="66.25" height="66.25" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+   <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+   <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+   <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+   <feOffset dx="3.12497" dy="-3.12497"/>
+   <feGaussianBlur stdDeviation="3.12497"/>
+   <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+   <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+   <feBlend in2="shape" result="effect1_innerShadow_1343_53957"/>
+   <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+   <feOffset dx="-3.12497" dy="3.12497"/>
+   <feGaussianBlur stdDeviation="3.12497"/>
+   <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+   <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
+   <feBlend in2="effect1_innerShadow_1343_53957" result="effect2_innerShadow_1343_53957"/>
+  </filter>
+  <filter id="filter1_i_1343_53957" x="172" y="78" width="51" height="51" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+   <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+   <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+   <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+   <feOffset dx="-5" dy="5"/>
+   <feGaussianBlur stdDeviation="4"/>
+   <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
+   <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+   <feBlend in2="shape" result="effect1_innerShadow_1343_53957"/>
+  </filter>
+  <linearGradient id="paint0_linear_1343_53957" x1="24.92" x2="21.891" y1="30" y2="171.95" gradientTransform="translate(-1e-5 -200.75)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#020202" stop-opacity=".35" offset="0"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".18316"/>
+   <stop stop-color="#fff" stop-opacity=".08" offset=".35085"/>
+   <stop stop-color="#fff" stop-opacity=".25" offset=".49829"/>
+   <stop stop-color="#fff" stop-opacity=".08" offset=".64825"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".82318"/>
+   <stop stop-color="#020202" stop-opacity=".35" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint1_linear_1343_53957" x1="130.88" x2="130.44" y1="29.988" y2="172.02" gradientTransform="rotate(90 100.37 100.37)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#020202" stop-opacity=".35" offset="0"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".18316"/>
+   <stop stop-color="#fff" stop-opacity=".08" offset=".35085"/>
+   <stop stop-color="#fff" stop-opacity=".25" offset=".49829"/>
+   <stop stop-color="#fff" stop-opacity=".08" offset=".64825"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".82318"/>
+   <stop stop-color="#020202" stop-opacity=".35" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint2_linear_1343_53957" x1="354.92" x2="351.89" y1="30" y2="171.95" gradientTransform="translate(-1e-5 -200.75)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#020202" stop-opacity=".35" offset="0"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".18316"/>
+   <stop stop-color="#fff" stop-opacity=".08" offset=".35085"/>
+   <stop stop-color="#fff" stop-opacity=".25" offset=".49829"/>
+   <stop stop-color="#fff" stop-opacity=".08" offset=".64825"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".82318"/>
+   <stop stop-color="#020202" stop-opacity=".35" offset="1"/>
+  </linearGradient>
+  <radialGradient id="paint3_radial_1343_53957" cx="0" cy="0" r="1" gradientTransform="matrix(0,100,-100,0,100,200)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" offset=".75112"/>
+   <stop stop-color="#fff" offset=".87301"/>
+   <stop stop-color="#727171" offset="1"/>
+  </radialGradient>
+  <linearGradient id="paint4_linear_1343_53957" x1="191" x2="209" y1="44.877" y2="44.877" gradientTransform="translate(-100,99.01)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#fff" offset=".49829"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint5_linear_1343_53957" x1="250.96" x2="257.61" y1="75.954" y2="93.485" gradientTransform="translate(-100,99.01)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#fff" offset=".49829"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint6_linear_1343_53957" x1="173.92" x2="159.04" y1="153.14" y2="141.73" gradientTransform="translate(-100,99.01)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#fff" offset=".49829"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint7_linear_1343_53957" x1="228.3" x2="243.18" y1="153.14" y2="141.73" gradientTransform="translate(-100,99.01)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#fff" offset=".49829"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint8_linear_1343_53957" x1="142.78" x2="148.28" y1="92.333" y2="74.407" gradientTransform="translate(-100,99.01)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#fff" offset=".49829"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+ </defs>
+ <g tb:tag="wheel">
+  <path d="m200 200c0 55.229-44.772 100-100 100s-100-44.771-100-100c0-55.228 44.772-100 100-100s100 44.772 100 100zm-175.01 0c0 41.428 33.584 75.012 75.012 75.012s75.012-33.584 75.012-75.012-33.584-75.012-75.012-75.012-75.012 33.584-75.012 75.012z" fill="url(#paint3_radial_1343_53957)" style="fill:url(#paint3_radial_1343_53957)"/>
+  <path d="m94.12 175c-1.726 0-3.125-1.3991-3.125-3.125v-46.625c0-3.4517 2.798-6.2499 6.25-6.2499h5.5c3.452 0 6.25 2.7982 6.25 6.2499v46.625c0 1.7259-1.399 3.125-3.125 3.125z" fill="url(#paint4_linear_1343_53957)" style="fill:url(#paint4_linear_1343_53957)"/>
+  <path d="m122.98 188.92c-0.612-1.6137 0.2-3.418 1.814-4.0301l43.595-16.534c3.227-1.2241 6.836 0.3999 8.06 3.6273l2.217 5.8439c1.224 3.2274-0.4 6.8361-3.628 8.0602l-43.595 16.535c-1.613 0.612-3.418-0.2-4.03-1.814l-4.433-11.688z" fill="url(#paint5_linear_1343_53957)" style="fill:url(#paint5_linear_1343_53957)"/>
+  <path d="m90.37 225.55c1.37 1.05 1.63 3.012 0.58 4.382l-28.362 37.006c-2.1 2.74-6.023 3.259-8.762 1.159l-4.961-3.802c-2.74-2.099-3.259-6.022-1.159-8.762l28.362-37.007c1.05-1.37 3.011-1.629 4.381-0.579z" fill="url(#paint6_linear_1343_53957)" style="fill:url(#paint6_linear_1343_53957)"/>
+  <path d="m111.85 225.55c-1.37 1.05-1.63 3.012-0.58 4.382l28.362 37.006c2.1 2.74 6.023 3.259 8.762 1.159l4.961-3.802c2.74-2.099 3.259-6.022 1.159-8.762l-28.362-37.007c-1.05-1.37-3.011-1.629-4.381-0.579z" fill="url(#paint7_linear_1343_53957)" style="fill:url(#paint7_linear_1343_53957)"/>
+  <path d="m73.44 197.47c-0.506 1.6506-2.253 2.5776-3.903 2.0716l-44.578-13.664c-3.3-1.0116-5.156-4.507-4.144-7.8072l1.832-5.9756c1.011-3.3002 4.507-5.1555 7.807-4.1439l44.578 13.664c1.65 0.5058 2.577 2.2535 2.072 3.9036l-3.664 11.951z" fill="url(#paint8_linear_1343_53957)" style="fill:url(#paint8_linear_1343_53957)"/>
+ </g>
+ <g transform="translate(-100,100)" filter="url(#filter0_ii_1343_53957)">
+  <circle cx="200" cy="100.99" r="30" fill="#d9d9d9"/>
+ </g>
+ <path d="m123 200.99c0 12.703-10.297 23-23 23s-23-10.297-23-23c0-12.702 10.297-23 23-23s23 10.297 23 23z" fill="#000" fill-opacity=".05"/>
+ <g transform="translate(-100,100)" filter="url(#filter1_i_1343_53957)">
+  <path d="m223 101c0 12.703-10.297 23-23 23s-23-10.297-23-23c0-12.702 10.297-23 23-23s23 10.298 23 23z" fill="#1c943e" tb:tag="background"/>
+ </g>
+ <path d="m122 201c0 12.15-9.85 22-22 22s-22-9.85-22-22 9.85-22 22-22 22 9.8497 22 22z" stroke="#fff" stroke-width="2"/>
+ <path d="m97.28 191.61c0-0.647-0.611-1.1214-1.216-0.8901-4.132 1.5826-7.067 5.5867-7.067 10.276 0 6.075 4.925 11 11 11s11-4.925 11-11c0-4.5645-2.78-8.4795-6.739-10.144-0.609-0.2563-1.244 0.2209-1.244 0.882 0 0.4223 0.269 0.7938 0.655 0.9649 3.181 1.4097 5.399 4.5944 5.399 8.2976 0 5.01-4.061 9.071-9.071 9.071s-9.071-4.061-9.071-9.071c0-3.8069 2.344-7.0659 5.668-8.4119 0.402-0.1627 0.686-0.5409 0.686-0.9745z" clip-rule="evenodd" fill="#fff" fill-rule="evenodd"/>
+ <path d="m99.51 188.64c0-0.3519 0.285-0.6372 0.637-0.6372s0.637 0.2853 0.637 0.6372v10.401c0 0.3519-0.285 0.6372-0.637 0.6372s-0.637-0.2853-0.637-0.6372z" fill="#fff"/>
+ <rect y="100" width="200" height="200" fill="#000" fill-opacity="0" stroke-width="0" tb:tag="clickArea"/>
+</svg>
\ No newline at end of file
diff --git a/application/src/main/data/json/system/widget_bundles/scada_water_system_symbols.json b/application/src/main/data/json/system/widget_bundles/scada_water_system_symbols.json
index 0ae486513e..306106c06a 100644
--- a/application/src/main/data/json/system/widget_bundles/scada_water_system_symbols.json
+++ b/application/src/main/data/json/system/widget_bundles/scada_water_system_symbols.json
@@ -38,6 +38,9 @@
     "short_top_filter",
     "long_top_filter",
     "horizontal_wheel_valve",
+    "vertical_wheel_valve",
+    "horizontal_ball_valve",
+    "vertical_ball_valve",
     "horizontal_tank_with_screen",
     "vertical_tank_with_level",
     "level_and_fan"