Spaces:
Runtime error
Runtime error
| <!DOCTYPE html> | |
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BioSense FPGA 调试终端</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'fpga-bg': '#0f172a', | |
| 'fpga-panel': '#1e293b', | |
| 'fpga-border': '#334155', | |
| 'fpga-accent': '#0ea5e9', // Sky 500 | |
| 'fpga-success': '#10b981', // Emerald 500 | |
| 'fpga-warning': '#f59e0b', // Amber 500 | |
| 'fpga-danger': '#ef4444', // Red 500 | |
| 'fpga-text': '#e2e8f0', | |
| 'fpga-dim': '#64748b', | |
| }, | |
| fontFamily: { | |
| mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', "Liberation Mono", "Courier New", 'monospace'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0f172a; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #334155; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #475569; | |
| } | |
| /* CRT Scanline Effect */ | |
| .crt::before { | |
| content: " "; | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); | |
| z-index: 2; | |
| background-size: 100% 2px, 3px 100%; | |
| pointer-events: none; | |
| } | |
| .canvas-container { | |
| background-image: | |
| linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| /* Range Slider Styling */ | |
| input[type=range] { | |
| -webkit-appearance: none; | |
| background: transparent; | |
| } | |
| input[type=range]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| height: 16px; | |
| width: 16px; | |
| border-radius: 50%; | |
| background: #0ea5e9; | |
| cursor: pointer; | |
| margin-top: -6px; | |
| } | |
| input[type=range]::-webkit-slider-runnable-track { | |
| width: 100%; | |
| height: 4px; | |
| cursor: pointer; | |
| background: #334155; | |
| border-radius: 2px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-fpga-bg text-fpga-text font-sans overflow-hidden h-screen flex flex-col selection:bg-fpga-accent selection:text-white"> | |
| <!-- Top Navigation / Toolbar --> | |
| <header class="h-14 bg-fpga-panel border-b border-fpga-border flex items-center px-4 justify-between shrink-0 z-20"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-8 h-8 bg-gradient-to-br from-blue-600 to-cyan-400 rounded flex items-center justify-center shadow-lg shadow-blue-500/20"> | |
| <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg> | |
| </div> | |
| <div> | |
| <h1 class="text-sm font-bold tracking-wide text-white">BioSense <span class="text-fpga-accent">Debugger</span></h1> | |
| <div class="flex items-center gap-2 text-[10px] text-fpga-dim font-mono"> | |
| <span class="w-2 h-2 rounded-full bg-fpga-success animate-pulse"></span> | |
| FPGA DEVKIT v4.2 [READY] | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <!-- Connection Controls --> | |
| <div class="flex bg-fpga-bg rounded p-1 border border-fpga-border"> | |
| <button onclick="app.toggleConnection()" id="btn-connect" class="px-3 py-1 text-xs font-mono rounded hover:bg-fpga-border transition-colors text-fpga-success">CONNECT_JTAG</button> | |
| <div class="w-px bg-fpga-border mx-1"></div> | |
| <button class="px-3 py-1 text-xs font-mono rounded hover:bg-fpga-border transition-colors text-fpga-accent">FLASH_BITSTREAM</button> | |
| </div> | |
| <!-- View Controls --> | |
| <div class="flex bg-fpga-bg rounded p-1 border border-fpga-border"> | |
| <button onclick="app.setMode('digital')" class="px-3 py-1 text-xs font-mono rounded hover:bg-fpga-border transition-colors text-fpga-dim hover:text-white" id="mode-digital">DIGITAL</button> | |
| <button onclick="app.setMode('mixed')" class="px-3 py-1 text-xs font-mono rounded bg-fpga-border text-white transition-colors" id="mode-mixed">MIXED</button> | |
| <button onclick="app.setMode('fft')" class="px-3 py-1 text-xs font-mono rounded hover:bg-fpga-border transition-colors text-fpga-dim hover:text-white" id="mode-fft">FFT</button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Workspace --> | |
| <div class="flex-1 flex overflow-hidden"> | |
| <!-- Left Sidebar: Channels --> | |
| <aside class="w-64 bg-fpga-panel border-r border-fpga-border flex flex-col shrink-0 z-10"> | |
| <div class="p-3 border-b border-fpga-border flex justify-between items-center"> | |
| <span class="text-xs font-bold text-fpga-dim uppercase tracking-wider">Channels</span> | |
| <span class="text-[10px] bg-fpga-bg px-2 py-0.5 rounded border border-fpga-border text-fpga-accent">8 ACTIVE</span> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-2 space-y-2" id="channel-list"> | |
| <!-- Channels injected by JS --> | |
| </div> | |
| <div class="p-3 border-t border-fpga-border bg-fpga-bg/50"> | |
| <div class="text-[10px] text-fpga-dim mb-2 uppercase font-bold">Trigger Settings</div> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <div class="w-2 h-2 rounded-full bg-fpga-warning"></div> | |
| <span class="text-xs font-mono">CH2 Rising</span> | |
| </div> | |
| <div class="h-1 w-full bg-fpga-border rounded overflow-hidden"> | |
| <div class="h-full bg-fpga-warning w-1/3"></div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Center: Canvas Display --> | |
| <main class="flex-1 flex flex-col min-w-0 bg-black relative"> | |
| <!-- Toolbar Overlay --> | |
| <div class="absolute top-4 left-4 right-4 flex justify-between pointer-events-none z-10"> | |
| <div class="bg-fpga-panel/90 backdrop-blur border border-fpga-border rounded px-3 py-1 pointer-events-auto shadow-lg"> | |
| <span class="text-xs text-fpga-dim font-mono mr-2">TIMEBASE:</span> | |
| <span class="text-xs text-white font-mono font-bold" id="timebase-display">50 ms/div</span> | |
| </div> | |
| <div class="bg-fpga-panel/90 backdrop-blur border border-fpga-border rounded px-3 py-1 pointer-events-auto shadow-lg flex gap-2"> | |
| <button onclick="app.zoomTime(1.2)" class="hover:text-fpga-accent">-</button> | |
| <button onclick="app.zoomTime(0.8)" class="hover:text-fpga-accent">+</button> | |
| </div> | |
| </div> | |
| <!-- Canvas Wrapper --> | |
| <div class="flex-1 relative canvas-container overflow-hidden crt" id="canvas-wrapper"> | |
| <canvas id="mainCanvas" class="absolute top-0 left-0 w-full h-full block"></canvas> | |
| <!-- Floating Stats --> | |
| <div class="absolute bottom-4 left-4 bg-fpga-panel/80 backdrop-blur border border-fpga-border rounded p-3 shadow-lg"> | |
| <div class="grid grid-cols-2 gap-x-6 gap-y-1 text-xs font-mono"> | |
| <span class="text-fpga-dim">FPS:</span> <span class="text-fpga-accent text-right" id="fps-counter">60</span> | |
| <span class="text-fpga-dim">Samples:</span> <span class="text-white text-right">4096</span> | |
| <span class="text-fpga-dim">Bandwidth:</span> <span class="text-white text-right">1.2 GB/s</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Status Bar --> | |
| <div class="h-8 bg-fpga-panel border-t border-fpga-border flex items-center px-4 justify-between text-[10px] font-mono shrink-0"> | |
| <div class="flex gap-4"> | |
| <span class="text-fpga-success">SYSTEM OK</span> | |
| <span class="text-fpga-dim">PLL_LOCKED</span> | |
| <span class="text-fpga-dim">ADC_0: 0x4F2A</span> | |
| </div> | |
| <div class="flex gap-4"> | |
| <span class="text-fpga-warning">WARN: FAN_SPEED > 80%</span> | |
| <span class="text-fpga-dim">uptime: 14h 22m</span> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Right Sidebar: Properties & Controls --> | |
| <aside class="w-72 bg-fpga-panel border-l border-fpga-border flex flex-col shrink-0 z-10 overflow-y-auto"> | |
| <!-- FPGA Register Map --> | |
| <div class="p-4 border-b border-fpga-border"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="text-xs font-bold text-fpga-accent uppercase">Register Map</h3> | |
| <button class="text-[10px] text-fpga-dim hover:text-white">REFRESH</button> | |
| </div> | |
| <div class="space-y-1 font-mono text-[11px]" id="register-list"> | |
| <!-- Registers injected by JS --> | |
| </div> | |
| </div> | |
| <!-- Sensor Configuration --> | |
| <div class="p-4 border-b border-fpga-border"> | |
| <h3 class="text-xs font-bold text-fpga-dim uppercase mb-3">Bio-Sensor Config</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-[10px] text-fpga-dim mb-1">Gain Control (dB)</label> | |
| <div class="flex items-center gap-2"> | |
| <input type="range" min="0" max="60" value="24" class="w-full" oninput="document.getElementById('gain-val').innerText = this.value"> | |
| <span id="gain-val" class="text-xs font-mono w-6 text-right">24</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-[10px] text-fpga-dim mb-1">Filter Cutoff (Hz)</label> | |
| <select class="w-full bg-fpga-bg border border-fpga-border rounded text-xs p-1 text-white outline-none focus:border-fpga-accent"> | |
| <option>100 Hz</option> | |
| <option>1 kHz</option> | |
| <option selected>10 kHz</option> | |
| <option>50 kHz</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <label class="text-xs text-fpga-dim">Impedance Check</label> | |
| <button class="w-8 h-4 bg-fpga-accent rounded-full relative transition-colors" onclick="this.classList.toggle('bg-fpga-dim'); this.classList.toggle('bg-fpga-accent')"> | |
| <div class="absolute right-0.5 top-0.5 w-3 h-3 bg-white rounded-full shadow"></div> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Data Export --> | |
| <div class="p-4"> | |
| <h3 class="text-xs font-bold text-fpga-dim uppercase mb-3">Data Export</h3> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="bg-fpga-bg border border-fpga-border text-xs py-2 rounded hover:bg-fpga-border hover:text-white transition-colors">.CSV</button> | |
| <button class="bg-fpga-bg border border-fpga-border text-xs py-2 rounded hover:bg-fpga-border hover:text-white transition-colors">.WAV</button> | |
| <button class="col-span-2 bg-fpga-accent/20 border border-fpga-accent text-fpga-accent text-xs py-2 rounded hover:bg-fpga-accent hover:text-white transition-colors font-bold">CAPTURE FRAME</button> | |
| </div> | |
| </div> | |
| </aside> | |
| </div> | |
| <script> | |
| /** | |
| * BioSense FPGA Debugger Logic | |
| * Handles Canvas rendering, simulated data generation, and UI interactions. | |
| */ | |
| const app = { | |
| canvas: null, | |
| ctx: null, | |
| width: 0, | |
| height: 0, | |
| dpr: 1, | |
| // State | |
| channels: [], | |
| registers: [], | |
| isRunning: true, | |
| timeScale: 0.05, // seconds per pixel approx | |
| mode: 'mixed', // digital, mixed, fft | |
| dataOffset: 0, | |
| init() { | |
| this.canvas = document.getElementById('mainCanvas'); | |
| this.ctx = this.canvas.getContext('2d'); | |
| this.dpr = window.devicePixelRatio || 1; | |
| // Initialize Channels | |
| this.channels = [ | |
| { id: 0, name: 'CLK_SYS', type: 'digital', color: '#ef4444', visible: true, data: [] }, | |
| { id: 1, name: 'STATE_MACH', type: 'digital', color: '#f59e0b', visible: true, data: [] }, | |
| { id: 2, name: 'ADC_RAW', type: 'analog', color: '#0ea5e9', visible: true, data: [], offset: 0 }, | |
| { id: 3, name: 'FILTER_OUT', type: 'analog', color: '#10b981', visible: true, data: [], offset: 0 }, | |
| { id: 4, name: 'IMPEDANCE', type: 'analog', color: '#a855f7', visible: false, data: [], offset: 0 }, | |
| ]; | |
| // Initialize Registers | |
| this.registers = [ | |
| { addr: '0x00', name: 'CTRL_REG', val: '0x0001' }, | |
| { addr: '0x04', name: 'STAT_REG', val: '0x00F2' }, | |
| { addr: '0x08', name: 'ADC_DATA', val: '0x1A4F' }, | |
| { addr: '0x0C', name: 'DAC_VOL', val: '0x0800' }, | |
| { addr: '0x10', name: 'I2C_STAT', val: '0x0000' }, | |
| { addr: '0x14', name: 'PLL_DIV', val: '0x0010' }, | |
| { addr: '0x18', name: 'FIFO_CNT', val: '0x03FF' }, | |
| { addr: '0x1C', name: 'IRQ_MASK', val: '0x0000' }, | |
| ]; | |
| this.resize(); | |
| window.addEventListener('resize', () => this.resize()); | |
| this.renderUI(); | |
| this.loop(); | |
| }, | |
| resize() { | |
| const parent = this.canvas.parentElement; | |
| this.width = parent.clientWidth; | |
| this.height = parent.clientHeight; | |
| this.canvas.width = this.width * this.dpr; | |
| this.canvas.height = this.height * this.dpr; | |
| this.canvas.style.width = `${this.width}px`; | |
| this.canvas.style.height = `${this.height}px`; | |
| this.ctx.scale(this.dpr, this.dpr); | |
| }, | |
| // Generate simulated data points | |
| generateData() { | |
| const now = Date.now(); | |
| this.channels.forEach(ch => { | |
| // Keep a buffer of data points. We use a circular buffer concept but simple array push is fine for simulation. | |
| // In a real app, we'd use a fixed size array. | |
| const point = { x: now }; | |
| if (ch.type === 'digital') { | |
| // Create square waves with noise/jitter | |
| const freq = ch.id === 0 ? 5 : 2; // Hz | |
| const val = Math.sin(now / 1000 * Math.PI * 2 * freq) > 0 ? 1 : 0; | |
| // Add glitch | |
| point.y = Math.random() > 0.98 ? (val ? 0 : 1) : val; | |
| } else { | |
| // Analog signals | |
| let val = 0; | |
| if (ch.name === 'ADC_RAW') { | |
| // Simulated Bio-Signal (ECG-ish) | |
| const t = now / 1000; | |
| val = Math.sin(t * 10) * 20 + | |
| (Math.sin(t * 50) > 0.8 ? Math.sin(t * 50) * 40 : 0) + // "QRS complex" | |
| (Math.random() - 0.5) * 5; // Noise | |
| } else if (ch.name === 'FILTER_OUT') { | |
| // Low passed version | |
| const t = now / 1000; | |
| val = Math.sin(t * 10) * 18 + | |
| (Math.sin(t * 50) > 0.8 ? Math.sin(t * 50) * 15 : 0); | |
| } else { | |
| // Random noise | |
| val = (Math.random() - 0.5) * 10; | |
| } | |
| point.y = val; | |
| } | |
| ch.data.push(point); | |
| // Trim old data to prevent memory leak and keep performance | |
| if (ch.data.length > 2000) ch.data.shift(); | |
| }); | |
| }, | |
| drawGrid() { | |
| const ctx = this.ctx; | |
| const w = this.width; | |
| const h = this.height; | |
| ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)'; | |
| ctx.lineWidth = 1; | |
| ctx.beginPath(); | |
| // Vertical lines (Time) | |
| const timeStep = 50; // px | |
| for (let x = 0; x < w; x += timeStep) { | |
| ctx.moveTo(x, 0); | |
| ctx.lineTo(x, h); | |
| } | |
| // Horizontal lines (Voltage/Logic Level) | |
| const voltStep = h / (this.mode === 'mixed' ? 8 : 4); | |
| for (let y = 0; y < h; y += voltStep) { | |
| ctx.moveTo(0, y); | |
| ctx.lineTo(w, y); | |
| } | |
| ctx.stroke(); | |
| // Center line | |
| ctx.strokeStyle = 'rgba(14, 165, 233, 0.2)'; | |
| ctx.beginPath(); | |
| ctx.moveTo(0, h/2); | |
| ctx.lineTo(w, h/2); | |
| ctx.stroke(); | |
| }, | |
| drawTrace(ch, yOffset, slotHeight) { | |
| const ctx = this.ctx; | |
| const data = ch.data; | |
| if (data.length < 2) return; | |
| ctx.strokeStyle = ch.color; | |
| ctx.lineWidth = 2; | |
| ctx.beginPath(); | |
| // We draw from right to left (newest to oldest) to align with screen edge | |
| // Or rather, standard logic: map time to x. | |
| // Let's map the last N points to the width. | |
| const rightEdgeTime = data[data.length - 1].x; | |
| const pxPerMs = this.width / 2000; // Show last 2 seconds worth of pixels roughly | |
| let first = true; | |
| for (let i = data.length - 1; i >= 0; i--) { | |
| const point = data[i]; | |
| const age = rightEdgeTime - point.x; | |
| const x = this.width - (age * pxPerMs); // Moving left from right edge | |
| if (x < 0) break; // Off screen | |
| if (ch.type === 'digital') { | |
| // Draw stepped line | |
| const yHigh = yOffset - slotHeight * 0.2; | |
| const yLow = yOffset + slotHeight * 0.2; | |
| const y = point.y ? yHigh : yLow; | |
| if (first) { | |
| ctx.moveTo(x, y); | |
| first = false; | |
| } else { | |
| // Connect with step | |
| const prevX = this.width - ((rightEdgeTime - data[i+1].x) * pxPerMs); | |
| ctx.lineTo(prevX - 1, y); // Horizontal | |
| ctx.lineTo(x, y); // Vertical | |
| } | |
| // Draw value label on right | |
| if (i === data.length - 1) { | |
| ctx.fillStyle = ch.color; | |
| ctx.font = '10px monospace'; | |
| ctx.fillText(point.y, x + 10, y + 3); | |
| } | |
| } else { | |
| // Analog | |
| // Scale y. Center is 0. | |
| const scale = slotHeight / 100; // arbitrary scale | |
| const y = yOffset - (point.y * scale); | |
| if (first) { | |
| ctx.moveTo(x, y); | |
| first = false; | |
| } else { | |
| ctx.lineTo(x, y); | |
| } | |
| // Draw latest value | |
| if (i === data.length - 1) { | |
| ctx.fillStyle = '#fff'; | |
| ctx.fillRect(x - 2, y - 2, 4, 4); | |
| ctx.fillStyle = ch.color; | |
| ctx.fillText(point.y.toFixed(1), x + 10, y + 3); | |
| } | |
| } | |
| } | |
| ctx.stroke(); | |
| }, | |
| render() { | |
| // Clear | |
| this.ctx.clearRect(0, 0, this.width, this.height); | |
| this.drawGrid(); | |
| // Calculate slots for channels | |
| const visibleChannels = this.channels.filter(c => c.visible); | |
| const slotHeight = this.height / visibleChannels.length; | |
| visibleChannels.forEach((ch, index) => { | |
| const yCenter = (index * slotHeight) + (slotHeight / 2); | |
| // Draw Channel Label Background | |
| this.ctx.fillStyle = 'rgba(0,0,0,0.5)'; | |
| this.ctx.fillRect(5, yCenter - 10, 80, 20); | |
| // Label | |
| this.ctx.fillStyle = ch.color; | |
| this.ctx.font = 'bold 11px monospace'; | |
| this.ctx.fillText(ch.name, 10, yCenter + 4); | |
| // Draw Trace | |
| this.drawTrace(ch, yCenter, slotHeight); | |
| }); | |
| }, | |
| loop() { | |
| if (this.isRunning) { | |
| this.generateData(); | |
| this.render(); | |
| // Randomly update registers | |
| if (Math.random() > 0.95) { | |
| this.updateRegisters(); | |
| } | |
| } | |
| requestAnimationFrame(() => this.loop()); | |
| }, | |
| updateRegisters() { | |
| // Simulate changing values | |
| const r = this.registers[2]; // ADC_DATA | |
| const val = parseInt(r.val, 16); | |
| const newVal = val + Math.floor((Math.random() - 0.5) * 20); | |
| r.val = `0x${(newVal & 0xFFFF).toString(16).toUpperCase().padStart(4, '0')}`; | |
| this.renderUI(); | |
| }, | |
| renderUI() { | |
| // Render Channel List | |
| const list = document.getElementById('channel-list'); | |
| list.innerHTML = this.channels.map(ch => ` | |
| <div class="flex items-center justify-between bg-fpga-bg p-2 rounded border border-fpga-border hover:border-fpga-accent transition-colors cursor-pointer group" onclick="app.toggleChannel(${ch.id})"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full" style="background-color: ${ch.visible ? ch.color : '#475569'}"></div> | |
| <span class="text-xs font-mono ${ch.visible ? 'text-white' : 'text-fpga-dim'}">${ch.name}</span> | |
| </div> | |
| <div class="text-[10px] text-fpga-dim group-hover:text-white">${ch.type.toUpperCase()}</div> | |
| </div> | |
| `).join(''); | |
| // Render Registers | |
| const regList = document.getElementById('register-list'); | |
| regList.innerHTML = this.registers.map(r => ` | |
| <div class="flex justify-between border-b border-fpga-border/50 py-1 last:border-0"> | |
| <span class="text-fpga-dim w-12">${r.addr}</span> | |
| <span class="text-white font-bold w-20">${r.name}</span> | |
| <span class="text-fpga-accent text-right w-16">${r.val}</span> | |
| </div> | |
| `).join(''); | |
| }, | |
| // Interaction Methods | |
| toggleChannel(id) { | |
| const ch = this.channels.find(c => c.id === id); | |
| if (ch) ch.visible = !ch.visible; | |
| this.renderUI(); | |
| }, | |
| setMode(mode) { | |
| this.mode = mode; | |
| // Update buttons | |
| ['digital', 'mixed', 'fft'].forEach(m => { | |
| const btn = document.getElementById(`mode-${m}`); | |
| if (m === mode) { | |
| btn.classList.remove('text-fpga-dim', 'hover:text-white'); | |
| btn.classList.add('bg-fpga-border', 'text-white'); | |
| } else { | |
| btn.classList.add('text-fpga-dim', 'hover:text-white'); | |
| btn.classList.remove('bg-fpga-border', 'text-white'); | |
| } | |
| }); | |
| // Reset visibility based on mode | |
| if (mode === 'digital') { | |
| this.channels.forEach(c => c.visible = c.type === 'digital'); | |
| } else if (mode === 'mixed') { | |
| this.channels.forEach(c => c.visible = true); // Show all | |
| } else if (mode === 'fft') { | |
| // FFT mode would change rendering logic significantly, | |
| // for this demo we'll just show analog channels | |
| this.channels.forEach(c => c.visible = c.type === 'analog'); | |
| } | |
| this.renderUI(); | |
| }, | |
| toggleConnection() { | |
| const btn = document.getElementById('btn-connect'); | |
| if (btn.innerText === 'CONNECT_JTAG') { | |
| btn.innerText = 'DISCONNECT'; | |
| btn.classList.remove('text-fpga-success'); | |
| btn.classList.add('text-fpga-danger'); | |
| this.isRunning = true; | |
| } else { | |
| btn.innerText = 'CONNECT_JTAG'; | |
| btn.classList.add('text-fpga-success'); | |
| btn.classList.remove('text-fpga-danger'); | |
| this.isRunning = false; | |
| } | |
| }, | |
| zoomTime(factor) { | |
| // Adjust simulation speed or scale | |
| // In a real app, this changes the timebase of the scope | |
| // Here we just update text for effect | |
| const display = document.getElementById('timebase-display'); | |
| let val = parseFloat(display.innerText); | |
| val *= factor; | |
| display.innerText = `${val.toFixed(1)} ms/div`; | |
| } | |
| }; | |
| // Start application | |
| document.addEventListener('DOMContentLoaded', () => { | |
| app.init(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |