billw wrote: Maybe if I just wait a little longer you might have it all done before I could even start on it.
Here is a very simple, no-frills thumbnail index page. You can click on any image to play the associated video.
Create "thumbs.php" with the code below, and put it in the directory /home/pi/pikrellcam/www/ so you can see it in your browser at <my.pi.ip.addr>/thumbs.php
This assumes you have enabled the "motion area only" thumbnails as described
here, and still filenames have the form
*.th.jpg
This also assumes that videos are in
media/videos/ and thumbnail images are in
media/stills/ relative to the PHP file, so you'll have it edit it at the bottom where it says
showGallery("media/videos/","media/stills/"); if your file structure is something else.
Code: Select all
<?php
// display JPEG images in directory in name order, with clickable links
function showGallery( $pathToVideo, $pathToThumbs )
{
$cols = 4; // how many columns on the HTML page
$output = "<html>";
$output .= "<head><title>Thumbnails</title></head>";
$output .= "<body>";
$output .= "<center><h3><a href=index.php>PiKrellCam</a></h3></center>";
$output .= "<table cellspacing=\"0\" cellpadding=\"2\" width=\"500\">";
$output .= "<tr>";
$dir = opendir( $pathToThumbs ); // open the directory
$a=array(); // hold filenames in array so we can sort them in order
while (false !== ($fname = readdir($dir))) // loop through directory
{
if (substr($fname, -4) == '.jpg') // select only *.jpg filenames
{ $a[]=$fname; } // add this filename to the array
}
closedir( $dir ); // close the directory, all done reading
$counter = 0; // count how many images total so far
sort($a); // sorts the array of filenames in-place
foreach($a as $fname){
$vname = rtrim($fname, ".th.jpg") . ".mp4"; // filename X.th.jpg becomes X.mp4
$output .= "<td valign=\"middle\" align=\"center\"><a href=\"{$pathToVideo}{$vname}\">";
$output .= "<img src=\"{$pathToThumbs}{$fname}\" border=\"0\" />";
$output .= "</a></td>";
$counter += 1;
if ( $counter % $cols == 0 ) { $output .= "</tr><tr>"; }
}
$output .= "</tr> </table> </body> </html>"; // end of HTML file
echo $output; // send out the completed HTML web page
}
showGallery("media/videos/","media/stills/"); // video and thumbnail directories
?>
Also I changed index.php to add a button next to VIDEO and STILL, to link to the new "thumbs.php" page:
Code: Select all
<div id="container" class="top-margin">
Files:
<a href="media.php?dir=<?php echo VIDEO_DIR; ?>"
class="btn-control"
>Videos</a>
<a href="media.php?dir=<?php echo STILL_DIR; ?>"
class="btn-control"
>Stills</a>
<a href="thumbs.php"
class="btn-control"
style="margin-right:20px;"
>Thumbs</a>
Enable: