This commit is contained in:
Carsten Graf
142
tools/update-anleitung.html
Normal file
142
tools/update-anleitung.html
Normal file
@@ -0,0 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>AquaMaster – OTA Update Anleitung</title>
|
||||
<style>
|
||||
@page { size: A4; margin: 18mm 20mm; }
|
||||
html, body { font-family: "Segoe UI", Arial, sans-serif; color: #1a1a1a; font-size: 11pt; line-height: 1.45; }
|
||||
h1 { font-size: 22pt; margin: 0 0 4pt 0; color: #0b4a7a; }
|
||||
h2 { font-size: 14pt; margin: 18pt 0 6pt 0; color: #0b4a7a; border-bottom: 1px solid #c8d8e4; padding-bottom: 3pt; }
|
||||
h3 { font-size: 12pt; margin: 12pt 0 4pt 0; color: #12466b; }
|
||||
p { margin: 4pt 0; }
|
||||
ul, ol { margin: 4pt 0 6pt 20pt; padding: 0; }
|
||||
li { margin: 2pt 0; }
|
||||
code, .mono { font-family: "Consolas", "Courier New", monospace; background: #f1f5f9; padding: 1pt 4pt; border-radius: 3pt; font-size: 10pt; }
|
||||
.lead { color: #475569; font-size: 11pt; margin-bottom: 10pt; }
|
||||
.box { border-left: 4pt solid #0b4a7a; background: #f1f6fb; padding: 8pt 12pt; margin: 10pt 0; border-radius: 0 4pt 4pt 0; }
|
||||
.warn { border-left-color: #b45309; background: #fff7ed; }
|
||||
.ok { border-left-color: #15803d; background: #f0fdf4; }
|
||||
table { border-collapse: collapse; width: 100%; margin: 6pt 0; font-size: 10pt; }
|
||||
th, td { border: 1px solid #c8d8e4; padding: 5pt 7pt; text-align: left; vertical-align: top; }
|
||||
th { background: #eaf2f9; }
|
||||
.meta { color: #64748b; font-size: 9pt; margin-top: 4pt; }
|
||||
.step { margin: 8pt 0; }
|
||||
.step-num { display: inline-block; width: 18pt; height: 18pt; line-height: 18pt; text-align: center; background: #0b4a7a; color: white; border-radius: 50%; font-weight: bold; margin-right: 6pt; font-size: 9pt; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>AquaMaster – OTA Update Anleitung</h1>
|
||||
<p class="lead">Schritt-für-Schritt-Anleitung zum Einspielen eines neuen Firmware- und Filesystem-Updates auf die AquaMaster-Einheit über die Weboberfläche (PrettyOTA).</p>
|
||||
<p class="meta">Gilt für: AquaMaster MQTT (ESP32) · OTA-Oberfläche: PrettyOTA · Build: esp32thing_CI</p>
|
||||
|
||||
<h2>1. Warum zwei Dateien?</h2>
|
||||
<p>Der ESP32 speichert die Software des AquaMasters in <b>zwei getrennten Flash-Partitionen</b>. Jede enthält etwas anderes, und beide können (und müssen teilweise) einzeln aktualisiert werden:</p>
|
||||
|
||||
<table>
|
||||
<tr><th style="width:28%">Datei</th><th style="width:22%">Partition</th><th>Inhalt</th></tr>
|
||||
<tr>
|
||||
<td><code>firmware.bin</code></td>
|
||||
<td>App-Partition (OTA)</td>
|
||||
<td>Die eigentliche ESP32-Software: Timer-Logik, MQTT-Broker, WiFi, Webserver, Spielmodi, RFID-Auswertung, Lizenzprüfung usw. Also alles, was der Master <i>tut</i>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>spiffs.bin</code></td>
|
||||
<td>SPIFFS-Partition</td>
|
||||
<td>Das Dateisystem mit der <b>Weboberfläche</b>: <code>index.html</code>, <code>settings.html</code>, <code>leaderboard.html</code>, <code>rfid.html</code>, CSS, Bilder sowie die Button-<code>firmware.bin</code>, über die sich die Funktaster selbst updaten.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="box">
|
||||
<b>Kurz gesagt:</b> <code>firmware.bin</code> = was der Master <i>macht</i>, <code>spiffs.bin</code> = wie der Master im Browser <i>aussieht</i>. Beide leben in verschiedenen Flash-Bereichen und werden deshalb getrennt hochgeladen.
|
||||
</div>
|
||||
|
||||
<h3>Muss ich immer beide flashen?</h3>
|
||||
<ul>
|
||||
<li><b>Nur Code geändert</b> (z. B. neue Timerlogik, Bugfix): es reicht <code>firmware.bin</code>.</li>
|
||||
<li><b>Nur Weboberfläche geändert</b> (HTML/CSS, neue Button-Firmware): es reicht <code>spiffs.bin</code>.</li>
|
||||
<li><b>Im Zweifel beide</b> einspielen – in der Reihenfolge unten – dann kann garantiert nichts „alt gegen neu" kollidieren.</li>
|
||||
</ul>
|
||||
|
||||
<h2>2. Vorbereitung</h2>
|
||||
<ol>
|
||||
<li>Die aktuelle Release-ZIP entpacken. Darin liegen <code>firmware.bin</code> und <code>spiffs.bin</code>.</li>
|
||||
<li>AquaMaster einschalten und mit seinem WLAN verbinden:
|
||||
<ul>
|
||||
<li><b>AP-Modus:</b> SSID <code>AquaMaster-xxxx</code>, IP <code>192.168.10.1</code></li>
|
||||
<li><b>STA-Modus:</b> die im Heimnetz vergebene IP (im Router oder per mDNS-Namen <code>aquamaster.local</code>)</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Im Browser die OTA-Seite öffnen: <code>http://<IP-des-Masters>/update</code><br>
|
||||
Beispiel AP: <code>http://192.168.10.1/update</code></li>
|
||||
</ol>
|
||||
|
||||
<div class="box warn">
|
||||
<b>Wichtig:</b> Während des Updates den AquaMaster <b>nicht vom Strom trennen</b> und die Verbindung nicht abbrechen. Ein unterbrochener Firmware-Upload führt im schlimmsten Fall zu einem Rollback auf die vorherige Version – ein unterbrochenes Filesystem-Update zu einer leeren Weboberfläche.
|
||||
</div>
|
||||
|
||||
<h2>3. Update-Modus wählen – <i>das Wichtigste</i></h2>
|
||||
<p>Auf der PrettyOTA-Seite gibt es oben ein Dropdown <b>„OTA-Mode"</b> (oder <b>„Update Mode"</b>) mit zwei Einträgen:</p>
|
||||
|
||||
<table>
|
||||
<tr><th style="width:30%">Modus</th><th>Wann auswählen?</th></tr>
|
||||
<tr><td><b>Firmware</b></td><td>Wenn du <code>firmware.bin</code> hochladen willst (Standard, die Option ist beim Öffnen der Seite bereits aktiv).</td></tr>
|
||||
<tr><td><b>Filesystem</b></td><td>Wenn du <code>spiffs.bin</code> hochladen willst. Muss <b>vor dem Upload</b> manuell umgestellt werden!</td></tr>
|
||||
</table>
|
||||
|
||||
<div class="box warn">
|
||||
<b>Häufigster Fehler:</b> <code>spiffs.bin</code> wird im Modus „Firmware" hochgeladen. PrettyOTA akzeptiert die Datei dann zwar, schreibt sie aber in die falsche Partition – der Master startet nicht mehr sauber bzw. zeigt nach dem Neustart eine kaputte Weboberfläche. <b>Immer zuerst den richtigen Modus wählen, dann die Datei hinzufügen.</b>
|
||||
</div>
|
||||
|
||||
<h2>4. Update durchführen</h2>
|
||||
|
||||
<h3>4.1 Firmware aktualisieren</h3>
|
||||
<p class="step"><span class="step-num">1</span>Im Dropdown <b>„Firmware"</b> auswählen.</p>
|
||||
<p class="step"><span class="step-num">2</span><code>firmware.bin</code> per Drag-&-Drop auf den Upload-Bereich ziehen (oder über <i>„Datei auswählen"</i> öffnen).</p>
|
||||
<p class="step"><span class="step-num">3</span>Fortschrittsbalken abwarten, bis „Update successful" erscheint.</p>
|
||||
<p class="step"><span class="step-num">4</span>Der AquaMaster startet automatisch neu. Warten, bis die Status-LED wieder Normalbetrieb signalisiert (ca. 5–10 s).</p>
|
||||
|
||||
<h3>4.2 Filesystem (Weboberfläche) aktualisieren</h3>
|
||||
<p class="step"><span class="step-num">1</span>Erneut <code>http://<IP>/update</code> öffnen (nach dem Neustart ist die Verbindung evtl. kurz weg).</p>
|
||||
<p class="step"><span class="step-num">2</span>Im Dropdown auf <b>„Filesystem"</b> umstellen. <b>Nicht vergessen!</b></p>
|
||||
<p class="step"><span class="step-num">3</span><code>spiffs.bin</code> per Drag-&-Drop hochladen.</p>
|
||||
<p class="step"><span class="step-num">4</span>Nach „Update successful" startet der Master erneut.</p>
|
||||
|
||||
<div class="box ok">
|
||||
<b>Tipp – Reihenfolge:</b> Erst <code>firmware.bin</code>, dann <code>spiffs.bin</code>. So läuft nach dem ersten Reboot bereits die neue Timer-Software, die dann passend zur neuen Weboberfläche ist.
|
||||
</div>
|
||||
|
||||
<h2>5. Prüfen, ob das Update sitzt</h2>
|
||||
<ul>
|
||||
<li>Die Hauptseite <code>http://<IP>/</code> öffnen – die Oberfläche sollte fehlerfrei laden.</li>
|
||||
<li>Unter <b>Einstellungen</b> / <b>Status</b> die Firmware-Version bzw. das Build-Datum kontrollieren.</li>
|
||||
<li>Einen kurzen Testlauf starten (Start-/Stopp-Taster drücken), um zu prüfen, dass die Timerlogik reagiert.</li>
|
||||
<li>Falls die Seite nach einem Filesystem-Update weiß/leer bleibt: <code>spiffs.bin</code> nochmal im Modus „Filesystem" hochladen.</li>
|
||||
</ul>
|
||||
|
||||
<h2>6. Fehlerbehebung</h2>
|
||||
<table>
|
||||
<tr><th style="width:42%">Symptom</th><th>Ursache / Fix</th></tr>
|
||||
<tr>
|
||||
<td>„Wrong partition" oder Upload bricht sofort ab</td>
|
||||
<td>Falscher Modus gewählt – Dropdown umstellen und erneut hochladen.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nach dem Update leere / unformatierte Weboberfläche</td>
|
||||
<td>Es wurde nur <code>firmware.bin</code> geflasht, aber die HTML/CSS-Dateien haben sich geändert. <code>spiffs.bin</code> nachliefern (Modus „Filesystem").</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Master kommt nach Firmware-Update nicht mehr ins WLAN</td>
|
||||
<td>Kurz stromlos machen; PrettyOTA führt intern bei einem fehlerhaften Boot ein Rollback auf die vorherige App-Partition aus.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Browser zeigt „Verbindung verloren"</td>
|
||||
<td>Normal während des Reboots. Seite nach ~10 s neu laden.</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="meta">Bei fortbestehenden Problemen: seriellen Monitor mit 115200 Baud anschließen – PrettyOTA und der Master schreiben detaillierte Update- und Boot-Logs auf UART.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user