Sandaysoft

Support forum for Cumulus weather station software
It is currently Thu Jun 20, 2013 11:46 am
Please click here before posting. Help me to help you!
Useful Links: Cumulus FAQ • Enhancement requests • Wiki (documentation)
Please put your approximate location into your profile
Add your web site to the Cumulus user map
Vantage Pro2 users with firmware 3.00 should upgrade to fw 3.12 and Cumulus 1.9.4

All times are UTC




Post new topic Reply to topic  [ 70 posts ]  Go to page 1, 2, 3, 4, 5  Next
Author Message
 Post subject: Auto-refresh Website Index Page Without Using Meta Refresh
PostPosted: Thu Feb 24, 2011 12:12 pm 
Offline

Joined: Mon Jan 25, 2010 1:55 pm
Posts: 623
Location: Brighton, UK
Weather Station: Watson W-8681
Operating System: Vista
It seems many want their index page to automatically refresh without having to press F5. Any many don't want to get into the realms of changing their site to use the PHP methods available in the forum.

Here is a simple way to achieve this using Javascript that will refresh the weather data on your index page automatically every 15 seconds. It works by reading the data from your realtime.txt file (providing you already have Cumulus set to upload that). You can see it in action here: http://www.synewave.co.uk/gcsweather/indextest.htm

Before starting make a backup of your indexT.htm file (call it indexTold.htm for example).

Implementation is simple, just unzip this file and upload the realtimereader.js and jquery.js files to your webserver (to the same location your Cumulus .htm files are).

Attachment:
jquery and realtimereader.zip

Then edit the indexT.htm file in the Cumulus\web\ folder on your PC using something like Notepad or preferably Notepad++.

Add these two lines just before </head>

Code:
<script src="jquery.js" type="text/javascript"></script>
<script src="realtimereader.js" type="text/javascript"></script>

Then edit each of the <#webtags> that you want to refresh automatically as follows:

<#temp> becomes <span id="temp"></span>
<#dew> becomes <span id="dew"></span>
... and so on.

Note that you can only change the webtags to id's that are already provided by realtime.txt i.e. dawn and dusk are not in the realtime.txt file so these webtags need to stay in their original format i.e. <#dawn>. It is not really necessary for this data to be refreshed realtime anyway. Also note that webtags that are repeated in the indexT.htm file also cannot be changed to id's as unique id's can only be used once in a page. Again, <#tempunit> for example will always remain the same so no need to auto-refresh anyway.

Be aware that next time you upgrade Cumulus, the install will overwrite your modified indexT.htm file if you have 'Include HTML Templates' ticked during the installation process. My advice would be to have this option unticked.

Alternatively, if you are still using the standard template supplied with Cumulus, here is the code with all the webtags replaced with id's. Copy and paste this into the indexT.htm file from and including the exisiting <p> and </p>.

