node red image display on webpage

[Jonathan Comley]

Hi forum,

I'm totally stuck on trying to display an image in a browser using node red.

I have tried many different things but continue to experience problems, through my lack of understanding.

I am unable to display an image from a url or from my user directory.

Please please please help, I am tearing my hair out,  a very simple flow that takes an image and displays it in a

browser using node red would be great.

thanks in advance

[Jonathan Comley]

I'm running node red on the beaglebone black

[Nicholas O'Leary]

Hi Jonathan,

here's a simple flow that works - listens on http://localhost:1880/testImage and returns the file /tmp/example.jpg

[{"id":"4354e0fc.bcab2","type":"http response","name":"","x":453,"y":397,"z":"1655e991.e9aa16","wires":[]},{"id":"74aa98c7.8b5568","type":"function","name":"Set Content-Type header","func":"msg.headers = {\n    \"Content-Type\":\"image/jpeg\"\n};\nreturn msg;","outputs":1,"noerr":0,"x":310,"y":336,"z":"1655e991.e9aa16","wires":[["4354e0fc.bcab2"]]},{"id":"f25c3eee.0da3c","type":"file in","name":"","filename":"/tmp/example.jpg","format":"","x":185,"y":277,"z":"1655e991.e9aa16","wires":[["74aa98c7.8b5568"]]},{"id":"2c966284.d3699e","type":"http in","name":"","url":"/testImage","method":"get","swaggerDoc":"","x":61,"y":232,"z":"1655e991.e9aa16","wires":[["f25c3eee.0da3c"]]}]

The two tricks needed are:

 - the File In node is set to return a Buffer object

 - the Function node sets the Content-Type header to image/jpeg so the browser knows to display it (rather than download it). You'd need to update this type to reflect the type of image you want to serve (png/gif etc - google will tell you the appropriate types).

Nick 

--
http://nodered.org
---
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+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Julian Knight]

You need to understand the mapping between the filing system locations and the logical web locations.

