diff options
| author | Robert Scheibe <rob.scheibe@gmail.com> | 2024-12-22 15:52:40 +0100 |
|---|---|---|
| committer | Robert Scheibe <rob.scheibe@gmail.com> | 2024-12-22 15:52:40 +0100 |
| commit | bd0a388682dae9da9146a9d37ebfd4d2c2527b6e (patch) | |
| tree | 6a555b1347dbfab3a956a4b6ede508c1559628b5 /history.html | |
| parent | 44a4a65f8c7244244d9b9102193d682ba89d3048 (diff) | |
added history.html and cpu temperature plotting
Diffstat (limited to 'history.html')
| -rw-r--r-- | history.html | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/history.html b/history.html new file mode 100644 index 0000000..f48e9fe --- /dev/null +++ b/history.html @@ -0,0 +1,152 @@ +<!DOCTYPE html> +<html> + <head> + <title> waterpi </title> + <meta http-equiv="refresh" content="60"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style> +.gallery { + max-width: 800px; + margin: 0 auto; + text-align: center; +} + +.main-image { + margin-bottom: 20px; +} + +.main-image img { + width: 100%; + height: auto; + display: block; + margin: 0 auto; + object-fit: contain; +} + +.controls { + display: flex; + justify-content: center; + gap: 20px; + align-items: center; +} + +.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; + border: none; + background-color: #4CAF50; + color: white; + border-radius: 5px; + transition: background-color 0.3s; +} + +.now-button:hover { + background-color: #45a049; +} + +.nav-button:hover { + background-color: #e0e0e0; +} + +.nav-button:disabled, .now-button:disabled { + opacity: 0.5; + cursor: not-allowed; +} +</style> + </head> + + <body> +<div class="gallery"> + <div class="main-image"> + <img id="featured" src="" alt="Hauptbild" onerror="this.src='error.png'"> + </div> + <div class="controls"> + <button onclick="jumpDays(-7)" class="nav-button"><img src="fbck.png"></button> + <button onclick="jumpDays(-1)" class="nav-button"><img src="bck.png"></button> + <button onclick="jumpToCurrent()" class="now-button"><img src="stop.png"></button> + <button onclick="jumpDays(1)" class="nav-button"><img src="fwd.png"></button> + <button onclick="jumpDays(7)" class="nav-button"><img src="ffwd.png"></button> + </div> +</div> +<a href="index.html">go to current day</a> + </body> +</html> + +<script> +let currentDate = new Date(); + +function formatDateString(date) { + const year = date.getFullYear(); + const month = (date.getMonth() + 1).toString().padStart(2, '0'); + const day = date.getDate().toString().padStart(2, '0'); + return `${year}-${month}-${day}_12_00`; +} + +function updateGallery() { + // Setze die Uhrzeit auf 12:00 + currentDate.setHours(12, 0, 0, 0); + updateImage(); + updateButtons(); +} + +function jumpDays(days) { + const newDate = new Date(currentDate); + newDate.setDate(newDate.getDate() + days); + const today = new Date(); + today.setHours(12, 0, 0, 0); + + // Prüfe ob das neue Datum nicht in der Zukunft liegt + if (newDate <= today) { + currentDate = newDate; + updateImage(); + updateButtons(); + } +} + +function jumpToCurrent() { + const today = new Date(); + today.setHours(12, 0, 0, 0); + currentDate = today; + updateImage(); + updateButtons(); +} + +function updateImage() { + const dateString = formatDateString(currentDate); + const img = document.getElementById('featured'); + img.src = `waterpi_12h_images/${dateString}.jpg`; +} + +function updateButtons() { + const today = new Date(); + today.setHours(12, 0, 0, 0); + + const buttons = document.querySelectorAll('.nav-button'); + + // Deaktiviere Vorwärts-Buttons wenn aktueller Tag erreicht + buttons[2].disabled = currentDate.getTime() + 24 * 60 * 60 * 1000 > today.getTime(); + buttons[3].disabled = currentDate.getTime() + 7 * 24 * 60 * 60 * 1000 > today.getTime(); + + // Deaktiviere den Heute-Button wenn bereits der aktuelle Tag angezeigt wird + document.querySelector('.now-button').disabled = + currentDate.getTime() === today.getTime(); +} + +// Initial gallery setup +updateGallery(); + +// Aktualisiere die Galerie jede Sekunde +//setInterval(updateGallery, 1000); +</script> |