added buttons on the bottom to skim through the images

author: Robert Scheibe <mail@robert-scheibe.de> 2024-12-20 15:48:02 +0100
committer: Robert Scheibe <mail@robert-scheibe.de> 2024-12-20 15:48:02 +0100
commit: 3593215e7375389a6deea3802796b7476119e0fb (patch)
tree: b93e4b3d72c34e6947502f4ccd87577449a20bfe
parent: 3838acdc1cfc4c2c3c0c74f638d9ca5109dea855 (diff)
8 files changed, 86 insertions, 57 deletions
diff --git a/bck.png b/bck.png
new file mode 100644
index 0000000..9d469be
--- /dev/null
+++ b/bck.png
diff --git a/deploy.sh b/deploy.sh
index 47fa800..2f2b6e7 100755
--- a/deploy.sh
+++ b/deploy.sh
@@ -1,4 +1,4 @@
 #!/bin/bash
 set -e
-scp index.html robert@waterpi:
-ssh robert@waterpi -C 'sudo cp index.html /var/www/html; sudo chown www-data:www-data /var/www/html/index.html'
+scp index.html *.png robert@waterpi:
+ssh robert@waterpi -C 'sudo cp index.html *.png /var/www/html; sudo chown www-data:www-data /var/www/html/index.html'
diff --git a/error.png b/error.png
new file mode 100644
index 0000000..345faac
--- /dev/null
+++ b/error.png
diff --git a/fbck.png b/fbck.png
new file mode 100644
index 0000000..46f3d94
--- /dev/null
+++ b/fbck.png
diff --git a/ffwd.png b/ffwd.png
new file mode 100644
index 0000000..4c683d3
--- /dev/null
+++ b/ffwd.png
diff --git a/fwd.png b/fwd.png
new file mode 100644
index 0000000..64561d2
--- /dev/null
+++ b/fwd.png
diff --git a/index.html b/index.html
index 73afdc8..6686788 100644
--- a/index.html
+++ b/index.html
@@ -5,11 +5,6 @@
 		<meta http-equiv="refresh" content="60">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<style>
-.responsive {
-	width: 100%;
-	max-width: 800;
-	height: auto;
-}
 .gallery {
     max-width: 800px;
     margin: 0 auto;
@@ -27,44 +22,79 @@
     margin: 0 auto;
 }
 