Code:
<p>Forecast: <span id="forecast"></span></p>
<table width="100%"  border="0" cellpadding="0" cellspacing="0">
  <caption>Conditions at local time <span id="time"></span> on <span id="date"></span></caption>
  <tr>
    <td colspan="4" class="tableseparator_temp">Temperature and Humidity </td>
  </tr>
  <tr class="td_temperature_data">
    <td>Temperature</td>
    <td><span id="temp"></span>&nbsp;<#tempunit></td>
    <td>Dew&nbsp;Point </td>
    <td><span id="dew"></span>&nbsp;<#tempunit></td>
  </tr>
  <tr class="td_temperature_data">
    <td>Windchill</td>
    <td><span id="wchill"></span>&nbsp;<#tempunit></td>
    <td>Humidity</td>
    <td><span id="hum"></span>%</td>
  </tr>
  <tr class="td_temperature_data">
    <td>Heat Index</td>
    <td><span id="heatindex"></span>&nbsp;<#tempunit></td>
    <td>Apparent Temperature</td>
    <td><span id="apptemp"></span>&nbsp;<#tempunit></td>
  </tr>
  <tr class="td_temperature_data">
    <td>Solar Radiation</td>
    <td><span id="SolarRad"></span>&nbsp;W/m&sup2;</td>
    <td>Evapotranspiration Today</td>
    <td><span id="ET"></span>&nbsp;<#rainunit></td>
  </tr>
  <tr>
    <td colspan="4" class="tableseparator_rainfall">Rainfall</td>
  </tr>
  <tr class="td_rainfall_data">
    <td>Rainfall&nbsp;Today</td>
    <td><span id="rfall"></span>&nbsp;<#rainunit></td>
    <td>Rainfall&nbsp;Rate</td>
    <td><span id="rrate"></span>&nbsp;<#rainunit>/hr</td>
  </tr>
  <tr class="td_rainfall_data">
    <td>Rainfall&nbsp;This&nbsp;Month</td>
    <td><span id="rmonth"></span>&nbsp;<#rainunit></td>
    <td>Rainfall&nbsp;This&nbsp;Year</td>
    <td><span id="ryear"></span>&nbsp;<#rainunit></td>
  </tr>
  <tr class="td_rainfall_data">
    <td>Rainfall&nbsp;Last Hour</td>
    <td><span id="rhour"></span>&nbsp;<#rainunit></td>
    <td>Last rainfall</td>
    <td><#LastRainTipISO></td>
  </tr>
  <tr>
    <td colspan="4" class="tableseparator_wind">Wind</td>
  </tr>
  <tr class="td_wind_data">
    <td>Wind&nbsp;Speed&nbsp;(gust)</td>
    <td><span id="wgust"></span>&nbsp;<#windunit></td>
    <td>Wind&nbsp;Speed&nbsp;(avg)</td>
    <td><span id="wspeed"></span>&nbsp;<#windunit></td>
  </tr>
  <tr class="td_wind_data">
    <td>Wind Bearing</td>
    <td><span id="avgbearing"></span>&deg; <span id="wdir"></span></td>
    <td>Beaufort&nbsp;<span id="beaufort"></span></td>
    <td><span id="beaudesc"></span></td>
  </tr>
  <tr>
    <td colspan="4" class="tableseparator_pressure">Pressure</td>
  </tr>
  <tr class="td_pressure_data">
    <td>Barometer&nbsp;</td>
    <td><span id="press"></span>&nbsp;<#pressunit></td>
    <td><#presstrend></td>
    <td><span id="presstrendval"></span>&nbsp;<#pressunit>/hr</td>
  </tr>
  <tr>
    <td colspan="4" class="td_navigation_bar">:<a href="index.htm">now</a>::<a href="gauges.htm">gauges</a>::<a href="today.htm">today</a>::<a href="yesterday.htm">yesterday</a>::<a href="record.htm">records</a>::<a href="trends.htm">trends</a>:<span id="forum><span id="webcam></td>
  </tr>
</table>
<p class="credits"><br />
Page updated <span id="update"></span><br />
powered by
<a href="http://sandaysoft.com/products/cumulus" target="_blank">Cumulus</a>
v<span id="version"></span> (<span id="build"></span>)
</p>


If you want to include a countdown timer, instead of your page saying ".... and these pages are updated every xx minutes", edit the code in indexT.htm as follows. Locate
Code:
and these pages are updated every <#interval> minutes.
and replace that with
Code:
and the data below updates in <span id="refresh_in"></span> seconds.


Old scripts below, don't use these.


You do not have the required permissions to view the files attached to this post.

_________________
Paul

http://www.greatcollegestreet.co.uk -Online
http://www.lehamel.eu - Online

Image Image


Last edited by Synewave on Sun Feb 27, 2011 11:40 am, edited 8 times in total.

Top
 Profile  
 
 Post subject: Re: Auto-refresh Website Index Page Without Using Meta Refre
PostPosted: Thu Feb 24, 2011 12:54 pm 
Offline

Joined: Thu Feb 03, 2011 1:15 am
Posts: 136
Location: Canberra
Weather Station: WH1091
Operating System: OSX running WinXP via Parallels
I've used this approach and it works very well.

DN

_________________
Image


Top
 Profile  
 
 Post subject: Re: Auto-refresh Website Index Page Without Using Meta Refre
PostPosted: Thu Feb 24, 2011 3:13 pm 
Offline
User avatar

Joined: Thu Jan 07, 2010 9:44 pm
Posts: 2596
Location: Wilmslow, Cheshire, UK
Weather Station: Davis VP2
Operating System: XP SP3, Win 7
Same here.
Code:
function updateSpans(){
    //get all the spans on the page
    var spans = document.getElementsByTagName("span");
    //loop through the spans to update them
    for (var i=0; i<spans.length; i++) {
        var id = spans[i].id;
        if (id.length) {
            eval("var val=cumulus."+id+";");        //get the cumulus value
            if (val != null) spans[i].innerHTML = val;
        }
    }
}

And no comments about the use of eval() please, I think it is appropriate here! :lol:

_________________
Mark
Wilmslow Astro Weather


Top
 Profile  
 
 Post subject: Re: Auto-refresh Website Index Page Without Using Meta Refre
