Add version picker to web flasher

Lets users choose among the last 3 releases (v3.6.3 latest, v3.6.2,
v3.6.1) instead of only ever flashing the newest build - handy for
testing or rolling back. Archives the real historical binaries for
v3.6.1/v3.6.2 under versions/, each with its own manifest.json.

Documents the archival step as part of the standard release workflow
in CLAUDE.md so the picker stays current on future releases.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Eiswolf-BG
2026-08-14 03:29:55 +02:00
parent 87633441d3
commit a494f63503
4 changed files with 97 additions and 3 deletions

View File

@@ -76,6 +76,31 @@
margin-bottom: 25px;
text-shadow: 0 0 4px rgba(57, 255, 20, 0.4);
}
.version-picker {
text-align: left;
font-size: 12px;
color: #aae0aa;
margin-bottom: 20px;
}
.version-picker label {
display: block;
margin-bottom: 4px;
}
.version-picker select {
width: 100%;
background-color: var(--bg-color);
color: var(--text-color);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 6px 8px;
font-family: inherit;
font-size: 13px;
}
.version-picker .hint {
font-size: 11px;
color: #6a8f6a;
margin-top: 6px;
}
p {
font-size: 14px;
color: #ffffff;
@@ -112,9 +137,19 @@
<div class="container">
<h1>EISWOLFS FLIGHTRADAR CYD</h1>
<div class="subtitle">Firmware Flash Utility</div>
<div class="version-badge">Version: v3.6.3</div>
<div class="version-badge">Version: <span id="versionLabel">v3.6.3</span></div>
<p>Install the latest Flightradar firmware directly from your browser to your Cheap Yellow Display.</p>
<p>Install the Flightradar firmware directly from your browser to your Cheap Yellow Display.</p>
<div class="version-picker">
<label for="versionSelect">Install version:</label>
<select id="versionSelect">
<option value="manifest.json" data-version="v3.6.3" selected>v3.6.3 (latest)</option>
<option value="versions/v3.6.2/manifest.json" data-version="v3.6.2">v3.6.2</option>
<option value="versions/v3.6.1/manifest.json" data-version="v3.6.1">v3.6.1</option>
</select>
<div class="hint">Older versions are only kept for testing or rolling back - the latest version is recommended for most users.</div>
</div>
<div class="instructions">
1. Connect your CYD via USB cable<br>
@@ -122,7 +157,8 @@
3. Select the correct COM port<br>
4. Sit back and wait for the process to finish
</div>
<!-- References the manifest.json in the same folder -->
<!-- References the manifest.json in the same folder by default;
changed at runtime by the version picker above. -->
<esp-web-install-button manifest="manifest.json" data-goatcounter-click="flash-button" data-goatcounter-title="Firmware geflasht"></esp-web-install-button>
<div class="browser-note">Requires Chrome, Edge, or Opera (Web Serial API)</div>
@@ -183,5 +219,21 @@
draw();
})();
</script>
<script>
(function () {
// Version picker: repoints the ESP Web Tools install button at a
// different manifest.json when the user picks an older version, and
// keeps the "Version: vX.Y.Z" badge in sync with the current selection.
const select = document.getElementById('versionSelect');
const button = document.querySelector('esp-web-install-button');
const label = document.getElementById('versionLabel');
if (!select || !button) return;
select.addEventListener('change', function () {
const opt = select.options[select.selectedIndex];
button.setAttribute('manifest', select.value);
if (label && opt) label.textContent = opt.dataset.version || opt.textContent;
});
})();
</script>
</body>
</html>