Has anyone here successfully displayed an image on Node-RED dashboard hosted on an EPIC? We have a decent working knowledge of the Dashboard but can’t figure out where we’ve gone wrong.
Has anyone here successfully displayed an image on Node-RED dashboard hosted on an EPIC? We have a decent working knowledge of the Dashboard but can’t figure out where we’ve gone wrong.
Here is how to display a static image on the Node-RED dashboard…
The key is to ensure that it is a base64 encoded image for the web browser to display.
The template node is needed to format the image correctly for the web browser.
While this flow is running on a groov RIO, I used the same flow on an EPIC and on Node-RED running on a Windows PC. Just the file path to the image will be different.
(This is my ‘go to’ flow for displaying an image).
Start by using groov Manage to upload your image to the secured file area since that’s the one that Node-RED can easily read from.
Here is what the flow looks like;
And here is the flow for you to import into Node-RED;
(Note, you may need to add the ‘base64’ node to your palette if you don’t already have it installed. You can do it before or after you import the flow. Before is better).
[{"id":"6757dc9f.792504","type":"inject","z":"3b0682e2.45674e","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":1310,"y":520,"wires":[["23f5cb94.03cb04"]]},{"id":"fa1abaf4.885038","type":"template","z":"3b0682e2.45674e","name":"Image in","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img src=\"data:image/png;base64,{{payload}}\"style=\"width=\"569\" height=\"197\"\"/>","output":"str","x":1520,"y":600,"wires":[["b42fd1dc.ba144"]]},{"id":"b42fd1dc.ba144","type":"ui_template","z":"3b0682e2.45674e","group":"b586a8f7.e060e8","name":"RIO Logo","order":8,"width":"15","height":"15","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1720,"y":600,"wires":[[]]},{"id":"23f5cb94.03cb04","type":"file in","z":"3b0682e2.45674e","name":"","filename":"/home/dev/secured/logo-rio-red-grey-569x197.png","format":"","chunk":false,"sendError":false,"encoding":"none","x":1610,"y":520,"wires":[["b83253e6.36f6a"]]},{"id":"b83253e6.36f6a","type":"base64","z":"3b0682e2.45674e","name":"","action":"","property":"payload","x":1920,"y":520,"wires":[["fa1abaf4.885038"]]},{"id":"5c10bdf0.aa77f4","type":"comment","z":"3b0682e2.45674e","name":"On inject add the groov RIO logo to the dashboard","info":"","x":1410,"y":460,"wires":[]},{"id":"b586a8f7.e060e8","type":"ui_group","z":"","name":"groov RIO","tab":"c40344b0.c82658","disp":true,"width":"26","collapse":false},{"id":"c40344b0.c82658","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
Lastly, here is a screen shot showing the image on the Node-RED dashboard.
Lets know how you go or if you have any questions or refine the flow and make it better.
Thanks Ben! We got it to work with a custom image even, just took a little bit of fumbling around until we took a closer look at our EPIC’s file structure in the Files portion of Groov Manage. We were definitely clueless on the base64 encoding necessity, and now understanding that was key. Thanks again for the quick response!
