Spaces:

TWLab
/

anycoder-06d75b1d

Runtime error

App Files Files Community

TWLab commited on 18 days ago

Commit

ee5f65f

verified ·

1 Parent(s): d202df6

Upload streamlit_app.py with huggingface_hub

Browse files

Files changed (1) hide show

streamlit_app.py +607 -0

streamlit_app.py ADDED Viewed

	@@ -0,0 +1,607 @@

+<!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>