# Multiple Gauges

**URL:** <https://discourse.nodered.org/t/multiple-gauges/18904>\
**Category:** General\
**Created:** [8 December 2019 10:07 UTC](https://discourse.nodered.org/t/multiple-gauges/18904 "2019-12-08T10:07:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ki-va](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ki-va/32/22283_2.png) [@Ki-va](https://discourse.nodered.org/u/Ki-va)\
**Post date:** [8 December 2019 10:07 UTC](https://discourse.nodered.org/t/multiple-gauges/18904/1 "2019-12-08T10:07:19Z")

</div>

I have 4 sensors in my environment, sens1, sens2,sens3, sens4.  
Not all of then are connected (physically to my RPI) at the same time.  
I want to create a UI page that will show gauges only for the active ones:  
e.g: if I have 2 sensors connected to my RPI I will see two gauges,( i do not want to see the offline sensor's gauges)  
if I have 3 sensors connected I will see 3 gauges and so on...

---

<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:** [8 December 2019 10:48 UTC](https://discourse.nodered.org/t/multiple-gauges/18904/2 "2019-12-08T10:48:21Z")

</div>

Not possible with node-red-dashboard. Full dynamics can be achieved with ui\_builder where you will create dashboard fully under your control.  
Smart thing you can do with dashboard is to show one gauge and switch between input sources. [https://flows.nodered.org/flow/cd90709d95fcba9970bd88205871c3c7](https://flows.nodered.org/flow/cd90709d95fcba9970bd88205871c3c7)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [8 December 2019 11:46 UTC](https://discourse.nodered.org/t/multiple-gauges/18904/3 "2019-12-08T11:46:31Z")

</div>

Or you could add one gauge to a group - then show/hide that group using a ui\_control msg.

---

<div class="post-metadata">

**Author:** ![Ki-va](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ki-va/32/22283_2.png) [@Ki-va](https://discourse.nodered.org/u/Ki-va)\
**Post date:** [8 December 2019 11:49 UTC](https://discourse.nodered.org/t/multiple-gauges/18904/4 "2019-12-08T11:49:33Z")

</div>

how can i stack the gauges vertically instead of horizontally?  
when i use 4 gauges in the same group the layout is:  
gauge 1, gauge 2, gauge 3,gauge 4.  
i want the layout to look like this:  
gauge 1, gauge 2  
gauge 3, gauge 4  
and still use the show/hide group using a ui\_control msg

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [8 December 2019 16:25 UTC](https://discourse.nodered.org/t/multiple-gauges/18904/5 "2019-12-08T16:25:55Z")

</div>

You can play with CSS property opacity. Something along the lines of attached flow.

```auto
[{"id":"5df78416.92588c","type":"tab","label":"Placeholder Group - opacity","disabled":false,"info":""},{"id":"4a0e021a.c60a5c","type":"inject","z":"5df78416.92588c","name":"","topic":"","payload":"Start","payloadType":"str","repeat":"3","crontab":"","once":true,"onceDelay":"","x":170,"y":100,"wires":[["6bcc89bc.23ef18"]]},{"id":"59ef9907.dc0a78","type":"ui_gauge","z":"5df78416.92588c","name":"","group":"34785028.114a7","order":3,"width":"4","height":"4","gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":470,"y":100,"wires":[]},{"id":"6bcc89bc.23ef18","type":"random","z":"5df78416.92588c","name":"","low":"1","high":"10","inte":"true","property":"payload","x":320,"y":100,"wires":[["59ef9907.dc0a78"]]},{"id":"554fc8b0.5f43f8","type":"inject","z":"5df78416.92588c","name":"","topic":"","payload":"Start","payloadType":"str","repeat":"3","crontab":"","once":true,"onceDelay":"","x":170,"y":140,"wires":[["7093e82c.097c68"]]},{"id":"30611a38.926376","type":"ui_gauge","z":"5df78416.92588c","name":"","group":"6ae56d71.a1f3e4","order":3,"width":"4","height":"4","gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":470,"y":140,"wires":[]},{"id":"7093e82c.097c68","type":"random","z":"5df78416.92588c","name":"","low":"1","high":"10","inte":"true","property":"payload","x":320,"y":140,"wires":[["30611a38.926376"]]},{"id":"f1335b63.91ded8","type":"inject","z":"5df78416.92588c","name":"","topic":"","payload":"Start","payloadType":"str","repeat":"3","crontab":"","once":true,"onceDelay":"","x":170,"y":180,"wires":[["d3c4a18f.2dbbd"]]},{"id":"e57730c9.ca0fa","type":"ui_gauge","z":"5df78416.92588c","name":"","group":"3c553710.0afe18","order":3,"width":"4","height":"4","gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":470,"y":180,"wires":[]},{"id":"d3c4a18f.2dbbd","type":"random","z":"5df78416.92588c","name":"","low":"1","high":"10","inte":"true","property":"payload","x":320,"y":180,"wires":[["e57730c9.ca0fa"]]},{"id":"e15817af.f5e2e8","type":"inject","z":"5df78416.92588c","name":"","topic":"","payload":"Start","payloadType":"str","repeat":"3","crontab":"","once":true,"onceDelay":"","x":170,"y":220,"wires":[["b6f79366.cccf7"]]},{"id":"e4ee65ad.00a788","type":"ui_gauge","z":"5df78416.92588c","name":"","group":"c92ad75d.643778","order":3,"width":"4","height":"4","gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":470,"y":220,"wires":[]},{"id":"b6f79366.cccf7","type":"random","z":"5df78416.92588c","name":"","low":"1","high":"10","inte":"true","property":"payload","x":320,"y":220,"wires":[["e4ee65ad.00a788"]]},{"id":"70d0c6a7.4bf518","type":"ui_template","z":"5df78416.92588c","group":"34785028.114a7","name":"","order":4,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":520,"y":300,"wires":[[]]},{"id":"b56a986e.6a8048","type":"template","z":"5df78416.92588c","name":"Hide G1","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>\n\n #TAB1_G1 {\n opacity : 0;\n }\n \n</style>","output":"str","x":360,"y":300,"wires":[["70d0c6a7.4bf518"]]},{"id":"c654b861.1e4188","type":"inject","z":"5df78416.92588c","name":"Hide G1","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":300,"wires":[["b56a986e.6a8048"]]},{"id":"f62a2103.d465b","type":"template","z":"5df78416.92588c","name":"Dsiplay G1","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>\n\n #TAB1_G1 {\n opacity : 1;\n }\n \n</style>","output":"str","x":370,"y":340,"wires":[["70d0c6a7.4bf518"]]},{"id":"4028d81b.966318","type":"inject","z":"5df78416.92588c","name":"Show G1","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":340,"wires":[["f62a2103.d465b"]]},{"id":"132bd73d.4fb8d9","type":"ui_template","z":"5df78416.92588c","group":"c92ad75d.643778","name":"","order":4,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":520,"y":400,"wires":[[]]},{"id":"b7264d32.60734","type":"template","z":"5df78416.92588c","name":"Hide G4","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>\n\n #TAB1_G4 {\n opacity : 0;\n }\n \n</style>","output":"str","x":360,"y":400,"wires":[["132bd73d.4fb8d9"]]},{"id":"864fb644.fead08","type":"inject","z":"5df78416.92588c","name":"Hide G4","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":400,"wires":[["b7264d32.60734"]]},{"id":"8d335f79.2845d","type":"template","z":"5df78416.92588c","name":"Dsiplay G4","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>\n\n #TAB1_G4 {\n opacity : 1;\n }\n \n</style>","output":"str","x":370,"y":440,"wires":[["132bd73d.4fb8d9"]]},{"id":"f05e6df6.54a43","type":"inject","z":"5df78416.92588c","name":"Show G4","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":440,"wires":[["8d335f79.2845d"]]},{"id":"34785028.114a7","type":"ui_group","z":"","name":"G1","tab":"ea7e5b55.ff9ce8","disp":true,"width":"12","collapse":false},{"id":"6ae56d71.a1f3e4","type":"ui_group","z":"","name":"G2","tab":"ea7e5b55.ff9ce8","disp":true,"width":"12","collapse":false},{"id":"3c553710.0afe18","type":"ui_group","z":"","name":"G3","tab":"ea7e5b55.ff9ce8","disp":true,"width":"12","collapse":false},{"id":"c92ad75d.643778","type":"ui_group","z":"","name":"G4","tab":"ea7e5b55.ff9ce8","disp":true,"width":"12","collapse":false},{"id":"ea7e5b55.ff9ce8","type":"ui_tab","z":"","name":"TAB1","icon":"dashboard","disabled":false,"hidden":false}]

```

 ![opacity](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f7c0d0ff5f764d764c4394231fe3fb656bb5e185.png)