WoodCentral Forums

Est. 1998 — 27 years of woodworking knowledge

OT-Question for Web Gurus *LINK*

Posts

OT-Question for Web Gurus *LINK*

#1

Lee Gordon

OT-Question for Web Gurus *LINK*

Lee Gordon

>This has nothing to do with wood or woodworking but since there are several web savvy participants here, I thought one of you might be able to point me in the right direction.

I have a web page on which there are images from three different webcams. I would like to have each of those images automatically refresh at regular intervals -- say, 30 seconds -- without the viewer having to do anything. I would also prefer to do it without reloading the entire page (I have a different page on the site that operates that way).

At the moment, the images (on the page linked below) are static because I am not uploading fresh captures to the web server, but that is not my problem. When I do start uploading, I would like the displayed images to update themselves using a java applet, javascript, or any other method that will work (with all 3 cams), will be simple enough for me to implement, and will preferably not cost me anything.

I'd appreciate any suggestions as to how I might accomplish this or where I might look for a solution. Thanks.


Virtual Superbowl Party Cam Page

Re: OT-Question for Web Gurus *LINK*

#2

Re: OT-Question for Web Gurus

John McGaw

>I have not dealt with this directly and my guru-hood is doubtful but if you already have the means to update the images on the webserver periodically using the camera's software, then something as simple as adding in the page's HEAD may well work to force a compliant browser to refresh its display of the page contents. This has the advantage of great simplicity and working for those viewers who have scripting disabled.

Re: OT-Question for Web Gurus *LINK*

#3

Re: OT-Question for Web Gurus

RobV

>Setup an HTML file for just the camera that loads the image and has a refresh rate set... something like:

<HTML>

<HEAD>

<TITLE>Your Homepage</TITLE>

<meta http-equiv="Refresh" content="60">

</HEAD>

<BODY>

<CENTER>

<IMG height=100 width=160 SRC="cam1.jpg">

</CENTER>

</BODY>

</HEAD>

</HTML>

Then in your main HTML page set an iframe to call the camera:

<iframe SRC="cam1.html" height="100" width="100%" frameborder="0" scrolling="no"></iframe>

The main page won't reload, but the iframe that shows the image will refresh that HTML file at whatever rate you set.

Re: OT-Question for Web Gurus *LINK*

#4

A simple java script

Mark Goodall - ATL - tooljunkie

>You can accomplish this an automatic refresh (whole page) using a META tage in your HTML, and you can also do this without an HTML page refresh (just the images), using JAVA.

Basically you create a JAVA script that will change/reload/whatever the image every X seconds or X minutes. The in your HTML in the < BODY > tag you put a < BODY .... whatever..... onLoad="javascript" >

This will cause the Javascript to run when the apge is loaded, and then the JAvascrip does whatever you want it to.

I'll have to dig up a JAVA script that does something very similar (I have many I wrote) and tweak it for your particular needs. I'll look through my JAVA library shortly, or you can Google a search for "JAVA Image Load" (or similar) to find some code, and Google "Java Body Onload=" to see the exact syntax for that part.

Happy Woodworking!

Happy Woodworking!

Re: OT-Question for Web Gurus *LINK*

#5

Lee Gordon

Re: OT-Question for Web Gurus

Lee Gordon

>I have a page that updates in just that way. But every time it reloads, the background, the graphics and the 3 webcam images all blank out momentarily and the page returns to the top, not necessarily where the user had scrolled. So I'd like to have an alternative that is a little less distracting.

Re: OT-Question for Web Gurus *LINK*

#6

Lee Gordon

Re: OT-Question for Web Gurus

Lee Gordon

>I have tried your suggestion but so far have not been able to make it work. I'll have to try some further experimentation. Meanwhile, I notice that there's a line in your sameple code that includes "height=100" and "width=100%" (or maybe it's vice versa). Is that right? Should there be a percent sign with one and not the other?

Re: OT-Question for Web Gurus *LINK*

#7

Lee Gordon

Re: A simple java script

Lee Gordon

>Thanks for the suggestion. Ideally, this is the approach I think I'd like to take. Unfortunately, I have taken your suggestion and Googled for examples but unfortunately, I am too ignorant about javascript to know which of the parameters in those examples are part of the script and which are variable that I must fill in. And I'm also pretty confused about what I need to include in that "onload" tag. I think I need to do some more studying.

I currently have one image that refreshes via a Java applet (I understand that Java and Javascript are not the same despite the similarity in their names) and I may also try to adapt that applet to the other two cams.

Re: OT-Question for Web Gurus *LINK*

#8

Re: OT-Question for Web Gurus

RobV

>The height and width can be set either as pixels or a percentage. the 'SRC=cam1.html' needs to be the name of the html file that contains the picture link.

Re: OT-Question for Web Gurus *LINK*

#9

Lee Gordon

Re: OT-Question for Web Gurus *LINK*

Lee Gordon

>Thanks for the tips. I used your method and it seems to be working pretty much the way I had hoped it would. For some reason, however, the images don't sit precisely in the frames I created for them. Each one has a small white border on top and a slightly smaller white border on the left. The sizes of the frames do match the images (640x480 for the top one and 260x341 for the bottom two).

Another slightly vexing problem is that, when viewing the page in IE7, every time one of the frames refreshes you hear that typical click. I thought that since the actual refreshing takes place on the "dummy" pages that the clicking would not be an issue. I guess I was wrong.


Lee's Experimental Webcam Page

👍 This page answered my questions

Your vote helps other woodworkers quickly find the answers and techniques that actually work in the shop.