Auto-refresh Website Index Page Without Using Meta Refresh

vegasmini · **Posted:** Mon Apr 16, 2012 7:39 pm

I was wondering if anyone be able to help me add some code to the realtimereader.js script?
I would like it to check the last time the page was updated (using <span id="time"></span>) and then display some images and then redirect to a new page if the realtime.txt file hasn't been updated in 30-40 seconds.

Let me explain:
When loading the page it will dispaly "Update status = green led image"
If the realtime.txt doesn't get updated after 20 seconds it will dispaly a yellow led,
10 more seconds of no update it will display a red led,
If 10 more seconds go by without an update it will go to a page stating that the site is temporarily down (maintenance page).

This is some script I was able to come up with so far, but I do not know the code needed to check after the first 10 seconds:
Removed from my realtimereader.js file

Code:

if (first_run==false) {

//check if time has changed. If so, display leds
var check1 = time;
if (check1!=$("time").text()) {var imagen = "greenled.png";}
if (check1==$("#time").text()){window.open('/error/maintenance.php','_self');}
$("#check1").html('<img src="/images/'+imagen+'"align =absmiddle>');

}

Thanks for your help.

Mapantz · **Posted:** Fri May 11, 2012 11:37 am

By using the method that the OP has made, would my index page still get processed and uploaded by Cumulus at the 15 minute interval i've set it at?

Regards.

PeterP · **Posted:** Mon May 14, 2012 5:47 pm

Hi folks,

I am using the standard templates, and have added this update code including the "updating in xx seconds" to my indexT file, but the website still displays the standard files?

Any clues as to what the problem is would be appreciated. I was previously unable to add a flagcounter for the same reason.

I dont know if it is significant but the dates on the index and indexT files show differently. Should they not be updated at the same time? I thought cumulus processes indexT, then transfers the file to index, which is ftp'd?

Attachment:

Program Manager_2012-05-15_05-30-38.png

]

Attachment:

DCumuluswebindexT.png

Many thanks,
Peter

steve · **Posted:** Mon May 14, 2012 6:05 pm

It looks to me like you're not actually using the templates in that folder, and it's been that way since 26th March, which is the last time Cumulus processed the files there. You'll have to show me what your Cumulus internet settings are.

aduncan · **Posted:** Mon May 14, 2012 7:56 pm

I've applied the op's code and got the data updating every 60 seconds, thanks for that.

Now I'm trying to be clever (for me!). I've set Yawcam to send a .jpg file to my cumulus\web folder every 60 seconds, and added the file to the extra files section in the internet config pages. The file is ftp'd ok. I've added the image to the bottom of my web page, and when I open the page there it is.

But after the realtime files are applied and the data changes, the image does not unless I F5 or reload the page. I've tried umpteen code snippets from googling, but nothing works.

Could someone point me in the right direction, I know next to nothing about web design, although I've been in IT for years.

Andrew

nitrx · **Posted:** Mon May 14, 2012 8:08 pm

aduncan wrote:

I've applied the op's code and got the data updating every 60 seconds, thanks for that.

Now I'm trying to be clever (for me!). I've set Yawcam to send a .jpg file to my cumulus\web folder every 60 seconds, and added the file to the extra files section in the internet config pages. The file is ftp'd ok. I've added the image to the bottom of my web page, and when I open the page there it is.

But after the realtime files are applied and the data changes, the image does not unless I F5 or reload the page. I've tried umpteen code snippets from googling, but nothing works.

Could someone point me in the right direction, I know next to nothing about web design, although I've been in IT for years.

Andrew

The data provided by the realtime.txt are updated every x seconds by the ajax-script but the image wil only be update after the minutes you've set interval by updating the page by cumulus there is no data in the realtime.txt for updating your image, by using F5 or CTRL-reload. The only way to keep realtime images of your webcam in your page is to upload an image in the same interval as your realtime.txt is updated or to incude a realime livestream from a webcam (will cost you a heavy load of bandwith !) Or use the same tag as on your webcam page ? <img src="http://www.btinternet.com/~helicop/DCS-932L.jpg" id="reloader" onload="setTimeout('document.getElementById(\'reloader\').src=\'DCS-932L.jpg?\'+new Date().getMilliseconds()', 10000)" />

