Page 1 of 3
Ajaxed index-page
Posted: Sun 26 Oct 2008 4:16 pm
by 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
Re: Ajaxed index-page
Posted: Sun 26 Oct 2008 6:00 pm
by 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
Re: Ajaxed index-page
Posted: Sun 26 Oct 2008 6:15 pm
by 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 !!!!
Re: Ajaxed index-page
Posted: Sun 26 Oct 2008 7:11 pm
by 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
Re: Ajaxed index-page
Posted: Sun 26 Oct 2008 7:16 pm
by 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>
Re: Ajaxed index-page
Posted: Sun 26 Oct 2008 7:26 pm
by pinto
<script type="text/javascript" src="AjaxCumulus.js"></script>
is correct
I left
<script type="text/javascript" src="AjaxCumulusTest.js"></script>
in indexT.htm
Re: Ajaxed index-page
Posted: Sun 26 Oct 2008 7:47 pm
by 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
Re: Ajaxed index-page
Posted: Sun 26 Oct 2008 7:51 pm
by Paul C
pinto wrote:<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 ?
Re: Ajaxed index-page
Posted: Sun 26 Oct 2008 7:57 pm
by 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
Re: Ajaxed index-page
Posted: Sun 26 Oct 2008 8:21 pm
by 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
Re: Ajaxed index-page
Posted: Sun 26 Oct 2008 9:02 pm
by 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
Re: Ajaxed index-page
Posted: Sun 26 Oct 2008 9:27 pm
by 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
Re: Ajaxed index-page
Posted: Sun 26 Oct 2008 10:20 pm
by arthurhh
Got to have a play with this, see if I can intergrate to my pages.
Re: Ajaxed index-page
Posted: Mon 27 Oct 2008 1:43 pm
by Paul C
pinto wrote: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
Re: Ajaxed index-page
Posted: Mon 27 Oct 2008 7:19 pm
by pinto
arthurhh wrote: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> <#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