Water Tank Level Visualization

Dashboard
4

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

image

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