Webkameran kuvashow

J.Jäntti · keskiviikko, 04.09.2013, 14:42

Tässäpä on teille koodinikkareille pieni pähkinä, jonka käyttäjämme Tuffe laittoi minulle YV:nä. Ilman testikonetta on vähän mahdoton testata, joten heitän pallon teille.
Auttakaa miestä mäessä.

asennan sää kameran websivuille, mutta helpot automaatti kansioilla olevat webkamera kuva show scripit ovat tiukassa.
löysin yhden hyvän scriptin,mutta kuva esitys rullaa kolmentunnin jakoissa väärin päin eli tuoreimasta vanhinpaan.

eli..

Miten muokkaan script:in sisältöä jotta saan esityksen webcam1.jpg --> webcam5.jpg
tässä mallissa se kulkee webcam5.jpg--> webcam1.jpg

Koodi [Valitse]

<script type="text/javascript">
var picn=0;
var picList = new Array;
var actImg = new Image();
<?php
if ($handle = @opendir($imageDirectory)) {
    $i = 0;
    while (false !== ($file = readdir($handle)))
    {
        if ($file != "." && $file != "..")
        {
            $path = $imageDirectory;
            if(is_file($path.DIRECTORY_SEPARATOR.$file)) {
                $info = $path_parts = pathinfo($file);
                if (   (strtolower($info['kuvaextension']) == 'jpg')
                    || (strtolower($info['extension']) == 'jpeg')) {
                        $file = addslashes($file);
                        echo "picList[$i] = '$path/$file';\r\n";
                        $i++;
                    }
            }
         }
    }
}
?>

function setCountDown ()
{
  actImg.src = picList[picn++];
  document.getElementById("pic").src=actImg.src;
  if (picn>=picList.length) picn=0;

  setTimeout ( "setCountDown()", <?php echo ($interval*1000); ?> );
}

</script>

teutari · keskiviikko, 04.09.2013, 17:02

No, tuosta koodista ei hajuakaan.

Itse käytän tuossa liiketunnistinkamerassa simppeliä html sivua.
Kamera uppaa uuden TinCam.jpg kuvan kansioon missä tuo sivu on ja vanhin kuva häviää pois. Tuota koodia on helppo moukaroida jos haluaa sivulle enemmän kuin nuo 31 kuvaa, isommassa resoluutiossa tai kaikki kuvat alekkain.

Näyttää tuolta: http://www.teutari.net/cam2.php

