Projektwoche/smart-mirror
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

release-3.0

Browse Source
This commit is contained in:
Dennis Lux
2026-05-02 21:02:10 +02:00
parent 1171de2790
commit 62c0d1acf7
3 changed files with 269 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
raspi/templates/dashboard.html
View File

@@ -7,18 +7,16 @@
data-sensors="{{ sensors_json | e }}"
data-location="{{ location_json | e }}">
<!-- ══════════════════════════════════════
VIEW TOGGLE (tiny, hidden in corner)
══════════════════════════════════════ -->
<button id="view-toggle" title="Ansicht wechseln" onclick="toggleView()">
<!-- Hidden toggle button, bottom-right corner -->
<button id="view-toggle" title="Ansicht wechseln (F2)" onclick="toggleView()">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M2 3h5v5H2V3zm7 0h5v5H9V3zm-7 7h5v3H2v-3zm7 0h5v3H9v-3z"/>
<path d="M1 2h6v6H1V2zm8 0h6v6H9V2zm-8 8h6v4H1v-4zm8 0h6v4H9v-4z"/>
</svg>
</button>
<!-- ══════════════════════════════════════
<!-- ══════════════════════════════
DEV VIEW
══════════════════════════════════════ -->
══════════════════════════════ -->
<div id="view-dev">
<div class="mirror-layout">
@@ -27,7 +25,7 @@
<div class="brand-icon">🪞</div>
<div>
<div class="brand-name">{{ title }}</div>
<div class="brand-sub">Arduino Wetterstation</div>
<div class="brand-sub">Entwickleransicht · Arduino USB</div>
</div>
</div>
<div class="mirror-clock">
@@ -89,7 +87,7 @@
<div class="stat-card-icon teal">🔌</div>
<div class="stat-info">
<div class="stat-label">Verbindung</div>
<div class="stat-value" id="stat-port" style="font-size:.9rem">—</div>
<div class="stat-value" id="stat-port" style="font-size:.85rem">—</div>
<div class="stat-sub" id="stat-baud">—</div>
</div>
</div>
@@ -103,6 +101,7 @@
<canvas id="chart"></canvas>
</div>
<!-- Log panel: flex column with fixed scroll body — never expands page -->
<div class="log-panel card">
<div class="tab-bar">
<div class="tab active" data-tab="log" onclick="switchTab('log')">Rohdaten</div>
@@ -134,9 +133,9 @@
</div><!-- /view-dev -->
<!-- ══════════════════════════════════════
<!-- ══════════════════════════════
CONSUMER VIEW
══════════════════════════════════════ -->
══════════════════════════════ -->
<div id="view-consumer">
<div class="consumer-wrap">
@@ -148,67 +147,66 @@
<div class="c-divider"></div>
<!-- Weather -->
<!-- Weather (outside) -->
<div class="c-weather">
<div class="c-location" id="c-location">—</div>
<div class="c-location">
<span id="c-location">—</span>
&nbsp;·&nbsp;
<span class="c-provider">Open-Meteo</span>
</div>
<div class="c-weather-main">
<div class="c-weather-icon" id="c-icon">—</div>
<div class="c-temp-outside" id="c-temp-out">—°</div>
</div>
<div class="c-weather-desc" id="c-desc">Wetterdaten werden geladen …</div>
<div class="c-rain-forecast" id="c-rain-forecast"></div>
</div>
<!-- Stat pills -->
<!-- Stat grid: 3 × 2, no emojis, coloured values -->
<div class="c-stats">
<!-- Arduino Temp -->
<div class="c-stat">
<div class="c-stat-icon">🌡️</div>
<div class="c-stat-val loading" id="c-sensor-temp">—</div>
<div class="c-stat-label">Innen Temp.</div>
<span class="c-stat-source">Sensor</span>
<div class="c-stat-val col-temp loading" id="c-sensor-temp">—</div>
<div class="c-stat-label">Innentemperatur</div>
</div>
<!-- Arduino Humidity -->
<div class="c-stat">
<div class="c-stat-icon">💧</div>
<div class="c-stat-val loading" id="c-sensor-hum">—</div>
<div class="c-stat-label">Luftfeucht.</div>
<span class="c-stat-source">Sensor</span>
<div class="c-stat-val col-hum loading" id="c-sensor-hum">—</div>
<div class="c-stat-label">Innenfeuchte</div>
</div>
<!-- Weather humidity (outside) -->
<div class="c-stat">
<div class="c-stat-icon">🌬️</div>
<div class="c-stat-val loading" id="c-humidity">—</div>
<div class="c-stat-label">Außen Feuchte</div>
<span class="c-stat-source">Open-Meteo</span>
<div class="c-stat-val col-hum-out loading" id="c-humidity">—</div>
<div class="c-stat-label">Außenfeuchte</div>
</div>
<!-- Rain probability -->
<div class="c-stat">
<div class="c-stat-icon">🌧️</div>
<div class="c-stat-val loading" id="c-rain">—</div>
<span class="c-stat-source">Open-Meteo</span>
<div class="c-stat-val col-rain loading" id="c-rain">—</div>
<div class="c-stat-label">Regenwahrsch.</div>
<div class="c-rain-bar-wrap">
<div class="c-rain-bar" id="c-rain-bar" style="width:0%"></div>
</div>
</div>
<!-- Feels like -->
<div class="c-stat">
<div class="c-stat-icon">🧥</div>
<div class="c-stat-val loading" id="c-feels">—</div>
<span class="c-stat-source">Open-Meteo</span>
<div class="c-stat-val col-feels loading" id="c-feels">—</div>
<div class="c-stat-label">Gefühlt</div>
</div>
<!-- Wind -->
<div class="c-stat">
<div class="c-stat-icon">💨</div>
<div class="c-stat-val loading" id="c-wind">—</div>
<span class="c-stat-source">Open-Meteo</span>
<div class="c-stat-val col-wind loading" id="c-wind">—</div>
<div class="c-stat-label">Wind</div>
</div>
</div><!-- /c-stats -->
</div>
</div><!-- /consumer-wrap -->
</div>
</div><!-- /view-consumer -->
</div><!-- /mirror-root -->