Noob Node RED User Connecting dropdown item to html value

Hello everyone, I'm kinda new to NodeRED. The thing I want to implement is to select key/object that has a specific value in the Dropdown Node and connect it to text on image template.

Basically when I choose an item in the dropdown node, I want the "Machine 1" in the picture to be bold. Does not seem so hard, but I can't find a proper way to do this.

image

Something like this?

[{"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}]
2 Likes

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