# Dashboard, ui\_media problem, with node code (cont.)

**URL:** <https://discourse.nodered.org/t/dashboard-ui-media-problem-with-node-code-cont/50102>\
**Category:** Dashboard\
**Created:** [24 August 2021 09:39 UTC](https://discourse.nodered.org/t/dashboard-ui-media-problem-with-node-code-cont/50102 "2021-08-24T09:39:08Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![magnusso](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/magnusso/32/37680_2.png) [@magnusso](https://discourse.nodered.org/u/magnusso)\
**Post date:** [24 August 2021 09:39 UTC](https://discourse.nodered.org/t/dashboard-ui-media-problem-with-node-code-cont/50102/1 "2021-08-24T09:39:08Z")

</div>

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

```auto
[{"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?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [24 August 2021 09:47 UTC](https://discourse.nodered.org/t/dashboard-ui-media-problem-with-node-code-cont/50102/2 "2021-08-24T09:47:45Z")

</div>

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](https://www.ispyconnect.com/camera/hikvision) 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](https://www.w3schools.com/tags/att_img_width.asp).

---

<div class="post-metadata">

**Author:** ![magnusso](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/magnusso/32/37680_2.png) [@magnusso](https://discourse.nodered.org/u/magnusso)\
**Post date:** [27 August 2021 20:37 UTC](https://discourse.nodered.org/t/dashboard-ui-media-problem-with-node-code-cont/50102/3 "2021-08-27T20:37:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [27 August 2021 21:11 UTC](https://discourse.nodered.org/t/dashboard-ui-media-problem-with-node-code-cont/50102/4 "2021-08-27T21:11:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [26 September 2021 21:12 UTC](https://discourse.nodered.org/t/dashboard-ui-media-problem-with-node-code-cont/50102/5 "2021-09-26T21:12:37Z")

</div>

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