-.thumbnails {
+.controls {
     display: flex;
-    justify-content: space-between;
-    gap: 10px;
+    justify-content: center;
+    gap: 20px;
+    align-items: center;
 }
 
-.thumbnails img {
-    width: calc(20% - 8px);
-    height: auto;
+.nav-button {
+    padding: 10px 20px;
+    font-size: 24px;
+    cursor: pointer;
+    border: none;
+    background-color: #f0f0f0;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.now-button {
+    padding: 12px 24px;
+    font-size: 16px;
+    font-weight: bold;
     cursor: pointer;
-    transition: opacity 0.3s;
+    border: none;
+    background-color: #4CAF50;
+    color: white;
+    border-radius: 5px;
+    transition: background-color 0.3s;
 }
 
-.thumbnails img:hover {
-    opacity: 0.7;
+.now-button:hover {
+    background-color: #45a049;
+}
+
+.nav-button:hover {
+    background-color: #e0e0e0;
+}
+
+.nav-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
 }
 
 		</style>
 	</head>
 
 	<body>
-    <div class="gallery">
+<div class="gallery">
     <div class="main-image">
-        <img id="featured" src="" alt="Hauptbild">
+        <img id="featured" src="" alt="Hauptbild" onerror="this.src='error.png'">
     </div>
-    <div class="thumbnails" id="thumbnail-container">
+    <div class="controls">
+      <button onclick="jumpTime(-60)" class="nav-button"><img src="fbck.png"></button>
+        <button onclick="jumpTime(-15)" class="nav-button"><img src="bck.png"></button>
+        <button onclick="jumpToCurrent()" class="now-button"><img src="stop.png"></button>
+        <button onclick="jumpTime(15)" class="nav-button"><img src="fwd.png"></button>
+        <button onclick="jumpTime(60)" class="nav-button"><img src="ffwd.png"></button>
     </div>
 </div>
+
 	</body>
 </html>
 
 <script>
-let imageTimesList = [];
+let currentDateTime = new Date();
 
-function roundToEvenMinute(date) {
+function roundToQuarterHour(date) {
     const minutes = date.getMinutes();
-    date.setMinutes(minutes - (minutes % 2));
-    return date;
+    const roundedMinutes = Math.floor(minutes / 15) * 15;
+    const newDate = new Date(date);
+    newDate.setMinutes(roundedMinutes);
+    newDate.setSeconds(0);
+    newDate.setMilliseconds(0);
+    return newDate;
 }
 
 function formatTimeString(date) {
@@ -73,50 +103,49 @@ function formatTimeString(date) {
 }
 
 function updateGallery() {
-    const now = roundToEvenMinute(new Date());
-    imageTimesList = [];
-    
-    // Generiere Liste von 6 Zeitstempeln (1 Hauptbild + 5 Thumbnails)
-    for(let i = 0; i < 6; i++) {
-        const timeString = formatTimeString(new Date(now - i * 60 * 60 * 1000));
-        imageTimesList.push(timeString);
-    }
-    
-    renderGallery();
+    currentDateTime = roundToQuarterHour(new Date());
+    updateImage();
+    updateButtons();
 }
 
-function renderGallery() {
-    // Hauptbild aktualisieren
-    document.getElementById('featured').src = `${imageTimesList[0]}.jpg`;
-    
-    // Thumbnails aktualisieren
-    const thumbnailContainer = document.getElementById('thumbnail-container');
-    thumbnailContainer.innerHTML = '';
+function jumpTime(minutes) {
+    const newTime = new Date(currentDateTime.getTime() + minutes * 60000);
+    const now = new Date();
     
-    // Erstelle die 5 Thumbnails
-    for(let i = 1; i < imageTimesList.length; i++) {
-        const thumbnail = document.createElement('img');
-        thumbnail.src = `${imageTimesList[i]}.jpg`;
-        thumbnail.alt = `Thumbnail ${i}`;
-        thumbnail.onclick = () => rotateImages(i);
-        thumbnailContainer.appendChild(thumbnail);
+    if (newTime <= now) {
+        currentDateTime = newTime;
+        updateImage();
+        updateButtons();
     }
 }
 
-function rotateImages(clickedIndex) {
-    // Bringe das geklickte Bild nach vorne und rotiere die anderen
-    const clickedTime = imageTimesList[clickedIndex];
-    imageTimesList.splice(clickedIndex, 1); // Entferne das geklickte Element
-    imageTimesList.unshift(clickedTime);    // Füge es vorne ein
+function jumpToCurrent() {
+    currentDateTime = roundToQuarterHour(new Date());
+    updateImage();
+    updateButtons();
+}
+
+function updateImage() {
+    const timeString = formatTimeString(currentDateTime);
+    document.getElementById('featured').src = `${timeString}.jpg`;
+}
+
+function updateButtons() {
+    const now = roundToQuarterHour(new Date());
+    const buttons = document.querySelectorAll('.nav-button');
+    
+    // Deaktiviere Vorwärts-Buttons wenn aktuelle Zeit erreicht
+    buttons[2].disabled = currentDateTime.getTime() + 15 * 60000 > now.getTime();
+    buttons[3].disabled = currentDateTime.getTime() + 60 * 60000 > now.getTime();
     
-    renderGallery();
+    // Deaktiviere den Aktuell-Button wenn bereits das aktuelle Bild angezeigt wird
+    document.querySelector('.now-button').disabled = 
+        currentDateTime.getTime() === now.getTime();
 }
 
 // Initial gallery setup
 updateGallery();
 
-// Aktualisiere die Galerie alle 2 Minuten
-setInterval(updateGallery, 120000);
-
-
+// Aktualisiere die Galerie alle 15 Minuten
+setInterval(updateGallery, 90000);
 </script>
diff --git a/stop.png b/stop.png
new file mode 100644
index 0000000..9940f9d
--- /dev/null
+++ b/stop.png
author	Robert Scheibe <mail@robert-scheibe.de>	2024-12-20 15:48:02 +0100
committer	Robert Scheibe <mail@robert-scheibe.de>	2024-12-20 15:48:02 +0100
commit	3593215e7375389a6deea3802796b7476119e0fb (patch)
tree	b93e4b3d72c34e6947502f4ccd87577449a20bfe
parent	3838acdc1cfc4c2c3c0c74f638d9ca5109dea855 (diff)