Dynamic Image in Toolbar / Header Bar

I've recently built a bit of flow which seems to have been asked for a few times, but a full solution doesn't seem to have been posted anyway.

To use it, you need to set the httpStatic path in settings.js in your .node-red folder to the directory the images are in. In my case they are on a network drive as ~20 devices look at them. I am running Node Red on Linux, I think the path structure in Windows is slightly different.

httpStatic: '/home/ADMIN/NETWORK_DRIVE/share/NodeRed/node-red-images',

Once you have done that, the below nodes are relatively self explanatory. The first node detects if that UI tab is active, and sends a payload containing the image name.

The second updates the image when it receives a new msg.payload.

Place a pair of nodes in a widget group on each dashboard page, making sure to leave the sizes as auto (makes them invisible) so they don't mess with your layout.

Change the image name in the first template node for each image you want to display and you're set.

[{"id":"7966144f.071bcc","type":"ui_template","z":"20a642ae.27a28e","group":"ddb7f02f.34251","name":"OEE Detect","order":0,"width":"0","height":"0","format":"<script>\n(function() {\n    (function(scope) {\n        scope.send({payload: \"/oeelogo.png\"}); // this gets sent when the view is opened in the browser\n    })(scope);\n})();\n</script>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":130,"y":200,"wires":[["b1e0d41e.e21cb8"]]},{"id":"d1b017ea.d3bea8","type":"ui_template","z":"20a642ae.27a28e","group":"db83fb16.4ba768","name":"Dash Detect","order":6,"width":0,"height":0,"format":"<script>\n(function() {\n    (function(scope) {\n        scope.send({payload: \"/mainlogo.png\"}); // this gets sent when the view is opened in the browser\n    })(scope);\n})();\n</script>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":130,"y":160,"wires":[["ae64f2bc.5b2ce"]]},{"id":"ae64f2bc.5b2ce","type":"ui_template","z":"20a642ae.27a28e","group":"db83fb16.4ba768","name":"Dash Display","order":2,"width":"0","height":"0","format":"<style>\n    .md-toolbar-tools{\n        background-image: url(\"{{msg.payload}}\");\n        background-repeat: no-repeat;\n        background-position: center;\n        background-size: contain;\n        \n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":310,"y":160,"wires":[[]]},{"id":"b1e0d41e.e21cb8","type":"ui_template","z":"20a642ae.27a28e","group":"ddb7f02f.34251","name":"OEE Display","order":1,"width":"0","height":"0","format":"<style>\n    .md-toolbar-tools{\n        background-image: url(\"{{msg.payload}}\");\n        background-repeat: no-repeat;\n        background-position: center;\n        background-size: contain;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":310,"y":200,"wires":[[]]},{"id":"ddb7f02f.34251","type":"ui_group","z":"","name":"Input- number of days ","tab":"ad724e2a.b39b3","order":1,"disp":false,"width":"30","collapse":false},{"id":"db83fb16.4ba768","type":"ui_group","z":"","name":"BR R0780","tab":"7e15bfa4.459b4","order":19,"disp":true,"width":"6","collapse":true},{"id":"ad724e2a.b39b3","type":"ui_tab","z":"","name":"OEE","icon":"dashboard","order":2,"disabled":false,"hidden":false},{"id":"7e15bfa4.459b4","type":"ui_tab","z":"","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
3 Likes