Can you put Pictures in/on `template` node?

Dashboard
1

The template node (the gui one).

Can I make it show a picture rather than an icon?

2

Not quite sure of your exact question.

Yes, you can use ui_template to show an image. Just use an <img> tag and put the image somewhere accessible - for example in Node-RED's static web folder (configured in settings.js). Or even encoded as a data url if it isn't too large.

Or do you mean that you want an image to represent the page in your tabs? There are rules for what works and what doesn't but you can easily convert from an image to a .ico image using an online tool.

3

My bad. Sorry.

Your first guess is correct.

Rather than showing an icon's image, I want to show a picture in/on it's.... area

Good to know. I thought it would be possible, but just wasn't quite sure enough.

Thanks.
(Working on a new project)

4

I've looked on how to do this and the examples which supposedly work don't for me.

There is some conflict (for me) about the path and file name.

For the sake of (please) giving me a baseline, could you show me how to do it with an inject node and a template node to show a file which is in the httpStatic directory called test.jpg?

5 
[{"id":"1dcee7c93ef6b81e","type":"ui_template","z":"44908087.da8e9","group":"93fb734b1b23203e","name":"StaticImageCam2Poort","order":3,"width":0,"height":0,"format":"<body>\n\n<p>\n<a href=\"/grabcam2.jpg\" target=\"_blank\">\n<img border=\"0\" alt=\"CamVoorGrab\" src=\"/grabcam2.jpg\" width=\"1000\"  height=\"800\">\n</a>\n</p>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":1010,"y":700,"wires":[[]]},{"id":"93fb734b1b23203e","type":"ui_group","name":"Cam 2 Poort Grab","tab":"5afa5e126e0accce","order":1,"disp":true,"width":"19","collapse":false},{"id":"5afa5e126e0accce","type":"ui_tab","name":"Cam 2 Grab","icon":"icofont-camera-alt","order":34,"disabled":false,"hidden":false}]

Here's an example.
This will load the picture from your httpstatic directory.
The httpstatic directory need to be set in the settings.js
For me it's;
httpStatic: '/home/pi/node-red-static/',

2 Likes
6

Share what you have and what errors you are seeing.

7

No errors as such.

I just get the "Image not found" message in the template node on the GUI side of things.

8

I'm missing something.

<body>
<p>
<a href="/grabcam2.jpg" target="_blank">
<img border="0" alt="CamVoorGrab" src="/grabcam2.jpg" width="1000"  height="800">
</a>
</p>

So the file for which it is looking is grabcam2.jpg.... Ok, I can change the name.
But I am wanting to use .svg files now.
(and I want it to be variable)

9

Have you set up your static folder? Also, have you made a change to httpNodeRoot?

If the answers are yes then no, I would start by putting a very simplistic test.html page into the static folder and try to access it using http://localhost:1880/test.html.

If you can access that, then the image link should work. And yes, you can simply change the name to match something in the folder. SVG's will work as well as jpg/png/gif.

10

I got that working as you gave me after pointing it to a file.

Thanks, but I think you over estimated my intelligence.
I don't really get all this structure stuff.

11

I hope I have. It worked with what @edje11 gave me.
But that is jpg files.

httpNodeRoot. No changes as far as I know.

I'm now wanting to use .svg files.

I'm stuck on how to put the code in the template node because as it is, it has this:
src="data:image/png;base64,{{msg.payload}}"

So png.... of jpg.
Changing that to svg didn't work.
(confused)

Exert from settings.js:

    // When httpAdminRoot is used to move the UI to a different root path, the
    // following property can be used to identify a directory of static content
    // that should be served at http://localhost:1880/.
    //httpStatic: '/home/nol/node-red-static/',
    httpStatic: '/home/me/.node-red/public/',
12

To put the cards on the table:

Two parts of the flow.
Top part doesn't work.
Bottom part does.

[{"id":"380ae4bb387b5df7","type":"base64","z":"0918ee609bf69fc7","name":"","action":"str","property":"payload","x":3060,"y":200,"wires":[["9cbd16dc65cadcb8"]]},{"id":"181fb98b65a2d183","type":"inject","z":"0918ee609bf69fc7","name":"Inject","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"/Pictures/wall.jpg","payloadType":"str","x":2770,"y":200,"wires":[["c553bb3272959d44"]]},{"id":"c553bb3272959d44","type":"file in","z":"0918ee609bf69fc7","name":"Enable","filename":"/home/me/.node-red/public/Pictures/ENABLE.svg","format":"","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":2910,"y":200,"wires":[["380ae4bb387b5df7"]]},{"id":"9cbd16dc65cadcb8","type":"ui_template","z":"0918ee609bf69fc7","group":"d9a63921.b84ff","name":"","order":10,"width":"2","height":"1","format":"\n\n<img width=\"100%\" height=\"100%\" alt=\"Image not found\" src=\"data:image/svg;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":3270,"y":200,"wires":[[]]},{"id":"76f9c28c.8d324c","type":"inject","z":"0918ee609bf69fc7","name":"","props":[{"p":"payload","v":"","vt":"date"},{"p":"topic","v":"","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":2760,"y":370,"wires":[["91ff3a3e.591a38"]]},{"id":"91ff3a3e.591a38","type":"file in","z":"0918ee609bf69fc7","name":"Test","filename":"/home/me/.node-red/public/test_picture.png","format":"","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":2900,"y":370,"wires":[["e66563f4.00136"]]},{"id":"e66563f4.00136","type":"base64","z":"0918ee609bf69fc7","name":"","action":"str","property":"payload","x":3070,"y":370,"wires":[["19fd76a4842c7568"]]},{"id":"19fd76a4842c7568","type":"ui_template","z":"0918ee609bf69fc7","group":"d9a63921.b84ff","name":"","order":10,"width":"2","height":"1","format":"\n\n<img width=\"100%\" height=\"100%\" alt=\"Image not found\" src=\"data:image/png;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":3270,"y":390,"wires":[[]]},{"id":"d9a63921.b84ff","type":"ui_group","name":"Group 3","tab":"273de47d.2d2bac","order":8,"disp":true,"width":"7","collapse":false},{"id":"273de47d.2d2bac","type":"ui_tab","name":"TEST","icon":"dashboard","order":22,"disabled":false,"hidden":false}]

Given all the files exist.

13

Ok, @Steve-Mcl has shown me how to get it working in another thread.

I don't want to flood with multiple threads.

Thanks though @TotallyInformation and @edje11.
Now I have a size problem with how is is shown on the dashboard.

See this thread (only for clarity)