# Water Tank Level Visualization

**URL:** <https://discourse.nodered.org/t/water-tank-level-visualization/83079>\
**Category:** Dashboard\
**Created:** [22 November 2023 09:13 UTC](https://discourse.nodered.org/t/water-tank-level-visualization/83079 "2023-11-22T09:13:58Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![s3m1s0n1c](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/s3m1s0n1c/32/72002_2.png) [@s3m1s0n1c](https://discourse.nodered.org/u/s3m1s0n1c)\
**Post date:** [22 November 2023 09:13 UTC](https://discourse.nodered.org/t/water-tank-level-visualization/83079/1 "2023-11-22T09:13:58Z")

</div>

Hey Brains Trust,

I'm currently building a Water Tank monitoring for my oldies..  
Trying to make a easy for them to understand with a easy visual representation on how full the water tank is.

Is there a way I can use this image below and fill in the picture with blue with the % giving from the data?

[https://www.clipartmax.com/png/full/455-4555658\_agua-clip-art.png](https://www.clipartmax.com/png/full/455-4555658_agua-clip-art.png)

Json Data:

```auto
{"totalVolume":75030,"filledVolume":33634,"emptyVolume":41396,"usableVolume":75030,"usableFilledVolume":33634,"usableEmptyVolume":41396,"fillPercentage":45,"emptyPercentage":55,"usableFillPercentage":45,"usableEmptyPercentage":55}

```

Thanks  
Sonic/Ryan

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [22 November 2023 09:19 UTC](https://discourse.nodered.org/t/water-tank-level-visualization/83079/2 "2023-11-22T09:19:36Z")

</div>

Hi @s3m1s0n1c,

You want to cash in on the skills of @hotNipi,  
and his work.  
[https://flows.nodered.org/user/hotnipi](https://flows.nodered.org/user/hotnipi)

Many examples of tanks/gauges etc etc on the forums created by @hotNipi

**EDIT**  
See : [Profile - hotNipi - Node-RED Forum](https://discourse.nodered.org/u/hotnipi/activity/topics)

---

<div class="post-metadata">

**Author:** ![s3m1s0n1c](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/s3m1s0n1c/32/72002_2.png) [@s3m1s0n1c](https://discourse.nodered.org/u/s3m1s0n1c)\
**Post date:** [22 November 2023 10:54 UTC](https://discourse.nodered.org/t/water-tank-level-visualization/83079/3 "2023-11-22T10:54:46Z")

</div>

Thanks @marcus-j-davies

Will check it out 🙂

Thanks Sonic

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [22 November 2023 11:10 UTC](https://discourse.nodered.org/t/water-tank-level-visualization/83079/4 "2023-11-22T11:10:46Z")

</div>

With such image it goes kind of complicated.  
Simple but well readable with `ui_template`

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/a/5afa0cc427bd9729f83f2828e7ad456bae64bbcd.png)

```auto
<style>
    .wrapper{
        position: absolute;
        width: 90%;
        height: 90%;
        margin: auto;
        inset: 0;
        overflow:hidden;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
    }
    .txt{
        position: absolute;
        width: 100%;
        top: 45%;
        text-align: center;
        font-size: xx-large;
        font-weight: 700;
        user-select: none;
    }
    .frame{
        position: absolute;
        width: 100%;
        height: 100%;
        margin: auto;
        inset: 0;
        outline: 5px solid;
        outline-offset:-5px;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
    }
    .fluid{
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 0;
        background: #00a8ff;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
    }
</style>

<div class="wrapper">
    <div class="fluid" style="height:{{msg.payload}}%"></div>    
    <div class="frame"></div>
    <div class="txt">{{msg.payload}}%</div>
</div>

```

---

<div class="post-metadata">

**Author:** ![s3m1s0n1c](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/s3m1s0n1c/32/72002_2.png) [@s3m1s0n1c](https://discourse.nodered.org/u/s3m1s0n1c)\
**Post date:** [22 November 2023 23:36 UTC](https://discourse.nodered.org/t/water-tank-level-visualization/83079/5 "2023-11-22T23:36:55Z")

</div>

That is Awesome @hotNipi

That will work great...

Thank you 🙂

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [23 November 2023 05:56 UTC](https://discourse.nodered.org/t/water-tank-level-visualization/83079/6 "2023-11-23T05:56:06Z")

</div>

Hi @s3m1s0n1c,

There is no way on earth I can beat the widgets from @hotNipi ...

But just for completeness, I have written a [tutorial](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Display-partially-filled-shapes) recently about partially filled shapes using SVG. But yes, not as fancy as the example above.

Bart

---

<div class="post-metadata">

**Author:** ![jackcarey](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jackcarey/32/61101_2.png) [@jackcarey](https://discourse.nodered.org/u/jackcarey)\
**Post date:** [23 November 2023 10:21 UTC](https://discourse.nodered.org/t/water-tank-level-visualization/83079/7 "2023-11-23T10:21:12Z")

</div>

It should be noted for others looking at complicated shapes that CSS can do image masking and there are good resources out there for it:

- W3 Schools: [CSS Masking - The mask-image Property](https://www.w3schools.com/css/css3_masking.asp)
- CSS Tricks: [Clipping and Masking in CSS | CSS-Tricks - CSS-Tricks](https://css-tricks.com/clipping-masking-css/)
- MDN: [mask-image - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [23 November 2023 10:28 UTC](https://discourse.nodered.org/t/water-tank-level-visualization/83079/8 "2023-11-23T10:28:49Z")

</div>

With that area of CSS the one should then accept all the challenges with older (most commonly IOS) browsers/devices thus it is common to have some old screens dedicated to display some kind of home dashboard.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [23 November 2023 11:04 UTC](https://discourse.nodered.org/t/water-tank-level-visualization/83079/9 "2023-11-23T11:04:58Z")

</div>

This reminds me of the recent discussion on using colour to show temperature at different levels in a tank.

I'm pondering CSS color/transparency for the different levels as a different approach.

It would be interesting to compare the different approaches to display the level in @s3m1s0n1c's tank image.

> [@hotNipi](#):
>
> all the challenges with older (most commonly IOS) browsers

Hmm. If Apple wanted me to design for Safari, they'd port it to Linux and Windows like they used to!

---

<div class="post-metadata">

**Author:** ![OriolFM](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/oriolfm/32/30710_2.png) [@OriolFM](https://discourse.nodered.org/u/OriolFM)\
**Post date:** [4 December 2023 16:07 UTC](https://discourse.nodered.org/t/water-tank-level-visualization/83079/10 "2023-12-04T16:07:16Z")

</div>

If you want it even easier to implement, you can consider the round gauge widget. I use it for chemical tanks:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/b/1b99efc25e83b59e9ee2d175f8a066bd2b94b15a.png)

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [5 December 2023 16:10 UTC](https://discourse.nodered.org/t/water-tank-level-visualization/83079/11 "2023-12-05T16:10:03Z")

</div>

Built in Default Level guage in dashboard.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/3/131fcd293a8d10e7ceda1c2a8976bf9ed389cdf1.png)

```auto
[{"id":"4b438d01afcd708b","type":"inject","z":"ae4889735061574b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"10","payloadType":"num","x":320,"y":180,"wires":[["c54d2bc07606309c"]]},{"id":"6164a0cc4a012d60","type":"ui_gauge","z":"ae4889735061574b","name":"","group":"833d4cbc08a98b24","order":1,"width":6,"height":6,"gtype":"wave","title":"Tank Level","label":"%","format":"{{value}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","diff":false,"className":"","x":520,"y":130,"wires":[]},{"id":"7eb1fd6f85e4421a","type":"ui_slider","z":"ae4889735061574b","name":"","label":"slider","tooltip":"","group":"833d4cbc08a98b24","order":5,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"100","step":"5","className":"","x":320,"y":130,"wires":[["6164a0cc4a012d60"]]},{"id":"c54d2bc07606309c","type":"ui_gauge","z":"ae4889735061574b","name":"","group":"833d4cbc08a98b24","order":2,"width":6,"height":6,"gtype":"wave","title":"Tank Level","label":"%","format":"{{value}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","diff":false,"className":"","x":520,"y":180,"wires":[]},{"id":"2e33dbd4517886c8","type":"ui_gauge","z":"ae4889735061574b","name":"","group":"833d4cbc08a98b24","order":3,"width":6,"height":6,"gtype":"wave","title":"Tank Level","label":"%","format":"{{value}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","diff":false,"className":"","x":520,"y":230,"wires":[]},{"id":"b76a8be3c49ce517","type":"ui_gauge","z":"ae4889735061574b","name":"","group":"833d4cbc08a98b24","order":4,"width":6,"height":6,"gtype":"wave","title":"Tank Level","label":"%","format":"{{value}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","diff":false,"className":"","x":520,"y":270,"wires":[]},{"id":"d9965b0e9227255f","type":"inject","z":"ae4889735061574b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"25","payloadType":"num","x":320,"y":230,"wires":[["2e33dbd4517886c8"]]},{"id":"89415e06023639e7","type":"inject","z":"ae4889735061574b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"75","payloadType":"num","x":320,"y":270,"wires":[["b76a8be3c49ce517"]]},{"id":"833d4cbc08a98b24","type":"ui_group","name":"LEVEL","tab":"fb48ae21810a7ddc","order":3,"disp":false,"width":24,"collapse":false,"className":""},{"id":"fb48ae21810a7ddc","type":"ui_tab","name":"TEST","icon":"dashboard","order":7,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![OriolFM](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/oriolfm/32/30710_2.png) [@OriolFM](https://discourse.nodered.org/u/OriolFM)\
**Post date:** [6 December 2023 09:49 UTC](https://discourse.nodered.org/t/water-tank-level-visualization/83079/12 "2023-12-06T09:49:56Z")

</div>

Nice! I'll give it a try too! 🙂

---

<div class="post-metadata">

**Author:** ![s3m1s0n1c](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/s3m1s0n1c/32/72002_2.png) [@s3m1s0n1c](https://discourse.nodered.org/u/s3m1s0n1c)\
**Post date:** [6 December 2023 10:02 UTC](https://discourse.nodered.org/t/water-tank-level-visualization/83079/13 "2023-12-06T10:02:27Z")

</div>

I ended up using @hotNipi's example..

I tried doing some like @smanjunath211 but likes @hotNipi 's better

Luvin all the discussion tho..

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [6 December 2023 10:43 UTC](https://discourse.nodered.org/t/water-tank-level-visualization/83079/14 "2023-12-06T10:43:52Z")

</div>

Glad you could solve your issues

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [5 January 2024 10:44 UTC](https://discourse.nodered.org/t/water-tank-level-visualization/83079/15 "2024-01-05T10:44:22Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.