Displaying an image in dashboard from a Url

[evanic14]

Hi,

I have a problem.
I'm using the node-red-contrib-buienradar library. This is basically an API that sends weather data. I would like to diplay an icon in my dashboard that came from that API message. But I can't get the URL converted to an image.

I hope you van help me.
emiel

[stefan24]

@evanic14

node-red-contrib-buienradar

They send as

output a msg.payload.buienradar object which holds all the data

Do you mean

icoonactueel - an URL to the current weather icon

Please give me an example of the URL, they generate.

[evanic14]

Hi stefan,

Thanks for the quick response.

This is what my code looks like. In the debug screen you can see the URL that needs to be converted to a image. I've tried to show the image in my dashboard by sending it to a text functionbock, but this only shows the URL and not the image, but I already thought this would happen.

I also installed another library which is called: node-red-contrib-image-simple-node. This library can convert the URL to a image, but I can't send it to my dashboard.

I hope this is enough information for you.

[bakman2]

use a ui_template node.

<p>
<img  src="{{msg.payload.buienradar.icoonactueel}}" />
</p>

The icon will be displayed.

[Steve-Mcl]

@evanic14

I also installed another library which is called: node-red-contrib-image-simple-node. This library can convert the URL to a image, but I can't send it to my dashboard.

If you use node-red-contrib-image-tools it can grab an image from internet, convert to base64 & then you simply inject that into a ui_template

[{"id":"39d92325.5b31ec","type":"jimp-image","z":"da4f1a2d.d31008","name":"Kitten from placekitten.com","data":"http://placekitten.com/300/300","dataType":"str","ret":"b64","parameter1":"","parameter1Type":"msg","parameter2":"","parameter2Type":"msg","parameter3":"","parameter3Type":"msg","parameter4":"","parameter4Type":"msg","parameter5":"","parameter5Type":"msg","parameter6":"","parameter6Type":"msg","parameter7":"","parameter7Type":"msg","parameter8":"","parameter8Type":"msg","parameterCount":0,"jimpFunction":"none","selectedJimpFunction":{"name":"none","fn":"none","description":"Just loads the image.","parameters":[]},"x":260,"y":120,"wires":[["2d9d272a.787cb8","a5ecda5c.164c28","7f9bc166.833c3"]]},{"id":"2d9d272a.787cb8","type":"image viewer","z":"da4f1a2d.d31008","name":"","width":"200","data":"payload","dataType":"msg","x":510,"y":140,"wires":[[]]},{"id":"4ce2fac6.848174","type":"ui_button","z":"da4f1a2d.d31008","name":"","group":"7de23636.088a88","order":1,"width":0,"height":0,"passthru":false,"label":"Get Image from internet","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":220,"y":60,"wires":[["39d92325.5b31ec"]]},{"id":"a5ecda5c.164c28","type":"debug","z":"da4f1a2d.d31008","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":480,"y":60,"wires":[]},{"id":"d615e8d1.844438","type":"ui_template","z":"da4f1a2d.d31008","group":"7de23636.088a88","name":"ui template","order":1,"width":"6","height":"5","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":690,"y":100,"wires":[[]]},{"id":"7f9bc166.833c3","type":"template","z":"da4f1a2d.d31008","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img width=\"160px\" height=\"160px\" src=\"{{{payload}}}\">","output":"str","x":520,"y":100,"wires":[["d615e8d1.844438"]]},{"id":"7de23636.088a88","type":"ui_group","z":"","name":"Default","tab":"59c1a803.3cb648","order":1,"disp":true,"width":"6","collapse":false},{"id":"59c1a803.3cb648","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

[evanic14]

This is what i've typed.

But I don't have a image yet.

[bakman2]

Did you apply the template node to the correct tab/group ?

Works for me

[evanic14]

(its supposed to be diplayed right below the temperature chart)

[bakman2]

Hold on: read my post with the code again, i changed it in the mean time, single quotes don't work, change it to double quotes.

[evanic14]

I used double quotes this time and i think i have selected teh right tab.

This is what the template block looks like.

[bakman2]

You need to inject again before it gets updated right.

But if it is still not working, on your dashboard, right click near the location the icon should appear > inspect element and find the template with the img tag, also check the network/console tab if there are errors related to the image.

also double quotes on the end of the string ? (as we cant see that)

[evanic14]

yes, I used double quotes on the end aswell. But i don't know how I can inject the url again.

[evanic14]

I finaly figured it out.
This is the setup for all of the function blocks.

This is the code in the orange block, this block determines the size of the image.

(part 1)

[evanic14]

This is the code in the blue block, this is the code that converts the URL to a image.

And this is how it looks like in my dashboard.

So thanks to all the people that have helped me and I hope that this explanation can help others.

(part 2)

[bakman2]

Complexity for no reason, you can use the template node directly and can supply the size as well.

[evanic14]

well, in my case it isn't unnecessary because the image would've been a bit too big.
But yeah, it isn't necessary if you only want to see the image.