Page 1 of 2
webcam refresh webpage
Posted: Tue 28 Jun 2016 8:05 pm
by dazza1223
hi all ive just set up a webcam and it up load the photos to my website but i have to keep refreshing the page so is there a way to auto refesh the page with out me doing it but can some one right the code as im a starter meny thank
Re: webcam refresh webpage
Posted: Tue 28 Jun 2016 8:26 pm
by water01
Code: Select all
<script type="text/javascript">
// <![CDATA[
var refreshrate = 30; // seconds between refresh
var image = "http://yourwebsite.co.uk/webcampicture.jpg"; // image name
var imgwidth = 640; // image width
var imgheight = 480; // image height
var imgalt = "WebCam Image";
var imgtitle = "header=[WebCam Image] body=[WebCam Image Automatically Updated Every 30 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 code will do this for you. It is a piece of jscript that reloads the picture rather than the whole page every x seconds where you set x in the var refreshrate = 30 (in my case) and var image = "
http://yourwebsite.co.uk/webcampicture.jpg"; is set to where the refreshed image is held on your website. You will have to of course upload a new image every 30 seconds either by Cumulus realtime or some other means.
Re: webcam refresh webpage
Posted: Tue 28 Jun 2016 8:37 pm
by dazza1223
ok thak u so muchso where in the html i put this bite of code right at top?
Re: webcam refresh webpage
Posted: Tue 28 Jun 2016 9:41 pm
by water01
Wherever you want the picture to appear. Using <center> Code </center> in the body are of the HTML would make it appear in the middle of the page. Example here
http://www.dmjsystems.co.uk/weather/webcam.php (mine only runs in daylight hours otherwise the image says offline).
Re: webcam refresh webpage
Posted: Tue 28 Jun 2016 9:44 pm
by dazza1223
ok i want the full background photo i saw ur code where you set the size? so how do i make it full sceen
Re: webcam refresh webpage
Posted: Tue 28 Jun 2016 11:07 pm
by water01
Set
Code: Select all
var imgwidth = 640; // image width
var imgheight = 480; // image height
to the size of your screen in pixels, but if you do that there will be no room for your menu etc. except by scrolling the screen.
Re: webcam refresh webpage
Posted: Wed 29 Jun 2016 8:31 pm
by dazza1223
hi im stuck can u help me plz
Re: webcam refresh webpage
Posted: Wed 29 Jun 2016 10:05 pm
by water01
I can try but a URL to your website so I can see what you have done would be helpful.
Re: webcam refresh webpage
Posted: Wed 29 Jun 2016 10:09 pm
by dazza1223
www.davisworthing.co.uk that my website and u will sell the webcam photo as my background that the one i want to refresh
Re: webcam refresh webpage
Posted: Thu 30 Jun 2016 10:52 am
by beteljuice
You want change the backgound of the
body of the page !
So this is a css / JavaScript combination ...
Try something like:
Code: Select all
<script type="text/javascript">
// <![CDATA[
var refreshrate = 30; // seconds between refresh
var image = "http://yourwebsite.co.uk/webcampicture.jpg"; // image name
function refresh() { document.body.style.background ="url('image + '?' + new Date()') size 100% 100%"; setTimeout('refresh()', refreshrate * 1000); }
if(document.images)window.onload=refresh;
// ]]>
</script>
Untested .. may have my syntax wrong !!!
Re: webcam refresh webpage
Posted: Thu 30 Jun 2016 10:55 am
by dazza1223
so this code gose in css file then??
Re: webcam refresh webpage
Posted: Fri 01 Jul 2016 12:57 am
by beteljuice
No .. It's JavaScript (Which happens to be updating a CSS / object property)
.. to replace that which you are trying already.
Re: webcam refresh webpage
Posted: Fri 01 Jul 2016 7:56 am
by dazza1223
OK I will try the the line in the css to point to the photo background have I got to remove that ?
Re: webcam refresh webpage
Posted: Fri 01 Jul 2016 10:49 am
by beteljuice
No need really.
If the JS 'fails' for any reason, then the
body background-image will be the one defined in
weatherstyles.css.
If the JS is working, then assuming your webcam pic always has the same name ...
Code: Select all
document.body.style.background ="url('image + '?' + new Date()')
will change the background.
The ?'date' suffix is a cache buster so that the image is always the latest one.
Re: webcam refresh webpage
Posted: Fri 01 Jul 2016 10:53 am
by dazza1223
ok this is geting relly hard for me if i geve u the html can u edit it plz ? lol sorry
