BOM Radar - Weather Finally !!!!

A few posts on here talks about the need to show weather data... with all sorts of ideas, theories, and misinformation or just long ways of doing it...

I was trying all sorts of ways to scrape or show information from another web site - was told I couldn't scrape a website, the functionality is not there (it is), or to manipulate a file (you can). Some inefficient ideas made me struggle for months in achieving this wanted item for my setup. I even tried using a raspberry Pi as a web server to scrape and present the information I wanted in a format that I needed - all because the visualisation screens on the SHAC appear to be limited - I couldn't provide all the parameters I needed to show a web page in a frame, and pass on the other parameters to only show what I wanted to show...

Well - thanks to the user saintjerome who posted this thread https://www.cbusforums.com/threads/is-this-the-5500nac-shac-manufacturer.9612/ I have spent hours going through the forums where there are thousands of posts and a very helpful admin...

Forum is at; https://forum.logicmachine.net/

And guess what... the admin there helped me understand how the SHAC REALLY works... He says its nothing more than a web browser, and if you can do it a browser, you can do it on the SHAC...

I think the secret word here is - Javascript - to achieve the impossible thats what I think you need...


My problem - I wanted to show the BOM Radar for my home location (I am using Melbourne - but you can change the URL to another area - easy to work out, just browse around and find the IDR code you need). But I just wanted the radar image... Nothing else...

Yes the proper way would be to go and get the 6 images that make up the loop from the BOM ftp server and cycle them through (and yes now I know the power of JavaScript and the SHAC would allow me to do that - but this is the easier quicker way).

Solution:

Step 1 - Create the container where you want the radar to appear
Go into Visualisation and unlock the page you want to edit.
Create a frame with the following Properties;
Source: URL
URL: http://www.bom.gov.au/products/IDR013.loop.shtml
Frame Size: 536 768
Refresh Interval: 360
Persistent: YES - It must be checked otherwise the JavaScript does not work

Save this. Of course when you look at it in the Visualisation screen - it will just look like the BOM page as appearing in a small window - where you can scroll around and look at... So the next steps will set the boundaries of what to display and stop the user from scrolling this frame (the tricky difficult part - which can only be done via JavaScript)


Step 2: - CSS Fields
Select the Vis. Graphics tab at the top. On the sub menu tabs - select Edit custom CSS
Add the following code;

Code:

iframe {margin-top: -263px; margin-left:-24px; height: 788px; width: 536px;}

and Save this.
The above is telling the Iframe to ignore stuff at the top and the left - hide all the unnecessary information that I don't want displayed….

Step 3: - JavaScript
Goto Scripting / Tools and select Edit Custom Javascript
Add the following code;

Code:

$(function() {
  $('iframe').prop('scrolling', 'no');
});

This will remove the scroll bars - so the user is unable to move about, and through the CSS it is showing just the radar screen...

Now go and look at this through your browser - magically a box appears showing the rain radar !!!

I am so happy - been wanting to achieve this for months...

The issue above of course, means that every Frame you create will inherit those properties. Not an issue for me, as currently that is the only frame I have.... but I know you can fix this using Additional Classes. On Step 1 you should be able to specify the additional class, and with the JavaScript code you can include the same class name - so that this code will only execute for that one frame. Equally you could probably set the CSS values through JavaScript and get rid of that step, and you could define multiple sizes or other attributes in JavaScript.

Currently Classes is just above my knowledge - I know how it works, just not sure of the format of the code to do it - HINT - Anyone with some better knowledge want to help out....


But now I am starting to understand how JavaScript works here... I can see the possibilities;
- I have seen code on the forum above so that each touch of the screen plays a beep (or mp3 file) for feedback
- I have seen code on the forum above to produce short / long touches and bell taps
- The above knowledge should be enough to start a journey on scrolling text boxes - either RSS feed information, or just scroll continuously through a daily news feed
- I have thoughts on how to do an alert screen that occupies most of the screen, displaying a graphic image and needing an OK to be pressed....

Well those are the items I am missing immediately from the Clipsal Touch Screen - and I am wrapped to think that it is actually all possible to do.

Have fun - I'll post any more I find or do that might help others... even if its not my code.... But again big thankyou to saintjerome for the original post that led to information that helped me get BOM Radar back on my home screen! My wife thanks you and the others in that thread!

Copy this code;

 

Played some more....

Change the css code to look like this;

Code:

.bom iframe {
  margin-top: -263px; margin-left:-24px; height: 788px; width: 536px
}

Then in the visualisation for the BOM frame - add the Additional classes bom (Note no spaces, quotes - don't put a full stop)

And voilla - its now customised to only affect that one frame, so if you do have others it will not attract that property. Similarly you could create more items in the css with different attributes to show other sizes or other web pages - like breaking news etc.[/code]

 

I noticed occasionally the page would time out and not display the map... So found the answer to that problem - remove the option of refresh... For whatever reason sometimes the refresh came up with a page not displayed error.

Its not needed - as the web page you a viewing in the frame has an automatic refresh on it... So it will update automatically....

 

this looks really interesting can you share some screenshots?

 

Works really well, Thanks for the share

 

I used this but altered it for the days forecast, works great. Can anyone point me in the direction to zoom the image, on the higher resolutions, it's pretty small writing

 

An old topic, but for ref you can also use the id's within the bom pages like below to scroll past header info:

https://reg.bom.gov.au/products/IDR024.loop.shtml#public-radar

https://reg.bom.gov.au/places/vic/melbourne/forecast/detailed/#d2024-03-31

https://reg.bom.gov.au/places/vic/melbourne/forecast/#locationSearch