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

Dashboard
1

Hi there , i see this topic resolved UI template image 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:

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:

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

image
The picture is displayed but not rescaled !

Does someone know where i'm wrong ?
Thanks

2

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

3

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

<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 Very good !

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

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
image.png747Ă—480 15 KB

But the result is not resizing :

Where i do wrong in the template config ? ng-bind-html ? Sorry i'm a newbie in html :relaxed:

4

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

5

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

image
i'm sure i'm wrong somewhere. ?

6

if you want to have a look to the flow :

[{"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

7

Solved with this topic :slight_smile:

1 Like