89 lines
3.9 KiB
HTML
89 lines
3.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>xteink web emulator</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<p class="eyebrow">ESP32-C3 emulator</p>
|
|
<h1>xteink X3 / X4</h1>
|
|
<p>Choose a CrossPoint firmware <code>.bin</code> (the ~5 MB release app image, or a full 16 MB flash) and boot it locally in your browser.</p>
|
|
</header>
|
|
|
|
<form id="boot-form" class="boot-panel">
|
|
<label>
|
|
Firmware (.bin)
|
|
<input id="firmware" name="firmware" type="file" accept=".bin,application/octet-stream" required>
|
|
</label>
|
|
<label>
|
|
Device
|
|
<select id="variant" name="variant">
|
|
<option value="x3">X3</option>
|
|
<option value="x4">X4 (display stub)</option>
|
|
</select>
|
|
</label>
|
|
<button id="boot" type="submit">Boot firmware</button>
|
|
</form>
|
|
|
|
<p id="status" class="status" role="status">Waiting for firmware.</p>
|
|
|
|
<div class="workspace">
|
|
<section class="device" aria-label="Emulated xteink device">
|
|
<div class="device-frame" aria-label="Device controls">
|
|
<button type="button" class="btn-power" data-button="power" disabled aria-label="Power"></button>
|
|
<button type="button" class="btn-side btn-up" data-button="up" disabled aria-label="Up"></button>
|
|
<div class="screen-shell">
|
|
<canvas id="screen" width="528" height="792" aria-label="E-ink display"></canvas>
|
|
</div>
|
|
<button type="button" class="btn-side btn-down" data-button="down" disabled aria-label="Down"></button>
|
|
<div class="btn-bottom">
|
|
<button type="button" data-button="back" disabled aria-label="Back"></button>
|
|
<button type="button" data-button="confirm" disabled aria-label="OK"></button>
|
|
<button type="button" data-button="left" disabled aria-label="Left"></button>
|
|
<button type="button" data-button="right" disabled aria-label="Right"></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="inspector" aria-label="Emulator inspector">
|
|
<div class="tabs" role="tablist" aria-label="Emulator information">
|
|
<button id="tab-logs" type="button" role="tab" aria-selected="true" aria-controls="panel-logs" data-tab="logs">Logs</button>
|
|
<button id="tab-files" type="button" role="tab" aria-selected="false" aria-controls="panel-files" data-tab="files">Files</button>
|
|
<button id="tab-debug" type="button" role="tab" aria-selected="false" aria-controls="panel-debug" data-tab="debug">Debug</button>
|
|
</div>
|
|
|
|
<div id="panel-logs" class="tab-panel" role="tabpanel" aria-labelledby="tab-logs">
|
|
<div class="log-header">
|
|
<span>QEMU log</span>
|
|
<button id="log-clear" type="button">Clear</button>
|
|
</div>
|
|
<pre id="log" class="log" role="log" aria-live="polite"></pre>
|
|
</div>
|
|
|
|
<div id="panel-files" class="tab-panel" role="tabpanel" aria-labelledby="tab-files" hidden>
|
|
<div id="file-list" class="file-list" aria-label="SD card files"></div>
|
|
<pre id="file-preview" class="file-preview">Select a file to view it.</pre>
|
|
</div>
|
|
|
|
<div id="panel-debug" class="tab-panel" role="tabpanel" aria-labelledby="tab-debug" hidden>
|
|
<dl class="debug-stats">
|
|
<div><dt>WASM heap committed</dt><dd id="debug-wasm-heap">Not started</dd></div>
|
|
<div><dt>Browser JS heap</dt><dd id="debug-js-heap">Unavailable</dd></div>
|
|
<div><dt>Visible MEMFS files</dt><dd id="debug-memfs">Not started</dd></div>
|
|
<div><dt>SD files stored</dt><dd id="debug-sd-files">1 file</dd></div>
|
|
<div><dt>Logical SD capacity</dt><dd>32 GiB</dd></div>
|
|
</dl>
|
|
<p class="debug-note">Committed heap is allocated WASM memory, not exact live malloc usage.</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<script type="module" src="app.js"></script>
|
|
</body>
|
|
</html>
|