667 lines
21 KiB
HTML
667 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>ESP-Scope — Web Oscilloscope for ESP32</title>
|
|
<meta name="description" content="ESP-Scope is a web-based oscilloscope for the ESP32. Visualize analog signals in real-time from any browser. Flash firmware directly — no drivers or toolchain needed." />
|
|
<link rel="canonical" href="https://vtalpaert.github.io/esp-scope/" />
|
|
<meta property="og:title" content="ESP-Scope — Web Oscilloscope for ESP32" />
|
|
<meta property="og:description" content="Real-time analog signal visualization in your browser. Flash your ESP32 with one click — no drivers, no toolchain." />
|
|
<meta property="og:image" content="https://vtalpaert.github.io/esp-scope/screenshot.png" />
|
|
<meta property="og:url" content="https://vtalpaert.github.io/esp-scope/" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<script type="module" src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module"></script>
|
|
<style>
|
|
*, *::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 {
|
|
font-family: system-ui, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
min-height: 100vh;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.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 {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
max-width: 520px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-label {
|
|
font-size: 0.85rem;
|
|
color: var(--muted);
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.version-list {
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.version-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.65rem 0.9rem;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--surface);
|
|
background: var(--surface2);
|
|
transition: background 0.15s;
|
|
user-select: none;
|
|
}
|
|
.version-item:last-child { border-bottom: none; }
|
|
.version-item:hover { background: #162032; }
|
|
.version-item.selected { background: #1e3a5f; }
|
|
|
|
.version-dot {
|
|
width: 10px; height: 10px;
|
|
border-radius: 50%;
|
|
border: 2px solid #475569;
|
|
flex-shrink: 0;
|
|
transition: border-color 0.15s, background 0.15s;
|
|
}
|
|
.version-item.selected .version-dot {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.version-info { flex: 1; min-width: 0; }
|
|
.version-name {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
.badge {
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
padding: 0.1em 0.5em;
|
|
border-radius: 999px;
|
|
background: #7c3aed33;
|
|
color: #c4b5fd;
|
|
border: 1px solid #7c3aed55;
|
|
}
|
|
.version-date {
|
|
font-size: 0.78rem;
|
|
color: var(--dim);
|
|
margin-top: 0.15rem;
|
|
}
|
|
.version-loading {
|
|
padding: 1rem;
|
|
text-align: center;
|
|
color: var(--dim);
|
|
font-size: 0.9rem;
|
|
background: var(--surface2);
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.board-list {
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.board-item {
|
|
padding: 0.6rem 0.9rem;
|
|
border-bottom: 1px solid var(--surface);
|
|
background: var(--surface2);
|
|
}
|
|
.board-item:last-child { border-bottom: none; }
|
|
.board-name { font-size: 0.9rem; font-weight: 600; }
|
|
.board-detail { font-size: 0.78rem; color: var(--dim); margin-top: 0.1rem; }
|
|
|
|
.board-missing {
|
|
font-size: 0.82rem;
|
|
color: var(--dim);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.board-missing a { color: #7dd3fc; }
|
|
|
|
.install-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
esp-web-install-button::part(button) {
|
|
background: var(--accent);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 0.75rem 2rem;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
esp-web-install-button::part(button):hover { background: var(--accent-hover); }
|
|
|
|
.unsupported-msg {
|
|
background: #7c3aed22;
|
|
border: 1px solid #7c3aed55;
|
|
border-radius: 8px;
|
|
padding: 0.75rem 1rem;
|
|
font-size: 0.9rem;
|
|
color: #c4b5fd;
|
|
margin-bottom: 1.25rem;
|
|
display: none;
|
|
}
|
|
|
|
.browser-note {
|
|
font-size: 0.82rem;
|
|
color: var(--dim);
|
|
text-align: center;
|
|
}
|
|
|
|
/* ── Usage steps ── */
|
|
.usage-grid {
|
|
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 {
|
|
text-align: center;
|
|
padding: 2rem 1.5rem;
|
|
border-top: 1px solid var(--border);
|
|
font-size: 0.82rem;
|
|
color: var(--dim);
|
|
}
|
|
footer a { color: #64748b; }
|
|
|
|
@media (max-width: 600px) {
|
|
.hero h1 { font-size: 2rem; }
|
|
.features-grid,
|
|
.usage-grid { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ── Hero ── -->
|
|
<header class="hero">
|
|
<div class="container">
|
|
<h1>ESP-Scope</h1>
|
|
<p class="tagline">A web-based oscilloscope for the ESP32</p>
|
|
<p class="description">Visualize analog signals in real-time through any web browser. No drivers, no software to install — just flash and go.</p>
|
|
<a href="#flash" class="cta">Flash firmware</a>
|
|
<div class="screenshot">
|
|
<img src="screenshot.png" alt="ESP-Scope oscilloscope web interface showing a real-time waveform on an ESP32" />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<hr class="divider" />
|
|
|
|
<!-- ── 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 & 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>
|
|
</section>
|
|
|
|
<hr class="divider" />
|
|
|
|
<!-- ── Flash ── -->
|
|
<section id="flash">
|
|
<div class="container">
|
|
<h2>Flash the firmware</h2>
|
|
<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>
|
|
|
|
<div class="card">
|
|
<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>
|
|
</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>
|
|
<a href="https://github.com/vtalpaert/esp-scope" target="_blank">vtalpaert/esp-scope</a>
|
|
· Forked from <a href="https://github.com/MatAtBread/esp-scope" target="_blank">MatAtBread/esp-scope</a>
|
|
· Powered by <a href="https://esphome.github.io/esp-web-tools/" target="_blank">esp-web-tools</a>
|
|
</footer>
|
|
|
|
<script>
|
|
var BOARD_DETAILS = {
|
|
'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)' },
|
|
};
|
|
|
|
function chipFamilyFromSlug(slug) {
|
|
if (slug.indexOf('esp32c6') !== -1) return 'ESP32-C6';
|
|
if (slug.indexOf('esp32s3') !== -1) return 'ESP32-S3';
|
|
if (slug.indexOf('esp32s2') !== -1) return 'ESP32-S2';
|
|
if (slug.indexOf('esp32c3') !== -1) return 'ESP32-C3';
|
|
if (slug.indexOf('esp32h2') !== -1) return 'ESP32-H2';
|
|
if (slug.indexOf('esp32') !== -1) return 'ESP32';
|
|
return null;
|
|
}
|
|
|
|
function slugFromFilename(name) {
|
|
var prefix = 'esp-scope-', suffix = '-merged.bin';
|
|
if (name.slice(0, prefix.length) === prefix && name.slice(-suffix.length) === suffix) {
|
|
return name.slice(prefix.length, -suffix.length);
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function boardsFromRelease(release, baseUrl) {
|
|
var boards = [];
|
|
(release.assets || []).forEach(function(asset) {
|
|
var slug = slugFromFilename(asset.name);
|
|
if (!slug) return;
|
|
var known = BOARD_DETAILS[slug];
|
|
var chipFamily = known ? known.chipFamily : chipFamilyFromSlug(slug);
|
|
if (!chipFamily) return;
|
|
var url = new URL('firmware/' + release.tag_name + '/' + asset.name, baseUrl).href;
|
|
boards.push({ slug: slug, chipFamily: chipFamily, url: url });
|
|
});
|
|
return boards;
|
|
}
|
|
|
|
var installBtn = document.getElementById('install-btn');
|
|
var versionList = document.getElementById('version-list');
|
|
var boardList = document.getElementById('board-list');
|
|
var loadingEl = document.getElementById('version-loading');
|
|
var unsupported = document.getElementById('unsupported-msg');
|
|
|
|
var currentManifestUrl = null;
|
|
|
|
function selectRelease(release) {
|
|
var boards = boardsFromRelease(release, window.location.href);
|
|
|
|
boardList.innerHTML = '';
|
|
boards.forEach(function(b) {
|
|
var known = BOARD_DETAILS[b.slug];
|
|
var item = document.createElement('div');
|
|
item.className = 'board-item';
|
|
var nameEl = document.createElement('div');
|
|
nameEl.className = 'board-name';
|
|
nameEl.textContent = known ? known.label : b.slug;
|
|
item.appendChild(nameEl);
|
|
if (known && known.detail) {
|
|
var detailEl = document.createElement('div');
|
|
detailEl.className = 'board-detail';
|
|
detailEl.textContent = known.detail;
|
|
item.appendChild(detailEl);
|
|
}
|
|
boardList.appendChild(item);
|
|
});
|
|
boardList.style.display = boards.length ? 'block' : 'none';
|
|
|
|
var builds = boards.map(function(b) {
|
|
return { chipFamily: b.chipFamily, parts: [{ path: b.url, offset: 0 }] };
|
|
});
|
|
var manifest = { name: 'esp-scope', builds: builds };
|
|
if (currentManifestUrl) URL.revokeObjectURL(currentManifestUrl);
|
|
currentManifestUrl = URL.createObjectURL(
|
|
new Blob([JSON.stringify(manifest)], { type: 'application/json' })
|
|
);
|
|
installBtn.setAttribute('manifest', currentManifestUrl);
|
|
}
|
|
|
|
function versionParts(tag) {
|
|
return tag.replace(/^v/, '').split('.').map(function(n) { return parseInt(n, 10) || 0; });
|
|
}
|
|
|
|
function compareVersionsDesc(a, b) {
|
|
var pa = versionParts(a.tag_name), pb = versionParts(b.tag_name);
|
|
var len = Math.max(pa.length, pb.length);
|
|
for (var i = 0; i < len; i++) {
|
|
var diff = (pb[i] || 0) - (pa[i] || 0);
|
|
if (diff !== 0) return diff;
|
|
}
|
|
return 0;
|
|
}
|
|
|
|
function formatDate(iso) {
|
|
if (!iso) return '';
|
|
return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
|
|
}
|
|
|
|
function renderVersionList(releases) {
|
|
var latestEntry = null, tagged = [];
|
|
releases.forEach(function(r) {
|
|
if (r.tag_name === 'latest') { latestEntry = r; } else { tagged.push(r); }
|
|
});
|
|
tagged.sort(compareVersionsDesc);
|
|
var ordered = latestEntry ? [latestEntry].concat(tagged) : tagged;
|
|
|
|
if (ordered.length === 0) {
|
|
loadingEl.textContent = 'No releases found.';
|
|
return;
|
|
}
|
|
|
|
versionList.innerHTML = '';
|
|
ordered.forEach(function(release, idx) {
|
|
var item = document.createElement('div');
|
|
item.className = 'version-item' + (idx === 0 ? ' selected' : '');
|
|
|
|
var dot = document.createElement('div');
|
|
dot.className = 'version-dot';
|
|
|
|
var info = document.createElement('div');
|
|
info.className = 'version-info';
|
|
|
|
var nameRow = document.createElement('div');
|
|
nameRow.className = 'version-name';
|
|
nameRow.textContent = release.tag_name;
|
|
if (release.prerelease) {
|
|
var badge = document.createElement('span');
|
|
badge.className = 'badge';
|
|
badge.textContent = 'pre-release';
|
|
nameRow.appendChild(badge);
|
|
}
|
|
|
|
var dateRow = document.createElement('div');
|
|
dateRow.className = 'version-date';
|
|
dateRow.textContent = formatDate(release.published_at);
|
|
|
|
info.appendChild(nameRow);
|
|
info.appendChild(dateRow);
|
|
item.appendChild(dot);
|
|
item.appendChild(info);
|
|
|
|
item.addEventListener('click', function() {
|
|
versionList.querySelectorAll('.version-item').forEach(function(el) {
|
|
el.classList.remove('selected');
|
|
});
|
|
item.classList.add('selected');
|
|
selectRelease(release);
|
|
});
|
|
|
|
versionList.appendChild(item);
|
|
});
|
|
|
|
loadingEl.style.display = 'none';
|
|
versionList.style.display = 'block';
|
|
selectRelease(ordered[0]);
|
|
}
|
|
|
|
fetch('https://api.github.com/repos/vtalpaert/esp-scope/releases')
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (!Array.isArray(data) || data.length === 0) {
|
|
loadingEl.textContent = 'No releases found.';
|
|
return;
|
|
}
|
|
renderVersionList(data);
|
|
})
|
|
.catch(function() {
|
|
loadingEl.textContent = 'Could not load releases. Check your connection.';
|
|
});
|
|
|
|
if (!('serial' in navigator)) {
|
|
unsupported.style.display = 'block';
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|