en/ESP-Scope
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create more complex landing webpage to present project as well

Browse Source
This commit is contained in:
Victor Talpaert
2026-04-10 15:46:19 +02:00
parent 510289925e
commit 5d096471f0
2 changed files with 352 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.github/workflows/pages.yml vendored
View File

@@ -19,6 +19,9 @@ jobs:
steps: steps:
- uses: actions/checkout@v4 - uses: actions/checkout@v4
- name: Copy static assets
run: cp screenshot.png webpage/screenshot.png
- name: Download all release binaries - name: Download all release binaries
env: env:
GH_TOKEN: ${{ github.token }} GH_TOKEN: ${{ github.token }}

470
webpage/index.html
View File

@@ -3,56 +3,155 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ESP-Scope Firmware Installer</title> <title>ESP-Scope — Web Oscilloscope for ESP32</title>
<script type="module" src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module"></script> <script type="module" src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module"></script>
<style> <style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0f172a;
--surface: #1e293b;
--surface2: #0f172a;
--border: #334155;
--text: #e2e8f0;
--muted: #94a3b8;
--dim: #64748b;
--accent: #3b82f6;
--accent-hover: #2563eb;
}
body { body {
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
background: #0f172a; background: var(--bg);
color: #e2e8f0; color: var(--text);
min-height: 100vh; min-height: 100vh;
display: flex; line-height: 1.6;
flex-direction: column; }
align-items: center;
padding: 2rem 1rem; .container {
max-width: 860px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* ── Hero ── */
.hero {
text-align: center;
padding: 4rem 1.5rem 2.5rem;
}
.hero h1 {
font-size: 2.75rem;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 0.5rem;
}
.hero .tagline {
font-size: 1.2rem;
color: var(--muted);
margin-bottom: 0.75rem;
}
.hero .description {
font-size: 1rem;
color: var(--muted);
max-width: 560px;
margin: 0 auto 1.75rem;
}
.hero .cta {
display: inline-block;
background: var(--accent);
color: #fff;
text-decoration: none;
padding: 0.75rem 2rem;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
transition: background 0.2s;
}
.hero .cta:hover { background: var(--accent-hover); }
.screenshot {
margin: 2.5rem auto 0;
max-width: 760px;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border);
box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
.screenshot img { width: 100%; display: block; }
/* ── Divider ── */
.divider { border: none; border-top: 1px solid var(--border); }
/* ── Section shell ── */
section { padding: 3rem 1.5rem; }
section h2 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
text-align: center;
}
/* ── Features grid ── */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.feature-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 1.1rem 1.25rem;
}
.feature-card .feature-title {
font-weight: 600;
font-size: 0.95rem;
margin-bottom: 0.3rem;
}
.feature-card .feature-desc {
font-size: 0.85rem;
color: var(--muted);
}
/* ── Flash section ── */
.flash-intro {
text-align: center;
color: var(--muted);
font-size: 0.95rem;
margin-top: -0.75rem;
margin-bottom: 2rem;
} }
.card { .card {
background: #1e293b; background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px; border-radius: 12px;
padding: 2rem; padding: 2rem;
max-width: 520px; max-width: 520px;
width: 100%; width: 100%;
margin-top: 2rem; margin: 0 auto;
} }
h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.25rem; }
.subtitle { color: #94a3b8; font-size: 0.95rem; margin-bottom: 1.5rem; }
.section-label { .section-label {
font-size: 0.85rem; font-size: 0.85rem;
color: #94a3b8; color: var(--muted);
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
} }
/* Version list */
.version-list { .version-list {
border: 1px solid #334155; border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.version-item { .version-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
padding: 0.65rem 0.9rem; padding: 0.65rem 0.9rem;
cursor: pointer; cursor: pointer;
border-bottom: 1px solid #1e293b; border-bottom: 1px solid var(--surface);
background: #0f172a; background: var(--surface2);
transition: background 0.15s; transition: background 0.15s;
user-select: none; user-select: none;
} }
@@ -61,23 +160,21 @@
.version-item.selected { background: #1e3a5f; } .version-item.selected { background: #1e3a5f; }
.version-dot { .version-dot {
width: 10px; width: 10px; height: 10px;
height: 10px;
border-radius: 50%; border-radius: 50%;
border: 2px solid #475569; border: 2px solid #475569;
flex-shrink: 0; flex-shrink: 0;
transition: border-color 0.15s, background 0.15s; transition: border-color 0.15s, background 0.15s;
} }
.version-item.selected .version-dot { .version-item.selected .version-dot {
background: #3b82f6; background: var(--accent);
border-color: #3b82f6; border-color: var(--accent);
} }
.version-info { flex: 1; min-width: 0; } .version-info { flex: 1; min-width: 0; }
.version-name { .version-name {
font-size: 0.95rem; font-size: 0.95rem;
font-weight: 600; font-weight: 600;
color: #e2e8f0;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
@@ -93,63 +190,49 @@
} }
.version-date { .version-date {
font-size: 0.78rem; font-size: 0.78rem;
color: #64748b; color: var(--dim);
margin-top: 0.15rem; margin-top: 0.15rem;
} }
.version-loading { .version-loading {
padding: 1rem; padding: 1rem;
text-align: center; text-align: center;
color: #64748b; color: var(--dim);
font-size: 0.9rem; font-size: 0.9rem;
background: #0f172a; background: var(--surface2);
border-radius: 8px; border-radius: 8px;
border: 1px solid #334155; border: 1px solid var(--border);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
/* Board list */
.board-list { .board-list {
border: 1px solid #334155; border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.board-item { .board-item {
padding: 0.6rem 0.9rem; padding: 0.6rem 0.9rem;
border-bottom: 1px solid #1e293b; border-bottom: 1px solid var(--surface);
background: #0f172a; background: var(--surface2);
} }
.board-item:last-child { border-bottom: none; } .board-item:last-child { border-bottom: none; }
.board-name { font-size: 0.9rem; font-weight: 600; }
.board-name { .board-detail { font-size: 0.78rem; color: var(--dim); margin-top: 0.1rem; }
font-size: 0.9rem;
font-weight: 600;
color: #e2e8f0;
}
.board-detail {
font-size: 0.78rem;
color: #64748b;
margin-top: 0.1rem;
}
.board-missing { .board-missing {
font-size: 0.82rem; font-size: 0.82rem;
color: #64748b; color: var(--dim);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.board-missing a { color: #7dd3fc; } .board-missing a { color: #7dd3fc; }
/* Install button */
.install-row { .install-row {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
esp-web-install-button::part(button) { esp-web-install-button::part(button) {
background: #3b82f6; background: var(--accent);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
@@ -159,7 +242,7 @@
cursor: pointer; cursor: pointer;
transition: background 0.2s; transition: background 0.2s;
} }
esp-web-install-button::part(button):hover { background: #2563eb; } esp-web-install-button::part(button):hover { background: var(--accent-hover); }
.unsupported-msg { .unsupported-msg {
background: #7c3aed22; background: #7c3aed22;
@@ -172,78 +255,244 @@
display: none; display: none;
} }
hr { border: none; border-top: 1px solid #334155; margin: 1.25rem 0; } .browser-note {
font-size: 0.82rem;
color: var(--dim);
text-align: center;
}
.instructions { font-size: 0.9rem; color: #94a3b8; line-height: 1.6; } /* ── Usage steps ── */
.instructions ol { padding-left: 1.25rem; } .usage-grid {
.instructions li { margin-bottom: 0.3rem; } display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
counter-reset: step;
}
.usage-step {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 1.1rem 1.25rem;
counter-increment: step;
}
.usage-step::before {
content: counter(step);
display: inline-block;
width: 24px; height: 24px;
line-height: 24px;
text-align: center;
background: var(--accent);
color: #fff;
border-radius: 50%;
font-size: 0.75rem;
font-weight: 700;
margin-bottom: 0.6rem;
}
.usage-step .step-title {
font-weight: 600;
font-size: 0.95rem;
margin-bottom: 0.3rem;
}
.usage-step .step-desc {
font-size: 0.85rem;
color: var(--muted);
}
.usage-step code {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 4px;
padding: 0.1em 0.4em;
font-size: 0.85em;
font-family: ui-monospace, monospace;
}
/* ── LED table ── */
.led-heading {
text-align: center;
margin-top: 2.5rem;
margin-bottom: 1rem;
font-size: 1.1rem;
color: var(--muted);
font-weight: 600;
}
.led-table {
width: 100%;
max-width: 600px;
margin: 0 auto;
border-collapse: collapse;
font-size: 0.9rem;
}
.led-table th {
text-align: left;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--border);
color: var(--muted);
font-weight: 600;
}
.led-table td {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--border);
}
.led-table tbody tr:last-child td { border-bottom: none; }
/* ── Footer ── */
footer { footer {
margin-top: 2rem; text-align: center;
font-size: 0.8rem; padding: 2rem 1.5rem;
color: #475569; border-top: 1px solid var(--border);
font-size: 0.82rem;
color: var(--dim);
} }
footer a { color: #64748b; } footer a { color: #64748b; }
@media (max-width: 600px) {
.hero h1 { font-size: 2rem; }
.features-grid,
.usage-grid { grid-template-columns: 1fr; }
}
</style> </style>
</head> </head>
<body> <body>
<div class="card"> <!-- ── Hero ── -->
<h1>ESP-Scope Installer</h1> <header class="hero">
<p class="subtitle">Flash the firmware directly from your browser — no tools needed.</p> <div class="container">
<h1>ESP-Scope</h1>
<div class="section-label">Select firmware version</div> <p class="tagline">A web-based oscilloscope for the ESP32</p>
<div id="version-loading" class="version-loading">Loading releases…</div> <p class="description">Visualize analog signals in real-time through any web browser. No drivers, no software to install — just flash and go.</p>
<div id="version-list" class="version-list" style="display:none"></div> <a href="#flash" class="cta">Flash firmware</a>
<div class="screenshot">
<div class="section-label">Supported boards in this release</div> <img src="screenshot.png" alt="ESP-Scope web interface" />
<div id="board-list" class="board-list" style="display:none"></div> </div>
<p class="board-missing">
Your board not listed? <a href="https://github.com/vtalpaert/esp-scope/issues/new" target="_blank">Open an issue</a>
</p>
<div class="install-row">
<esp-web-install-button id="install-btn"></esp-web-install-button>
</div> </div>
</header>
<div class="unsupported-msg" id="unsupported-msg"> <hr class="divider" />
Your browser does not support WebSerial. Please use Chrome, Edge, or Opera on desktop.
<!-- ── Features ── -->
<section>
<div class="container">
<h2>Features</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-title">Real-time visualization</div>
<div class="feature-desc">Signal waveforms rendered live in your browser over WiFi.</div>
</div>
<div class="feature-card">
<div class="feature-title">Adjustable sample rate</div>
<div class="feature-desc">1 Hz to 83 333 Hz with configurable ADC attenuation.</div>
</div>
<div class="feature-card">
<div class="feature-title">Crosshair &amp; trigger</div>
<div class="feature-desc">Precise measurements with a crosshair cursor and adjustable trigger level.</div>
</div>
<div class="feature-card">
<div class="feature-title">Built-in test signal</div>
<div class="feature-desc">PWM output on D1 at a configurable frequency — no external source needed to get started.</div>
</div>
<div class="feature-card">
<div class="feature-title">WiFi setup from browser</div>
<div class="feature-desc">Starts as a WiFi access point. Join your home network via the web UI — no serial console required.</div>
</div>
<div class="feature-card">
<div class="feature-title">Browser controls</div>
<div class="feature-desc">Reset settings, reconfigure WiFi, or power off the device — all from the interface.</div>
</div>
</div>
</div> </div>
</section>
<hr /> <hr class="divider" />
<div class="instructions"> <!-- ── Flash ── -->
<ol> <section id="flash">
<li>Connect your ESP32 via USB.</li> <div class="container">
<li>Select a firmware version above.</li> <h2>Flash the firmware</h2>
<li>Click <strong>Install</strong> — the correct firmware is picked automatically for your chip.</li> <p class="flash-intro">Connect your ESP32 via USB and install directly — no drivers or toolchain needed.<br>Requires Chrome, Edge, or Opera on desktop.</p>
<li>Wait for flashing to complete, then reset the board.</li>
</ol> <div class="card">
<p style="margin-top:0.75rem">Requires <strong>Chrome</strong>, <strong>Edge</strong>, or <strong>Opera</strong> on desktop.</p> <div class="section-label">Select firmware version</div>
<div id="version-loading" class="version-loading">Loading releases…</div>
<div id="version-list" class="version-list" style="display:none"></div>
<div class="section-label">Supported boards in this release</div>
<div id="board-list" class="board-list" style="display:none"></div>
<p class="board-missing">
Your board not listed? <a href="https://github.com/vtalpaert/esp-scope/issues/new" target="_blank">Open an issue</a>
</p>
<div class="install-row">
<esp-web-install-button id="install-btn"></esp-web-install-button>
</div>
<div class="unsupported-msg" id="unsupported-msg">
Your browser does not support WebSerial. Please use Chrome, Edge, or Opera on desktop.
</div>
<p class="browser-note">The correct binary is picked automatically for your chip.</p>
</div>
</div> </div>
</div> </section>
<hr class="divider" />
<!-- ── After flashing ── -->
<section>
<div class="container">
<h2>After flashing</h2>
<div class="usage-grid">
<div class="usage-step">
<div class="step-title">Connect to the AP</div>
<div class="step-desc">ESP-Scope starts as a WiFi access point. Connect your device to the <strong>ESP-Scope</strong> network.</div>
</div>
<div class="usage-step">
<div class="step-title">Open the interface</div>
<div class="step-desc">Navigate to <code>http://esp-scope</code> in your browser. You may need a <code>.local</code> suffix depending on your OS.</div>
</div>
<div class="usage-step">
<div class="step-title">Optionally join your WiFi</div>
<div class="step-desc">Tap <strong>WiFi</strong> in the UI to enter your SSID and password. The device reboots and joins your network.</div>
</div>
<div class="usage-step">
<div class="step-title">Connect a signal</div>
<div class="step-desc">Probe from <strong>ADC0</strong>. Use the built-in test signal on <strong>D1</strong> to verify the setup first.</div>
</div>
</div>
<h3 class="led-heading">LED status</h3>
<table class="led-table">
<thead>
<tr><th>LED behaviour</th><th>State</th></tr>
</thead>
<tbody>
<tr><td>Continuously lit</td><td>Connecting to WiFi / starting wireless AP</td></tr>
<tr><td>1 s equal flash</td><td>AP mode — connect to the "ESP-Scope" network</td></tr>
<tr><td>Slow, brief flashes</td><td>Connected to the WiFi SSID set in the UI</td></tr>
<tr><td>Rapid, brief flashes</td><td>Sending data to an active client</td></tr>
</tbody>
</table>
</div>
</section>
<footer> <footer>
<a href="https://github.com/vtalpaert/esp-scope" target="_blank">vtalpaert/esp-scope</a> <a href="https://github.com/vtalpaert/esp-scope" target="_blank">vtalpaert/esp-scope</a>
&nbsp;·&nbsp; Forked from <a href="https://github.com/MatAtBread/esp-scope" target="_blank">MatAtBread/esp-scope</a>
&nbsp;·&nbsp; Powered by <a href="https://esphome.github.io/esp-web-tools/" target="_blank">esp-web-tools</a> &nbsp;·&nbsp; Powered by <a href="https://esphome.github.io/esp-web-tools/" target="_blank">esp-web-tools</a>
</footer> </footer>
<script> <script>
// Static details for known board slugs (slug = filename part after "esp-scope-" and before "-merged.bin")
// chipFamily is required by esp-web-tools; label and detail are for display only.
var BOARD_DETAILS = { var BOARD_DETAILS = {
'esp32': { chipFamily: 'ESP32', label: 'Generic ESP32', detail: 'LED GPIO 2 · AP-mode button GPIO 9' }, 'esp32': { chipFamily: 'ESP32', label: 'Generic ESP32', detail: 'LED GPIO 2 · AP-mode button GPIO 9' },
'xiao-esp32c6': { chipFamily: 'ESP32-C6', label: 'Seeed XIAO ESP32C6', detail: 'LED GPIO 8 (built-in yellow) · AP-mode button GPIO 0 (Boot)' }, 'xiao-esp32c6': { chipFamily: 'ESP32-C6', label: 'Seeed XIAO ESP32C6', detail: 'LED GPIO 8 (built-in yellow) · AP-mode button GPIO 0 (Boot)' },
}; };
// Fallback: derive chipFamily from slug when not in BOARD_DETAILS
function chipFamilyFromSlug(slug) { function chipFamilyFromSlug(slug) {
if (slug.indexOf('esp32c6') !== -1) return 'ESP32-C6'; if (slug.indexOf('esp32c6') !== -1) return 'ESP32-C6';
if (slug.indexOf('esp32s3') !== -1) return 'ESP32-S3'; if (slug.indexOf('esp32s3') !== -1) return 'ESP32-S3';
if (slug.indexOf('esp32s2') !== -1) return 'ESP32-S2'; if (slug.indexOf('esp32s2') !== -1) return 'ESP32-S2';
if (slug.indexOf('esp32c3') !== -1) return 'ESP32-C3'; if (slug.indexOf('esp32c3') !== -1) return 'ESP32-C3';
if (slug.indexOf('esp32h2') !== -1) return 'ESP32-H2'; if (slug.indexOf('esp32h2') !== -1) return 'ESP32-H2';
if (slug.indexOf('esp32') !== -1) return 'ESP32'; if (slug.indexOf('esp32') !== -1) return 'ESP32';
return null; return null;
} }
@@ -255,7 +504,6 @@
return null; return null;
} }
// Parse .bin assets from a release into [{slug, chipFamily, url}]
function boardsFromRelease(release, baseUrl) { function boardsFromRelease(release, baseUrl) {
var boards = []; var boards = [];
(release.assets || []).forEach(function(asset) { (release.assets || []).forEach(function(asset) {
@@ -270,22 +518,17 @@
return boards; return boards;
} }
var installBtn = document.getElementById('install-btn'); var installBtn = document.getElementById('install-btn');
var versionList = document.getElementById('version-list'); var versionList = document.getElementById('version-list');
var boardList = document.getElementById('board-list'); var boardList = document.getElementById('board-list');
var loadingEl = document.getElementById('version-loading'); var loadingEl = document.getElementById('version-loading');
var unsupported = document.getElementById('unsupported-msg'); var unsupported = document.getElementById('unsupported-msg');
var currentManifestUrl = null; var currentManifestUrl = null;
var allReleases = [];
// ------------------------------------------------------------------
// Manifest + board display
// ------------------------------------------------------------------
function selectRelease(release) { function selectRelease(release) {
var boards = boardsFromRelease(release, window.location.href); var boards = boardsFromRelease(release, window.location.href);
// Update board list display
boardList.innerHTML = ''; boardList.innerHTML = '';
boards.forEach(function(b) { boards.forEach(function(b) {
var known = BOARD_DETAILS[b.slug]; var known = BOARD_DETAILS[b.slug];
@@ -305,7 +548,6 @@
}); });
boardList.style.display = boards.length ? 'block' : 'none'; boardList.style.display = boards.length ? 'block' : 'none';
// Build manifest
var builds = boards.map(function(b) { var builds = boards.map(function(b) {
return { chipFamily: b.chipFamily, parts: [{ path: b.url, offset: 0 }] }; return { chipFamily: b.chipFamily, parts: [{ path: b.url, offset: 0 }] };
}); });
@@ -317,9 +559,6 @@
installBtn.setAttribute('manifest', currentManifestUrl); installBtn.setAttribute('manifest', currentManifestUrl);
} }
// ------------------------------------------------------------------
// Version comparison (semver-like, descending)
// ------------------------------------------------------------------
function versionParts(tag) { function versionParts(tag) {
return tag.replace(/^v/, '').split('.').map(function(n) { return parseInt(n, 10) || 0; }); return tag.replace(/^v/, '').split('.').map(function(n) { return parseInt(n, 10) || 0; });
} }
@@ -334,9 +573,6 @@
return 0; return 0;
} }
// ------------------------------------------------------------------
// Render version list
// ------------------------------------------------------------------
function formatDate(iso) { function formatDate(iso) {
if (!iso) return ''; if (!iso) return '';
return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }); return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
@@ -355,9 +591,7 @@
return; return;
} }
allReleases = ordered;
versionList.innerHTML = ''; versionList.innerHTML = '';
ordered.forEach(function(release, idx) { ordered.forEach(function(release, idx) {
var item = document.createElement('div'); var item = document.createElement('div');
item.className = 'version-item' + (idx === 0 ? ' selected' : ''); item.className = 'version-item' + (idx === 0 ? ' selected' : '');
@@ -403,9 +637,6 @@
selectRelease(ordered[0]); selectRelease(ordered[0]);
} }
// ------------------------------------------------------------------
// Fetch all releases
// ------------------------------------------------------------------
fetch('https://api.github.com/repos/vtalpaert/esp-scope/releases') fetch('https://api.github.com/repos/vtalpaert/esp-scope/releases')
.then(function(r) { return r.json(); }) .then(function(r) { return r.json(); })
.then(function(data) { .then(function(data) {
@@ -419,9 +650,6 @@
loadingEl.textContent = 'Could not load releases. Check your connection.'; loadingEl.textContent = 'Could not load releases. Check your connection.';
}); });
// ------------------------------------------------------------------
// WebSerial check
// ------------------------------------------------------------------
if (!('serial' in navigator)) { if (!('serial' in navigator)) {
unsupported.style.display = 'block'; unsupported.style.display = 'block';
} }