admin
fc35e9b6e7
- 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
491 lines
17 KiB
HTML
491 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Wetterstation – Bedienungsanleitung</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: 16px;
|
||
line-height: 1.7;
|
||
color: #1a1a2e;
|
||
background: #f5f7fa;
|
||
}
|
||
|
||
/* ── Header ── */
|
||
header {
|
||
background: linear-gradient(135deg, #1a3a5c 0%, #2d6a9f 100%);
|
||
color: #fff;
|
||
padding: 3rem 2rem 2.5rem;
|
||
text-align: center;
|
||
}
|
||
header h1 { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.5px; }
|
||
header p { margin-top: .5rem; font-size: 1.05rem; opacity: .85; }
|
||
|
||
/* ── Layout ── */
|
||
.page { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
|
||
|
||
/* ── Table of Contents ── */
|
||
.toc {
|
||
background: #fff;
|
||
border: 1px solid #dce3ec;
|
||
border-radius: 10px;
|
||
padding: 1.4rem 1.8rem;
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
.toc h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: #5a6a7a; margin-bottom: .7rem; }
|
||
.toc ol { padding-left: 1.4rem; }
|
||
.toc li { margin: .25rem 0; }
|
||
.toc a { color: #2d6a9f; text-decoration: none; }
|
||
.toc a:hover { text-decoration: underline; }
|
||
|
||
/* ── Sections ── */
|
||
section {
|
||
background: #fff;
|
||
border: 1px solid #dce3ec;
|
||
border-radius: 10px;
|
||
padding: 1.8rem 2rem;
|
||
margin-bottom: 1.8rem;
|
||
}
|
||
section h2 {
|
||
font-size: 1.35rem;
|
||
color: #1a3a5c;
|
||
border-bottom: 2px solid #e4eaf2;
|
||
padding-bottom: .5rem;
|
||
margin-bottom: 1.1rem;
|
||
}
|
||
section h3 {
|
||
font-size: 1.05rem;
|
||
color: #2d6a9f;
|
||
margin: 1.3rem 0 .5rem;
|
||
}
|
||
p { margin-bottom: .8rem; }
|
||
p:last-child { margin-bottom: 0; }
|
||
|
||
/* ── Buttons – visual replicas ── */
|
||
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
|
||
.btn {
|
||
display: inline-block;
|
||
padding: .35rem .85rem;
|
||
border-radius: 6px;
|
||
font-size: .9rem;
|
||
font-weight: 600;
|
||
border: 2px 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(180px, 1fr));
|
||
gap: .8rem;
|
||
margin: 1rem 0;
|
||
}
|
||
.chart-card {
|
||
border: 1px solid #dce3ec;
|
||
border-radius: 8px;
|
||
padding: .8rem 1rem;
|
||
background: #f9fbfd;
|
||
}
|
||
.chart-card .icon { font-size: 1.4rem; }
|
||
.chart-card strong { display: block; margin-top: .3rem; font-size: .92rem; color: #1a3a5c; }
|
||
.chart-card span { font-size: .82rem; color: #5a6a7a; }
|
||
|
||
/* ── Info boxes ── */
|
||
.info-box {
|
||
background: #eef5ff;
|
||
border-left: 4px solid #2d6a9f;
|
||
border-radius: 0 6px 6px 0;
|
||
padding: .8rem 1.1rem;
|
||
margin: 1rem 0;
|
||
font-size: .94rem;
|
||
}
|
||
.tip-box {
|
||
background: #f0faf3;
|
||
border-left: 4px solid #27ae60;
|
||
border-radius: 0 6px 6px 0;
|
||
padding: .8rem 1.1rem;
|
||
margin: 1rem 0;
|
||
font-size: .94rem;
|
||
}
|
||
.warn-box {
|
||
background: #fffbea;
|
||
border-left: 4px solid #f0a500;
|
||
border-radius: 0 6px 6px 0;
|
||
padding: .8rem 1.1rem;
|
||
margin: 1rem 0;
|
||
font-size: .94rem;
|
||
}
|
||
|
||
/* ── Table ── */
|
||
table { width: 100%; border-collapse: collapse; font-size: .93rem; margin: 1rem 0; }
|
||
th, td { padding: .55rem .8rem; border: 1px 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.1rem; text-align: center; }
|
||
|
||
/* ── Footer ── */
|
||
footer {
|
||
text-align: center;
|
||
color: #8a9ab0;
|
||
font-size: .85rem;
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
header h1 { font-size: 1.6rem; }
|
||
.page { padding: 1.2rem 1rem 3rem; }
|
||
section { padding: 1.2rem 1.1rem; }
|
||
}
|
||
|
||
@media print {
|
||
body { background: #fff; font-size: 12pt; }
|
||
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 – Bedienungsanleitung</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) – wählt den dargestellten Zeitraum.</li>
|
||
<li><strong>Diagramme / Tabelle</strong> (Mitte) – zeigt die Wetterdaten an.</li>
|
||
<li><strong>Fußzeile</strong> (unten) – zeigt Version, Build-Datum und Kontakt.</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 – 31.01.2026 23:59"</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 – unabhängig vom gewählten
|
||
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 (–60)</td></tr>
|
||
<tr><td>⬇</td><td>Fällt langsam (–20)</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> – kumulierter Regenfall als Fläche.</li>
|
||
<li><strong>Regenrate (mm/h)</strong> – aktuelle Intensität als gestrichelte Linie.</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 – die Seite flackert nicht.
|
||
</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>
|