Fotos + Galerie

Hagbard235 · 16. Juni 2014 um 19:59

Hi,

bevor einer sie Suche erwähnt, ich hab natürlich brav gesucht aber nix gefunden

Hat jemand schon irgendwie ein Scripot mit dem man von einer Webcam durch einen Auslöser ein Foto machen kann und es einer Galerie hinzu fügt die dann gleich auch im Webfront eingebunden ist? Das Foto machen und der Auslöser sind kein Problem, hab ich ja alles, geht eher um das hinzufügen zur Galerie und diese im Webfront anzuzeigen.

Hab eine Cam an einem Bewegungsmelder und würde die Fotos gerne im Webfront aufrufen können.

konfu · 16. Juni 2014 um 23:22

Es gibt viele Gallerien, die erlauben das hinzufügen von Fotos per E-Mail. Das wäre wohl in PHP einfach zu lösen.

Und das Webfront kann doch einfach eine Seite eingebettet anzeigen. Soll die Gallerie halt immer das neueste Bild in Ordner X zeigen

Ist also eher eine Frage der verwendeten Gallerie als von IPS

pleibling · 17. Juni 2014 um 08:06

Ich habe ein ähnliches Szenario - ich lasse mir das Bild per Mail senden wenn Bewegung festgestellt wird.

Hier das Script dazu:

mxc_switchmode(11111, true);
$remoteImage = "http://user:password@ip/snapshot.cgi";
$localImage  = "c:\	emp\\bild.jpg";
$content = @file_get_contents($remoteImage);
if((strpos($http_response_header[0], "200") === false))
 {
 return;
 }
