dieter/Spannung
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

2026-08-02 09:29 HTML-Darstellung in zwei Spalten

Browse source
This commit is contained in:
Dieter Lang 2026-08-02 09:29:25 +02:00
parent b7ed142f00
commit 31a212666b
2 changed files with 68 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
config.json
View file

@ -3,15 +3,15 @@
"i2c_bus": "1",
"ads1115_address_1": 72,
"ads1115_address_2": 73,
"name_adc1_ch0": "Hauptbatterie (U12V)",
"name_adc1_ch0": "23cm",
"factor_adc1_ch0": 5.0,
"name_adc1_ch1": "Backup-Batterie",
"name_adc1_ch1": "13 cm",
"factor_adc1_ch1": 5.0,
"name_adc1_ch2": "Solar-Eingang",
"name_adc1_ch2": "9 cm",
"factor_adc1_ch2": 1.0,
"name_adc1_ch3": "Steuerspannung Intern",
"name_adc1_ch3": "6 cm",
"factor_adc1_ch3": 1.0,
"name_adc2_ch0": "Zusatzakku Funk",
"name_adc2_ch0": "3 cm",
"factor_adc2_ch0": 1.0,
"relais_pins": [
{"id": 1, "name": "Relais 1 (230V Hauptschalter)", "gpio": "GPIO12"},

99
web/static/index.html
View file

@ -5,8 +5,25 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: 'Segoe UI', Arial, sans-serif; text-align: center; background: #0f172a; color: #f8fafc; padding: 20px; }
.container { max-width: 500px; margin: 0 auto; }
.card { background: #1e293b; padding: 20px; margin: 15px 0; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3); border: 1px solid #334155; }
/* Maximale Breite erhöht, um Platz für das zweispaltige Layout zu bieten */
.container { max-width: 1000px; margin: 0 auto; }
/* Das neue Haupt-Layout: Links Relais, rechts Spannungen */
.main-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: start;
text-align: left;
}
/* Spalten-Container für korrekte Ausrichtung */
.layout-col {
display: flex;
flex-direction: column;
}
.card { background: #1e293b; padding: 20px; margin: 15px 0; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3); border: 1px solid #334155; text-align: center; }
.val { font-size: 2.5em; color: #38bdf8; font-weight: bold; font-family: monospace; }
.grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 15px; }
.btn { width: 100%; padding: 14px; font-size: 1.1em; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; transition: background 0.2s, transform 0.1s; color: white; }
@ -15,48 +32,59 @@
.btn-on:hover { background: #dc2626; }
.btn-off { background: #10b981; }
.btn-off:hover { background: #059669; }
.footer-nav { margin-top: 25px; font-size: 0.9em; color: #64748b; }
.footer-nav { margin-top: 25px; font-size: 0.9em; color: #64748b; clear: both; }
/* Responsive Anpassung: Schaltet auf Smartphones automatisch untereinander um */
@media (max-width: 768px) {
.main-layout { grid-template-columns: 1fr; gap: 0; }
}
</style>
</head>
<body>
<div class="container">
<h1>U12V Funkstations-Monitor</h1>
<h1>Funkstations-Monitor</h1>
<!-- Dynamische Überschriften aus dem Names-Array der config.json -->
<div class="card">
<h3>{{index .Names 0}}</h3>
<div class="val" id="v1">--.-- V</div>
</div>
<div class="main-layout">
<!-- LINKE SPALTE: Relaissteuerung -->
<div class="layout-col">
<div class="card">
<h3>Relaissteuerung</h3>
<div class="grid">
{{range .Relais}}
<button class="btn btn-off" id="relais-btn-{{.ID}}" onclick="toggleRelais({{.ID}})">
{{.Name}}: Laden...
</button>
{{end}}
</div>
</div>
</div>
<div class="card">
<h3>{{index .Names 1}}</h3>
<div class="val" id="v2">--.-- V</div>
</div>
<!-- RECHTE SPALTE: Spannungsanzeigen -->
<div class="layout-col">
<div class="card">
<h3>{{index .Names 0}}</h3>
<div class="val" id="v1">--.-- V</div>
</div>
<div class="card">
<h3>{{index .Names 2}}</h3>
<div class="val" id="v3">--.-- V</div>
</div>
<div class="card">
<h3>{{index .Names 1}}</h3>
<div class="val" id="v2">--.-- V</div>
</div>
<div class="card">
<h3>{{index .Names 3}}</h3>
<div class="val" id="v4">--.-- V</div>
</div>
<div class="card">
<h3>{{index .Names 2}}</h3>
<div class="val" id="v3">--.-- V</div>
</div>
<div class="card">
<h3>{{index .Names 4}}</h3>
<div class="val" id="v5">--.-- V</div>
</div>
<div class="card">
<h3>{{index .Names 3}}</h3>
<div class="val" id="v4">--.-- V</div>
</div>
<!-- Relaissteuerung -->
<div class="card">
<h3>Relaissteuerung</h3>
<div class="grid">
{{range .Relais}}
<button class="btn btn-off" id="relais-btn-{{.ID}}" onclick="toggleRelais({{.ID}})">
{{.Name}}: Laden...
</button>
{{end}}
<div class="card">
<h3>{{index .Names 4}}</h3>
<div class="val" id="v5">--.-- V</div>
</div>
</div>
</div>
@ -79,14 +107,13 @@
data.relais.forEach(r => {
const btn = document.getElementById(`relais-btn-${r.id}`);
if (btn) {
// ERWEITERUNG: Wenn der Name das Wort "Reserve" enthält, Button deaktivieren und stylen
if (r.name && r.name.toLowerCase().includes('reserve')) {
btn.className = 'btn btn-off';
btn.innerText = `${r.name}: GESPERRT`;
btn.disabled = true;
btn.style.opacity = '0.3';
btn.style.cursor = 'not-allowed';
return; // Zum nächsten Relais springen
return;
}
if (r.state) {