Welcome to the Cumulus Support forum.

Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024

Cumulus MX V4 beta test release 4.0.0 (build 4018) - 28 March 2024

Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014 (a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)

Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki

webcam refresh webpage

Hardware/software/hints and tips/discussion/webcam links etc
User avatar
dazza1223
Posts: 860
Joined: Sun 25 Jan 2015 8:41 pm
Weather Station: Davis Vantage Pro 2 plus
Operating System: Raspberry pi 4 (4gb)
Location: Worthing
Contact:

webcam refresh webpage

Post 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
Have fun and keep learning

dazza :D

https://www.davisworthing.co.uk

Image
water01
Posts: 3215
Joined: Sat 13 Aug 2011 9:33 am
Weather Station: Ecowitt HP2551
Operating System: Windows 10 64bit
Location: Burnham-on-Sea
Contact:

Re: webcam refresh webpage

Post 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.
David
Image
User avatar
dazza1223
Posts: 860
Joined: Sun 25 Jan 2015 8:41 pm
Weather Station: Davis Vantage Pro 2 plus
Operating System: Raspberry pi 4 (4gb)
Location: Worthing
Contact:

Re: webcam refresh webpage

Post by dazza1223 »

ok thak u so muchso where in the html i put this bite of code right at top?
Have fun and keep learning

dazza :D

https://www.davisworthing.co.uk

Image
water01
Posts: 3215
Joined: Sat 13 Aug 2011 9:33 am
Weather Station: Ecowitt HP2551
Operating System: Windows 10 64bit
Location: Burnham-on-Sea
Contact:

Re: webcam refresh webpage

Post 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).
David
Image
User avatar
dazza1223
Posts: 860
Joined: Sun 25 Jan 2015 8:41 pm
Weather Station: Davis Vantage Pro 2 plus
Operating System: Raspberry pi 4 (4gb)
Location: Worthing
Contact:

Re: webcam refresh webpage

Post 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
Have fun and keep learning

dazza :D

https://www.davisworthing.co.uk

Image
water01
Posts: 3215
Joined: Sat 13 Aug 2011 9:33 am
Weather Station: Ecowitt HP2551
Operating System: Windows 10 64bit
Location: Burnham-on-Sea
Contact:

Re: webcam refresh webpage

Post 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.
David
Image
User avatar
dazza1223
Posts: 860
Joined: Sun 25 Jan 2015 8:41 pm
Weather Station: Davis Vantage Pro 2 plus
Operating System: Raspberry pi 4 (4gb)
Location: Worthing
Contact:

Re: webcam refresh webpage

Post by dazza1223 »

hi im stuck can u help me plz
Have fun and keep learning

dazza :D

https://www.davisworthing.co.uk

Image
water01
Posts: 3215
Joined: Sat 13 Aug 2011 9:33 am
Weather Station: Ecowitt HP2551
Operating System: Windows 10 64bit
Location: Burnham-on-Sea
Contact:

Re: webcam refresh webpage

Post by water01 »

I can try but a URL to your website so I can see what you have done would be helpful.
David
Image
User avatar
dazza1223
Posts: 860
Joined: Sun 25 Jan 2015 8:41 pm
Weather Station: Davis Vantage Pro 2 plus
Operating System: Raspberry pi 4 (4gb)
Location: Worthing
Contact:

Re: webcam refresh webpage

Post 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
Have fun and keep learning

dazza :D

https://www.davisworthing.co.uk

Image
User avatar
beteljuice
Posts: 3292
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: webcam refresh webpage

Post 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 !!!
Image
......................Imagine, what you will KNOW tomorrow !
User avatar
dazza1223
Posts: 860
Joined: Sun 25 Jan 2015 8:41 pm
Weather Station: Davis Vantage Pro 2 plus
Operating System: Raspberry pi 4 (4gb)
Location: Worthing
Contact:

Re: webcam refresh webpage

Post by dazza1223 »

so this code gose in css file then??
Have fun and keep learning

dazza :D

https://www.davisworthing.co.uk

Image
User avatar
beteljuice
Posts: 3292
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: webcam refresh webpage

Post by beteljuice »

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 !
User avatar
dazza1223
Posts: 860
Joined: Sun 25 Jan 2015 8:41 pm
Weather Station: Davis Vantage Pro 2 plus
Operating System: Raspberry pi 4 (4gb)
Location: Worthing
Contact:

Re: webcam refresh webpage

Post by dazza1223 »

OK I will try the the line in the css to point to the photo background have I got to remove that ?
Have fun and keep learning

dazza :D

https://www.davisworthing.co.uk

Image
User avatar
beteljuice
Posts: 3292
Joined: Tue 09 Dec 2008 1:37 pm
Weather Station: None !
Operating System: W10 - Threadripper 16core, etc
Location: Dudley, West Midlands, UK

Re: webcam refresh webpage

Post 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.
Image
......................Imagine, what you will KNOW tomorrow !
User avatar
dazza1223
Posts: 860
Joined: Sun 25 Jan 2015 8:41 pm
Weather Station: Davis Vantage Pro 2 plus
Operating System: Raspberry pi 4 (4gb)
Location: Worthing
Contact:

Re: webcam refresh webpage

Post by dazza1223 »

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

dazza :D

https://www.davisworthing.co.uk

Image
Post Reply