From e645b98a35c459c24b37cf6ae52fc0ab096c71c4 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Fri, 9 Aug 2024 13:01:51 +0300
Subject: [PATCH] UI: Add pipe color for scada symbols

---
 .../scada_symbols/bottom-flow-meter.svg       | 23 +++++++++-
 .../scada_symbols/bottom-right-elbow-pipe.svg | 27 ++++++++++--
 .../system/scada_symbols/bottom-tee-pipe.svg  | 25 ++++++++++-
 .../json/system/scada_symbols/cross-pipe.svg  | 27 ++++++++++--
 .../horizontal-inline-flow-meter.svg          | 23 +++++++++-
 .../system/scada_symbols/horizontal-pipe.svg  | 42 +++++++++++++++----
 .../scada_symbols/left-bottom-elbow-pipe.svg  | 27 ++++++++++--
 .../system/scada_symbols/left-flow-meter.svg  | 23 +++++++++-
 .../system/scada_symbols/left-tee-pipe.svg    | 25 ++++++++++-
 .../scada_symbols/left-top-elbow-pipe.svg     | 27 ++++++++++--
 .../scada_symbols/long-horizontal-pipe.svg    | 23 +++++++++-
 .../scada_symbols/long-vertical-pipe.svg      | 23 +++++++++-
 .../system/scada_symbols/right-flow-meter.svg | 23 +++++++++-
 .../system/scada_symbols/right-tee-pipe.svg   | 25 ++++++++++-
 .../system/scada_symbols/top-flow-meter.svg   | 24 ++++++++++-
 .../scada_symbols/top-right-elbow-pipe.svg    | 27 ++++++++++--
 .../system/scada_symbols/top-tee-pipe.svg     | 25 ++++++++++-
 .../vertical-inline-flow-meter.svg            | 24 ++++++++++-
 .../system/scada_symbols/vertical-pipe.svg    | 24 ++++++++++-
 .../assets/locale/locale.constant-en_US.json  |  1 +
 20 files changed, 448 insertions(+), 40 deletions(-)

