UI: Fixed color for hp scada filter

application/src/main/data/json/system/scada_symbols/filter-hp.svg

@@ -1,12 +1,17 @@
 <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": "HP Filter",
-  "description": "Filter",
+  "description": "Filter with various states.",
   "searchTags": [
     "filter"
   ],
   "widgetSizeX": 1,
   "widgetSizeY": 2,
   "tags": [
+    {
+      "tag": "background",
+      "stateRenderFunction": "element.attr({fill: ctx.properties.filterColor});",
+      "actions": null
+    },
     {
       "tag": "clickArea",
       "stateRenderFunction": null,
@@ -219,13 +224,13 @@
   ],
   "properties": [
     {
-      "id": "runningColor",
+      "id": "filterColor",
-      "name": "{i18n:scada.symbol.colors}",
+      "name": "{i18n:scada.symbol.filter-color}",
       "type": "color",
       "default": "#FFFFFF",
       "required": null,
-      "subLabel": "{i18n:scada.symbol.running}",
+      "subLabel": "",
-      "divider": true,
+      "divider": false,
       "fieldSuffix": null,
       "disableOnProperty": null,
       "rowClass": "",
@@ -268,7 +273,7 @@
     }
   ]
 }]]></tb:metadata>
-<path d="m18.383 177.21c-0.0635-1.09-0.5693-2.106-1.4002-2.815l-9.0297-7.696c-4.2584-3.63-6.8043-8.844-6.9791-14.436-0.65043-20.804-1.9643-74.241 0.29843-110.76 0.77895-12.572 2.4293-30.36 3.1494-37.9 0.19581-2.0502 1.9178-3.6002 3.9773-3.6002h183.2c2.059 0 3.781 1.5501 3.977 3.6002 0.72 7.5392 2.371 25.328 3.15 37.9 2.262 36.518 0.948 89.955 0.298 110.76-0.175 5.592-2.721 10.806-6.979 14.436l-9.03 7.696c-0.831 0.709-1.336 1.725-1.4 2.815l-8.57 147.01c-0.605 10.385-5.508 20.049-13.531 26.67-34.554 28.516-84.478 28.516-119.03 0-8.0233-6.621-12.926-16.285-13.532-26.67z" fill="#fff"/><path d="m19.382 177.15c-0.0794-1.362-0.71139-2.633-1.7498-3.518l-9.0296-7.697c-4.0474-3.45-6.4624-8.4-6.6282-13.706-0.65056-20.807-1.9624-74.2 0.297-110.67 0.77777-12.553 2.4266-30.326 3.1467-37.866 0.1463-1.5318 1.4324-2.6953 2.9818-2.6953h183.2c1.549 0 2.835 1.1635 2.982 2.6953 0.71999 7.5402 2.369 25.314 3.146 37.866 2.26 36.465 0.94799 89.858 0.297 110.67-0.165 5.306-2.58 10.256-6.6279 13.706l-9.0289 7.697c-1.039 0.885-1.671 2.156-1.75 3.518l-8.5699 147.01c-0.589 10.108-5.361 19.513-13.17 25.958-34.184 28.21-83.573 28.21-117.76 0-7.8087-6.445-12.581-15.85-13.17-25.958z" stroke="#000" stroke-opacity=".87" stroke-width="2"/><path d="m67.264 0s-67.264 0-67.264 67v328.36c0 2.6512 1.7909 4.6404 4 4.6404h192c2.209 0 4-1.9892 4-4.6404v-328.36c0-67-66.07-67-66.07-67h-33.929zm67.07 81.2c-1.2887 0-2.3333 1.2536-2.3333 2.8v300.4c0 1.5464 1.0447 2.8 2.3333 2.8h14.666c1.2887 0 2.3333-1.2536 2.3333-2.8v-300.4c0-1.5464-1.0447-2.8-2.3333-2.8z" fill="#000" fill-opacity="0" style="stroke-width:1.4142" tb:tag="clickArea"/><g transform="translate(0,316)" fill="#d12730" style="display: none;" tb:tag="critical">
+<path d="m19.382 177.15c-0.0794-1.362-0.71139-2.633-1.7498-3.518l-9.0296-7.697c-4.0474-3.45-6.4624-8.4-6.6282-13.706-0.65056-20.807-1.9624-74.2 0.297-110.67 0.77777-12.553 2.4266-30.326 3.1467-37.866 0.1463-1.5318 1.4324-2.6953 2.9818-2.6953h183.2c1.549 0 2.835 1.1635 2.982 2.6953 0.71999 7.5402 2.369 25.314 3.146 37.866 2.26 36.465 0.94799 89.858 0.297 110.67-0.165 5.306-2.58 10.256-6.6279 13.706l-9.0289 7.697c-1.039 0.885-1.671 2.156-1.75 3.518l-8.5699 147.01c-0.589 10.108-5.361 19.513-13.17 25.958-34.184 28.21-83.573 28.21-117.76 0-7.8087-6.445-12.581-15.85-13.17-25.958z" fill="#fff" stroke="#000" stroke-width="2" tb:tag="background"/><path d="m67.264 0s-67.264 0-67.264 67v328.36c0 2.6512 1.7909 4.6404 4 4.6404h192c2.209 0 4-1.9892 4-4.6404v-328.36c0-67-66.07-67-66.07-67h-33.929zm67.07 81.2c-1.2887 0-2.3333 1.2536-2.3333 2.8v300.4c0 1.5464 1.0447 2.8 2.3333 2.8h14.666c1.2887 0 2.3333-1.2536 2.3333-2.8v-300.4c0-1.5464-1.0447-2.8-2.3333-2.8z" fill="#000" fill-opacity="0" style="stroke-width:1.4142" tb:tag="clickArea"/><g transform="translate(0,316)" fill="#d12730" style="display: none;" tb:tag="critical">
   <rect width="84" height="84" rx="4" fill="#fff" style=""/>
   <rect width="84" height="84" rx="4" style=""/>
   <rect x="2" y="2" width="80" height="80" rx="2" stroke="#000" stroke-opacity=".87" stroke-width="4" style=""/>

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3305,6 +3305,7 @@
             "show-low-critical-scale": "Show Low Critical state",
             "low-critical-scale": "Low Critical state",
             "low-critical-state-hint": "Double value indicates a low critical range up to the min value scale.",
+            "filter-color": "Filter color",
             "colors": "Colors",
             "alarm-colors": "Alarm colors"
         }