Weather radar images on 6.4" C-Touch screen pages.

We recently spent some time exploring how we could better present the current Bureau of Meteorology (BOM) weather radar images on C-Bus colour C-Touch screen home automation controllers.

An example screenshot of what we have achieved so far is shown below:



The above cleaned-up radar image presentation allows home owners to:
- Immediately see the radar image when opening a radar viewing page.
- Avoid having to horizontally and vertically scroll every time they visit a radar touchscreen page.
- Enjoy a larger image viewing area, since the bottom horizontal scroll bar does not need to be displayed.

For comparison, below is a sample screenshot of what home owners normally see if they just access the BOM radar pages directly using the usual html page method from a C-Touch screen controller:



We are currently supporting weather radar images at different ranges, rainfall images over different intervals, the Satellite photo, and short term forecast map. All of these are the current images from the BOM site, not any of the animated loops.

Anyone wanting to explore how to view a set of the above weather images customised for their C-Bus 6.4" colour touch screen controllers, including the latest Version 3 model, are welcome to contact us. More information is available at http://www.cleverhome.com.au/Clipsal-C-Bus-touchscreen-weather-radar.shtml

 

Very neat cool solution.. I like it alot.. Well done..

Now for me to copy and use myself... hahahaha

Cheers..

 

Thanks Roosta,

Pleased to hear you like it.

It will be interesting to hear what you come up with.

The approach we used does not depend upon any PC running anywhere to support the radar page processing, which is the most likely alternate way of achieving this type of result. You might come up with a third way of doing it though . . .

 

Weather Radar Loops on C-Touch Screen.

We are now able to support weather radar (and rainfall) image loops, in which you see a succession of images on your C-Touch screen controller showing conditions at 6 minute intervals, leading up to the current image.

 

Hi Brendan,

I have been doing something similar using iFrames on HomeGate for eons, interestingly for weather pages also and security 4 up/ 1 up camera screens for annoying javascript security DVRs.

When I saw your post I'd assumed that you were probably doing the same (?? or something else??) but having been onsite late every day since you posted, haven't had the chance to test the theory on a CTC. I can now confirm I just loaded up a CTC using the same iFrames method I'd been using and it works the same as Homegate (..who'd of thought !! ...........)

So have you done it with iFrames too or is it some other method? How about you post your method here so everyone can also have smart looking weather pages.

All the best,

Brad

 

Weather radar images on C-Bus touch screens.

For others interest in exploring this, the BOM requires that a clear acknowledging active text link to their BOM website be provided below the reproduced radar images. We also provide this on our C-Touch radar pages, as mentioned on our above website page.

The BOM also requires that their Copyright messages be retained, as per the screenshots shown in the first post of this thread.

 

If we see enough expressions of interest here, we will be happy to make the method we have used to support neatly displaying weather radar images on the 6.4" touch screen available for FREE, for everyone

 

Hi Brendon

Looks like a neat page.

I would be interested to learn.

Thanks

 

Very Nice

Great to see this; after learning how to parse the BOM site for info such as rainfall, temps etc. I had just plopped the radar image on a link having said to myself - 'I will return to get this looking right'!
Well done and if you are able to share how you have done this I would be greatly appreciative (still don't have the time to start from scratch ...!)

Cheers

 

Whilst eagerly awaiting Brendan to post his method, here is the alternate method that I tested that uses iFrames. Please note the buttons are just normal image buttons and I have not tried to embellish these at all as I was just testing the method worked on the smaller CTC screen as opposed to normal Homegate/SP.

I would not suggest running BOM loop iFrames on earlier CTCs with the smaller memory availability as the iFrames chew up memory for breakfast, don't seem to release it well and you will probably need to keep restarting the CTC. In fact, the BOM radar loop will really chew it up big time so you need to watch that in Tools|Utilities|Properties.

The image is what you will see on your CTC. Also note Brendan's comments regarding the requirement for the BOM copyright notice, which I have not included to get it nicely centered. Please note - The image in this post is copyright BOM.

See Image 1 below: Radar 128K loop

Here's the code - save into CTC project directory as weathertest.html. Reference in PICED HTML element as C:\weathertest.html




Realistically this method is much better suited to putting together pages with multiple webpage scrapes of static content as the CTC is memory limited and moving images uses lots. I have included an example I knocked up with the output of three separate pages on one single CTC page.

The three original pages are:
[noparse]http://www.coastalwatch.com/swell/swellhuman100.gif
http://www.coastalwatch.com/swell/forecastMain.aspx?page=seatemp&location=30&leftnav=0&rightnav=0
http://www.coastalwatch.com/swell/f...ailforecasts&location=30&leftnav=0&rightnav=0
[/noparse]

See Image 2 below: Surf Details


Here's the Code - save into CTC project directory as congtest.html. Reference in PICED HTML element as C:\congtest.html


Also, don't forget to upload the two files in the Project Transfer window and also to set the CTC Internet setting (on the CTC) to allow iFrames and scripts.


I am looking forward to seeing what Brendan has done as I am expecting something cool like a publishing screen scraping app (like URL2PNG) or a local CSS stylesheet changer (like Stylish but for IE). Both of these approaches would work better with the limits of the CTC memory but would probably require a fair amount of coding. Just thought everyone may also see a use for the iFrame concept as well in some project they are working on.

All the best,

Brad

 

Hi Brad

Thanks

That was really interesting.

How do you create the html?

 

Hi DarylMc,

I just hand code it, it is really much like a normal webpage config. It is basically a set of window definitions, source definitions and then the iFrame that are put into the Windows.

See below for a bit more info (using the 3 source window) comments after the //:

// window definitions ie parts of the web window you see

#container1{
position: fixed; top: 0; left: 0; //start this window in this location
width:280px; // first window width and height
height:260px;
border:1px solid #000;
overflow:hidden; // ignore anything from the source that doesn't fit in this window
margin:auto;
}

