'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const COLOR_BG = "#0f172a"; const COLOR_PC = "#38bdf8"; // Sky blue const COLOR_MCU = "#fbbf24"; // Amber const COLOR_WIRE_TX = "#22d3ee"; // Cyan const COLOR_WIRE_RX = "#f472b6"; // Pink const COLOR_DATA = "#4ade80"; // Green const COLOR_TEXT = "#e2e8f0"; // Slate 200 // Helper to get bits from char (LSB first for UART) const getBits = (char: string) => { const code = char.charCodeAt(0); const bits = []; // UART: Start Bit (0) bits.push(0); // Data Bits (LSB First) for (let i = 0; i < 8; i++) { bits.push((code >> i) & 1); } // Stop Bit (1) bits.push(1); return bits; }; export const UARTCommunicationView = () => { // Animation State const [phase, setPhase] = useState<'IDLE' | 'PC_SENDING' | 'MCU_PROCESSING' | 'MCU_SENDING'>('IDLE'); const [pcLog, setPcLog] = useState(['> 系统初始化...', '> 连接 COM3...']); const [mcuLog, setMcuLog] = useState(['[51单片机] 等待指令...']); const [activeBitIndex, setActiveBitIndex] = useState(-1); // For oscilloscope const [packetPos, setPacketPos] = useState(0); // 0 to 1 progress const [currentPayload, setCurrentPayload] = useState<{char: string, bits: number[], fromPc: boolean} | null>(null); // Refs for animation loop const frameRef = useRef(0); const cycleRef = useRef(0); // Simulation Sequence const sequence = [ { type: 'PC', char: 'A', desc: '发送字符 "A"' }, { type: 'MCU', char: 'K', desc: '回复 "OK"' }, { type: 'PC', char: '1', desc: '发送指令 "1"' }, { type: 'MCU', char: 'L', desc: 'LED 状态翻转' }, ]; useEffect(() => { let mounted = true; const runSimulation = async () => { while (mounted) { const step = sequence[cycleRef.current % sequence.length]; // 1. Idle / Preparation setPhase('IDLE'); setActiveBitIndex(-1); setPacketPos(0); await new Promise(r => setTimeout(r, 1000)); // 2. Start Transmission const isPcSender = step.type === 'PC'; setPhase(isPcSender ? 'PC_SENDING' : 'MCU_SENDING'); const bits = getBits(step.char); setCurrentPayload({ char: step.char, bits, fromPc: isPcSender }); if (isPcSender) { setPcLog(prev => [...prev.slice(-4), `> 发送: ${step.char} (0x${step.char.charCodeAt(0).toString(16).toUpperCase()})`]); } else { setMcuLog(prev => [...prev.slice(-4), `TXD 发送: ${step.char}`]); } // Animate Packet & Waveform const DURATION = 2000; const startTime = performance.now(); await new Promise(resolve => { const animate = (time: number) => { if (!mounted) return; const elapsed = time - startTime; const progress = Math.min(elapsed / DURATION, 1); setPacketPos(progress); // Calculate which bit corresponds to current progress (approximate for visual) // 10 bits total (1 start + 8 data + 1 stop) const totalBits = 10; const currentBit = Math.floor(progress * totalBits); setActiveBitIndex(Math.min(currentBit, 9)); if (progress < 1) { frameRef.current = requestAnimationFrame(animate); } else { resolve(); } }; frameRef.current = requestAnimationFrame(animate); }); // 3. Reception & Processing setPhase('MCU_PROCESSING'); if (isPcSender) { setMcuLog(prev => [...prev.slice(-4), `RXD 接收: ${step.char}`, `中断: RI=1`]); await new Promise(r => setTimeout(r, 500)); setMcuLog(prev => [...prev.slice(-4), `SBUF 读取...`, `清零 RI`]); } else { setPcLog(prev => [...prev.slice(-4), `< 接收: ${step.char}`]); } await new Promise(r => setTimeout(r, 1000)); cycleRef.current++; } }; runSimulation(); return () => { mounted = false; cancelAnimationFrame(frameRef.current); }; }, []); // Visual Coordinates const PC_X = 100; const MCU_X = 750; const Y_OFFSET = 250; const WIRE_Y_TX = Y_OFFSET - 20; // PC TX -> MCU RX const WIRE_Y_RX = Y_OFFSET + 20; // PC RX <- MCU TX // Logic Analyzer Points const WAVE_X_START = 200; const WAVE_WIDTH = 600; const WAVE_Y_BASE = 500; const WAVE_HEIGHT = 40; return ( ); }; export default UARTCommunicationView;