From fc35e9b6e775d1631d4b0a68090c81d6b308e51e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Reinhard=20X=2E=20F=C3=BCrst?= Date: Sat, 2 May 2026 21:36:12 +0200 Subject: [PATCH] feat: Anleitung-Popup und Version 1.5.0 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ANLEITUNG.html erstellt (Bedienungsanleitung als HTML-Seite) - Anleitung-Button im Dashboard-Footer ergänzt - Anleitung öffnet sich als Modal-Popup mit eigenem Header - Version 1.4.1 → 1.5.0 --- ANLEITUNG.html | 490 +++++++++++++++++++ frontend/package.json | 2 +- frontend/public/ANLEITUNG.html | 490 +++++++++++++++++++ frontend/src/components/WeatherDashboard.css | 63 +++ frontend/src/components/WeatherDashboard.jsx | 28 ++ 5 files changed, 1072 insertions(+), 1 deletion(-) create mode 100644 ANLEITUNG.html create mode 100644 frontend/public/ANLEITUNG.html diff --git a/ANLEITUNG.html b/ANLEITUNG.html new file mode 100644 index 0000000..c96de12 --- /dev/null +++ b/ANLEITUNG.html @@ -0,0 +1,490 @@ + + + + + + Wetterstation – Bedienungsanleitung + + + + +
+

🌤️ Wetterstation – Bedienungsanleitung

+

Dashboard auf Basis einer Davis VantagePro

+
+ +
+ + + + + +
+

1. Überblick

+

+ Das Wetterstation-Dashboard zeigt die Messwerte einer Davis VantagePro + in interaktiven Diagrammen an. Alle Daten werden aus einer PostgreSQL-Datenbank + bezogen und im Browser aufbereitet. +

+

+ Die Oberfläche besteht aus drei Bereichen: +

+
    +
  1. Zeitraum-Navigation (oben) – wählt den dargestellten Zeitraum.
    2. +
  2. Diagramme / Tabelle (Mitte) – zeigt die Wetterdaten an.
    3. +
  3. Fußzeile (unten) – zeigt Version, Build-Datum und Kontakt.
    4. +
+
+ + +
+

2. Zeitraum-Auswahl

+

+ In der Navigationsleiste am oberen Rand können Sie den Darstellungszeitraum wählen: +

+
+ 24 Stunden + 7 Tage + 30 Tage + 365 Tage + Bereich + Tabelle +
+ + + + + + + + + + + + +
SchaltflächeDargestellter ZeitraumAuflösung
24 StundenLetzte 24 Stunden ab jetztEinzelmessungen (~5 min)
7 TageLetzte 7 Tage ab heuteTagesmittel / Tages-Min+Max
30 TageLetzte 30 Tage ab heuteTagesmittel / Tages-Min+Max
365 TageLetzte 365 Tage ab heuteTagesmittel, Regen pro Woche
BereichFrei wählbar (max. 1 Jahr)Stundenmittel (< 7 Tage) oder Tagesmittel (≥ 7 Tage)
+ +
+ Der aktuell aktive Zeitraum wird unterhalb der Navigationsleiste als Text angezeigt, + z. B. „Die letzten 24 Stunden" oder + „01.01.2026 00:00 – 31.01.2026 23:59". +
+
+ + +
+

3. Aktuelle Werte

+