diff --git a/application/src/main/data/json/system/scada_symbols/bottom-flow-meter.svg b/application/src/main/data/json/system/scada_symbols/bottom-flow-meter.svg
index 13ccbf8d82..93c496f2e3 100644
--- a/application/src/main/data/json/system/scada_symbols/bottom-flow-meter.svg
+++ b/application/src/main/data/json/system/scada_symbols/bottom-flow-meter.svg
@@ -51,6 +51,11 @@
       "stateRenderFunction": "var leak = ctx.values.leak;\nif (leak) {\n    element.show();\n} else {\n    element.hide();\n}",
       "actions": null
     },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    },
     {
       "tag": "value",
       "stateRenderFunction": "var value = ctx.values.value;\nctx.api.text(element, value.toFixed(0));\n",
@@ -710,6 +715,22 @@
       "min": null,
       "max": null,
       "step": null
+    },
+    {
+      "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><mask id="path-7-inside-1_1253_89545" fill="white">
@@ -904,7 +925,7 @@
    <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1281_42354"/>
    <feBlend in="SourceGraphic" in2="effect1_backgroundBlur_1281_42354" result="shape"/>
   </filter>
- </defs><rect x="14" y="64" width="372" height="72" fill="#fff"/><rect x="14" y="64" width="372" height="72" fill="url(#paint0_linear_1310_41908)" style="fill:url(#paint0_linear_1310_41908)"/><rect x="15.5" y="65.5" width="369" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect x="14" y="64" width="372" height="72" fill="#1ec1f4" stroke-width="0" style="display: none;" tb:tag="fluid-background"/><rect x="14" y="64" width="372" height="72" fill="url(#liquid)" stroke-width="0" style="display: none;" tb:tag="fluid"/><path d="m164 164v-28.421l36-31.579 36 31.579v28.421z" fill="#fff"/><path d="m164 164v-28.421l36-31.579 36 31.579v28.421z" fill="url(#paint1_linear_1310_41908)" style="fill:url(#paint1_linear_1310_41908)"/><path d="m165.5 162.5v-26.242l34.5-30.263 34.5 30.263v26.242z" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect x="387.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 transform="translate(0,150)" d="m325 125c0 69.036-55.964 125-125 125s-125-55.964-125-125 55.964-125 125-125 125 55.964 125 125zm-236.01 0c0 61.306 49.699 111 111.01 111s111-49.699 111-111c0-61.306-49.699-111.01-111-111.01s-111.01 49.699-111.01 111.01z" fill="#4a4848" mask="url(#path-7-inside-1_1253_89545)" stroke="#727171" stroke-width="6" tb:tag="border"/><circle cx="200" cy="275" r="111" fill="#fff" tb:tag="background"/><rect x="119.5" y="255.5" width="161" height="39" rx="3.8571" fill="#4a4848" fill-opacity=".06" tb:tag="border"/><path d="m123.36 254c-2.9419 0-5.3574 2.4155-5.3574 5.3574v31.285c0 2.9419 2.4155 5.3574 5.3574 5.3574h153.29c2.9419 0 5.3574-2.4155 5.3574-5.3574v-31.285c0-2.9419-2.4155-5.3574-5.3574-5.3574zm0 3h153.29c1.3318 0 2.3574 1.0256 2.3574 2.3574v31.285c0 1.3318-1.0256 2.3574-2.3574 2.3574h-153.29c-1.3318 0-2.3574-1.0256-2.3574-2.3574v-31.285c0-1.3318 1.0256-2.3574 2.3574-2.3574z" fill="#4a4848" tb:tag="border"/><circle cx="166" cy="223" r="16" fill="url(#paint2_linear_1253_89545)" style="fill:url(#paint2_linear_1253_89545)"/><circle cx="166" cy="223" r="15.5" stroke="#000" stroke-opacity=".12"/><circle cx="234" cy="223" r="16" fill="url(#paint3_linear_1253_89545)" style="fill:url(#paint3_linear_1253_89545)"/><circle cx="234" cy="223" r="15.5" stroke="#000" stroke-opacity=".12"/><text x="198.96094" y="276.94531" dominant-baseline="middle" fill="#000000" fill-opacity=".87" text-anchor="middle" style="font-family:Roboto;font-size:32px;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:500" tb:tag="value" xml:space="preserve"><tspan>0</tspan></text><text x="199.47363" y="324.4729" dominant-baseline="middle" fill="#000000" fill-opacity=".87" text-anchor="middle" style="font-family:Roboto;font-size:22px;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:500" tb:tag="valueUnits" xml:space="preserve"><tspan>m³/hr</tspan></text><g transform="translate(0 150)" style="display: none;" tb:tag="broken">
+ </defs><rect x="14" y="64" width="372" height="72" fill="#fff" tb:tag="pipe-background"/><rect x="14" y="64" width="372" height="72" fill="url(#paint0_linear_1310_41908)" style="fill:url(#paint0_linear_1310_41908)"/><rect x="15.5" y="65.5" width="369" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect x="14" y="64" width="372" height="72" fill="#1ec1f4" stroke-width="0" style="display: none;" tb:tag="fluid-background"/><rect x="14" y="64" width="372" height="72" fill="url(#liquid)" stroke-width="0" style="display: none;" tb:tag="fluid"/><path d="m164 164v-28.421l36-31.579 36 31.579v28.421z" fill="#fff" tb:tag="pipe-background"/><path d="m164 164v-28.421l36-31.579 36 31.579v28.421z" fill="url(#paint1_linear_1310_41908)" style="fill:url(#paint1_linear_1310_41908)"/><path d="m165.5 162.5v-26.242l34.5-30.263 34.5 30.263v26.242z" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect x="387.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 transform="translate(0,150)" d="m325 125c0 69.036-55.964 125-125 125s-125-55.964-125-125 55.964-125 125-125 125 55.964 125 125zm-236.01 0c0 61.306 49.699 111 111.01 111s111-49.699 111-111c0-61.306-49.699-111.01-111-111.01s-111.01 49.699-111.01 111.01z" fill="#4a4848" mask="url(#path-7-inside-1_1253_89545)" stroke="#727171" stroke-width="6" tb:tag="border"/><circle cx="200" cy="275" r="111" fill="#fff" tb:tag="background"/><rect x="119.5" y="255.5" width="161" height="39" rx="3.8571" fill="#4a4848" fill-opacity=".06" tb:tag="border"/><path d="m123.36 254c-2.9419 0-5.3574 2.4155-5.3574 5.3574v31.285c0 2.9419 2.4155 5.3574 5.3574 5.3574h153.29c2.9419 0 5.3574-2.4155 5.3574-5.3574v-31.285c0-2.9419-2.4155-5.3574-5.3574-5.3574zm0 3h153.29c1.3318 0 2.3574 1.0256 2.3574 2.3574v31.285c0 1.3318-1.0256 2.3574-2.3574 2.3574h-153.29c-1.3318 0-2.3574-1.0256-2.3574-2.3574v-31.285c0-1.3318 1.0256-2.3574 2.3574-2.3574z" fill="#4a4848" tb:tag="border"/><circle cx="166" cy="223" r="16" fill="url(#paint2_linear_1253_89545)" style="fill:url(#paint2_linear_1253_89545)"/><circle cx="166" cy="223" r="15.5" stroke="#000" stroke-opacity=".12"/><circle cx="234" cy="223" r="16" fill="url(#paint3_linear_1253_89545)" style="fill:url(#paint3_linear_1253_89545)"/><circle cx="234" cy="223" r="15.5" stroke="#000" stroke-opacity=".12"/><text x="198.96094" y="276.94531" dominant-baseline="middle" fill="#000000" fill-opacity=".87" text-anchor="middle" style="font-family:Roboto;font-size:32px;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:500" tb:tag="value" xml:space="preserve"><tspan>0</tspan></text><text x="199.47363" y="324.4729" dominant-baseline="middle" fill="#000000" fill-opacity=".87" text-anchor="middle" style="font-family:Roboto;font-size:22px;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:500" tb:tag="valueUnits" xml:space="preserve"><tspan>m³/hr</tspan></text><g transform="translate(0 150)" style="display: none;" tb:tag="broken">
   <g filter="url(#filter0_b_1281_42354)" style="filter: url(&quot;#filter0_b_1281_42354-3&quot;);">
    <circle cx="200" cy="125" r="111" fill="#000" fill-opacity=".24" style=""/>
   </g>
diff --git a/application/src/main/data/json/system/scada_symbols/bottom-right-elbow-pipe.svg b/application/src/main/data/json/system/scada_symbols/bottom-right-elbow-pipe.svg
index 736abfb40b..b3f6488f3e 100644
--- a/application/src/main/data/json/system/scada_symbols/bottom-right-elbow-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/bottom-right-elbow-pipe.svg
@@ -30,6 +30,11 @@
       "stateRenderFunction": "var leak = ctx.values.leak;\nif (leak) {\n    element.show();\n} else {\n    element.hide();\n}",
       "actions": null
     },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    },
     {
       "tag": "vertical-fluid",
       "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\n\nif (fluid) {\n    element.show();\n} else {\n    element.hide();\n}\n",
@@ -228,18 +233,34 @@
       "min": null,
       "max": null,
       "step": null
+    },
+    {
+      "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 transform="rotate(-90,100,100)" clip-path="url(#clip0_1245_66459)">
-  <rect x="14" y="64" width="50" height="72" fill="#fff"/>
+  <rect x="14" y="64" width="50" height="72" fill="#fff" tb:tag="pipe-background"/>
   <rect x="14" y="64" width="50" height="72" fill="url(#paint0_linear_1245_66459)" style="fill:url(#paint0_linear_1245_66459)"/>
   <rect x="15.5" y="65.5" width="47" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
-  <path d="m64 186v-50h72v50z" fill="#fff"/>
+  <path d="m64 186v-50h72v50z" fill="#fff" tb:tag="pipe-background"/>
   <path d="m64 186v-50h72v50z" fill="url(#paint1_linear_1245_66459)" style="fill:url(#paint1_linear_1245_66459)"/>
   <path d="m65.5 184.5v-47h69v47z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
   <rect x="1.5" y="51.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" 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"/>
-  <path d="m64 64s30.518 1.7177 50.4 21.6c19.882 19.882 21.6 50.4 21.6 50.4h-72z" fill="#fff"/>
+  <path d="m64 64s30.518 1.7177 50.4 21.6c19.882 19.882 21.6 50.4 21.6 50.4h-72z" fill="#fff" tb:tag="pipe-background"/>
   <path d="m64 64s30.518 1.7177 50.4 21.6c19.882 19.882 21.6 50.4 21.6 50.4h-72z" fill="url(#paint2_linear_1245_66459)" style="fill:url(#paint2_linear_1245_66459)"/>
   <path d="m65.5 134.5v-68.865c0.8334 0.0861 1.9717 0.2211 3.3584 0.4273 3.1196 0.464 7.4889 1.2873 12.47 2.7228 9.9828 2.8767 22.316 8.1809 32.01 17.875 9.695 9.6942 14.999 22.027 17.875 32.01 1.436 4.982 2.259 9.351 2.723 12.471 0.206 1.386 0.341 2.525 0.428 3.358z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
  </g><defs>
diff --git a/application/src/main/data/json/system/scada_symbols/bottom-tee-pipe.svg b/application/src/main/data/json/system/scada_symbols/bottom-tee-pipe.svg
index fa6d58e8ca..9e44380509 100644
--- a/application/src/main/data/json/system/scada_symbols/bottom-tee-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/bottom-tee-pipe.svg
@@ -40,6 +40,11 @@
       "stateRenderFunction": "var fluid = (ctx.values.leftFluid || ctx.values.rightFluid ||\n             ctx.values.bottomFluid) && !ctx.values.leak;\nif (fluid) {\n    element.show();\n} else {\n    element.hide();\n}",
       "actions": null
     },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    },
     {
       "tag": "right-fluid",
       "stateRenderFunction": "var fluid = ctx.values.rightFluid && !ctx.values.leak;\n\nif (fluid) {\n    element.show();\n} else {\n    element.hide();\n}",
@@ -553,13 +558,29 @@
       "min": null,
       "max": null,
       "step": null
+    },
+    {
+      "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 clip-path="url(#clip0_1245_66617)">
-  <path d="m14 64h172v72h-172z" fill="#fff"/>
+  <path d="m14 64h172v72h-172z" fill="#fff" tb:tag="pipe-background"/>
   <path d="m14 64h172v72h-172z" fill="url(#paint0_linear_1245_66617)" style="fill:url(#paint0_linear_1245_66617)"/>
   <path d="m15.5 65.5h169v69h-169z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
-  <path d="m136 186v-51l-36-35-36 35v51z" fill="#fff"/>
+  <path d="m136 186v-51l-36-35-36 35v51z" fill="#fff" tb:tag="pipe-background"/>
   <path d="m136 186v-51l-36-35-36 35v51z" fill="url(#paint1_linear_1245_66617)" style="fill:url(#paint1_linear_1245_66617)"/>
   <path d="m134.5 184.5v-48.866l-34.5-33.542-34.5 33.542v48.866z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
   <rect x="1.5" y="51.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" stroke-width="3"/>
diff --git a/application/src/main/data/json/system/scada_symbols/cross-pipe.svg b/application/src/main/data/json/system/scada_symbols/cross-pipe.svg
index 2defc446e4..bfed29df3a 100644
--- a/application/src/main/data/json/system/scada_symbols/cross-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/cross-pipe.svg
@@ -40,6 +40,11 @@
       "stateRenderFunction": "var fluid = (ctx.values.leftFluid || ctx.values.rightFluid ||\n             ctx.values.topFluid || ctx.values.bottomFluid) && !ctx.values.leak;\nif (fluid) {\n    element.show();\n} else {\n    element.hide();\n}",
       "actions": null
     },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    },
     {
       "tag": "right-fluid",
       "stateRenderFunction": "var fluid = ctx.values.rightFluid && !ctx.values.leak;\n\nif (fluid) {\n    element.show();\n} else {\n    element.hide();\n}",
@@ -718,18 +723,34 @@
       "min": null,
       "max": null,
       "step": null
+    },
+    {
+      "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 clip-path="url(#clip0_1245_66442)">
-  <path d="m64 186v-172h72v172h-72z" fill="#fff"/>
+  <path d="m64 186v-172h72v172h-72z" fill="#fff" tb:tag="pipe-background"/>
   <path d="m64 186v-172h72v172h-72z" fill="url(#paint0_linear_1245_66442)"/>
   <path d="m65.5 184.5v-169h69v169h-69z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
-  <path d="M14 64H65.873L100 100L65.873 136H14V64Z" fill="#fff"/>
+  <path d="M14 64H65.873L100 100L65.873 136H14V64Z" fill="#fff" tb:tag="pipe-background"/>
   <path d="M14 64H65.873L100 100L65.873 136H14V64Z" fill="url(#paint1_linear_1245_66442)"/>
   <path d="m15.5 65.5h49.728l32.705 34.5-32.705 34.5h-49.728v-69z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
   <path d="M136 64H134.127L100 100L134.127 136H136V64Z" fill="url(#paint2_linear_1245_66442)"/>
   <path d="M134.5 65.7868L102.067 100L134.5 134.213V65.7868Z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
-  <path d="M186 64H134.127L100 100L134.127 136H186V64Z" fill="#fff"/>
+  <path d="M186 64H134.127L100 100L134.127 136H186V64Z" fill="#fff" tb:tag="pipe-background"/>
   <path d="M186 64H134.127L100 100L134.127 136H186V64Z" fill="url(#paint3_linear_1245_66442)"/>
   <path d="m184.5 65.5h-49.728l-32.705 34.5 32.705 34.5h49.728v-69z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
   <rect x="1.5" y="51.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/>
diff --git a/application/src/main/data/json/system/scada_symbols/horizontal-inline-flow-meter.svg b/application/src/main/data/json/system/scada_symbols/horizontal-inline-flow-meter.svg
index 4133db1084..8b34deaffd 100644
--- a/application/src/main/data/json/system/scada_symbols/horizontal-inline-flow-meter.svg
+++ b/application/src/main/data/json/system/scada_symbols/horizontal-inline-flow-meter.svg
@@ -51,6 +51,11 @@
       "stateRenderFunction": "var leak = ctx.values.leak;\nif (leak) {\n    element.show();\n} else {\n    element.hide();\n}",
       "actions": null
     },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    },
     {
       "tag": "value",
       "stateRenderFunction": "var value = ctx.values.value;\nctx.api.text(element, value.toFixed(0));\n",
@@ -710,6 +715,22 @@
       "min": null,
       "max": null,
       "step": null
+    },
+    {
+      "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><defs>
@@ -884,7 +905,7 @@
    <stop stop-color="#727171" stop-opacity=".35" offset=".71855"/>
    <stop stop-color="#727171" offset="1"/>
   </linearGradient>
- </defs><rect x="14" y="64" width="372" height="72" fill="#fff"/><rect x="14" y="64" width="372" height="72" fill="url(#paint0_linear_1595_102361)" style="fill:url(#paint0_linear_1595_102361)"/><rect x="15.5" y="65.5" width="369" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect x="387.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"/><rect x="14" y="64" width="372" height="72" fill="#1ec1f4" stroke-width="0" style="display: none;" tb:tag="fluid-background"/><rect x="14" y="64" width="372" height="72" fill="url(#liquid)" stroke-width="0" style="display: none;" tb:tag="fluid"/><path d="m300 100c0 55.228-44.772 100-100 100s-100-44.772-100-100c0-55.228 44.772-100 100-100s100 44.772 100 100zm-188 0c0 48.603 39.401 88.004 88.004 88.004s88.004-39.401 88.004-88.004c0-48.604-39.401-88.004-88.004-88.004s-88.004 39.401-88.004 88.004z" fill="#4a4848" mask="url(#path-5-inside-1_1595_102361)" stroke="#727171" stroke-width="6" tb:tag="border"/><circle cx="200" cy="100" r="88" fill="#fff" tb:tag="background"/><path d="m135.5 88.357c0-2.1302 1.727-3.8571 3.857-3.8571h121.29c2.13 0 3.857 1.7269 3.857 3.8571v23.286c0 2.13-1.727 3.857-3.857 3.857h-121.29c-2.13 0-3.857-1.727-3.857-3.857z" fill="#4a4848" fill-opacity=".06" tb:tag="border"/><path d="m139.36 83c-2.9408 0-5.3574 2.4165-5.3574 5.3574v23.285c0 2.9408 2.4166 5.3574 5.3574 5.3574h121.29c2.9408 0 5.3574-2.4166 5.3574-5.3574v-23.285c0-2.9409-2.4167-5.3574-5.3574-5.3574zm0 3h121.29c1.3192 0 2.3574 1.0379 2.3574 2.3574v23.285c0 1.3192-1.0382 2.3574-2.3574 2.3574h-121.29c-1.3192 0-2.3574-1.0382-2.3574-2.3574v-23.285c0-1.3195 1.0382-2.3574 2.3574-2.3574z" fill="#4a4848" tb:tag="border"/><circle cx="173.5" cy="59.5" r="12.5" fill="url(#paint1_linear_1595_102361)" style="fill:url(#paint1_linear_1595_102361)"/><circle cx="173.5" cy="59.5" r="12" stroke="#000" stroke-opacity=".12"/><circle cx="226.5" cy="59.5" r="12.5" fill="url(#paint2_linear_1595_102361)" style="fill:url(#paint2_linear_1595_102361)"/><circle cx="226.5" cy="59.5" r="12" stroke="#000" stroke-opacity=".12"/><text x="200.00586" y="102.19141" dominant-baseline="middle" fill="#000000" fill-opacity=".87" text-anchor="middle" style="font-family:Roboto;font-size:24px;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:500" tb:tag="value" xml:space="preserve"><tspan>0</tspan></text><text x="199.61719" y="138.77344" dominant-baseline="middle" fill="#000000" fill-opacity=".87" text-anchor="middle" style="font-family:Roboto;font-size:16px;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:500" tb:tag="valueUnits" xml:space="preserve"><tspan>m³/hr</tspan></text><g style="display: none;" tb:tag="broken">
+ </defs><rect x="14" y="64" width="372" height="72" fill="#fff" tb:tag="pipe-background"/><rect x="14" y="64" width="372" height="72" fill="url(#paint0_linear_1595_102361)" style="fill:url(#paint0_linear_1595_102361)"/><rect x="15.5" y="65.5" width="369" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect x="387.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"/><rect x="14" y="64" width="372" height="72" fill="#1ec1f4" stroke-width="0" style="display: none;" tb:tag="fluid-background"/><rect x="14" y="64" width="372" height="72" fill="url(#liquid)" stroke-width="0" style="display: none;" tb:tag="fluid"/><path d="m300 100c0 55.228-44.772 100-100 100s-100-44.772-100-100c0-55.228 44.772-100 100-100s100 44.772 100 100zm-188 0c0 48.603 39.401 88.004 88.004 88.004s88.004-39.401 88.004-88.004c0-48.604-39.401-88.004-88.004-88.004s-88.004 39.401-88.004 88.004z" fill="#4a4848" mask="url(#path-5-inside-1_1595_102361)" stroke="#727171" stroke-width="6" tb:tag="border"/><circle cx="200" cy="100" r="88" fill="#fff" tb:tag="background"/><path d="m135.5 88.357c0-2.1302 1.727-3.8571 3.857-3.8571h121.29c2.13 0 3.857 1.7269 3.857 3.8571v23.286c0 2.13-1.727 3.857-3.857 3.857h-121.29c-2.13 0-3.857-1.727-3.857-3.857z" fill="#4a4848" fill-opacity=".06" tb:tag="border"/><path d="m139.36 83c-2.9408 0-5.3574 2.4165-5.3574 5.3574v23.285c0 2.9408 2.4166 5.3574 5.3574 5.3574h121.29c2.9408 0 5.3574-2.4166 5.3574-5.3574v-23.285c0-2.9409-2.4167-5.3574-5.3574-5.3574zm0 3h121.29c1.3192 0 2.3574 1.0379 2.3574 2.3574v23.285c0 1.3192-1.0382 2.3574-2.3574 2.3574h-121.29c-1.3192 0-2.3574-1.0382-2.3574-2.3574v-23.285c0-1.3195 1.0382-2.3574 2.3574-2.3574z" fill="#4a4848" tb:tag="border"/><circle cx="173.5" cy="59.5" r="12.5" fill="url(#paint1_linear_1595_102361)" style="fill:url(#paint1_linear_1595_102361)"/><circle cx="173.5" cy="59.5" r="12" stroke="#000" stroke-opacity=".12"/><circle cx="226.5" cy="59.5" r="12.5" fill="url(#paint2_linear_1595_102361)" style="fill:url(#paint2_linear_1595_102361)"/><circle cx="226.5" cy="59.5" r="12" stroke="#000" stroke-opacity=".12"/><text x="200.00586" y="102.19141" dominant-baseline="middle" fill="#000000" fill-opacity=".87" text-anchor="middle" style="font-family:Roboto;font-size:24px;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:500" tb:tag="value" xml:space="preserve"><tspan>0</tspan></text><text x="199.61719" y="138.77344" dominant-baseline="middle" fill="#000000" fill-opacity=".87" text-anchor="middle" style="font-family:Roboto;font-size:16px;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:500" tb:tag="valueUnits" xml:space="preserve"><tspan>m³/hr</tspan></text><g style="display: none;" tb:tag="broken">
   <circle cx="200" cy="100" r="88" fill="#000" fill-opacity=".24" style=""/>
   <path d="m253.92 84.931c-0.174 0.5228-0.309 1.1931-0.577 1.6622-0.577 1.6623-1.583 3.2037-2.991 4.1417-0.697 0.3484-1.488 0.6431-2.226 0.8439-1.971 0.6161-3.848 1.2858-5.725 1.9555-1.636 0.6832-3.513 1.3529-5.122 0.682 0.013-0.2414-0.027-0.3888-0.013-0.6302-2.977 0.4146-0.922 2.811-8.792 8.1516-11.067 2.815-27.05 6.112-29.128 6.044-0.724-0.041-1.408 0.066-2.038 0.08-1.113-0.014-2.172-0.122-3.218-0.471-0.764-0.188-1.515-0.617-2.225-0.899-2.038-0.792-4.183-1.396-6.448-1.571 0.603 0.47 1.206 0.939 1.809 1.409 0 0 0.121 0.442 0.081 0.295 0.201-0.134 0.482 0.027 0.616 0.228-0.751 0.442-1.502 0.884-2.199 1.232-3.647 2.024-7.389 3.993-11.304 5.614 3.875-0.897 7.683-2.33 11.411-4.058 0.845-0.389 1.595-0.831 2.574-1.018 2.306-0.549 4.666 0.551 6.824 1.785l0.094 0.054c0.187 0.107 0.469 0.268 0.455 0.509 0.081 0.295-0.228 0.617-0.483 0.845-1.368 1.085-2.642 2.225-3.916 3.364-1.582 1.461-2.883 3.082-4.56 4.489-1.475 1.274-3.084 2.346-4.64 3.324-0.75 0.442-1.408 0.938-2.239 1.085-0.885 0.241-1.756 0.241-2.668 0.093-1.153-0.161-2.212-0.269-3.311-0.524-6.314-1.37-17.674 5.248-23.787 2.873 2.44 1.395 5.027 2.75 7.466 4.145-3.66 0.522-7.133 2.022-10.7 3.469-0.992 0.428-1.984 0.857-3.111 1.085-0.884 0.241-1.903 0.281-2.775 0.28-1.743 0-3.526-0.148-4.973-1.101 0.831 0.724 1.769 1.261 2.667 1.65-0.255 0.228-0.563 0.55-0.818 0.778-2.146 2.01-4.198 4.074-6.29 5.99 1.14-0.469 2.199-1.232 3.165-2.05 1.274-1.139 2.226-2.587 3.768-3.324 1.743-0.87 3.808-0.561 5.806-0.789 3.164-0.307 6.154-1.834 9.131-3.12s5.228-3.036 10.264-4.758c3.63-1.241 9.543-3.131 12.411-2.486 0.912 0.148 1.864 0.443 2.762 0.832 0.617 0.228 1.18 0.55 1.836 0.926 0.751 0.429 1.408 0.805 2.212 1.14 0.469 0.268 0.992 0.443 1.475 0.47 0.576 0.08 1.22-0.174 1.716-0.388 1.783-0.724 3.567-1.447 5.35-2.17-0.295 0.08-0.737 0.2-1.032 0.281-2.36 0.642-4.666 1.191-6.972 0.869-0.483-0.027-1.006-0.202-1.327-0.51-0.094-0.054-0.188-0.107-0.134-0.201-0.362-0.456-0.214-1.368 0.322-1.435 0.282-0.71 1.046-1.394 1.556-1.849 4.157-3.351 8.408-6.647 12.606-9.85 0.456-0.362 0.912-0.724 1.555-0.978 0.644-0.255 1.18-0.322 1.81-0.335 4.572-0.374 19.939-3.129 23.095-4.335 5.049-1.929 5.348-0.685 7.45-3.208 0.335 0.067 7.054-8.7036 7.39-8.6365 2.252 0.4164 4.343 1.9858 6.099 3.4875 1.45 1.565-2.243 6.524-2.272 7.287-0.032 0.867-18.866 17.201-20.503 18.31-0.751 0.442-2.24 0.274-2.533 0.546-0.103 0.096-0.557 1.991 0.264 0.492-0.764-0.029-8.29 2.174-13.599 1.877-0.482-0.027-1.059-0.108-1.582-0.282-0.335-0.067-0.616-0.228-0.844-0.483-0.094-0.054-0.134-0.201-0.174-0.349-0.04-0.147 0.107-0.188 0.161-0.281 2.803-3.378 6.276-6.621 7.203-11.072-0.201 0.134-0.255 0.228-0.456 0.362-0.054 0.094-0.201 0.134-0.308 0.321-1.744 1.743-3.085 4.089-5.003 5.482-0.858 0.63-1.81 1.206-2.441 2.091-0.791 1.166-1.033 2.895-2.052 3.807-0.51 0.455-1.207 0.804-1.797 0.964-1.623 0.442-3.419 0.535-5.001 1.125-0.792 0.295-1.596 0.831-2.387 1.125-0.148 0.04-0.201 0.134-0.349 0.174-1.783 0.724-7.731 4.384-9.661 4.276 1.689 0.095 7.288-3.392 8.963-3.056-1.797 1.836-3.54 3.579-5.525 5.307 1.904-1.152 3.674-2.505 5.311-4.06 0.818-0.777 1.636-1.555 2.588-2.131 1.85-1.058 4.451-0.816 5.51 1.034 0.134 0.202 0.268 0.403 0.254 0.644 0.415 1.234 0.241 2.628 0.12 3.928-0.551 3.794-1.236 7.387-2.029 11.168-0.591 2.775-1.275 5.496-2.764 7.882-0.108 0.188-0.309 0.322-0.496 0.214 0.442 0.751 0.106 1.555-0.417 2.252-0.429 0.751-1.046 1.394-1.569 2.091-0.47 0.604-0.939 1.207-1.409 1.81-2.239 2.828-4.573 5.602-7.135 8.122 1.556-0.978 3.031-2.251 4.184-3.833 0.886-1.112 1.583-2.332 2.509-3.297 0.979-1.059 2.226-1.715 3.205-2.774 0.416-0.51 0.885-1.113 1.395-1.568 0.066 1.407 0.039 2.761 0.106 4.169 0.201-1.005 0.403-2.011 0.604-3.016 0.215-1.247 0.524-2.44 0.832-3.633 0.94-2.949 2.885-5.697 3.395-8.767 0.014-0.241 0.027-0.483 0.041-0.724-0.201 0.134-0.309 0.322-0.51 0.456-0.04-0.148 0.067-0.336 0.027-0.483 0.055-2.708 0.646-5.483 1.371-8.057 0.563-2.293 1.235-4.773 2.965-6.274 0.509-0.455 1.113-0.857 1.622-1.313 0.51-0.456 0.845-1.26 0.738-1.944 3.178 0.323 6.66 1.265 9.329-0.571 2.065-1.434 4.621-0.818 5.075-2.713-0.792 0.735 1.103 1.189 2.659 0.483s23.915-14.808 24.838-26.835c-0.911-1.8908-2.519-3.4332-4.316-4.2114-0.094-0.0537-0.094-0.0537-0.187-0.1073 2.923-1.1923 5.993-2.4246 8.796-4.0593 0.805-0.536 1.703-1.0184 2.28-1.8092 0.671-1.6086 0.832-3.633 0.94-5.5635z" fill="#5c5a5a" style=""/>
   <path d="m221.07 127.62c-1.005-0.202-1.526-0.498-2.558-0.217-2.065 0.562-2.591 1.325-4.575 2.183-2.226 0.844-3.364 0.839-5.79 0.946-1.261 0.026-2.467-0.041-3.62-0.203 0.187 0.979-1.8 2.31-2.564 2.993-0.764 0.684-1.717 1.26-2.106 2.158-0.442 0.992-0.309 2.065-0.416 3.124-0.162 1.153-0.658 2.238-1.061 3.378-0.711 2.332-0.605 4.759-0.351 7.146 0.054-0.094 0.054-0.094 0.108-0.188 0.054-2.708 0.645-5.483 1.37-8.057 0.564-2.293 1.235-4.773 2.965-6.274 0.51-0.455 1.113-0.857 1.623-1.313 0.509-0.456 2.054-1.666 1.946-2.349 3.178 0.322 5.388 1.065 8.056-0.771 2.066-1.434 2.736-1.244 5.15-1.98 0.402-0.268 1.14-0.469 1.823-0.576z" fill="#8b8b8b" style=""/>
diff --git a/application/src/main/data/json/system/scada_symbols/horizontal-pipe.svg b/application/src/main/data/json/system/scada_symbols/horizontal-pipe.svg
index 38aab1a12e..d2ddc67657 100644
--- a/application/src/main/data/json/system/scada_symbols/horizontal-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/horizontal-pipe.svg
@@ -23,6 +23,11 @@
       "tag": "leak",
       "stateRenderFunction": "var leak = ctx.values.leak;\nif (leak) {\n    element.show();\n} else {\n    element.hide();\n}",
       "actions": null
+    },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
     }
   ],
   "behavior": [
@@ -217,12 +222,37 @@
       "min": null,
       "max": null,
       "step": null
+    },
+    {
+      "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><defs>
-  <linearGradient id="paint0_linear_955_27716" x1="48.475" x2="48.475" y1="136" y2="64" gradientTransform="translate(-.50002)" gradientUnits="userSpaceOnUse">
+}]]></tb:metadata>
+<path d="m186 136h-172v-72h172z" fill="#fff" tb:tag="pipe-background"/><path d="m186 136h-172v-72h172z" fill="url(#paint0_linear_955_27716)"/><g stroke-width="3">
+  <path d="m184.5 134.5h-169v-69h169z" stroke="#000" stroke-opacity=".12"/>
+  <rect transform="scale(-1)" x="-198.5" y="-148.5" width="11.286" height="97" rx="5.6429" fill="#d9d9d9" stroke="#727171"/>
+  <rect transform="scale(-1)" x="-12.5" y="-148.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171"/>
+ </g><defs>
+  <linearGradient id="paint0_linear_955_27716" x1="48.475" x2="48.475" y1="136" y2="64" gradientUnits="userSpaceOnUse">
    <stop stop-color="#727171" offset="0"/>
