# \[RESOLVED\] Grab picture from Internet, resize and display on Dashboard

**URL:** <https://discourse.nodered.org/t/resolved-grab-picture-from-internet-resize-and-display-on-dashboard/8223>\
**Category:** Dashboard\
**Created:** [21 February 2019 14:01 UTC](https://discourse.nodered.org/t/resolved-grab-picture-from-internet-resize-and-display-on-dashboard/8223 "2019-02-21T14:01:52Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [21 February 2019 14:01 UTC](https://discourse.nodered.org/t/resolved-grab-picture-from-internet-resize-and-display-on-dashboard/8223/1 "2019-02-21T14:01:52Z")

</div>

Hi there , i see this topic resolved [UI template image](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395?u=superninja) but with blanc messages. So i post here :

I would like to display on the Dashboard, an image that can change depending on the arrival of a text message in a payload (this picture is grabbed on Internet ) :  
**Function Node:**

```auto
if (msg.payload.event === 'running') {
     var imgUrl = "https://pngimage.net/wp-content/uploads/2018/06/power-on-png-6.png";
     msg.payload = "<img src = '" + imgUrl + "' alt = 'Logo image not found' />";
     return msg;
     }
if (msg.payload.event === 'pre-stop') {
     var imgUrl = "https://pngimage.net/wp-content/uploads/2018/06/power-off-png-2.png";
     msg.payload = "<img src = '" + imgUrl + "' alt = 'Logo image not found' />";
     return msg;
     }

```

**TemplateUI:**

```auto
<div height =" 50 "style =" height: 50px; ">
<div ng-bind-html = "msg.payload" width = "35"> <br/>
</ Div>

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/c9d5c18f32d433aa986b8294b4ec8daca8ceeda8.png)  
_The picture is displayed but not rescaled !_

Does someone know where i'm wrong ?  
Thanks

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [21 February 2019 14:40 UTC](https://discourse.nodered.org/t/resolved-grab-picture-from-internet-resize-and-display-on-dashboard/8223/2 "2019-02-21T14:40:53Z")

</div>

The ui\_template does not automatically resize to fit every message. You should manually set the size you require in the config page

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [22 February 2019 07:47 UTC](https://discourse.nodered.org/t/resolved-grab-picture-from-internet-resize-and-display-on-dashboard/8223/3 "2019-02-22T07:47:34Z")

</div>

**Yes , @dceejay, To test the resize picture in TemplateUI i do that :**

```auto
<div height="50" style="height: 50px;">
<img src="https://pngimage.net/wp-content/uploads/2018/06/power-on-png-6.png" width="35"><br/>
</div>

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/47306e29559b5bcdc0b794daaddfb021dd4b47b3.png) **Very good !**

**i want to do the same but with this msg.payload before :**

```auto
var imgUrl = "https://pngimage.net/wp-content/uploads/2018/06/power-on-png-6.png";
msg.payload = "<img src = '" + imgUrl + "' alt = 'Logo image not found' />";
return msg;

```

**Then , resize and display the incomming payload picture in the Template UI :**

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4a926b8722fcccaf7a54cdc9be2a05d7c14e0637.png)

**But the result is not resizing :**

![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/c9d5c18f32d433aa986b8294b4ec8daca8ceeda8.png)

