If you use Cumulus, please donate Image

Please read this post before posting

Latest Cumulus release v1.9.4 (build 1099) - Nov 28 2014
Latest Cumulus MX release - v3.0.0 build 3043 Jan 20 2017. See this post for download

Auto-refresh Website Index Page Without Using Meta Refresh

Other discussion about creating web sites for Cumulus that doesn't have a specific subforum

Moderators: daj, TNETWeather

Synewave
Posts: 641
Joined: Mon Jan 25, 2010 1:55 pm
Weather Station: Watson W-8681
Operating System: Raspian
Location: Brighton, UK
Contact:

Auto-refresh Website Index Page Without Using Meta Refresh

Postby Synewave » Thu Feb 24, 2011 12:12 pm

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).

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: Select all

<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: Select all

<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: Select all

and these pages are updated every <#interval> minutes.
and replace that with

Code: Select all

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.
Last edited by Synewave on Sun Feb 27, 2011 11:40 am, edited 8 times in total.

fractonimbus
Posts: 154
Joined: Thu Feb 03, 2011 1:15 am
Weather Station: WH1091
Operating System: Windows 7 on a Dell Vostro
Location: Canberra

Re: Auto-refresh Website Index Page Without Using Meta Refre

Postby fractonimbus » Thu Feb 24, 2011 12:54 pm

I've used this approach and it works very well.

DN
Image

User avatar
mcrossley
Posts: 4968
Joined: Thu Jan 07, 2010 9:44 pm
Weather Station: Davis VP2
Operating System: Jessie Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: Auto-refresh Website Index Page Without Using Meta Refre

Postby mcrossley » Thu Feb 24, 2011 3:13 pm

Same here.

Code: Select all

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) {
            var val = cumulus[id];        //get the cumulus value
            if (val != null) spans[i].innerHTML = val;
        }
    }
}


or using jQuery...

Code: Select all

//get all the spans on the page
$('span').each(function () {
   id = this.id ? this.id : this.className;
   val = cumulus[id];      //get the cumulus value
   if (val !== undefined) {         //do we have a cumulus value for this field?
      this.innerHTML = val;         //set the field text
   }
});
Last edited by mcrossley on Sat Jan 11, 2014 12:39 am, edited 1 time in total.

tjaliwalpa
Posts: 293
Joined: Sun Apr 18, 2010 9:47 am
Weather Station: Davis VP2
Operating System: Linux Lite Ubuntu 16.04
Location: Karoonda, SA
Contact:

Re: Auto-refresh Website Index Page Without Using Meta Refre

Postby tjaliwalpa » Thu Feb 24, 2011 4:54 pm

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

User avatar
daj
Posts: 2041
Joined: Tue Jul 29, 2008 8:00 pm
Weather Station: WH1081
Operating System: Pi & MX
Location: SW Scotland
Contact:

Re: Auto-refresh Website Index Page Without Using Meta Refre

Postby daj » Thu Feb 24, 2011 5:30 pm

Blatant plagiarism and no credit :shock:

Just as well I am not of a sensitive nature!
;-)
David
kippfordweather.uk
Cumulus MX & Raspberry Pi

Synewave
Posts: 641
Joined: Mon Jan 25, 2010 1:55 pm
Weather Station: Watson W-8681
Operating System: Raspian
Location: Brighton, UK
Contact:

Re: Auto-refresh Website Index Page Without Using Meta Refre

Postby Synewave » Thu Feb 24, 2011 5:42 pm

Whoops, sorry David, it wasn't intentional. Script updated with credit!

gemini06720
Posts: 1700
Joined: Mon Aug 10, 2009 10:16 pm
Weather Station: No weather station
Operating System: No operating system
Location: World...

Re: Auto-refresh Website Index Page Without Using Meta Refre

Postby gemini06720 » Thu Feb 24, 2011 5:43 pm

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...

Synewave
Posts: 641
Joined: Mon Jan 25, 2010 1:55 pm
Weather Station: Watson W-8681
Operating System: Raspian
Location: Brighton, UK
Contact:

Re: Auto-refresh Website Index Page Without Using Meta Refre

Postby Synewave » Thu Feb 24, 2011 5:53 pm

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.

gemini06720
Posts: 1700
Joined: Mon Aug 10, 2009 10:16 pm
Weather Station: No weather station
Operating System: No operating system
Location: World...

Re: Auto-refresh Website Index Page Without Using Meta Refre

Postby gemini06720 » Thu Feb 24, 2011 6:20 pm

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

User avatar
beteljuice
Posts: 2455
Joined: Tue Dec 09, 2008 1:37 pm
Weather Station: None !
Operating System: XP SP3 - honest
Location: Dudley, West Midlands, UK

Re: Auto-refresh Website Index Page Without Using Meta Refre

Postby beteljuice » Thu Feb 24, 2011 11:43 pm

Tip:

For the purists who would complain that there is no data if JavaScript has been disabled ...

Code: Select all

<td><span id="temp"></span>&nbsp;<#tempunit></td>
The (template) html for belts and braces sake should be:

Code: Select all

<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 !

User avatar
daj
Posts: 2041
Joined: Tue Jul 29, 2008 8:00 pm
Weather Station: WH1081
Operating System: Pi & MX
Location: SW Scotland
Contact:

Re: Auto-refresh Website Index Page Without Using Meta Refre

Postby daj » Fri Feb 25, 2011 9:19 am

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
kippfordweather.uk
Cumulus MX & Raspberry Pi

fractonimbus
Posts: 154
Joined: Thu Feb 03, 2011 1:15 am
Weather Station: WH1091
Operating System: Windows 7 on a Dell Vostro
Location: Canberra

Re: Auto-refresh Website Index Page Without Using Meta Refre

Postby fractonimbus » Fri Feb 25, 2011 1:07 pm

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

User avatar
captzero
Posts: 363
Joined: Wed Mar 03, 2010 10:20 am
Weather Station: Vantage Pro2 w/ daytime FARS
Operating System: Windows 10
Location: Brisbane, Australia
Contact:

Re: Auto-refresh Website Index Page Without Using Meta Refre

Postby captzero » Sun Feb 27, 2011 8:51 am

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.

Synewave
Posts: 641
Joined: Mon Jan 25, 2010 1:55 pm
Weather Station: Watson W-8681
Operating System: Raspian
Location: Brighton, UK
Contact:

Re: Auto-refresh Website Index Page Without Using Meta Refre

Postby Synewave » Sun Feb 27, 2011 10:29 am

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: Select all

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>
Last edited by Synewave on Sun Feb 27, 2011 10:44 am, edited 1 time in total.

User avatar
captzero
Posts: 363
Joined: Wed Mar 03, 2010 10:20 am
Weather Station: Vantage Pro2 w/ daytime FARS
Operating System: Windows 10
Location: Brisbane, Australia
Contact:

Re: Auto-refresh Website Index Page Without Using Meta Refre

Postby captzero » Sun Feb 27, 2011 10:35 am

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.


Return to “Web site - General”

Who is online

Users browsing this forum: No registered users and 4 guests