-   <stop stop-color="#fff" offset=".49829"/>
+   <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>
   <pattern id="liquid" width="172" height="72" patternTransform="translate(14,-8)" patternUnits="userSpaceOnUse">
@@ -376,11 +406,7 @@
    <stop stop-color="#727171" offset=".89138"/>
    <stop stop-color="#727171" offset="1"/>
   </linearGradient>
- </defs><path d="m186 136h-172v-72h172z" fill="url(#paint0_linear_955_27716)"/><g stroke-width="3">
-  <path d="m184.5 134.5h-169v-69h169z" stroke="#000" stroke-opacity=".12"/>
-  <rect transform="scale(-1)" x="-198.5" y="-148.5" width="11.286" height="97" rx="5.6429" fill="#d9d9d9" stroke="#727171"/>
-  <rect transform="scale(-1)" x="-12.5" y="-148.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171"/>
- </g><rect x="14" y="64" width="172" height="72" fill="#1ec1f4" stroke-width="0" style="display: none;" tb:tag="fluid-background"/><rect x="14" y="64" width="172" height="72" fill="url(#liquid)" stroke-width="0" style="display: none;" tb:tag="fluid"/><g transform="translate(5.0806 -.22515)" style="display: none;" tb:tag="leak">
+ </defs><rect x="14" y="64" width="172" height="72" fill="#1ec1f4" stroke-width="0" style="display: none;" tb:tag="fluid-background"/><rect x="14" y="64" width="172" height="72" fill="url(#liquid)" stroke-width="0" style="display: none;" tb:tag="fluid"/><g transform="translate(5.0806 -.22515)" style="display: none;" tb:tag="leak">
   <path d="m34.253 100.01c0.5162 0.38 1.0932 0.926 1.6625 1.191 1.6625 1.191 3.6513 1.98 5.617 1.926 0.8955-0.136 1.8442-0.387 2.6789-0.691 2.2843-0.737 4.5155-1.36 6.7467-1.983 2.0111-0.448 4.2423-1.0713 5.3196-2.7869-0.1747-0.2201-0.2354-0.387-0.41-0.6071 3.1037-1.6023 5.7289-4.2595 7.671-7.2353 1.3504-2.004 2.3515-4.4482 4.2789-5.906 0.6601-0.5239 1.381-0.8808 1.9881-1.2909 1.0471-0.7592 1.9804-1.5716 2.7391-2.604 0.5994-0.6909 1.0241-1.6018 1.5096-2.3457 1.4035-2.1179 3.0347-4.1297 5.0683-5.8152-0.2579 0.8501-0.5156 1.7002-0.7734 2.5504 0 0 0.1823 0.5008 0.1215 0.3339-0.2808 0.0077-0.4401 0.3492-0.4324 0.63 1.0094-0.0837 2.0188-0.1675 2.9143-0.3044 4.8193-0.5251 9.6917-1.1641 14.496-2.2508-4.2801 1.7469-8.8563 2.9398-13.554 3.7988-1.0625 0.1977-2.0719 0.2815-3.1267 0.7599-2.5575 1.0254-4.0594 3.6519-5.2806 6.2707l-0.0531 0.1138c-0.1062 0.2278-0.2655 0.5694-0.0909 0.7894 0.1216 0.3339 0.6301 0.4324 1.0248 0.4778 2.0265 0.1133 3.9999 0.3404 5.9733 0.5675 2.4819 0.3256 4.8045 0.9928 7.3396 1.2046 2.2542 0.2194 4.5007 0.1581 6.6334 0.0436 1.0094-0.0838 1.9657-0.0537 2.8536-0.4714 1.0017-0.3646 1.8288-0.9493 2.5952-1.7009 0.9863-0.9262 1.9193-1.7386 2.7923-2.7179 5.076-5.5344 20.298-6.8695 24.508-13.223-1.38 2.9604-2.928 5.9816-4.308 8.942 3.824-1.9593 8.128-2.8637 12.484-3.882 1.229-0.2585 2.459-0.5169 3.68-1.0561 1.002-0.3646 1.996-1.01 2.823-1.5947 1.655-1.1693 3.248-2.5055 3.984-4.3804-0.304 1.2448-0.834 2.3834-1.426 3.3551 0.394 0.0454 0.903 0.1439 1.298 0.1893 3.385 0.4696 6.717 1.053 9.988 1.4695-1.396 0.3192-2.914 0.3044-4.379 0.1758-1.973-0.2271-3.848-0.9627-5.806-0.6282-2.239 0.3422-3.992 2.02-6.041 3.1439-3.21 1.8301-7.073 2.3853-10.761 3.1605-3.688 0.7753-6.999 0.6235-12.935 2.3663-4.278 1.256-11.158 3.4266-13.449 5.9623-0.767 0.7516-1.472 1.6701-2.064 2.6418-0.4326 0.6301-0.7511 1.3132-1.1228 2.1103-0.4247 0.9108-0.7964 1.7079-1.335 2.5657-0.2655 0.5693-0.6448 1.0855-1.0849 1.4348-0.4932 0.4631-1.2749 0.6531-1.8896 0.7823-2.1781 0.5091-4.3562 1.0183-6.5343 1.5274 0.3339-0.1215 0.8348-0.3038 1.1687-0.4254 2.6713-0.9722 5.2287-1.9976 7.2015-3.8501 0.4401-0.3492 0.8194-0.8654 0.9179-1.374 0.0531-0.1138 0.1062-0.2277-0.0076-0.2808 0.0377-0.6755-0.7139-1.4418-1.2679-1.1457-0.7439-0.4855-1.9279-0.6217-2.7173-0.7126-6.1933-0.3928-12.44-0.6718-18.572-0.8977-0.6755-0.0377-1.351-0.0755-2.1326 0.1145-0.7817 0.19-1.3357 0.4861-1.9427 0.8961-4.591 2.7109-9.3413 5.7634-12.482 10.121-0.0531 0.1139-0.1062 0.2277-0.1593 0.3416 0 0 0.1138 0.0531 0.2277 0.1062-0.2731 0.288-0.607 0.41-0.8802 0.698-1.8589 1.906-2.7916 4.798-3.4511 7.401-0.3281 2.459-0.3109 3.65 0.2287 4.356 0.6125 0.801 2.6907 3.528 4.9877 3.483 1.0094-0.084 2.3108-1.242 2.7709-1.18 0.1625 0.022 1.8643 1.516 0.0794 0.644 0.7057-0.539 9.3274-3.495 14.168-7.337 0.4401-0.35 0.9333-0.813 1.3126-1.329 0.2732-0.288 0.4325-0.63 0.4779-1.025 0.0531-0.113-0.0077-0.28-0.0684-0.447-0.0608-0.167-0.2278-0.107-0.3416-0.16-4.9261-1.326-10.398-2.076-14.263-5.6801 0.2809-0.0077 0.3947 0.0454 0.6755 0.0377 0.1139 0.0531 0.2808-0.0077 0.5086 0.0985 2.8235 0.4849 5.67 1.8119 8.4251 1.8499 1.2371 0.022 2.5273-0.07 3.719 0.348 1.5333 0.576 2.9227 2.056 4.5014 2.237 0.7894 0.091 1.6849-0.046 2.3527-0.289 1.8365-0.668 3.6046-1.785 5.5019-2.286 0.9486-0.251 2.0719-0.281 3.0205-0.532 0.167-0.061 0.2809-8e-3 0.4478-0.069 2.1781-0.509 10.278-1.0219 12.04-2.4189-1.541 1.2224-9.1936 1.667-10.559 3.1099 2.9374 0.538 5.7609 1.023 8.8043 1.333-2.58 0.183-5.1684 0.085-7.7642-0.294-1.2979-0.189-2.5958-0.379-3.886-0.287-2.4666 0.236-4.7733 2.21-4.5373 4.676 0.0077 0.281 0.0154 0.562 0.19 0.782 0.433 1.45 1.5339 2.656 2.5209 3.809 3.0672 3.233 6.1267 6.184 9.414 9.242 2.4216 2.238 4.8966 4.363 7.9106 5.629 0.227 0.106 0.508 0.099 0.614-0.129 0.084 1.009 0.942 1.548 1.906 1.859 0.911 0.425 1.928 0.622 2.892 0.932l2.55 0.774c4.023 1.183 8.099 2.252 12.22 2.926-2.132 0.114-4.386-0.105-6.542-0.833-1.587-0.463-3.067-1.153-4.592-1.448-1.64-0.349-3.264-0.136-4.903-0.485-0.737-0.204-1.587-0.462-2.376-0.553 0.881 1.381 1.815 2.648 2.695 4.029-0.865-0.819-1.731-1.638-2.596-2.458-1.04-1.039-2.133-1.965-3.227-2.891-2.869-2.169-6.5581-3.474-9.1014-6.046-0.1746-0.22-0.3493-0.44-0.5239-0.66 0.2808-8e-3 0.5086 0.098 0.7894 0.091-0.0608-0.167-0.2885-0.273-0.3493-0.44-1.8678-2.535-4.2896-4.773-6.7037-6.73-2.0725-1.799-4.3727-3.703-7.0216-3.968-0.7894-0.091-1.6318-0.068-2.4212-0.158-0.7894-0.091-1.6471-0.63-2.0041-1.351-2.7999 2.437-5.4747 5.667-9.2392 5.713-2.922 0.024-4.9354 2.323-6.6372 0.828 1.2453 0.166-0.2492 1.868-2.2002 2.242-1.951 0.373-7.5425-5.058-8.0062-7.631-0.403-2.406 0.0896-4.949 1.273-6.892l0.1062-0.228c-3.5745 0.828-7.316 1.718-11.073 2.045-1.1233 0.031-2.2996 0.175-3.3775-0.189-1.7156-1.077-3.2264-2.89-4.6235-4.651z" fill="#5c5a5a" style=""/>
   <g fill="#8b8b8b" style="">
    <path d="m60.493 117.31c0.8195-0.865 1.1148-1.496 2.2835-1.921 2.3374-0.851 3.3482-0.479 5.8071-0.996 2.679-0.691 3.756-1.458 6.1312-2.985 1.2141-0.82 2.3143-1.693 3.3007-2.619 0.4785 1.055 3.2567 0.986 4.4408 1.122 1.184 0.136 2.4742 0.045 3.4459 0.637 1.0855 0.644 1.6778 1.752 2.4902 2.686 0.9262 0.986 2.1256 1.684 3.2719 2.496 2.2395 1.737 3.7657 4.112 5.125 6.548-0.1139-0.053-0.1139-0.053-0.2277-0.106-1.8678-2.535-4.2896-4.773-6.7037-6.73-2.0726-1.798-4.3728-3.703-7.0217-3.968-0.7893-0.09-1.6318-0.067-2.4211-0.158-0.7894-0.091-3.0668-0.204-3.4237-0.925-2.7999 2.437-4.4002 4.623-8.1647 4.67-2.9221 0.023-3.4312 0.654-6.2164 1.573-0.5616 0.016-1.3964 0.319-2.1173 0.676z" style=""/>
