Dashboard, ui_media problem, with node code (cont.)

Dashboard
1

Cont. to thred https://discourse.nodered.org/t/dashboard-ui-media-problem-with-node-code/42567, @Steve-Mcl, many thanks for your code, it works.

[{"id":"16302fa9.75087","type":"function","z":"5d3f964c.fef898","name":"to base64 img","func":"\nmsg.payload =  msg.payload.toString('base64');\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1300,"y":2000,"wires":[["29f11527.839e1a"]]},{"id":"dd8f1ce6.3de7a","type":"http request","z":"5d3f964c.fef898","name":"","method":"GET","ret":"bin","paytoqs":"ignore","url":"https://picsum.photos/200","tls":"","persist":false,"proxy":"","authType":"","x":1090,"y":2000,"wires":[["16302fa9.75087"]]},{"id":"5b79d89b.5bf248","type":"inject","z":"5d3f964c.fef898","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":920,"y":2000,"wires":[["dd8f1ce6.3de7a"]]},{"id":"29f11527.839e1a","type":"template","z":"5d3f964c.fef898","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<div>\n  <img src=\"data:image/png;base64, {{{payload}}}\" />\n</div>","output":"str","x":1120,"y":2060,"wires":[["db91e0b6.fb0c6"]]},{"id":"db91e0b6.fb0c6","type":"ui_template","z":"5d3f964c.fef898","group":"da148e61.f015f","name":"","order":5,"width":"6","height":"6","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1290,"y":2060,"wires":[[]]},{"id":"da148e61.f015f","type":"ui_group","name":"Demo","tab":"da5706ae.6caf58","order":3,"disp":true,"width":"12","collapse":false},{"id":"da5706ae.6caf58","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

Would you be so kind to give your advice on resizing the image, the problem is that the surveillance camera snapshot is very large, 8MP?

2

Do you mean you actually want the pixel count reduced (image resize) or that you want the image on the dashboard to be shown smaller (as in specifying the img width+height)?

If you want an actually smaller image (because 8mp is slow and bloated and over the top) then normally web cameras have alternative stream URLs for permit you to request a smaller image by using query parameters e.g. http://192.168.1.20/cgi-bin/viewer/video.jpg?resolution=640x480 http://192.168.1.20/img/snapshot.cgi?size=2 See here for more examples.

If you simply want the original 8mp image to look smaller on the dashboard, specify the viewing height and width using img attributes.

3

Unfortunately, requesting a smaller image is not possible. And sending the 8MP to the dashboard does not make any sense.

What I am thinking is that could node red reduce the pixel count.

4

In which case, node-red-contrib-image-tools can resize images and return a buffer or base64 for display on dashboard.

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.