Za zmršené formátování příspěvku nemůžu, mrší ho poradna (nějak jí dělá problém odřádkování, kde chybí odřádkování tak tam jsem dal ).
Tady to tvoje při automatickém reloadu (ten refresh 15 sekund) problikává, ve firefoxu míň, v chrome hodně.
Mně se víc líbí udělat to bez frame, normálně přes obrázky, a refresh řešit pomocí javascriptu. Neproblikává to.
Tu je takový nástřel (vzhled jsem moc neřešil, hlavně princip funkcionality). S tím že logování a posílání hlášek na mail se dá přidělat do json.php
index.php (to jsou obrázky z kamer)
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kamery</title>
<style type="text/css">
ul {
display: grid;
grid-template-columns: 1fr 1fr;
}
ul>li {
list-style-type:none;
}
</style>
<script>
function updateImage()
{
document.getElementById("kamera1").src = "kamera1.jpg?" + new Date().getTime();
document.getElementById("kamera2").src = "kamera2.jpg?" + new Date().getTime();
document.getElementById("kamera3").src = "kamera3.jpg?" + new Date().getTime();
document.getElementById("kamera4").src = "kamera4.jpg?" + new Date().getTime();
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myObj = JSON.parse(this.responseText);
document.getElementById("k1").innerHTML = myObj.kamera1;
document.getElementById("k2").innerHTML = myObj.kamera2;
document.getElementById("k3").innerHTML = myObj.kamera3;
document.getElementById("k4").innerHTML = myObj.kamera4;
}
xmlhttp.open("GET", "json.php");
xmlhttp.send();
setTimeout(updateImage, 5000);
}
setTimeout(updateImage, 5000);
</script>
</head>
<body>
<ul>
<li><p>Poslední aktualizace v: <span id="k1"><? echo date("d-m-y H:i:s",filemtime("kamera1.jpg")) ?></span></p><img id="kamera1" src="kamera1.jpg" width = "800" height = "400"></li>
<li><p>Poslední aktualizace v: <span id="k2"><? echo date("d-m-y H:i:s",filemtime("kamera2.jpg")) ?></span></p><img id="kamera2" src="kamera2.jpg" width = "800" height = "400"></li>
<li><p>Poslední aktualizace v: <span id="k3"><? echo date("d-m-y H:i:s",filemtime("kamera3.jpg")) ?></span></p><img id="kamera3" src="kamera3.jpg" width = "800" height = "400"></li>
<li><p>Poslední aktualizace v: <span id="k4"><? echo date("d-m-y H:i:s",filemtime("kamera4.jpg")) ?></span></p><img id="kamera4" src="kamera4.jpg" width = "800" height = "400"></li>
</ul>
</body>
</html>
json.php (to je json pro aktualizaci, dá se tam přidělat i logování atd.)
<?
$myObj = new stdClass();
$myObj->kamera1 = date("d-m-y H:i:s",filemtime("kamera1.jpg"));
$myObj->kamera2 = date("d-m-y H:i:s",filemtime("kamera2.jpg"));
$myObj->kamera3 = date("d-m-y H:i:s",filemtime("kamera3.jpg"));
$myObj->kamera4 = date("d-m-y H:i:s",filemtime("kamera4.jpg"));
$myJSON = json_encode($myObj);
echo $myJSON;