diff --git a/application/src/main/data/json/system/scada_symbols/left-bottom-elbow-pipe.svg b/application/src/main/data/json/system/scada_symbols/left-bottom-elbow-pipe.svg
index f29d904e3a..cd9b5f1b7a 100644
--- a/application/src/main/data/json/system/scada_symbols/left-bottom-elbow-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/left-bottom-elbow-pipe.svg
@@ -29,6 +29,11 @@
       "stateRenderFunction": "var leak = ctx.values.leak;\nif (leak) {\n    element.show();\n} else {\n    element.hide();\n}",
       "actions": null
     },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    },
     {
       "tag": "vertical-fluid",
       "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\n\nif (fluid) {\n    element.show();\n} else {\n    element.hide();\n}\n",
@@ -227,19 +232,35 @@
       "min": null,
       "max": null,
       "step": null
+    },
+    {
+      "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 clip-path="url(#clip0_1245_66459)">
-  <rect x="14" y="64" width="50" height="72" fill="#fff"/>
+  <rect x="14" y="64" width="50" height="72" fill="#fff" tb:tag="pipe-background"/>
   <rect x="14" y="64" width="50" height="72" fill="url(#paint0_linear_1245_66459)" style="fill:url(#paint0_linear_1245_66459)"/>
   <rect x="15.5" y="65.5" width="47" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
-  <path d="m64 186v-50h72v50z" fill="#fff"/>
+  <path d="m64 186v-50h72v50z" fill="#fff" tb:tag="pipe-background"/>
   <path d="m64 186v-50h72v50z" fill="url(#paint1_linear_1245_66459)" style="fill:url(#paint1_linear_1245_66459)"/>
   <path d="m65.5 184.5v-47h69v47z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
   <rect x="1.5" y="51.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" 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"/>
-  <path d="m64 64s30.518 1.7177 50.4 21.6c19.882 19.882 21.6 50.4 21.6 50.4h-72z" fill="#fff"/>
+  <path d="m64 64s30.518 1.7177 50.4 21.6c19.882 19.882 21.6 50.4 21.6 50.4h-72z" fill="#fff" tb:tag="pipe-background"/>
   <path d="m64 64s30.518 1.7177 50.4 21.6c19.882 19.882 21.6 50.4 21.6 50.4h-72z" fill="url(#paint2_linear_1245_66459)" style="fill:url(#paint2_linear_1245_66459)"/>
   <path d="m65.5 134.5v-68.865c0.8334 0.0861 1.9717 0.2211 3.3584 0.4273 3.1196 0.464 7.4889 1.2873 12.47 2.7228 9.9828 2.8767 22.316 8.1809 32.01 17.875 9.695 9.6942 14.999 22.027 17.875 32.01 1.436 4.982 2.259 9.351 2.723 12.471 0.206 1.386 0.341 2.525 0.428 3.358z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
  </g><defs>
diff --git a/application/src/main/data/json/system/scada_symbols/left-flow-meter.svg b/application/src/main/data/json/system/scada_symbols/left-flow-meter.svg
index 2ee093ef30..b1da702871 100644
--- a/application/src/main/data/json/system/scada_symbols/left-flow-meter.svg
+++ b/application/src/main/data/json/system/scada_symbols/left-flow-meter.svg
@@ -51,6 +51,11 @@
       "stateRenderFunction": "var leak = ctx.values.leak;\nif (leak) {\n    element.show();\n} else {\n    element.hide();\n}",
       "actions": null
     },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    },
     {
       "tag": "value",
       "stateRenderFunction": "var value = ctx.values.value;\nctx.api.text(element, value.toFixed(0));\n",
@@ -710,6 +715,22 @@
       "min": null,
       "max": null,
       "step": null
+    },
+    {
+      "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><mask id="path-7-inside-1_1253_89545" fill="white">
@@ -898,7 +919,7 @@
    <circle transform="rotate(-90)" cx="-58.5" cy="95.5" r="9.5" fill="url(#paint55_linear_1182_32781-8)"/>
    <path d="m0 0h172v72h-172z" fill="url(#paint84_linear_1182_32781-8)" stroke-width=".57735"/>
   </pattern>
- </defs><rect transform="rotate(-90)" x="-386" y="264" width="372" height="72" fill="#fff"/><rect transform="rotate(-90)" x="-386" y="264" width="372" height="72" fill="url(#paint0_linear_1310_41909)" style="fill:url(#paint0_linear_1310_41909)"/><rect transform="rotate(-90)" x="-384.5" y="265.5" width="369" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect transform="rotate(90)" x="14" y="-336" width="372" height="72" fill="#1ec1f4" stroke-width="0" style="display: none;" tb:tag="fluid-background"/><rect transform="rotate(90)" x="14" y="-336" width="372" height="72" fill="url(#liquid)" stroke-width="0" style="display: none;" tb:tag="fluid"/><path d="m236 164h28.421l31.579 36-31.579 36h-28.421z" fill="#fff"/><path d="m236 164h28.421l31.579 36-31.579 36h-28.421z" fill="url(#paint1_linear_1310_41909)" style="fill:url(#paint1_linear_1310_41909)"/><path d="m237.5 165.5h26.242l30.263 34.5-30.263 34.5h-26.242z" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect transform="rotate(-90)" x="-398.5" y="251.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" stroke-width="3"/><rect transform="rotate(-90)" x="-12.5" y="251.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" stroke-width="3"/><path transform="translate(-75,75)" d="m325 125c0 69.036-55.964 125-125 125s-125-55.964-125-125 55.964-125 125-125 125 55.964 125 125zm-236.01 0c0 61.306 49.699 111 111.01 111s111-49.699 111-111c0-61.306-49.699-111.01-111-111.01s-111.01 49.699-111.01 111.01z" fill="#4a4848" mask="url(#path-7-inside-1_1253_89545)" stroke="#727171" stroke-width="6" tb:tag="border"/><circle cx="125" cy="200" r="111" fill="#fff" tb:tag="background"/><rect x="44.5" y="180.5" width="161" height="39" rx="3.8571" fill="#4a4848" fill-opacity=".06" tb:tag="border"/><path d="m48.36 179c-2.9419 0-5.3574 2.4155-5.3574 5.3574v31.285c0 2.9419 2.4155 5.3574 5.3574 5.3574h153.29c2.9419 0 5.3574-2.4155 5.3574-5.3574v-31.285c0-2.9419-2.4155-5.3574-5.3574-5.3574zm0 3h153.29c1.3318 0 2.3574 1.0256 2.3574 2.3574v31.285c0 1.3318-1.0256 2.3574-2.3574 2.3574h-153.29c-1.3318 0-2.3574-1.0256-2.3574-2.3574v-31.285c0-1.3318 1.0256-2.3574 2.3574-2.3574z" fill="#4a4848" tb:tag="border"/><circle cx="91" cy="148" r="16" fill="url(#paint2_linear_1253_89545)" style="fill:url(#paint2_linear_1253_89545)"/><circle cx="91" cy="148" r="15.5" stroke="#000" stroke-opacity=".12"/><circle cx="159" cy="148" r="16" fill="url(#paint3_linear_1253_89545)" style="fill:url(#paint3_linear_1253_89545)"/><circle cx="159" cy="148" r="15.5" stroke="#000" stroke-opacity=".12"/><text x="123.96094" y="201.94531" dominant-baseline="middle" fill="#000000" fill-opacity=".87" text-anchor="middle" style="font-family:Roboto;font-size:32px;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:500" tb:tag="value" xml:space="preserve"><tspan>0</tspan></text><text x="124.47363" y="249.4729" dominant-baseline="middle" fill="#000000" fill-opacity=".87" text-anchor="middle" style="font-family:Roboto;font-size:22px;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:500" tb:tag="valueUnits" xml:space="preserve"><tspan>m³/hr</tspan></text><g transform="translate(-75,75.001)" style="display: none;" tb:tag="broken">
+ </defs><rect transform="rotate(-90)" x="-386" y="264" width="372" height="72" fill="#fff" tb:tag="pipe-background"/><rect transform="rotate(-90)" x="-386" y="264" width="372" height="72" fill="url(#paint0_linear_1310_41909)" style="fill:url(#paint0_linear_1310_41909)"/><rect transform="rotate(-90)" x="-384.5" y="265.5" width="369" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect transform="rotate(90)" x="14" y="-336" width="372" height="72" fill="#1ec1f4" stroke-width="0" style="display: none;" tb:tag="fluid-background"/><rect transform="rotate(90)" x="14" y="-336" width="372" height="72" fill="url(#liquid)" stroke-width="0" style="display: none;" tb:tag="fluid"/><path d="m236 164h28.421l31.579 36-31.579 36h-28.421z" fill="#fff" tb:tag="pipe-background"/><path d="m236 164h28.421l31.579 36-31.579 36h-28.421z" fill="url(#paint1_linear_1310_41909)" style="fill:url(#paint1_linear_1310_41909)"/><path d="m237.5 165.5h26.242l30.263 34.5-30.263 34.5h-26.242z" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect transform="rotate(-90)" x="-398.5" y="251.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" stroke-width="3"/><rect transform="rotate(-90)" x="-12.5" y="251.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" stroke-width="3"/><path transform="translate(-75,75)" d="m325 125c0 69.036-55.964 125-125 125s-125-55.964-125-125 55.964-125 125-125 125 55.964 125 125zm-236.01 0c0 61.306 49.699 111 111.01 111s111-49.699 111-111c0-61.306-49.699-111.01-111-111.01s-111.01 49.699-111.01 111.01z" fill="#4a4848" mask="url(#path-7-inside-1_1253_89545)" stroke="#727171" stroke-width="6" tb:tag="border"/><circle cx="125" cy="200" r="111" fill="#fff" tb:tag="background"/><rect x="44.5" y="180.5" width="161" height="39" rx="3.8571" fill="#4a4848" fill-opacity=".06" tb:tag="border"/><path d="m48.36 179c-2.9419 0-5.3574 2.4155-5.3574 5.3574v31.285c0 2.9419 2.4155 5.3574 5.3574 5.3574h153.29c2.9419 0 5.3574-2.4155 5.3574-5.3574v-31.285c0-2.9419-2.4155-5.3574-5.3574-5.3574zm0 3h153.29c1.3318 0 2.3574 1.0256 2.3574 2.3574v31.285c0 1.3318-1.0256 2.3574-2.3574 2.3574h-153.29c-1.3318 0-2.3574-1.0256-2.3574-2.3574v-31.285c0-1.3318 1.0256-2.3574 2.3574-2.3574z" fill="#4a4848" tb:tag="border"/><circle cx="91" cy="148" r="16" fill="url(#paint2_linear_1253_89545)" style="fill:url(#paint2_linear_1253_89545)"/><circle cx="91" cy="148" r="15.5" stroke="#000" stroke-opacity=".12"/><circle cx="159" cy="148" r="16" fill="url(#paint3_linear_1253_89545)" style="fill:url(#paint3_linear_1253_89545)"/><circle cx="159" cy="148" r="15.5" stroke="#000" stroke-opacity=".12"/><text x="123.96094" y="201.94531" dominant-baseline="middle" fill="#000000" fill-opacity=".87" text-anchor="middle" style="font-family:Roboto;font-size:32px;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:500" tb:tag="value" xml:space="preserve"><tspan>0</tspan></text><text x="124.47363" y="249.4729" dominant-baseline="middle" fill="#000000" fill-opacity=".87" text-anchor="middle" style="font-family:Roboto;font-size:22px;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:500" tb:tag="valueUnits" xml:space="preserve"><tspan>m³/hr</tspan></text><g transform="translate(-75,75.001)" style="display: none;" tb:tag="broken">
   <g filter="url(#filter0_b_1281_42354)" style="">
    <circle cx="200" cy="125" r="111" fill="#000" fill-opacity=".24" style=""/>
   </g>
diff --git a/application/src/main/data/json/system/scada_symbols/left-tee-pipe.svg b/application/src/main/data/json/system/scada_symbols/left-tee-pipe.svg
index 89536f8539..a0e01f639b 100644
--- a/application/src/main/data/json/system/scada_symbols/left-tee-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/left-tee-pipe.svg
@@ -40,6 +40,11 @@
       "stateRenderFunction": "var fluid = (ctx.values.leftFluid ||\n             ctx.values.topFluid || ctx.values.bottomFluid) && !ctx.values.leak;\nif (fluid) {\n    element.show();\n} else {\n    element.hide();\n}",
       "actions": null
     },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    },
     {
       "tag": "top-fluid",
       "stateRenderFunction": "var fluid = ctx.values.topFluid && !ctx.values.leak;\n\nif (fluid) {\n    element.show();\n} else {\n    element.hide();\n}",
@@ -553,13 +558,29 @@
       "min": null,
       "max": null,
       "step": null
+    },
+    {
+      "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 clip-path="url(#clip0_1245_66573)">
-  <path d="m64 186v-172h72v172z" fill="#fff"/>
+  <path d="m64 186v-172h72v172z" fill="#fff" tb:tag="pipe-background"/>
   <path d="m64 186v-172h72v172z" fill="url(#paint0_linear_1245_66573)" style="fill:url(#paint0_linear_1245_66442)"/>
   <path d="m65.5 184.5v-169h69v169z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
-  <path d="m14 64h51l35 36-35 36h-51z" fill="#fff"/>
+  <path d="m14 64h51l35 36-35 36h-51z" fill="#fff" tb:tag="pipe-background"/>
   <path d="m14 64h51l35 36-35 36h-51z" fill="url(#paint1_linear_1245_66573)" style="fill:url(#paint1_linear_1245_66442)"/>
   <path d="m15.5 65.5h48.866l33.542 34.5-33.542 34.5h-48.866z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
   <rect x="1.5" y="51.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" stroke-width="3"/>
diff --git a/application/src/main/data/json/system/scada_symbols/left-top-elbow-pipe.svg b/application/src/main/data/json/system/scada_symbols/left-top-elbow-pipe.svg
index 4bc92f1de7..276f3aa004 100644
--- a/application/src/main/data/json/system/scada_symbols/left-top-elbow-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/left-top-elbow-pipe.svg
@@ -29,6 +29,11 @@
       "stateRenderFunction": "var leak = ctx.values.leak;\nif (leak) {\n    element.show();\n} else {\n    element.hide();\n}",
       "actions": null
     },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    },
     {
       "tag": "vertical-fluid",
       "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\n\nif (fluid) {\n    element.show();\n} else {\n    element.hide();\n}\n",
@@ -227,19 +232,35 @@
       "min": null,
       "max": null,
       "step": null
+    },
+    {
+      "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 transform="rotate(90,100,100)" clip-path="url(#clip0_1245_66459)">
-  <rect x="14" y="64" width="50" height="72" fill="#fff"/>
+  <rect x="14" y="64" width="50" height="72" fill="#fff" tb:tag="pipe-background"/>
   <rect x="14" y="64" width="50" height="72" fill="url(#paint0_linear_1245_66459)" style="fill:url(#paint0_linear_1245_66459)"/>
   <rect x="15.5" y="65.5" width="47" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
-  <path class="UnoptimicedTransforms" d="m64 186v-50h72v50z" fill="#fff"/>
+  <path class="UnoptimicedTransforms" d="m64 186v-50h72v50z" fill="#fff" tb:tag="pipe-background"/>
   <path d="m64 186v-50h72v50z" fill="url(#paint1_linear_1245_66459)" style="fill:url(#paint1_linear_1245_66459)"/>
   <path d="m65.5 184.5v-47h69v47z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
   <rect x="1.5" y="51.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" 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"/>
-  <path d="m64 64s30.518 1.7177 50.4 21.6c19.882 19.882 21.6 50.4 21.6 50.4h-72z" fill="#fff"/>
+  <path d="m64 64s30.518 1.7177 50.4 21.6c19.882 19.882 21.6 50.4 21.6 50.4h-72z" fill="#fff" tb:tag="pipe-background"/>
   <path d="m64 64s30.518 1.7177 50.4 21.6c19.882 19.882 21.6 50.4 21.6 50.4h-72z" fill="url(#paint2_linear_1245_66459)" style="fill:url(#paint2_linear_1245_66459)"/>
   <path d="m65.5 134.5v-68.865c0.8334 0.0861 1.9717 0.2211 3.3584 0.4273 3.1196 0.464 7.4889 1.2873 12.47 2.7228 9.9828 2.8767 22.316 8.1809 32.01 17.875 9.695 9.6942 14.999 22.027 17.875 32.01 1.436 4.982 2.259 9.351 2.723 12.471 0.206 1.386 0.341 2.525 0.428 3.358z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
  </g><defs>
diff --git a/application/src/main/data/json/system/scada_symbols/long-horizontal-pipe.svg b/application/src/main/data/json/system/scada_symbols/long-horizontal-pipe.svg
index 26552c56ed..ffc77b0ac0 100644
--- a/application/src/main/data/json/system/scada_symbols/long-horizontal-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/long-horizontal-pipe.svg
@@ -23,6 +23,11 @@
       "tag": "leak",
       "stateRenderFunction": "var leak = ctx.values.leak;\nif (leak) {\n    element.show();\n} else {\n    element.hide();\n}",
       "actions": null
+    },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
     }
   ],
   "behavior": [
@@ -217,9 +222,25 @@
       "min": null,
       "max": null,
       "step": null
+    },
+    {
+      "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><path d="m14 64h372v72h-372v-72z" fill="#fff"/><path d="m14 64h372v72h-372v-72z" fill="url(#paint0_linear_1239_51060)"/><g stroke-width="3">
+}]]></tb:metadata><path d="m14 64h372v72h-372v-72z" fill="#fff" tb:tag="pipe-background"/><path d="m14 64h372v72h-372v-72z" fill="url(#paint0_linear_1239_51060)"/><g stroke-width="3">
   <path d="m15.5 65.5h369v69h-369v-69z" stroke="#000" stroke-opacity=".12"/>
   <rect x="387.5" y="51.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171"/>
   <rect x="1.5" y="51.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171"/>
