Please read the posts in the Announcements section about the current status of Cumulus development now that I have retired

Please read this post before posting

Latest Cumulus release v1.9.4 (build 1099) - Nov 28 2014
Latest Cumulus MX release - v3.0.0 build 3043 Jan 20 2017. See this post for download

webcam refresh webpage

Hardware/software/hints and tips/discussion/webcam links etc
dazza1223
Posts: 172
Joined: Sun Jan 25, 2015 8:41 pm
Weather Station: davis vantage vue
Operating System: raspberry pi 3
Location: worthing
Contact:

webcam refresh webpage

Postby dazza1223 » Tue Jun 28, 2016 8:05 pm

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

water01
Posts: 1401
Joined: Sat Aug 13, 2011 9:33 am
Weather Station: WH1081
Operating System: Windows 7 64bit HP SP1
Location: Somewhere in the USA
Contact:

Re: webcam refresh webpage

Postby water01 » Tue Jun 28, 2016 8:26 pm

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.

dazza1223
Posts: 172
Joined: Sun Jan 25, 2015 8:41 pm
Weather Station: davis vantage vue
Operating System: raspberry pi 3
Location: worthing
Contact:

Re: webcam refresh webpage

Postby dazza1223 » Tue Jun 28, 2016 8:37 pm

ok thak u so muchso where in the html i put this bite of code right at top?

water01
Posts: 1401
Joined: Sat Aug 13, 2011 9:33 am
Weather Station: WH1081
Operating System: Windows 7 64bit HP SP1
Location: Somewhere in the USA
Contact:

Re: webcam refresh webpage

Postby water01 » Tue Jun 28, 2016 9:41 pm

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

dazza1223
Posts: 172
Joined: Sun Jan 25, 2015 8:41 pm
Weather Station: davis vantage vue
Operating System: raspberry pi 3
Location: worthing
Contact:

Re: webcam refresh webpage

Postby dazza1223 » Tue Jun 28, 2016 9:44 pm

ok i want the full background photo i saw ur code where you set the size? so how do i make it full sceen

water01
Posts: 1401
Joined: Sat Aug 13, 2011 9:33 am
Weather Station: WH1081
Operating System: Windows 7 64bit HP SP1
Location: Somewhere in the USA
Contact:

Re: webcam refresh webpage

Postby water01 » Tue Jun 28, 2016 11:07 pm

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.

dazza1223
Posts: 172
Joined: Sun Jan 25, 2015 8:41 pm
Weather Station: davis vantage vue
Operating System: raspberry pi 3
Location: worthing
Contact:

Re: webcam refresh webpage

Postby dazza1223 » Wed Jun 29, 2016 8:31 pm

hi im stuck can u help me plz

water01
Posts: 1401
Joined: Sat Aug 13, 2011 9:33 am
Weather Station: WH1081
Operating System: Windows 7 64bit HP SP1
Location: Somewhere in the USA
Contact:

Re: webcam refresh webpage

Postby water01 » Wed Jun 29, 2016 10:05 pm

I can try but a URL to your website so I can see what you have done would be helpful.

dazza1223
Posts: 172
Joined: Sun Jan 25, 2015 8:41 pm
Weather Station: davis vantage vue
Operating System: raspberry pi 3
Location: worthing
Contact:

Re: webcam refresh webpage

Postby dazza1223 » Wed Jun 29, 2016 10:09 pm

www.davisworthing.co.uk that my website and u will sell the webcam photo as my background that the one i want to refresh

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

Re: webcam refresh webpage

Postby beteljuice » Thu Jun 30, 2016 10:52 am

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

dazza1223
Posts: 172
Joined: Sun Jan 25, 2015 8:41 pm
Weather Station: davis vantage vue
Operating System: raspberry pi 3
Location: worthing
Contact:

Re: webcam refresh webpage

Postby dazza1223 » Thu Jun 30, 2016 10:55 am

so this code gose in css file then??

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

Re: webcam refresh webpage

Postby beteljuice » Fri Jul 01, 2016 12:57 am

No .. It's JavaScript (Which happens to be updating a CSS / object property)

.. to replace that which you are trying already.
Image
......................Imagine, what you will KNOW tomorrow !

dazza1223
Posts: 172
Joined: Sun Jan 25, 2015 8:41 pm
Weather Station: davis vantage vue
Operating System: raspberry pi 3
Location: worthing
Contact:

Re: webcam refresh webpage

Postby dazza1223 » Fri Jul 01, 2016 7:56 am

OK I will try the the line in the css to point to the photo background have I got to remove that ?

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

Re: webcam refresh webpage

Postby beteljuice » Fri Jul 01, 2016 10:49 am

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

dazza1223
Posts: 172
Joined: Sun Jan 25, 2015 8:41 pm
Weather Station: davis vantage vue
Operating System: raspberry pi 3
Location: worthing
Contact:

Re: webcam refresh webpage

Postby dazza1223 » Fri Jul 01, 2016 10:53 am

ok this is geting relly hard for me if i geve u the html can u edit it plz ? lol sorry


Return to “Webcams”

Who is online

Users browsing this forum: No registered users and 2 guests