?
Solved

Reload Webcam Images by Port Number

Posted on 2008-06-23
3
Medium Priority
?
288 Views
Last Modified: 2010-04-21
Hi everyone, first time-long time, so be gentle. :)

When users log into our warehouse website, they can view specific webcams as designated by their account permissions. Each webcam FTPs one image every second to a predetermined image directory and has a different image name based on its port (ex. "80021.jpg", "80022.jpg", etc.)

Using a PHP recordset, I'm loading one camera image at a time, based on permissions, and that's working great. But using Javascript I want to refresh the images every 2 seconds without refreshing the page.

My problem is I need to tell the Javascript newImage function (see below) what the image is called (ex. "80021.jpg", "80022.jpg", etc.) based on the PHP recordset.

(Javascript to reload the image:)
<script type="text/javascript">
function newImage(){
      if(document.images){
            document.images['camImage'].src =**CAMERA-SPECIFIC IMAGE NAME HERE??** +  '.jpg?' + Date.parse(new Date().toString());
      }
      setTimeout(newImage,5000);
}
</script>

(Image call in the html body:)
<img name="camImage" src="<? echo $aCams[$iCount]['iPortNumber']?>.jpg" />

Admittedly this kinda thing is new to me, so if I need to bark up another tree, let me know.
0
Comment
Question by:IgniteWeb
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 21854542
<script type="text/javascript">
function newImage(){
  if (!document.images) return; // no need to stay
  var src = document.images['camImage'].src;
  document.images['camImage'].src = src.substring(0,src.lastIndexOf('.jpg'))+ '.jpg?' + new Date().getTime();
  setTimeout('newImage()',5000);
}
</script>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 21854557
or better
<script type="text/javascript">
function newImage(){
  var src = document.images['camImage'].src;
  document.images['camImage'].src = src.substring(0,src.lastIndexOf('.jpg'))+ '.jpg?' + new Date().getTime();
}
window.onload=function() {
  if (document.images) setInterval('newImage()',5000);
}
</script>

Open in new window

0
 

Author Closing Comment

by:IgniteWeb
ID: 31469872
Thanks for your expertise. much appreciated!
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question