You don’t have to refresh the whole page for using buien radar (or any other image that needs updating). Just use a timestamp node that triggers every minute (or 5 minutes or whatever). Connect that to a function node with this:
msg.payload = "https://api.buienradar.nl/image/1.0/RadarMapNL?w=720&h=600?"+Math.random();
return msg;
The “?”+Math.random(); makes the difference. Everything behind the ? gets ignored, but with the random number behind it, the browser thinks it’s a different image and reloads it.
Then connect this to a template node (the blue-green one) with this html:
<img src="{{msg.payload}}">
the {{msg.payload}} injects the new image and reloads the frame.
This is also working great with ip camera’s that support snapshots. just use:
msg.payload = "http://username:password@ipadress:port/snap.jpg?"+Math.random();
return msg;
(That’s how I use it)
Note: If you use this technique with a high refresh-rate, disable it (with some code) if you hide the panel. (otherwise it will refresh constantly in the background)
Also, I’ve simplified this to the bare minimum. But don’t forget you can use basic html to size the image to size.