diff --git a/application/src/main/data/json/system/scada_symbols/long-vertical-pipe.svg b/application/src/main/data/json/system/scada_symbols/long-vertical-pipe.svg
index 85667f89ab..7f4e30edad 100644
--- a/application/src/main/data/json/system/scada_symbols/long-vertical-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/long-vertical-pipe.svg
@@ -23,6 +23,11 @@
       "tag": "leak",
       "stateRenderFunction": "var leak = ctx.values.leak;\nif (leak) {\n    element.show();\n} else {\n    element.hide();\n}",
       "actions": null
+    },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
     }
   ],
   "behavior": [
@@ -217,9 +222,25 @@
       "min": null,
       "max": null,
       "step": null
+    },
+    {
+      "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><path d="m64 386v-372h72v372h-72z" fill="#fff"/><path d="m64 386v-372h72v372h-72z" fill="url(#paint0_linear_1242_51682)"/><g stroke-width="3">
+}]]></tb:metadata><path d="m64 386v-372h72v372h-72z" fill="#fff" tb:tag="pipe-background"/><path d="m64 386v-372h72v372h-72z" fill="url(#paint0_linear_1242_51682)"/><g stroke-width="3">
   <path d="m65.5 384.5v-369h69v369h-69z" stroke="#000" stroke-opacity=".12"/>
   <rect transform="rotate(-90 51.5 398.5)" x="51.5" y="398.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171"/>
   <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"/>