#container2{
position: fixed; top: 0px; left: 281px; //start this window in this location, 1 pixel right of Window 1 - total width is width of container 1 plus width container 2 ie 280px + 210px = 490px (pixels)
width:210px; // second window width and height
height:260px;
border:1px solid #000;
overflow:hidden; // ignore anything from the source that doesn't fit in this window - don't spill past the window edge
margin:auto;
}


#container3{
position: fixed; top: 261px; left: 0px; //start this window in this location, 1 pixel under Window 1
width:490px;//total width is same as width of container 1 plus container 2 ie 490px
height:554px;// I extended the height down but this could be less
border:1px solid #000;
overflow:hidden; // ignore anything from the source that doesn't fit in this window
margin:auto;
}

// The source windows

#container1 iframe {
width:536px;// how much of the 1st web page is being utilised
height:740px;
margin-left:-12px;// this is an adjustment to get the 1st sub-page info into the right horizontal alignment
margin-top:-30px;// this is an adjustment to get the 1st sub-page info into the right vertical alignment
border:0 solid;
}

#container2 iframe {
width:650px;// how much of the 2nd web page is being utilised
height:740px;
margin-left:-390px; //this is an adjustment to get the 2nd sub-page info into the right horizontal alignment
margin-top:-310px;// this is an adjustment to get the 2nd sub-page info into the right vertical alignment ie to slide the webpage into position
border:0 solid;
}

#container3 iframe {
width:660px;// how much of the 3rd web page is being utilised
height:740px;
margin-left:-133px;//this is an adjustment to get the 3rd sub-page into the right horizontal alignment
margin-top:-195px;// this is an adjustment to get the 3rd sub-page info into the right vertical alignment ie to slide the source webpage into position
border:0 solid;
}


The iFrame's (1,2 & 3 are just the source URLs) and the rest is just normal HTML wrapping.

hope that helps,

Brad

 

Hi Brad
Thanks for the explanation.

 

Hi Brad,

Thanks for your posts.

If you test your iframe html method on a PC, in PICED for a CTC project file, it seems to work OK. However, if you transfer the project to a current Version 3 C-Bus Colour Touch Screen with the latest firmware, then the images do not render correctly on the touch screen itself.

It would appear that the Browser in the CTC differs from that used in the PC in ways that are important when rendering the BOM weather website for this purpose.

For single static radar images, our solution is nice and simple (I will post it below shortly), but it took some iterative transferring, testing, and changing to arrive at this particular solution.

 

Html page code for radar image display on C-Bus C-Touch screen,

An example htlm page (for Melbourne, 64km radar) is located at: http://www.cleverhome.com.au/software/Melb-Radar-64km.html

How to make it work:

1. Copy the above file into your C-Touch project directory.
2. On a C-Touch project page, create a HTML component that is at least 554 pixels wide (some images are a little wider than the 64km example), and a full 480 pixels high, with a border width of 1 pixel.
3. Add your own local page navigation buttons, to the right of the html component if most of the C-Touch screen users are right handed, or to the left if they are predominantly left handed.
4. Confirm for yourself that you are complying with the Copyright and Acknowledgment requirements posted on the BOM website at http://www.bom.gov.au/other/copyright.shtml?ref=ftr, and if not, do what you need to do to comply.
5. Transfer to your C-Touch with a working Internet connection.
6. Enjoy.

 

