@record-evolution/widget-scada 1.0.2

package/dist/scada_symbols/vertical-ball-valve.svg

@@ -0,0 +1,271 @@
+<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.cssAnimate(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.cssAnimate(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",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": "{i18n:scada.symbol.opened}",
+      "defaultGetValueSettings": {
+        "action": "GET_ATTRIBUTE",
+        "defaultValue": false,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": "SHARED_SCOPE",
+          "key": "open"
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;",
+          "compareToValue": true
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "open",
+      "name": "{i18n:scada.symbol.open}",
+      "hint": "{i18n:scada.symbol.open-hint}",
+      "group": null,
+      "type": "action",
+      "valueType": "BOOLEAN",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "defaultGetValueSettings": null,
+      "defaultSetValueSettings": {
+        "action": "SET_ATTRIBUTE",
+        "executeRpc": {
+          "method": "setState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "setAttribute": {
+          "scope": "SHARED_SCOPE",
+          "key": "open"
+        },
+        "putTimeSeries": {
+          "key": "state"
+        },
+        "valueToData": {
+          "type": "CONSTANT",
+          "constantValue": true,
+          "valueToDataFunction": "/* Convert input boolean value to RPC parameters or attribute/time-series value */\nreturn value;"
+        }
+      },
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "close",
+      "name": "{i18n:scada.symbol.close}",
+      "hint": "{i18n:scada.symbol.close-hint}",
+      "group": null,
+      "type": "action",
+      "valueType": "BOOLEAN",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "defaultGetValueSettings": null,
+      "defaultSetValueSettings": {
+        "action": "SET_ATTRIBUTE",
+        "executeRpc": {
+          "method": "setState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "setAttribute": {
+          "scope": "SHARED_SCOPE",
+          "key": "open"
+        },
+        "putTimeSeries": {
+          "key": "state"
+        },
+        "valueToData": {
+          "type": "CONSTANT",
+          "constantValue": false,
+          "valueToDataFunction": "/* Convert input boolean value to RPC parameters or attribute/time-series value */\nreturn value;"
+        }
+      },
+      "defaultWidgetActionSettings": null
+    }
+  ],
+  "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>

package/dist/scada_symbols/vertical-broken-pipe.svg

@@ -0,0 +1,97 @@
+<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 broken pipe",
+  "description": "Vertical broken pipe.",
+  "searchTags": [
+    "pipe",
+    "vertical pipe",
+    "broken pipe"
+  ],
+  "widgetSizeX": 1,
+  "widgetSizeY": 1,
+  "tags": [
+    {
+      "tag": "clickArea",
+      "stateRenderFunction": null,
+      "actions": {
+        "click": {
+          "actionFunction": "ctx.api.callAction(event, 'click');"
+        }
+      }
+    },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    }
+  ],
+  "behavior": [
+    {
+      "id": "click",
+      "name": "{i18n:scada.symbol.on-click}",
+      "hint": "{i18n:scada.symbol.on-click-hint}",
+      "group": null,
+      "type": "widgetAction",
+      "valueType": "BOOLEAN",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "defaultGetValueSettings": null,
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": {
+        "type": "doNothing",
+        "targetDashboardStateId": null,
+        "openRightLayout": false,
+        "setEntityId": false,
+        "stateEntityParamName": null
+      }
+    }
+  ],
+  "properties": [
+    {
+      "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
+    }
+  ]
+}]]></tb:metadata>
+<g tb:tag="clickArea">
+  <path d="m63.5 186.5s0.2293-53.5 0-60.5-6.5-17-6.5-17l21.5 14.5 6.5-14.5 9 10.5 11-14.5 6.5 18.5 6-10 11.5 2.5 14-7s-7.5 10-7.5 17v60.5h-72z" fill="#fff" tb:tag="pipe-background"/>
+  <path d="m63.5 186.5s0.2293-53.5 0-60.5-6.5-17-6.5-17l21.5 14.5 6.5-14.5 9 10.5 11-14.5 6.5 18.5 6-10 11.5 2.5 14-7s-7.5 10-7.5 17v60.5h-72z" fill="url(#paint0_linear_2474_252378)"/>
+  <path d="m61.52 114.23c-0.0889-0.188-0.1777-0.374-0.2661-0.556l16.407 11.066 1.4782 0.997 0.7293-1.627 5.5321-12.341 7.4602 8.703 1.2101 1.412 1.1238-1.481 9.314-12.278 5.576 15.868 1.058 3.013 1.643-2.738 5.447-9.078 10.448 2.272 0.517 0.112 0.473-0.236 9.023-4.512c-0.249 0.421-0.502 0.861-0.755 1.317-1.883 3.389-3.939 7.935-3.939 11.853v59h-68.994l0.0033-0.807c0.0058-1.476 0.0139-3.594 0.0228-6.157 0.0179-5.125 0.0394-12.032 0.0538-19.158 0.0286-14.23 0.0289-29.393-0.0868-32.927-0.1255-3.83-1.8722-8.32-3.4792-11.717z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <path d="m58 94.5s7.395-13.5 7.5-18.5 0-62 0-62h72s-0.086 54.5 0 62 4.5 18.5 4.5 18.5l-13.5-6-14 15-5-16.5-6 7.5-13-6-13 18-4.5-19.5-15 7.5z" fill="#fff" tb:tag="pipe-background"/>
+  <path d="m58 94.5s7.395-13.5 7.5-18.5 0-62 0-62h72s-0.086 54.5 0 62 4.5 18.5 4.5 18.5l-13.5-6-14 15-5-16.5-6 7.5-13-6-13 18-4.5-19.5-15 7.5z" fill="url(#paint1_linear_2474_252378)"/>
+  <path d="m67.003 15.5h68.995l-2e-3 0.8543c-2e-3 1.5049-5e-3 3.6632-8e-3 6.2766-7e-3 5.2267-0.015 12.274-0.02 19.555-0.011 14.556-0.011 30.069 0.032 33.831 0.046 3.9731 1.225 8.7675 2.346 12.479 0.357 1.1792 0.712 2.2636 1.031 3.1964l-10.268-4.5635-0.976-0.4341-0.73 0.7813-12.223 13.096-4.244-14.008-0.827-2.7275-1.78 2.2255-5.267 6.5829-13.055-6.0254-0.7231 1.0013-11.065 15.321-3.757-16.28-0.4284-1.8563-12.574 6.2868c0.5039-1.009 1.0566-2.1442 1.611-3.3352 0.9404-2.0204 1.8953-4.222 2.6248-6.2504 0.7123-1.9804 1.2726-3.9616 1.3044-5.4761 0.0529-2.5216 0.0528-18.048 0.0397-32.908-0.0066-7.4379-0.0164-14.72-0.0246-20.142-0.0041-2.711-0.0078-4.9572-0.0105-6.5257l-0.0017-0.9564z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <rect transform="rotate(-90 51.5 198.5)" x="51.5" y="198.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+  <rect transform="rotate(-90 51.5 12.5)" x="51.5" y="12.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+ </g><defs>
+  <linearGradient id="paint0_linear_2474_252378" x1="63.5" x2="135.5" y1="167.52" y2="167.97" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+  <linearGradient id="paint1_linear_2474_252378" x1="65.5" x2="137.5" y1="70.24" y2="70.67" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#727171" offset="0"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".26388"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".41759"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".49829"/>
+   <stop stop-color="#727171" stop-opacity=".1" offset=".58094"/>
+   <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
+   <stop stop-color="#727171" offset="1"/>
+  </linearGradient>
+ </defs>
+</svg>