PostPosted: Thu Feb 24, 2011 4:54 pm 
Offline

Joined: Sun Apr 18, 2010 9:47 am
Posts: 251
Location: Karoonda, SA
Weather Station: WH-1081
Operating System: Windows 7, Home Premium
Hmm,

Great to see this post. You have made it simple for people to follow. Well done Synewave :clap:

I had a lot of fun (with numerous :bash: moments) arriving at the same end point over the last month. I'm please in a way that you waited until now to post as I have learnt a lot in the meantime.

_________________
Bob

Image


Top
 Profile  
 
 Post subject: Re: Auto-refresh Website Index Page Without Using Meta Refre
PostPosted: Thu Feb 24, 2011 5:30 pm 
Offline
User avatar

Joined: Tue Jul 29, 2008 8:00 pm
Posts: 2001
Location: Thornhill, Dumfries, UK
Weather Station: WH1081
Operating System: Mac OSx & Win 7
Blatant plagiarism and no credit :shock:

Just as well I am not of a sensitive nature!
;-)

_________________
David
Contact Me


Top
 Profile  
 
 Post subject: Re: Auto-refresh Website Index Page Without Using Meta Refre
PostPosted: Thu Feb 24, 2011 5:42 pm 
Offline

Joined: Mon Jan 25, 2010 1:55 pm
Posts: 623
Location: Brighton, UK
Weather Station: Watson W-8681
Operating System: Vista
Whoops, sorry David, it wasn't intentional. Script updated with credit!

_________________
Paul

http://www.greatcollegestreet.co.uk -Online
http://www.lehamel.eu - Online

Image Image


Top
 Profile  
 
 Post subject: Re: Auto-refresh Website Index Page Without Using Meta Refre
PostPosted: Thu Feb 24, 2011 5:43 pm 
Offline

Joined: Mon Aug 10, 2009 10:16 pm
Posts: 1698
Location: World...
Weather Station: No weather station
Operating System: No operating system
Paul, the idea is great - although I have not looked at the code for very long, good work.

One thing thought... You shoul have tested and released your JavaScript with the latest release of jQuery (ie: verson 1.5 released January 31, 2011 - which offers better compatibility with more of the modern browsers) rather than with the included and quite old version 1.3.2 (released February 20, 2009) - it should no be the responsability of the user to look for and install the latest release of the jQuery script as the JavaScript might stop working...


Top
 Profile  
 
 Post subject: Re: Auto-refresh Website Index Page Without Using Meta Refre
PostPosted: Thu Feb 24, 2011 5:53 pm 
Offline

Joined: Mon Jan 25, 2010 1:55 pm
Posts: 623
Location: Brighton, UK
Weather Station: Watson W-8681
Operating System: Vista
Thanks Ray. I've just tested it with jquery v1.5 and all seems to be working OK. I've updated the attachment in the first post with the new version.

_________________
Paul

http://www.greatcollegestreet.co.uk -Online
http://www.lehamel.eu - Online

Image Image


Top
 Profile  
 
 Post subject: Re: Auto-refresh Website Index Page Without Using Meta Refre
PostPosted: Thu Feb 24, 2011 6:20 pm 
Offline

Joined: Mon Aug 10, 2009 10:16 pm
Posts: 1698
Location: World...
Weather Station: No weather station
Operating System: No operating system
Synewave wrote:
Thanks Ray. I've just tested it with jquery v1.5 and all seems to be working OK. I've updated the attachment in the first post with the new version.
Paul, two more recommendations, if I may:

- rather than supplying the jQuery script to the user, you could supply a link to the jQuery files on Google or Microsoft (I see that in many of the scripts I download):
--- I think this is the Google link;
--- I think this is the Microsoft link.

- rather than renaming the jQuery script to 'jquery.js', you could use the full name and version number (to make later identification easier), such as:
--- 'jquery-1.5.js' for the source (uncompressed) released of jQuery 1.5
--- 'jquery-1.5.min.js' for the minified (compressed) released of jQuery 1.5


Top
 Profile  
 
 Post subject: Re: Auto-refresh Website Index Page Without Using Meta Refre
PostPosted: Thu Feb 24, 2011 11:43 pm 
Offline
User avatar

Joined: Tue Dec 09, 2008 1:37 pm
Posts: 1888
Location: Dudley, West Midlands, UK
Weather Station: None !
Operating System: XP SP3
Tip:

