Auto-refresh Website Index Page Without Using Meta Refresh

nitrx · Post by **nitrx** » Mon 14 May 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 · Post by **vegasmini** » Mon 14 May 2012 8:09 pm

You can use Javascript to refresh your image very easily.

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

Code: Select all

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

<body onload="setTimeout('refreshIt()',30000)">

Your image in your body section will look like this:

Code: Select all

<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

Post by **steve** » Mon 14 May 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: Select all

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 · Post by **aduncan** » Mon 14 May 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 · Post by **PeterP** » Tue 15 May 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......

All sorted now,

Thanks for your patience with novices like me.

rocketfingers · Post by **rocketfingers** » Sun 13 Jan 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

Post by **water01** » Sun 13 Jan 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: Select all

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

to

Code: Select all

<script src="scripts/jquery-1.8.2.min.js" type="text/javascript"></script>

and I think that will cure the problem

Or leave

Code: Select all

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

and make sure that

Code: Select all

<script src="scripts/jquery-1.8.2.min.js"></script>

in gauges-ssT.htm

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

rocketfingers · Post by **rocketfingers** » Sun 13 Jan 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 · Post by **rocketfingers** » Mon 14 Jan 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

Post by **water01** » Mon 14 Jan 2013 11:47 am

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

rocketfingers · Post by **rocketfingers** » Mon 14 Jan 2013 12:51 pm

Yes sure, it's
http://www.shawbirchweather.info
John

Synewave · Post by **Synewave** » Mon 14 Jan 2013 4:40 pm

Firstly, your weatherstyle.css is missing.
Also the index page you have published there does not have the changes required for the auto-refresh to work. I guess you have not disabled Cumulus from uploading the standard files?

rocketfingers · Post by **rocketfingers** » Mon 14 Jan 2013 7:20 pm

Sorry, I should have sent a post to say that I deleted cumulus and started again with the default files and all I have done is edited the indexT.htm <head>.
I am making a fresh start as I think it is probably the best way forward.
Can you tell me which files I need to download/alter to achieve auto update as it should be.
Regards
John

loades · Post by **loades** » Tue 05 Feb 2013 11:12 am

Probably a dumb question but I can't get anywhere without asking it! The first posting in this thread says "Implementation is simple, just unzip this file and upload the realtimereader.js and jquery.js files to your webserver". Below that it says "Attachment:
jquery and realtimereader.zip". There is no active link in any of this text. At the bottom of the posting it says in red "You do not have the required permissions to view the files attached to this post.

How do I get permission to download the required zip file?

Thanks

Malcolm

Post by **steve** » Tue 05 Feb 2013 11:26 am

Unregistered and 'new' users can't download files from the forum. Now that your first post has been approved, you should be able to download the attachments.

Cumulus Support

Auto-refresh Website Index Page Without Using Meta Refresh

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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