file_put_contents( $localImage, $content );
SMTP_SendMailAttachment (22222 /*[Tools\E-Mail senden (SMTP)]*/, "AKTIVITAET IN DER SCHLEUSE!", "Aufgezeichnet: " . date("d.m.Y") . " - " . date("H:i:s") . "

", "c:\	emp\\bild.jpg");
//unlink($localImage);

Dabei muss ein Ordner mit c: \Temp vorhanden sein und Vollzugriff erhalten. Denkbar wäre auch, das du in dem IPS Webordner abspeicherst und das dann mit einem HTML Element einbindest (<img src=„Bild.jpg“>).

P.s.: Ich habe einen Moeller Comfort Bewegungsmelder, solltest du einen anderen haben, musst du natürlich das MXC_switchmode anpassen. 11111 ist die Statusvariable der Instanz, 22222 mein SMTP Connector. Die URL zu deinem Bild musst du natürlich ebenfalls anpassen - meistens haben die einen Button für Fotos, da kannst du dann die URL abgreifen.

Viel Erfolg.

Hagbard235 · 27. Juni 2014 um 18:26

Oh, Sorry, hatte das übersehen. Also das Bild zu holen ist ja gar nicht das Problem, ganz im Gegenteil hab ich das letzte Bild eh im IPS und die alten speichere ich auch direkt in ein Verzeichnis (ohne Umweg per Mail, eigentlich ziemlich simpel).

Was mir fehlt ist eine Komponente die ich in IPS anbinden kann, die quasi die Bilder die ich schon habe irgendwie aufbereitet anzeigt. Ein Script das alle Bilder eines Verzeichnis anzeigt z.B. (vielleicht noch mit dem Timestamp) oder etwas in der Art.

So etwas wird doch jemand schon mal gebaut haben, oder?

Hagbard235 · 12. Juni 2025 um 14:23

Da niemand seit 2014 was hatte und ich beim Suchen über meine eigene Frage gestolpert bin, liefere ich hier mal die Antwort.
Hier ein Script wo man oben in 2 Zeilen den Pfad und in der letzten Zeile die Variablen_ID anpassen muss, dann bekommt man beim ausführen des Scriptes eine schöne Galerie als HTML in die String-Variable gepumpt und die kann man dann sowohl im Webfront als auch in der Kachel anzeigen lassen. Sogar vergrößern uns Blättern geht damit. Hier der Code:


<?php
// Konfiguration
$bilderVerzeichnis = IPS_GetKernelDir() . "user/klingelbilder/"; // z.B. C:/IP-Symcon/media/gallery/
$bilderURL = "/user/klingelbilder/"; // WebFront-Pfad

// Bilder laden
$bilder = [];
foreach (glob($bilderVerzeichnis . "*.{jpg,jpeg,png,gif}", GLOB_BRACE) as $datei) {
    $bilder[] = $bilderURL . basename($datei);
}

// HTML, CSS und JS generieren
$html = <<<EOT
<style>
.gallery-modern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 22px;
    padding: 10px 0;
}
.gallery-modern-thumb {
    aspect-ratio: 4/3;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 6px 24px #0002;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
   border: 3px solid rgba(255,255,255,0.85);
background: #e7e8ed;
}
.gallery-modern-thumb:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 32px #0003, 0 0 0 4px #aaf3;
    filter: brightness(0.96) saturate(1.05);
}
.gallery-modern-modal-bg {
    display: none; position: fixed; top:0; left:0; width:100vw; height:100vh;
    z-index: 10000; background: rgba(24,28,34,0.96); align-items: center; justify-content: center;
    animation: fadeInBg 0.4s;
}
.gallery-modern-modal-bg.active { display: flex; }
@keyframes fadeInBg {
    from {background: rgba(24,28,34,0);}
    to   {background: rgba(24,28,34,0.96);}
}
.gallery-modern-modal-content {
    position: relative;
    animation: zoomInModal 0.32s;
}
@keyframes zoomInModal {
    from {transform: scale(0.93);}
    to   {transform: scale(1);}
}
.gallery-modern-modal-img {
    max-width: 88vw;
    max-height: 77vh;
    border-radius: 24px;
    box-shadow: 0 16px 40px #000a, 0 0 0 6px #fff4;
    background: #f7f7fb;
    transition: box-shadow 0.2s;
}
.gallery-modern-modal-close,
.gallery-modern-modal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    background: rgba(20,24,30,0.56);
    border: none;
    font-size: 2.7em;
    border-radius: 50%;
    width: 54px; height: 54px;
    cursor: pointer;
    z-index: 11000;
    box-shadow: 0 4px 16px #0002;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.gallery-modern-modal-close {
    top: 36px; right: 42px; font-size: 2.5em; width:48px; height:48px; left:unset; 
    background: rgba(24,28,34,0.68);
}
.gallery-modern-modal-arrow.left { left: -62px; }
.gallery-modern-modal-arrow.right { right: -62px; }
.gallery-modern-modal-arrow:hover, .gallery-modern-modal-close:hover { background: #5a5a7a; }
@media (max-width: 800px) {
    .gallery-modern-modal-arrow.left { left: 4px; }
    .gallery-modern-modal-arrow.right { right: 4px; }
    .gallery-modern-modal-close { right: 8px; top:8px;}
    .gallery-modern-modal-img { max-width: 99vw; max-height: 60vh; }
}
</style>
<div class="gallery-modern-grid">
EOT;

// Vorschaubilder einfügen
foreach ($bilder as $i => $bild) {
    $html .= '<img src="' . $bild . '" class="gallery-modern-thumb" onclick="galleryModernOpen(' . $i . ')" />';
}
$html .= "</div>";

// Lightbox-Modal mit Navigation
$html .= <<<EOT
<div id="galleryModernModal" class="gallery-modern-modal-bg" onclick="galleryModernBgClose(event)">
    <div class="gallery-modern-modal-content">
        <button class="gallery-modern-modal-arrow left" onclick="galleryModernPrev(event)">&#10094;</button>
        <button class="gallery-modern-modal-arrow right" onclick="galleryModernNext(event)">&#10095;</button>
        <button class="gallery-modern-modal-close" onclick="galleryModernBgClose(event)">&times;</button>
        <img id="galleryModernModalImg" class="gallery-modern-modal-img" src="" />
    </div>
</div>
<script>
var galleryModernBilder = [
EOT;
foreach ($bilder as $bild) { $html .= "'$bild',"; }
$html .= <<<EOT
];
var galleryModernAktiv = 0;
function galleryModernOpen(idx) {
    document.getElementById('galleryModernModal').classList.add('active');
    galleryModernAktiv = idx;
    document.getElementById('galleryModernModalImg').src = galleryModernBilder[idx];
}
function galleryModernBgClose(e) {
    if (e.target.id === 'galleryModernModal' || e.target.className.includes('modal-close')) {
        document.getElementById('galleryModernModal').classList.remove('active');
    }
}
function galleryModernPrev(e) {
    e.stopPropagation();
    galleryModernAktiv = (galleryModernAktiv + galleryModernBilder.length - 1) % galleryModernBilder.length;
    document.getElementById('galleryModernModalImg').src = galleryModernBilder[galleryModernAktiv];
}
function galleryModernNext(e) {
    e.stopPropagation();
    galleryModernAktiv = (galleryModernAktiv + 1) % galleryModernBilder.length;
    document.getElementById('galleryModernModalImg').src = galleryModernBilder[galleryModernAktiv];
}
document.addEventListener('keydown', function(e) {
    if (!document.getElementById('galleryModernModal').classList.contains('active')) return;
    if (e.key === 'Escape') document.getElementById('galleryModernModal').classList.remove('active');
    if (e.key === 'ArrowLeft') galleryModernPrev(e);
    if (e.key === 'ArrowRight') galleryModernNext(e);
});
</script>
EOT;

// In die Variable schreiben (ObjektID anpassen!)
SetValueString(18455, $html);

?>

Richtiger wäre wohl ein Modul draus zu machen…