The settings file for NR provides a setting for so called "static" content ("httpStatic"). That defines the "root" folder for any static files so that (assuming you haven't changed any of the other logical mappings):

<staticsetting>/images/myimage.jpg would be defined in your HTML as: <img src="/images/myimg.jpg">

That is for the standard method of install. Things are slightly different if you are running in embedded mode as you simply create an Express route for your static content using:

app.use( "/static/", express.static("public") );

to map the physical "./public/" path to the logical http path "/static/".

[Nicholas O'Leary]

Oh yes, there is the "httpStatic' variable as Julian says - much more useful if you have a directory of multiple resources you want to expose, rather than one or two. Documented here: http://nodered.org/docs/configuration.html

N

--

[Jonathan Comley]

Hi Nicholas and Julian thank you both very much for replying.

Nicholas.

 I pasted your example and changed the 'file in node' to point to my file '/root/.node-red/examlpe.jpg', but I get a TypeError Argument must be a string response.

Julian.

 I don't understand where to use the <staticsetting> tag, but i would really like to!!

Thanks again

[Mark Setrem]

When this has been asked before here's the answer Nick  gave :

The best way to do it is using the httpStatic config option. This option identifies a local directory from which to serve static web content.

http://nodered.org/docs/configuration.html

(Ignore the bit which says you must set httpAdminRoot - that's only strictly necessary if you have static content whose path clashed with any of the editor's web content.)

[Jonathan Comley]

thanks Mark, 

how do i use these settings, I'm feeling dumb and I don't seem to have a setting.js file.

best regards - Jon

[Nicholas O'Leary]

When node-red starts up it logs what settings file it is using. Edit that file and restart.

Nick

--

[Mark Setrem]

You should have one somewhere! 

As per the http://nodered.org/docs/configuration.html  

try in .node-red/settings.js within the home account you installed node-red from.

If its not in there try typing:

which node-red

on a Raspberry Pi this gets the answer 

/usr/local/bin/node-red

cd to the bit before the bin e.g. cd /usr/local

and then cd lib/node_modules/node-red/

so the total path is: /usr/local/lib/node_modules/node-red

Make a back up copy of the file so you know what it looked like before you fiddle ;-)

(cp settings.js settings.bak)

[Jonathan Comley]

Hi,

Mark thank you ever so much I have now found my settings.js file, your advice was exactly what I needed.

Thanks to everyone for helping me to understand this.

Jon

On Saturday, June 20, 2015 at 4:08:15 PM UTC+1, Jonathan Comley wrote:

[Ian M]

I'm trying to do this with a png file, but I'm running into the same TypeError that Jonathan had on his third post.  If I bypass this function that adds or changes the header then NR crashes.

I can't use the htmlStatic constant as I am already using it for other static content.

Any ideas?

Ian

[Mark Setrem]

If you have the httpstatic variable set, the path to the file will need to be relative to that directory

[Dave C-J]

Hi jon,

Which version of Node-RED ? Which browser ? - I just re-tried Nick's example above - changing the header to be type  "image/png" and it works ok.. (as long as you're pointing at an existing file). Where are you seeing that error ? in the console ? or in the debug tab ? - if console can you cut/paste some more of the lines here ?

Not sure why you can't use the httpStatic - if already in use you can still link from wherever that is to your file (if it is also static) - either using ln in linux/mac or mklink in windows.

[Jonathan Comley]

Hi Dave,

I am using the httpstatic option now and it is working fine, just had to modify th,ye settings.js file.

Not sure where I was seeing the error, but it was because I hadn't changed the settings file once I did I was able to display my image.

I hope this answers your question, but if it doesn't let me know and I'll try again.

best wishes

Jon

 

[Ian M]

Okay, I've copied some of my logs and part of the flow so that everyone can look at whats going on...

27 Jun 03:28:36 - [info] Node-RED version: v0.10.6
27 Jun 03:28:36 - [info] Node.js  version: v0.10.38
27 Jun 03:28:36 - [info] Loading palette nodes
27 Jun 03:28:43 - [warn] ------------------------------------------
27 Jun 03:28:43 - [warn] Failed to register 3 node types
27 Jun 03:28:43 - [warn] Run with -v for details
27 Jun 03:28:43 - [warn] ------------------------------------------
27 Jun 03:28:43 - [info] User Directory : /home/pi/.node-red
27 Jun 03:28:43 - [info] Flows file     : /home/pi/.node-red/flows_raspberrypi.json
27 Jun 03:28:43 - [info] Server now running at http://127.0.0.1:1880/
27 Jun 03:28:43 - [info] Starting flows
27 Jun 03:28:45 - [info] Started flows
27 Jun 03:29:32 - [error] [function:70937d.20b69484] TypeError: Argument must be a string



[{"id":"e97870a9.a300a8","type":"http response","name":"","x":790.75,"y":542.75,"z":"8b7247fa.d83908","wires":[]},{"id":"16563245.d0d1ce","type":"function","name":"","func":"msg.headers = {'Content-Type' : 'image/png',}\nreturn msg;","outputs":1,"valid":true,"x":646.75,"y":542.75,"z":"8b7247fa.d83908","wires":[["e97870a9.a300a8"]]},{"id":"99c2dd26.8c2998","type":"file in","name":"","filename":"/tmp/screen.png","format":"","x":490.75,"y":542.75,"z":"8b7247fa.d83908","wires":[["16563245.d0d1ce"]]},{"id":"36ad8b4.8816974","type":"delay","name":"","pauseType":"delay","timeout":"3","timeoutUnits":"seconds","rate":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":329.75,"y":542.75,"z":"8b7247fa.d83908","wires":[["99c2dd26.8c2998"]]},{"id":"74740d05.00ecbc","type":"http in","name":"","url":"/screen.png","method":"get","x":157.75,"y":542.75,"z":"8b7247fa.d83908","wires":[["fd8035fd.912d68","36ad8b4.8816974"]]},{"id":"fd8035fd.912d68","type":"exec","command":"fbgrab /tmp/screen.png","addpay":false,"append":"","useSpawn":"","name":"","x":390.75,"y":597.75,"z":"8b7247fa.d83908","wires":[[],[],[]]}]


I have a working link in the htmlStatic that I can use, but I'd rather use this flow so that the image is refreshed just before it loads.  I'm using this to monitor a machine that I can't see and I need to check this image frequently so I don't want to initiate a flow and then switch to another tab to  load an image...

Thanks,
Ian

[Dave C-J]

Hi Ian,

aha -  thanks for that  - yes I think that was caught and fixed in this update - https://github.com/node-red/node-red/commit/38ab1550d2712265e2ee5ed295e037799c3da90f

so is now ok in the latest release.

[Ian M]

Hi Dave,
The update fixed it. Thanks very much.
Ian

[Michael Doroshenko]

Hello.

I did just that: specified httpStatic to be a local folder where I store my images. No other settings have been changed. The settings file is the correct one.

However, when I try to serve the images on a web page, but the images don't show up, unlike the rest of html content. I tried several directories and the result is the same.

I specify the img url as /icons/a.jpg ...
httpStatic folder has the subfolder icons.

What is wrong then?

[Michael Doroshenko]

I think the NodeRed version is up-to-date as well.

[Colin Law]

Have you specified the full path in httpStatic? Have you restarted node-red?

Colin

On 2 October 2016 at 05:13, Michael Doroshenko

> --
> 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+u...@googlegroups.com.

> To post to this group, send an email to node...@googlegroups.com.
> Visit this group at https://groups.google.com/group/node-red.
> To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/36ef9c93-7928-4c29-a2c9-a7ac14b1db80%40googlegroups.com.

[Nicholas O'Leary]

'icons' is a path used by the editor. If you haven't set httpAdminRoot to move the editor to a different root path, it may be conflicting.

Have you tried a different path than 'icons' ?

Nick

On Sun, 2 Oct 2016, 08:42 Colin Law, <cla...@gmail.com> wrote:

Have you specified the full path in httpStatic?  Have you restarted node-red?

Colin

On 2 October 2016 at 05:13, Michael Doroshenko
<michael.d...@gmail.com> wrote:
> Hello.
>
> I did just that: specified httpStatic to be a local folder where I store my images. No other settings have been changed. The settings file is the correct one.
>
> However, when I try to serve the images on a web page, but the images don't show up, unlike the rest of html content. I tried several directories and the result is the same.
>
> I specify the img url as /icons/a.jpg ...
> httpStatic folder has the subfolder icons.
>
> What is wrong then?
>
> --
> 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 an email to node...@googlegroups.com.
> Visit this group at https://groups.google.com/group/node-red.
> To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/36ef9c93-7928-4c29-a2c9-a7ac14b1db80%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

--
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 an email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/CAL%3D0gLsA-3aE-Yh_f5ynmfP7cjy85R_AFTkOHa3sCsB9f7qsvQ%40mail.gmail.com.

[Balázs Srancsik]

I am struggling with this a lot
Could you please share the httpAdminRoot and httpStatic settings and how you refer to it in HTML?
Thank you in advance.

2016. október 2., vasárnap 20:47:14 UTC+2 időpontban Michael Doroshenko a következőt írta:

Thank you, Nick!
You've saved my day. As soon as I moved the images to another folder with a different name, changed settings.js appropriately AND restarted node-red, the images started showing up on the web page properly.
Thanks again!

On Sun, Oct 2, 2016, 9:51 AM Nicholas O'Leary <nick....@gmail.com> wrote:

'icons' is a path used by the editor. If you haven't set httpAdminRoot to move the editor to a different root path, it may be conflicting.

Have you tried a different path than 'icons' ?

Nick

On Sun, 2 Oct 2016, 08:42 Colin Law, <cla...@gmail.com> wrote:

Have you specified the full path in httpStatic?  Have you restarted node-red?

Colin

On 2 October 2016 at 05:13, Michael Doroshenko
<michael.d...@gmail.com> wrote:
> Hello.
>
> I did just that: specified httpStatic to be a local folder where I store my images. No other settings have been changed. The settings file is the correct one.
>
> However, when I try to serve the images on a web page, but the images don't show up, unlike the rest of html content. I tried several directories and the result is the same.
>
> I specify the img url as /icons/a.jpg ...
> httpStatic folder has the subfolder icons.
>
> What is wrong then?
>
> --
> 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+u...@googlegroups.com.

> To post to this group, send an email to node...@googlegroups.com.
> Visit this group at https://groups.google.com/group/node-red.
> To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/36ef9c93-7928-4c29-a2c9-a7ac14b1db80%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

--
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+u...@googlegroups.com.

To post to this group, send an email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/CAL%3D0gLsA-3aE-Yh_f5ynmfP7cjy85R_AFTkOHa3sCsB9f7qsvQ%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

--

http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---

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/nZZXCDyKih4/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.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/CAF%3Dvhqdaym%3DHpsxiMegqjKtBRezucXE3GDiywrcxtLHuOCf9Ew%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--

Thanks.

Michael Doroshenko

+1-226-978-7719

michael.d...@gmail.com

www.linkedin.com/in/mdoroshenko