PHP Gallery mit Kalenderfunktion

re.we · 06.09.2017

Hallo,

wir sind im besitz einer zwar älteren aber dennoch funktionsfähigen Webcam 214 PTZ von AXIS,
diese sendet Bilder per FTP an unseren Webspace.
Viele meiner Segelfreunde fragten ob es nicht möglich wäre ein Bildarchiv mit einer Kalenderfunktion zu erstellen.
Leider sind meine Kenntnisse dahingehend begrenzt was die Programmierung/Erstellung eines solchen Quellcodes angeht.

Gewünscht wird sich etwas wie dieses:
http://www.heinzenberg-wintersport.ch/webcam/bildarchiv.php?WT=0&PT ...">http://www.heinzenberg-wintersport.ch/webcam/bildarchiv.php?WT=0&PT ...

Das Archiv soll dazu dienen um nach Unwettern zu sehen ob mit den Booten alles in Ordnung ist. Daher auch die benötigte Kalenderfunktion.

Über hilfreiche Tipps zur Erstellung wäre ich sehr dankbar. Oder falls jemand zufällig weiß ob und wo es so etwas geben könnte.

Die Anzeige der einzelnen Bilder konnte ich bereits so lösen:

<ul id="galerie">

<?php
// Ordnername
$ordner = "webcam"; //auch komplette Pfade möglich ($ordner = "download/files"

// Ordner auslesen und Array in Variable speichern
$allebilder = scandir($ordner, 1); // Sortierung A-Z
// Sortierung Z-A mit scandir($ordner, 1)

// Schleife um Array "$alledateien" aus scandir Funktion auszugeben
// Einzeldateien werden dabei in der Variabel $datei abgelegt
foreach ($allebilder as $bild) {

// Zusammentragen der Dateiinfo
$bildinfo = pathinfo($ordner."/".$bild);
//Folgende Variablen stehen nach pathinfo zur Verfügung
// $dateiinfo['filename'] =Dateiname ohne Dateiendung *erst mit PHP 5.2
// $dateiinfo['dirname'] = Verzeichnisname
// $dateiinfo['extension'] = Dateityp -/endung
// $dateiinfo['basename'] = voller Dateiname mit Dateiendung

// Größe ermitteln für Ausgabe
$size = ceil(filesize($ordner."/".$bild)/1024);
//1024 = kb | 1048576 = MB | 1073741824 = GB

// scandir liest alle Dateien im Ordner aus, zusätzlich noch "." , ".." als Ordner
// Nur echte Dateien anzeigen lassen und keine "Punkt" Ordner
// _notes ist eine Ergänzung für Dreamweaver Nutzer, denn DW legt zur besseren Synchronisation diese Datei in den Orndern ab
// Thumbs.db ist eine Ergänzung unsichtbare Dateiergänzung die von ACDSee kommt
// um weitere ungewollte Dateien von der Anzeige auszuschließen kann man die if Funktion einfach entsprechend erweitern
if ($bild != "." && $bild != ".." && $bild != "_notes" && $bildinfo['basename'] != "Thumbs.db") {
?>
<li>
<a href="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>">
<img src="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>" width="140" alt="Vorschau" /></a>
<span><?php echo $bildinfo['filename']; ?> (<?php echo $size ; ?>kb)</span>
</li>
<?php
};
};
?>
</ul>

Vielen Dank
René

Curanai · 08.09.2017

Hallo René,

ich verstehe Dich wie folgt und danach packe ich Dir eine Idee dazu: Ihr habt eine prähistorische Webcam, die automatisch Bilder in Blickrichtung macht. Diese Bilder sollen dann passend zu bspw. einem Tag abgelegt werden und später - ähnlich dem Beispiel - ausgelesen bzw. zur Darstellung gebracht werden.

Eines vorweg: MIt moderneren Webcams hat man auch HD zur Verfügung und bekommt mehr Details und Schärfe ins Bild. Im Falle von Versicherungsangelegenheiten kann das Bild nie gut genug sein.

Ansatz:
- eine nicht näher definierte Automation (geht mittels JavaScript) erstellt Dir autom. pro Tag ein Verzeichnis (als Name dient bspw. der Zeitstempel)
- Deine Cam speichert die Bilder passend zum Tag ins zugehörige Verzeichnis mit einem eigenen Namen (auch hier geht der Zeitstempel)

Das ist schon alles für die Aufnahme. Für die Anzeige verwendest Du den PHP eigenen "DirectoryIterator", um Verzeichnisse und Dateien auszulesen. Während des Auslesens übersetzt Du mittels date() den Namen vom Verzeichnis sowie die Dateinamen - und legst diese bspw. in einem Array ab. Das könnte so aussehen ...

PHP:

$meinBildarchiv = array(
  0 => array("gelesenes Verzeichnis", "anzahlBilder", "humanoid lesbares Datum), // verwendet für Basics wie relative URL, welches Verzeichnis usw.
  $zeitstempelVomBild = array("Name im Verzeichnis", "Bild-Informationen nach Bedarf"),
);

Später ist es auf der Seite ein foreach() über Dein Array und eine Anzeige dafür ins HTML.

Du müsstest natürlich noch klarstellen, ob das öffentlich zugänglich ist (wie Dein Musterlink oben; dass also jeder die Bilder sehen kann), nur für Mitglieder oder nur für Dich.

Aber mehr ist es nicht ... oder ich sehe es noch nicht.

Viel Erfolg bei der Umsetzung und

Beste Grüße

re.we · 08.09.2017

Hallo und vielen Dank für den Hinweis,

mittlerweile bin ich schon ein ganzes Stück weiter gekommen. Habe viel nachgelesen und experimentiert.
Aktuell sieht es so aus:

Code:

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
   
<?php
echo "<form action='".$_SERVER['SCRIPT_NAME']."' method='post'>";
echo "<p>Archiv-Datum: <input type='text' name='datum' id='datepicker'></p>";
echo "<input type='submit' name='such_button' value='Bilder anzeigen'>";
echo "<br><br>";

If(isset($_POST['such_button'])){
   
    //Suchstring zusammensetzten, damit es zum Dateinamen passt.
    $datum_tag = substr($_POST['datum'], 3, 2);
    $datum_monat = substr($_POST['datum'], 0, 2);
    $datum_jahr = substr($_POST['datum'], 8, 2);
   
   
    //Such String zusammensetzen
    $such_datum = $datum_jahr."-".$datum_monat."-".$datum_tag;
   
    //Das auszulesende Verzeichnis
    $dir = "./webcam/";

    //Das Ziel-Array
    $file_array = Array();

    //Wenn das Verzeichnis existiert...
    if(is_dir($dir))    {
        //...öffne das Verzeichnis
        $handle = opendir($dir);
        //Wenn das Verzeichnis geöffnet werden konnte...
        if(is_resource($handle))    {
            //...lese die enthaltenen Dateien aus,...
            while($file = readdir($handle))    {
                //...prüfe ob es Directory-Verweise sind...
                if($file != "." && $file != "..")
                    //...und schreibe sie in das Ziel-Array
                    array_push($file_array, $file);
            }
        }else{
            echo "Das Öffnen des Verzeichnisses ist fehlgeschlagen";
        }
    }else{
        echo "Das Verzeichnis existiert nicht";
    }
   
       
   
    //Array nach dem Datum durchsuchen und in neuen Array abspeichern
    $i = 0;
    foreach ($file_array as $key => $value) {
       $pos = strpos ($value, $such_datum);
       if ($pos !== false) {
        $bilder_gefunden[$i]['key'] = $key;
        $i++;
       }
    }
   
    //Wenn keine Bilder gefunden wurden, abbruch mit Ausgabe
    If(!isset($bilder_gefunden)){
        echo "Keine Bilder vorhanden!";
        exit();
    }
   
    echo "Bilder vom ".$datum_tag.".".$datum_monat.".".$datum_jahr;
    echo "<br>";
    //Ausgabe der gefundenen Bilder mit Link
    for($i=0;$i<count($bilder_gefunden);$i++){
        $key = $bilder_gefunden[$i]['key'];
        //echo $file_array[$key];
        echo "<a href='".$dir.$file_array[$key]."'><img src='".$dir.$file_array[$key]."' width='250px'></a>";
    }
   
}
       
       
?>

und ein passendes Bild dazu:

nur scheitere ich abgesehen von der Optik an der richtigen Sortierung (wie auf dem Bild zu sehen).
Die Bilder werden zwar tageweise angezeigt aber durcheinander.

Curanai · 08.09.2017

array_push() kannst Du performanter und mit

PHP:

$file_array[] = $file;

abkürzen. Es machen beide das selbe - ein index-basiertes Array erweitern.

Das "Durcheinander" liegt an der fehlenden Sortierung. Du liest das Verzeichnis aus und bekommst Bilder zurück. Mit einem "print_r($file_array);" siehst Du die Reihenfolge im Array. Wenn das vorher noch sortiert werden muss, muss das vor der Ausgabe erfolgen.

re.we · 08.09.2017

Oh Dankeschön....

wenn ich das jetzt richtig verstanden habe, müsste ich also

Code:

$dir = scandir($dir, 1);
/ Sortierung A-Z
// Sortierung Z-A mit scandir($ordner, 1)

in dieser Form eintragen...

Code:

//Wenn das Verzeichnis existiert...
    if(is_dir($dir))    {
        //...öffne das Verzeichnis
        $handle = opendir($dir);
        //Wenn das Verzeichnis geöffnet werden konnte...
        if(is_resource($handle))    {
$dir = scandir($dir, 1);
            //...lese die enthaltenen Dateien aus,...
            while($file = readdir($handle))    {
                //...prüfe ob es Directory-Verweise sind...
                if($file != "." && $file != "..")
                    //...und schreibe sie in das Ziel-Array
                    $file_array[ ] = $file;

oder bin ich da auf dem Holzweg?

Curanai · 08.09.2017

Es kommt kein Leerschritt bei $file_array[] zwischen die eckigen Klammern.

Die kleine Kurzfassung ...

PHP:

$directory = '/pfad/zu/den/bildern';
$scanned_directory = array_diff(scandir($directory, 1), array('..', '.'));
print_r($scanned_directory);

array_diff() schmeißt eigentlich direkt ".." und "." raus ... das ist aber jetzt nicht getestet, sondern dreckig hier in das PSD-Fenster gehackt.

Also nicht steinigen.

Ich kann Dir nicht sagen, ob es dann auslangt bzgl. Sortierung. scandir mit sort_order sortiert womöglich nach Namen (nutze ich nie). Das heißt aber noch nicht, dass es eine "natürlich Sortierung" ist, wo eine 10 nach der 9 kommt und nicht nach der 1. Das Verhalten hast Du bestimmt schon anderweitig mal beobachtet.

Das hängt also von Deinen Bildnamen ab (darum oben der Vorschlag mit Timestamp). Teste es ... wenn es langt, langt es. Falls nicht, wirst Du es manuell machen dürfen (weitere foreach() mit einer Abhängigkeit, die die Bilder erfüllen sollen ... bspw.).