diff --git a/application/src/main/data/json/system/scada_symbols/right-flow-meter.svg b/application/src/main/data/json/system/scada_symbols/right-flow-meter.svg
index f1a823b663..e5df51e561 100644
--- a/application/src/main/data/json/system/scada_symbols/right-flow-meter.svg
+++ b/application/src/main/data/json/system/scada_symbols/right-flow-meter.svg
@@ -51,6 +51,11 @@
       "stateRenderFunction": "var leak = ctx.values.leak;\nif (leak) {\n    element.show();\n} else {\n    element.hide();\n}",
       "actions": null
     },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    },
     {
       "tag": "value",
       "stateRenderFunction": "var value = ctx.values.value;\nctx.api.text(element, value.toFixed(0));\n",
@@ -710,6 +715,22 @@
       "min": null,
       "max": null,
       "step": null
+    },
+    {
+      "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><mask id="path-7-inside-1_1253_89545" fill="white">
@@ -898,7 +919,7 @@
    <circle transform="rotate(-90)" cx="-58.5" cy="95.5" r="9.5" fill="url(#paint55_linear_1182_32781-8)"/>
    <path d="m0 0h172v72h-172z" fill="url(#paint84_linear_1182_32781-8)" stroke-width=".57735"/>
   </pattern>
- </defs><rect transform="rotate(-90)" x="-386" y="64" width="372" height="72" fill="#fff"/><rect transform="rotate(-90)" x="-386" y="64" width="372" height="72" fill="url(#paint0_linear_1310_41907)" style="fill:url(#paint0_linear_1310_41907)"/><rect transform="rotate(-90)" x="-384.5" y="65.5" width="369" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect transform="rotate(90)" x="14" y="-136" width="372" height="72" fill="#1ec1f4" stroke-width="0" style="display: none;" tb:tag="fluid-background"/><rect transform="rotate(90)" x="14" y="-136" width="372" height="72" fill="url(#liquid)" stroke-width="0" style="display: none;" tb:tag="fluid"/><path d="m164 247h-28.421l-31.579-36 31.579-36h28.421z" fill="#fff"/><g style="display: none;" tb:tag="leak">
+ </defs><rect transform="rotate(-90)" x="-386" y="64" width="372" height="72" fill="#fff" tb:tag="pipe-background"/><rect transform="rotate(-90)" x="-386" y="64" width="372" height="72" fill="url(#paint0_linear_1310_41907)" style="fill:url(#paint0_linear_1310_41907)"/><rect transform="rotate(-90)" x="-384.5" y="65.5" width="369" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect transform="rotate(90)" x="14" y="-136" width="372" height="72" fill="#1ec1f4" stroke-width="0" style="display: none;" tb:tag="fluid-background"/><rect transform="rotate(90)" x="14" y="-136" width="372" height="72" fill="url(#liquid)" stroke-width="0" style="display: none;" tb:tag="fluid"/><path d="m164 247h-28.421l-31.579-36 31.579-36h28.421z" fill="#fff" tb:tag="pipe-background"/><g style="display: none;" tb:tag="leak">
   <path d="m93.395 158.47c-0.3006 0-0.7515-7.47-0.7515-7.47l0.1503 7.975s-2.1646 3.412-2.48 7.874c0 5.151 3.3214 32.319 3.4717 33.328v0.202l-0.0751-0.101-3.0812-3.533c0.3006 0.505 5.1535 4.755 6.6281 9.905 0.3757 1.312 1.1272 7.29 1.503 8.098 0.0752 0.202 0.0752 2.782 0.0752 3.085-0.1503 1.11-0.9019 6.624-1.1273 7.331-0.3006 0.909-1.1273 2.827-1.503 2.423-0.3758-0.404-5.4861-10.928-5.8618-11.836-0.3758-0.808-2.1794-10.455-2.48-10.858-0.3006-0.404-2.48-1.313-2.7054-1.414l2.4048 1.515s0.3757 0.807 0.4509 1.716c0.0752 0.908 1.4279 9.243 1.4279 9.243l-2.7055-0.606c0.1503 0.101 1.4862 0.845 2.7638 1.653 0.526 0.303 1 1.5 1.5 2.5s3.3265 8.794 3.7022 9.702c0.3758 0.808 0.1503 2.625-0.4509 4.038s-1.7756 5.034-2.0011 5.942c-0.3006 0.909-2.057 2.538-2.7334 3.043h-0.0751c-0.6764 0.504-1.954 0.605-2.5552 0.303-0.6763-0.404-1.6533-0.303-2.7054-0.606s-4.96-5.653-4.96-5.653 0 0.101 0.0752 0.201c0.3006 0.606 1.503 2.928 2.1794 4.039 0.7515 1.211 1.1272 2.119 1.1272 2.523 0 0.101-0.0751 0.202-0.1503 0.404-0.526 0.606-2.0291 1.817-3.3066 2.726-1.5782 1.11-4.0582 4.442-4.6594 4.946-0.6012 0.505-3.6824-0.706-3.983-0.908 0.3006 0.202 3.0812 1.918 3.4569 2.322l0.0752 0.101c0.1503 0.504-0.3758 1.817-0.9018 3.028-0.6012 1.413-0.6764 5.451-0.977 6.36s-2.7054 6.966-2.8557 7.369c0.1503-0.303 1.4279-2.523 2.5551-4.441 0.3758-0.707 0.7515-1.313 1.0521-1.717 1.2025-1.918 0.6012-0.908 0.8267-2.322 0.2254-1.312 1.0521-4.542 0.977-6.359-0.0752-1.717 0.526-2.726 1.1272-3.635 0.6012-0.908 2.5552-1.615 4.3588-4.038 1.8036-2.422 4.8097-2.725 5.4109-3.23 0.0751-0.101 0.1503-0.101 0.2254-0.101 0.6764-0.101 1.9539 1.312 3.2315 1.918 1.3527 0.707 1.2024 3.029 1.2024 3.836 0.0752 0.909 0.0752 1.313 0.4509 1.716 0.3758 0.404-0.1503 2.726-0.1503 3.534 0.0752 0.908 1.3528 4.34 0.7515 5.249-0.6012 0.909-4.1333-1.413-4.8096-1.312h-0.3006c-0.3758 0.101-0.5261 0.101-1.3527 0.605-0.9019 0.505-2.7055-2.624-2.7806-2.826 0.0751 0.202 0.8266 2.12 1.1272 2.524 0.3006 0.403 0.9018 0.706 0.977 0.807 0 0-0.6012 1.413-0.8267 2.322-0.3006 0.909-1.0521 4.139-1.3527 5.048-0.3006 0.908-1.3728 2.523-2.0492 3.028-0.6012 0.505-3.6274 8.189-4.3037 8.694-0.6012 0.505-0.5593 3.723-0.5593 3.723s1.1071-1.366 1.1071-2.228c0-0.569-0.0218-0.688 0.354-0.991 0.3757-0.302 0.9387-2.102 1.6077-3.564 0.7444-1.625 1.3075-3.878 1.8694-4.322 1.2775-1.009 1.7486-2.12 2.3498-3.028 0.6012-0.909 1.2024-1.514 1.503-2.827 0.2254-1.312 0.4509-3.129 0.7515-4.543 0.2255-1.413 0.977-0.504 1.6533-0.605 0.6764-0.101 0.3006-0.505 0.977-0.505 0.6763-0.101 0.977 0.303 1.3527 0.707 0.0752 0.101 0.1503 0.101 0.2255 0.202 0.6012 0.302 1.8787 0.605 2.4799 1.312 0.6764 0.808 3.7576 7.167 4.1334 8.48 0 0.101 0.0751 0.202 0.0751 0.303 0.0752 0.504 0.1503 1.312 0.0752 2.221-0.0752 1.918-0.3006 4.239-0.6764 5.047-0.6012 1.413-1.7285 4.24-2.7054 4.745-0.977 0.504-2.7055 4.744-3.3067 5.653s-5.6109 10.87-5.2351 11.678c0.3758 0.807-0.3758 4.442-0.5261 8.076-0.0751 1.817-0.4509 3.23-1.1272 4.744-0.6012 1.515-1.4279 3.13-2.2546 5.452-1.6533 4.442-6.6132 9.287-6.989 9.59 0.3006-0.202 2.5551-1.615 3.1563-2.524 0.6013-0.908 1.8037-2.423 1.8037-2.423l-0.5261 2.726s0.8267-2.322 1.1273-3.634c0.2254-1.413 1.2024-1.514 2.4048-4.24 1.1273-2.827 2.9309-6.562 3.2315-7.47 0.3006-0.909 0.5261-1.817 0.8267-2.726s-0.0752-7.067 0.1503-8.48c0.2254-1.413 0.8266-3.23 1.1272-3.23s0.3006 0 1.0522 1.211c0.7515 1.212 0.7515 7.47 0.8266 7.874 0 0.404-0.4509 3.13-0.0751 4.947 0.4509 1.716-0.3758 4.442-0.3758 4.946 0 0.404 0.8267-2.725 0.8267-3.23 0-0.404 0.1503-3.533 0.0751-4.038 0-0.404 0.3758 0.404 0.3758 0.808 0 0.403 1.0521 0.807 1.4278 1.211 0.3758 0.404 2.1043 1.514 3.1564 2.322 1.0521 0.807 3.3066-0.404 3.3066-0.404s-1.6533 0.202-2.3296-0.202c-0.6764-0.404-1.7285-1.11-1.7285-1.615 0-0.404-1.3527-0.303-2.4049-1.918-1.1272-1.615-1.2024-3.029-1.2775-4.745-0.0752-1.817 3.6824-13.764 4.4339-16.159 0.5359-1.708 2.0036-3.292 2.2291-4.604 0.2254-1.413 1.2775-5.956 2.1042-9.086 0.8267-3.23 4.4341-8.479 4.4341-8.479v0.201c0 0.404 0 1.313-0.226 2.019-0.225 0.808-1.653 3.837-1.9536 4.543l-0.0751 0.101 0.0751-0.101c0.0756-0.202 0.3006-0.505 0.5256-0.908 0.226-0.303 0.827-1.212 1.203-1.817 0.15-0.303 0.301-0.505 0.301-0.505 0 0.101-1.122 6.106-0.561 8.563 0.56 2.457 6.873 10.073 6.873 10.073s-5.035-7.971-5.536-10.817c-0.439-2.494-0.207-5.148 0.089-7.648 0.302-2.537 0.788-5.037 0.788-5.219 0-0.403 0.902-1.413 1.202-2.322 0.301-0.908 2.706-4.34 3.382-4.845 0.601-0.505 5.035 1.716 4.735 1.312-0.376-0.404-4.059-1.817-4.134-2.221 0-0.404 0.301-0.504 0.601-0.908 0.301-0.505 3.157-2.524 3.157-3.029 0-0.404 0.676 0.808 1.052 1.212 0.376 0.403 1.728 0.706 2.33 0.605 0.601-0.101 1.277 1.01 1.352 1.212-0.075-0.202-0.751-1.716-1.052-1.615-0.3 0-2.705-1.01-3.081-1.919-0.376-0.807 0.225-1.817 0.451-2.725 0.301-0.909 2.33-2.12 2.63-2.625 0.301-0.505 1.321-2.423 1.998-2.927 0.601-0.505 1.459-3.13 2.136-3.635 0.601-0.504 3.456 1.817 4.734 2.12 1.353 0.303 4.584-0.908 4.584-0.908s-2.63 0.303-3.983 0.404c-1.277 0.1-3.081-1.919-3.156-2.322 0-0.404 0.3-0.909 0.902-1.414 0.601-0.504 2.555-1.211 3.231-1.716 0.601-0.505 1.654-0.606 2.856-1.615 0.827-0.606 1.202-0.909 1.428-1.01-0.451 0.202-1.503 0.606-1.804 0.606-0.3 0-2.254 1.615-2.856 1.615-0.676 0.101-4.509 2.221-6.463 2.524-1.953 0.202-7.74-2.322-8.717-2.12-0.977 0.101-1.578 1.514-2.856 1.615-1.353 0.101-3.757-1.817-4.283-4.845-0.451-2.625 0.751-11.471 1.052-12.783 0-0.101 0-0.101 0.075-0.202v-0.101c-0.075 0.202-1.428 7.735-1.954 9.553-0.526 1.817-1.052 4.34-1.353 4.542-0.3 0-1.728-1.615-2.104-2.423-0.3758-0.807-1.1273-2.523-1.2024-3.836-0.0752-1.312 0.2254-5.817 0.8266-6.725 0.6012-0.909 0.6012-3.186 1.8038-5.609 1.127-2.221 2.555-5.35 2.63-5.653-0.225 0.303-3.307 5.249-3.682 4.845-0.376-0.403 0.887-6.435-1.5784-14.435-3.2392-10.512-2.6914-20.5-3.035-26.5-0.2577-4.5 0.7053-6.697 0.9598-10.113 0-3.412-1.4865-7.854-1.4865-7.854s-1.2776 3.836-1.5782 3.937zm17.389 89.711c0.075 0.404 0.301 1.514 0 1.918-0.376 0.505-0.751 2.12-1.954 2.625-0.977 0.403-2.405 2.927-2.931 3.836-0.15 0.202-0.15 0.302-0.15 0.302-0.376-1.009 0.752-6.258 1.127-6.763 0.376-0.505 1.578 0 1.954-0.505s1.954-1.514 1.954-1.514v0.101zm-0.902-1.515c-0.15 0.101-0.3 0.202-0.375 0.303-0.602 0.505-0.602 1.414-1.203 1.515-0.676 0.101-1.052-0.808-1.428-1.212-0.375-0.404 0.451-3.634 0.451-3.634s2.555-6.461 3.908-6.663c0.376 0 0.752 0 1.052 0.101 0.752 0.202 1.278 0.606 1.954 0.505 0.977-0.101 2.33-0.202 2.029 1.11-0.225 1.313-2.179 2.019-3.682 4.442-1.278 1.918-2.104 2.928-2.706 3.533zm-5.786-10.498c0.375 0.302 0.902 0.706 1.428 1.009 1.352 0.707 2.329 0.606 2.404 1.514 0.076 0.909-0.225 1.818-0.826 3.231-0.301 0.706-0.526 1.413-0.752 2.12-0.225 0.706-0.375 1.11-0.375 1.11s-1.128-1.615-0.827-2.624c0.3-0.909 0.225-1.414-0.075-1.818-0.376-0.403-1.954-5.148-2.029-5.552 0.075 0.101 0.451 0.505 1.052 1.01zm-4.058-3.231c0.375 0.404 1.728 1.615 1.728 1.615v0.101c0.075 0.404 0.526 2.726 1.202 4.24 0.376 0.909 1.278 3.231 1.879 5.654 0.075 0.201 0.151 0.504 0.226 0.706 0.451 1.918 0.751 3.735 0.526 4.846-0.526 2.725-1.654 5.047-1.879 6.864-0.225 1.818 0.15 2.221-0.451 3.635-0.601 1.413-1.202 1.918-2.104 3.331s-1.8789 2.019-2.4801 2.928c-0.3758 0.605-0.451-0.346-0.977-0.346-0.4761-0.569-0.4761-1.139-0.4761-1.139s-0.3506-0.837-0.8015-2.15c-0.3757-1.312-1.962-5.425-1.4128-9.237 0.4822-3.345-0.0192-5.382 0.4359-8.732 0.4906-3.611-0.4219-4.744 1.006-8.076 1.4279-3.23 0.6473-7.571 0.6473-7.571s2.5551 2.927 2.9313 3.331z" fill="#5c5a5a" style=""/>
   <path d="m95.378 270.69c0.3006 0.505 0.6012 1.11 0.6763 1.716 0.1503 1.111 0 2.221-0.1503 3.231-0.6763 4.138-2.029 8.378-4.509 11.003-0.4509 0.505-0.977 1.01-1.3528 1.716-0.9018 1.615-3.9565 4.031-3.8813 6.05-3.3214 6.832-2.0714 14.318-3.875 17.65 0.6012-1.515 1.032-9.001 1.1071-10.818 0.1503-3.533 1.6607-5.693 2.3921-7.74 0.6056-1.695 2.4535-4.132 3.0547-5.041 0.6012-0.908 2.3297-5.148 3.3067-5.653 0.9769-0.505 2.1042-3.331 2.7054-4.745 0.4509-1.413 0.8267-5.754 0.5261-7.369z" fill="#8b8b8b" style=""/>
   <path d="m86.118 243.13c1.3528 0.202 2.7055 0.908 3.7576 2.019 0.2255 0.202 0.4509 0.504 0.5261 0.807 0.3757 0.909 0.1503 2.019 0.2254 3.029 0.0752 0.908 0.3758 1.716 0.4509 2.625 0.0752 0.504 0.0752 1.11 0 1.615-0.0751 1.11-0.4889 1.896 0 3.245 0.6934 0.843 0.6769 2.067 0.6769 3.206 0 0.419 0.1423 0.845-0.3964 0.845-0.4081 0-0.3556-0.216-0.7107-0.276-0.6764-0.202-2.0915-0.937-2.7679-1.139-0.3757-0.101-0.7097-0.531-1.0855-0.632-0.1503 0-0.5261 0-0.6764-0.202h0.3006c0.6764-0.101 3.5693 1.174 4.1705 0.265s-0.0371-3.394-0.1123-4.202c-0.0751-0.908 0.4509-3.129 0.1503-3.533-0.3757-0.404-0.3757-0.808-0.4509-1.716-0.0751-0.909 0.1503-3.13-1.2024-3.836-1.2024-0.707-2.48-2.019-3.2315-1.918 0-0.202 0.2254-0.202 0.3757-0.202z" fill="#8b8b8b" style=""/>
diff --git a/application/src/main/data/json/system/scada_symbols/right-tee-pipe.svg b/application/src/main/data/json/system/scada_symbols/right-tee-pipe.svg
index fec379d6e3..4c84999b1f 100644
--- a/application/src/main/data/json/system/scada_symbols/right-tee-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/right-tee-pipe.svg
@@ -30,6 +30,11 @@
       "stateRenderFunction": "var fluid = (ctx.values.rightFluid ||\n             ctx.values.topFluid || ctx.values.bottomFluid) && !ctx.values.leak;\nif (fluid) {\n    element.show();\n} else {\n    element.hide();\n}",
       "actions": null
     },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    },
     {
       "tag": "right-fluid",
       "stateRenderFunction": "var fluid = ctx.values.rightFluid && !ctx.values.leak;\n\nif (fluid) {\n    element.show();\n} else {\n    element.hide();\n}",
@@ -553,13 +558,29 @@
       "min": null,
       "max": null,
       "step": null
+    },
+    {
+      "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 clip-path="url(#clip0_1245_66636)">
-  <path d="m64 186v-172h72v172z" fill="#fff"/>
+  <path d="m64 186v-172h72v172z" fill="#fff" tb:tag="pipe-background"/>
   <path d="m64 186v-172h72v172z" fill="url(#paint0_linear_1245_66636)" style="fill:url(#paint0_linear_1245_66442)"/>
   <path d="m65.5 184.5v-169h69v169z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
-  <path d="m186 64h-51l-35 36 35 36h51z" fill="#fff"/>
+  <path d="m186 64h-51l-35 36 35 36h51z" fill="#fff" tb:tag="pipe-background"/>
   <path d="m186 64h-51l-35 36 35 36h51z" fill="url(#paint1_linear_1245_66636)" style="fill:url(#paint3_linear_1245_66442)"/>
   <path d="m184.5 65.5h-48.866l-33.542 34.5 33.542 34.5h48.866z" 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"/>
diff --git a/application/src/main/data/json/system/scada_symbols/top-flow-meter.svg b/application/src/main/data/json/system/scada_symbols/top-flow-meter.svg
index 2e5dc69ba7..bac39d98dc 100644
--- a/application/src/main/data/json/system/scada_symbols/top-flow-meter.svg
+++ b/application/src/main/data/json/system/scada_symbols/top-flow-meter.svg
@@ -51,6 +51,11 @@
       "stateRenderFunction": "var leak = ctx.values.leak;\nif (leak) {\n    element.show();\n} else {\n    element.hide();\n}",
       "actions": null
     },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    },
     {
       "tag": "value",
       "stateRenderFunction": "var value = ctx.values.value;\nctx.api.text(element, value.toFixed(0));\n",
@@ -710,9 +715,26 @@
       "min": null,
       "max": null,
       "step": null
+    },
+    {
+      "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><rect x="14" y="264" width="372" height="72" fill="#fff"/><rect x="14" y="264" width="372" height="72" fill="url(#paint0_linear_1253_89545)"/><rect x="15.5" y="265.5" width="369" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect x="14" y="264" width="372" height="72" fill="#1ec1f4" stroke-width="0" style="display: none;" tb:tag="fluid-background"/><rect x="14" y="264" width="372" height="72" fill="url(#liquid)" stroke-width="0" style="display: none;" tb:tag="fluid"/><path d="M236 236V264.421L200 296L164 264.421V236H236Z" fill="#fff"/><path d="M236 236V264.421L200 296L164 264.421V236H236Z" fill="url(#paint1_linear_1253_89545)"/><path d="m234.5 237.5v26.242l-34.5 30.263-34.5-30.263v-26.242h69z" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect x="387.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"/><mask id="path-7-inside-1_1253_89545" fill="white">
+}]]></tb:metadata>
+<rect x="14" y="264" width="372" height="72" fill="#fff" tb:tag="pipe-background"/><rect x="14" y="264" width="372" height="72" fill="url(#paint0_linear_1253_89545)"/><rect x="15.5" y="265.5" width="369" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect x="14" y="264" width="372" height="72" fill="#1ec1f4" stroke-width="0" style="display: none;" tb:tag="fluid-background"/><rect x="14" y="264" width="372" height="72" fill="url(#liquid)" stroke-width="0" style="display: none;" tb:tag="fluid"/><path d="M236 236V264.421L200 296L164 264.421V236H236Z" fill="#fff" tb:tag="pipe-background"/><path d="M236 236V264.421L200 296L164 264.421V236H236Z" fill="url(#paint1_linear_1253_89545)"/><path d="m234.5 237.5v26.242l-34.5 30.263-34.5-30.263v-26.242h69z" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect x="387.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"/><mask id="path-7-inside-1_1253_89545" fill="white">
   <path d="m325 125c0 69.036-55.964 125-125 125s-125-55.964-125-125 55.964-125 125-125 125 55.964 125 125zm-236.01 0c0 61.306 49.699 111 111.01 111s111-49.699 111-111c0-61.306-49.699-111.01-111-111.01s-111.01 49.699-111.01 111.01z"/>
  </mask><path d="m325 125c0 69.036-55.964 125-125 125s-125-55.964-125-125 55.964-125 125-125 125 55.964 125 125zm-236.01 0c0 61.306 49.699 111 111.01 111s111-49.699 111-111c0-61.306-49.699-111.01-111-111.01s-111.01 49.699-111.01 111.01z" fill="#4A4848" mask="url(#path-7-inside-1_1253_89545)" stroke="#727171" stroke-width="6" tb:tag="border"/><circle cx="200" cy="125" r="111" fill="#fff" tb:tag="background"/><rect x="119.5" y="105.5" width="161" height="39" rx="3.8571" fill="#4A4848" fill-opacity=".06" tb:tag="border"/><path d="m123.36 104c-2.9419 0-5.3574 2.4155-5.3574 5.3574v31.285c0 2.9419 2.4155 5.3574 5.3574 5.3574h153.29c2.9419 0 5.3574-2.4155 5.3574-5.3574v-31.285c0-2.9419-2.4155-5.3574-5.3574-5.3574zm0 3h153.29c1.3318 0 2.3574 1.0256 2.3574 2.3574v31.285c0 1.3318-1.0256 2.3574-2.3574 2.3574h-153.29c-1.3318 0-2.3574-1.0256-2.3574-2.3574v-31.285c0-1.3318 1.0256-2.3574 2.3574-2.3574z" fill="#4A4848" tb:tag="border"/><circle cx="166" cy="73" r="16" fill="url(#paint2_linear_1253_89545)"/><circle cx="166" cy="73" r="15.5" stroke="#000" stroke-opacity=".12"/><circle cx="234" cy="73" r="16" fill="url(#paint3_linear_1253_89545)"/><circle cx="234" cy="73" r="15.5" stroke="#000" stroke-opacity=".12"/><defs>
   <linearGradient id="paint0_linear_1253_89545" x1="110.72" x2="110.63" y1="264" y2="336.01" gradientUnits="userSpaceOnUse">
diff --git a/application/src/main/data/json/system/scada_symbols/top-right-elbow-pipe.svg b/application/src/main/data/json/system/scada_symbols/top-right-elbow-pipe.svg
index 4b42727b2e..5537c23bb6 100644
--- a/application/src/main/data/json/system/scada_symbols/top-right-elbow-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/top-right-elbow-pipe.svg
@@ -29,6 +29,11 @@
       "stateRenderFunction": "var leak = ctx.values.leak;\nif (leak) {\n    element.show();\n} else {\n    element.hide();\n}",
       "actions": null
     },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    },
     {
       "tag": "vertical-fluid",
       "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\n\nif (fluid) {\n    element.show();\n} else {\n    element.hide();\n}\n",
@@ -227,19 +232,35 @@
       "min": null,
       "max": null,
       "step": null
+    },
+    {
+      "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 transform="rotate(180,100,100)" clip-path="url(#clip0_1245_66459)">
-  <rect x="14" y="64" width="50" height="72" fill="#fff"/>
+  <rect x="14" y="64" width="50" height="72" fill="#fff" tb:tag="pipe-background"/>
   <rect x="14" y="64" width="50" height="72" fill="url(#paint0_linear_1245_66459)" style="fill:url(#paint0_linear_1245_66459)"/>
   <rect x="15.5" y="65.5" width="47" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
-  <path d="m64 186v-50h72v50z" fill="#fff"/>
+  <path d="m64 186v-50h72v50z" fill="#fff" tb:tag="pipe-background"/>
   <path d="m64 186v-50h72v50z" fill="url(#paint1_linear_1245_66459)" style="fill:url(#paint1_linear_1245_66459)"/>
   <path d="m65.5 184.5v-47h69v47z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
   <rect x="1.5" y="51.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" 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"/>
-  <path d="m64 64s30.518 1.7177 50.4 21.6c19.882 19.882 21.6 50.4 21.6 50.4h-72z" fill="#fff"/>
+  <path d="m64 64s30.518 1.7177 50.4 21.6c19.882 19.882 21.6 50.4 21.6 50.4h-72z" fill="#fff" tb:tag="pipe-background"/>
   <path d="m64 64s30.518 1.7177 50.4 21.6c19.882 19.882 21.6 50.4 21.6 50.4h-72z" fill="url(#paint2_linear_1245_66459)" style="fill:url(#paint2_linear_1245_66459)"/>
   <path d="m65.5 134.5v-68.865c0.8334 0.0861 1.9717 0.2211 3.3584 0.4273 3.1196 0.464 7.4889 1.2873 12.47 2.7228 9.9828 2.8767 22.316 8.1809 32.01 17.875 9.695 9.6942 14.999 22.027 17.875 32.01 1.436 4.982 2.259 9.351 2.723 12.471 0.206 1.386 0.341 2.525 0.428 3.358z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
  </g><defs>
diff --git a/application/src/main/data/json/system/scada_symbols/top-tee-pipe.svg b/application/src/main/data/json/system/scada_symbols/top-tee-pipe.svg
index 11e6595e5c..1dfa27e706 100644
--- a/application/src/main/data/json/system/scada_symbols/top-tee-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/top-tee-pipe.svg
@@ -30,6 +30,11 @@
       "stateRenderFunction": "var fluid = (ctx.values.leftFluid || ctx.values.rightFluid ||\n             ctx.values.topFluid) && !ctx.values.leak;\nif (fluid) {\n    element.show();\n} else {\n    element.hide();\n}",
       "actions": null
     },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    },
     {
       "tag": "right-fluid",
       "stateRenderFunction": "var fluid = ctx.values.rightFluid && !ctx.values.leak;\n\nif (fluid) {\n    element.show();\n} else {\n    element.hide();\n}",
@@ -553,13 +558,29 @@
       "min": null,
       "max": null,
       "step": null
+    },
+    {
+      "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 transform="translate(-4)" clip-path="url(#clip0_1245_66653)">
-  <path d="m18 64h172v72h-172z" fill="#fff"/>
+  <path d="m18 64h172v72h-172z" fill="#fff" tb:tag="pipe-background"/>
   <path d="m18 64h172v72h-172z" fill="url(#paint0_linear_1245_66653)" style="fill:url(#paint0_linear_1245_66653)"/>
   <path d="m19.5 65.5h169v69h-169z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
-  <path d="m140 14v51l-36 35-36-35v-51z" fill="#fff"/>
+  <path d="m140 14v51l-36 35-36-35v-51z" fill="#fff" tb:tag="pipe-background"/>
   <path d="m140 14v51l-36 35-36-35v-51z" fill="url(#paint1_linear_1245_66653)" style="fill:url(#paint1_linear_1245_66653)"/>
   <path d="m138.5 15.5v48.866l-34.5 33.542-34.5-33.542v-48.866z" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
   <rect x="5.5" y="51.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" stroke-width="3"/>
diff --git a/application/src/main/data/json/system/scada_symbols/vertical-inline-flow-meter.svg b/application/src/main/data/json/system/scada_symbols/vertical-inline-flow-meter.svg
index 01d4e9611d..1c22c8d117 100644
--- a/application/src/main/data/json/system/scada_symbols/vertical-inline-flow-meter.svg
+++ b/application/src/main/data/json/system/scada_symbols/vertical-inline-flow-meter.svg
@@ -51,6 +51,11 @@
       "stateRenderFunction": "var leak = ctx.values.leak;\nif (leak) {\n    element.show();\n} else {\n    element.hide();\n}",
       "actions": null
     },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
+    },
     {
       "tag": "value",
       "stateRenderFunction": "var value = ctx.values.value;\nctx.api.text(element, value.toFixed(0));\n",
@@ -710,9 +715,26 @@
       "min": null,
       "max": null,
       "step": null
+    },
+    {
+      "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><rect transform="rotate(-90)" x="-386" y="64" width="372" height="72" fill="#fff"/><rect transform="rotate(-90)" x="-386" y="64" width="372" height="72" fill="url(#paint0_linear_1595_101503)" style="fill:url(#paint0_linear_1595_101503)"/><rect transform="rotate(-90)" x="-384.5" y="65.5" width="369" height="69" 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"/><rect transform="rotate(-90)" x="-398.5" y="51.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" stroke-width="3"/><rect transform="rotate(90)" x="14" y="-136" width="372" height="72" fill="#1ec1f4" stroke-width="0" style="display: none;" tb:tag="fluid-background"/><rect transform="rotate(90)" x="14" y="-136" width="372" height="72" fill="url(#liquid)" stroke-width="0" style="display: none;" tb:tag="fluid"/><defs>
+}]]></tb:metadata>
+<rect transform="rotate(-90)" x="-386" y="64" width="372" height="72" fill="#fff" tb:tag="pipe-background"/><rect transform="rotate(-90)" x="-386" y="64" width="372" height="72" fill="url(#paint0_linear_1595_101503)" style="fill:url(#paint0_linear_1595_101503)"/><rect transform="rotate(-90)" x="-384.5" y="65.5" width="369" height="69" 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"/><rect transform="rotate(-90)" x="-398.5" y="51.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" stroke-width="3"/><rect transform="rotate(90)" x="14" y="-136" width="372" height="72" fill="#1ec1f4" stroke-width="0" style="display: none;" tb:tag="fluid-background"/><rect transform="rotate(90)" x="14" y="-136" width="372" height="72" fill="url(#liquid)" stroke-width="0" style="display: none;" tb:tag="fluid"/><defs>
   <mask id="path-5-inside-1_1595_102361" fill="#ffffff">
    <path d="m300 100c0 55.228-44.772 100-100 100s-100-44.772-100-100 44.772-100 100-100 100 44.772 100 100zm-188 0c0 48.603 39.401 88.004 88.004 88.004s88.004-39.401 88.004-88.004c0-48.604-39.401-88.004-88.004-88.004s-88.004 39.401-88.004 88.004z"/>
   </mask>
