Tag Archives: image

Archiving thumnails of FTP camera images

This php script will iterate over an array $cams that has an element file that is the filename.

It uses the PHP Imagick package to resize the image and overlay a timestamp. The file timestamp is used so the time of the last ftp image is used, which may differ from the current time if the ftp has stalled. The image is then copied to an Hour/Minute specific folder for a 24 hour rolling archive.

$H = date('H');
$i = date('i');
$arcpath = $ftppath . $H . '/';
mkdir($arcpath);
$arcpath = $ftppath . $H . '/' . $i . '/';

foreach ($cams as $cam)
{
  $pathfile = $ftppath . $cam['file'];
  if (file_exists($pathfile)) {
    $thumbname = $cam['file'] . '_320x240';

    $thumb = new Imagick($pathfile);
    $thumb->scaleImage(320,240);

    $draw = new ImagickDraw();
    $draw->setFontSize(12);
    $draw->setFillColor(new ImagickPixel("#ffffff"));

    $draw->setTextAlignment(LEFT);
    $draw->annotation(5, 12,  date ("F d Y H:i:s", filemtime($pathfile)));
    $thumb->drawImage($draw);

    $thumb->setImageCompression(imagick::COMPRESSION_JPEG);
    $thumb->setImageCompressionQuality(80);
    $thumb->stripImage();
    $thumb->writeImage($ftppath . $thumbname);
    $thumb->clear();
    $thumb->destroy();
    copy($ftppath . $thumbname, $arcpath . $thumbname);
  }
}

Webcam image refresh with jQuery

Code snippet to refresh images on a web page without refreshing the whole page.

Add the header with a reference to jquery.

<html>
<head>
   <script type="text/javascript" src="js/jquery.js">
   </script>

Set the refresh interval on document ready, calling our function reloadImages()

<script type="text/javascript">
$(document).ready(function() {
   setInterval('reloadImages()', 60000); // 60 seconds
});

Add our function reloadImages to reference our image ID of c131a in this case. Then change the src image to the same name plus some random attribute to prevent caching.

function reloadImages()
{
  $('#c131a').attr('src', 'c131a.jpg?' + Math.random());
}
</script>

In the body of the script, add a normal image reference making sure the id matches the one in the above reloadImages function.

<title>Cams</title>
</head>
<body>
  <img src="c131a.jpg" id="c131a" border="1" />
</body>
</html>