# Tank level indication inside of ui-template(v2)

**URL:** <https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [20 March 2024 16:03 UTC](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595 "2024-03-20T16:03:53Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![olab](https://avatars.discourse-cdn.com/v4/letter/o/d07c76/32.png) [@olab](https://discourse.nodered.org/u/olab)\
**Post date:** [20 March 2024 16:03 UTC](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595/1 "2024-03-20T16:03:53Z")

</div>

I need to put a tank level indication or ui-gauge inside of a ui-template. Does anyone have a idea on how to achieve that?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [20 March 2024 20:46 UTC](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595/2 "2024-03-20T20:46:27Z")

</div>

> [@Gauge's for Dashboard 2.0 made with ui\_template](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955):
>
> Type linear, round, vertical, or artless. 
> 
> > **Code is HERE**
> >
> > TEMPLATE: \<template\> \<div\> \<template v-if="type === 'round'"\> \<div ref="hng" class="round-led-level" :style="`--size:${size}; --shadow:${shadow}; --ledsize:${ledSize};`"\> \<header\> \<div class="round-led-level-text"\> \<span class="round-led-level-label"\>…

---

<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:** [21 March 2024 07:46 UTC](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595/3 "2024-03-21T07:46:45Z")

</div>

Or a bit more "tank like" level widget

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/4/44728e318d3238404e9c4e6746f88cba5fc0c0bc.png)

> **Code is HERE**
>
> ```auto
> <script>
> export default{
> data(){
> return {
> min:0,
> max:6.5,
> label:"Second Tank",
> unit:"m³",
> showMax:true,
> maxLabel:"Max",
> value:0
> }
> }
> }
> </script>
>     
> <template>
> <div class="wrapper">
> <div class="tank">
> <div class="fluid" :style="{'height':percentage}"></div>
> <div class="frame"></div>
> <p class="txt">{{formattedValue}}<span>{{unit}}</span></p>
> <p class="label">{{label}}</p>
> <p v-if="showMax" class="limit"><span>{{maxLabel}}</span>{{max}}{{unit}}</p>
> </div>
> <div>
> </template>
> 
> <script>
> export default{        
> methods:{
> getElement: function(name,base){
> if(base){
> return this.$refs[name]
> }
> return this.$refs[name][0]
> },
> validate: function(data){
> let ret
> if(typeof data !== "number"){
> ret = parseFloat(data)
> if(isNaN(ret)){
> console.log("BAD DATA! gauge id:",this.id,"data:",data)
> ret = null
> }
> }
> else{
> ret = data
> }
> return ret
> }
> },
> computed: {
> formattedValue: function () {
> return this.value.toFixed(2)
> },
> percentage: function(){
> return Math.floor(((this.value - this.min) / (this.max - this.min)) * 100)+"%";
> }
> },
> watch: {
> msg: function(){            
> const v = this.validate(this.msg.payload)           
> this.value = v                         
> }
> }    
> }    
> </script>
> <style>
> .wrapper{
> position:relative;
> --border:3px;
> --corner:30px;
> --fluidColor:#00a8ff;
> }
> .tank {
> position: absolute;
> width: 100%;
> height: 100%;
> margin: auto;
> inset: 0;
> overflow: hidden;
> border-bottom-left-radius: var(--corner);
> border-bottom-right-radius: var(--corner);
> }
> .tank .txt {
> position: relative;
> width: 100%;
> top: 55%;
> text-align: center;
> font-size: x-large;
> font-weight: 700;
> user-select: none;
> }
> .tank .txt span {
> font-size: small;
> display: contents;
> }
> .tank .label {
> position: absolute;
> width: 100%;
> top: 20%;
> text-align: center;
> font-size: 1rem;        
> user-select: none;
> }
> .tank .limit {
> position: absolute;
> top: 1ch;
> right: 1ch;
> text-align: end;
> font-size: smaller;
> opacity:.7;
> user-select: none;
> }
> .tank .limit span {
> padding-right:0.5ch;
> }
> .tank .frame {
> position: absolute;
> width: calc(100% - var(--border));
> height:calc(100% - var(--border));
> margin: auto;
> inset: 0;
> outline: var(--border) solid;     
> border-bottom-left-radius: var(--corner);
> border-bottom-right-radius: var(--corner);
> }
> 
> .tank .fluid {
> position: absolute;
> width: 100%;
> height:100%;
> bottom: 0;
> background: var(--fluidColor);
> border-bottom-left-radius: var(--corner);
> border-bottom-right-radius: var(--corner);
> }
> </style>
> 
> ```

---

<div class="post-metadata">

**Author:** ![olab](https://avatars.discourse-cdn.com/v4/letter/o/d07c76/32.png) [@olab](https://discourse.nodered.org/u/olab)\
**Post date:** [21 March 2024 08:53 UTC](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595/4 "2024-03-21T08:53:40Z")

</div>

Thank you @hotNipi, this is exactly what I wan't.

But, what is I need multiple tanks?

Kind regards

O

---

<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:** [21 March 2024 08:54 UTC](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595/5 "2024-03-21T08:54:24Z")

</div>

Multiple in one widget?

---

<div class="post-metadata">

**Author:** ![olab](https://avatars.discourse-cdn.com/v4/letter/o/d07c76/32.png) [@olab](https://discourse.nodered.org/u/olab)\
**Post date:** [21 March 2024 12:03 UTC](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595/6 "2024-03-21T12:03:02Z")

</div>

In the same widget.

Btw the number is 10 tanks....

O

---

<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:** [21 March 2024 13:39 UTC](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595/7 "2024-03-21T13:39:19Z")

</div>

Multitank

> **Code**
>
> ```auto
> <script>
> export default{
> data(){
> return {
> config:[
> {
> label:"First Tank",
> topic:"first",
> min:0,
> max:20                                        
> },
> {
> label:"Second Tank",
> topic:"second",
> min:0,
> max:6.5                       
> }
> ],
> unit:"m³",
> showMax:true,
> maxLabel:"Max",
> values:[]
> }
> }
> }
> </script>
>     
> <template>
> <div class="multitank-wrapper">
> <div v-for="tank in config" class="multitank">
> <div class="fluid" :style="{'height':percentage(tank.topic)}"></div>
> <div class="frame"></div>
> <p class="txt">{{formattedValue(tank.topic)}}<span>{{unit}}</span></p>
> <p class="label">{{tank.label}}</p>
> <p v-if="showMax" class="limit"><span>{{maxLabel}}</span>{{tank.max}}{{unit}}</p>
> </div>
> </div>
> </template>
> 
> <script>
> export default{        
> methods:{           
> validate: function(data){
> let ret
> if(typeof data !== "number"){
> ret = parseFloat(data)
> if(isNaN(ret)){
> console.log("BAD DATA! gauge id:",this.id,"data:",data)
> ret = null
> }
> }
> else{
> ret = data
> }
> return ret
> },
> formattedValue: function (t) {
> if(!this.values[t]){
> return ""
> }
> return this.values[t].toFixed(2)
> },
> getLimit(t,max){
> const c = this.config.find(e => e.topic == t)
> if(max){
> return c.max
> }
> else{
> return c.min
> }
> },
> percentage: function(t){
> if(!this.values[t]){
> return "0%"
> }
> return Math.floor(((this.values[t] - this.getLimit(t)) / (this.getLimit(t,true) - this.getLimit(t))) * 100)+"%";
> }
> },        
> watch: {
> msg: function(){                     
> const v = this.validate(this.msg.payload)
> const t = this.msg.topic
> if(v == null || t == undefined || t == ""){
> return
> }                           
> this.values[t] = v          
> }
> }
> }    
> </script>
> <style>
> .multitank-wrapper{
> position:relative;
> --border:3px;
> --corner:30px;
> --fluidColor:#00a8ff;
> display:grid;
> grid-template-columns: repeat(5, minmax(12ch, auto));
> gap:1rem;
> }
> .multitank {
> position: relative;
> width: 100%;
> height: 100%;
> margin: auto;
> inset: 0;
> overflow: hidden;
> border-bottom-left-radius: var(--corner);
> border-bottom-right-radius: var(--corner);
> }
> .multitank .txt {
> position: relative;
> width: 100%;
> top: 55%;
> text-align: center;
> font-size: x-large;
> font-weight: 700;
> user-select: none;
> }
> .multitank .txt span {
> font-size: small;
> display: contents;
> }
> .multitank .label {
> position: absolute;
> width: 100%;
> top: 20%;
> text-align: center;
> font-size: 1rem;        
> user-select: none;
> }
> .multitank .limit {
> position: absolute;
> top: 1ch;
> right: 1ch;
> text-align: end;
> font-size: smaller;
> opacity:.7;
> user-select: none;
> }
> .multitank .limit span {
> padding-right:0.5ch;
> }
> .multitank .frame {
> position: absolute;
> width: calc(100% - var(--border));
> height:calc(100% - var(--border));
> margin: auto;
> inset: 0;
> outline: var(--border) solid;     
> border-bottom-left-radius: var(--corner);
> border-bottom-right-radius: var(--corner);
> }
> 
> .multitank .fluid {
> position: absolute;
> width: 100%;
> height:100%;
> bottom: 0;
> background: var(--fluidColor);
> border-bottom-left-radius: var(--corner);
> border-bottom-right-radius: var(--corner);
> }
> </style>
> 
> ```

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [21 March 2024 16:16 UTC](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595/8 "2024-03-21T16:16:37Z")

</div>

> [@olab](#):
>
> But, what is I need multiple tanks?

Why not put multiple (single) tank widgets in one group

---

<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:** [21 March 2024 18:09 UTC](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595/9 "2024-03-21T18:09:15Z")

</div>

Same as we don't expect the bar chart to be widget per bar.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [21 March 2024 18:39 UTC](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595/10 "2024-03-21T18:39:38Z")

</div>

No one expected the Inquisition.

---

<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:** [21 March 2024 18:53 UTC](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595/11 "2024-03-21T18:53:44Z")

</div>

Not too often, but still, from time to time, there are flashes of thoughts with deep meaning that my gray brain cells cannot reach.

---

<div class="post-metadata">

**Author:** ![olab](https://avatars.discourse-cdn.com/v4/letter/o/d07c76/32.png) [@olab](https://discourse.nodered.org/u/olab)\
**Post date:** [22 March 2024 06:22 UTC](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595/12 "2024-03-22T06:22:52Z")

</div>

Totally there are 7 pages with 10 tanks in each. Totally 70 instances of an tank. I wan't to make the code reuseable and thats the reason I don't want to use multiple widget in one group.

If it was possible to put 7 instances into a group and then use this group as a complete object it would have worked. So far I haven't found a way to do so....

O

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [22 March 2024 06:37 UTC](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595/13 "2024-03-22T06:37:35Z")

</div>

> [@olab](#):
>
> If it was possible to put 7 instances into a group and then use this group as a complete object it would have worked. So far I haven't found a way to do so.

If you are happy living on the bleeding edge, node-red v4 beta and latest dashboard 2.0 have early support for UI nodes in subflows.

---

<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 March 2024 06:48 UTC](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595/14 "2024-03-22T06:48:09Z")

</div>

> [@olab](#):
>
> If it was possible to put 7 instances into a group

Well the multitank code I have shared has no limits, You can put all in one, just you have to configure topic and label + min/max per item and manage how they arrange in rows / columns.

---

<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:** [22 March 2024 06:50 UTC](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595/15 "2024-03-22T06:50:51Z")

</div>

Happy Birthday @Steve-Mcl .

the widget array feature in FlexDash by @tve was a good one. Is it similar ?

> [@rocket \[FlexDash\] alpha release - a dashboard for Node-RED](https://discourse.nodered.org/t/flexdash-alpha-release-a-dashboard-for-node-red/65861/33):
>
> I will update and check. I am loving the widget array feature, i wanted to have 20 gauges in a row, and it was possible with just one gauge node on the editor. Excellent feature.

---

<div class="post-metadata">

**Author:** ![olab](https://avatars.discourse-cdn.com/v4/letter/o/d07c76/32.png) [@olab](https://discourse.nodered.org/u/olab)\
**Post date:** [22 March 2024 06:51 UTC](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595/16 "2024-03-22T06:51:49Z")

</div>

Thank you!  
I also need to include some more info like product, filling-source and pressure. I'll try to investigate your code and see if I can do it myselve. 🙂

O

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [22 March 2024 07:13 UTC](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595/17 "2024-03-22T07:13:41Z")

</div>

> [@smanjunath211](#):
>
> Happy Birthday @Steve-Mc

Thank you kind sir

> [@smanjunath211](#):
>
> the widget array feature in FlexDash by @tve was a good one. Is it similar

No, this is more like packing 1 or more functional parts (flows) into a single reusable node for easy re-use. You can now select a config (e.g. the ui-group) as a property and allow it to be selected to set where your UI elements will be displayed. Unfortunately, it's quite difficult to explain in words and the benefits are not immediately recognisable. But when you realise you need this, you will realise it potential.

---

<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 April 2024 07:14 UTC](https://discourse.nodered.org/t/tank-level-indication-inside-of-ui-template-v2/86595/18 "2024-04-05T07:14:30Z")

</div>

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