Insert <iframe> from BuienRadar not working

Dashboard
1

Hi NR users
question
on the buienradar website you can create a iframe
see here:
https://www.buienradar.nl/overbuienradar/gratis-weerdata

the iframe is here :
< iframe src="https://gadgets.buienradar.nl/gadget/zoommap/?lat=52.37403&lng=4.88969&overname=2&zoom=6&naam=amsterdam&size=2&voor=1" scrolling=no width=256 height=256 frameborder=no>

i tried everything but i cannot solve the issue to display this on my dashboard

does anybody has an example to display this iframe on my dashboard

many thanks in advance

2

Works fine

21
Screenshot 2019-09-21 at 11.39.21.jpg566Ă—672 44 KB

template node:

[{"id":"a0e19392.6a90b8","type":"ui_template","z":"ac3a9890.7ebed","group":"42d071c1.e1346","name":"","order":0,"width":0,"height":0,"format":"<IFRAME SRC=\"https://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256\" NORESIZE SCROLLING=NO HSPACE=0 VSPACE=0 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH=256 HEIGHT=256></IFRAME>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":720,"y":552,"wires":[[]]},{"id":"42d071c1.e1346","type":"ui_group","z":"","name":"buienradar","tab":"76ec6942.7f7ab","disp":true,"width":"6","collapse":false},{"id":"76ec6942.7f7ab","type":"ui_tab","z":"","name":"FINANCES","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
1 Like
3

Yes this works great ...
do you also have a iframe "refresh" in place ?
so every X minutes/hours its going to refresh the iframe ?
thx

4

even in het Nederlands, als je de url wijzigd naar degene die je zelf in de eerste post hebt gegeven, dan word het plaatje direct geupdate, hoeft niet te refreshen, ze serveren elke 5 (of 10 ligt er aan wat je opvraagd) een nieuwe.

1 Like
5

Thx man !
i will have a look

1 Like
6

I am struggling to refresh the iframe from buienradar.
I am using it on my dashboard, but ones the the page is loaded, i can not refresh the iframe it self, i need to refresh the whole page to get it updated.
Is there a way in where I can only refresh the iframe?

[{"id":"7a2ea790.e11b08","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"68d3a342.bb429c","type":"inject","z":"7a2ea790.e11b08","name":"","topic":"","payload":"","payloadType":"date","repeat":"300","crontab":"","once":true,"onceDelay":0.1,"x":130,"y":100,"wires":[["9ab79615.d703d8"]]},{"id":"f8dca0d4.d7f61","type":"debug","z":"7a2ea790.e11b08","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":600,"y":100,"wires":[]},{"id":"9ab79615.d703d8","type":"ui_template","z":"7a2ea790.e11b08","group":"aea3e167.c2226","name":"Buienradar","order":1,"width":"5","height":"5","format":"<IFRAME SRC=\"https://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256\" NORESIZE SCROLLING=NO HSPACE=0 VSPACE=0 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH=256 HEIGHT=256></IFRAME>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":350,"y":100,"wires":[["f8dca0d4.d7f61"]]},{"id":"aea3e167.c2226","type":"ui_group","z":"","name":" Huidig","tab":"117fe5ac.4c689a","order":1,"disp":false,"width":"14","collapse":false},{"id":"117fe5ac.4c689a","type":"ui_tab","z":"","name":"Weer","icon":"dashboard","disabled":false,"hidden":false}]
7

I thought the image would rotate but it doesn't. Also for @menno.

To refresh it, html can be passed the template node via msg.template.

[{"id":"9d693c2.436114","type":"inject","z":"de63431d.592d8","name":"","topic":"","payload":"","payloadType":"date","repeat":"300","crontab":"","once":true,"onceDelay":0.1,"x":142,"y":96,"wires":[["f3dee54c.4e5d68"]]},{"id":"96202238.dc2c38","type":"debug","z":"de63431d.592d8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":578,"y":96,"wires":[]},{"id":"39c946a7.272f82","type":"ui_template","z":"de63431d.592d8","group":"87e898a3.1c91f","name":"Buienradar","order":1,"width":"5","height":"5","format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":430,"y":96,"wires":[["96202238.dc2c38"]]},{"id":"f3dee54c.4e5d68","type":"function","z":"de63431d.592d8","name":"","func":"o = \"<IFRAME SRC='https://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256' NORESIZE SCROLLING=NO HSPACE=0 VSPACE=0 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH='100%' HEIGHT='100%'></IFRAME>\"\nreturn {template:o};","outputs":1,"noerr":0,"x":290,"y":96,"wires":[["39c946a7.272f82"]]},{"id":"87e898a3.1c91f","type":"ui_group","z":"","name":" Huidig","tab":"fb750634.08c1a8","order":1,"disp":false,"width":"14","collapse":false},{"id":"fb750634.08c1a8","type":"ui_tab","z":"","name":"Weer","icon":"dashboard","disabled":false,"hidden":false}]
8

Hi Bakman, thanks for your responds,

The image does rotate and shows 6 rain radar images.
Each image represents 10 minutes.Lets say the iframe is loaded at 11 in the morning, it will show rain radar between 10.30 & 11.30.
But as long as the page is not refreshed, it will at 15.00, still show the images from 10.30 till 11.30.
Also, when I manualy trigger the time stamp in node red, it will not refresh the <iframe.

9

Got it.

Using msg.template :
You can also define the template content via msg.template , so you can use external files for example.
Template will be reloaded on input if it has changed.

As msg.template didn't change, nothing happens, I have added some code to change the iframe each time the inject node is triggered. This works, or at least I see the iframe reloading.

[{"id":"71cda6b.e5d0fd8","type":"inject","z":"7a62b435.e5dde4","name":"","topic":"","payload":"","payloadType":"date","repeat":"60","crontab":"","once":true,"onceDelay":0.1,"x":334,"y":192,"wires":[["98f7b0fe.6741e"]]},{"id":"b1ef7bc9.41b2","type":"debug","z":"7a62b435.e5dde4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":770,"y":192,"wires":[]},{"id":"82d934f6.ddccc8","type":"ui_template","z":"7a62b435.e5dde4","group":"2f5bb252.c9d756","name":"Buienradar","order":1,"width":"5","height":"5","format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":622,"y":192,"wires":[["b1ef7bc9.41b2"]]},{"id":"98f7b0fe.6741e","type":"function","z":"7a62b435.e5dde4","name":"","func":"d = new Date().getTime()\no = \"<IFRAME SRC='https://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256&d=\"+d+\"' NORESIZE SCROLLING=NO HSPACE=0 VSPACE=0 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH='100%' HEIGHT='100%'></IFRAME>\"\nreturn {template:o};","outputs":1,"noerr":0,"x":482,"y":192,"wires":[["82d934f6.ddccc8"]]},{"id":"2f5bb252.c9d756","type":"ui_group","z":"","name":" Huidig","tab":"61b227eb.4f6b9","order":1,"disp":false,"width":"14","collapse":false},{"id":"61b227eb.4f6b9","type":"ui_tab","z":"","name":"Weer","icon":"dashboard","disabled":false,"hidden":false}]
1 Like
10

Thanks a million, now it is refreshing

11

I have been struggling with this for more than a few hours now..... Would love a second set of eyes on it.

I have an iframe with a weather widget that I want to refresh every hour.

image

Here is the flow;

[{"id":"839ab2d0.2aa88","type":"inject","z":"6364e20c.ebb584","name":"1 hour","topic":"","payload":"","payloadType":"date","repeat":"3600","crontab":"","once":false,"onceDelay":"","x":200,"y":620,"wires":[["b50d0fb3.4c07"]]},{"id":"d09f74c6.1f4a38","type":"ui_template","z":"6364e20c.ebb584","group":"c5116fe8.3a0b1","name":"Weather Widget","order":16,"width":"6","height":"12","format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":580,"y":620,"wires":[[]]},{"id":"b50d0fb3.4c07","type":"function","z":"6364e20c.ebb584","name":"refresh iFrame","func":"d = new Date().getTime()\no = \"<IFRAME SRC='https://www.meteoblue.com/en/weather/widget/three/temecula_united-states-of-america_5401395?geoloc=fixed&nocurrent=0&noforecast=0&days=6&tempunit=FAHRENHEIT&windunit=MILE_PER_HOUR&layout=image&d=\\\"+d+\\\"' frameborder='0' style='width: 690px; height: 604px'></IFRAME>\"\nreturn {template:o};","outputs":1,"noerr":0,"x":380,"y":620,"wires":[["d09f74c6.1f4a38"]]},{"id":"c5116fe8.3a0b1","type":"ui_group","z":"","name":"","tab":"5fb8a788.d350d8","disp":true,"width":"6","collapse":false},{"id":"5fb8a788.d350d8","type":"ui_tab","z":"","name":"MeteoBlue","icon":"dashboard","order":15,"disabled":false,"hidden":false}]

Using the 'solution' from 2 posts up.....
I believe that the problem is the date/time stamp is not making its way onto the weather widget and so it is not updating since nothing changes with each hourly inject.
Here is a snapshot of the developer tools showing the ULR is "wrong";

image

If I wait an hour or three and then click the browser refresh button, everything updates so I know the inject button and the weather widget is working, its just not auto refreshing.

Bottom line. How do I get the iframe to update on the Node-RED Dashboard?

12

In your function node, you are escaping d, not sure why and that is the reason why you see the quotes.

Just use &d="+d+"' in the function node.

1 Like
13

I had issues with &d="+d+"' not refreshing the iframe because the resulting URL was not recognized by the server. (file not found error).
Simply swapping out the &d for ?d in my function node did the trick.