v2.1.2

Author: qdsang

README.md

@@ -1,6 +1,6 @@
 # [Web Serial Debugger](https://qdsang.github.io/web-serial-debug/)
 
-一个基于 Web Serial 的串口调试工具。 [https://qdsang.github.io/web-serial-debug/](https://qdsang.github.io/web-serial-debug/)
+基于 Web 的串口调试工具。 [https://qdsang.github.io/web-serial-debug/](https://qdsang.github.io/web-serial-debug/)
 
 ## Demo
 

docs/preview.png

@@ -1,5 +1,5 @@
 
-const CACHE_NAME = 'web-serial-debug-cache-v1';
+const CACHE_NAME = 'web-serial-debug-cache-v2';
 const urlsToCache = [
   './',
   './index.html',

public/sw.js

@@ -92,7 +92,7 @@ handleResize()
             <el-tab-pane label="姿态" lazy>
               <Chart3D />
             </el-tab-pane>
-            <el-tab-pane label="数据表">
+            <el-tab-pane label="数据表" lazy>
               <DataTable />
             </el-tab-pane>
             <el-tab-pane label="画板" lazy>
@@ -232,7 +232,6 @@ handleResize()
 }
 .lv-card :deep(.el-tab-pane) {
   height: 100%;
-  overflow: auto;
 }
 
 :deep(.splitpanes__splitter) {

src/App.vue

@@ -99,6 +99,8 @@ const saveLayout = () => {
         :key="item.id"
         :x="item.x"
         :y="item.y"
+        :w="item.width"
+        :h="item.height"
         :width="item.width"
         :height="item.height"
         :draggable="true"

src/components/CanvasPanel.vue

@@ -28,16 +28,16 @@ const handleConfigChange = async () => {
   if (isConnected.value) {
     try {
       await disconnectSerial()
-      DeviceSerialPort.disconnect()
+      // DeviceSerialPort.disconnect()
     }catch(error) {
 
     }
     try {
       const device = authorizedDevices.value.find(d => d.id === selectedDeviceId.value)
       if (device) {
-        await DeviceSerialPort.connectDevice(device)
+        await connectDevice(device)
       }
-      ElMessage.success('串口参数已更新')
+      // ElMessage.success('串口参数已更新')
     } catch (error) {
       ElMessage.error('更新串口参数失败：' + error)
     }
@@ -133,7 +133,8 @@ const disconnectSerial = async () => {
     console.log(error)
   }
   isConnected.value = false
-  selectedDeviceId.value = ''
+  // selectedDeviceId.value = ''
+
   try {
     await DeviceSerialPort.disconnect()
     await DeviceMockIMU.disconnect()
@@ -177,7 +178,7 @@ const handleSerialSend = async (data: Uint8Array) => {
 
   try {
     await serialWriter.value.write(data)
-    ElMessage.success({ message: '发送成功', grouping: true })
+    ElMessage.success({ message: '发送成功', grouping: true, duration: 1800, showClose: true })
   } catch (error) {
     console.log(error)
     ElMessage.error('发送数据失败：' + error)

src/components/SerialConfig.vue

@@ -169,6 +169,7 @@ const handleRenameGroup = () => {
 <style scoped>
 .quick-send {
   margin: 10px 10px;
+  min-width: 200px;
 }
 
 .quick-send-actions {
@@ -228,6 +229,7 @@ const handleRenameGroup = () => {
 .item-row {
   display: flex;
   align-items: center;
+  white-space: nowrap;
   gap: 8px;
 }
 

src/components/SerialQuickSend.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted, watch } from 'vue'
 import { EditorState } from '@codemirror/state'
 import { EditorView, keymap, lineNumbers } from '@codemirror/view'
-import { defaultKeymap } from '@codemirror/commands'
+import { defaultKeymap, indentWithTab } from '@codemirror/commands'
 import { javascript } from '@codemirror/lang-javascript'
 import { oneDark, oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
 import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language'
@@ -69,6 +69,7 @@ const createEditor = () => {
       doc: currentScript.value.code,
       extensions: [
         keymap.of(defaultKeymap),
+        keymap.of([indentWithTab]),
         syntaxHighlighting(isDark.value ? oneDarkHighlightStyle : defaultHighlightStyle),
         javascript(),
         isDark.value ? oneDark : [],
@@ -166,6 +167,7 @@ watch(scripts, () => {
 <style scoped>
 .serial-script {
   margin: 10px;
+  min-width: 300px;
 }
 
 .script-select {

src/components/SerialScript.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { SerialHelper } from '../utils/SerialHelper'
 import { ConfigManager } from '../utils/ConfigManager'
+import { ElMessage } from 'element-plus'
 
 import { EventCenter, EventNames } from '../utils/EventCenter'
 
@@ -24,7 +25,7 @@ const sendData = () => {
     if (sendConfig.value.addChecksum) {
       data = serialHelper.appendChecksum(data)
     }
-
+    // console.log('发送数据:', data, serialHelper.uint8ArrayToString(data))
     eventCenter.emit(EventNames.SERIAL_SEND, data)
     
     // 添加到历史记录
@@ -36,13 +37,24 @@ const sendData = () => {
     }
   } catch (error) {
     console.error('发送数据时出错:', error)
+    ElMessage.error('发送数据时出错' + error)
     eventCenter.emit(EventNames.SERIAL_ERROR, { message: error instanceof Error ? error.message : '发送数据时出错' })
+    return false
   }
+  return true
 }
 
 const toggleAutoSend = () => {
   if (sendConfig.value.autoSend) {
-    autoSendTimer = window.setInterval(sendData, sendConfig.value.autoSendInterval)
+    autoSendTimer = window.setInterval(() => {
+      if (!sendData()) {
+        if (autoSendTimer) {
+          clearInterval(autoSendTimer)
+          autoSendTimer = null
+        }
+        sendConfig.value.autoSend = false
+      }
+    }, sendConfig.value.autoSendInterval)
   } else if (autoSendTimer) {
     clearInterval(autoSendTimer)
     autoSendTimer = null
@@ -112,7 +124,7 @@ const handleKeyDown = (e: KeyboardEvent) => {
       <el-switch v-model="sendConfig.isHexSend" active-text="HEX" inactive-text="TEXT" class="me-2" />
       <div class="me-2" style="display: inline-block;">
         <el-checkbox v-model="sendConfig.addCRLF" label="" class="" style="vertical-align: middle;" />
-        <el-select v-model="sendConfig.addCRLFType" size="small" style="width: 80px;">
+        <el-select v-model="sendConfig.addCRLFType" size="small" style="width: 80px;" @change="sendConfig.addCRLF = true">
           <el-option :value="'\r\n'" label="CRLF(\r\n)" />
           <el-option :value="'\r'" label="CR(\r)" />
           <el-option :value="'\n'" label="LF(\n)" />
@@ -121,7 +133,7 @@ const handleKeyDown = (e: KeyboardEvent) => {
       </div>
       <el-checkbox v-model="sendConfig.addChecksum" label="校验和" class="me-2" />
       <el-checkbox v-model="sendConfig.autoSend" @change="toggleAutoSend" label="自动发送" class="me-2" />
-      <el-input-number v-model="sendConfig.autoSendInterval" :min="100" :max="10000" :step="100" @change="handleIntervalChange" size="small" class="me-2" title="自动发送时间间隔">
+      <el-input-number v-model="sendConfig.autoSendInterval" :step="100" @change="handleIntervalChange" size="small" class="me-2" title="自动发送时间间隔">
         <template #suffix>
           <span>ms</span>
         </template>
@@ -133,7 +145,7 @@ const handleKeyDown = (e: KeyboardEvent) => {
         v-model="sendConfig.content"
         type="textarea"
         :rows="5"
-        :placeholder="sendConfig.isHexSend ? '请输入HEX格式数据，如：49 54 4C 44 47' : '请输入要发送的文本'"
+        :placeholder="sendConfig.isHexSend ? '请输入HEX格式数据，如：AA BB CC 11 22' : '请输入要发送的文本'"
         @keydown="handleKeyDown"
       />
     </div>

src/components/SerialSend.vue

@@ -1,5 +1,6 @@
 import { ref } from 'vue'
 import { authorizedDevices, type Device } from './device'
+import { TimerManager } from '../../utils/TimerManager'
 
 export const getDeviceTitle = () => {
     return 'mock'
@@ -20,7 +21,8 @@ export const makeDevice = (port: any) => {
 authorizedDevices.value.push(makeDevice(null))
 
 const isSimulating = ref(false)
-let simulationTimer: number | null = null
+const timerManager = TimerManager.getInstance()
+const SIMULATION_TIMER_ID = 'mock_imu_simulation'
 
 const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 
@@ -39,12 +41,10 @@ const startSimulation = async () => {
   let reader = readable.getReader()
 
   let pitch = 0.0, roll = 0.0, yaw = 0.0
-  if (simulationTimer) {
-    clearInterval(simulationTimer)
-  }
-
-  await sleep(50 - (Date.now() % 50))
-  simulationTimer = window.setInterval(() => {
+  await sleep(1000 - (Date.now() % 1000))
+  // console.log('ts', Date.now())
+  timerManager.startTimer(SIMULATION_TIMER_ID, () => {
+    // console.log('ts2', Date.now())
     // 模拟数据
     pitch += Math.random()*0.4 - 0.2;
     roll += Math.random()*0.4 - 0.1;
@@ -60,10 +60,8 @@ const startSimulation = async () => {
 }
 
 const stopSimulation = () => {
-  if (simulationTimer) {
-    clearInterval(simulationTimer)
-    simulationTimer = null
-  }
+  timerManager.stopTimer(SIMULATION_TIMER_ID)
+  isSimulating.value = false
 }
 
 export const request = async () => {