Hello everyone, I have created a template that when you press an item in the dropdown list, it makes the word "Machine" be bold. Something like this below.
But I would also like to have the feature that when I press the word "Machine 1" on the picture. I would like the dropdown node to automatically choose Machine 1.
I would appreciate any help.
[{"id":"24979d80.621452","type":"ui_template","z":"5d3f964c.fef898","group":"da148e61.f015f","name":"","order":9,"width":"12","height":"8","format":"<style>\n\n/* Container holding the image and the text */\n.container {\n position: relative;\n text-align: center;\n color: white;\n}\n\n/* Centered text */\n.text {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 16px;\n font-weight: 300;\n}\n\n.bold {\n font-weight: 800;\n}\n\n\n</style>\n\n<div class=\"container\">\n <img src=\"https://cdn.pixabay.com/photo/2016/03/04/19/36/gears-1236578_960_720.jpg\" alt=\"Machine 1\" style=\"width:200px;\">\n <div id=\"machine1\" class=\"text\">Machine 1</div>\n</div>\n\n<div class=\"container\">\n <img src=\"https://cdn.pixabay.com/photo/2016/06/12/20/27/macro-1452987_960_720.jpg\" alt=\"Machine 2\" style=\"width:200px;\">\n <div id=\"machine2\" class=\"text\">Machine 2</div>\n</div>\n\n<script>\n (function(scope) {\n scope.$watch('msg', function(msg) {\n debugger\n if (msg && msg.topic == \"select_machine\") {\n $(\".text\").removeClass(\"bold\");//remove bold class from all .text\n var machineTextSel = \"#\" + msg.payload; //make selector \n $(machineTextSel).addClass(\"bold\"); //add bold to chosen item\n }\n });\n })(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":740,"y":2100,"wires":[[]]},{"id":"663aaaac.1121e4","type":"ui_dropdown","z":"5d3f964c.fef898","name":"","label":"Machine","tooltip":"","place":"Select Machine","group":"","order":5,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"Machine 1","value":"machine1","type":"str"},{"label":"Machine 2","value":"machine2","type":"str"}],"payload":"","topic":"select_machine","x":560,"y":2100,"wires":[["24979d80.621452"]]},{"id":"da148e61.f015f","type":"ui_group","name":"Demo","tab":"da5706ae.6caf58","order":3,"disp":true,"width":"12","collapse":false},{"id":"da5706ae.6caf58","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
