@@ -0,0 +1,490 @@
<!DOCTYPE html>
< html lang = "de" >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< title > Wetterstation – < / title >
< style >
* , * :: before , * :: after { box-sizing : border-box ; margin : 0 ; padding : 0 ; }
body {
font-family : - apple-system , BlinkMacSystemFont , "Segoe UI" , Roboto , Helvetica , Arial , sans-serif ;
font-size : 16 px ;
line-height : 1.7 ;
color : #1a1a2e ;
background : #f5f7fa ;
}
/* ── Header ── */
header {
background : linear-gradient ( 135 deg , #1a3a5c 0 % , #2d6a9f 100 % ) ;
color : #fff ;
padding : 3 rem 2 rem 2.5 rem ;
text-align : center ;
}
header h1 { font-size : 2.2 rem ; font-weight : 700 ; letter-spacing : -0.5 px ; }
header p { margin-top : .5 rem ; font-size : 1.05 rem ; opacity : .85 ; }
/* ── Layout ── */
. page { max-width : 860 px ; margin : 0 auto ; padding : 2 rem 1.5 rem 4 rem ; }
/* ── Table of Contents ── */
. toc {
background : #fff ;
border : 1 px solid #dce3ec ;
border-radius : 10 px ;
padding : 1.4 rem 1.8 rem ;
margin-bottom : 2.5 rem ;
}
. toc h2 { font-size : 1 rem ; text-transform : uppercase ; letter-spacing : .08 em ; color : #5a6a7a ; margin-bottom : .7 rem ; }
. toc ol { padding-left : 1.4 rem ; }
. toc li { margin : .25 rem 0 ; }
. toc a { color : #2d6a9f ; text-decoration : none ; }
. toc a : hover { text-decoration : underline ; }
/* ── Sections ── */
section {
background : #fff ;
border : 1 px solid #dce3ec ;
border-radius : 10 px ;
padding : 1.8 rem 2 rem ;
margin-bottom : 1.8 rem ;
}
section h2 {
font-size : 1.35 rem ;
color : #1a3a5c ;
border-bottom : 2 px solid #e4eaf2 ;
padding-bottom : .5 rem ;
margin-bottom : 1.1 rem ;
}
section h3 {
font-size : 1.05 rem ;
color : #2d6a9f ;
margin : 1.3 rem 0 .5 rem ;
}
p { margin-bottom : .8 rem ; }
p : last-child { margin-bottom : 0 ; }
/* ── Buttons –
. btn-row { display : flex ; flex-wrap : wrap ; gap : .5 rem ; margin : 1 rem 0 ; }
. btn {
display : inline-block ;
padding : .35 rem .85 rem ;
border-radius : 6 px ;
font-size : .9 rem ;
font-weight : 600 ;
border : 2 px solid #2d6a9f ;
color : #2d6a9f ;
background : #fff ;
}
. btn . active { background : #2d6a9f ; color : #fff ; }
/* ── Charts grid preview ── */
. chart-grid {
display : grid ;
grid-template-columns : repeat ( auto - fill , minmax ( 180 px , 1 fr ) ) ;
gap : .8 rem ;
margin : 1 rem 0 ;
}
. chart-card {
border : 1 px solid #dce3ec ;
border-radius : 8 px ;
padding : .8 rem 1 rem ;
background : #f9fbfd ;
}
. chart-card . icon { font-size : 1.4 rem ; }
. chart-card strong { display : block ; margin-top : .3 rem ; font-size : .92 rem ; color : #1a3a5c ; }
. chart-card span { font-size : .82 rem ; color : #5a6a7a ; }
/* ── Info boxes ── */
. info-box {
background : #eef5ff ;
border-left : 4 px solid #2d6a9f ;
border-radius : 0 6 px 6 px 0 ;
padding : .8 rem 1.1 rem ;
margin : 1 rem 0 ;
font-size : .94 rem ;
}
. tip-box {
background : #f0faf3 ;
border-left : 4 px solid #27ae60 ;
border-radius : 0 6 px 6 px 0 ;
padding : .8 rem 1.1 rem ;
margin : 1 rem 0 ;
font-size : .94 rem ;
}
. warn-box {
background : #fffbea ;
border-left : 4 px solid #f0a500 ;
border-radius : 0 6 px 6 px 0 ;
padding : .8 rem 1.1 rem ;
margin : 1 rem 0 ;
font-size : .94 rem ;
}
/* ── Table ── */
table { width : 100 % ; border-collapse : collapse ; font-size : .93 rem ; margin : 1 rem 0 ; }
th , td { padding : .55 rem .8 rem ; border : 1 px solid #dce3ec ; text-align : left ; }
th { background : #eef2f8 ; font-weight : 600 ; color : #1a3a5c ; }
tr : nth-child ( even ) td { background : #f9fbfd ; }
/* ── Trend arrows ── */
. trend-table td : first-child { font-size : 1.1 rem ; text-align : center ; }
/* ── Footer ── */
footer {
text-align : center ;
color : #8a9ab0 ;
font-size : .85 rem ;
margin-top : 3 rem ;
}
@ media ( max-width : 600px ) {
header h1 { font-size : 1.6 rem ; }
. page { padding : 1.2 rem 1 rem 3 rem ; }
section { padding : 1.2 rem 1.1 rem ; }
}
@ media print {
body { background : #fff ; font-size : 12 pt ; }
header { background : #1a3a5c !important ; -webkit- print-color-adjust : exact ; print-color-adjust : exact ; }
. btn . active { background : #2d6a9f !important ; -webkit- print-color-adjust : exact ; print-color-adjust : exact ; }
}
< / style >
< / head >
< body >
< header >
< h1 > 🌤️ Wetterstation – < / h1 >
< p > Dashboard auf Basis einer Davis VantagePro< / p >
< / header >
< div class = "page" >
<!-- Table of Contents -->
< nav class = "toc" >
< h2 > Inhalt< / h2 >
< ol >
< li > < a href = "#ueberblick" > Überblick< / a > < / li >
< li > < a href = "#zeitraum" > Zeitraum-Auswahl< / a > < / li >
< li > < a href = "#aktuell" > Aktuelle Werte< / a > < / li >
< li > < a href = "#diagramme" > Diagramme im Überblick< / a > < / li >
< li > < a href = "#charts-detail" > Diagramme im Detail< / a > < / li >
< li > < a href = "#tabelle" > Tabellenansicht< / a > < / li >
< li > < a href = "#benutzerdefiniert" > Benutzerdefinierter Zeitbereich< / a > < / li >
< li > < a href = "#refresh" > Automatische Aktualisierung< / a > < / li >
< li > < a href = "#drucken" > Drucken< / a > < / li >
< li > < a href = "#hinweise" > Hinweise & Grenzen< / a > < / li >
< / ol >
< / nav >
<!-- 1 Überblick -->
< section id = "ueberblick" >
< h2 > 1. Überblick< / h2 >
< p >
Das Wetterstation-Dashboard zeigt die Messwerte einer < strong > Davis VantagePro< / strong >
in interaktiven Diagrammen an. Alle Daten werden aus einer PostgreSQL-Datenbank
bezogen und im Browser aufbereitet.
< / p >
< p >
Die Oberfläche besteht aus drei Bereichen:
< / p >
< ol style = "padding-left:1.4rem;" >
< li > < strong > Zeitraum-Navigation< / strong > (oben) – < / li >
< li > < strong > Diagramme / Tabelle< / strong > (Mitte) – < / li >
< li > < strong > Fußzeile< / strong > (unten) – < / li >
< / ol >
< / section >
<!-- 2 Zeitraum - Auswahl -->
< section id = "zeitraum" >
< h2 > 2. Zeitraum-Auswahl< / h2 >
< p >
In der Navigationsleiste am oberen Rand können Sie den Darstellungszeitraum wählen:
< / p >
< div class = "btn-row" >
< span class = "btn active" > 24 Stunden< / span >
< span class = "btn" > 7 Tage< / span >
< span class = "btn" > 30 Tage< / span >
< span class = "btn" > 365 Tage< / span >
< span class = "btn" > Bereich< / span >
< span class = "btn" > Tabelle< / span >
< / div >
< table >
< thead >
< tr > < th > Schaltfläche< / th > < th > Dargestellter Zeitraum< / th > < th > Auflösung< / th > < / tr >
< / thead >
< tbody >
< tr > < td > < strong > 24 Stunden< / strong > < / td > < td > Letzte 24 Stunden ab jetzt< / td > < td > Einzelmessungen (~5 min)< / td > < / tr >
< tr > < td > < strong > 7 Tage< / strong > < / td > < td > Letzte 7 Tage ab heute< / td > < td > Tagesmittel / Tages-Min+Max< / td > < / tr >
< tr > < td > < strong > 30 Tage< / strong > < / td > < td > Letzte 30 Tage ab heute< / td > < td > Tagesmittel / Tages-Min+Max< / td > < / tr >
< tr > < td > < strong > 365 Tage< / strong > < / td > < td > Letzte 365 Tage ab heute< / td > < td > Tagesmittel, Regen pro Woche< / td > < / tr >
< tr > < td > < strong > Bereich< / strong > < / td > < td > Frei wählbar (max. 1 Jahr)< / td > < td > Stundenmittel (< 7 Tage) oder Tagesmittel (≥ 7 Tage)< / td > < / tr >
< / tbody >
< / table >
< div class = "info-box" >
Der aktuell aktive Zeitraum wird unterhalb der Navigationsleiste als Text angezeigt,
z. B. < em > „Die letzten 24 Stunden"< / em > oder
< em > „01.01.2026 00:00 – < / em > .
< / div >
< / section >
<!-- 3 Aktuelle Werte -->
< section id = "aktuell" >
< h2 > 3. Aktuelle Werte< / h2 >
< p >
Über jedem Diagramm wird der < strong > aktuellste Messwert< / strong > angezeigt
(grauer Hinweistext, z. B. < em > „Aktuell: 18,4 °C"< / em > ).
Dieser Wert stammt immer aus den letzten 24 Stunden –
Zeitraum.
< / p >
< p >
Unterhalb jedes Diagramms erscheinen die < strong > Minimum- und Maximumwerte< / strong >
des gewählten Zeitraums mit dem zugehörigen Zeitpunkt.
< / p >
< / section >
<!-- 4 Diagramme im Überblick -->
< section id = "diagramme" >
< h2 > 4. Diagramme im Überblick< / h2 >
< div class = "chart-grid" >
< div class = "chart-card" >
< div class = "icon" > 🌡️< / div >
< strong > Temperatur< / strong >
< span > °C< / span >
< / div >
< div class = "chart-card" >
< div class = "icon" > 🌐< / div >
< strong > Luftdruck< / strong >
< span > hPa< / span >
< / div >
< div class = "chart-card" >
< div class = "icon" > 💧< / div >
< strong > Luftfeuchtigkeit< / strong >
< span > %< / span >
< / div >
< div class = "chart-card" >
< div class = "icon" > 🌧️< / div >
< strong > Regen< / strong >
< span > mm / mm/h< / span >
< / div >
< div class = "chart-card" >
< div class = "icon" > 🧭< / div >
< strong > Windrichtung< / strong >
< span > °< / span >
< / div >
< div class = "chart-card" >
< div class = "icon" > 💨< / div >
< strong > Wind & Böen< / strong >
< span > km/h< / span >
< / div >
< / div >
< p >
Alle Diagramme sind interaktiv: Fahren Sie mit der Maus über eine Kurve,
um den genauen Messwert und Zeitpunkt als Tooltip anzuzeigen.
< / p >
< / section >
<!-- 5 Diagramme im Detail -->
< section id = "charts-detail" >
< h2 > 5. Diagramme im Detail< / h2 >
< h3 > 🌡️ Temperatur< / h3 >
< p >
Im < strong > 24h-Modus< / strong > wird der Temperaturverlauf als Flächendiagramm dargestellt.
Bei längeren Zeiträumen (7 d, 30 d, 365 d, benutzerdefiniert ≥ 7 Tage) werden
< strong > Tages-Minimum und -Maximum< / strong > als Band angezeigt, sodass die
tägliche Schwankungsbreite sofort erkennbar ist.
< / p >
< h3 > 🌐 Luftdruck< / h3 >
< p >
Zeigt den barometrischen Druck in hPa. Im Diagrammtitel erscheint ein
< strong > Trendpfeil< / strong > , der die Druckentwicklung der letzten Stunden anzeigt:
< / p >
< table class = "trend-table" >
< thead > < tr > < th > Pfeil< / th > < th > Bedeutung< / th > < / tr > < / thead >
< tbody >
< tr > < td > ⬇⬇< / td > < td > Fällt schnell (– < / td > < / tr >
< tr > < td > ⬇< / td > < td > Fällt langsam (– < / td > < / tr >
< tr > < td > →< / td > < td > Stabil (0)< / td > < / tr >
< tr > < td > ⬆< / td > < td > Steigt langsam (+20)< / td > < / tr >
< tr > < td > ⬆⬆< / td > < td > Steigt schnell (+60)< / td > < / tr >
< / tbody >
< / table >
< h3 > 💧 Luftfeuchtigkeit< / h3 >
< p > Relative Luftfeuchtigkeit in Prozent als Flächendiagramm.< / p >
< h3 > 🌧️ Regen< / h3 >
< p >
Im < strong > 24h-Modus< / strong > werden zwei Kurven überlagert:
< / p >
< ul style = "padding-left:1.4rem; margin-bottom:.8rem;" >
< li > < strong > Regen (mm)< / strong > – < / li >
< li > < strong > Regenrate (mm/h)< / strong > – < / li >
< / ul >
< p >
Bei längeren Zeiträumen (7 d, 30 d) wird der < strong > Tagesregen< / strong >
als Balkendiagramm dargestellt; bei 365 Tagen der < strong > Wochenregen< / strong > .
< / p >
< h3 > 🧭 Windrichtung< / h3 >
< p >
Die Windrichtung wird als < strong > Punktewolke< / strong > (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°.
< / p >
< h3 > 💨 Wind & Böen< / h3 >
< p >
Zeigt < strong > Windgeschwindigkeit< / strong > (lila) und < strong > Böen< / strong > (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.
< / p >
< div class = "tip-box" >
< strong > Tipp:< / strong > Im Wind-Diagramm ist eine Legende eingeblendet,
die Windgeschwindigkeit und Böen unterscheidet.
Klicken Sie auf einen Legendeneintrag, um eine Serie ein- oder auszublenden.
< / div >
< / section >
<!-- 6 Tabellenansicht -->
< section id = "tabelle" >
< h2 > 6. Tabellenansicht< / h2 >
< p >
Klicken Sie auf die Schaltfläche < span class = "btn" > Tabelle< / span > ,
um statt der Diagramme eine < strong > tabellarische Tagesübersicht< / strong >
anzuzeigen. Ein Klick auf < span class = "btn active" > Grafik< / span >
kehrt zur Diagrammansicht zurück.
< / p >
< p > Die Tabelle enthält je Tag:< / p >
< ul style = "padding-left:1.4rem; margin-bottom:.8rem;" >
< li > Temperatur-Minimum und -Maximum (°C)< / li >
< li > Luftfeuchtigkeit-Minimum und -Maximum (%)< / li >
< li > Luftdruck-Minimum und -Maximum (hPa)< / li >
< li > Regen gesamt (mm)< / li >
< li > Maximale Windböe (km/h)< / li >
< / ul >
< div class = "info-box" >
Im 24h-Modus werden die vorliegenden Einzelmessungen automatisch
pro Tag aggregiert, sodass immer eine Tageszeile erscheint.
< / div >
< / section >
<!-- 7 Benutzerdefinierter Zeitbereich -->
< section id = "benutzerdefiniert" >
< h2 > 7. Benutzerdefinierter Zeitbereich< / h2 >
< p >
Mit der Schaltfläche < span class = "btn" > Bereich< / span > öffnet sich ein Dialog,
in dem Sie ein < strong > Start- und Enddatum< / strong > frei eingeben können.
< / p >
< p > < strong > Regeln:< / strong > < / p >
< ul style = "padding-left:1.4rem; margin-bottom:.8rem;" >
< li > Das Enddatum muss nach dem Startdatum liegen.< / li >
< li > Der maximale Zeitraum beträgt < strong > 365 Tage< / strong > .< / li >
< / ul >
< p > < strong > Darstellungsauflösung:< / strong > < / p >
< ul style = "padding-left:1.4rem; margin-bottom:.8rem;" >
< li > < strong > < 7 Tage:< / strong > Stundenmittelwerte, X-Achse mit Datum und Uhrzeit.< / li >
< li > < strong > ≥ 7 Tage:< / strong > Tagesmittel- bzw. Min/Max-Werte, X-Achse mit Datum.< / li >
< / ul >
< p >
Der zuletzt gewählte benutzerdefinierte Zeitbereich wird im Browser
(< code > localStorage< / code > ) gespeichert und beim nächsten Öffnen des
Dialogs vorausgefüllt.
< / p >
< div class = "warn-box" >
< strong > Hinweis:< / strong > Schließen Sie den Dialog mit < em > Abbrechen< / em > ,
um ohne Änderung zurückzukehren. Ein Klick auf den dunklen Hintergrund
schließt den Dialog ebenfalls.
< / div >
< / section >
<!-- 8 Automatische Aktualisierung -->
< section id = "refresh" >
< h2 > 8. Automatische Aktualisierung< / h2 >
< p >
Im < strong > 24h-Modus< / strong > werden die Daten automatisch alle
< strong > 5 Minuten< / strong > neu geladen. Dabei bleibt die aktuelle
Ansicht sichtbar –
< / p >
< p >
Bei allen anderen Zeiträumen (7 d, 30 d, 365 d, benutzerdefiniert)
findet < strong > kein automatisches Neuladen< / strong > statt.
Laden Sie die Seite manuell neu (F5 / ⌘R), um aktuelle Daten
für diese Zeiträume zu erhalten.
< / p >
< / section >
<!-- 9 Drucken -->
< section id = "drucken" >
< h2 > 9. Drucken< / h2 >
< p >
In der < strong > Tabellenansicht< / strong > erscheint oben links die Schaltfläche
< em > 🖨️ Drucken< / em > . Ein Klick darauf öffnet den Druckdialog des Browsers.
< / p >
< p >
Die Schaltflächen-Leiste und der Drucken-Button werden beim Ausdruck
automatisch ausgeblendet, sodass nur die Tabelle erscheint.
< / p >
< div class = "tip-box" >
< strong > Tipp für PDF-Export:< / strong > Wählen Sie im Druckdialog
„Als PDF speichern", um die Tabelle als PDF-Datei zu exportieren.
< / div >
< / section >
<!-- 10 Hinweise & Grenzen -->
< section id = "hinweise" >
< h2 > 10. Hinweise & Grenzen< / h2 >
< table >
< thead > < tr > < th > Thema< / th > < th > Details< / th > < / tr > < / thead >
< tbody >
< tr >
< td > < strong > Messsystem< / strong > < / td >
< td > Davis VantagePro Wetterstation< / td >
< / tr >
< tr >
< td > < strong > Datenbank< / strong > < / td >
< td > PostgreSQL, Tabelle < code > weather_data< / code > < / td >
< / tr >
< tr >
< td > < strong > Messintervall< / strong > < / td >
< td > ca. 5 Minuten (Rohwerte); längere Zeiträume werden serverseitig aggregiert< / td >
< / tr >
< tr >
< td > < strong > Max. Zeitraum< / strong > < / td >
< td > 365 Tage bei benutzerdefiniertem Bereich< / td >
< / tr >
< tr >
< td > < strong > Datenlücken< / strong > < / td >
< td > Ausfälle der Station oder des Collectors erscheinen als Unterbrechung in den Kurven< / td >
< / tr >
< tr >
< td > < strong > Browserkompatibilität< / strong > < / td >
< td > Alle modernen Browser (Chrome, Firefox, Safari, Edge) in aktueller Version< / td >
< / tr >
< tr >
< td > < strong > Mobil< / strong > < / td >
< td > Die Oberfläche ist für Mobilgeräte optimiert; Zeitraum-Buttons zeigen Kurzbezeichnungen< / td >
< / tr >
< tr >
< td > < strong > Zeitzone< / strong > < / td >
< td > Alle Zeitangaben in lokaler Browserzeit (keine UTC-Umrechnung)< / td >
< / tr >
< / tbody >
< / table >
< / section >
< / div >
< footer >
< p > Wetterstation Dashboard · Stand: Mai 2026< / p >
< / footer >
< / body >
< / html >
