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...
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
1 Like
Or you could add one gauge to a group - then show/hide that group using a ui_control msg.
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
You can play with CSS property opacity. Something along the lines of attached flow.
[{"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}]