How it works.

The above simple html page code directly grabs the gif radar image, by-passing any CTC browser rendering issues for the BOM website. This method is also particularly fast, and processor and memory efficient for the CTC, so it should not interfere significantly with the execution of other tasks, and it should be suitable for earlier generations of C-Touch screens.

To view other static radar images:

1. Visit the BOM radar page of interest.
2. Note the name of the gif image used for that view.
3. Change the name of the gif in your C-Touch html page code to match.
3. Change the text description of the page below the image in the html page code.
4. Change the name of the html file to suit your new radar image view.
5. Create a new C-Touch page and html component, and direct this html component to your new html page in your C-Touch project directory.

 

If you were writing a website page, we would not recommend directly linking to an image on another website to display it on your website.

In the case of the C-Touch html radar page example above, this method is only being suggested as a possible means of more appropriately displaying these images on that type of device, and on that individual device.

It is possible that from time-to-time that the BOM may change the name of the GIF files that correspond to their individual radar images, just as from time-to-time they may change the address of individual website page addresses. After any such change you would need to update your local CTC html pages accordingly.

 

Hi Brendan,

Had already noted the different rendering last night on the triple frame and had started to correct it in congtest2.html. Just tweaked it a bit more but as it is quite memory hungry being 3 iFrames, the CTC2 I have turns up its toes every few tries. I will have it tweaked after I return from lunch (hey, it's Saturday after all!!!). It is just the right hand width that needs reducing to get the two images side by side.

The single page weather radar loop works fine though once again noting the memory overheads involved. Let's just say the loop is not something you would want to leave sitting there for too long

See picture below on CTC. (That's the radar loop in the iFrame, not the GIF)

You noted that it took lots of downloading and trial and error due to the different rendering engines between PICED and the CTC, both displaying things ever so slightly differently. I found the same. Then I cottoned onto just putting it on your webserver and using the URL rather than the local copy. That way you can change it and the page reloads every time anyway when you go from one button to another and then back so you can make changes quite quickly. Just putting http://www.noushouse.com.au/CBUS/weathertest.html into the HTML element gives the same display as the local, so for those playing around with your own frames today, just put it on your own personal web server initially as it makes it a lot easier.

Also just noting that these pages do chew up a lot of memory and so 1. need to be trimmed down later as much as possible code wise and 2. may require watching your memory and it may overrun available memory.

I haven't tried changing the virtual memory settings yet but I assume that would help on the smaller memoried units.

Well it seems everyone now has some nice options for displaying other content in CTC windows. Congrats Brendan on a nice looking solution and happy you got it posted for us all.

Also once again noting that the images I am using are copyright BOM and must include the same legal requirements and link etc as Brendan's. I will amend my code as weathertest1.html, once again when I get back from lunch.

Enjoy,

Brad

 

In addition to our above compact solution for displaying static weather radar images neatly on a CTC, we also have a different type of solution up and running for radar image sequences with the following properties:

Disadvantages:
- Requires support from a Windows PC running and connected on the LAN and to the Internet.

Advantages:
- Imposes no special demands on CTC resources, other than using those resources that have been made available for CIS-supported functions. (Our solution has been running continuously without any glitches or resource issues for more than 24hrs on a CTC3 and a PC.)
- Supports any number of successive images, not just the few recent images on the BOM animated radar.
- Supports many image processing options, without burdening the CTC.
- Is suitable for other applications, other than weather radar sequences.

It would be nice to also have the option of directly displaying the BOM's animated radar images on a CTC3 without any PC support, and so we would be interested to know how you go with your above efforts Brad.

 

Hi All,

For those that had trouble displaying the 'Sydney Surf' 3 iFrame page on your CTC, I have just updated 'congtest.html' adjusting the right hand side parameters. I have left the 3rd Window long (so it scrolls vertically) so as to include more of the surf report but you can disable the scrolling by reducing the height of 'container3' to fit within the available screen.

Brendan, can you check on your CTC3? I believe the rendering discrepancy is related to the FAT scrollbars on the CTC versus the thin ones on PICED. Perhaps the IE running on the CTC is a different version than that running in PICED or it has some minimum pixel width set for the scrollbars on the smaller touch screen window.

see pic below - now working on my test CTC. Memory is still a big issue though so your 'screen scraping' version will no doubt be better on that front.

Enjoy,

Brad