# 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:** 1
**Showing post:** 4

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

```

---

_[View the full topic](https://discourse.nodered.org/t/water-tank-level-visualization/83079)._