diff --git a/application/src/main/data/json/system/scada_symbols/vertical-pipe.svg b/application/src/main/data/json/system/scada_symbols/vertical-pipe.svg
index 479fc89f5a..18ea6837e0 100644
--- a/application/src/main/data/json/system/scada_symbols/vertical-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/vertical-pipe.svg
@@ -23,6 +23,11 @@
       "tag": "leak",
       "stateRenderFunction": "var leak = ctx.values.leak;\nif (leak) {\n    element.show();\n} else {\n    element.hide();\n}",
       "actions": null
+    },
+    {
+      "tag": "pipe-background",
+      "stateRenderFunction": "var color = ctx.properties.pipeColor;\nelement.attr({fill: color});",
+      "actions": null
     }
   ],
   "behavior": [
@@ -217,9 +222,26 @@
       "min": null,
       "max": null,
       "step": null
+    },
+    {
+      "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><path d="m64 186v-172h72v172h-72z" fill="#fff"/><path d="m64 186v-172h72v172h-72z" fill="url(#paint0_linear_1245_55957)"/><g stroke-width="3">
+}]]></tb:metadata>
+<path d="m64 186v-172h72v172h-72z" fill="#fff" tb:tag="pipe-background"/><path d="m64 186v-172h72v172h-72z" fill="url(#paint0_linear_1245_55957)"/><g stroke-width="3">
   <path d="m65.5 184.5v-169h69v169h-69z" stroke="#000" stroke-opacity=".12"/>
   <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"/>
   <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"/>
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index da6106142a..0bdc8b6acd 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3676,6 +3676,7 @@
             "leak-hint": "Indicates whether is leak present in pipe.",
             "leak-present": "Leak present",
             "fluid-color": "Fluid color",
+            "pipe-color": "Pipe color",
             "horizontal-pipe": "Horizontal pipe",
             "vertical-pipe": "Vertical pipe",
             "horizontal-fluid-color": "Horizontal fluid color",