You can now include rain radar images from the Australian Bureau of Meteorology on your dashboards.
The driver is available via Hubitat Package Manager and includes my Image Cycle Driver as well.
How does it work?
This BoM Radar Images Data File driver retrieves URL links to radar images from the Australian Bureau of Meteorology web site, passing these over to the child Image Cycle device to store these URL's in a JSON file on the HE hub. If turned on, the Image Cycle device also stores a HTML file used to display the radar images and updates an IFrame attribute that can be used in HE dashboards.
Virtual Device Installation and Configuration
Once the drivers are installed...
- Create a new Virtual device using the BoM Radar Images Data File driver
- Open the BoM Radar web site in a browser, navigating to the location and zoom level required
- Copy the Observation ID from the URL in the address bar, e.g. http : //www.bom.gov.au/products/[Observation-ID].loop.shtml#skip, pasting this value in the Observation ID number Preference setting for the new Virtual Device
- Adjust any other settings as required, such as choosing what background images to include (topography, locations and range images), turning automatic updates on / off and the frequency of these updates, turning various logging levels on / off
- Click Save Preferences to apply the changes
- Click the Refresh command (button) at the top of the Device Edit page to force retrieval of the image details
- Refresh the browser window, scrolling to the bottom of the page to confirm that an Image Cycle child device has been created
- Click on the Image Cycle device, confirming that the iFrame attribute displays the radar loop on screen
Adding Radar Images to a Dashboard
- Open the Apps page for the HE hub, locating the Hubitat Dashboard App
- Click on the dashboard you wish to add the radar loop to, updating the list of devices to include the child Image Cycle device, clicking Done to accept the change
- Open the Dashboards page for the HE hub, clicking on the Dashboard to be updated
- Add a new tile by clicking on the plus (+) icon in the top right-hand corner (unless you have re-styled this....)
- Set the position and size of the tile, selecting the Image Cycle device, the Attribute template and the iFrame attribute from the drop-down displayed
Alternatives for display on a dashboard could include using the iFrame Advanced driver to allow a user to click on a tile and the radar loop pop-up on-screen.
All feedback and feature requests are welcome
2021-12-28: 1.2.0 - HTTP calls changes to Asynchronous
2021-11-25: 1.1.0 - Changed Locations and Range images to the foreground
2021-11-23: 1.0.0 - Stable Release with addition of options for Locations, Topography and Range backgrounds
2021-11-06 - Initial Alpha Release
Hey bro love the idea.
I keep getting errors and cannot display the image.
Have I set something wrong?
Let me take a look. I'll try the same setup...
Actually, can you show me the preference settings for the child device? It could also be that it is not writing the file initially, or that it hasn't run the first refresh. Try adjusting the HTML file name on the child device and click Save Preferences.
Fixed, thanks mate it was the HTML file name, I changed it and image started working instantly.
Still looks odd to me, and I probably need to tidy up a few things. Even mine, although I had it working doesn't look right in the settings, particularly the data file. But that's something for me to worry about now .
Just tried installing this, but for some reason I can't get the device child created. Hitting refresh does nothing. I must be doing something wrong but not sure what.
There is also an error in the logs - might be related?
OOps, User error - forgot to install the image driver device driver - sorry!
There's every possibilty I have done something wrong as well...
I'll take a look (probably tonight).
All working well now, sorry - my dumb error .
I did also end up with the 404 error in the child device that @dtun64 got, so changed the HTML file name and all is ok!
One question - how do you resize the iframe image to fit within the tile constraints?
Hmm, not sure... I'd direct you to a css thread somewhere here on the Community to see if there is anything mentioned there....
But seriously,.one option would be to remove / hide any borders / backgrounds from the tile so only the iframe is displayed, giving the impression it is consuming the whole tile. But to have it dynamically adjust to the tile size, I'm not sure. Try playing with the driver, in particular the div styling.
No worries - I'll have a go or ask a question, wanted to make sure I hadn't missed something else. .
Maybe look around at some of the other image based drivers, like ones for showing google albums, they may do something like that.
I just draw the image into node red via a http get or something.
But this is also something you may want to incorporate....Here is a visual forecast for Sydney. I draw this image into my node red system as well. It updates fairly regularly.
OK done. From googling it, in line 59 of the image cycle driver I added
-webkit-transform:scale(0.5); -moz-transform-scale(0.5); -moz-transform-origin: top left; -webkit-transform-origin: top left; -o-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left;
as additional style parameters (in this case to scale the image to 50% while keeping it anchored in the top left corner).
Would you mind having a look at this as an enhancement to the driver by adding the extra device scale preference? It is a bit fiddly with trial and error to get the sizing right for a specific tile but dynamic resizing is well over my head.
EDIT: the code snippet might also need addition scale transform options (-o and -ms) to be complete?
Hmmm... Certainly happy to take a look at including it. Might move the conversation over to the image cycle driver topic.
Thanks for taking the time to research it and come back with the details you have.