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

display text if camera is in sleep mode

Browse Source
This commit is contained in:
Hendrik Schutter
2023-07-18 19:48:13 +02:00
parent 8c04451cf2
commit f782c28661
5 changed files with 33 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
www/css/custom.css
View File

@ -24,4 +24,10 @@
display: inline-block;
font-size: calc(10px + 0.9vw);
font-weight: bold;
}
.camera_sleep_text {
display: inline-block;
font-size: calc(10px + 0.9vw);
font-weight: bold;
}

BIN
www/data/camera/msvcamN.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 244 KiB

BIN
www/data/camera/msvcamS.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 352 KiB

4
www/index.html
View File

@ -27,12 +27,14 @@
<h3 class="w3-container w3-left cameratext">Blick auf die Piste</h3>
<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 class="camera_sleep_text" style="visibility:hidden">Die Webcam ist im Ruhemodus bis 7 Uhr.</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 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 class="camera_sleep_text" style="visibility:hidden">Die Webcam ist im Ruhemodus bis 7 Uhr.</div>
</div>
<div class="w3-panel w3-card-4 w3-white w3-padding w3-center">
@ -44,7 +46,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/11<p>
<p>Last update: 2023/07/18<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>

29
www/js/webcam.js
View File

@ -1,5 +1,7 @@
const boxes = document.getElementsByClassName('current_webcam_image_box');
const reload_interval = setInterval(reloadImages, 60000);
const wakeup_hour = 5; //UTC
const sleep_hour = 18; //UTC
window.onload = function() {
reloadImages();
@ -20,9 +22,11 @@ function reloadImages() {
var headline = box.childNodes[1]
var image = box.childNodes[3]
var status_text = box.childNodes[5]
var sleep_text = box.childNodes[7]
if (checkImageSource(image.src) == 200) {
status_text.style = "visibility:hidden"
sleep_text.style = "visibility:hidden"
image.style = "width:100%;visibility:visible"
if (!image.src.includes('?')) {
image.src = `${image.src}?${Date.now()}`;
@ -30,12 +34,27 @@ function reloadImages() {
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."
image.style = "width:100%;visibility:hidden"
status_text.style = "visibility:visible"
const now = new Date();
const currentHour = now.getUTCHours();
console.log(currentHour)
if ((currentHour >= wakeup_hour) && (currentHour < sleep_hour)) {
console.log("Camera error/fault occurred")
sleep_text.style = "visibility:hidden"
image.alt = "Webcam nicht erreichbar."
image.style = "width:100%;visibility:hidden"
status_text.style = "visibility:visible"
} else {
console.log("Camera in sleep mode")
status_text.style = "visibility:hidden"
image.alt = "Webcam im Ruhemodus."
image.style = "width:100%;visibility:hidden"
sleep_text.style = "visibility:visible"
}
}
});
console.log('reload finished');
}
}