localhorst/msv-webcam-frontend
1
0
Fork 0
Code Issues 7 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
Show Stats 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; display: inline-block;
font-size: calc(10px + 0.9vw); font-size: calc(10px + 0.9vw);
font-weight: bold; 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.

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

Binary file not shown.

4
www/index.html
View File

@ -27,12 +27,14 @@
<h3 class="w3-container w3-left cameratext">Blick auf die Piste</h3> <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"> <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_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>
<div class="w3-panel w3-card-4 w3-white w3-padding w3-center current_webcam_image_box"> <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> <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"> <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_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>
<div class="w3-panel w3-card-4 w3-white w3-padding w3-center"> <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-panel w3-card w3-dark-gray">
<div class="w3-center-align w3-text-black infobox"> <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> <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> <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>
</div> </div>

29
www/js/webcam.js
View File

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