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

10
www/css/custom.css
View File

@ -1,8 +1,8 @@
img { .current_webcam_image {
transition: transform 0.25s ease; transition: transform 0.25s ease;
} }
img:hover { .current_webcam_image:hover {
-webkit-transform: scale(1.5); -webkit-transform: scale(1.5);
transform: scale(1.5); transform: scale(1.5);
} }
@ -19,3 +19,9 @@ img:hover {
margin: 0 !important; margin: 0 !important;
padding: 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"> <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> <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"> <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">
<p style="visibility:hidden">Hinweistext</p> <div class="camera_offline_text" style="visibility:hidden">Die Webcam ist auf Grund einer Störung oder Wartung offline.</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 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">
<p>Hinweistext</p> <div class="camera_offline_text" style="visibility:hidden">Die Webcam ist auf Grund einer Störung oder Wartung offline.</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">

4
www/js/webcam.js
View File

@ -34,10 +34,8 @@ function reloadImages() {
image.alt = "Webcam nicht erreichbar." image.alt = "Webcam nicht erreichbar."
image.style = "width:100%;visibility:hidden" image.style = "width:100%;visibility:hidden"
status_text.style = "visibility:visible" status_text.style = "visibility:visible"
} }
}); });
console.log('reload finished'); console.log('reload finished');
} }