Topic: add my webcam image to rotate using ajax-gizmo

[w2swr]

Hi,

I am trying to figure out a way (if its even possible) how to get my webcam image to auto update with ajax -gizmo. Anyone have any ideas?

[gwwilk]

I see you're using the dashboard, so you're running ajax.  I use this code, borrowed from a post by Ken True a couple of years ago, on several pages on my site.  This code is what's used to refresh my Nexstorm image.  It times out with the ajax updates, and requires no modification of the ajax*.js file, only the php files.
Code to display the image:

Code: [Select]

    <img src="nexstorm.png" alt="Current Nexstorm Map" width="640" height="480" hspace="5" vspace="5" id="myPull"/>
Note the id="mypull" which links to the inline javascript that's at the bottom of the page before the last [/div], which is main-copy.

Code: [Select]

<span class="ajax" id="imagereLoader">
<script type="text/javascript"><!--
//<![CDATA[
function reloadImage() {
var now = new Date();
if (document.images && (ajaxUpdates < update.maxupdates)) {
document.images.myPull.src = 'nexstorm.png?' + now.getTime();
document.images.myPull2.src = './lightning/wasp2.png?' + now.getTime();
}
setTimeout('reloadImage()',30000);
}
setTimeout('reloadImage()',30000);
//]]>
-->
</script>
</span>

I also have included code to refresh my wasp2 image.  The images keeps reloading until ajax times out, then it stops. These are moderately sized images.

Modification of the dashboard to display webcam thumbnails and update them regularly is also easily done with this technique, although it's a bit more work to get everything lined up properly.  My dashboard has been modified to display both my webcam's thumbnail images:  http://www.gwwilkins.org

[Albuquerque Weather]

If you are wanting to auto refresh the cam image on home page or on its own page you can use this - works great - just put it where your image is now

<script language="javascript">
var refreshrate=60;
var image="http://yoursite.com/cam/filename.jpg";
var imgheight=240;
var imgwidth=320;
function refresh(){
document.images["pic"].src=image+"?"+new Date();
setTimeout('refresh()', refreshrate*1000);}
document.write('<IMG SRC="'+image+'" ALT="" NAME="pic" ID="pic" WIDTH="'+imgwidth+'" HEIGHT="'+imgheight+'" STYLE="border: 1px solid #000000;">');
if(document.images)window.onload=refresh;
</script>

[w2swr]

I see you're using the dashboard

Hi Jerry,
I was planning on leaving the cam image outside of and above the dashboard in the Index page. Will this script work in the index page?

[gwwilk]

I see you're using the dashboard

Hi Jerry,
I was planning on leaving the cam image outside of and above the dashboard in the Index page. Will this script work in the index page?

I haven't used it that way, but I think it would.  Let us know how it works out for you.

[w2swr]

Jerry, I wasn't able to get it to work outside of the dashboard. I was successful with Albuquerque Weather's script. Thank you both very much for your help.

Mike

For any one interested, here is what I did. In the Index.php ,  I modified the cell for the weather underground IR satellite with this:

Code: [Select]

<td align="center">

      <?php
  if( $IsSunUp == "1" ){
   //webcam refresh sctipt
   print("<script language=\"javascript\">
var refreshrate=60;
var image=\"http://yoursite.com/path/to/webcam.jpg\";
var imgheight=240;
var imgwidth=320;
function refresh(){
document.images[\"pic\"].src=image+\"?\"+new Date();
setTimeout('refresh()', refreshrate*1000);}
document.write('<IMG SRC=\"'+image+'\"  NAME=\"pic\" ID=\"pic\" WIDTH=\"'+imgwidth+'\" HEIGHT=\"'+imgheight+'\" STYLE=\"border: 1px solid #000000;\">');
if(document.images)window.onload=refresh;
</script>");
   //END webcam refresh script
     }else{

   print "<img src=\"http://icons.wunderground.com/data/640x480/"; echo $SITE['WUregion']; print "_ir_anim.gif\" alt=\"Regional Infrared Satellite\"  

      width=\"320\" height=\"240\" style=\"margin: 0px; padding: 0px; border: none\" />";     

       }

  ?>

  </td>
In addition, you may need to add "IsSunUp" to the CU-defs.php

Code: [Select]

$IsSunUp = $WX['IsSunUp'];
All this will give you an auto refreshing webcam by day, and the original weather underground IR Satellite by night.

[Albuquerque Weather]

Happy to help -

Ron

[rjkantor]

Hello -

I am trying to get my live cam to update automatically.  I have placed the image in the body of the page in the "main-copy".  I am using a php call to get the image, but my timer is not autofiring.  Any ideas?

Code: [Select]

<center>
<!--  <h3>Weather web cam  live from Parkland, FL</h3>
<img src="SecureImageDisplay.php?t="  alt='Current Parkland Image' width="640" height="480" id="myPull" />
<!--If you add IP Cameras here simply copy the entire line above and use a unique src such as
    SecureImageDisplay2.php leaving ?t= at the end before the double quotes-->

<script language="javascript">
var refreshrate=1;
var image="SecureImageDisplay.php?t=";
var imgheight=480;
var imgwidth=640;
function refresh(){
document.images["pic"].src=image+"?"+new Date();
setTimeout('refresh()', refreshrate*1000);}
document.write('<IMG SRC="'+image+'" ALT="" NAME="pic" ID="pic" WIDTH="'+imgwidth+'" HEIGHT="'+imgheight+'" STYLE="border: 1px solid #000000;">');
if(document.images)window.onload=refresh;
</script>
</center>

[AWL]

This works for mine:

Code: [Select]

<a href="/time_lapse.php"><img src="/webcam/image.jpg" alt="Still Image" id="refresh" /></a>   
<script language="JavaScript" type="text/javascript">
        //<![CDATA[
       var t = 60 // Interval in Seconds
        image ="http://www.xxxxxxxx.com/webcam/image.jpg" //URLs of the Images
        function Start() {
tmp = new Date();
tmp = "?"+tmp.getTime()
document.images["refresh"].src = image+tmp
setTimeout("Start()", t*1000)
       }
     Start();
      //]]>
      </script>
-Doug

[rjkantor]

Thanks, that seems to work on my site as well.

Rob