UI template image via msg.payload

Dashboard
1

Set up a UI TEMPLATE NODE.
Want to display an image
Method 1:
<img ng-src=''http://192.168.3.11/picture/snapshot.jpg" height="470" width="280" />

This works fine.

Method 2:
using a function to set the
msg.payload = 'http://192.168.3.11/picture/snapshot.jpg";
return msg;

Then in the UI Template passed in the msg.payload.

But the image does not show.

Any ideas?

2

this works!

3

Do you mean you have solved your problem?

4

it worked.

5

The goal is to display a picture from a http as a payload and display on the Dashboard with a UI Template :
i try this :

This is mine :

msg.payload = 'https://pngimage.net/wp-content/uploads/2018/06/power-on-png-6.png';
return msg;

Then i paste : <img src= "msg.payload" /> in the UI Template like this : image

but nothing display : image

i missed something ?! @sweetwater

6

i found the solution : in the UI Template paste this : :smiley:

<p> Status:
<img width="30" height="30" src=  {{msg.payload}} alt='Image not found'  />
</p>

image

And go further :

add in the function node : msg.title = 'Working good !' ;
and in the UI Template : title={{msg.title}}

title
display a message when the mouse is over

8

how to show the local imageļ¼Ÿ
I use msg.payload = 'file:///home/ubuntu/1.png';
but failed

2 Likes
9

im trying to get image from raspberry and post at dashboard. can anyone help me?

10

@trihook @munuluka
after put a picture in your raspberry in the folder /home/pi/Pictures ( off.png picture in this example) :
try this flow :

[{"id":"43f3ac9.5214a54","type":"inject","z":"1dec9bbc.37a314","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":90,"y":2130,"wires":[["7fe75716.574148"]]},{"id":"49b00b00.d657b4","type":"ui_template","z":"1dec9bbc.37a314","group":"b930fe7e.897db","name":"","order":1,"width":"6","height":"6","format":"\n \n <img width=\"100%\" height=\"100%\" alt=\"Image not found\" src=\"data:image/png;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":610,"y":2130,"wires":[[]]},{"id":"4a8daeb2.4a1a7","type":"base64","z":"1dec9bbc.37a314","name":"","action":"str","property":"payload","x":470,"y":2130,"wires":[["49b00b00.d657b4"]]},{"id":"7fe75716.574148","type":"file in","z":"1dec9bbc.37a314","name":"","filename":"/home/pi/Pictures/off.png","format":"","chunk":false,"sendError":false,"encoding":"none","x":280,"y":2130,"wires":[["4a8daeb2.4a1a7"]]},{"id":"b930fe7e.897db","type":"ui_group","z":"","name":"picture","tab":"250de740.57ee78","order":9,"disp":true,"width":"6","collapse":false},{"id":"250de740.57ee78","type":"ui_tab","z":"","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

this look like this :
image

and the result in Dashboard:
image

3 Likes
11

what is base 64 pallete?

12
1 Like
13

thanks both of you, now it works

14

image but now only the image display in small area. can anyone help me solve this problem

15

you have to play with this settings in the Template node :
image
First try to change "Size" .

1 Like
16

thank you again , it works.

1 Like
17

this works fine as long as the filename is fix.
But how to display a picture from the given directory on filename in msg.payload?

18

You have to inject a msg.filename with the way to the picture in.
Like this 2 examples:

image
image695Ɨ81 8.62 KB 

[{"id":"3a1bff0b.55d3c","type":"ui_template","z":"a8b1b208.7036f","group":"c39cfd51.14f1c","name":"","order":1,"width":"6","height":"6","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":false,"templateScope":"local","x":920,"y":1510,"wires":[[]]},{"id":"db2e5ea3.ed84","type":"base64","z":"a8b1b208.7036f","name":"","action":"str","property":"payload","x":770,"y":1510,"wires":[["3a1bff0b.55d3c"]]},{"id":"bc137f20.f932b","type":"function","z":"a8b1b208.7036f","name":"msg.filename","func":"msg.filename = \"/home/pi/Pictures/off.png\";\nreturn msg;\n    \n\n","outputs":1,"noerr":0,"x":340,"y":1510,"wires":[["4757d887.183fc8"]]},{"id":"ee87f65b.9f4398","type":"inject","z":"a8b1b208.7036f","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":170,"y":1510,"wires":[["bc137f20.f932b"]]},{"id":"4757d887.183fc8","type":"file in","z":"a8b1b208.7036f","name":"","filename":"","format":"","chunk":false,"sendError":false,"encoding":"none","x":570,"y":1510,"wires":[["db2e5ea3.ed84"]]},{"id":"2672a340.075b0c","type":"change","z":"a8b1b208.7036f","name":"pay to msg.filename","rules":[{"t":"move","p":"payload","pt":"msg","to":"filename","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":1570,"wires":[["4757d887.183fc8"]]},{"id":"f4caf68a.661d88","type":"inject","z":"a8b1b208.7036f","name":"/home/pi/Pictures/off.png","topic":"","payload":"/home/pi/Pictures/off.png","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":140,"y":1570,"wires":[["2672a340.075b0c"]]},{"id":"c39cfd51.14f1c","type":"ui_group","z":"","name":"camFoscam","tab":"250de740.57ee78","order":13,"disp":true,"width":"6","collapse":true},{"id":"250de740.57ee78","type":"ui_tab","z":"","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
1 Like
19

Thank you.
Works like a charm.
"msg.filename" was the point
Sorry for late reply.

1 Like
20

Hi,
I could show the image. I put like SuperNinja said. and also I put a image_preview.
On Image_preview I see the image.
On /ui/ web I couldn't see anything.
Thanks for your help,
Guillem