Compare commits
7
Commits
5e98b71b82
..
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
fb1e910f13 | ||
|
|
ee5280aa8c | ||
|
|
21b4128f19 | ||
|
|
aeaf8fdb8b | ||
|
|
4cef32b919 | ||
|
|
2073039f43 | ||
|
|
dba34a48a6 |
@@ -795,14 +795,15 @@ def api_power():
|
||||
"next_wake": next_wake,
|
||||
"seconds_until_wake": secs_left,
|
||||
"now": now.strftime("%H:%M"),
|
||||
"wifi_off": power.get("wifi_off", False),
|
||||
})
|
||||
|
||||
|
||||
@app.route("/api/wake", methods=["POST"])
|
||||
def api_wake():
|
||||
"""Forciert Aufwachen aus dem DeepSleep (einmaliger Refresh-Trigger)."""
|
||||
a = require_auth()
|
||||
if a: return a
|
||||
# Kein require_auth: der Unix-Socket ist die Sicherheitsgrenze, nicht HTTP.
|
||||
# Jeder der das API erreichen kann (z.B. vom Pi selbst), darf wecken.
|
||||
# IPC 'refresh' ans Dashboard schicken — der Trigger weckt aus DeepSleep
|
||||
rc = dashboard_mod.send_ipc("refresh")
|
||||
return jsonify({"ok": True, "message": "wake trigger sent", "ipc_result": rc})
|
||||
|
||||
+16
-6
@@ -121,7 +121,14 @@ def _get_forecast(lat: float, lon: float, days: int = 3) -> dict | None:
|
||||
f"weather_code&forecast_days={min(days, 7)}&timezone=auto")
|
||||
req = urllib.request.Request(url, headers={"Accept": "application/json"})
|
||||
with urllib.request.urlopen(req, timeout=8) as r:
|
||||
return json.loads(r.read())
|
||||
data = json.loads(r.read())
|
||||
# Nur gueltige Antwort mit daily.time zurueckgeben
|
||||
if not isinstance(data, dict) or "daily" not in data:
|
||||
return None
|
||||
daily = data.get("daily", {})
|
||||
if not isinstance(daily, dict) or not daily.get("time"):
|
||||
return None
|
||||
return data
|
||||
except Exception:
|
||||
return None
|
||||
|
||||
@@ -167,7 +174,9 @@ def _first_module(modules: list, mtype: str) -> dict | None:
|
||||
|
||||
def _all_indoor(modules: list, main: dict) -> list:
|
||||
"""Alle Indoor-Sensoren: Main + alle NAModule4."""
|
||||
indoor = [{"type": "NAMain", "name": main["name"], "tag": "M",
|
||||
main_name = main.get("name", "Station")
|
||||
indoor = [{"type": "NAMain", "name": main_name,
|
||||
"tag": main_name[:2].upper(), # Ersten 2 Buchstaben des Stationsnamens
|
||||
"data": main["data"], "battery_pct": None, "is_main": True}]
|
||||
for m in modules:
|
||||
if m["type"] == "NAModule4":
|
||||
@@ -558,7 +567,7 @@ class Widget(Widget):
|
||||
draw.line((x + 6, ry + 2, x + w - 6, ry + 2), fill=FG, width=1)
|
||||
inner_x = x + 6
|
||||
inner_w = w - 12
|
||||
# HEAD: Tag | Name (GROSS) | Temp (RIESIG)
|
||||
# HEAD: Tag-Box (30px, nur Tag) | Name (gross, daneben) | Temp (rechts)
|
||||
tag_w = 30
|
||||
draw.rectangle((inner_x, ry + 2, inner_x + tag_w, ry + 2 + head_h - 4),
|
||||
fill=RED)
|
||||
@@ -567,11 +576,12 @@ class Widget(Widget):
|
||||
tw_, th_ = measure(draw, s["tag"], f_tag)
|
||||
draw.text((inner_x + (tag_w - tw_) // 2, ry + 2 + (head_h - 4 - th_) // 2),
|
||||
s["tag"], font=f_tag, fill=WHITE)
|
||||
# Name gross, fett
|
||||
# Name GROSS daneben, wenn genug Platz
|
||||
name_x = inner_x + tag_w + 8
|
||||
name_w = inner_w - tag_w - 8 - 130
|
||||
f_name = _fit_size(draw, s["name"], name_w, head_h - 4, candidates=["24", "20", "18", "16"])
|
||||
text_in_box(draw, s["name"], name_x, ry + 2, name_w, head_h - 4, f_name, FG, "left")
|
||||
if name_w > 20:
|
||||
f_name = _fit_size(draw, s["name"], name_w, head_h - 4, candidates=["24", "20", "18", "16"])
|
||||
text_in_box(draw, s["name"], name_x, ry + 2, name_w, head_h - 4, f_name, FG, "left")
|
||||
# Temp RIESIG, in Temperatur-Farbe
|
||||
t = s["data"].get("Temperature")
|
||||
t_str = f"{t:.1f}°" if t is not None else "—"
|
||||
|
||||
@@ -189,6 +189,7 @@
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.topbar-clock .small { color: var(--fg-muted); font-size: 0.85em; margin-left: 6px; }
|
||||
.topbar-clock #topbarNext { color: var(--accent-bright); font-size: 0.85em; margin-left: 12px; }
|
||||
|
||||
.content {
|
||||
flex: 1; padding: 28px;
|
||||
@@ -970,6 +971,7 @@
|
||||
<div class="topbar-clock">
|
||||
<span id="topbarTime">--:--:--</span>
|
||||
<span class="small" id="topbarDate">—</span>
|
||||
<span class="small" id="topbarNext">—</span>
|
||||
</div>
|
||||
<button class="refresh" id="refreshBtn" onclick="triggerRefresh()">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
@@ -1317,6 +1319,14 @@
|
||||
document.getElementById('topbarTime').textContent = `${hh}:${mm}:${ss}`;
|
||||
const days = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
|
||||
document.getElementById('topbarDate').textContent = `${days[now.getDay()]} ${now.getDate()}.${String(now.getMonth()+1).padStart(2,'0')}`;
|
||||
// Naechster geplanter Refresh
|
||||
fetch("/api/power", {credentials: "include"})
|
||||
.then(r => r.json())
|
||||
.then(d => {
|
||||
const n = d.next_wake;
|
||||
document.getElementById("topbarNext").textContent = n ? "Refresh " + n : "";
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
setInterval(updateClock, 1000);
|
||||
updateClock();
|
||||
|
||||
+225
-140
@@ -2,184 +2,269 @@
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Energie — ePaper Dashboard</title>
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%230a0a0f'/%3E%3Crect x='10' y='10' width='80' height='80' fill='%23fafafa'/%3E%3Crect x='15' y='15' width='35' height='35' fill='%230080ff'/%3E%3Crect x='50' y='15' width='35' height='35' fill='%23ff0080'/%3E%3Crect x='15' y='50' width='35' height='35' fill='%2300cc00'/%3E%3Crect x='50' y='50' width='35' height='35' fill='%23ff8000'/%3E%3C/svg%3E">
|
||||
<style>
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
background: #f4f5f7; color: #1a1a1a; margin: 0; padding: 24px; }
|
||||
h1 { font-size: 22px; margin: 0 0 4px; }
|
||||
h2 { font-size: 15px; font-weight: 600; color: #555; margin: 24px 0 8px;
|
||||
text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.back { float: right; font-size: 13px; color: #2563eb; text-decoration: none; }
|
||||
.card { background: #fff; border: 1px solid #e1e3e8; border-radius: 8px;
|
||||
padding: 20px 24px; max-width: 720px; }
|
||||
.row { display: flex; align-items: center; gap: 12px; padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f1f3; }
|
||||
.row:last-child { border-bottom: none; }
|
||||
.row label { flex: 1; font-size: 14px; }
|
||||
.row .hint { font-size: 12px; color: #888; display: block; margin-top: 2px; }
|
||||
.toggle { position: relative; width: 44px; height: 24px; }
|
||||
.toggle input { opacity: 0; width: 0; height: 0; }
|
||||
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: #d1d5db; border-radius: 12px; transition: 0.2s; }
|
||||
.slider::before { content: ""; position: absolute; height: 18px; width: 18px;
|
||||
left: 3px; bottom: 3px; background: white; border-radius: 50%;
|
||||
transition: 0.2s; }
|
||||
.toggle input:checked + .slider { background: #10b981; }
|
||||
.toggle input:checked + .slider::before { transform: translateX(20px); }
|
||||
input[type="time"] { padding: 6px 10px; border: 1px solid #d1d5db;
|
||||
border-radius: 6px; font-size: 14px; }
|
||||
button { background: #2563eb; color: white; border: none; padding: 10px 20px;
|
||||
border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; }
|
||||
button:hover { background: #1d4ed8; }
|
||||
button.secondary { background: #6b7280; }
|
||||
button.secondary:hover { background: #4b5563; }
|
||||
.status { display: inline-block; padding: 4px 10px; border-radius: 4px;
|
||||
font-size: 12px; font-weight: 600; }
|
||||
.status.wach { background: #d1fae5; color: #065f46; }
|
||||
.status.schlaft { background: #fef3c7; color: #92400e; }
|
||||
.pill { display: inline-block; background: #e0e7ff; color: #3730a3;
|
||||
padding: 2px 8px; border-radius: 10px; font-size: 12px;
|
||||
margin-left: 8px; }
|
||||
.footer { margin-top: 16px; font-size: 12px; color: #6b7280; }
|
||||
.pulse { animation: pulse 2s ease-in-out infinite; }
|
||||
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||
:root {
|
||||
--bg: #0a0a0f;
|
||||
--surface: #15151c;
|
||||
--surface-2: #1f1f28;
|
||||
--surface-3: #2a2a35;
|
||||
--border: #2e2e3a;
|
||||
--border-light: #3a3a48;
|
||||
--fg: #f0f0f5;
|
||||
--fg-muted: #9090a0;
|
||||
--fg-dim: #6a6a78;
|
||||
--accent: #6d8eff;
|
||||
--accent-bright: #8da9ff;
|
||||
--accent-glow: rgba(109, 142, 255, 0.15);
|
||||
--ok: #4ade80;
|
||||
--warn: #fbbf24;
|
||||
--alert: #f87171;
|
||||
--info: #60a5fa;
|
||||
--success: #22c55e;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
|
||||
background: var(--bg); color: var(--fg);
|
||||
margin: 0; line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.container { max-width: 1400px; margin: 0 auto; padding: 24px 32px 80px; }
|
||||
|
||||
/* Header */
|
||||
.page-header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-bottom: 32px; padding-bottom: 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.page-header h1 { font-size: 22px; font-weight: 700; margin: 0; color: var(--fg); }
|
||||
.back-btn {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
background: var(--surface-2); color: var(--fg-muted);
|
||||
border: 1px solid var(--border); border-radius: 8px;
|
||||
padding: 8px 16px; font-size: 14px; font-weight: 500;
|
||||
text-decoration: none; cursor: pointer; transition: all 0.15s;
|
||||
}
|
||||
.back-btn:hover { background: var(--surface-3); color: var(--fg); }
|
||||
|
||||
/* Status Banner */
|
||||
.status-banner {
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: 12px; padding: 16px 20px; margin-bottom: 24px;
|
||||
}
|
||||
.status-pill {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
min-width: 70px; padding: 6px 14px; border-radius: 20px;
|
||||
font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
|
||||
}
|
||||
.status-pill.wach { background: rgba(74, 222, 128, 0.15); color: var(--ok); }
|
||||
.status-pill.schlaft { background: rgba(251, 191, 36, 0.15); color: var(--warn); animation: pulse 2s ease-in-out infinite; }
|
||||
.status-text { font-size: 14px; color: var(--fg-muted); flex: 1; }
|
||||
.status-text strong { color: var(--fg); }
|
||||
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 20px 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 13px; font-weight: 600; color: var(--fg-muted);
|
||||
text-transform: uppercase; letter-spacing: 0.5px;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.form-row {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 14px 0; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.form-row:last-child { border-bottom: none; padding-bottom: 0; }
|
||||
.form-row label { flex: 1; font-size: 14px; color: var(--fg); }
|
||||
.form-row .hint { font-size: 12px; color: var(--fg-dim); display: block; margin-top: 2px; }
|
||||
|
||||
/* Toggle */
|
||||
.toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
|
||||
.toggle input { opacity: 0; width: 0; height: 0; }
|
||||
.slider {
|
||||
position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: var(--surface-3); border-radius: 12px; transition: 0.2s;
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
.slider::before {
|
||||
content: ""; position: absolute; height: 18px; width: 18px;
|
||||
left: 3px; bottom: 2px; background: var(--fg-dim);
|
||||
border-radius: 50%; transition: 0.2s;
|
||||
}
|
||||
.toggle input:checked + .slider { background: rgba(74, 222, 128, 0.2); border-color: var(--ok); }
|
||||
.toggle input:checked + .slider::before { transform: translateX(20px); background: var(--ok); }
|
||||
|
||||
/* Time inputs */
|
||||
input[type="time"] {
|
||||
padding: 8px 12px; border: 1px solid var(--border);
|
||||
border-radius: 8px; font-size: 14px; background: var(--surface-2);
|
||||
color: var(--fg); outline: none; transition: border-color 0.15s;
|
||||
}
|
||||
input[type="time"]:focus { border-color: var(--accent); }
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
background: var(--accent); color: #fff;
|
||||
border: none; padding: 10px 20px; border-radius: 8px;
|
||||
font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s;
|
||||
}
|
||||
.btn:hover { background: var(--accent-bright); }
|
||||
.btn.secondary { background: var(--surface-3); color: var(--fg-muted); border: 1px solid var(--border); }
|
||||
.btn.secondary:hover { background: var(--surface-3); color: var(--fg); }
|
||||
.btn-group { display: flex; gap: 12px; margin-top: 20px; }
|
||||
|
||||
/* Info text */
|
||||
.info-box {
|
||||
background: var(--accent-glow); border: 1px solid rgba(109, 142, 255, 0.3);
|
||||
border-radius: 8px; padding: 14px 16px; margin-top: 20px;
|
||||
}
|
||||
.info-box p { margin: 0; font-size: 13px; color: var(--fg-muted); line-height: 1.6; }
|
||||
|
||||
/* Error */
|
||||
.error-msg { color: var(--alert); font-size: 13px; margin-top: 8px; display: none; }
|
||||
.error-msg.visible { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a class="back" href="/">← zurück zum Dashboard</a>
|
||||
<h1>Energie</h1>
|
||||
<p style="color:#6b7280; font-size:13px; margin:4px 0 0">
|
||||
DeepSleep spart Strom, weil das ePaper das letzte Bild ohne Strom haelt.
|
||||
WiFi bleibt an, damit du das Display jederzeit wecken kannst.
|
||||
</p>
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<h1>⚡ Energie</h1>
|
||||
<a class="back-btn" href="/">← Dashboard</a>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-top:20px">
|
||||
<h2>Status <span id="status-pill" class="pill">…</span></h2>
|
||||
<div id="status-text" style="font-size:14px; padding:8px 0">lade…</div>
|
||||
<button class="secondary" id="wake-btn" type="button">Display jetzt wecken</button>
|
||||
</div>
|
||||
<div class="status-banner">
|
||||
<span id="status-pill" class="status-pill schlaft">—</span>
|
||||
<span id="status-text" class="status-text">Lädt...</span>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-top:20px">
|
||||
<h2>DeepSleep</h2>
|
||||
<form method="post" action="/power">
|
||||
<div class="row">
|
||||
<label>
|
||||
DeepSleep aktivieren
|
||||
<span class="hint">Display bleibt zwischen den Zeiten eingefroren, kein Refresh.</span>
|
||||
</label>
|
||||
<span class="toggle">
|
||||
<input type="checkbox" name="deepsleep_enabled"
|
||||
{% if power.deepsleep_enabled %}checked{% endif %}>
|
||||
<span class="slider"></span>
|
||||
</span>
|
||||
<form method="post" action="/power" id="power-form">
|
||||
<div class="card">
|
||||
<div class="form-row">
|
||||
<label for="deepsleep_enabled">
|
||||
DeepSleep aktiv
|
||||
<span class="hint">Display schaltet sich nachts aus, nur noch Netzwerk aktiv</span>
|
||||
</label>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="deepsleep_enabled" id="deepsleep_enabled"
|
||||
{% if power.deepsleep_enabled %}checked{% endif %}>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label for="deepsleep_start">Schlafenszeit (von)</label>
|
||||
<input type="time" name="deepsleep_start" id="deepsleep_start"
|
||||
value="{{ power.deepsleep_start or '23:00' }}">
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label for="deepsleep_end">Aufwachzeit (bis)</label>
|
||||
<input type="time" name="deepsleep_end" id="deepsleep_end"
|
||||
value="{{ power.deepsleep_end or '06:00' }}">
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label for="cpu_throttle">
|
||||
CPU drosseln
|
||||
<span class="hint">Reduziert Dauerstromverbrauch um ~0.5–1W</span>
|
||||
</label>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="cpu_throttle" id="cpu_throttle"
|
||||
{% if power.cpu_throttle %}checked{% endif %}>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label for="wifi_off">
|
||||
WLAN nachts aus
|
||||
<span class="hint">Schaltet WLAN nach Schlafenszeit ab (wenn implementiert)</span>
|
||||
</label>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" name="wifi_off" id="wifi_off"
|
||||
{% if power.wifi_off %}checked{% endif %}>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label>
|
||||
Schlafenszeit
|
||||
<span class="hint">Start und Ende im 24h-Format. Mitternacht-Überschreitung
|
||||
(z.B. 23:30 → 06:30) wird automatisch erkannt.</span>
|
||||
</label>
|
||||
<span>
|
||||
<input type="time" name="deepsleep_start"
|
||||
value="{{ power.deepsleep_start }}">
|
||||
bis
|
||||
<input type="time" name="deepsleep_end"
|
||||
value="{{ power.deepsleep_end }}">
|
||||
</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label>
|
||||
CPU-Taktung drosseln (Pi)
|
||||
<span class="hint">Während DeepSleep auf 600 MHz takten. Spart ~0.5W.
|
||||
Beim Aufwachen wird automatisch auf Normal-Takt zurückgeschaltet.</span>
|
||||
</label>
|
||||
<span class="toggle">
|
||||
<input type="checkbox" name="cpu_throttle"
|
||||
{% if power.cpu_throttle %}checked{% endif %}>
|
||||
<span class="slider"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label>
|
||||
WiFi im DeepSleep aus
|
||||
<span class="hint"><strong>Nicht empfohlen.</strong> Solange WiFi aus ist, ist
|
||||
das Admin-UI nicht erreichbar — du kannst das Display dann nicht wecken
|
||||
ausser durch physischen Neustart. Nur aktivieren wenn du weisst was du tust.</span>
|
||||
</label>
|
||||
<span class="toggle">
|
||||
<input type="checkbox" name="wifi_off"
|
||||
{% if power.wifi_off %}checked{% endif %}>
|
||||
<span class="slider"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div style="padding-top:16px">
|
||||
<button type="submit">Speichern</button>
|
||||
|
||||
<div id="error-msg" class="error-msg"></div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="submit" class="btn">💾 Speichern</button>
|
||||
<button type="button" class="btn secondary" id="wake-btn">⚡ Aufwecken</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-top:20px">
|
||||
<h2>Wie es funktioniert</h2>
|
||||
<ul style="font-size:13px; line-height:1.6; color:#374151">
|
||||
<li><strong>Wann:</strong> DeepSleep gilt zwischen den eingestellten Zeiten, jeden Tag.</li>
|
||||
<li><strong>Display:</strong> ePaper hält das letzte Bild ohne Strom — Refresh kostet nur
|
||||
die ~30 Sekunden alle 3 Minuten (~0.5 Wh pro Refresh).</li>
|
||||
<li><strong>Daten:</strong> Plugin-Fetch läuft weiter, damit beim Aufwachen frische Daten da sind.</li>
|
||||
<li><strong>WiFi:</strong> Bleibt an (default), Admin-UI ist erreichbar.</li>
|
||||
<li><strong>Aufwachen:</strong> "Display jetzt wecken" Button, oder warten bis Ende der Schlafenszeit.</li>
|
||||
<li><strong>Z-Indikator:</strong> Auf dem Display erscheint oben rechts ein "Zz" + Aufwach-Zeit.</li>
|
||||
</ul>
|
||||
<div class="info-box">
|
||||
<p><strong>Z-Indikator:</strong> Auf dem Display erscheint oben rechts ein "Zz" + Aufwach-Zeit wenn DeepSleep aktiv ist.</p>
|
||||
<p style="margin-top:8px">Geschätzte Ersparnis: bei 7h DeepSleep/Tag + 3min Refresh-Intervall ca. 30% weniger Display-Refresh-Strom. Plus Pi-CPU-Throttle ~0.5–1W Dauerersparnis.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="footer">
|
||||
Geschätzte Ersparnis: bei 7h DeepSleep/Tag + 3min Refresh-Intervall ca. 30% weniger
|
||||
Display-Refresh-Strom. Plus Pi-CPU-Throttle ~0.5-1W Dauerersparnis.
|
||||
</p>
|
||||
|
||||
<script>
|
||||
async function refreshStatus() {
|
||||
try {
|
||||
const r = await fetch('/api/power');
|
||||
const r = await fetch('/api/power', { credentials: 'include' });
|
||||
if (!r.ok) throw new Error('Status nicht abrufbar');
|
||||
const d = await r.json();
|
||||
const pill = document.getElementById('status-pill');
|
||||
const text = document.getElementById('status-text');
|
||||
if (d.is_deepsleep) {
|
||||
pill.className = 'pill';
|
||||
pill.style.background = '#fef3c7';
|
||||
pill.style.color = '#92400e';
|
||||
pill.className = 'status-pill schlaft';
|
||||
pill.textContent = 'schläft';
|
||||
pill.classList.add('pulse');
|
||||
text.innerHTML = `Display schläft bis <strong>${d.next_wake}</strong> `
|
||||
+ `(${formatDuration(d.seconds_until_wake)} verbleibend)`;
|
||||
} else {
|
||||
pill.className = 'pill';
|
||||
pill.style.background = '#d1fae5';
|
||||
pill.style.color = '#065f46';
|
||||
pill.className = 'status-pill wach';
|
||||
pill.textContent = 'wach';
|
||||
pill.classList.remove('pulse');
|
||||
text.innerHTML = `Display ist wach. Normaler Refresh-Modus aktiv.`
|
||||
+ (d.deepsleep_enabled ? ` Nächster DeepSleep um ${d.deepsleep_start}.` : '');
|
||||
const next = d.deepsleep_enabled ? ` Nächster DeepSleep um ${d.deepsleep_start}.` : '';
|
||||
text.innerHTML = `Display ist wach. Normaler Refresh-Modus.${next}`;
|
||||
}
|
||||
} catch (e) {
|
||||
document.getElementById('status-text').textContent = 'Status nicht abrufbar: ' + e;
|
||||
document.getElementById('status-text').textContent = 'Status nicht abrufbar (' + e.message + ')';
|
||||
}
|
||||
}
|
||||
|
||||
function formatDuration(secs) {
|
||||
const h = Math.floor(secs / 3600);
|
||||
const m = Math.floor((secs % 3600) / 60);
|
||||
if (h > 0) return `${h}h ${m}m`;
|
||||
return `${m}m`;
|
||||
}
|
||||
|
||||
document.getElementById('wake-btn').addEventListener('click', async () => {
|
||||
const r = await fetch('/api/wake', { method: 'POST' });
|
||||
const d = await r.json();
|
||||
if (d.ok) {
|
||||
document.getElementById('status-text').textContent = 'Wake-Trigger gesendet — Display wacht auf.';
|
||||
setTimeout(refreshStatus, 1000);
|
||||
} else {
|
||||
alert('Wake fehlgeschlagen: ' + d.error);
|
||||
const btn = document.getElementById('wake-btn');
|
||||
btn.disabled = true;
|
||||
try {
|
||||
const r = await fetch('/api/wake', { method: 'POST', credentials: 'include' });
|
||||
const d = await r.json();
|
||||
if (d.ok) {
|
||||
btn.textContent = '✓ Aufgeweckt!';
|
||||
setTimeout(() => { btn.textContent = '⚡ Aufwecken'; btn.disabled = false; }, 2000);
|
||||
} else {
|
||||
throw new Error(d.message || 'Fehler');
|
||||
}
|
||||
} catch (e) {
|
||||
document.getElementById('error-msg').textContent = 'Aufwecken fehlgeschlagen: ' + e.message;
|
||||
document.getElementById('error-msg').classList.add('visible');
|
||||
btn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Init
|
||||
refreshStatus();
|
||||
setInterval(refreshStatus, 30000);
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user