package/dist/scada_symbols/vertical-connector-hp.svg

@@ -0,0 +1,269 @@
+<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": "HP Vertical connector",
+  "description": "Vertical connector with an optional directional arrow to visually indicate flow.",
+  "widgetSizeX": 1,
+  "widgetSizeY": 1,
+  "stateRenderFunction": "const {\n    flowAnimation,\n    arrowDirection: flowDirection,\n    flowAnimationSpeed\n} = ctx.values;\nconst {\n    flowAnimationWidth: lineWidth,\n    flowAnimationColor: lineColor,\n    flowStyleDash: dashWidth,\n    flowStyleGap: dashGap,\n    flowDashCap: dashCap\n} = ctx.properties;\nconst line = ctx.tags.line[0].attr('d');\nconst lineReversed = 'M 100,0 V 200';\nconst animation = ctx.tags.animationGroup[0];\nconst duration = 1 / flowAnimationSpeed;\n\nlet animateFlow = ctx.api.connectorAnimation(animation);\n\nif (flowAnimation) {\n    if (!animateFlow) {\n        animateFlow = ctx.api.connectorAnimate(animation, line, lineReversed).flowAppearance(lineWidth, lineColor, dashCap, dashWidth, dashGap).duration(duration).direction(flowDirection).play();\n    } else {\n        animateFlow.duration(duration).direction(flowDirection).play();\n    }\n} else {\n    if (animateFlow) {\n        animateFlow.finish();\n    }\n}\n",
+  "tags": [
+    {
+      "tag": "arrow",
+      "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
+    },
+    {
+      "tag": "line",
+      "stateRenderFunction": "element.stroke(ctx.properties.lineColor);\nelement.attr({'stroke-width': ctx.properties.mainLineSize});",
+      "actions": null
+    }
+  ],
+  "behavior": [
+    {
+      "id": "arrow",
+      "name": "{i18n:scada.symbol.arrow-presence}",
+      "hint": "{i18n:scada.symbol.arrow-presence-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "BOOLEAN",
+      "trueLabel": "{i18n:scada.symbol.present}",
+      "falseLabel": "{i18n:scada.symbol.absent}",
+      "stateLabel": "{i18n:scada.symbol.arrow-present}",
+      "defaultGetValueSettings": {
+        "action": "DO_NOTHING",
+        "defaultValue": true,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": null,
+          "key": "state"
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;",
+          "compareToValue": true
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "flowAnimation",
+      "name": "{i18n:scada.symbol.flow-animation}",
+      "hint": "{i18n:scada.symbol.flow-animation-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "BOOLEAN",
+      "trueLabel": "{i18n:scada.symbol.present}",
+      "falseLabel": "{i18n:scada.symbol.absent}",
+      "stateLabel": "{i18n:scada.symbol.flow-present}",
+      "defaultGetValueSettings": {
+        "action": "DO_NOTHING",
+        "defaultValue": false,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "key": "state",
+          "scope": null
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "getAlarmStatus": {
+          "severityList": null,
+          "typeList": null
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "compareToValue": true,
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;"
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "arrowDirection",
+      "name": "{i18n:scada.symbol.arrow-direction}",
+      "hint": "{i18n:scada.symbol.arrow-direction-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "BOOLEAN",
+      "trueLabel": "{i18n:scada.symbol.forward}",
+      "falseLabel": "{i18n:scada.symbol.reverse}",
+      "stateLabel": "{i18n:scada.symbol.forward}",
+      "defaultGetValueSettings": {
+        "action": "DO_NOTHING",
+        "defaultValue": true,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": null,
+          "key": "state"
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;",
+          "compareToValue": true
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    },
+    {
+      "id": "flowAnimationSpeed",
+      "name": "{i18n:scada.symbol.flow-animation-speed}",
+      "hint": "{i18n:scada.symbol.flow-animation-speed-hint}",
+      "group": null,
+      "type": "value",
+      "valueType": "DOUBLE",
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "defaultGetValueSettings": {
+        "action": "DO_NOTHING",
+        "defaultValue": 1,
+        "executeRpc": {
+          "method": "getState",
+          "requestTimeout": 5000,
+          "requestPersistent": false,
+          "persistentPollingInterval": 1000
+        },
+        "getAttribute": {
+          "scope": null,
+          "key": "state"
+        },
+        "getTimeSeries": {
+          "key": "state"
+        },
+        "getAlarmStatus": {
+          "severityList": null,
+          "typeList": null
+        },
+        "dataToValue": {
+          "type": "NONE",
+          "dataToValueFunction": "/* Should return boolean value */\nreturn data;"
+        }
+      },
+      "defaultSetValueSettings": null,
+      "defaultWidgetActionSettings": null
+    }
+  ],
+  "properties": [
+    {
+      "id": "mainLineSize",
+      "name": "{i18n:scada.symbol.line}",
+      "type": "number",
+      "default": 6,
+      "required": true,
+      "divider": false,
+      "fieldSuffix": "px",
+      "min": 0,
+      "max": 99,
+      "step": 1,
+      "disabled": false,
+      "visible": true
+    },
+    {
+      "id": "lineColor",
+      "name": "{i18n:scada.symbol.line}",
+      "type": "color",
+      "default": "#1A1A1A",
+      "disabled": false,
+      "visible": true
+    },
+    {
+      "id": "flowAnimationWidth",
+      "name": "{i18n:scada.symbol.flow-line}",
+      "group": "{i18n:scada.symbol.flow}",
+      "type": "number",
+      "default": 4,
+      "divider": false,
+      "fieldSuffix": "px",
+      "min": 1,
+      "step": 1,
+      "disabled": false,
+      "visible": true
+    },
+    {
+      "id": "flowAnimationColor",
+      "name": "{i18n:scada.symbol.flow-line}",
+      "group": "{i18n:scada.symbol.flow}",
+      "type": "color",
+      "default": "#C8DFF7",
+      "disabled": false,
+      "visible": true
+    },
+    {
+      "id": "flowStyleDash",
+      "name": "{i18n:scada.symbol.flow-line-style}",
+      "hint": "{i18n:scada.symbol.flow-style-hint}",
+      "group": "{i18n:scada.symbol.flow}",
+      "type": "number",
+      "default": 10,
+      "required": true,
+      "subLabel": "{i18n:scada.symbol.dash}",
+      "divider": false,
+      "fieldSuffix": "px",
+      "min": 0,
+      "step": 1,
+      "disabled": false,
+      "visible": true
+    },
+    {
+      "id": "flowStyleGap",
+      "name": "{i18n:scada.symbol.flow-line-style}",
+      "hint": "{i18n:scada.symbol.flow-style-hint}",
+      "group": "{i18n:scada.symbol.flow}",
+      "type": "number",
+      "default": 10,
+      "subLabel": "{i18n:scada.symbol.gap}",
+      "fieldSuffix": "px",
+      "min": 0,
+      "step": 1,
+      "disabled": false,
+      "visible": true
+    },
+    {
+      "id": "flowDashCap",
+      "name": "{i18n:scada.symbol.flow-dash-cap}",
+      "group": "{i18n:scada.symbol.flow}",
+      "type": "select",
+      "default": "butt",
+      "items": [
+        {
+          "value": "butt",
+          "label": "{i18n:scada.symbol.dash-cap-butt}"
+        },
+        {
+          "value": "round",
+          "label": "{i18n:scada.symbol.dash-cap-round}"
+        },
+        {
+          "value": "square",
+          "label": "{i18n:scada.symbol.dash-cap-square}"
+        }
+      ],
+      "disabled": false,
+      "visible": true
+    }
+  ]
+}]]></tb:metadata>
+<path d="M 100,200 V 0" stroke="#1A1A1A" stroke-width="6" tb:tag="line"/><path d="M100 71L129 129H71L100 71Z" fill="#1A1A1A" tb:tag="arrow"/><g tb:tag="animationGroup"/>
+</svg>