Simple example of hiding groups

A simple example to show how hiding groups can be used (Dashboard v2.9.0 onwards)

You can jump to any stage of the process using the buttons on the left. But can also automatically trigger the next stage by something within a group - in this case sliding the slider above 7. You can then reset the process or wait 10 seconds, and it will reset automatically.

[{"id":"4f3cf202.2fb4fc","type":"ui_button","z":"2f0eea75.da6d06","name":"","group":"e40e97d4.1356e8","order":0,"width":0,"height":0,"passthru":false,"label":"button1","color":"","bgcolor":"","icon":"","payload":"{\"group\":{\"hide\":[\"Home_Group_2\",\"Home_Group_3\"],\"show\":[\"Home_Group_1\"]}}","payloadType":"json","topic":"","x":260,"y":520,"wires":[["e374a3ea.93523"]]},{"id":"20929192.34fbbe","type":"ui_button","z":"2f0eea75.da6d06","name":"","group":"e40e97d4.1356e8","order":0,"width":0,"height":0,"passthru":false,"label":"button2","color":"","bgcolor":"","icon":"","payload":"{\"group\":{\"hide\":[\"Home_Group_1\",\"Home_Group_3\"],\"show\":[\"Home_Group_2\"]}}","payloadType":"json","topic":"","x":260,"y":560,"wires":[["e374a3ea.93523"]]},{"id":"bcd5bc48.851","type":"ui_button","z":"2f0eea75.da6d06","name":"","group":"e40e97d4.1356e8","order":0,"width":0,"height":0,"passthru":false,"label":"button3","color":"","bgcolor":"","icon":"","payload":"{\"group\":{\"hide\":[\"Home_Group_1\",\"Home_Group_2\"],\"show\":[\"Home_Group_3\"]}}","payloadType":"json","topic":"","x":260,"y":600,"wires":[["e374a3ea.93523"]]},{"id":"3073f8a1.91abe8","type":"ui_gauge","z":"2f0eea75.da6d06","name":"","group":"f2aefa84.a9a108","order":0,"width":0,"height":0,"gtype":"gage","title":"Gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":830,"y":420,"wires":[]},{"id":"e6d025a4.d4a868","type":"ui_template","z":"2f0eea75.da6d06","group":"b09937f3.b814f8","name":"","order":0,"width":"6","height":"3","format":"This is the start group.<br/>\nPress button 2 to move to the next group.<br/>\nThen slide the slider.","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":840,"y":360,"wires":[[]]},{"id":"97564f2f.aea38","type":"ui_button","z":"2f0eea75.da6d06","name":"","group":"75944167.0434b","order":2,"width":0,"height":0,"passthru":false,"label":"Reset","color":"","bgcolor":"","icon":"","payload":"{\"group\":{\"hide\":[\"Home_Group_2\",\"Home_Group_3\"],\"show\":[\"Home_Group_1\"]}}","payloadType":"json","topic":"","x":830,"y":520,"wires":[["e374a3ea.93523"]]},{"id":"e374a3ea.93523","type":"ui_ui_control","z":"2f0eea75.da6d06","name":"","x":660,"y":600,"wires":[[]]},{"id":"9cbd5e64.629f5","type":"ui_slider","z":"2f0eea75.da6d06","name":"","label":"slider","group":"f2aefa84.a9a108","order":0,"width":0,"height":0,"passthru":false,"topic":"","min":0,"max":10,"step":1,"x":470,"y":400,"wires":[["3073f8a1.91abe8","2da21b04.ec98d4"]]},{"id":"5ee9247b.cfcefc","type":"ui_template","z":"2f0eea75.da6d06","group":"75944167.0434b","name":"","order":1,"width":"6","height":"3","format":"Slider reached > 7 = Passed</br>\nHit Reset to go back to stage 1</br>\nOr wait 10 seconds.","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":840,"y":480,"wires":[[]]},{"id":"2da21b04.ec98d4","type":"function","z":"2f0eea75.da6d06","name":"","func":"if (msg.payload > 7) {\n    m2 = {payload : 0};\n    msg.payload = {\"group\":{\"hide\":[\"Home_Group_1\",\"Home_Group_2\"],\"show\":[\"Home_Group_3\"]}};\n    return [ m2, msg];\n}\nreturn null;","outputs":2,"noerr":0,"x":470,"y":460,"wires":[["9cbd5e64.629f5","3073f8a1.91abe8"],["95b70ae.d995ff8"]]},{"id":"8835b353.14965","type":"inject","z":"2f0eea75.da6d06","name":"","topic":"","payload":"{\"group\":{\"hide\":[\"Home_Group_2\",\"Home_Group_3\"],\"show\":[\"Home_Group_1\"]}}","payloadType":"json","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":270,"y":480,"wires":[["e374a3ea.93523"]]},{"id":"95b70ae.d995ff8","type":"trigger","z":"2f0eea75.da6d06","op1":"","op2":"{\"group\":{\"hide\":[\"Home_Group_2\",\"Home_Group_3\"],\"show\":[\"Home_Group_1\"]}}","op1type":"pay","op2type":"json","duration":"10","extend":false,"units":"s","reset":"","bytopic":"all","name":"","x":550,"y":520,"wires":[["e374a3ea.93523"]]},{"id":"e40e97d4.1356e8","type":"ui_group","z":"","name":"Menu","tab":"12c7c5a9.cc3c3a","disp":true,"width":"6","collapse":false},{"id":"f2aefa84.a9a108","type":"ui_group","z":"","name":"Group 2","tab":"12c7c5a9.cc3c3a","order":3,"disp":true,"width":"6","collapse":false},{"id":"b09937f3.b814f8","type":"ui_group","z":"","name":"Group 1","tab":"12c7c5a9.cc3c3a","order":2,"disp":true,"width":"6","collapse":false},{"id":"75944167.0434b","type":"ui_group","z":"","name":"Group 3","tab":"12c7c5a9.cc3c3a","order":4,"disp":true,"width":"6","collapse":false},{"id":"12c7c5a9.cc3c3a","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

Flow Info

Created 7 years, 1 month ago
Updated 5 years, 3 months ago
Rating: 5 2

Owner

Actions

Rate:

Node Types

Core
  • function (x1)
  • inject (x1)
  • trigger (x1)
Other
  • ui_button (x4)
  • ui_gauge (x1)
  • ui_group (x4)
  • ui_slider (x1)
  • ui_tab (x1)
  • ui_template (x2)
  • ui_ui_control (x1)

Tags

  • hide
  • groups
  • ui_control
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option