localhorst/msv-webcam-frontend
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects Releases Wiki Activity

display text if camera is offline instead of image

Browse Source
This commit is contained in:
Hendrik Schutter 2023-07-13 20:07:19 +02:00
parent 571dce0630
commit 8c04451cf2
5 changed files with 26 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
www/css/custom.css
View File

@ -1,21 +1,27 @@
img {
transition:transform 0.25s ease;
.current_webcam_image {
transition: transform 0.25s ease;
}
img:hover {
-webkit-transform:scale(1.5);
transform:scale(1.5);
.current_webcam_image:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.titletext {
font-size: calc(10px + 0.9vw);
font-size: calc(10px + 0.9vw);
}
.cameratext {
font-size: calc(10px + 0.9vw);
font-size: calc(10px + 0.9vw);
}
.infobox{
margin:0 !important;
padding:0 !important;
}
.infobox {
margin: 0 !important;
padding: 0 !important;
}
.camera_offline_text {
display: inline-block;
font-size: calc(10px + 0.9vw);
font-weight: bold;
}

BIN
www/data/msvcamN.avif
View File

Binary file not shown.

BIN
www/data/msvcamS.avif
View File

Binary file not shown.

8
www/index.html
View File

@ -25,14 +25,14 @@
<div class="w3-panel w3-card-4 w3-white w3-padding w3-center current_webcam_image_box">
<h3 class="w3-container w3-left cameratext">Blick auf die Piste</h3>
<img src="data/camera/msvcamN.avif" class="w3-center" style="width:100%;visibility:visible" alt="Bild der Webcam mit Blick auf die Piste">
<p style="visibility:hidden">Hinweistext</p>
<img class="current_webcam_image" src="data/camera/msvcamN.avif" class="w3-center" style="width:100%;visibility:visible" alt="Bild der Webcam mit Blick auf die Piste">
<div class="camera_offline_text" style="visibility:hidden">Die Webcam ist auf Grund einer Störung oder Wartung offline.</div>
</div>
<div class="w3-panel w3-card-4 w3-white w3-padding w3-center current_webcam_image_box">
<h3 class="w3-container w3-left cameratext">Blick nach Süden</h3>
<img src="data/camera/msvcamS.avif" class="w3-center" style="width:100%;visibility:visible" alt="Bild der Webcam mit Blick nach Süden">
<p>Hinweistext</p>
<img class="current_webcam_image" src="data/camera/msvcamS.avif" class="w3-center" style="width:100%;visibility:visible" alt="Bild der Webcam mit Blick nach Süden">
<div class="camera_offline_text" style="visibility:hidden">Die Webcam ist auf Grund einer Störung oder Wartung offline.</div>
</div>
<div class="w3-panel w3-card-4 w3-white w3-padding w3-center">

12
www/js/webcam.js
View File

@ -3,7 +3,7 @@ const reload_interval = setInterval(reloadImages, 60000);
window.onload = function() {
reloadImages();
};
};
function checkImageSource(image_url) {
var http_request = new XMLHttpRequest();
@ -23,7 +23,7 @@ function reloadImages() {
if (checkImageSource(image.src) == 200) {
status_text.style = "visibility:hidden"
image.style="width:100%;visibility:visible"
image.style = "width:100%;visibility:visible"
if (!image.src.includes('?')) {
image.src = `${image.src}?${Date.now()}`;
} else {
@ -32,12 +32,10 @@ function reloadImages() {
} else {
console.log('unable to find image on server');
image.alt = "Webcam nicht erreichbar."
image.style="width:100%;visibility:hidden"
image.style = "width:100%;visibility:hidden"
status_text.style = "visibility:visible"
}
});
console.log('reload finished');
}
}