Web 序�??�監?�器 - 簡�???/title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> <style> /* ?��?賽�?龐�?風格 */ body { font-family: 'Exo 2', sans-serif; background-color: #050510; background-image: linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px); background-size: 30px 30px; color: #00ffff; } /* 賽�?龐�?風格?��? */ .cyber-button { background-color: rgba(0, 20, 40, 0.6); border: 1px solid #00ffff; color: #00ffff; padding: 8px 16px; font-weight: bold; text-transform: uppercase; transition: all 0.3s ease; box-shadow: 0 0 5px rgba(0, 255, 255, 0.2); height: 40px; white-space: nowrap; display: flex; align-items: center; justify-content: center; letter-spacing: 1px; } .cyber-button:hover:not(:disabled) { background-color: rgba(0, 255, 255, 0.1); box-shadow: 0 0 15px rgba(0, 255, 255, 0.6); text-shadow: 0 0 5px #00ffff; transform: translateY(-1px); } .cyber-button:disabled { border-color: #444; color: #555; cursor: not-allowed; box-shadow: none; } /* ?��??��?顏色 */ .cyber-button-connect { border-color: #00ff88; color: #00ff88; } .cyber-button-connect:hover:not(:disabled) { box-shadow: 0 0 15px rgba(0, 255, 136, 0.6); } .cyber-button-disconnect { border-color: #ff0055; color: #ff0055; } .cyber-button-disconnect:hover:not(:disabled) { box-shadow: 0 0 15px rgba(255, 0, 85, 0.6); } .cyber-button-adv { border-color: #ffcc00; color: #ffcc00; border-style: dashed; } .cyber-button-adv:hover { background-color: rgba(255, 204, 0, 0.1); box-shadow: 0 0 15px rgba(255, 204, 0, 0.4); } /* 輸入框�?下�??�單?�用�?? */ .cyber-input { background-color: rgba(0, 0, 0, 0.6); /* ?�深?�景 */ border: 1px solid #008888; color: #00ffff; padding: 4px 12px; outline: none; transition: all 0.3s ease; height: 40px; } .cyber-input:focus { border-color: #00ffff; box-shadow: 0 0 8px rgba(0, 255, 255, 0.4); } /* 強制設�?下�??�單?�選?��??�色，解決白底白字�?�?*/ .cyber-input option { background-color: #0a0a1a; color: #00ffff; } /* ?��? Webkit ?�覽??(Chrome/Safari) ?��?外修�?*/ select.cyber-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 30px; } /* 容器?�卡??*/ .cyber-card { background-color: rgba(10, 16, 30, 0.8); border: 1px solid rgba(0, 255, 255, 0.15); border-left: 4px solid rgba(0, 255, 255, 0.3); backdrop-filter: blur(8px); } /* 滾�?�?*/ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #050510; } ::-webkit-scrollbar-thumb { background: #008888; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #00ffff; } /* ?�畫 */ .fade-in-section { opacity: 1; transform: translateY(0); transition: opacity 0.3s ease, transform 0.3s ease; visibility: visible; } .fade-in-section.hidden { opacity: 0; transform: translateY(-10px); visibility: hidden; height: 0; overflow: hidden; margin: 0; padding: 0; border: 0; } /* 模�?視�? (說�??�面) */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px); z-index: 50; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .modal-overlay.show { opacity: 1; pointer-events: auto; } .modal-content { background: #0a0a1a; border: 2px solid #00ffff; box-shadow: 0 0 30px rgba(0, 255, 255, 0.3); max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; position: relative; transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .modal-overlay.show .modal-content { transform: scale(1); } </style> <link rel="canonical" href="https://tool.davidhuanglab.com/SerialMonitor/"></head> <body class="min-h-screen p-4 md:p-6 text-sm md:text-base"> <div class="max-w-7xl mx-auto flex flex-wrap justify-between items-end mb-6 border-b border-cyan-900 pb-4"> <div> <h1 class="text-3xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500" style="text-shadow: 0 0 10px rgba(0,255,255,0.3);"> WEB 序�??�監?�器 </h1> <p class="text-cyan-700 text-xs mt-1 tracking-widest">SERIAL MONITOR V2.0 // ?��??�室</p> </div> <div class="flex items-center gap-3"> <button id="langToggle" class="text-cyan-400 hover:text-white mt-2 md:mt-0 flex items-center gap-2 font-mono border border-cyan-900 px-2 rounded" title="Switch Language"> EN </button> <button onclick="toggleInstructions()" id="howToBtn" class="text-cyan-400 hover:text-white hover:underline mt-2 md:mt-0 flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> 如�?使用�? </button> </div> </div> <div class="max-w-7xl mx-auto"> <div id="error-message" class="hidden p-3 mb-4 text-center text-yellow-300 bg-red-900/80 border border-red-500 rounded"></div> <div class="cyber-card p-4 mb-4 flex flex-wrap gap-4 items-center justify-between rounded-lg shadow-lg bg-[#0b1021]"> <div class="flex flex-wrap items-center gap-3"> <div class="flex flex-col md:flex-row md:items-center gap-2"> <select id="portSelect" class="cyber-input min-w-[180px] rounded cursor-pointer hover:border-cyan-400"> <option value="request">�??��?序�??��?�?..</option> </select> <div class="flex items-center gap-2"> <select id="baudRateSelect" class="cyber-input w-28 rounded cursor-pointer"> <option value="9600">9600</option> <option value="115200" selected>115200</option> <option value="custom">?��?...</option> </select> <input type="number" id="customBaudRate" class="cyber-input hidden w-24 rounded" placeholder="?��?" value="9600"> </div> </div> <button id="connectButton" class="cyber-button cyber-button-connect rounded px-6"> ??? </button> </div> <div class="flex items-center gap-3 border-l border-cyan-900 pl-4 ml-auto md:ml-0"> <button id="pauseButton" class="text-cyan-500 hover:text-cyan-200 px-2 py-1" title="?��??�面滾�?"> ?��? ?��? </button> <button id="clearLogButton" class="text-cyan-500 hover:text-cyan-200 px-2 py-1" title="清除?�?��?�?> ??�?清除 </button> <button id="exportCsvButton" class="text-cyan-500 hover:text-cyan-200 px-2 py-1" title="下�?資�?"> ?�� ?�出CSV </button> </div> </div> <div class="flex justify-center mb-4"> <button id="toggleAdvancedBtn" class="cyber-button cyber-button-adv rounded-full px-8 text-sm"> ??�??��??��??�能 (?�送�???/ ?��?存�?) </button> </div> <div id="advancedPanel" class="fade-in-section hidden"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <div class="cyber-card p-4 rounded border-l-4 border-blue-500"> <h3 class="text-blue-400 font-bold mb-3 flex items-center"> <span class="mr-2">?��</span> <span id="sendTitle">?�送�???/span> </h3> <div class="flex gap-2 mb-2"> <input type="text" id="sendInput" class="cyber-input flex-grow rounded" placeholder="輸入?�令..." disabled> <select id="lineEndingSelect" class="cyber-input w-24 rounded text-xs"> <option value="none">?��?�?/option> <option value="nl">NL (\n)</option> <option value="both" selected>CR+NL</option> </select> <button id="sendButton" class="cyber-button rounded w-20" disabled>?��?/button> </div> <div id="quickSendContainer" class="flex flex-wrap gap-2 min-h-[30px]"> </div> <p class="text-xs text-gray-500 mt-1">??Enter ?�快?�發?��?/p> </div> <div class="cyber-card p-4 rounded border-l-4 border-green-500"> <h3 class="text-green-400 font-bold mb-3 flex items-center justify-between"> <div class="flex items-center"><span class="mr-2">??</span> <span id="autoSaveTitle">?��?存�?</span></div> <span id="autoSaveStatus" class="text-xs text-gray-500 font-normal border border-gray-700 px-2 py-0.5 rounded">?��???/span> </h3> <div class="flex items-center gap-3 mb-3"> <button id="autoSaveButton" class="cyber-button rounded flex-grow border-green-500/50 text-green-400 hover:bg-green-900/20"> ?��?檔�?並�?�? </button> <select id="saveIntervalSelect" class="cyber-input rounded w-24 text-center"> <option value="1">1�?�?/option> <option value="5" selected>5�?�?/option> <option value="30">30�?�?/option> </select> </div> <div class="flex justify-between text-xs text-gray-400 bg-black/30 p-2 rounded"> <span>檔�?: <span id="autoSaveFileName" class="text-white">--</span></span> <span>已�?: <span id="autoSaveCount" class="text-green-400">0</span> �?/span> </div> </div> </div> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 h-[600px]"> <div class="cyber-card flex flex-col h-full rounded overflow-hidden"> <div class="p-2 bg-black/40 border-b border-cyan-900/50 flex justify-between items-center"> <span id="terminalTitle" class="text-cyan-500 font-bold px-2">?�� 終端�?(Terminal)</span> <div class="flex items-center gap-2 text-xs"> <label class="flex items-center cursor-pointer select-none text-gray-400 hover:text-white"> <input type="checkbox" id="timestampToggle" class="mr-1 accent-cyan-500"> <span id="timestampLabel">?��???/span> </label> <label class="flex items-center cursor-pointer select-none text-gray-400 hover:text-white"> <input type="checkbox" id="autoScrollToggle" class="mr-1 accent-cyan-500" checked> <span id="autoScrollLabel">?��?滾�?</span> </label> </div> </div> <div id="logOutput" class="flex-grow font-mono text-sm p-4 overflow-y-auto bg-[#050505] text-green-400 leading-relaxed"> <div class="text-gray-600 italic">// 等�????�?..<br>// 請�??��??�「選?��??��?裝置?��?始�?/div> </div> <div class="p-1 bg-black/60 text-right text-xs text-gray-600 px-3"> <span id="dataCountDisplay">筆數: 0</span> | ?�地緩�?: <span id="localStorageCount">0</span> </div> </div> <div class="cyber-card flex flex-col h-full rounded overflow-hidden"> <div class="p-2 bg-black/40 border-b border-cyan-900/50 flex justify-between items-center"> <span id="plotterTitle" class="text-purple-400 font-bold px-2">?? ?��??�表 (Plotter)</span> <select id="chartLimitSelect" class="cyber-input !h-8 text-xs cursor-pointer"> <option value="50">顯示 50 �?/option> <option value="100" selected>顯示 100 �?/option> <option value="300">顯示 300 �?/option> </select> </div> <div class="relative flex-grow bg-[#050505] p-2"> <canvas id="dataChart"></canvas> </div> <div class="p-1 bg-black/60 text-center text-xs text-gray-600 px-3"> ?�示：輸?��??��??�為?��? (�? <span class="text-gray-400">123, 45.6</span>) 將自?�繪?? </div> </div> </div> </div> <div id="instructionsModal" class="modal-overlay"> <div class="modal-content p-8 rounded-lg"> <div class="flex justify-between items-start mb-4"> <h2 class="text-2xl font-bold text-white">?? 如�?使用?�工??/h2> <button onclick="toggleInstructions()" class="text-gray-400 hover:text-white text-xl font-bold">×</button> </div> <div class="space-y-6 text-gray-300"> <section> <h3 class="text-cyan-400 font-bold text-lg mb-2">1. 建�????</h3> <p>點�?左�?角�? <span class="text-white border border-gray-600 px-1 text-xs">?��?序�??��?�?..</span>，瀏覽?��?跳出視�?，�??��??��? Arduino ??ESP32 裝置，然後�??�「�???��?/p> <ul class="list-disc list-inside mt-2 text-sm text-gray-400 pl-2"> <li>常�?鮑�? (Baud Rate) ??9600 ??115200??/li> <li>如�????失�?，�?確�??��?軟�?（�? Arduino IDE）�??��??�該序�??��?/li> </ul> </section> <section> <h3 class="text-purple-400 font-bold text-lg mb-2">2. 觀?�數??/h3> <p>????��?後�?裝置?�送�??��??�顯示在左側?��?端�??�。�??��?字�??�數字�?例�? <code>Temperature: 25.5</code> ??CSV ?��? <code>20,30,40</code>）�??�側?�即?��?表」�??��??�出線�???/p> </section> <section> <h3 class="text-yellow-400 font-bold text-lg mb-2">3. ?��??�能</h3> <p>點�??�面中�???<span class="text-white border border-gray-600 px-1 text-xs">??�??��??��??�能</span> ?��?，可以使?��?</p> <ul class="list-disc list-inside mt-2 text-sm text-gray-400 pl-2"> <li><strong>?�送�??��?</strong>?�送�?令給裝置（�?如控?��??��??��???/li> <li><strong>?��?存�?�?/strong>?��?一?�電?��??��?案�?置�?網�??�自?��??�收?��?資�?寫入該�?案�?CSV?��?）�?不�??��?網�??��?資�??�失??/li> </ul> </section> <div class="mt-8 text-center"> <button onclick="toggleInstructions()" class="cyber-button rounded px-8 py-2 w-full md:w-auto mx-auto"> ?�瞭�??，�?始使?��? </button> </div> </div> </div> </div> <script type="module"> // --- UI ?�制?�輯 --- // Internationalization (簡中/English) 設�? let currentLang = localStorage.getItem('wsm_lang') || 'zh'; const i18n = { zh: { connect: '???', disconnect: '?��????', not_supported: '不支??, howto: '如�?使用�?, langBtn: 'EN', pause: '?��? ?��?', resume: '??繼�?', clear: '??�?清除', export: '?�� ?�出CSV', advanced_open: '??�??��??��??�能 (?�送�???/ ?��?存�?)', advanced_close: '?�� ?��??��??�能', send: '?��?, send_placeholder: '輸入?�令...', send_title: '?�送�???, auto_save_title: '?��?存�?', select_port: '�??��?序�??��?�?..', chartOptions: ['顯示 50 �?,'顯示 100 �?,'顯示 300 �?], terminal_title: '?�� 終端�?(Terminal)', plotter_title: '?? ?��??�表 (Plotter)', timestamp_label: '?��???, autoscroll_label: '?��?滾�?', dataCountPrefix: '筆數: ', noDataExport: '沒�?資�??�匯??, clearStorageConfirm: '?�否也�?清除?�地?��??�歷?��??��?', autoSave_start: '?��?檔�?並�?�?, autoSave_stop: '???�止?��?' }, en: { connect: 'Connect', disconnect: 'Disconnect', not_supported: 'Unsupported', howto: 'How to use?', langBtn: '�?, pause: '??Pause', resume: '??Resume', clear: '??�?Clear', export: '?�� Export CSV', advanced_open: '??�?Advanced (Send / Auto-save)', advanced_close: '?�� Hide Advanced', send: 'Send', send_placeholder: 'Enter command...', send_title: 'Send Data', auto_save_title: 'Auto Save', select_port: '+ Select device...', chartOptions: ['Show 50 pts','Show 100 pts','Show 300 pts'], terminal_title: '?�� Terminal', plotter_title: '?? Plotter', timestamp_label: 'Timestamp', autoscroll_label: 'Auto Scroll', dataCountPrefix: 'Count: ', noDataExport: 'No data to export', clearStorageConfirm: 'Also clear local cached history?', autoSave_start: 'Choose file & start', autoSave_stop: '??Stop saving' } }; function applyLanguage(lang) { currentLang = lang; localStorage.setItem('wsm_lang', lang); const t = i18n[lang]; // header buttons document.getElementById('langToggle').textContent = t.langBtn; const howToBtnEl = document.getElementById('howToBtn'); const svgEl = howToBtnEl.querySelector('svg'); if (svgEl) howToBtnEl.innerHTML = svgEl.outerHTML + ' ' + t.howto; // main controls connectButton.textContent = port ? t.disconnect : t.connect; pauseButton.textContent = isPaused ? t.resume : t.pause; clearLogButton.textContent = t.clear; exportCsvButton.textContent = t.export; toggleAdvancedBtn.textContent = advancedPanel.classList.contains('hidden') ? t.advanced_open : t.advanced_close; // Advanced panel sendButton.textContent = t.send; sendInput.placeholder = t.send_placeholder; document.getElementById('sendTitle').textContent = t.send_title; document.getElementById('autoSaveTitle').textContent = t.auto_save_title; autoSaveButton.textContent = autoSaveEnabled ? t.autoSave_stop : t.autoSave_start; // selects / labels portSelect.options[0].text = t.select_port; const co = chartLimitSelect.options; for (let i=0;i<co.length;i++) co[i].text = t.chartOptions[i] || co[i].text; // titles (Using IDs now for better targeting) document.getElementById('terminalTitle').textContent = t.terminal_title; document.getElementById('plotterTitle').textContent = t.plotter_title; document.getElementById('timestampLabel').textContent = t.timestamp_label; document.getElementById('autoScrollLabel').textContent = t.autoscroll_label; // data count label dataCountDisplay.textContent = t.dataCountPrefix + dataLineCount; } // 說�?視�??��? window.toggleInstructions = function() { const modal = document.getElementById('instructionsModal'); modal.classList.toggle('show'); } // ?��??�能?�板?��? const toggleAdvancedBtn = document.getElementById('toggleAdvancedBtn'); const advancedPanel = document.getElementById('advancedPanel'); toggleAdvancedBtn.addEventListener('click', () => { const isHidden = advancedPanel.classList.contains('hidden'); if (isHidden) { advancedPanel.classList.remove('hidden'); toggleAdvancedBtn.classList.remove('cyber-button-adv'); toggleAdvancedBtn.style.borderColor = '#444'; toggleAdvancedBtn.style.color = '#888'; } else { advancedPanel.classList.add('hidden'); toggleAdvancedBtn.classList.add('cyber-button-adv'); toggleAdvancedBtn.style.borderColor = ''; toggleAdvancedBtn.style.color = ''; } // Re-apply language text to ensure correct label (Open/Close) applyLanguage(currentLang); }); // --- 以�??�核心�?�?--- // DOM ?��? const connectButton = document.getElementById('connectButton'); const portSelect = document.getElementById('portSelect'); const baudRateSelect = document.getElementById('baudRateSelect'); const customBaudRate = document.getElementById('customBaudRate'); const timestampToggle = document.getElementById('timestampToggle'); const autoScrollToggle = document.getElementById('autoScrollToggle'); const clearLogButton = document.getElementById('clearLogButton'); const exportCsvButton = document.getElementById('exportCsvButton'); const logOutput = document.getElementById('logOutput'); const errorMessage = document.getElementById('error-message'); const chartCanvas = document.getElementById('dataChart'); const chartLimitSelect = document.getElementById('chartLimitSelect'); const dataCountDisplay = document.getElementById('dataCountDisplay'); const pauseButton = document.getElementById('pauseButton'); // ?��??��??��? DOM const autoSaveButton = document.getElementById('autoSaveButton'); const autoSaveStatus = document.getElementById('autoSaveStatus'); const autoSaveFileName = document.getElementById('autoSaveFileName'); const autoSaveCount = document.getElementById('autoSaveCount'); const saveIntervalSelect = document.getElementById('saveIntervalSelect'); const localStorageCount = document.getElementById('localStorageCount'); // ?�送�??�相??DOM const sendInput = document.getElementById('sendInput'); const sendButton = document.getElementById('sendButton'); const lineEndingSelect = document.getElementById('lineEndingSelect'); const quickSendContainer = document.getElementById('quickSendContainer'); // ?�?��??? let port; let reader; let readableStreamClosed; let keepReading = false; let lineBuffer = ''; let logData = []; let dataChart; let isPaused = false; let quickSendList = []; let grantedPorts = []; const LAST_PORT_KEY = 'webSerialMonitorLastPort'; let dataLineCount = 0; let logBuffer = []; let isDOMUpdateScheduled = false; let autoSaveEnabled = false; let autoSaveFileHandle = null; let autoSaveBuffer = []; let autoSaveInterval = null; let autoSaveTotalCount = 0; const STORAGE_KEY = 'webSerialMonitor_persistentData'; const STORAGE_META_KEY = 'webSerialMonitor_meta'; let persistentData = []; // --- ?��???--- async function init() { // 檢查 Web Serial API if (!('serial' in navigator)) { showError("?��??�覽?��??�援 Web Serial API?��?使用 Chrome?�Edge (Chromium) ??Opera ?�覽?��?); connectButton.disabled = true; connectButton.textContent = i18n[currentLang].not_supported; } if (!('showSaveFilePicker' in window)) { autoSaveButton.disabled = true; autoSaveButton.textContent = "?�覽?��??�援存�? API"; } navigator.serial.addEventListener('disconnect', (event) => { if (port && event.target === port) { disconnect(); showError("?��? 裝置已實體斷?��?��"); } }); connectButton.addEventListener('click', toggleConnection); baudRateSelect.addEventListener('change', handleBaudRateChange); baudRateSelect.addEventListener('change', applyBaudRateChange); customBaudRate.addEventListener('change', applyBaudRateChange); clearLogButton.addEventListener('click', clearLog); exportCsvButton.addEventListener('click', exportCSV); pauseButton.addEventListener('click', togglePause); autoSaveButton.addEventListener('click', toggleAutoSave); sendButton.addEventListener('click', sendData); sendInput.addEventListener('keypress', (event) => { if (event.key === 'Enter' && !sendButton.disabled) { sendData(); } }); initChart(); loadPersistentData(); await populatePortList(); // language toggle handler document.getElementById('langToggle').addEventListener('click', () => { const next = currentLang === 'zh' ? 'en' : 'zh'; applyLanguage(next); }); applyLanguage(currentLang); } // --- ?��??��??�能 --- async function toggleAutoSave() { if (autoSaveEnabled) { await stopAutoSave(); } else { await startAutoSave(); } } async function startAutoSave() { try { const options = { types: [{ description: 'CSV 檔�?', accept: { 'text/csv': ['.csv'], 'text/plain': ['.txt'] } }], suggestedName: `log_${new Date().toISOString().slice(0,19).replace(/[:T]/g, '-')}.csv` }; autoSaveFileHandle = await window.showSaveFilePicker(options); // 寫入 BOM ??Header const file = await autoSaveFileHandle.getFile(); if (file.size === 0) { const writable = await autoSaveFileHandle.createWritable(); const header = timestampToggle.checked ? 'Timestamp,Data\n' : 'Data\n'; await writable.write(new TextEncoder().encode('\ufeff' + header)); await writable.close(); } autoSaveEnabled = true; autoSaveTotalCount = 0; autoSaveBuffer = []; const intervalSeconds = parseInt(saveIntervalSelect.value, 10); autoSaveInterval = setInterval(flushAutoSaveBuffer, intervalSeconds * 1000); // Update UI autoSaveButton.classList.remove('border-green-500/50', 'text-green-400'); autoSaveButton.classList.add('bg-red-900/50', 'text-red-400', 'border-red-500'); autoSaveStatus.textContent = '�?��?�製'; autoSaveStatus.className = 'text-xs bg-green-900 text-green-300 border border-green-500 px-2 py-0.5 rounded animate-pulse'; autoSaveFileName.textContent = autoSaveFileHandle.name; saveIntervalSelect.disabled = true; logToMonitor(`// ?��??��?已�??? ${autoSaveFileHandle.name}`, 'system'); applyLanguage(currentLang); // ?�新?��??��? } catch (error) { if (error.name !== 'AbortError') { showError(`?��??�用?��??��?: ${error.message}`); } } } async function stopAutoSave() { try { if (autoSaveBuffer.length > 0) await flushAutoSaveBuffer(); if (autoSaveInterval) { clearInterval(autoSaveInterval); autoSaveInterval = null; } autoSaveEnabled = false; autoSaveFileHandle = null; // Update UI autoSaveButton.classList.add('border-green-500/50', 'text-green-400'); autoSaveButton.classList.remove('bg-red-900/50', 'text-red-400', 'border-red-500'); autoSaveStatus.textContent = '?��???; autoSaveStatus.className = 'text-xs text-gray-500 font-normal border border-gray-700 px-2 py-0.5 rounded'; saveIntervalSelect.disabled = false; logToMonitor('// ?��??��?已�?�?, 'system'); applyLanguage(currentLang); // ?�新?��??��? } catch (error) { showError(`?�止?��??��??�誤: ${error.message}`); } } async function flushAutoSaveBuffer() { if (!autoSaveEnabled || !autoSaveFileHandle || autoSaveBuffer.length === 0) return; try { const writable = await autoSaveFileHandle.createWritable({ keepExistingData: true }); const file = await autoSaveFileHandle.getFile(); const fileSize = file.size; let content = ''; for (const item of autoSaveBuffer) { const escapedData = item.data.replace(/"/g, '""'); content += timestampToggle.checked ? `"${item.timestamp}","${escapedData}"\n` : `"${escapedData}"\n`; } await writable.write({ type: 'write', position: fileSize, data: new TextEncoder().encode(content) }); await writable.close(); autoSaveTotalCount += autoSaveBuffer.length; autoSaveCount.textContent = autoSaveTotalCount; autoSaveBuffer = []; } catch (error) { showError(`寫入?�誤: ${error.message}`); await stopAutoSave(); } } function addToAutoSaveBuffer(timestamp, data) { if (!autoSaveEnabled) return; autoSaveBuffer.push({ timestamp, data }); } // --- LocalStorage ?�能 --- function loadPersistentData() { try { const stored = localStorage.getItem(STORAGE_KEY); if (stored) { persistentData = JSON.parse(stored); if (persistentData.length > 0) { logData = [...persistentData]; dataLineCount = persistentData.length; // ?�恢復顯示�?�?100 筆避?�卡?? persistentData.slice(-100).forEach(item => { const logEntry = (timestampToggle.checked ? `[${item.timestamp}] ` : '') + item.data; logBuffer.push({ message: logEntry, type: 'data' }); updateChart(item.data, item.timestamp); }); scheduleDOMUpdate(); localStorageCount.textContent = persistentData.length; logToMonitor(`// 已恢�?${persistentData.length} 筆歷?��??�`, 'system'); } } } catch (e) { console.warn('載入歷史資�?失�?', e); } } function saveToPersistentStorage() { try { const dataToSave = logData.slice(-5000); // ?�制�?5000 �? localStorage.setItem(STORAGE_KEY, JSON.stringify(dataToSave)); localStorageCount.textContent = dataToSave.length; } catch (e) { console.warn('?��?歷史資�?失�?', e); } } setInterval(saveToPersistentStorage, 5000); // --- Web Serial ??? --- async function populatePortList() { if (!('serial' in navigator)) return; try { grantedPorts = await navigator.serial.getPorts(); portSelect.innerHTML = '<option value="request">�??��?序�??��?�?..</option>'; const lastPortInfo = JSON.parse(localStorage.getItem(LAST_PORT_KEY)); let foundLastPort = false; grantedPorts.forEach((p, index) => { const info = p.getInfo(); const vid = info.usbVendorId ? info.usbVendorId.toString(16).padStart(4, '0') : '????'; const pid = info.usbProductId ? info.usbProductId.toString(16).padStart(4, '0') : '????'; const option = document.createElement('option'); option.value = index; option.textContent = `裝置 ${index+1} (ID: ${vid}:${pid})`; portSelect.appendChild(option); if (lastPortInfo && info.usbVendorId === lastPortInfo.vid && info.usbProductId === lastPortInfo.pid) { option.selected = true; foundLastPort = true; } }); } catch (e) { console.warn(e); } } async function toggleConnection() { if (port) await disconnect(); else await connect(); } async function connect() { try { let selectedValue = portSelect.value; if (selectedValue === 'request') { port = await navigator.serial.requestPort(); await populatePortList(); // ?�新?��??��?權�? const ports = await navigator.serial.getPorts(); const index = ports.indexOf(port); if(index >= 0) selectedValue = index; } else { port = grantedPorts[parseInt(selectedValue)]; } if (!port) return; const baudRate = getBaudRate(); await port.open({ baudRate }); // Save preference const info = port.getInfo(); if (info.usbVendorId) { localStorage.setItem(LAST_PORT_KEY, JSON.stringify({ vid: info.usbVendorId, pid: info.usbProductId })); } // UI Update portSelect.disabled = true; baudRateSelect.disabled = false; sendInput.disabled = false; sendButton.disabled = false; showError(null); // 清除說�??��? if(logOutput.querySelector('.italic')) logOutput.innerHTML = ''; logToMonitor(`// ????��?! ?��?: ${baudRate}`, 'system'); keepReading = true; applyLanguage(currentLang); // ?�新?��??��? readLoop(); } catch (error) { showError(`???失�?: ${error.message}`); port = null; } } async function disconnect() { keepReading = false; if (reader) await reader.cancel().catch(() => {}); if (readableStreamClosed) await readableStreamClosed.catch(() => {}); if (port) await port.close().catch(() => {}); port = null; reader = null; portSelect.disabled = false; sendInput.disabled = true; sendButton.disabled = true; logToMonitor('// ???已斷??, 'system'); applyLanguage(currentLang); // ?�新?��??��? } async function readLoop() { const textDecoder = new TextDecoderStream(); readableStreamClosed = port.readable.pipeTo(textDecoder.writable); reader = textDecoder.readable.getReader(); try { while (keepReading) { const { value, done } = await reader.read(); if (done) break; if (value) handleChunk(value); } } catch (error) { if (keepReading) { showError(`讀?�錯�? ${error.message}`); disconnect(); } } finally { reader.releaseLock(); } } // --- ?�送�???--- async function sendData() { if (!port || !port.writable) return; const message = sendInput.value; if (!message) return; try { const writer = port.writable.getWriter(); let dataToSend = message; const lineEnding = lineEndingSelect.value; if (lineEnding === 'nl') dataToSend += '\n'; else if (lineEnding === 'cr') dataToSend += '\r'; else if (lineEnding === 'both') dataToSend += '\r\n'; await writer.write(new TextEncoder().encode(dataToSend)); writer.releaseLock(); logToMonitor(`>> ?��? ${message}`, 'system'); addQuickSend(message); sendInput.value = ''; sendInput.focus(); } catch (e) { showError(`?�送失?? ${e.message}`); } } function addQuickSend(msg) { if(!msg) return; const idx = quickSendList.indexOf(msg); if (idx !== -1) quickSendList.splice(idx, 1); quickSendList.unshift(msg); if (quickSendList.length > 5) quickSendList.pop(); quickSendContainer.innerHTML = ''; quickSendList.forEach(m => { const btn = document.createElement('button'); btn.className = 'cyber-button !py-0 !px-2 !text-xs !h-6 border-cyan-700 text-cyan-500 hover:text-white hover:border-white'; btn.textContent = m; btn.onclick = () => { sendInput.value = m; sendData(); }; quickSendContainer.appendChild(btn); }); } // --- 資�??��??�繪??--- function handleChunk(chunk) { if (isPaused) return; const lines = (lineBuffer + chunk).split('\n'); lineBuffer = lines.pop(); lines.forEach(handleLine); scheduleDOMUpdate(); } function handleLine(line) { line = line.trim(); if (!line) return; dataLineCount++; const timestamp = new Date().toLocaleTimeString('zh-TW', {hour12:false}); logData.push({ timestamp, data: line }); const logEntry = (timestampToggle.checked ? `[${timestamp}] ` : '') + line; logBuffer.push({ message: logEntry, type: 'data' }); addToAutoSaveBuffer(timestamp, line); updateChart(line, timestamp); } function logToMonitor(message, type = 'system') { logBuffer.push({ message, type }); scheduleDOMUpdate(); } function scheduleDOMUpdate() { if (isDOMUpdateScheduled) return; isDOMUpdateScheduled = true; requestAnimationFrame(updateDOM); } function updateDOM() { isDOMUpdateScheduled = false; dataCountDisplay.textContent = i18n[currentLang].dataCountPrefix + dataLineCount; const entries = logBuffer.splice(0); if (entries.length === 0) return; const fragment = document.createDocumentFragment(); entries.forEach(entry => { const div = document.createElement('div'); div.textContent = entry.message; if (entry.type === 'system') { div.style.color = '#ff00ff'; div.style.borderLeft = '2px solid #ff00ff'; div.style.paddingLeft = '8px'; div.style.opacity = '0.8'; } fragment.appendChild(div); }); logOutput.appendChild(fragment); // 保�??�大�??? while (logOutput.childElementCount > 1000) { logOutput.firstChild.remove(); } if (autoScrollToggle.checked) { logOutput.scrollTop = logOutput.scrollHeight; } } // --- ?�表?��? --- function initChart() { const ctx = chartCanvas.getContext('2d'); const gradient = ctx.createLinearGradient(0, 0, 0, 400); gradient.addColorStop(0, 'rgba(0, 255, 255, 0.2)'); gradient.addColorStop(1, 'rgba(0, 0, 0, 0)'); dataChart = new Chart(ctx, { type: 'line', data: { labels: [], datasets: [] }, options: { responsive: true, maintainAspectRatio: false, animation: false, interaction: { mode: 'index', intersect: false }, plugins: { legend: { display: false } }, scales: { x: { display: false }, y: { grid: { color: '#112233' }, ticks: { color: '#008888' } } }, elements: { point: { radius: 0, hitRadius: 10 }, line: { borderWidth: 2, tension: 0.3 } } } }); } const lineColors = ['#00ffff', '#ff00ff', '#ffff00', '#00ff00']; function updateChart(dataStr, label) { const values = dataStr.split(/[, \t]+/).map(v => parseFloat(v)).filter(v => !isNaN(v)); if (values.length === 0) return; dataChart.data.labels.push(label); values.forEach((val, i) => { if (!dataChart.data.datasets[i]) { dataChart.data.datasets.push({ label: `V${i+1}`, borderColor: lineColors[i % lineColors.length], data: [] }); } dataChart.data.datasets[i].data.push(val); }); const limit = parseInt(chartLimitSelect.value); while (dataChart.data.labels.length > limit) { dataChart.data.labels.shift(); dataChart.data.datasets.forEach(d => d.data.shift()); } dataChart.update('none'); } // --- 工具?��? --- function handleBaudRateChange() { customBaudRate.classList.toggle('hidden', baudRateSelect.value !== 'custom'); } function getBaudRate() { return baudRateSelect.value === 'custom' ? (parseInt(customBaudRate.value) || 9600) : parseInt(baudRateSelect.value); } async function applyBaudRateChange() { if (port) { await disconnect(); setTimeout(connect, 200); } } function togglePause() { isPaused = !isPaused; applyLanguage(currentLang); pauseButton.classList.toggle('text-yellow-400', isPaused); } function clearLog() { logOutput.innerHTML = ''; logData = []; dataLineCount = 0; if(dataChart) { dataChart.data.labels = []; dataChart.data.datasets = []; dataChart.update(); } if(confirm(i18n[currentLang].clearStorageConfirm)) { localStorage.removeItem(STORAGE_KEY); localStorageCount.textContent = 0; } } function exportCSV() { if (logData.length === 0) return alert(i18n[currentLang].noDataExport); let csv = timestampToggle.checked ? 'Timestamp,Data\n' : 'Data\n'; logData.forEach(d => { csv += timestampToggle.checked ? `"${d.timestamp}","${d.data.replace(/"/g,'""')}"\n` : `"${d.data.replace(/"/g,'""')}"\n`; }); const blob = new Blob(['\ufeff'+csv], { type: 'text/csv;charset=utf-8;' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `serial_${new Date().getTime()}.csv`; a.click(); } function showError(msg) { if (msg) { errorMessage.textContent = msg; errorMessage.classList.remove('hidden'); } else { errorMessage.classList.add('hidden'); } } document.addEventListener('DOMContentLoaded', init); </script> </body> </html>