For the purists who would complain that there is no data if JavaScript has been disabled ...
Code:
<td><span id="temp"></span>&nbsp;<#tempunit></td>
The (template) html for belts and braces sake should be:
Code:
<td><span id="temp"><#temp></span>&nbsp;<#tempunit></td>
ie. The last Cumulus upload is on the page, then overwritten by the JavaScript / realtime.txt routine

_________________
Image
......................Imagine, what you will KNOW tomorrow !


Top
 Profile  
 
 Post subject: Re: Auto-refresh Website Index Page Without Using Meta Refre
PostPosted: Fri Feb 25, 2011 9:19 am 
Offline
User avatar

Joined: Tue Jul 29, 2008 8:00 pm
Posts: 2001
Location: Thornhill, Dumfries, UK
Weather Station: WH1081
Operating System: Mac OSx & Win 7
Do people seriously not use Javascript?! The Internet must be quite dull then ;)

In all fairness we should always consider these things -- especially for people who rely on technology such as screen readers. Who said web page design was simple? It's bad enough coding a page for a bucket full of browsers all with their own set of issues.

_________________
David
Contact Me


Top
 Profile  
 
 Post subject: Re: Auto-refresh Website Index Page Without Using Meta Refre
PostPosted: Fri Feb 25, 2011 1:07 pm 
Offline

Joined: Thu Feb 03, 2011 1:15 am
Posts: 136
Location: Canberra
Weather Station: WH1091
Operating System: OSX running WinXP via Parallels
Interesting change in the browser stats since I last looked a year or two ago: IE ~45%, FFox ~30%, Chrome ~13%, Safari ~6% So non-w3c-compliant browsers (IE) now down to below 50%... hallelujah!

DN

(though Safari's javascript leaves something to be desired)

_________________
Image


Top
 Profile  
 
 Post subject: Re: Auto-refresh Website Index Page Without Using Meta Refre
PostPosted: Sun Feb 27, 2011 8:51 am 
Offline
User avatar

Joined: Wed Mar 03, 2010 10:20 am
Posts: 300
Location: Brisbane, Australia
Weather Station: Vantage Pro2 w/ daytime FARS
Operating System: Windows Vista SP2
Paul & Daj,

I really like this javascript. Great job. I have tried it on a test page and am able to update the data as per the instructions. I also use a fair bit of javascript to update other stuff using the standard web tags (wind dir images, trend arrows, text, speed conversions, etc). Will using the <span id="temp"><#temp></span> still allow the <#temp> tag to update trend arrows for instance?. I couldn't get it to work. Is there a work around?

Thanks

_________________
Dan

http://www.brisbaneliveweather.com




A man with a thermometer always knows the temperature. A man with two thermometers, not so sure.


Top
 Profile  
 
 Post subject: Re: Auto-refresh Website Index Page Without Using Meta Refre
PostPosted: Sun Feb 27, 2011 10:29 am 
Offline

Joined: Mon Jan 25, 2010 1:55 pm
Posts: 623
Location: Brighton, UK
Weather Station: Watson W-8681
Operating System: Vista
Hi Dan,

Glad you like it. Seems you are using some Javascript in your HTML anyway for the trend arrows. To make them work 'realtime' that code would need to be added in the realtimereader.js file.

Something like:
Code:
var temptrendicon = rawdata[25];
if (temptrendicon==0){var imagen = "steady1.gif";}
if (temptrendicon>0){var imagen = "up1.gif";}
if (temptrendicon<0){var imagen = "down1.gif";}
$("#temptrendicon").html('<img src="http://www.brisbaneliveweather.com/'+imagen+'"align =absmiddle>');


Then in your HTML, code <span id="temptrendicon"></span>

_________________
Paul

http://www.greatcollegestreet.co.uk -Online
http://www.lehamel.eu - Online

Image Image


Last edited by Synewave on Sun Feb 27, 2011 10:44 am, edited 1 time in total.

Top
 Profile  
 
 Post subject: Re: Auto-refresh Website Index Page Without Using Meta Refre
PostPosted: Sun Feb 27, 2011 10:35 am 
Offline
User avatar

Joined: Wed Mar 03, 2010 10:20 am
Posts: 300
Location: Brisbane, Australia
Weather Station: Vantage Pro2 w/ daytime FARS
Operating System: Windows Vista SP2
Thanks Paul, I'll give it a try.

Cheers

_________________
Dan

http://www.brisbaneliveweather.com




A man with a thermometer always knows the temperature. A man with two thermometers, not so sure.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 70 posts ]  Go to page 1, 2, 3, 4, 5  Next

All times are UTC


Who is online

Users browsing this forum: Buford T. Justice and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  

Protected by Anti-Spam ACP Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group