| import { ASSETS } from './assets.js'; |
|
|
| const $ = (id) => document.getElementById(id); |
| const worker = new Worker(new URL('./js/worker.js', import.meta.url), { type: 'module' }); |
| let ready = false, running = false, paused = false; |
| let files = []; |
| let curExample = null; |
|
|
| |
| async function gunzipB64(b64) { |
| const bin = Uint8Array.from(atob(b64), (c) => c.charCodeAt(0)); |
| const ds = new DecompressionStream('gzip'); |
| const stream = new Blob([bin]).stream().pipeThrough(ds); |
| return new Uint8Array(await new Response(stream).arrayBuffer()); |
| } |
| const hex = (n) => '0x' + n.toString(16).toUpperCase(); |
| function setStat(t) { $('stat').textContent = t; } |
|
|
| |
| async function init() { |
| setStat('載入 ROM…'); |
| const [pro, app, wasm] = await Promise.all([gunzipB64(ASSETS.rom_pro), gunzipB64(ASSETS.rom_app), gunzipB64(ASSETS.wasm)]); |
| worker.postMessage({ type: 'roms', pro: pro.buffer, app: app.buffer, wasm: wasm.buffer }, [pro.buffer, app.buffer, wasm.buffer]); |
| const sel = $('example'); |
| for (const ex of ASSETS.examples) { const o = document.createElement('option'); o.value = ex.id; o.textContent = ex.title; sel.appendChild(o); } |
| buildKbd(); buildGpio(); buildBoard(); |
| } |
|
|
| worker.onmessage = (e) => { |
| const m = e.data; |
| switch (m.type) { |
| case 'ready': ready = true; setStat('就緒 — 按「載入並執行」'); if (!window.__noAuto) runExample($('example').value || ASSETS.examples[0].id); break; |
| case 'booted': running = true; setStat('執行中…'); $('btnPause').textContent = '⏸ 暫停'; paused = false; break; |
| case 'frame': drawFrame(m); break; |
| case 'uart': if (m.n === 0) appendSerial(m.data); break; |
| case 'status': onStatus(m); break; |
| case 'gpio': updateGpio(m); break; |
| case 'flash': { const a = document.createElement('a'); a.href = URL.createObjectURL(new Blob([m.data])); a.download = 'esp32-flash.bin'; a.click(); break; } |
| case 'error': setStat('錯誤: ' + m.text); break; |
| } |
| }; |
|
|
| function buildFlash(parts, sizeMB) { |
| const size = sizeMB * 1024 * 1024; |
| const img = new Uint8Array(size).fill(0xFF); |
| for (const p of parts) { |
| if (p.addr + p.data.length > size) throw new Error(p.name + ' 超出 flash 大小'); |
| img.set(p.data, p.addr); |
| } |
| return img; |
| } |
| function startBoot(flash, psram) { |
| $('serial').textContent = ''; |
| worker.postMessage({ type: 'boot', flash: flash.buffer, psram, cpi: 1 }, [flash.buffer]); |
| $('noSignal').style.display = 'flex'; |
| } |
| async function runExample(id) { |
| const ex = ASSETS.examples.find((x) => x.id === id); if (!ex) return; |
| curExample = ex; setStat('解壓縮 ' + ex.title + '…'); |
| const flash = await gunzipB64(ex.flash); |
| $('chkPsram').checked = !!ex.psram; |
| $('selFlash').value = String(Math.max(2, Math.min(16, flash.length / 1048576))); |
| files = [{ name: ex.id + '.flash.bin', data: flash.slice(), addr: 0, fromExample: true }]; renderFiles(); |
| startBoot(flash, !!ex.psram); |
| } |
| $('btnRun').onclick = () => { if (ready) runExample($('example').value); }; |
| $('example').onchange = () => { if (ready) runExample($('example').value); }; |
| $('btnReset').onclick = () => worker.postMessage({ type: 'reset' }); |
| $('btnPause').onclick = () => { paused = !paused; worker.postMessage({ type: 'pause', value: paused }); $('btnPause').textContent = paused ? '▶ 繼續' : '⏸ 暫停'; }; |
| $('chkTurbo').onchange = (e) => worker.postMessage({ type: 'turbo', value: e.target.checked }); |
| $('selSpeed').onchange = (e) => worker.postMessage({ type: 'speed', value: parseFloat(e.target.value) }); |
| $('btnSave').onclick = () => worker.postMessage({ type: 'getFlash' }); |
| $('btnFiles').onclick = () => { $('filesBox').open = true; $('fileIn').click(); }; |
|
|
| |
| function guessAddr(name, data) { |
| const n = name.toLowerCase(); |
| if (data.length >= 0x100000 && (data.length & (data.length - 1)) === 0) return 0; |
| if (n.includes('bootloader')) return 0x1000; |
| if (n.includes('partition')) return 0x8000; |
| if (n.includes('boot_app0') || n.includes('otadata')) return 0xE000; |
| if (data[0] === 0xE9) return 0x10000; |
| if (n.endsWith('.img') || n.includes('disk') || n.includes('fat')) return 0x200000; |
| return 0x10000; |
| } |
| function renderFiles() { |
| const tb = $('fileTbl').querySelector('tbody'); tb.innerHTML = ''; |
| files.forEach((f, i) => { |
| const tr = document.createElement('tr'); |
| tr.innerHTML = `<td>${f.name}</td><td><input value="${hex(f.addr)}"></td><td>${f.data.length}</td><td><button>✕</button></td>`; |
| tr.querySelector('input').onchange = (e) => { const v = parseInt(e.target.value, 16) || parseInt(e.target.value, 10) || 0; f.addr = v; e.target.value = hex(v); }; |
| tr.querySelector('button').onclick = () => { files.splice(i, 1); renderFiles(); }; |
| tb.appendChild(tr); |
| }); |
| } |
| async function addFiles(list) { |
| $('filesBox').open = true; |
| for (const file of list) { |
| const data = new Uint8Array(await file.arrayBuffer()); |
| files = files.filter((f) => !f.fromExample); |
| files.push({ name: file.name, data, addr: guessAddr(file.name, data) }); |
| } |
| |
| if (!files.some((f) => f.addr === 0) && !files.some((f) => f.addr === 0x1000)) addDefaults(); |
| renderFiles(); |
| } |
| async function addDefaults() { |
| const defs = [['bootloader.bin', ASSETS.bootloader, 0x1000], ['partitions.bin', ASSETS.partitions, 0x8000], ['boot_app0.bin', ASSETS.boot_app0, 0xE000]]; |
| for (const [name, b64, addr] of defs) if (!files.some((f) => f.addr === addr)) files.push({ name, data: await gunzipB64(b64), addr }); |
| renderFiles(); |
| } |
| $('fileIn').onchange = (e) => { addFiles(e.target.files); e.target.value = ''; }; |
| $('btnAddDefaults').onclick = addDefaults; |
| $('btnBoot').onclick = () => { |
| try { |
| const mb = parseInt($('selFlash').value); |
| const full = files.find((f) => f.addr === 0 && f.data.length >= 0x100000); |
| const flash = buildFlash(files, full ? Math.max(mb, Math.ceil(full.data.length / 1048576)) : mb); |
| startBoot(flash, $('chkPsram').checked); |
| } catch (err) { setStat('錯誤: ' + err.message); } |
| }; |
| document.addEventListener('dragover', (e) => e.preventDefault()); |
| document.addEventListener('drop', (e) => { e.preventDefault(); if (e.dataTransfer.files.length) { $('filesBox').open = true; addFiles(e.dataTransfer.files); } }); |
|
|
| |
| const canvas = $('screen'), ctx = canvas.getContext('2d'); |
| let lastW = 0, lastH = 0, frames = 0; |
| let pendingFrame = null, raf = 0; |
| function drawFrame(m) { |
| if (pendingFrame) worker.postMessage({ type: 'frameAck' }); |
| pendingFrame = m; |
| if (!raf) raf = requestAnimationFrame(paint); |
| } |
| function paint() { |
| raf = 0; const m = pendingFrame; if (!m) return; pendingFrame = null; |
| if (m.w !== lastW || m.h !== lastH) { canvas.width = m.w; canvas.height = m.h; lastW = m.w; lastH = m.h; $('vgaInfo').textContent = `VGA ${m.w}×${m.h}`; } |
| ctx.putImageData(new ImageData(new Uint8ClampedArray(m.data.buffer), m.w, m.h), 0, 0); |
| $('noSignal').style.display = 'none'; |
| frames++; |
| worker.postMessage({ type: 'frameAck' }); |
| } |
| $('chkStretch').onchange = (e) => canvas.classList.toggle('native', !e.target.checked); |
| $('btnFull').onclick = () => { const w = $('screenWrap'); if (document.fullscreenElement) document.exitFullscreen(); else w.requestFullscreen?.(); }; |
|
|
| |
| const dec = new TextDecoder('utf-8'); |
| function appendSerial(bytes) { |
| const el = $('serial'); const atEnd = el.scrollTop + el.clientHeight >= el.scrollHeight - 8; |
| el.textContent += dec.decode(bytes, { stream: true }).replace(/\r/g, ''); |
| if (el.textContent.length > 200000) el.textContent = el.textContent.slice(-100000); |
| if (atEnd) el.scrollTop = el.scrollHeight; |
| } |
| $('serialIn').onkeydown = (e) => { if (e.key === 'Enter') { const t = e.target.value + '\n'; worker.postMessage({ type: 'uartRx', n: 0, data: new TextEncoder().encode(t) }); e.target.value = ''; } }; |
| $('btnSerialClr').onclick = () => { $('serial').textContent = ''; }; |
|
|
| |
| function onStatus(m) { |
| const s = m.virtMs / 1000; |
| setStat(`虛擬時間 ${s.toFixed(1)}s · CPU ${m.cpuMHz.toFixed(0)}MHz · ${m.mips.toFixed(0)} MIPS · 速度 ${(m.ratio * 100).toFixed(0)}% · ${m.engine === 'wasm' ? 'WASM' : 'JS'} 核心`); |
| } |
|
|
| |
| const ROLE = {}; |
| [[22, 'R1'], [21, 'R0'], [19, 'G1'], [18, 'G0'], [5, 'B1'], [4, 'B0'], [23, 'HS'], [15, 'VS'], [33, 'KCLK'], [32, 'KDAT'], [26, 'MCLK'], [27, 'MDAT'], [25, 'AUD'], [13, 'SDCS'], [12, 'MOSI'], [2, 'MISO'], [14, 'SCK'], [1, 'TX0'], [3, 'RX0']].forEach(([p, r]) => { ROLE[p] = r; }); |
| function buildGpio() { |
| const g = $('gpioGrid'); g.innerHTML = ''; |
| for (let i = 0; i < 40; i++) { if ([20, 24, 28, 29, 30, 31].includes(i)) continue; const d = document.createElement('div'); d.className = 'pin'; d.id = 'pin' + i; d.textContent = i + (ROLE[i] ? '\n' + ROLE[i] : ''); d.style.whiteSpace = 'pre'; d.title = 'GPIO' + i + (ROLE[i] ? ' (' + ROLE[i] + ')' : ''); g.appendChild(d); } |
| } |
| function buildBoard() { |
| const svg = $('board'); const NS = 'http://www.w3.org/2000/svg'; |
| const add = (tag, attrs, text) => { const e = document.createElementNS(NS, tag); for (const k in attrs) e.setAttribute(k, attrs[k]); if (text) e.textContent = text; svg.appendChild(e); return e; }; |
| add('rect', { x: 4, y: 4, width: 352, height: 142, rx: 8, fill: '#0f2a1a', stroke: '#2f7a4c' }); |
| add('rect', { x: 130, y: 34, width: 100, height: 72, rx: 4, fill: '#14202c', stroke: '#6aa' }); |
| add('text', { x: 180, y: 66, 'text-anchor': 'middle', fill: '#9cd', 'font-size': 11 }, 'ESP32'); |
| add('text', { x: 180, y: 80, 'text-anchor': 'middle', fill: '#789', 'font-size': 8 }, 'WROVER · 4MB PSRAM'); |
| const pins = (title, x, y, list) => { |
| add('text', { x, y: y - 6, fill: '#7fd', 'font-size': 8 }, title); |
| list.forEach(([g, name], i) => { |
| add('circle', { id: 'ind' + g, cx: x + 4, cy: y + 7 + i * 12, r: 3.5, fill: '#234', stroke: '#6a8' }); |
| add('text', { x: x + 11, y: y + 10 + i * 12, fill: '#bde', 'font-size': 8 }, name + ' G' + g); |
| }); |
| }; |
| pins('VGA (DB15)', 12, 22, [[22, 'R1'], [21, 'R0'], [19, 'G1'], [18, 'G0'], [5, 'B1'], [4, 'B0'], [23, 'HS'], [15, 'VS']]); |
| pins('PS/2 KBD', 250, 22, [[33, 'CLK'], [32, 'DATA']]); |
| pins('PS/2 MOUSE', 250, 58, [[26, 'CLK'], [27, 'DATA']]); |
| pins('SD (SPI)', 250, 96, [[13, 'CS'], [12, 'MOSI'], [2, 'MISO'], [14, 'SCK']]); |
| pins('AUDIO', 135, 118, [[25, 'DAC']]); |
| pins('UART0', 135, 20, []); |
| } |
| function updateGpio(m) { |
| for (const g of [22, 21, 19, 18, 5, 4, 23, 15, 33, 32, 26, 27, 13, 12, 2, 14, 25]) { const e = document.getElementById('ind' + g); if (e) e.setAttribute('fill', m.lv[g] ? (m.drv[g] >= 0 ? '#3ddc84' : '#2a9d5c') : '#234'); } |
| for (let i = 0; i < 40; i++) { const d = $('pin' + i); if (!d) continue; d.classList.toggle('hi', !!m.lv[i]); d.classList.toggle('drv', m.drv[i] >= 0); } |
| } |
|
|
| |
| const KB = [ |
| [['Esc', 'Escape'], ['F1', 'F1'], ['F2', 'F2'], ['F3', 'F3'], ['F4', 'F4'], ['F5', 'F5'], ['F6', 'F6'], ['F7', 'F7'], ['F8', 'F8'], ['F9', 'F9'], ['F10', 'F10'], ['F11', 'F11'], ['F12', 'F12']], |
| [['`', 'Backquote'], ['1', 'Digit1'], ['2', 'Digit2'], ['3', 'Digit3'], ['4', 'Digit4'], ['5', 'Digit5'], ['6', 'Digit6'], ['7', 'Digit7'], ['8', 'Digit8'], ['9', 'Digit9'], ['0', 'Digit0'], ['-', 'Minus'], ['=', 'Equal'], ['⌫', 'Backspace', 2]], |
| [['Tab', 'Tab', 1.5], ['Q', 'KeyQ'], ['W', 'KeyW'], ['E', 'KeyE'], ['R', 'KeyR'], ['T', 'KeyT'], ['Y', 'KeyY'], ['U', 'KeyU'], ['I', 'KeyI'], ['O', 'KeyO'], ['P', 'KeyP'], ['[', 'BracketLeft'], [']', 'BracketRight'], ['\\', 'Backslash', 1.5]], |
| [['Caps', 'CapsLock', 1.8], ['A', 'KeyA'], ['S', 'KeyS'], ['D', 'KeyD'], ['F', 'KeyF'], ['G', 'KeyG'], ['H', 'KeyH'], ['J', 'KeyJ'], ['K', 'KeyK'], ['L', 'KeyL'], [';', 'Semicolon'], ["'", 'Quote'], ['Enter', 'Enter', 2.2]], |
| [['Shift', 'ShiftLeft', 2.3, 1], ['Z', 'KeyZ'], ['X', 'KeyX'], ['C', 'KeyC'], ['V', 'KeyV'], ['B', 'KeyB'], ['N', 'KeyN'], ['M', 'KeyM'], [',', 'Comma'], ['.', 'Period'], ['/', 'Slash'], ['Shift', 'ShiftRight', 2.7, 1]], |
| [['Ctrl', 'ControlLeft', 1.6, 1], ['Alt', 'AltLeft', 1.6, 1], ['Space', 'Space', 7], ['Alt', 'AltRight', 1.4, 1], ['Ctrl', 'ControlRight', 1.6, 1], ['←', 'ArrowLeft'], ['↑', 'ArrowUp'], ['↓', 'ArrowDown'], ['→', 'ArrowRight']], |
| [['Ins', 'Insert'], ['Del', 'Delete'], ['Home', 'Home'], ['End', 'End'], ['PgUp', 'PageUp'], ['PgDn', 'PageDown'], ['Num', 'NumLock'], ['Scr', 'ScrollLock'], ['PrtSc', 'PrintScreen']], |
| ]; |
| const latched = new Set(); |
| function sendKey(code, down) { worker.postMessage({ type: 'key', code, down }); } |
| function tap(code) { sendKey(code, true); setTimeout(() => sendKey(code, false), 55); } |
| function buildKbd() { |
| const root = $('vkbd'); root.innerHTML = ''; |
| for (const row of KB) { |
| const r = document.createElement('div'); r.className = 'krow'; |
| for (const [label, code, w = 1, mod] of row) { |
| const b = document.createElement('button'); b.className = 'key' + (mod ? ' mod' : ''); b.textContent = label; b.style.flexGrow = w; b.dataset.code = code; |
| const press = (e) => { |
| e.preventDefault(); |
| if (mod) { |
| if (latched.has(code)) { latched.delete(code); b.classList.remove('latched'); sendKey(code, false); } else { latched.add(code); b.classList.add('latched'); sendKey(code, true); } |
| } else { |
| sendKey(code, true); b.classList.add('down'); |
| const up = () => { sendKey(code, false); b.classList.remove('down'); for (const c of [...latched]) { latched.delete(c); sendKey(c, false); } root.querySelectorAll('.latched').forEach((x) => x.classList.remove('latched')); window.removeEventListener('pointerup', up); b.removeEventListener('pointerleave', up); }; |
| window.addEventListener('pointerup', up); b.addEventListener('pointerleave', up); |
| } |
| }; |
| b.addEventListener('pointerdown', press); |
| r.appendChild(b); |
| } |
| root.appendChild(r); |
| } |
| } |
|
|
| |
| let capture = false; |
| const wrap = $('screenWrap'); |
| function setCapture(v) { capture = v; wrap.classList.toggle('focus', v); if (v) wrap.focus(); } |
| wrap.addEventListener('click', () => setCapture(true)); |
| document.addEventListener('keydown', (e) => { |
| if (!capture) return; |
| if (e.target && /INPUT|SELECT|TEXTAREA/.test(e.target.tagName)) return; |
| if (e.code === 'Escape' && e.shiftKey) { setCapture(false); return; } |
| e.preventDefault(); if (!e.repeat) sendKey(e.code, true); else sendKey(e.code, true); |
| }, true); |
| document.addEventListener('keyup', (e) => { if (!capture) return; if (e.target && /INPUT|SELECT|TEXTAREA/.test(e.target.tagName)) return; e.preventDefault(); sendKey(e.code, false); }, true); |
| document.addEventListener('click', (e) => { if (!wrap.contains(e.target) && !$('vkbd').contains(e.target)) setCapture(false); }, true); |
|
|
| |
| let mdown = 0, lastMx = 0, lastMy = 0; |
| canvas.addEventListener('pointerdown', (e) => { mdown = e.buttons; lastMx = e.clientX; lastMy = e.clientY; }); |
| canvas.addEventListener('pointermove', (e) => { |
| if (!e.buttons && !mdown) return; |
| const sx = (canvas.width / canvas.getBoundingClientRect().width), sy = (canvas.height / canvas.getBoundingClientRect().height); |
| worker.postMessage({ type: 'mouse', dx: Math.round((e.clientX - lastMx) * sx), dy: -Math.round((e.clientY - lastMy) * sy), buttons: e.buttons }); |
| lastMx = e.clientX; lastMy = e.clientY; |
| }); |
| window.addEventListener('pointerup', () => { if (mdown) { mdown = 0; worker.postMessage({ type: 'mouse', dx: 0, dy: 0, buttons: 0 }); } }); |
|
|
| init(); |
|
|
