webcam refresh countdown timers

[hills]

I've noticed a lot of you have countdown timers until the next image refresh. I've tried googling how to do this but without much success. Can anyone point me in the right direction about how to impliment this?

[casacota]

I've noticed a lot of you have countdown timers until the next image refresh. I've tried googling how to do this but without much success. Can anyone point me in the right direction about how to impliment this?

Put this line where you want to have your countdown:

Code: Select all

<script type="text/javascript" src="reload.js"></script><form name="main">act.: <input name="time" value="" size="4" type="text"></form>

And in the same directory a textfile named reload.js with this content. Note that the script is also responsible to reload the page, you don't need nothing else!:

Code: Select all

var inicirl = new Date();
var firl = new Date();
var momentrl = new Date();


var perioderl = 300;  // put here the amount in seconds that you will to have the page refreshed
inicirl.setFullYear(2007,2,2);
firl.setFullYear(2007,2,5); 

var Intervrl = perioderl;

var onrlsom = location;

onrlsom = onrlsom + "";

var onrl = onrlsom.indexOf('?t=');
if (onrl > 0) {
onrlsom = onrlsom.slice(0,onrl);
}
onrlsom = onrlsom + '?t=' + Math.floor(Math.random()*9999);

function startClock2()
	{	 
	Intervrl = Intervrl - 1;
	
	if(Intervrl == 0)
		{
		momentrl.getDate();
		if((momentrl > inicirl) && (momentrl < firl))
			{
			}
location = onrlsom;
		Intervrl = perioderl;
		}

	var minrl = parseInt(Intervrl/60 +1) -1;
	var secrl = Intervrl - minrl*60;
var minrlu = minrl;
var secrlu = secrl;
if (minrlu < 10) {
minrlu = "0" + minrlu;
}
if (secrlu < 10) {
secrlu = "0" + secrlu;
}
	   document.main.time.value = minrlu + ":" + secrlu;
	setTimeout("startClock2()", 1000);
	}
	setTimeout("startClock2()", 5000);

See it in action here:

http://www.casacota.net/teranyina?num=1132426988

[Synewave]

Casacota,

It looks like your script refreshes the whole page as there is nothing apparent in the script to reference the webcam image only?

Phil,

The script may give you your countdown facility, but not sure you want the whole page to refresh. Maybe a whole page refresh is acceptable, personally I would prefer just the webcam image refreshing as on my Great College Street Webcam page. Although I don't have a countdown timer.

[Gina]

I have the whole page reloading when the webcam updates and would rather just update the webcam image. I'm currently using HTML code to refresh the page with a fixed period (2mins in this case). I'd be interested in code that refreshes just the webcam image, if possible.

I like the idea of a countdown timer and may add that to my web page. I've used javascript counters in the past in other web sites.

[Synewave]

Hi,

The code I use in my webpage to refresh the image only (and not the whole page) is:

Code: Select all

<img src="out_1.jpg" width="300" align="center" height="225" name="refreshwebcam"><SCRIPT src="webcam_refresh.js" language="JavaScript" type="text/javascript" ></SCRIPT> 

And in the webcam_refresh.js file is:

Code: Select all

var t_webcam = 60 // interval in seconds 
      image_webcam = "out_1.jpg" //name of the image 
      function Start_webcam() { 
      tmp_webcam = new Date(); 
      tmp_webcam = "?"+tmp_webcam.getTime() 
      document.images["refreshwebcam"].src = image_webcam+tmp_webcam 
      setTimeout("Start_webcam()", t_webcam*1000) 
      } 
      Start_webcam(); 

Just change the .jpg file name in both bits of code to your own webcam filename.

I also use this on my gauges page to refresh each individual gauge being read from the realtime file only.

Hope this helps.

[Gina]

Thanks Paul

[gemini06720]

Paul, nice script...

Phil, as indicated by Paul, rather than counting down the time until the next image refresh cycle (and sowing the count down timer to the user, which I find annoying and unprofessional), what I have found on the Internet and what I have been using on my 'still-under-development' pages is an image refresh timer, meaning that the JavaScript automatically refreshes the image from the server and not the whole page.

There are a few settings (two of which I have added for completeness with my Web pages):

• - the amount of time between image refresh cycles;
  - the locations of the image - it can be the relative image path or a complete URL;
  - the image width attribute;
  - the image width attribute;
  - the image alt="" attribute;
  - the image title="" attribute.

The image alt="" attribute has been added for completions - the attribute alt="" must be included to all images if a page is to properly pass the W3C Markup Validation Service.

The image title="" attribute has been added to allow the mouse-over tooltip from the 'boxover.js' script.

So, what needs to be done - replace the following code:

Code: Select all

<img src="webcam_image.jpg" alt="WebCan Image" border="0" />

with:

Code: Select all

