rasmus/sensor-pico
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AI update

Browse Source
This commit is contained in:
rasmus
2026-03-27 22:27:32 +01:00
parent 2a29f6667e
commit e8f90661d3
9 changed files with 963 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
fs/index.html
View File

@@ -1,16 +1,290 @@
<!DOCTYPE html>
<html lang="en">
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Config</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sensor Pico</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
background: #0d1117;
color: #c9d1d9;
min-height: 100vh;
display: flex;
flex-direction: column;
padding: 24px 20px;
max-width: 400px;
margin: 0 auto;
}
/* ── Top bar ─────────────────────────────── */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 36px;
}
.topbar-title {
font-size: 15px;
font-weight: 600;
color: #f0f6fc;
letter-spacing: -0.2px;
}
.topbar-sub {
font-size: 11px;
color: #484f58;
margin-top: 1px;
}
.settings-btn {
width: 36px;
height: 36px;
background: #161b22;
border: 1px solid #30363d;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 17px;
transition: border-color 0.15s, background 0.15s;
flex-shrink: 0;
}
.settings-btn:hover { border-color: #8b949e; background: #1c2230; }
/* ── Metrics ─────────────────────────────── */
.metrics { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.metric {
background: #161b22;
border: 1px solid #30363d;
border-radius: 12px;
padding: 20px 22px;
display: flex;
align-items: center;
justify-content: space-between;
}
.metric-label {
font-size: 12px;
color: #8b949e;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 4px;
}
.metric-icon { font-size: 22px; opacity: 0.7; }
.metric-value {
font-size: 36px;
font-weight: 300;
color: #f0f6fc;
letter-spacing: -1px;
line-height: 1;
}
.metric-value.loading { color: #30363d; }
.metric-unit {
font-size: 14px;
color: #8b949e;
font-weight: 400;
margin-left: 3px;
vertical-align: super;
font-size: 13px;
}
/* ── Status bar ──────────────────────────── */
.statusbar {
display: flex;
align-items: center;
gap: 8px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #21262d;
}
.dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #3fb950;
flex-shrink: 0;
}
.dot.offline { background: #484f58; animation: none; }
.dot.live { animation: pulse 2s infinite; }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.status-text { font-size: 12px; color: #484f58; }
.status-time { font-size: 12px; color: #484f58; margin-left: auto; }
/* ── Settings overlay ────────────────────── */
.overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
z-index: 10;
}
.overlay.open { opacity: 1; pointer-events: all; }
.sheet {
position: fixed;
left: 0; right: 0; bottom: 0;
background: #161b22;
border-top: 1px solid #30363d;
border-radius: 16px 16px 0 0;
padding: 20px;
max-width: 400px;
margin: 0 auto;
transform: translateY(100%);
transition: transform 0.25s cubic-bezier(0.32,0.72,0,1);
z-index: 20;
}
.sheet.open { transform: translateY(0); }
.sheet-handle {
width: 32px;
height: 3px;
background: #30363d;
border-radius: 2px;
margin: 0 auto 20px;
}
.sheet-title {
font-size: 13px;
font-weight: 600;
color: #8b949e;
text-transform: uppercase;
letter-spacing: 0.7px;
margin-bottom: 14px;
}
.sheet-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background: #0d1117;
border: 1px solid #30363d;
border-radius: 10px;
text-decoration: none;
color: #c9d1d9;
font-size: 14px;
margin-bottom: 8px;
transition: border-color 0.15s;
}
.sheet-link:hover { border-color: #8b949e; }
.sheet-link:last-of-type { margin-bottom: 0; }
.sheet-arrow { color: #484f58; font-size: 16px; }
</style>
</head>
<body>
<h1>Sensor Pico</h1>
<br>
<a href="live_stats.html">Live Daten</a>
<br>
<a href="wlan_config.html">WLAN Config</a>
<br>
<a href="mqtt_config.html">MQTT und Messungs Config</a>
<div class="topbar">
<div>
<div class="topbar-title">Sensor Pico</div>
<div class="topbar-sub">BME280</div>
</div>
<div class="settings-btn" onclick="openSettings()">&#9881;</div>
</div>
<div class="metrics">
<div class="metric">
<div>
<div class="metric-label">Temperatur</div>
<div>
<span class="metric-value loading" id="temp">--</span>
<span class="metric-unit">&deg;C</span>
</div>
</div>
<span class="metric-icon">&#127777;</span>
</div>
<div class="metric">
<div>
<div class="metric-label">Luftfeuchtigkeit</div>
<div>
<span class="metric-value loading" id="hum">--</span>
<span class="metric-unit">%</span>
</div>
</div>
<span class="metric-icon">&#128167;</span>
</div>
<div class="metric">
<div>
<div class="metric-label">Luftdruck</div>
<div>
<span class="metric-value loading" id="press">--</span>
<span class="metric-unit">hPa</span>
</div>
</div>
<span class="metric-icon">&#128262;</span>
</div>
</div>
<div class="statusbar">
<div class="dot offline" id="dot"></div>
<span class="status-text" id="status">Verbinde&hellip;</span>
<span class="status-time" id="time"></span>
</div>
<!-- Settings sheet -->
<div class="overlay" id="overlay" onclick="closeSettings()"></div>
<div class="sheet" id="sheet">
<div class="sheet-handle"></div>
<div class="sheet-title">Einstellungen</div>
<a href="wlan_config.html" class="sheet-link">
WLAN konfigurieren
<span class="sheet-arrow">&#8250;</span>
</a>
<a href="mqtt_config.html" class="sheet-link">
MQTT &amp; Messung
<span class="sheet-arrow">&#8250;</span>
</a>
</div>
<script>
function openSettings() {
document.getElementById('overlay').classList.add('open');
document.getElementById('sheet').classList.add('open');
}
function closeSettings() {
document.getElementById('overlay').classList.remove('open');
document.getElementById('sheet').classList.remove('open');
}
function pad(n) { return n < 10 ? '0' + n : n; }
function fetchData() {
fetch('/sensor-data.json')
.then(function(r) { return r.json(); })
.then(function(d) {
var t = document.getElementById('temp');
var h = document.getElementById('hum');
var p = document.getElementById('press');
t.textContent = d.temperature.toFixed(1);
h.textContent = d.humidity.toFixed(1);
p.textContent = d.pressure.toFixed(1);
t.classList.remove('loading');
h.classList.remove('loading');
p.classList.remove('loading');
var dot = document.getElementById('dot');
dot.className = 'dot live';
document.getElementById('status').textContent = 'Live';
var now = new Date();
document.getElementById('time').textContent =
pad(now.getHours()) + ':' + pad(now.getMinutes()) + ':' + pad(now.getSeconds());
})
.catch(function() {
var dot = document.getElementById('dot');
dot.className = 'dot offline';
document.getElementById('status').textContent = 'Keine Daten';
document.getElementById('time').textContent = '';
});
}
fetchData();
setInterval(fetchData, 3000);
</script>
</body>
</html>

4
fs/live_stats.html
View File

@@ -0,0 +1,4 @@
<!DOCTYPE html>
<html>
<head><meta http-equiv="refresh" content="0; url=/"></head>
</html>

217
fs/mqtt_config.html
View File

@@ -1,32 +1,189 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Konfiguration</title>
</head>
<body>
<h1>MQTT Konfiguration</h1>
<form action="/mqtt-config" method="post">
<label>MQTT Adresse:</label>
<input type="text" name="mqtt-address">
<br>
<label>MQTT Port:</label>
<input type="number" name="mqtt-port">
<br>
<label>MQTT User:</label>
<input type="text" name="mqtt-user">
<br>
<label>MQTT Passwort:</label>
<input type="password" name="mqtt-password">
<br>
<label>Messfrequenz (ms)</label>
<input type="number" name="measure-frequency">
<br>
<label>Pushfrequenz (s)</label>
<input type="number" name="push-frequency">
<br>
<input type="submit" value="Speichern">
</form>
</body>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MQTT Konfiguration</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
background: #0d1117;
color: #c9d1d9;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.container { width: 100%; max-width: 420px; }
.back {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #8b949e;
text-decoration: none;
margin-bottom: 24px;
transition: color 0.15s;
}
.back:hover { color: #388bfd; }
.card {
background: #161b22;
border: 1px solid #30363d;
border-radius: 12px;
padding: 28px;
}
.card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.card-icon {
width: 40px;
height: 40px;
background: #2d2016;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
h1 {
font-size: 18px;
font-weight: 600;
color: #f0f6fc;
}
.card-subtitle {
font-size: 12px;
color: #8b949e;
margin-top: 2px;
}
.section-label {
font-size: 11px;
font-weight: 600;
color: #484f58;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 14px;
}
.form-group { margin-bottom: 16px; }
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 16px;
}
label {
display: block;
font-size: 13px;
font-weight: 500;
color: #8b949e;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
input[type="text"],
input[type="password"],
input[type="number"] {
width: 100%;
background: #0d1117;
border: 1px solid #30363d;
border-radius: 8px;
padding: 10px 12px;
font-size: 14px;
color: #f0f6fc;
outline: none;
transition: border-color 0.15s;
font-family: inherit;
}
input:focus { border-color: #388bfd; }
input::placeholder { color: #484f58; }
.divider {
border: none;
border-top: 1px solid #30363d;
margin: 22px 0;
}
.input-hint {
font-size: 11px;
color: #484f58;
margin-top: 4px;
}
button[type="submit"] {
width: 100%;
background: #238636;
border: 1px solid #2ea043;
border-radius: 8px;
padding: 11px;
font-size: 14px;
font-weight: 500;
color: #fff;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
font-family: inherit;
}
button[type="submit"]:hover {
background: #2ea043;
border-color: #3fb950;
}
button[type="submit"]:active { background: #1a7f37; }
</style>
</head>
<body>
<div class="container">
<a href="/" class="back">&#8592; Zurück</a>
<div class="card">
<div class="card-header">
<div class="card-icon">&#9881;</div>
<div>
<h1>MQTT &amp; Messung</h1>
<p class="card-subtitle">Broker und Intervalle konfigurieren</p>
</div>
</div>
<form action="/mqtt-config" method="post">
<p class="section-label">Broker</p>
<div class="form-row">
<div>
<div class="form-group">
<label for="mqtt-address">Adresse</label>
<input type="text" id="mqtt-address" name="mqtt-address" placeholder="192.168.1.100" autocomplete="off">
</div>
</div>
<div>
<div class="form-group">
<label for="mqtt-port">Port</label>
<input type="number" id="mqtt-port" name="mqtt-port" placeholder="1883" min="1" max="65535">
</div>
</div>
</div>
<div class="form-group">
<label for="mqtt-user">Benutzer</label>
<input type="text" id="mqtt-user" name="mqtt-user" placeholder="Optional" autocomplete="off">
</div>
<div class="form-group">
<label for="mqtt-password">Passwort</label>
<input type="password" id="mqtt-password" name="mqtt-password" placeholder="Optional" autocomplete="off">
</div>
<hr class="divider">
<p class="section-label">Intervalle</p>
<div class="form-row">
<div>
<label for="measure-frequency">Messintervall</label>
<input type="number" id="measure-frequency" name="measure-frequency" placeholder="500" min="1">
<p class="input-hint">in Millisekunden</p>
</div>
<div>
<label for="push-frequency">Sendeintervall</label>
<input type="number" id="push-frequency" name="push-frequency" placeholder="60" min="1">
<p class="input-hint">in Sekunden</p>
</div>
</div>
<hr class="divider">
<button type="submit">Speichern</button>
</form>
</div>
</div>
</body>
</html>

157
fs/wlan_config.html
View File

@@ -1,20 +1,141 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Konfiguration</title>
</head>
<body>
<h1>WLAN Einstellungen</h1>
<form action="/wlan-config" method="post">
<label>SSID:</label>
<input type="text" name="ssid">
<br>
<label>Passwort:</label>
<input type="password" name="password">
<br>
<input type="submit" value="Speichern">
</form>
</body>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WLAN Konfiguration</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
background: #0d1117;
color: #c9d1d9;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.container { width: 100%; max-width: 420px; }
.back {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #8b949e;
text-decoration: none;
margin-bottom: 24px;
transition: color 0.15s;
}
.back:hover { color: #388bfd; }
.card {
background: #161b22;
border: 1px solid #30363d;
border-radius: 12px;
padding: 28px;
}
.card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.card-icon {
width: 40px;
height: 40px;
background: #1a2e23;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
h1 {
font-size: 18px;
font-weight: 600;
color: #f0f6fc;
}
.card-subtitle {
font-size: 12px;
color: #8b949e;
margin-top: 2px;
}
.form-group { margin-bottom: 18px; }
label {
display: block;
font-size: 13px;
font-weight: 500;
color: #8b949e;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
input[type="text"],
input[type="password"],
input[type="number"] {
width: 100%;
background: #0d1117;
border: 1px solid #30363d;
border-radius: 8px;
padding: 10px 12px;
font-size: 14px;
color: #f0f6fc;
outline: none;
transition: border-color 0.15s;
font-family: inherit;
}
input:focus { border-color: #388bfd; }
input::placeholder { color: #484f58; }
.divider {
border: none;
border-top: 1px solid #30363d;
margin: 22px 0;
}
button[type="submit"] {
width: 100%;
background: #238636;
border: 1px solid #2ea043;
border-radius: 8px;
padding: 11px;
font-size: 14px;
font-weight: 500;
color: #fff;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
font-family: inherit;
}
button[type="submit"]:hover {
background: #2ea043;
border-color: #3fb950;
}
button[type="submit"]:active { background: #1a7f37; }
</style>
</head>
<body>
<div class="container">
<a href="/" class="back">&#8592; Zurück</a>
<div class="card">
<div class="card-header">
<div class="card-icon">&#128246;</div>
<div>
<h1>WLAN</h1>
<p class="card-subtitle">Netzwerkverbindung konfigurieren</p>
</div>
</div>
<form action="/wlan-config" method="post">
<div class="form-group">
<label for="ssid">SSID</label>
<input type="text" id="ssid" name="ssid" placeholder="Netzwerkname" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Passwort</label>
<input type="password" id="password" name="password" placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;" autocomplete="off">
</div>
<hr class="divider">
<button type="submit">Speichern &amp; Verbinden</button>
</form>
</div>
</div>
</body>
</html>