Welcome to the Cumulus Support forum.

Latest Cumulus MX release 3.28.5 (build 3282) - 23 February 2024

Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014 (a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)

Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki

Auto-refresh Website Index Page Without Using Meta Refresh

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

Moderator: daj

User avatar
dazza1223
Posts: 855
Joined: Sun 25 Jan 2015 8:41 pm
Weather Station: Davis Vantage Pro 2 plus
Operating System: Raspberry pi 4 (4gb)
Location: Worthing
Contact:

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

Post by dazza1223 »

keep ur cam on line im working on it
Have fun and keep learning

dazza :D

https://www.davisworthing.co.uk

Image
User avatar
dazza1223
Posts: 855
Joined: Sun 25 Jan 2015 8:41 pm
Weather Station: Davis Vantage Pro 2 plus
Operating System: Raspberry pi 4 (4gb)
Location: Worthing
Contact:

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

Post by dazza1223 »

i just done the moonphase tag in realtimereader.js but it only output Moon Phase: Waxing but it ment to be Waxing Gibbous ive look to see any bug but i cant fined any think

here the link

http://www.davisworthing.co.uk/
Have fun and keep learning

dazza :D

https://www.davisworthing.co.uk

Image
User avatar
dazza1223
Posts: 855
Joined: Sun 25 Jan 2015 8:41 pm
Weather Station: Davis Vantage Pro 2 plus
Operating System: Raspberry pi 4 (4gb)
Location: Worthing
Contact:

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

Post by dazza1223 »

hi i got realtimereader.js on my site and Moon Phase just shows Waxing if i use the <#moonphase> tag it shows Waning Gibbous but the realtimereader.js just shows Waxing


here is my test page

http://www.davisworthing.co.uk/new/index.php
Have fun and keep learning

dazza :D

https://www.davisworthing.co.uk

Image
apple8
Posts: 129
Joined: Sun 21 Aug 2011 2:26 am
Weather Station: Davis Vantage Vue
Operating System: Windows 10
Location: Sydney. Australia
Contact:

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

Post by apple8 »

Is this method and information (first post of this thread) still valid for Cumulus1? I read somewhere that using the meta "refresh" is not desirable, but seems to work ok at 10 minutes, and thought this may be a solution for index page updates.
Synewave wrote: Thu 24 Feb 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.
Post Reply