<script type="text/javascript">
// <![CDATA[
var refreshrate = 60;          // seconds between refresh
var image       = "webcam_image.jpg";    // image name
var imgwidth    = 640;        // image width
var imgheight   = 480;        // image height
var imgalt      = "WebCan Image";
var imgtitle    = "header=[WebCan Image] body=[WebCan Image Automatically Updated Every 60 Seconds] delay=[1000]";
function refresh() { document.images["pic"].src = image + "?" + new Date(); setTimeout('refresh()', refreshrate * 1000); }
document.write('<img src="' + image + '" alt="' + imgalt + '" title="' + imgtitle + '" name="pic" id="pic" width="' + imgwidth + '" height="' + imgheight + '" style="border: none;" />');
if(document.images)window.onload=refresh;
// ]]>
</script>

The above JavaScript code is used instead of <img src="" />...

[hills]

Excellent thanks for those responses, that'll be my project for tomorrow as we're about to have our first wet and miserable day here in quite a while!

I believe my webcam html already updates just the image every 5 minutes, so I'll build the counter in with that refresh rather than a whole page refresh if I can, but if not a whole page refresh is fine too. I'm sure I'll be able to work it out with the info you've all posted.

[beteljuice]

The code is 'old' [edit: some of my points covered even as I was typing]

Whilst hating CSS, it does have its uses

A more upto date philosophy would be to have your timer displaying in a named <div> or <span> with it's content being updated.

In a similar vein, pure eye-candy, is to have TWO <div> into which you load your picture (alternating) and not display until loaded. This stops picture 'flick' or blank gap on slow connections.

Ignoring all I've said above, more eye-candy
Something I used years ago ....

Code: Select all

<html>
.....
<body>
.....
<SCRIPT LANGUAGE="JavaScript"> 
 
<!--
function LoadImage1()
 
{
        uniq1 = Math.random();
	document.images.webcam1.src = "opt2.php?"+uniq1;
 
}
 
function StartDelay()
{
        window.setTimeout("LoadImage1();", 3000); // status image delay
        window.setInterval("LoadImage1();", 30000); // subsequent loop
}
 
//-->
 
</script>
 
 ....

<img src="loading.jpg" id="webcam1" name="webcam1" onload="StartDelay()" width=320 height=240 border=1 style="border-color:#a4a4ff; border-style:solid;" />

....
</body>
</html>

Note that the inital image is loading.jpg (actually it was a graphic that said "Checking Camera Status"), after a pre-defined delay it looks for your real image file.

Also note that the use of onLoad in the <img ...> will FAIL 'validation' checks but works great

[gemini06720]

Just change the .jpg file name in both bits of code to your own webcam filename.

I also use this on my gauges page to refresh each individual gauge being read from the realtime file only.

Paul would you not need to have a different JS script for each gauges as the file name for the image is included (hard-coded) into the JS script!

What would be needed (and, please do not ask me how to do it, I know very little of JavaScript coding) would be a variable with the image name that could/would be pass on to the JS script and thus making the JS more flexible (rather than having the image name hard coded into the JS script)...

... A few minutes later ...

This is what I have done...

The 'webcam_refresh.js' JavaScript code:

Code: Select all

// <![CDATA[
var t_webcam = image_refresh;
var image_webcam = image_name;
function Start_webcam() {
  tmp_webcam = new Date();
  tmp_webcam = "?"+tmp_webcam.getTime()
  document.images["refreshwebcam"].src = image_webcam + tmp_webcam
  setTimeout("Start_webcam()", t_webcam * 1000)
}
Start_webcam();
// ]]>

The Web page code:

Code: Select all

<script language="javascript" type="text/javascript">
  var image_name = "webcam_image.jpg";
  var image_refresh = 60;
</script>
<img src="webcam_image.jpg.jpg" width="640" align="center" height="480" name="refreshwebcam">
<script src="webcam_refresh.js" language="JavaScript" type="text/javascript"></script>

Just tried Paul's modified code on my page and it seems to work properly...

[casacota]

Casacota,

It looks like your script refreshes the whole page as there is nothing apparent in the script to reference the webcam image only?

Phil,

The script may give you your countdown facility, but not sure you want the whole page to refresh. Maybe a whole page refresh is acceptable, personally I would prefer just the webcam image refreshing as on my Great College Street Webcam page. Although I don't have a countdown timer.

Yes it does refresh the whole page... the webcam page is only a secondary one, the script is used also here http://www.casacota.net/teranyina?num=1132237973 , here http://www.casacota.net/teranyina?num=1266796271 and in several other pages in my case.

The reason to not to refresh only one image via javascript is that it doesn't always work in some browsers eg. IE6 throught proxy servers, what is normal in most workplaces where I live.

[hills]

I've got my countdown timer working using Casacota's scripts - thanks very much.

http://members.ozemail.com.au/~storerfa ... ebcam.html

I tried to amalgamate it with the image only refresh scripts supplied, but that was a bit above me. I'll keep working at it though.

[JohnDon]

Thanks very much Lads just put your code on my page http://www.carnebeach.com/live_view.html

John

[elmdcw]

Hi,
I have my webcam image refreshing nicely every minute via java script. But would like the client to stop downloading it during the evening (say between 2100 and 0600). The image isn't updated on the website outside these hours, so was looking to stop the client from doing downloads.
Suggestions welcome
Thanks
Dave