Ich wollte ein paar Bilder (3x3) von einer Überwachungskamera einbinden als kleine, responsive Gallerie die sowohl am PC als auch auf dem Handy schön dargestellt wird. Dazu habe ich ein weblink definiert:
define Chiggin_Cam_Gallery weblink htmlCode { `/usr/local/bin/php /opt/fhem/www/chigginCam/gallery.php`}
Der entsprechende Code aus dem gallery.php:
<?php $rand = rand(0,100);?>
<div class="row">
<div class="column">
<?php if (file_exists('/opt/fhem/www/chigginCam/Uebersicht_Morgen.jpg')) { echo('<img src="/fhem/chigginCam/Uebersicht_Morgen.jpg?'.$rand.'" />'); } else { echo('<p>Kein Bild für Übersicht (Morgen)</p>'); } ?>
<?php if (file_exists('/opt/fhem/www/chigginCam/Uebersicht_Mittag.jpg')) { echo('<img src="/fhem/chigginCam/Uebersicht_Mittag.jpg?'.$rand.'" />'); } else { echo('<p>Kein Bild für Übersicht (Mittag)</p>'); } ?>
<?php if (file_exists('/opt/fhem/www/chigginCam/Uebersicht_Abend.jpg')) { echo('<img src="/fhem/chigginCam/Uebersicht_Abend.jpg?'.$rand.'" />'); } else { echo('<p>Kein Bild für Übersicht (Abend)</p>'); } ?>
</div>
<div class="column">
<?php if (file_exists('/opt/fhem/www/chigginCam/NestLinks_Morgen.jpg')) { echo('<img src="/fhem/chigginCam/NestLinks_Morgen.jpg?'.$rand.'" />'); } else { echo('<p>Kein Bild für Nest links (Morgen)</p>'); } ?>
<?php if (file_exists('/opt/fhem/www/chigginCam/NestLinks_Mittag.jpg')) { echo('<img src="/fhem/chigginCam/NestLinks_Mittag.jpg?'.$rand.'" />'); } else { echo('<p>Kein Bild für Nest links (Mittag)</p>'); } ?>
<?php if (file_exists('/opt/fhem/www/chigginCam/NestLinks_Abend.jpg')) { echo('<img src="/fhem/chigginCam/NestLinks_Abend.jpg?'.$rand.'" />'); } else { echo('<p>Kein Bild für Nest links (Abend)</p>'); } ?>
</div>
<div class="column">
<?php if (file_exists('/opt/fhem/www/chigginCam/NestRechts_Morgen.jpg')) { echo('<img src="/fhem/chigginCam/NestRechts_Morgen.jpg?'.$rand.'" />'); } else { echo('<p>Kein Bild für Nest rechts (Morgen)</p>'); } ?>
<?php if (file_exists('/opt/fhem/www/chigginCam/NestRechts_Mittag.jpg')) { echo('<img src="/fhem/chigginCam/NestRechts_Mittag.jpg?'.$rand.'" />'); } else { echo('<p>Kein Bild für Nest rechts (Mittag)</p>'); } ?>
<?php if (file_exists('/opt/fhem/www/chigginCam/NestRechts_Abend.jpg')) { echo('<img src="/fhem/chigginCam/NestRechts_Abend.jpg?'.$rand.'" />'); } else { echo('<p>Kein Bild für Nest rechts (Abend)</p>'); } ?>
</div>
</div>
Jaaa, der PHP Code geht auch viel eleganter, für meine einfachen Zwecke reicht es. $rand verhindert das Caching der Bilder. Screenshot im Anhang.
Das "css" Attribut im "WEB" Device muss noch wie folgt ergänzt werden:
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33%;
max-width: 33%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout */
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
Screenshot 2024-03-11 203950.png