Welcome to the new home of the Cumulus Support forum.

Latest Cumulus release v1.9.4 (build 1099) - 28 November 2014
Latest Cumulus MX release v3.0.0 build 3046 - 02 January 2019. See the Wiki for download

webcam refresh countdown timers

Hardware/software/hints and tips/discussion/webcam links etc
Post Reply
User avatar
hills
Posts: 662
Joined: Sat 26 Dec 2009 8:52 am
Weather Station: Fine Offset WH1091
Operating System: Windows XP
Location: Crafers, South Australia
Contact:

webcam refresh countdown timers

Post by hills » Fri 21 May 2010 8:24 am

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? :D

casacota
Posts: 27
Joined: Sun 28 Mar 2010 2:04 pm
Weather Station: Davis Vantage Vue
Operating System: Windows XP pro SP3
Location: Catalan Pyrennees
Contact:

Re: webcam refresh countdown timers

Post by casacota » Fri 21 May 2010 7:20 pm

hills wrote: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? :D
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
Image

Synewave
Posts: 642
Joined: Mon 25 Jan 2010 1:55 pm
Weather Station: Watson W-8681
Operating System: Raspian
Location: Brighton, UK
Contact:

Re: webcam refresh countdown timers

Post by Synewave » Fri 21 May 2010 9:01 pm

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
Posts: 1885
Joined: Sat 21 Feb 2009 12:41 pm
Weather Station: Nothing working ATM - making one
Operating System: OS X, Linux Mint, Win7 & XP
Location: Devon UK

Re: webcam refresh countdown timers

Post by Gina » Fri 21 May 2010 9:17 pm

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.
Gina

Sorry, no banner - weather station out of action. Hoping to be up and running with a new home-made one soon.

Synewave
Posts: 642
Joined: Mon 25 Jan 2010 1:55 pm
Weather Station: Watson W-8681
Operating System: Raspian
Location: Brighton, UK
Contact:

Re: webcam refresh countdown timers

Post by Synewave » Fri 21 May 2010 9:33 pm

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
Posts: 1885
Joined: Sat 21 Feb 2009 12:41 pm
Weather Station: Nothing working ATM - making one
Operating System: OS X, Linux Mint, Win7 & XP
Location: Devon UK

Re: webcam refresh countdown timers

Post by Gina » Fri 21 May 2010 10:06 pm

Thanks Paul :)
Gina

Sorry, no banner - weather station out of action. Hoping to be up and running with a new home-made one soon.

gemini06720
Posts: 1700
Joined: Mon 10 Aug 2009 10:16 pm
Weather Station: No weather station
Operating System: No operating system
Location: World...

Re: webcam refresh countdown timers

Post by gemini06720 » Fri 21 May 2010 10:14 pm

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="" />...

User avatar
hills
Posts: 662
Joined: Sat 26 Dec 2009 8:52 am
Weather Station: Fine Offset WH1091
Operating System: Windows XP
Location: Crafers, South Australia
Contact:

Re: webcam refresh countdown timers

Post by hills » Fri 21 May 2010 10:20 pm

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. :)
Last edited by hills on Fri 21 May 2010 10:30 pm, edited 1 time in total.

User avatar
beteljuice
Posts: 2537
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: XP SP3 - honest
Location: Dudley, West Midlands, UK

Re: webcam refresh countdown timers

Post by beteljuice » Fri 21 May 2010 10:30 pm

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

Whilst hating CSS, it does have its uses :o

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 :lol:
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 ;)
Image
......................Imagine, what you will KNOW tomorrow !

gemini06720
Posts: 1700
Joined: Mon 10 Aug 2009 10:16 pm
Weather Station: No weather station
Operating System: No operating system
Location: World...

Re: webcam refresh countdown timers

Post by gemini06720 » Fri 21 May 2010 10:55 pm

Synewave wrote: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! :roll:

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
Posts: 27
Joined: Sun 28 Mar 2010 2:04 pm
Weather Station: Davis Vantage Vue
Operating System: Windows XP pro SP3
Location: Catalan Pyrennees
Contact:

Re: webcam refresh countdown timers

Post by casacota » Sat 22 May 2010 3:02 am

Synewave wrote: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.
Image

User avatar
hills
Posts: 662
Joined: Sat 26 Dec 2009 8:52 am
Weather Station: Fine Offset WH1091
Operating System: Windows XP
Location: Crafers, South Australia
Contact:

Re: webcam refresh countdown timers

Post by hills » Sat 22 May 2010 6:33 am

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. :D

JohnDon
Posts: 30
Joined: Tue 14 Sep 2010 10:09 pm
Weather Station: Smart Weather 2080
Operating System: Win XP
Location: Ireland
Contact:

Re: webcam refresh countdown timers

Post by JohnDon » Tue 14 Sep 2010 10:20 pm

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

John

elmdcw
Posts: 21
Joined: Wed 12 Jan 2011 9:45 am
Weather Station: VP2
Operating System: W7
Location: Ruislip

Re: webcam refresh countdown timers

Post by elmdcw » Thu 13 Oct 2011 8:16 pm

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

Post Reply