Ajaxed index-page

[pinto]

if someone wants to test it
you can have 5 second updates when you enable realtime in cumulus an set the interval to 5 seconds
upload the AjaxCumulus.js file to your webserver
BACKUP YOUR EXISTING indexT.htm FROM THE CUMULUS WEB-folder
if you don't like it, you can use your backup
overwrite the file with the file in the package an wait until the next upload

Here is the zip-file

YOU NEED CUMULUS 1.8.3 #480 or higher

click on my banner to see it working

[Paul C]

Jozef

That looks interesting having seen your web pages self updating - but can you tell me a little more about it. I havent heard of Ajax before ( apart from the football team ) eg how easy is it to setup etc

Also - the css file on the IndexT - I have altered the colours slightly, will this file change it back again to the orginal colours ?

sorry for the questions
tks

[pinto]

fact is, it is only some javascript that is calling the realtime.txt on the server every 5 seconds
and only updates the values without refreshing the page itself

This indexT.htm file is the original file, modified are only the tags used in the page

~~> I have not seen css in this file, thought it was in weatherstyle.css
this file uses the weatherstyle.css file you have on your server

BACKUP BACKUP BACKUP !!!!

[Paul C]

How do you change the upload interval to 5 seconds - to me it looks as if the interval time is in minutes and 1 minute being the lowest.

I have uploaded the file but cant see it changing as in your example.

http://www.bramptonweather.co.uk/cumulus/index.htm

[TNETWeather]

You are missing the required javascript...

<script type="text/javascript" src="AjaxCumulus.js"></script>

He has it...

Code: Select all

<title>Kampenhout, Belgium weather</title>

<link href="weatherstyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="AjaxCumulus.js"></script>
</head>

You don't

Code: Select all

<title>Brampton weather</title>

<link href="weatherstyle.css" rel="stylesheet" type="text/css">
</head>

[pinto]

<script type="text/javascript" src="AjaxCumulus.js"></script>


is correct


I left

<script type="text/javascript" src="AjaxCumulusTest.js"></script>


in indexT.htm

[pinto]

Here is the zip-file

YOU NEED CUMULUS 1.8.3 #480 or higher

best way to handle it is to download the package again

[Paul C]

<script type="text/javascript" src="AjaxCumulus.js"></script>


is correct


I left

<script type="text/javascript" src="AjaxCumulusTest.js"></script>


in indexT.htm

I have uploaded both the indexT file and the js file to my cumulus folder. Do I have to add the above into something ?

[pinto]

There was something wrong in one of the files.

The best way to handle this is to download the package again(it's updated)

put the indexT.htm in C:/Program Files/Cumulus/web/

but first backup the indexT.htm that exist in that folder

[Paul C]

OK, placfed the indexT file into the Cumulus Folder and it works.

Just need to make Cumulus update very 5 seconds. How do you do that ? It looks like just 1min intervals to me.
TKS

[pinto]

Cumulus ~> Configuration ~> Internet ~> Sites/Options ~> Realtime Interval
put 5 in there

only thing you should remember is when you upgrade Cumulus you have to put this indexT.htm in the cumulus/web/ folder

and now you can also set the regular updates to 10 minutes or so (you don't have to)

sorry for the late answer, had to bring the inLaws home

[pinto]

Hi Paul,

I see you site is in blue

you can change the flashing color if you want
click right on AjaxCumulus.js and open it with wordpad or notepad
find

Code: Select all

var flashcolor = '#FF0000'; // color to flash for changed observations

and you can change it to

Code: Select all

var flashcolor = '#0000FF'; // color to flash for changed observations

save the file, see it has no other extention added by the system, and upload to your webserver

[arthurhh]

Got to have a play with this, see if I can intergrate to my pages.

[Paul C]

Hi Paul,

I see you site is in blue

you can change the flashing color if you want
click right on AjaxCumulus.js and open it with wordpad or notepad
find

Code: Select all

var flashcolor = '#FF0000'; // color to flash for changed observations

and you can change it to

Code: Select all

var flashcolor = '#0000FF'; // color to flash for changed observations

save the file, see it has no other extention added by the system, and upload to your webserver

Looks like its working now with 5 secons interval. I will keep the colour as it is as it highlights the change better. From one update to the other

[pinto]

Got to have a play with this, see if I can intergrate to my pages.

some tips if you want to integrate this to your existing pages

Code: Select all

1.add in the <head> section of your page

<script type="text/javascript" src="AjaxCumulusTest.js"></script>

2.change <body> tag to

<body onload="ajaxLoader('realtime.txt?'+new Date())">

3.use 

<span name="ajax" id="ajaxtemp"><#temp>&nbsp;<#tempunit></span>

to show temperature were <#temp> is your existing tag to show the temperature

you need to have this for people who disabled javascript in the browser

4.available tags for ajax (to replace the ajaxtemp in the example above

ajaxintervaltext ~~> text to replace "<#interval> minutes" from the template
you can change this in the AjawCumulus.js file


ajaxtime ~~> (Updated: 16:51:04 on 27/10/08)
ajaxtemp ~~> outside temperature with temperature unit
ajaxtemptrend ~~> temperature trend with temperature unit
ajaxchill ~~> windchill with temperature unit
ajaxhum ~~> outside humidity with %
ajaxheatindex ~~> heat index with temperature unit
ajaxdewpt ~~> dew point with temperature unit
ajaxrfall ~~> rainfall so far today with rainunit
ajaxrrate ~~> rainrate with rainunit/hr
ajaxrmonth ~~> rainfall so far this month with rainunit
ajaxryear ~~> rainfall so far this year
ajaxwlatest ~~> latest reading of windspeed with windunit
ajaxwspeed ~~> avg windspeed with windunit
ajaxavgbearing ~~> avgbearing and deg-symbol followed by wdir
ajaxbeaufort ~~> F with beaufortnumber
ajaxbeaudesc ~~> beaufortdescription
ajaxwindrun ~~> windrun with windrununit
ajaxpress ~~> sealevel press with unit
ajaxpresstrend ~~> in words
ajaxpresstrendval ~~> like it says


I hope you find this usefull, and I also hope I did not make any mistakes here


 

upgraded the package according to this message (wind latest or wind gust)

link in first post