Send updated images

[budiman098]

hallo master, can someone help me about my problem?
I want to make a system simulation on node-red. I want to send some image data from my file. the image in the file is the image produced by my camera and saved directly in the file.

however, for simulations I want to send 5 sample images in my local file, but alternately with a range of 30 seconds.
can someone help me?

regards,
budiman

[Steve-Mcl]

Hi, can you provide more info?

What system is this node-red on? PI? Windows box?

@budiman098

I want to send some image data from my file

Where do you want to send it? Email? MQTT? TCP?

@budiman098

image produced by my camera and saved directly in the file

What camera? Phone Camera? RPi camera? Web Camera?
Why write to file? You can probably get the image and send it without ever writing a file (but I will need details)

@budiman098

however, for simulations I want to send 5 sample images in my local file, but alternately with a range of 30 seconds.

I'm having difficulty understand what you mean here.
Is this what you want...

• send file 1
• 30s later, send file 2
• 30s later, send file 3
• 30s later, send file 4
• 30s later, send file 5
• 30s later, send file 1
• 30s later, send file 2
• 30s later, send file 3
• and so on

[budiman098]

sorry steve.
i want send file in node-red dasboard.

the image must be save in my local file because i want take samo proces in image, so the image must be seved.

for the sending picture, i want send image 1, 30s leter, send file 2. as you made it.

thank you

[Steve-Mcl]

What have you tried?

show us where you are stuck.

Screen shot and / or export of the flow will do.

[budiman098]

in the red box, i try send image from file in raspberry, but in this node only read 1 image, and not send to dashboard.

[budiman098]

when i try media node, here make a dasboard but the image will be sending need to be more specific and just one image.

[Steve-Mcl]

Use an inject to trigger the function every 30s
In the function, a counter watches & increments between 1 ~ 5 & sends a filename in msg.filename (read the built in help for the file node in the side-bar info tab on the Right hand side of node-red to understand why this works)

[{"id":"6019f410.ec184c","type":"inject","z":"a2a9b7f9.ae1948","name":"","topic":"","payload":"","payloadType":"date","repeat":"30","crontab":"","once":false,"onceDelay":0.1,"x":310,"y":580,"wires":[["9348b369.d99af"]]},{"id":"9348b369.d99af","type":"function","z":"a2a9b7f9.ae1948","name":"5 images - EDIT ME","func":"\nvar counter = context.get(\"counter\") || 0;\ncounter++;\nif(counter > 5) {\n    counter = 1;\n}\nswitch(counter){\n    case 1:\n        msg.filename = \"file name 1\"\n        break\n    case 2:\n        msg.filename = \"file name 2\"\n        break\n    case 3:\n        msg.filename = \"file name 3\"\n        break\n    case 4:\n        msg.filename = \"file name 4\"\n        break\n    case 5:\n        msg.filename = \"file name 5\"\n        break\n}\ncontext.set(\"counter\", counter); //save the counter for next time\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":580,"wires":[["a7609482.669108"]]},{"id":"a7609482.669108","type":"debug","z":"a2a9b7f9.ae1948","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":730,"y":640,"wires":[]}]

[budiman098]

thank you steve, is very helpful.
but in this case the image will send in develop mode node-red not in dashboard. i try to connect the ui media, the image not send to dasboard.
why its not worked?

and let me ask one more thing, in this code we enter the name of the picture, may we not enter the name of the picture? because the actual system of naming the image will be done by the microcontroler by itself. so all images will be saved in 1 file. can we input without having to be named?

[budiman098]

i try to connect ui media node, but ist not work because ui media just provide one file like this picture, when i want to edit more file its not be able to entered file.

[budiman098]

@PaulKeates1 like say @Steve-Mcl. the topic is duplicat with this topic.
Steve has helped me, but I want to use the image data displayed on the dashboard, and when I use UI-Media, it can't display more than 1 image, like the screenshot above.
thank you.

[Steve-Mcl]

@budiman098

can't display more than 1 image

Do you mean you want 2 or 5 images shown all at the same time?
OR
You want the image to be changed every 30s like the original question?

[budiman098]

yes steve, i want image change every 30s in dashboard.
can ui-media make it?

[budiman098]

or maybe there are nodes that can replace it, may I know?

[Steve-Mcl]

Use standard HTML <img> in ui_template (no need for additional nodes)

your function that gets filename >> file in node (return a buffer) >> ui_template node with this in the ui_template : <img ng-src="{{msg.payload}}"/>

example...

[{"id":"68c3bd33.b27cb4","type":"inject","z":"a2a9b7f9.ae1948","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":240,"y":600,"wires":[["835336f5.6ce7e8"]]},{"id":"95291454.e1da48","type":"ui_template","z":"a2a9b7f9.ae1948","group":"8e0dc95.8c8f838","name":"html image in ui_template","order":0,"width":"6","height":"6","format":"<img ng-src=\"{{msg.payload}}\"/>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":930,"y":600,"wires":[[]]},{"id":"b8f8e93.e40a518","type":"function","z":"a2a9b7f9.ae1948","name":"jpg encode buffer","func":"var getImageResult = msg.payload;\nvar b64encoded = getImageResult.toString('base64');\nmsg.payload = \"data:image/jpg;base64,\" + b64encoded;\nreturn msg;","outputs":1,"noerr":0,"x":680,"y":600,"wires":[["95291454.e1da48"]]},{"id":"835336f5.6ce7e8","type":"file in","z":"a2a9b7f9.ae1948","name":"","filename":"c:/temp/pic1.jpg","format":"","chunk":false,"sendError":false,"encoding":"none","x":460,"y":600,"wires":[["b8f8e93.e40a518"]]},{"id":"5dc9a83f.3b79a8","type":"file in","z":"a2a9b7f9.ae1948","name":"","filename":"c:/temp/pic2.jpg","format":"","chunk":false,"sendError":false,"encoding":"none","x":460,"y":660,"wires":[["b8f8e93.e40a518"]]},{"id":"96b5eeef.e647e","type":"inject","z":"a2a9b7f9.ae1948","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":240,"y":660,"wires":[["5dc9a83f.3b79a8"]]},{"id":"8e0dc95.8c8f838","type":"ui_group","z":"","name":"Test1","tab":"fa8ca888.ede6d8","order":1,"disp":true,"width":"6","collapse":false},{"id":"fa8ca888.ede6d8","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1}]

[budiman098]

thank you @Steve-Mcl, i will try

[budiman098]

@Steve-Mcl can i ask something again sir?

[DeekshaPatkar]

what can you send me the complete json file....
iam trying to upload image from my pc to website...