Koodi [Valitse]

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body bgcolor="#000000" text="#CCCC00" link="#CCCC00" vlink="#CCCC00" alink="#CCCC00">
	  <CENTER class=style1><BR><table cellspacing="1">

      <tr><td align=center bordercolor="#FFCC00">
        <img width=320 height=240 src="TinCam.jpg" border=0 name="tcimage0" alt="">
      </td></tr>

    <tr>
      <td>
      </td>
    </tr>
    </table>

      <br>
    <center><h3><font size="3">Latest 30 pictures / Viimeiset 30 kuvaa</font></h3></center>
    <center><table>
      <tr>
        <td>
        <img width=320 height=240 src="TinCam01.jpg" border=0 name="tcimage1" alt="">
        </td>
        <td>
        <img width=320 height=240 src="TinCam02.jpg" border=0 name="tcimage2" align="right">
        </td>
      </tr>
 
      <tr>
        <td>
        <img width=320 height=240 src="TinCam03.jpg" border=0 name="tcimage3" alt="">
        </td>
        <td>
        <img width=320 height=240 src="TinCam04.jpg" border=0 name="tcimage4" align="right">
        </td>
      </tr>

      <tr>
        <td>
        <img width=320 height=240 src="TinCam05.jpg" border=0 name="tcimage5" alt="">
        </td>
        <td>
        <img width=320 height=240 src="TinCam06.jpg" border=0 name="tcimage6" align="right">
        </td>
      </tr>
	  
      <tr>
        <td>
        <img width=320 height=240 src="TinCam07.jpg" border=0 name="tcimage7" alt="">
        </td>
        <td>
        <img width=320 height=240 src="TinCam08.jpg" border=0 name="tcimage8" align="right">
        </td>
      </tr>
	  
      <tr> 
        <td>
        <img width=320 height=240 src="TinCam09.jpg" border=0 name="tcimage9" alt="">
        </td>
        <td>
        <img width=320 height=240 src="TinCam10.jpg" border=0 name="tcimage10" align="right">
        </td>
      </tr>
	  
      <tr>
        <td>
        <img width=320 height=240 src="TinCam11.jpg" border=0 name="tcimage11" alt="">
        </td>
        <td>
        <img width=320 height=240 src="TinCam12.jpg" border=0 name="tcimage12" align="right">
       </td>
      </tr>
	  
      <tr>
        <td>
       <img width=320 height=240 src="TinCam13.jpg" border=0 name="tcimage13" alt="">
       </td>
        <td>
        <img width=320 height=240 src="TinCam14.jpg" border=0 name="tcimage14" align="right">
        </td>
      </tr>

      <tr>
        <td>
        <img width=320 height=240 src="TinCam15.jpg" border=0 name="tcimage15" alt="">
        </td>
        <td>
        <img width=320 height=240 src="TinCam16.jpg" border=0 name="tcimage16" align="right">
        </td>
      </tr>

      <tr>
        <td>
        <img width=320 height=240 src="TinCam17.jpg" border=0 name="tcimage17" alt="">
        </td>
        <td>
        <img width=320 height=240 src="TinCam18.jpg" border=0 name="tcimage18" align="right">
        </td>
      </tr>

      <tr>
        <td>
        <img width=320 height=240 src="TinCam19.jpg" border=0 name="tcimage19" alt="">
        </td>
        <td>
        <img width=320 height=240 src="TinCam20.jpg" border=0 name="tcimage20" align="right">
        </td>
      </tr>

      <tr>
        <td>
        <img width=320 height=240 src="TinCam21.jpg" border=0 name="tcimage21" alt="">
        </td>
        <td>
        <img width=320 height=240 src="TinCam22.jpg" border=0 name="tcimage22" align="right">
        </td>
      </tr>

      <tr>
        <td>
        <img width=320 height=240 src="TinCam23.jpg" border=0 name="tcimage23" alt="">
        </td>
        <td>
        <img width=320 height=240 src="TinCam24.jpg" border=0 name="tcimage24" align="right">
        </td>
      </tr>

      <tr>
        <td>
        <img width=320 height=240 src="TinCam25.jpg" border=0 name="tcimage25" alt="">
        </td>
        <td>
        <img width=320 height=240 src="TinCam26.jpg" border=0 name="tcimage26" align="right">
        </td>
      </tr>

      <tr>
        <td>
        <img width=320 height=240 src="TinCam27.jpg" border=0 name="tcimage27" alt="">
        </td>
        <td>
        <img width=320 height=240 src="TinCam28.jpg" border=0 name="tcimage28" align="right">
        </td>
      </tr>

      <tr>
        <td>
        <img width=320 height=240 src="TinCam29.jpg" border=0 name="tcimage29" alt="">
        </td>
        <td>
        <img width=320 height=240 src="TinCam30.jpg" border=0 name="tcimage30" align="right">
        </td>
      </tr>

    </table>

    <script language="JavaScript" type="text/javascript">
    <!--
    var tcimages = new Array();
    tcimages[0] = "TinCam.jpg";
    tcimages[1] = "TinCam01.jpg";
    tcimages[2] = "TinCam02.jpg";
    tcimages[3] = "TinCam03.jpg";
    tcimages[4] = "TinCam04.jpg";
    tcimages[5] = "TinCam05.jpg";
    tcimages[6] = "TinCam06.jpg";
    tcimages[7] = "TinCam07.jpg";
    tcimages[8] = "TinCam08.jpg";
    tcimages[9] = "TinCam09.jpg";
    tcimages[10] = "TinCam10.jpg";
    tcimages[11] = "TinCam11.jpg";
    tcimages[12] = "TinCam12.jpg";
    tcimages[13] = "TinCam13.jpg";
    tcimages[14] = "TinCam14.jpg";
    tcimages[15] = "TinCam15.jpg";
    tcimages[16] = "TinCam16.jpg";
    tcimages[17] = "TinCam17.jpg";
    tcimages[18] = "TinCam18.jpg";
    tcimages[19] = "TinCam19.jpg";
    tcimages[20] = "TinCam20.jpg";
    tcimages[21] = "TinCam21.jpg";
    tcimages[22] = "TinCam22.jpg";
    tcimages[23] = "TinCam23.jpg";
    tcimages[24] = "TinCam24.jpg";
    tcimages[25] = "TinCam25.jpg";
    tcimages[26] = "TinCam26.jpg";
    tcimages[27] = "TinCam27.jpg";
    tcimages[28] = "TinCam28.jpg";
    tcimages[29] = "TinCam29.jpg";
    tcimages[30] = "TinCam30.jpg";

    interval = 120000;

    function Refresh() {
      for (i=0; i<=30; i++) {
        tmp = new Date();
        tmp = "?" + tmp.getTime();
        document.images["tcimage" + i].src = tcimages[i] + tmp;
      }
      setTimeout("Refresh()", interval);
    }

    Refresh();
    // -->
                </script>
    </center>
	
	</body>
</html>

Uutiset:

Webkameran kuvashow

J.Jäntti

teutari