UI: Filter SCADA symbols.

2 years ago · 1b9277cff8
5 changed files with 344 additions and 0 deletions
--- a/application/src/main/data/json/system/scada_symbols/long-bottom-filter.svg
+++ b/application/src/main/data/json/system/scada_symbols/long-bottom-filter.svg
@ -0,0 +1,85 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" width="200" height="600" fill="none" version="1.1" viewBox="0 0 200 600">
+<tb:metadata xmlns=""><![CDATA[{
+  "title": "Long bottom filter",
+  "description": "Long bottom filter",
+  "searchTags": [
+    "filter"
+  ],
+  "widgetSizeX": 1,
+  "widgetSizeY": 3,
+  "tags": [
+    {
+      "tag": "clickArea",
+      "stateRenderFunction": null,
+      "actions": {
+        "click": {
+          "actionFunction": "ctx.api.callAction(event, 'click');"
+        }
+      }
+    }
+  ],
+  "behavior": [
+    {
+      "id": "click",
+      "name": "{i18n:scada.symbol.on-click}",
+      "hint": "{i18n:scada.symbol.on-click-hint}",
+      "group": null,
+      "type": "widgetAction",
+      "valueType": "BOOLEAN",
+      "defaultValue": false,
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "valueToDataType": "CONSTANT",
+      "constantValue": false,
+      "valueToDataFunction": ""
+    }
+  ],
+  "properties": []
+}]]></tb:metadata><mask id="path-9-inside-1_1547_237341" fill="white">
+  <path d="m29 168c-3.866 0-7-3.134-7-7s3.134-7 7-7h142c3.866 0 7 3.134 7 7s-3.134 7-7 7h-142z"/>
+ </mask><g tb:tag="clickArea">
+  <rect x="187.5" y="51.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+  <rect x="1.5" y="51.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+  <path d="m172 64h14v72h-14v-72z" fill="#fff"/>
+  <path d="m172 64h14v72h-14v-72z" fill="url(#paint0_linear_1547_237341)"/>
+  <path d="m173.5 65.5h11v69h-11v-69z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <path d="m14 64h14v72h-14v-72z" fill="#fff"/>
+  <path d="m14 64h14v72h-14v-72z" fill="url(#paint1_linear_1547_237341)"/>
+  <path d="m15.5 65.5h11v69h-11v-69z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <path d="m28.685 168.88c-0.0235-0.891-0.3439-1.749-0.9105-2.437l-4.477-5.438s-2.9203-73.294 0-119.5c0.7949-12.578 2.4797-30.38 3.2135-37.912 0.1992-2.0442 1.9174-3.588 3.9713-3.588h139.03c2.054 0 3.772 1.5438 3.972 3.588 0.733 7.5322 2.418 25.334 3.213 37.912 2.92 46.206 0 119.5 0 119.5l-4.477 5.438c-0.566 0.688-0.887 1.546-0.91 2.437l-9.449 359.25c-0.209 7.932-3.522 15.466-9.226 20.981-29.355 28.382-75.925 28.382-105.28 0-5.7046-5.515-9.0173-13.049-9.226-20.981l-9.449-359.25z" fill="#93979B"/>
+  <path d="m28.685 168.88c-0.0235-0.891-0.3439-1.749-0.9105-2.437l-4.477-5.438s-2.9203-73.294 0-119.5c0.7949-12.578 2.4797-30.38 3.2135-37.912 0.1992-2.0442 1.9174-3.588 3.9713-3.588h139.03c2.054 0 3.772 1.5438 3.972 3.588 0.733 7.5322 2.418 25.334 3.213 37.912 2.92 46.206 0 119.5 0 119.5l-4.477 5.438c-0.566 0.688-0.887 1.546-0.91 2.437l-9.449 359.25c-0.209 7.932-3.522 15.466-9.226 20.981-29.355 28.382-75.925 28.382-105.28 0-5.7046-5.515-9.0173-13.049-9.226-20.981l-9.449-359.25z" fill="url(#paint2_linear_1547_237341)"/>
+  <path d="m30.185 168.84c-0.0323-1.226-0.4729-2.405-1.252-3.351l-4.1557-5.048c-0.0037-0.096-0.0078-0.205-0.0125-0.328-0.0206-0.547-0.0505-1.356-0.0875-2.402-0.0741-2.092-0.1767-5.133-0.2906-8.926-0.228-7.588-0.5016-18.186-0.684-30.226-0.3649-24.093-0.3639-53.919 1.0923-76.96 0.7931-12.55 2.4755-30.327 3.2095-37.861 0.1235-1.2679 1.1886-2.2334 2.4783-2.2334h139.03c1.29 0 2.355 0.96558 2.479 2.2334 0.734 7.5338 2.416 25.312 3.209 37.861 1.456 23.041 1.457 52.867 1.092 76.96-0.182 12.04-0.456 22.638-0.684 30.226-0.114 3.793-0.216 6.834-0.29 8.926-0.037 1.046-0.067 1.855-0.088 2.402-4e-3 0.123-9e-3 0.232-0.012 0.328l-4.156 5.048c-0.779 0.946-1.22 2.125-1.252 3.351l-9.449 359.25c-0.198 7.539-3.347 14.7-8.769 19.942-28.773 27.819-74.421 27.819-103.19 0-5.4221-5.242-8.5708-12.403-8.7691-19.942l-9.449-359.25z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <path d="m29 168c-3.866 0-7-3.134-7-7s3.134-7 7-7h142c3.866 0 7 3.134 7 7s-3.134 7-7 7h-142z" fill="#D9D9D9"/>
+  <path d="m29 157h142v-6h-142v6zm142 8h-142v6h142v-6zm4-4c0 2.209-1.791 4-4 4v6c5.523 0 10-4.477 10-10h-6zm-4-4c2.209 0 4 1.791 4 4h6c0-5.523-4.477-10-10-10v6zm-146 4c0-2.209 1.7909-4 4-4v-6c-5.5228 0-10 4.477-10 10h6zm-6 0c0 5.523 4.4772 10 10 10v-6c-2.2091 0-4-1.791-4-4h-6z" fill="#727171" mask="url(#path-9-inside-1_1547_237341)"/>
+  <path d="m39.405 525.76-9.8625-356.26h139.92l-8.936 356.4c-0.012 0.509 7e-3 1.054 0.024 1.539 7e-3 0.21 0.014 0.408 0.018 0.588 0.064 2.99-0.732 13.748-14.681 24.317-5.187 3.931-8.595 5.835-16.062 9.599-3.769 1.9-5.572 2.792-7.409 3.499-1.716 0.661-3.47 1.163-6.906 2.148l-0.651 0.187c-3.732 0.359-7.549 0.541-10.451 0.633-1.467 0.046-2.697 0.069-3.559 0.081-0.431 5e-3 -0.769 8e-3 -0.9997 0.01-0.1151 0-0.2032 1e-3 -0.2621 1e-3h-0.0662-0.0163-0.0082-0.0143-0.0605c-0.0542-1e-3 -0.136-1e-3 -0.2439-2e-3 -0.2157-3e-3 -0.5353-7e-3 -0.9461-0.017-0.8216-0.019-2.007-0.058-3.4535-0.135-2.8959-0.155-6.825-0.463-10.972-1.079-4.0519-0.602-5.9098-1.365-7.6567-2.286-0.3936-0.207-0.793-0.43-1.2168-0.666-1.5086-0.841-3.3251-1.853-6.2786-2.961-1.8664-1.122-3.3003-1.965-4.544-2.695-3.3763-1.984-5.3499-3.144-10.766-6.83-13.587-9.246-14.161-20.339-14.011-23.639 0.0068-0.148 0.0148-0.303 0.0231-0.462 0.0317-0.612 0.0672-1.294 0.0485-1.968z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+ </g><defs>
+  <linearGradient id="paint0_linear_1547_237341" x1="175.64" x2="173.3" y1="64" y2="135.93" 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_1547_237341" x1="17.64" x2="15.305" y1="64" y2="135.93" 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="paint2_linear_1547_237341" x1="189.19" x2="10.798" y1="503.51" y2="502.96" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#020202" stop-opacity=".35" offset="0"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".23574"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".39937"/>
+   <stop stop-color="#fff" stop-opacity=".3" offset=".49829"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".59721"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".76303"/>
+   <stop stop-color="#020202" stop-opacity=".35" offset="1"/>
+  </linearGradient>
+ </defs>
+</svg>
--- a/application/src/main/data/json/system/scada_symbols/long-top-filter.svg
+++ b/application/src/main/data/json/system/scada_symbols/long-top-filter.svg
@ -0,0 +1,85 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" width="200" height="600" fill="none" version="1.1" viewBox="0 0 200 600">
+<tb:metadata xmlns=""><![CDATA[{
+  "title": "Long top filter",
+  "description": "Title\nLong top filter\n",
+  "searchTags": [
+    "filter"
+  ],
+  "widgetSizeX": 1,
+  "widgetSizeY": 3,
+  "tags": [
+    {
+      "tag": "clickArea",
+      "stateRenderFunction": null,
+      "actions": {
+        "click": {
+          "actionFunction": "ctx.api.callAction(event, 'click');"
+        }
+      }
+    }
+  ],
+  "behavior": [
+    {
+      "id": "click",
+      "name": "{i18n:scada.symbol.on-click}",
+      "hint": "{i18n:scada.symbol.on-click-hint}",
+      "group": null,
+      "type": "widgetAction",
+      "valueType": "BOOLEAN",
+      "defaultValue": false,
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "valueToDataType": "CONSTANT",
+      "constantValue": false,
+      "valueToDataFunction": ""
+    }
+  ],
+  "properties": []
+}]]></tb:metadata><mask id="path-9-inside-1_1547_237349" fill="white">
+  <path d="m29 446c-3.866 0-7-3.134-7-7s3.134-7 7-7h142c3.866 0 7 3.134 7 7s-3.134 7-7 7h-142z"/>
+ </mask><g tb:tag="clickArea">
+  <rect x="187.5" y="451.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+  <rect x="1.5" y="451.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+  <path d="m172 464h14v72h-14v-72z" fill="#fff"/>
+  <path d="m172 464h14v72h-14v-72z" fill="url(#paint0_linear_1547_237349)"/>
+  <path d="m173.5 465.5h11v69h-11v-69z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <path d="m14 464h14v72h-14v-72z" fill="#fff"/>
+  <path d="m14 464h14v72h-14v-72z" fill="url(#paint1_linear_1547_237349)"/>
+  <path d="m15.5 465.5h11v69h-11v-69z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <path d="m171.32 431.12c0.023 0.891 0.344 1.749 0.91 2.437l4.477 5.438s2.92 73.294 0 119.5c-0.795 12.578-2.48 30.38-3.213 37.912-0.2 2.044-1.918 3.588-3.972 3.588h-139.03c-2.0539 0-3.7721-1.544-3.9713-3.588-0.7338-7.532-2.4186-25.334-3.2135-37.912-2.9203-46.206 0-119.5 0-119.5l4.477-5.438c0.5666-0.688 0.887-1.546 0.9105-2.437l9.449-359.25c0.2086-7.9322 3.5214-15.466 9.226-20.981 29.355-28.382 75.925-28.382 105.28 0 5.704 5.5154 9.017 13.049 9.226 20.981l9.449 359.25z" fill="#93979B"/>
+  <path d="m171.32 431.12c0.023 0.891 0.344 1.749 0.91 2.437l4.477 5.438s2.92 73.294 0 119.5c-0.795 12.578-2.48 30.38-3.213 37.912-0.2 2.044-1.918 3.588-3.972 3.588h-139.03c-2.0539 0-3.7721-1.544-3.9713-3.588-0.7338-7.532-2.4186-25.334-3.2135-37.912-2.9203-46.206 0-119.5 0-119.5l4.477-5.438c0.5666-0.688 0.887-1.546 0.9105-2.437l9.449-359.25c0.2086-7.9322 3.5214-15.466 9.226-20.981 29.355-28.382 75.925-28.382 105.28 0 5.704 5.5154 9.017 13.049 9.226 20.981l9.449 359.25z" fill="url(#paint2_linear_1547_237349)"/>
+  <path d="m169.82 431.16c0.032 1.226 0.473 2.405 1.252 3.351l4.156 5.048c3e-3 0.096 8e-3 0.205 0.012 0.328 0.021 0.547 0.051 1.356 0.088 2.402 0.074 2.092 0.176 5.133 0.29 8.926 0.228 7.588 0.502 18.186 0.684 30.226 0.365 24.093 0.364 53.919-1.092 76.96-0.793 12.55-2.475 30.328-3.209 37.862-0.124 1.267-1.189 2.233-2.479 2.233h-139.03c-1.2897 0-2.3548-0.966-2.4783-2.233-0.734-7.534-2.4164-25.312-3.2095-37.862-1.4562-23.041-1.4572-52.867-1.0923-76.96 0.1824-12.04 0.456-22.638 0.684-30.226 0.1139-3.793 0.2165-6.834 0.2906-8.926 0.037-1.046 0.0669-1.855 0.0875-2.402 0.0047-0.123 0.0088-0.232 0.0125-0.328l4.1557-5.048c0.7791-0.946 1.2197-2.125 1.2519-3.351l9.4491-359.25c0.1983-7.5393 3.347-14.7 8.7691-19.942 28.773-27.819 74.421-27.819 103.19 0 5.422 5.2424 8.571 12.403 8.769 19.942l9.449 359.25z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <path d="m29 446c-3.866 0-7-3.134-7-7s3.134-7 7-7h142c3.866 0 7 3.134 7 7s-3.134 7-7 7h-142z" fill="#D9D9D9"/>
+  <path d="m29 435h142v-6h-142v6zm142 8h-142v6h142v-6zm4-4c0 2.209-1.791 4-4 4v6c5.523 0 10-4.477 10-10h-6zm-4-4c2.209 0 4 1.791 4 4h6c0-5.523-4.477-10-10-10v6zm-146 4c0-2.209 1.7909-4 4-4v-6c-5.5228 0-10 4.477-10 10h6zm-6 0c0 5.523 4.4772 10 10 10v-6c-2.2091 0-4-1.791-4-4h-6z" fill="#727171" mask="url(#path-9-inside-1_1547_237349)"/>
+  <path d="m159.6 74.24 9.863 356.26h-139.92l8.9355-356.4c0.0128-0.5096-0.0064-1.0541-0.0234-1.5394-0.0074-0.2097-0.0144-0.4083-0.0183-0.5883-0.0641-2.9895 0.7325-13.748 14.681-24.317 5.1873-3.9306 8.5947-5.8345 16.062-9.5988 3.7684-1.8995 5.5723-2.7919 7.4086-3.4987 1.7165-0.6608 3.4698-1.1632 6.9059-2.148l0.651-0.1866c3.7322-0.3597 7.549-0.5415 10.452-0.6331 1.4671-0.0462 2.6967-0.0694 3.5585-0.0809 0.4309-0.0058 0.7696-0.0087 1-0.0101 0.1151-7e-4 0.2032-0.0011 0.2621-0.0012l0.0662-2e-4h0.0163 0.0082 0.0143l0.0605 2e-4c0.0542 3e-4 0.136 9e-4 0.2439 0.0021 0.2158 0.0024 0.5358 0.0072 0.9458 0.0168 0.822 0.0192 2.007 0.0577 3.454 0.1349 2.896 0.1545 6.825 0.4632 10.972 1.0789 4.051 0.6016 5.909 1.3651 7.656 2.2858 0.394 0.2074 0.793 0.4301 1.217 0.6662 1.509 0.8408 3.325 1.8532 6.279 2.9615 1.866 1.1218 3.3 1.9643 4.544 2.695 3.376 1.9838 5.35 3.1434 10.766 6.8296 13.587 9.2463 14.161 20.339 14.011 23.639-7e-3 0.1485-0.015 0.3032-0.023 0.4626-0.032 0.6121-0.067 1.2942-0.049 1.9673z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+ </g><defs>
+  <linearGradient id="paint0_linear_1547_237349" x1="175.64" x2="173.3" y1="464" y2="535.93" 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_1547_237349" x1="17.64" x2="15.305" y1="464" y2="535.93" 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="paint2_linear_1547_237349" x1="10.811" x2="189.2" y1="96.486" y2="97.044" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#020202" stop-opacity=".35" offset="0"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".23574"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".39937"/>
+   <stop stop-color="#fff" stop-opacity=".3" offset=".49829"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".59721"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".76303"/>
+   <stop stop-color="#020202" stop-opacity=".35" offset="1"/>
+  </linearGradient>
+ </defs>
+</svg>
--- a/application/src/main/data/json/system/scada_symbols/short-bottom-filter.svg
+++ b/application/src/main/data/json/system/scada_symbols/short-bottom-filter.svg
@ -0,0 +1,85 @@
+<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 xmlns=""><![CDATA[{
+  "title": "Short bottom filter",
+  "description": "Short bottom filter",
+  "searchTags": [
+    "filter"
+  ],
+  "widgetSizeX": 1,
+  "widgetSizeY": 2,
+  "tags": [
+    {
+      "tag": "clickArea",
+      "stateRenderFunction": null,
+      "actions": {
+        "click": {
+          "actionFunction": "ctx.api.callAction(event, 'click');"
+        }
+      }
+    }
+  ],
+  "behavior": [
+    {
+      "id": "click",
+      "name": "{i18n:scada.symbol.on-click}",
+      "hint": "{i18n:scada.symbol.on-click-hint}",
+      "group": null,
+      "type": "widgetAction",
+      "valueType": "BOOLEAN",
+      "defaultValue": false,
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "valueToDataType": "CONSTANT",
+      "constantValue": false,
+      "valueToDataFunction": ""
+    }
+  ],
+  "properties": []
+}]]></tb:metadata><mask id="path-9-inside-1_1547_237364" fill="white">
+  <path d="m29 168c-3.866 0-7-3.134-7-7s3.134-7 7-7h142c3.866 0 7 3.134 7 7s-3.134 7-7 7h-142z"/>
+ </mask><g tb:tag="clickArea">
+  <rect x="187.5" y="51.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+  <rect x="1.5" y="51.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+  <path d="m172 64h14v72h-14v-72z" fill="#fff"/>
+  <path d="m172 64h14v72h-14v-72z" fill="url(#paint0_linear_1547_237364)"/>
+  <path d="m173.5 65.5h11v69h-11v-69z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <path d="m14 64h14v72h-14v-72z" fill="#fff"/>
+  <path d="m14 64h14v72h-14v-72z" fill="url(#paint1_linear_1547_237364)"/>
+  <path d="m15.5 65.5h11v69h-11v-69z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <path d="m28.723 168.81c-0.0482-0.849-0.3653-1.66-0.9055-2.316l-4.5199-5.49s-2.9203-73.294 0-119.5c0.7949-12.578 2.4797-30.38 3.2135-37.912 0.1992-2.0442 1.9174-3.588 3.9713-3.588h139.03c2.054 0 3.772 1.5438 3.972 3.588 0.733 7.5322 2.418 25.334 3.213 37.912 2.92 46.206 0 119.5 0 119.5l-4.52 5.49c-0.54 0.656-0.857 1.467-0.905 2.316l-9.062 159.79c-0.434 7.652-3.735 14.861-9.245 20.188-29.539 28.56-76.401 28.56-105.94 0-5.5104-5.327-8.8115-12.536-9.2454-20.188l-9.0617-159.79z" fill="#93979B"/>
+  <path d="m28.723 168.81c-0.0482-0.849-0.3653-1.66-0.9055-2.316l-4.5199-5.49s-2.9203-73.294 0-119.5c0.7949-12.578 2.4797-30.38 3.2135-37.912 0.1992-2.0442 1.9174-3.588 3.9713-3.588h139.03c2.054 0 3.772 1.5438 3.972 3.588 0.733 7.5322 2.418 25.334 3.213 37.912 2.92 46.206 0 119.5 0 119.5l-4.52 5.49c-0.54 0.656-0.857 1.467-0.905 2.316l-9.062 159.79c-0.434 7.652-3.735 14.861-9.245 20.188-29.539 28.56-76.401 28.56-105.94 0-5.5104-5.327-8.8115-12.536-9.2454-20.188l-9.0617-159.79z" fill="url(#paint2_linear_1547_237364)"/>
+  <path d="m30.221 168.72c-0.0662-1.167-0.5023-2.282-1.2451-3.184l-4.1986-5.1c-0.0037-0.096-0.0078-0.205-0.0125-0.328-0.0206-0.547-0.0505-1.356-0.0875-2.402-0.0741-2.092-0.1767-5.133-0.2906-8.926-0.228-7.588-0.5016-18.186-0.684-30.226-0.3649-24.093-0.3639-53.919 1.0923-76.96 0.7931-12.55 2.4755-30.327 3.2095-37.861 0.1235-1.2679 1.1886-2.2334 2.4783-2.2334h139.03c1.29 0 2.355 0.96558 2.479 2.2334 0.734 7.5338 2.416 25.312 3.209 37.861 1.456 23.041 1.457 52.867 1.092 76.96-0.182 12.04-0.456 22.638-0.684 30.226-0.114 3.793-0.216 6.834-0.29 8.926-0.037 1.046-0.067 1.855-0.088 2.402-4e-3 0.123-9e-3 0.232-0.012 0.328l-4.199 5.1c-0.743 0.902-1.179 2.017-1.245 3.184l-9.062 159.79c-0.412 7.276-3.551 14.129-8.79 19.195-28.957 27.997-74.897 27.997-103.85 0-5.2392-5.066-8.3778-11.919-8.7904-19.195l-9.0617-159.79z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <path d="m29 168c-3.866 0-7-3.134-7-7s3.134-7 7-7h142c3.866 0 7 3.134 7 7s-3.134 7-7 7h-142z" fill="#D9D9D9"/>
+  <path d="m29 157h142v-6h-142v6zm142 8h-142v6h142v-6zm4-4c0 2.209-1.791 4-4 4v6c5.523 0 10-4.477 10-10h-6zm-4-4c2.209 0 4 1.791 4 4h6c0-5.523-4.477-10-10-10v6zm-146 4c0-2.209 1.7909-4 4-4v-6c-5.5228 0-10 4.477-10 10h6zm-6 0c0 5.523 4.4772 10 10 10v-6c-2.2091 0-4-1.791-4-4h-6z" fill="#727171" mask="url(#path-9-inside-1_1547_237364)"/>
+  <path d="m29.596 169.5h139.82l-8.845 156.64c-0.038 0.67-0.023 1.351-9e-3 1.961 4e-3 0.156 7e-3 0.307 0.01 0.452 0.056 3.297-0.827 14.337-14.569 22.905l-0.109 0.068-0.096 0.085c-4.702 4.191-9.087 7.356-15.947 10.665-4.446 2.144-5.656 2.438-8.438 3.115-1.495 0.364-3.443 0.838-6.59 1.768-3.845 0.55-7.671 0.886-10.55 1.085-1.452 0.1-2.659 0.165-3.502 0.205-0.422 0.02-0.752 0.034-0.9763 0.043-0.1121 4e-3 -0.1975 7e-3 -0.2545 9e-3l-0.064 2e-3 -0.0155 1e-3h-0.0036-7e-4 -0.0029-1e-4 -4e-4 -0.0019-0.0124l-0.056 2e-3c-0.0509 1e-3 -0.1288 3e-3 -0.2323 4e-3 -0.2069 3e-3 -0.5158 5e-3 -0.9149 2e-3 -0.7985-6e-3 -1.9567-0.033-3.3805-0.118-2.8509-0.17-6.7488-0.569-10.946-1.484-4.2451-0.926-6.4101-1.619-8.294-2.443-0.9552-0.417-1.856-0.877-2.9513-1.445-0.1195-0.061-0.2412-0.125-0.3653-0.189-1.0075-0.523-2.1736-1.129-3.6389-1.842-5.9256-2.883-9.2803-5.333-14.164-8.899-0.3607-0.263-0.7298-0.533-1.1089-0.809l-0.1011-0.074-0.1119-0.055c-13.031-6.51-13.802-19.448-13.765-22.889l7e-4 -0.069c0.0061-0.554 0.0128-1.163-0.026-1.785l-9.7836-156.91z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+ </g><defs>
+  <linearGradient id="paint0_linear_1547_237364" x1="175.64" x2="173.3" y1="64" y2="135.93" 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_1547_237364" x1="17.64" x2="15.305" y1="64" y2="135.93" 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="paint2_linear_1547_237364" x1="189.19" x2="10.798" y1="503.51" y2="502.96" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#020202" stop-opacity=".35" offset="0"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".23574"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".39937"/>
+   <stop stop-color="#fff" stop-opacity=".3" offset=".49829"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".59721"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".76303"/>
+   <stop stop-color="#020202" stop-opacity=".35" offset="1"/>
+  </linearGradient>
+ </defs>
+</svg>
--- a/application/src/main/data/json/system/scada_symbols/short-top-filter.svg
+++ b/application/src/main/data/json/system/scada_symbols/short-top-filter.svg
@ -0,0 +1,85 @@
+<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 xmlns=""><![CDATA[{
+  "title": "Short top filter",
+  "description": "Short top filter",
+  "searchTags": [
+    "filter"
+  ],
+  "widgetSizeX": 1,
+  "widgetSizeY": 2,
+  "tags": [
+    {
+      "tag": "clickArea",
+      "stateRenderFunction": null,
+      "actions": {
+        "click": {
+          "actionFunction": "ctx.api.callAction(event, 'click');"
+        }
+      }
+    }
+  ],
+  "behavior": [
+    {
+      "id": "click",
+      "name": "{i18n:scada.symbol.on-click}",
+      "hint": "{i18n:scada.symbol.on-click-hint}",
+      "group": null,
+      "type": "widgetAction",
+      "valueType": "BOOLEAN",
+      "defaultValue": false,
+      "trueLabel": null,
+      "falseLabel": null,
+      "stateLabel": null,
+      "valueToDataType": "CONSTANT",
+      "constantValue": false,
+      "valueToDataFunction": ""
+    }
+  ],
+  "properties": []
+}]]></tb:metadata><mask id="path-9-inside-1_1547_237379" fill="white">
+  <path d="m29 246c-3.866 0-7-3.134-7-7s3.134-7 7-7h142c3.866 0 7 3.134 7 7s-3.134 7-7 7h-142z"/>
+ </mask><g tb:tag="clickArea">
+  <rect x="187.5" y="251.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+  <rect x="1.5" y="251.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
+  <path d="m172 264h14v72h-14v-72z" fill="#fff"/>
+  <path d="m172 264h14v72h-14v-72z" fill="url(#paint0_linear_1547_237379)"/>
+  <path d="m173.5 265.5h11v69h-11v-69z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <path d="m14 264h14v72h-14v-72z" fill="#fff"/>
+  <path d="m14 264h14v72h-14v-72z" fill="url(#paint1_linear_1547_237379)"/>
+  <path d="m15.5 265.5h11v69h-11v-69z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <path d="m171.28 231.19c0.048 0.849 0.365 1.66 0.905 2.316l4.52 5.49s2.92 73.294 0 119.5c-0.795 12.578-2.48 30.38-3.213 37.912-0.2 2.044-1.918 3.588-3.972 3.588h-139.03c-2.0539 0-3.7721-1.544-3.9713-3.588-0.7338-7.532-2.4186-25.334-3.2135-37.912-2.9203-46.206 0-119.5 0-119.5l4.5199-5.49c0.5402-0.656 0.8573-1.467 0.9055-2.316l9.0617-159.79c0.4339-7.6525 3.735-14.861 9.2454-20.188 29.539-28.56 76.401-28.56 105.94 0 5.51 5.3277 8.811 12.536 9.245 20.188l9.062 159.79z" fill="#93979B"/>
+  <path d="m171.28 231.19c0.048 0.849 0.365 1.66 0.905 2.316l4.52 5.49s2.92 73.294 0 119.5c-0.795 12.578-2.48 30.38-3.213 37.912-0.2 2.044-1.918 3.588-3.972 3.588h-139.03c-2.0539 0-3.7721-1.544-3.9713-3.588-0.7338-7.532-2.4186-25.334-3.2135-37.912-2.9203-46.206 0-119.5 0-119.5l4.5199-5.49c0.5402-0.656 0.8573-1.467 0.9055-2.316l9.0617-159.79c0.4339-7.6525 3.735-14.861 9.2454-20.188 29.539-28.56 76.401-28.56 105.94 0 5.51 5.3277 8.811 12.536 9.245 20.188l9.062 159.79z" fill="url(#paint2_linear_1547_237379)"/>
+  <path d="m169.78 231.28c0.066 1.167 0.502 2.282 1.245 3.184l4.199 5.1c3e-3 0.096 8e-3 0.205 0.012 0.328 0.021 0.547 0.051 1.356 0.088 2.402 0.074 2.092 0.176 5.133 0.29 8.926 0.228 7.588 0.502 18.186 0.684 30.226 0.365 24.093 0.364 53.919-1.092 76.96-0.793 12.55-2.475 30.328-3.209 37.862-0.124 1.267-1.189 2.233-2.479 2.233h-139.03c-1.2897 0-2.3548-0.966-2.4783-2.233-0.734-7.534-2.4164-25.312-3.2095-37.862-1.4562-23.041-1.4572-52.867-1.0923-76.96 0.1824-12.04 0.456-22.638 0.684-30.226 0.1139-3.793 0.2165-6.834 0.2906-8.926 0.037-1.046 0.0669-1.855 0.0875-2.402 0.0047-0.123 0.0088-0.232 0.0125-0.328l4.1986-5.1c0.7428-0.902 1.1789-2.017 1.2451-3.184l9.0617-159.79c0.4126-7.276 3.5512-14.13 8.7904-19.195 28.957-27.997 74.897-27.997 103.85 0 5.239 5.0656 8.378 11.919 8.79 19.195l9.062 159.79z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+  <path d="m29 246c-3.866 0-7-3.134-7-7s3.134-7 7-7h142c3.866 0 7 3.134 7 7s-3.134 7-7 7h-142z" fill="#D9D9D9"/>
+  <path d="m29 235h142v-6h-142v6zm142 8h-142v6h142v-6zm4-4c0 2.209-1.791 4-4 4v6c5.523 0 10-4.477 10-10h-6zm-4-4c2.209 0 4 1.791 4 4h6c0-5.523-4.477-10-10-10v6zm-146 4c0-2.209 1.7909-4 4-4v-6c-5.5228 0-10 4.477-10 10h6zm-6 0c0 5.523 4.4772 10 10 10v-6c-2.2091 0-4-1.791-4-4h-6z" fill="#727171" mask="url(#path-9-inside-1_1547_237379)"/>
+  <path d="m169.4 230.51h-105.65-17.875-16.288l8.8453-156.64c0.0378-0.6706 0.0222-1.351 0.0081-1.9616-0.0035-0.1554-7e-3 -0.3064-0.0095-0.4514-0.0557-3.2971 0.8268-14.337 14.57-22.905l0.1088-0.0678 0.0956-0.0853c4.7023-4.1911 9.0876-7.3558 15.947-10.664 4.4461-2.1446 5.6563-2.4389 8.4382-3.1156 1.4946-0.3635 3.443-0.8374 6.5906-1.7679 3.8442-0.5501 7.6701-0.8862 10.55-1.0849 1.4516-0.1002 2.659-0.1653 3.5022-0.2052 0.4215-0.02 0.7518-0.0337 0.9759-0.0424 0.1121-0.0043 0.1975-0.0074 0.2545-0.0094l0.064-0.0022 0.0155-5e-4 0.0036-1e-4h7e-4l0.0029-1e-4h1e-4 4e-4l0.0019-1e-4 0.0124-3e-4 0.056-0.0015c0.0509-0.0012 0.1288-0.0028 0.2323-0.0043 0.2064-0.0029 0.5154-0.0051 0.9154-2e-3 0.798 0.0062 1.956 0.0334 3.38 0.1181 2.851 0.1697 6.749 0.5689 10.946 1.4842 4.245 0.9257 6.41 1.6185 8.294 2.4424 0.955 0.4177 1.856 0.8769 2.951 1.4448 0.12 0.062 0.242 0.1252 0.366 0.1896 1.007 0.5232 2.173 1.1286 3.639 1.8416 5.925 2.8835 9.28 5.333 14.164 8.8991 0.361 0.2634 0.73 0.5329 1.109 0.8091l0.101 0.0737 0.112 0.0559c13.031 6.5095 13.802 19.448 13.765 22.889l-1e-3 0.069c-6e-3 0.5538-0.013 1.163 0.026 1.7851l9.784 156.91z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
+ </g><defs>
+  <linearGradient id="paint0_linear_1547_237379" x1="175.64" x2="173.3" y1="264" y2="335.93" 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_1547_237379" x1="17.64" x2="15.305" y1="264" y2="335.93" 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="paint2_linear_1547_237379" x1="10.811" x2="189.2" y1="-103.51" y2="-102.96" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#020202" stop-opacity=".35" offset="0"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".23574"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".39937"/>
+   <stop stop-color="#fff" stop-opacity=".3" offset=".49829"/>
+   <stop stop-color="#fff" stop-opacity=".12" offset=".59721"/>
+   <stop stop-color="#020202" stop-opacity=".12" offset=".76303"/>
+   <stop stop-color="#020202" stop-opacity=".35" offset="1"/>
+  </linearGradient>
+ </defs>
+</svg>
--- 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
@ -33,6 +33,10 @@
    "small_left_motor_pump",
    "right_motor_pump",
    "left_motor_pump",
+    "short_bottom_filter",
+    "long_bottom_filter",
+    "short_top_filter",
+    "long_top_filter",
    "horizontal_faucet",
    "horizontal_tank_with_screen",
    "vertical_tank_with_level",