Water Tank Level Visualization

[s3m1s0n1c]

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

Json Data:

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

Thanks
Sonic/Ryan

[marcus-j-davies]

Hi @s3m1s0n1c,

You want to cash in on the skills of @hotNipi,
and his work.
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

[s3m1s0n1c]

Thanks @marcus-j-davies

Will check it out

Thanks Sonic

[hotNipi]

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

<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>

[s3m1s0n1c]

That is Awesome @hotNipi

That will work great...

Thank you

[BartButenaers]

Hi @s3m1s0n1c,

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

But just for completeness, I have written a tutorial recently about partially filled shapes using SVG. But yes, not as fancy as the example above.

Bart

[jackcarey]

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
• CSS Tricks: Clipping and Masking in CSS | CSS-Tricks - CSS-Tricks
• MDN: mask-image - CSS: Cascading Style Sheets | MDN

[hotNipi]

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.

[jbudd]

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!

[OriolFM]

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

[smanjunath211]

Built in Default Level guage in dashboard.

[{"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}]

[OriolFM]

Nice! I'll give it a try too!

[s3m1s0n1c]

I ended up using @hotNipi's example..

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

Luvin all the discussion tho..

[smanjunath211]

Glad you could solve your issues