Trying to create a menu, buttons and actions don't work

Can someone please help me with my node?

I'm trying to create a menu with 4 buttons.
The buttons should change color according to the active button.
The buttons should trigger a "show and hide" command for particular groups.

I thought I had done everything right, except it just doesn't work.
Somehow only button 3 seems to work, I think something is going wrong storing the current state.

Can anyone tell me what I'm doing wrong?


.
.

[{"id":"ad2fe4ba.7f6a28","type":"ui_button","z":"bbff3fe8.ed376","name":"Home Menu","group":"cf059249.5b8b9","order":2,"width":3,"height":1,"passthru":false,"label":"Home","tooltip":"","color":"{{btc}}","bgcolor":"{{bgc}}","icon":"fa-home","payload":"home","payloadType":"str","topic":"","topicType":"str","x":530,"y":100,"wires":[["868e0fb8.34d9a","618540ab.7dec5"]]},{"id":"ac1d591.ae698a8","type":"ui_button","z":"bbff3fe8.ed376","name":"Energie Menu","group":"cf059249.5b8b9","order":4,"width":3,"height":1,"passthru":false,"label":"Energie","tooltip":"","color":"{{btc}}","bgcolor":"{{bgc}}","icon":"fa-bolt","payload":"energie","payloadType":"str","topic":"","topicType":"str","x":540,"y":140,"wires":[["868e0fb8.34d9a","618540ab.7dec5"]]},{"id":"d428be50.34237","type":"ui_button","z":"bbff3fe8.ed376","name":"Klimaat Menu","group":"cf059249.5b8b9","order":5,"width":3,"height":1,"passthru":false,"label":"Klimaat","tooltip":"","color":"{{btc}}","bgcolor":"{{bgc}}","icon":"fa-thermometer-three-quarters","payload":"klimaat","payloadType":"str","topic":"","topicType":"str","x":540,"y":180,"wires":[["868e0fb8.34d9a","618540ab.7dec5"]]},{"id":"ad9353c2.8c3a8","type":"ui_button","z":"bbff3fe8.ed376","name":"Domotica Menu","group":"cf059249.5b8b9","order":6,"width":3,"height":1,"passthru":false,"label":"Domotica","tooltip":"","color":"{{btc}}","bgcolor":"{{bgc}}","icon":"fa-eercast","payload":"domotica","payloadType":"str","topic":"","topicType":"str","x":540,"y":220,"wires":[["868e0fb8.34d9a","618540ab.7dec5"]]},{"id":"868e0fb8.34d9a","type":"function","z":"bbff3fe8.ed376","name":"","func":"if(msg.payload == \"menu\")\n{\n   msg.payload = {\"group\":{\"show\":[\"Huis_Er_is_aangebeld\"]}};\n}\nif(msg.payload == \"energie\")\n{\n   msg.payload = {\"group\":{\"show\":[\"Huis_Er_is_aangebeld\"]}};\n}\nif(msg.payload == \"klimaat\")\n{\n   msg.payload = {\"group\":{\"show\":[\"Huis_Er_is_aangebeld\"]}};\n}\nelse{\n   msg.payload = {\"group\":{\"hide\":[\"Huis_Er_is_aangebeld\"]}};\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":760,"y":140,"wires":[["17e70594.d9e6ba"]]},{"id":"17e70594.d9e6ba","type":"ui_ui_control","z":"bbff3fe8.ed376","name":"","x":940,"y":140,"wires":[[]]},{"id":"eb3a38ca.a8e938","type":"persist in","z":"bbff3fe8.ed376","name":"Set TopMenu","storageNode":"e6d7d60b.123a28","x":950,"y":180,"wires":[]},{"id":"11d2c6ee.f4bd29","type":"function","z":"bbff3fe8.ed376","name":"","func":"var menu=global.get(\"TopMenu\");\nvar background=\"#FFFFFF\";\nvar color=\"#000000\";\n\nif(menu==\"menu\")\n{\n   background=\"#FFFFFF\";\n   color=\"#000000\";\n}\nelse\n{\n   background=\"0094CE\";\n   color=\"#FFFFFF\";\n}\nmsg = {bgc:background, btc:color};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":100,"wires":[["ad2fe4ba.7f6a28"]]},{"id":"b4073f4b.999f1","type":"function","z":"bbff3fe8.ed376","name":"","func":"var menu = global.get(\"TopMenu\");\nvar background = \"0094CE\";\nvar color = \"#FFFFFF\";\n\nif(menu == \"energie\")\n{\n   background=\"#FFFFFF\";\n   color=\"#000000\";\n}\nelse\n{\n   background=\"0094CE\";\n   color=\"#FFFFFF\";\n}\nmsg = {bgc:background, btc:color};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":140,"wires":[["ac1d591.ae698a8"]]},{"id":"47721fdf.a024c","type":"function","z":"bbff3fe8.ed376","name":"","func":"var menu=global.get(\"TopMenu\");\nvar background=\"0094CE\";\nvar color=\"#FFFFFF\";\n\nif(menu==\"klimaat\")\n{\n   background=\"#FFFFFF\";\n   color=\"#000000\";\n}\nelse\n{\n   background=\"0094CE\";\n   color=\"#FFFFFF\";\n}\nmsg = {bgc:background, btc:color};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":180,"wires":[["d428be50.34237"]]},{"id":"67fe8d29.afa994","type":"function","z":"bbff3fe8.ed376","name":"","func":"var menu=global.get(\"TopMenu\");\nvar background=\"0094CE\";\nvar color=\"#FFFFFF\";\n\nif(menu==\"domotica\")\n{\n   background=\"#FFFFFF\";\n   color=\"#000000\";\n}\nelse\n{\n   background=\"0094CE\";\n   color=\"#FFFFFF\";\n}\nmsg = {bgc:background, btc:color};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":220,"wires":[["ad9353c2.8c3a8"]]},{"id":"618540ab.7dec5","type":"function","z":"bbff3fe8.ed376","name":"","func":"global.set(\"TopMenu\",(msg.payload));\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":760,"y":180,"wires":[["eb3a38ca.a8e938"]]},{"id":"72ec42d6.3d842c","type":"persist out","z":"bbff3fe8.ed376","name":"Load TopMenu","storageNode":"e6d7d60b.123a28","x":140,"y":160,"wires":[["67fe8d29.afa994","47721fdf.a024c","b4073f4b.999f1","11d2c6ee.f4bd29"]]},{"id":"cf059249.5b8b9","type":"ui_group","name":"Top Menu","tab":"8146c75c.872268","order":1,"disp":false,"width":27,"collapse":false},{"id":"e6d7d60b.123a28","type":"persist-store","filename":"TopMenu","interval":"2"},{"id":"8146c75c.872268","type":"ui_tab","name":"Huis","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Okay, sometimes sleeping over it helpes.... :laughing:

Yesterday it took me 3 hours to build and figuring out why it doesn't work.
Today I fixed it in 10 minutes.

For whoever is looking for an interactive button menu that changes color according to the selected button, here is how I maneged to do that. Maybe there are better ways, but this is simple and it works.

[{"id":"ad2fe4ba.7f6a28","type":"ui_button","z":"bbff3fe8.ed376","name":"Home Menu","group":"cf059249.5b8b9","order":3,"width":3,"height":1,"passthru":false,"label":"Home","tooltip":"","color":"{{btc}}","bgcolor":"{{bgc}}","icon":"fa-home","payload":"home","payloadType":"str","topic":"","topicType":"str","x":530,"y":100,"wires":[["868e0fb8.34d9a","11d2c6ee.f4bd29","b4073f4b.999f1","47721fdf.a024c","67fe8d29.afa994"]]},{"id":"ac1d591.ae698a8","type":"ui_button","z":"bbff3fe8.ed376","name":"Energie Menu","group":"cf059249.5b8b9","order":4,"width":3,"height":1,"passthru":false,"label":"Energie","tooltip":"","color":"{{btc}}","bgcolor":"{{bgc}}","icon":"fa-bolt","payload":"energie","payloadType":"str","topic":"","topicType":"str","x":540,"y":140,"wires":[["868e0fb8.34d9a","11d2c6ee.f4bd29","b4073f4b.999f1","47721fdf.a024c","67fe8d29.afa994"]]},{"id":"d428be50.34237","type":"ui_button","z":"bbff3fe8.ed376","name":"Klimaat Menu","group":"cf059249.5b8b9","order":5,"width":3,"height":1,"passthru":false,"label":"Klimaat","tooltip":"","color":"{{btc}}","bgcolor":"{{bgc}}","icon":"fa-thermometer-three-quarters","payload":"klimaat","payloadType":"str","topic":"","topicType":"str","x":540,"y":180,"wires":[["868e0fb8.34d9a","11d2c6ee.f4bd29","b4073f4b.999f1","47721fdf.a024c","67fe8d29.afa994"]]},{"id":"ad9353c2.8c3a8","type":"ui_button","z":"bbff3fe8.ed376","name":"Domotica Menu","group":"cf059249.5b8b9","order":6,"width":3,"height":1,"passthru":false,"label":"Domotica","tooltip":"","color":"{{btc}}","bgcolor":"{{bgc}}","icon":"fa-eercast","payload":"domotica","payloadType":"str","topic":"","topicType":"str","x":540,"y":220,"wires":[["868e0fb8.34d9a","11d2c6ee.f4bd29","b4073f4b.999f1","47721fdf.a024c","67fe8d29.afa994"]]},{"id":"868e0fb8.34d9a","type":"function","z":"bbff3fe8.ed376","name":"","func":"if(msg.payload == \"home\")\n{\n   msg.payload = {\"group\":{\"show\":[\"Huis_Er_is_aangebeld\"]}};\n}\nelse if(msg.payload == \"energie\")\n{\n   msg.payload = {\"group\":{\"hide\":[\"Huis_Er_is_aangebeld\"]}};\n}\nelse if(msg.payload == \"klimaat\")\n{\n   msg.payload = {\"group\":{\"show\":[\"Huis_Er_is_aangebeld\"]}};\n}\nelse{\n   msg.payload = {\"group\":{\"hide\":[\"Huis_Er_is_aangebeld\"]}};\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":820,"y":160,"wires":[["e17ebfad.54b6a"]]},{"id":"11d2c6ee.f4bd29","type":"function","z":"bbff3fe8.ed376","name":"","func":"var background=\"#FFFFFF\";\nvar color=\"#000000\";\n\nif(msg.payload==\"home\")\n{\n   background=\"#FFFFFF\";\n   color=\"#000000\";\n}\nelse\n{\n   background=\"0094CE\";\n   color=\"#FFFFFF\";\n}\nmsg = {bgc:background, btc:color};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":100,"wires":[["ad2fe4ba.7f6a28"]]},{"id":"b4073f4b.999f1","type":"function","z":"bbff3fe8.ed376","name":"","func":"var background = \"0094CE\";\nvar color = \"#FFFFFF\";\n\nif(msg.payload == \"energie\")\n{\n   background=\"#FFFFFF\";\n   color=\"#000000\";\n}\nelse\n{\n   background=\"0094CE\";\n   color=\"#FFFFFF\";\n}\nmsg = {bgc:background, btc:color};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":140,"wires":[["ac1d591.ae698a8"]]},{"id":"47721fdf.a024c","type":"function","z":"bbff3fe8.ed376","name":"","func":"var background=\"0094CE\";\nvar color=\"#FFFFFF\";\n\nif(msg.payload==\"klimaat\")\n{\n   background=\"#FFFFFF\";\n   color=\"#000000\";\n}\nelse\n{\n   background=\"0094CE\";\n   color=\"#FFFFFF\";\n}\nmsg = {bgc:background, btc:color};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":180,"wires":[["d428be50.34237"]]},{"id":"67fe8d29.afa994","type":"function","z":"bbff3fe8.ed376","name":"","func":"var background=\"0094CE\";\nvar color=\"#FFFFFF\";\n\nif(msg.payload==\"domotica\")\n{\n   background=\"#FFFFFF\";\n   color=\"#000000\";\n}\nelse\n{\n   background=\"0094CE\";\n   color=\"#FFFFFF\";\n}\nmsg = {bgc:background, btc:color};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":220,"wires":[["ad9353c2.8c3a8"]]},{"id":"e17ebfad.54b6a","type":"ui_ui_control","z":"bbff3fe8.ed376","name":"","x":980,"y":160,"wires":[[]]},{"id":"cf059249.5b8b9","type":"ui_group","name":"Top Menu","tab":"8146c75c.872268","order":1,"disp":false,"width":"27","collapse":false},{"id":"8146c75c.872268","type":"ui_tab","name":"Huis","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

TopMenu

5 Likes

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