**Where i do wrong in the template config ?** `ng-bind-html` ? Sorry i'm a newbie in html 😌

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [22 February 2019 08:15 UTC](https://discourse.nodered.org/t/resolved-grab-picture-from-internet-resize-and-display-on-dashboard/8223/4 "2019-02-22T08:15:19Z")

</div>

The size field you show says “Auto”. I said to set it manually.

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [22 February 2019 08:56 UTC](https://discourse.nodered.org/t/resolved-grab-picture-from-internet-resize-and-display-on-dashboard/8223/5 "2019-02-22T08:56:27Z")

</div>

**if i change "Auto" to "2x2" :**

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/c1ad12867ea0a412a9b11209519c4501dcb0938d.png)  
i'm sure i'm wrong somewhere. ?

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [22 February 2019 09:10 UTC](https://discourse.nodered.org/t/resolved-grab-picture-from-internet-resize-and-display-on-dashboard/8223/6 "2019-02-22T09:10:21Z")

</div>

if you want to have a look to the flow :

```auto
[{"id":"c7028dcd.6942","type":"inject","z":"fe2c7bc6.bd49c8","name":"running","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":137.50000381469727,"y":677.5000095367432,"wires":[["582822a4.ef3ebc"]]},{"id":"1fc2aae9.453a75","type":"inject","z":"fe2c7bc6.bd49c8","name":"pre-stop","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":140,"y":722.5000104904175,"wires":[["72a7918c.d5c84"]]},{"id":"582822a4.ef3ebc","type":"function","z":"fe2c7bc6.bd49c8","name":"run","func":"msg.payload = {event : 'running' } ; \nreturn msg;\n","outputs":1,"noerr":0,"x":277.50000381469727,"y":676.2500095367432,"wires":[["43c1c5e9.8a0f7c"]]},{"id":"72a7918c.d5c84","type":"function","z":"fe2c7bc6.bd49c8","name":"stop","func":"msg.payload = {event:'pre-stop'};\nreturn msg;\n","outputs":1,"noerr":0,"x":278.75000381469727,"y":725.0000104904175,"wires":[["43c1c5e9.8a0f7c"]]},{"id":"43c1c5e9.8a0f7c","type":"function","z":"fe2c7bc6.bd49c8","name":"adapt","func":"if(msg.payload.event === 'running') { \n var imgUrl = \"http://educainternet.es/documents/10718/download\";\n msg.payload = \"<img src='\"+imgUrl+\"'alt='Logo image not found' />\";\n return msg;\n } \nif(msg.payload.event === 'pre-stop') { \n\n var imgUrl = \"https://pngimage.net/wp-content/uploads/2018/06/power-off-png-2.png\";\n msg.payload = \"<img src='\"+imgUrl+\"'alt='Logo image not found' />\";\n return msg;\n } \n","outputs":1,"noerr":0,"x":415.5357131958008,"y":697.6786603927612,"wires":[["fe695cb8.45e81"]]},{"id":"fe695cb8.45e81","type":"ui_template","z":"fe2c7bc6.bd49c8","group":"72067beb.d28e74","name":"display","order":6,"width":"0","height":"0","format":"\n\n\n\n<div height=\"50\" style=\"height: 50px;\">\n<div ng-bind-html=\"msg.payload\" width=\"35\"><br/>\n</div>\n\n\n<!--\n<div ng-bind-html=\"msg.payload\"></div>\n\n<div height=\"50\" style=\"height: 50px;\">\n<img src=\"http://educainternet.es/documents/10718/download\" width=\"35\"><br/>\n</div>\n\nhttps://pngimage.net/wp-content/uploads/2018/06/power-on-png-1.png\nhttp://educainternet.es/documents/10718/download\nhttps://pngimage.net/wp-content/uploads/2018/06/power-off-png-5.png\nhttps://pngimage.net/wp-content/uploads/2018/06/power-on-png-6.png\nhttps://pngimage.net/wp-content/uploads/2018/06/power-off-png-2.png\nhttps://banner2.kisspng.com/20180404/euq/kisspng-computer-icons-electrical-switches-button-off-5ac452e9048ee7.9894894815228157210187.jpg\n\n\n<div height=\"50\" style=\"height: 50px;\" ng-click=\"send({payload:'Clicked'});\">\n<img src=\"http://educainternet.es/documents/10718/download\" width=\"35\"><br/>\n</div>\n\n<div height=\"50\" style=\"height: 50px;\">\n<img src=\"http://educainternet.es/documents/10718/download\" width=\"35\"><br/>\n</div>\n\n<div height=\"50\" style=\"height: 50px;\" ng-bind-html=\"msg.payload\" width=\"35\">\n</div>\n\n<div height=\"50\" style=\"height: 50px;\">\n<div ng-bind-html=\"msg.payload\" width=\"35\"><br/>\n</div>\n\n<div style=\"display: inline-block; width: 150px; height: 150px;\" ng-click=\"send({payload:'Clicked'});\">\n<img src=\"/Block_Gray.png\" width=\"140\"><br/>\n</div>\n\n\n\n-->\n\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":558.7500076293945,"y":698.7500104904175,"wires":[[]]},{"id":"72067beb.d28e74","type":"ui_group","z":"","name":"Resume","tab":"255f2630.e1c57a","order":2,"disp":true,"width":"12","collapse":true},{"id":"255f2630.e1c57a","type":"ui_tab","z":"","name":"wvc","icon":"flash_on","order":1}]

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/7d9041d8b61806f0e63540ba4504f52f52abc837.png)

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [22 February 2019 14:48 UTC](https://discourse.nodered.org/t/resolved-grab-picture-from-internet-resize-and-display-on-dashboard/8223/7 "2019-02-22T14:48:07Z")

</div>

Solved with this topic 🙂

> [@UI template image via msg.payload](https://discourse.nodered.org/t/ui-template-image-via-msg-payload/4395/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