+ Über jedem Diagramm wird der aktuellste Messwert angezeigt + (grauer Hinweistext, z. B. „Aktuell: 18,4 °C"). + Dieser Wert stammt immer aus den letzten 24 Stunden – unabhängig vom gewählten + Zeitraum. +

+

+ Unterhalb jedes Diagramms erscheinen die Minimum- und Maximumwerte + des gewählten Zeitraums mit dem zugehörigen Zeitpunkt. +

+
+ + +
+

4. Diagramme im Überblick

+
+
+
🌡️
+ Temperatur + °C +
+
+
🌐
+ Luftdruck + hPa +
+
+
💧
+ Luftfeuchtigkeit + % +
+
+
🌧️
+ Regen + mm / mm/h +
+
+
🧭
+ Windrichtung + ° +
+
+
💨
+ Wind & Böen + km/h +
+
+

+ Alle Diagramme sind interaktiv: Fahren Sie mit der Maus über eine Kurve, + um den genauen Messwert und Zeitpunkt als Tooltip anzuzeigen. +

+
+ + +
+

5. Diagramme im Detail

+ +

🌡️ Temperatur

+

+ Im 24h-Modus wird der Temperaturverlauf als Flächendiagramm dargestellt. + Bei längeren Zeiträumen (7 d, 30 d, 365 d, benutzerdefiniert ≥ 7 Tage) werden + Tages-Minimum und -Maximum als Band angezeigt, sodass die + tägliche Schwankungsbreite sofort erkennbar ist. +

+ +

🌐 Luftdruck

+

+ Zeigt den barometrischen Druck in hPa. Im Diagrammtitel erscheint ein + Trendpfeil, der die Druckentwicklung der letzten Stunden anzeigt: +

+ + + + + + + + + +
PfeilBedeutung
⬇⬇Fällt schnell (–60)
⬇Fällt langsam (–20)
→Stabil (0)
⬆Steigt langsam (+20)
⬆⬆Steigt schnell (+60)
+ +

💧 Luftfeuchtigkeit

+

Relative Luftfeuchtigkeit in Prozent als Flächendiagramm.

+ +

🌧️ Regen

+

+ Im 24h-Modus werden zwei Kurven überlagert: +

+
    +
  • Regen (mm) – kumulierter Regenfall als Fläche.
    • +
  • Regenrate (mm/h) – aktuelle Intensität als gestrichelte Linie.
    • +
+

+ Bei längeren Zeiträumen (7 d, 30 d) wird der Tagesregen + als Balkendiagramm dargestellt; bei 365 Tagen der Wochenregen. +

+ +

🧭 Windrichtung

+

+ Die Windrichtung wird als Punktewolke (Streudiagramm) angezeigt. + Die Y-Achse zeigt die Himmelsrichtungen von 0° bis 360°: + N = 0°/360°, NO = 45°, O = 90°, SO = 135°, S = 180°, SW = 225°, W = 270°, NW = 315°. +

+ +

💨 Wind & Böen

+

+ Zeigt Windgeschwindigkeit (lila) und Böen (orange) + in km/h. Bei 365 Tagen und benutzerdefinierten Zeiträumen über einem Jahr + werden Böen ausgeblendet, da keine aussagekräftigen Tagesmaxima vorliegen. + Unterhalb des Diagramms erscheint die maximale Böe des gewählten Zeitraums + mit Zeitpunkt. +

+
+ Tipp: Im Wind-Diagramm ist eine Legende eingeblendet, + die Windgeschwindigkeit und Böen unterscheidet. + Klicken Sie auf einen Legendeneintrag, um eine Serie ein- oder auszublenden. +
+
+ + +
+

6. Tabellenansicht

+

+ Klicken Sie auf die Schaltfläche Tabelle, + um statt der Diagramme eine tabellarische Tagesübersicht + anzuzeigen. Ein Klick auf Grafik + kehrt zur Diagrammansicht zurück. +

+

Die Tabelle enthält je Tag:

+
    +
  • Temperatur-Minimum und -Maximum (°C)
    • +
  • Luftfeuchtigkeit-Minimum und -Maximum (%)
    • +
  • Luftdruck-Minimum und -Maximum (hPa)
    • +
  • Regen gesamt (mm)
    • +
  • Maximale Windböe (km/h)
    • +
+
+ Im 24h-Modus werden die vorliegenden Einzelmessungen automatisch + pro Tag aggregiert, sodass immer eine Tageszeile erscheint. +
+
+ + +
+

7. Benutzerdefinierter Zeitbereich

+

+ Mit der Schaltfläche Bereich öffnet sich ein Dialog, + in dem Sie ein Start- und Enddatum frei eingeben können. +

+

Regeln:

+
    +
  • Das Enddatum muss nach dem Startdatum liegen.
    • +
  • Der maximale Zeitraum beträgt 365 Tage.
    • +
+

Darstellungsauflösung:

+
    +
  • < 7 Tage: Stundenmittelwerte, X-Achse mit Datum und Uhrzeit.
    • +
  • ≥ 7 Tage: Tagesmittel- bzw. Min/Max-Werte, X-Achse mit Datum.
    • +
+

+ Der zuletzt gewählte benutzerdefinierte Zeitbereich wird im Browser + (localStorage) gespeichert und beim nächsten Öffnen des + Dialogs vorausgefüllt. +

+
+ Hinweis: Schließen Sie den Dialog mit Abbrechen, + um ohne Änderung zurückzukehren. Ein Klick auf den dunklen Hintergrund + schließt den Dialog ebenfalls. +
+
+ + +
+

8. Automatische Aktualisierung

+

+ Im 24h-Modus werden die Daten automatisch alle + 5 Minuten neu geladen. Dabei bleibt die aktuelle + Ansicht sichtbar – die Seite flackert nicht. +

+

+ Bei allen anderen Zeiträumen (7 d, 30 d, 365 d, benutzerdefiniert) + findet kein automatisches Neuladen statt. + Laden Sie die Seite manuell neu (F5 / ⌘R), um aktuelle Daten + für diese Zeiträume zu erhalten. +

+
+ + +
+

9. Drucken

+

+ In der Tabellenansicht erscheint oben links die Schaltfläche + 🖨️ Drucken. Ein Klick darauf öffnet den Druckdialog des Browsers. +

+

+ Die Schaltflächen-Leiste und der Drucken-Button werden beim Ausdruck + automatisch ausgeblendet, sodass nur die Tabelle erscheint. +

+
+ Tipp für PDF-Export: Wählen Sie im Druckdialog + „Als PDF speichern", um die Tabelle als PDF-Datei zu exportieren. +
+
+ + +
+

10. Hinweise & Grenzen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ThemaDetails
MesssystemDavis VantagePro Wetterstation
DatenbankPostgreSQL, Tabelle weather_data
Messintervallca. 5 Minuten (Rohwerte); längere Zeiträume werden serverseitig aggregiert
Max. Zeitraum365 Tage bei benutzerdefiniertem Bereich
DatenlückenAusfälle der Station oder des Collectors erscheinen als Unterbrechung in den Kurven
BrowserkompatibilitätAlle modernen Browser (Chrome, Firefox, Safari, Edge) in aktueller Version
MobilDie Oberfläche ist für Mobilgeräte optimiert; Zeitraum-Buttons zeigen Kurzbezeichnungen
ZeitzoneAlle Zeitangaben in lokaler Browserzeit (keine UTC-Umrechnung)
+
+ +
+ + + + + diff --git a/frontend/package.json b/frontend/package.json index 9add6be..084a74a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,7 +1,7 @@ { "name": "wetterstation-frontend", "private": true, - "version": "1.4.1", + "version": "1.5.0", "type": "module", "scripts": { "dev": "vite", diff --git a/frontend/public/ANLEITUNG.html b/frontend/public/ANLEITUNG.html new file mode 100644 index 0000000..c96de12 --- /dev/null +++ b/frontend/public/ANLEITUNG.html @@ -0,0 +1,490 @@ + + + + + + Wetterstation – Bedienungsanleitung + + + + +
+

🌤️ Wetterstation – Bedienungsanleitung

+

Dashboard auf Basis einer Davis VantagePro

+
+ +
+ + + + + +
+

1. Überblick

+

+ Das Wetterstation-Dashboard zeigt die Messwerte einer Davis VantagePro + in interaktiven Diagrammen an. Alle Daten werden aus einer PostgreSQL-Datenbank + bezogen und im Browser aufbereitet. +

+

+ Die Oberfläche besteht aus drei Bereichen: +

+
    +
  1. Zeitraum-Navigation (oben) – wählt den dargestellten Zeitraum.
    2. +
  2. Diagramme / Tabelle (Mitte) – zeigt die Wetterdaten an.
    3. +
  3. Fußzeile (unten) – zeigt Version, Build-Datum und Kontakt.
    4. +
+
+ + +
+

2. Zeitraum-Auswahl

+

+ In der Navigationsleiste am oberen Rand können Sie den Darstellungszeitraum wählen: +

+
+ 24 Stunden + 7 Tage + 30 Tage + 365 Tage + Bereich + Tabelle +
+ + + + + + + + + + + + +
SchaltflächeDargestellter ZeitraumAuflösung
24 StundenLetzte 24 Stunden ab jetztEinzelmessungen (~5 min)
7 TageLetzte 7 Tage ab heuteTagesmittel / Tages-Min+Max
30 TageLetzte 30 Tage ab heuteTagesmittel / Tages-Min+Max
365 TageLetzte 365 Tage ab heuteTagesmittel, Regen pro Woche
BereichFrei wählbar (max. 1 Jahr)Stundenmittel (< 7 Tage) oder Tagesmittel (≥ 7 Tage)
+ +
+ Der aktuell aktive Zeitraum wird unterhalb der Navigationsleiste als Text angezeigt, + z. B. „Die letzten 24 Stunden" oder + „01.01.2026 00:00 – 31.01.2026 23:59". +
+
+ + +
+

3. Aktuelle Werte

+

+ Über jedem Diagramm wird der aktuellste Messwert angezeigt + (grauer Hinweistext, z. B. „Aktuell: 18,4 °C"). + Dieser Wert stammt immer aus den letzten 24 Stunden – unabhängig vom gewählten + Zeitraum. +

+

+ Unterhalb jedes Diagramms erscheinen die Minimum- und Maximumwerte + des gewählten Zeitraums mit dem zugehörigen Zeitpunkt. +

+
+ + +
+

4. Diagramme im Überblick

+
+
+
🌡️
+ Temperatur + °C +
+
+
🌐
+ Luftdruck + hPa +
+
+
💧
+ Luftfeuchtigkeit + % +
+
+
🌧️
+ Regen + mm / mm/h +
+
+
🧭
+ Windrichtung + ° +
+
+
💨
+ Wind & Böen + km/h +
+
+

+ Alle Diagramme sind interaktiv: Fahren Sie mit der Maus über eine Kurve, + um den genauen Messwert und Zeitpunkt als Tooltip anzuzeigen. +

+
+ + +
+

5. Diagramme im Detail

+ +

🌡️ Temperatur

+

+ Im 24h-Modus wird der Temperaturverlauf als Flächendiagramm dargestellt. + Bei längeren Zeiträumen (7 d, 30 d, 365 d, benutzerdefiniert ≥ 7 Tage) werden + Tages-Minimum und -Maximum als Band angezeigt, sodass die + tägliche Schwankungsbreite sofort erkennbar ist. +

+ +

🌐 Luftdruck

+

+ Zeigt den barometrischen Druck in hPa. Im Diagrammtitel erscheint ein + Trendpfeil, der die Druckentwicklung der letzten Stunden anzeigt: +

+ + + + + + + + + +
PfeilBedeutung
⬇⬇Fällt schnell (–60)
⬇Fällt langsam (–20)
→Stabil (0)
⬆Steigt langsam (+20)
⬆⬆Steigt schnell (+60)
+ +

💧 Luftfeuchtigkeit

+

Relative Luftfeuchtigkeit in Prozent als Flächendiagramm.

+ +

🌧️ Regen

+

+ Im 24h-Modus werden zwei Kurven überlagert: +

+
    +
  • Regen (mm) – kumulierter Regenfall als Fläche.
    • +
  • Regenrate (mm/h) – aktuelle Intensität als gestrichelte Linie.
    • +
+

+ Bei längeren Zeiträumen (7 d, 30 d) wird der Tagesregen + als Balkendiagramm dargestellt; bei 365 Tagen der Wochenregen. +

+ +

🧭 Windrichtung

+

+ Die Windrichtung wird als Punktewolke (Streudiagramm) angezeigt. + Die Y-Achse zeigt die Himmelsrichtungen von 0° bis 360°: + N = 0°/360°, NO = 45°, O = 90°, SO = 135°, S = 180°, SW = 225°, W = 270°, NW = 315°. +

+ +

💨 Wind & Böen

+

+ Zeigt Windgeschwindigkeit (lila) und Böen (orange) + in km/h. Bei 365 Tagen und benutzerdefinierten Zeiträumen über einem Jahr + werden Böen ausgeblendet, da keine aussagekräftigen Tagesmaxima vorliegen. + Unterhalb des Diagramms erscheint die maximale Böe des gewählten Zeitraums + mit Zeitpunkt. +

+
+ Tipp: Im Wind-Diagramm ist eine Legende eingeblendet, + die Windgeschwindigkeit und Böen unterscheidet. + Klicken Sie auf einen Legendeneintrag, um eine Serie ein- oder auszublenden. +
+
+ + +
+

6. Tabellenansicht

+

+ Klicken Sie auf die Schaltfläche Tabelle, + um statt der Diagramme eine tabellarische Tagesübersicht + anzuzeigen. Ein Klick auf Grafik + kehrt zur Diagrammansicht zurück. +

+

Die Tabelle enthält je Tag:

+
    +
  • Temperatur-Minimum und -Maximum (°C)
    • +
  • Luftfeuchtigkeit-Minimum und -Maximum (%)
    • +
  • Luftdruck-Minimum und -Maximum (hPa)
    • +
  • Regen gesamt (mm)
    • +
  • Maximale Windböe (km/h)
    • +
+
+ Im 24h-Modus werden die vorliegenden Einzelmessungen automatisch + pro Tag aggregiert, sodass immer eine Tageszeile erscheint. +
+
+ + +
+

7. Benutzerdefinierter Zeitbereich

+

+ Mit der Schaltfläche Bereich öffnet sich ein Dialog, + in dem Sie ein Start- und Enddatum frei eingeben können. +

+

Regeln:

+
    +
  • Das Enddatum muss nach dem Startdatum liegen.
    • +
  • Der maximale Zeitraum beträgt 365 Tage.
    • +
+

Darstellungsauflösung:

+
    +
  • < 7 Tage: Stundenmittelwerte, X-Achse mit Datum und Uhrzeit.
    • +
  • ≥ 7 Tage: Tagesmittel- bzw. Min/Max-Werte, X-Achse mit Datum.
    • +
+

+ Der zuletzt gewählte benutzerdefinierte Zeitbereich wird im Browser + (localStorage) gespeichert und beim nächsten Öffnen des + Dialogs vorausgefüllt. +

+
+ Hinweis: Schließen Sie den Dialog mit Abbrechen, + um ohne Änderung zurückzukehren. Ein Klick auf den dunklen Hintergrund + schließt den Dialog ebenfalls. +
+
+ + +
+

8. Automatische Aktualisierung

+

+ Im 24h-Modus werden die Daten automatisch alle + 5 Minuten neu geladen. Dabei bleibt die aktuelle + Ansicht sichtbar – die Seite flackert nicht. +

+

+ Bei allen anderen Zeiträumen (7 d, 30 d, 365 d, benutzerdefiniert) + findet kein automatisches Neuladen statt. + Laden Sie die Seite manuell neu (F5 / ⌘R), um aktuelle Daten + für diese Zeiträume zu erhalten. +

+
+ + +
+

9. Drucken

+

+ In der Tabellenansicht erscheint oben links die Schaltfläche + 🖨️ Drucken. Ein Klick darauf öffnet den Druckdialog des Browsers. +

+

+ Die Schaltflächen-Leiste und der Drucken-Button werden beim Ausdruck + automatisch ausgeblendet, sodass nur die Tabelle erscheint. +

+
+ Tipp für PDF-Export: Wählen Sie im Druckdialog + „Als PDF speichern", um die Tabelle als PDF-Datei zu exportieren. +
+
+ + +
+

10. Hinweise & Grenzen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ThemaDetails
MesssystemDavis VantagePro Wetterstation
DatenbankPostgreSQL, Tabelle weather_data
Messintervallca. 5 Minuten (Rohwerte); längere Zeiträume werden serverseitig aggregiert
Max. Zeitraum365 Tage bei benutzerdefiniertem Bereich
DatenlückenAusfälle der Station oder des Collectors erscheinen als Unterbrechung in den Kurven
BrowserkompatibilitätAlle modernen Browser (Chrome, Firefox, Safari, Edge) in aktueller Version
MobilDie Oberfläche ist für Mobilgeräte optimiert; Zeitraum-Buttons zeigen Kurzbezeichnungen
ZeitzoneAlle Zeitangaben in lokaler Browserzeit (keine UTC-Umrechnung)
+
+ +
+ + + + + diff --git a/frontend/src/components/WeatherDashboard.css b/frontend/src/components/WeatherDashboard.css index ee55f52..ecc7519 100644 --- a/frontend/src/components/WeatherDashboard.css +++ b/frontend/src/components/WeatherDashboard.css @@ -190,10 +190,27 @@ .version-line { display: flex; justify-content: space-between; + align-items: center; margin-bottom: 0.5rem; font-size: 0.85rem; } +.anleitung-btn { + background: none; + border: 1px solid #0066cc; + border-radius: 6px; + color: #0066cc; + cursor: pointer; + font-size: 0.82rem; + padding: 0.2rem 0.75rem; + transition: background 0.15s, color 0.15s; +} + +.anleitung-btn:hover { + background: #0066cc; + color: #fff; +} + .version-short { display: none; } @@ -252,6 +269,52 @@ } } +/* Anleitung Modal */ +.anleitung-modal { + background: white; + border-radius: 12px; + width: 90vw; + max-width: 900px; + height: 85vh; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + display: flex; + flex-direction: column; + overflow: hidden; +} + +.anleitung-modal-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.55rem 0.9rem; + background: #1a3a5c; + color: #fff; + font-size: 0.95rem; + font-weight: 600; + border-radius: 12px 12px 0 0; + flex-shrink: 0; +} + +.anleitung-modal-close { + background: none; + border: none; + font-size: 1.2rem; + cursor: pointer; + color: #fff; + line-height: 1; + padding: 0 0.2rem; +} + +.anleitung-modal-close:hover { + color: #ddd; +} + +.anleitung-frame { + width: 100%; + flex: 1; + border: none; +} + /* Modal Styles */ .modal-overlay { position: fixed; diff --git a/frontend/src/components/WeatherDashboard.jsx b/frontend/src/components/WeatherDashboard.jsx index 276eb60..b8fe1fc 100644 --- a/frontend/src/components/WeatherDashboard.jsx +++ b/frontend/src/components/WeatherDashboard.jsx @@ -21,6 +21,9 @@ Highcharts.setOptions({ }) const WeatherDashboard = ({ data, currentData = [], rainData = [], timeRange = '24h', onTimeRangeChange, showTable = false, onToggleTable }) => { + // State für Anleitung + const [showAnleitung, setShowAnleitung] = useState(false) + // State für benutzerdefinierten Zeitbereich const [showCustomRangeModal, setShowCustomRangeModal] = useState(false) const [customStartDate, setCustomStartDate] = useState('') @@ -1074,6 +1077,23 @@ const WeatherDashboard = ({ data, currentData = [], rainData = [], timeRange = ' )} {/* end showTable ternary */} + {/* Modal Anleitung */} + {showAnleitung && ( +
setShowAnleitung(false)}> +
e.stopPropagation()}> +
+ Bedienungsanleitung + +
+