Displaying image data that's in a Buffer?

[Larry Roy]

Hey guys,

I am in love with Node-RED, after using for only a few days.

I have created some simple flows, and have something working very nicely using MQTT messages from my .Net edge device.

One of the things I would like to be able to do, but cannot seem to figure it out, is to display an image (fairly small ~40k) that I have sent in an MQTT payload.

I can receive the message in Node, and save the payload to a file, which seems to work great.

But what I really want to do is simply pass the buffer along to the Template node (or an Image node), and display the image without saving to a file first.

I am anticipating in the near future that I want to fetch images from a DB, and the overall concept of Buffer -> Image node would be almost identical.

Is there a simple way to feed an image in a Buffer to a Template node (or some other node), and cause that image to display on the new Dashboard?

Please forgive my ignorance... there is probably a very simple solution, but I cannot figure out what it might be!

Thanks,

Larry

[Nicholas O'Leary]

Hi Larry,

not tried it, but you could base64 encode the buffer and generate an html image with the image data inline and send that to the ui_template node:

<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />

Nick

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
For more options, visit https://groups.google.com/d/optout.

[Walter Kraembring]

Interesting!

I can for sure confirm that the code works when pasted into the ui_template node. But can I include it with correct format in a payload? (like putting the whole into msg.payload in a function node)

[Julian Knight]

I think that you should be able to do this with ng-src.

Some clues here: http://stackoverflow.com/questions/32723266/valid-ng-src-syntax-for-string-concatenation-inside-directive-template-string

Not tried it though.

[Jörg Wende]

base64 in inject node:

[{"id":"39fd7ca.7c8ba84","type":"ui_template","z":"a88ee566.46c228","group":"b4809f8a.915988","name":"Image","order":0,"width":"6","height":"6","format":"<img width=\"16\" height=\"16\" alt=\"star\" src=\"data:image/gif;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"x":624.2000122070312,"y":201.1999969482422,"wires":[[]]},{"id":"b627a1e0.86db7","type":"inject","z":"a88ee566.46c228","name":"","topic":"","payload":"R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7","payloadType":"str","repeat":"","crontab":"","once":false,"x":183.1999969482422,"y":203.00003051757812,"wires":[["39fd7ca.7c8ba84"]]},{"id":"b4809f8a.915988","type":"ui_group","z":"a88ee566.46c228","name":"Default","tab":"ddd3f76.a527788","disp":true,"width":"6"},{"id":"ddd3f76.a527788","type":"ui_tab","z":"a88ee566.46c228","name":"Demo","icon":"dashboard"}]

[Larry Roy]

Thanks for the help, Nick!

It worked like a charm.  I installed the Base64 node, and the flow is quite simple (of course it is!):

[{"id":"d98d38ad.2672c8","type":"mqtt in","z":"d22e2987.2dd1d8","name":"Image","topic":"ELX/MQTT/Image","qos":"0","broker":"61e7747f.9e188c","x":810,"y":60,"wires":[["803aec50.7fc51"]]},{"id":"803aec50.7fc51","type":"base64","z":"d22e2987.2dd1d8","name":"Encode","x":1020,"y":60,"wires":[["b4187f4d.4be78"]]},{"id":"b4187f4d.4be78","type":"ui_template","z":"d22e2987.2dd1d8","group":"d86e3ba5.2791c8","name":"Display Image","order":0,"width":"6","height":"5","format":"<img width=\"32\" height=\"32\" alt=\"image\" src=\"data:image/jpg;base64,{{msg.payload}}\"/>","storeOutMessages":true,"fwdInMessages":true,"x":1200,"y":60,"wires":[[]]},{"id":"61e7747f.9e188c","type":"mqtt-broker","z":"d22e2987.2dd1d8","broker":"192.168.182.128","port":"1883","clientid":"LarryMacOS","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"willTopic":"","willQos":"0","willRetain":"false","willPayload":"","birthTopic":"","birthQos":"0","birthRetain":"false","birthPayload":""},{"id":"d86e3ba5.2791c8","type":"ui_group","name":"Group 2","tab":"5b6bf4.ffa4940c","order":2,"disp":true,"width":6},{"id":"5b6bf4.ffa4940c","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1}]

[Walter Kraembring]

...and if you are looking for how to publish an image to the broker;

mosquitto_pub -h host -p port -q qos -f file -t topic

[Matt]

Do you have any issues with the image flickering when it updates? (If you are using it like that)
I am very interested in this thread as a way to hopefully improve my current setup which involves updating a file every few seconds then some javascript to update the page.

[Larry Roy]

I have no issues with flicker.  The image is updated by an MQTT publisher on the network, and the MQTT subscriber picks it up in Node-RED flow and displays it.  It works much better than I thought it would!

You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/qi7EEUfundc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+u...@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
For more options, visit https://groups.google.com/d/optout.

Thank You,

Larry Roy

50644 Sabrina

Shelby Twp, MI  48315

CONFIDENTIALITY NOTICE: This communication and/or transmission (including any attachments) is intended solely for the person or entity to which it is addressed and may contain confidential, trade secret, privileged, and/or proprietary information and materials. Any review, distribution, dissemination, printing, copying, exploitation, or other use or communication of this email and/or its contents by persons or entities other than the specific intended recipient or his/her duly authorized representative is strictly prohibited. If you have received this communication in error, please contact the sender immediately and delete the communication from your computer and all other devices and related systems and shred and properly discard any tangible versions. Thank you.

[Matt]

Ok, I've got it working, but it seems to slow down the initial page load of the dashboard (even though the template nodes with the images are not on the default tab). It takes about 10 seconds of sitting at a blank page before anything shows up, whereas if I delete the template nodes it is almost instantaneous. Once the dashboard loads, everything is repsonsive. Kind of strange.

To unsubscribe from this group and all its topics, send an email to node-red+unsubscribe@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
For more options, visit https://groups.google.com/d/optout.

Thank You,

Larry Roy

50644 Sabrina

Shelby Twp, MI  48315

CONFIDENTIALITY NOTICE: This communication and/or transmission (including any attachments) is intended solely for the person or entity to which it is addressed and may contain confidential, trade secret, privileged, and/or proprietary information and materials. Any review, distribution, dissemination, printing, copying, exploitation, or other use or communication of this email and/or its contents by persons or entities other than the specific intended recipient or his/her duly authorized representative is strictly prohibited. If you have received this communication in error, please contact the sender immediately and delete the communication from your computer and all other devices and related systems and shred and properly discard any tangible versions. Thank you.