vegasmini · **Posted:** Mon May 14, 2012 8:09 pm

You can use Javascript to refresh your image very easily.

Put this between your <head> </head>:

Code:

<script type="text/javascript"> //Auto refresh image
function refreshIt() {
  if (!document.images) return;
  document.images['webcam'].src ='/webcam/webcam001.jpg?' +
Math.random();
  setTimeout('refreshIt()',30000); // refresh every 30 seconds
}
</script>

Change <body> to this:

Code:

Your image in your body section will look like this:

Code:

<img id="webcam" src="/webcam/webcam001.jpg" alt="webcam" width="320" height="240" />

Once your page loads, the image will refresh every 30 seconds.

My page shows an example of if if you want to check it out.
http://mtcharlestonweather.com

-John

steve · **Posted:** Mon May 14, 2012 8:16 pm

aduncan wrote:

But after the realtime files are applied and the data changes, the image does not unless I F5 or reload the page. I've tried umpteen code snippets from googling, but nothing works.

You'll need to add some code to reload the image, and use a 'cache buster' of the date and time. See the standard graphs page for an example:

Code:

function changeImage(im) {
   document.images["graphs"].src = im + "?" + new Date().getTime();
}

Call that function when the data changes, and for the 'im' parameter, use the URL of the image.

aduncan · **Posted:** Mon May 14, 2012 9:05 pm

Thanks nitrx, I'd already tried that, but when it refreshed it blanked. But when I changed the second file name in that line to a full http://...etc, it worked perfectly. The question is why did it work as a seperate web page? No - don't baffle me with science - I don't have time to learn website coding, got enough hobbies already. The weather station was just to see mainly what conditions are like to go and fly my model aircraft, THAT'S where all my money and time go.

Andrew

PeterP · **Posted:** Tue May 15, 2012 1:21 am

Thanks Steve.

I did notice a few gaps in my April and May logs, and my dayfile stops at 20/04/12, but strangly the Dayfile editor was complete,and otherwise Cumulus was working as it should. Obviously (even to me) this shouldnt have been so.

I did mess around with the Pc around then, installing a ssd for windows as c:/ drive,, and moving programs to D:/ drive and Users to a E:/ drive.

To cut a long story short, I had 2 installations of Cumulus, and silly me had been editing in one place and running the other...... :oops:

All sorted now,

Thanks for your patience with novices like me.

rocketfingers · **Posted:** Sun Jan 13, 2013 7:36 pm

I have followed the instructions above and also replaced the indexT.htm with the data supplied by synewave, my intro page is fine and updates every minute but my guages page has stopped updating at all.
I've zipped the indexT file if anybody wishes to have a look.
Getting a great deal of help from you guys.
Many thanks
John

water01 · **Posted:** Sun Jan 13, 2013 7:53 pm

I believe the problem is you have put jquery.js in your cumulus home directory and the gauges uses j-query-1.8.2.min.js in the script directory installed with the gauges. Your load takes precedence and therefore gauges do not work.

I would try changing

Code:

to

Code:

and I think that will cure the problem

Or leave

Code:

and make sure that

Code:

in gauges-ssT.htm

is commented out so it uses your already loaded jquery.js.

rocketfingers · **Posted:** Sun Jan 13, 2013 10:48 pm

I don't have scripts/jquery-1.8.2.min.js in my folder, only jquery.js, which is what I downloaded from synewaves page.
John

rocketfingers · **Posted:** Mon Jan 14, 2013 9:16 am

I have found jquery-1.8.2.min.js on the microsoft website and placed it in the web folder but the gauges still dont refresh unless I click the refresh on explorer.
John

water01 · **Posted:** Mon Jan 14, 2013 11:47 am

Any chance of a link to your website so we can see what is going on?

	It is currently Fri May 24, 2013 2:19 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
Latest Cumulus release v1.9.3 (build 1059) - Feb 09 2013 Latest Cumulus beta v1.9.4 build 1077 - May 23 2013 --> Latest Cumulus Realtime v1.0.0.5 - Sep 05 2009

Sandaysoft

Auto-refresh Website Index Page Without Using Meta Refresh

Who is online