only use images that have a minimum size and delete outdated images
BIN
www/data/camera/msvcamN.avif
Normal file
After Width: | Height: | Size: 244 KiB |
BIN
www/data/camera/msvcamS.avif
Normal file
After Width: | Height: | Size: 352 KiB |
Before Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 14 KiB |
@ -25,12 +25,12 @@
|
||||
|
||||
<div class="w3-panel w3-card-4 w3-white w3-padding w3-center">
|
||||
<h3 class="w3-container w3-left cameratext">Blick auf die Piste</h3>
|
||||
<img src="data/msvcamN.avif" class="w3-center current_webcam_image" style="width:100%;" alt="Bild der Webcam mit Blick auf die Piste">
|
||||
<img src="data/camera/msvcamN.avif" class="w3-center current_webcam_image" style="width:100%;" alt="Bild der Webcam mit Blick auf die Piste">
|
||||
</div>
|
||||
|
||||
<div class="w3-panel w3-card-4 w3-white w3-padding w3-center">
|
||||
<h3 class="w3-container w3-left cameratext">Blick nach Süden</h3>
|
||||
<img src="data/msvcamS.avif" class="w3-center current_webcam_image" style="width:100%;" alt="Bild der Webcam mit Blick nach Süden">
|
||||
<img src="data/camera/msvcamS.avif" class="w3-center current_webcam_image" style="width:100%;" alt="Bild der Webcam mit Blick nach Süden">
|
||||
</div>
|
||||
|
||||
<div class="w3-panel w3-card-4 w3-white w3-padding w3-center">
|
||||
@ -42,7 +42,7 @@
|
||||
<div class="w3-panel w3-card w3-dark-gray">
|
||||
<div class="w3-center-align w3-text-black infobox">
|
||||
<a style="text-decoration: none" href="mailto:pressewart@msv-buehl-moos.de?subject=MSV%20Webcam"><h6>pressewart@msv-buehl-moos.de</h6></a>
|
||||
<p>Last update: 2023/07/07<p>
|
||||
<p>Last update: 2023/07/10<p>
|
||||
<a style="text-decoration: none" href="https://git.mosad.xyz/localhorst/msv-webcam-frontend" target="_blank" rel="noopener noreferrer"><h6>View code in GIT</h6></a>
|
||||
</div>
|
||||
</div>
|
||||
|
35
www/js/webcam.js
Normal file
@ -0,0 +1,35 @@
|
||||
const images = document.getElementsByClassName('current_webcam_image');
|
||||
const reload_interval = setInterval(reloadImages, 10000);
|
||||
|
||||
window.onload = function() {
|
||||
reloadImages();
|
||||
};
|
||||
|
||||
function checkImageSource(image_url) {
|
||||
var http_request = new XMLHttpRequest();
|
||||
http_request.open('HEAD', image_url, false);
|
||||
http_request.send();
|
||||
|
||||
return http_request.status;
|
||||
}
|
||||
|
||||
function reloadImages() {
|
||||
console.log('reload in progress');
|
||||
|
||||
Array.prototype.forEach.call(images, function(image) {
|
||||
|
||||
if (checkImageSource(image.src) == 200) {
|
||||
if (!image.src.includes('?')) {
|
||||
image.src = `${image.src}?${Date.now()}`;
|
||||
} else {
|
||||
image.src = image.src.slice(0, image.src.indexOf('?') + 1) + Date.now();
|
||||
}
|
||||
} else {
|
||||
console.log('unable to find image on server');
|
||||
image.alt = "Webcam nicht erreichbar."
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
console.log('reload finished');
|
||||
}
|