v1.7

Author: qdsang

README.md

@@ -9,47 +9,26 @@
 
 ## 功能特点
 
-- 🔌 支持串口和WebUSB设备连接
+- 🔌 支持串口、WebUSB、Websocket、stlink设备连接
 - 📝 实时数据收发显示
 - 🎨 支持文本和HEX格式数据发送
 - 📜 支持自定义脚本编写和执行
 - 🎯 快捷发送功能
 - ⚙️ 可配置的显示选项
 - 🌙 暗色主题支持
 
-## 使用说明
-
-### 连接设备
-1. 点击连接按钮选择串口设备
-2. 选择合适的波特率和其他串口参数
-3. 连接成功后即可开始收发数据
-
-### 数据发送
-- 支持文本和HEX格式数据发送
-- 可以保存常用的发送内容为快捷发送项
-- 支持自定义脚本发送数据
-
-### 脚本功能
+## 脚本功能
 可以编写JavaScript脚本来实现自动化操作，支持以下API：
 - `sendText(text)` - 发送文本数据
 - `sendHex(hex)` - 发送HEX格式数据
 - `sleep(ms)` - 延时指定毫秒数
 
-## 技术栈
-
-- Vue 3
-- TypeScript
-- Vite
-- Element Plus
-- CodeMirror 6
-- Xterm.js
-
 ## 开发环境要求
 
 - Node.js >= 18.0.0
 - 支持 Web Serial API 的现代浏览器（如 Chrome、Edge）
 
-## 安装
+## 编译
 
 ```bash
 # 安装依赖
@@ -58,13 +37,6 @@ yarn install
 # 启动开发服务器
 yarn dev
 
-# 构建生产版本
-yarn build
-```
-
-## 构建
-
-```bash
 # 构建生产版本
 yarn build
 

package.json

@@ -15,15 +15,16 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.36.2",
+    "@element-plus/icons-vue": "^2.3.1",
     "@vueuse/core": "^12.5.0",
     "@xterm/addon-search": "^0.15.0",
-    "@element-plus/icons-vue": "^2.3.1",
     "element-plus": "^2.9.3",
     "less": "^4.2.2",
     "pinia": "^2.3.1",
     "splitpanes": "^3.1.8",
     "stats.js": "^0.17.0",
     "three": "^0.173.0",
+    "three-particle-fire": "^0.1.0",
     "uplot": "^1.6.31",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",

public/manifest.json

@@ -1,11 +1,11 @@
 {
-  "name": "Web Serial Debugger",
-  "short_name": "Serial Debug",
+  "name": "串口助手",
+  "short_name": "串口助手",
   "description": "Web Serial 串口调试工具",
   "start_url": "./",
   "display": "standalone",
-  "background_color": "#ffffff",
-  "theme_color": "#409eff",
+  "background_color": "#000000",
+  "theme_color": "#1d1e1f",
   "icons": [
     {
       "src": "vite.svg",

src/App.vue

@@ -94,6 +94,8 @@ handleResize()
             <el-tab-pane label="数据表">
               <DataTable />
             </el-tab-pane>
+            <el-tab-pane label="工具箱">
+            </el-tab-pane>
           </el-tabs>
         </Pane>
         <Pane class="w25">

src/components/Chart3D.vue

@@ -12,36 +12,44 @@ import { useDark } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
 // @ts-ignore
 import Stats from 'stats.js'
+// @ts-ignore
+import particleFire from 'three-particle-fire';
+try { particleFire.install( { THREE: THREE } ); } catch (e) { }
 
 const container = ref<HTMLDivElement | null>(null)
 const pitch = ref(0)
 const roll = ref(0)
 const yaw = ref(0)
-const currentModel = ref('arrow')
+const currentModel = ref('rocket')
 const customModel = ref<THREE.Group | null>(null)
 const fileInput = ref<HTMLInputElement | null>(null)
 
 const isDark = useDark()
 const sceneBackground = computed(() => isDark.value ? 0x1a1a1a : 0xf0f0f0)
 // const gridColor = computed(() => isDark.value ? 0x404040 : 0x808080)
-const modelColor = computed(() => isDark.value ? 0x4a9eff : 0x3366ff)
+const modelColor = computed(() => isDark.value ? 0x404040 : 0x3366ff)
+// const modelColor = computed(() => isDark.value ? 0xF4F5F0 : 0x3366ff)
 
 let scene: THREE.Scene
+let clock: THREE.Clock
 let camera: THREE.PerspectiveCamera
 let renderer: THREE.WebGLRenderer
 let model: THREE.Group
 let controls: OrbitControls
 let animationFrameId: number
 let stats: Stats
+let rocketFireMesh: any
 
 const initScene = () => {
   scene = new THREE.Scene()
   scene.background = new THREE.Color(sceneBackground.value)
 
   // 添加坐标轴辅助器
-  const axesHelper = new THREE.AxesHelper(5)
+  const axesHelper = new THREE.AxesHelper(1.6)
   scene.add(axesHelper)
 
+  clock = new THREE.Clock()
+
   // 初始化性能监视器
   stats = new Stats()
   stats.showPanel(0) // 0: fps, 1: ms, 2: mb, 3+: custom
@@ -98,6 +106,50 @@ const createArrowModel = () => {
   return group
 }
 
+const createRocketModel = () => {
+  const group = new THREE.Group()
+
+  // 箭头主体
+  const bodyGeometry = new THREE.ConeGeometry(0.2, 0.5, 12)
+  const bodyMaterial = new THREE.MeshStandardMaterial({
+    color: modelColor.value,
+    metalness: 0.6,
+    roughness: 0.3,
+    envMapIntensity: 1.2
+  })
+  const body = new THREE.Mesh(bodyGeometry, bodyMaterial)
+  body.position.set(0, 1.05, 0)
+  // body.rotation.x = -Math.PI / 2
+  group.add(body)
+
+  const tailGeometry = new THREE.CylinderGeometry(0.2, 0.2, 1.6)
+  const tailMaterial = new THREE.MeshStandardMaterial({
+    color: modelColor.value,
+    metalness: 0.6,
+    roughness: 0.3,
+    envMapIntensity: 1.2
+  })
+  const tail = new THREE.Mesh(tailGeometry, tailMaterial)
+  tail.position.set(0, 0, 0)
+  group.add(tail)
+
+  const fireRadius = 0.09;
+  const fireHeight = 1.5;
+  const particleCount = 800;
+  const height = window.innerHeight;
+
+  const geometry0 = new particleFire.Geometry( fireRadius, fireHeight, particleCount );
+  const material0 = new particleFire.Material( { color: 0xff2200 } );
+  material0.setPerspective( camera.fov, height );
+  rocketFireMesh = new THREE.Points( geometry0, material0 );
+  rocketFireMesh.rotation.x = 3.14
+  rocketFireMesh.position.set(0, -0.92, 0)
+
+  group.add(rocketFireMesh)
+
+  return group
+}
+
 const createCubeModel = () => {
   const group = new THREE.Group()
 
@@ -120,6 +172,9 @@ const createModel = (type: string) => {
   }
 
   switch (type) {
+    case 'rocket':
+      model = createRocketModel()
+      break
     case 'arrow':
       model = createArrowModel()
       break
@@ -205,6 +260,7 @@ const addLights = () => {
 }
 
 const animate = () => {
+  var delta = clock.getDelta();
   animationFrameId = requestAnimationFrame(animate)
   stats.begin()
   
@@ -215,6 +271,9 @@ const animate = () => {
       THREE.MathUtils.degToRad(pitch.value)
     )
   }
+  if (rocketFireMesh) {
+    rocketFireMesh.material.update( delta );
+  }
 
   controls.update()
   renderer.render(scene, camera)
@@ -223,9 +282,15 @@ const animate = () => {
 
 const handleResize = () => {
   if (container.value && camera && renderer) {
-    camera.aspect = container.value.clientWidth / container.value.clientHeight
+    let width = container.value.clientWidth
+    let height = container.value.clientHeight
+    camera.aspect = width / height
     camera.updateProjectionMatrix()
-    renderer.setSize(container.value.clientWidth, container.value.clientHeight)
+    renderer.setSize(width, height)
+
+    if (rocketFireMesh) {
+      rocketFireMesh.material.setPerspective( camera.fov, height );
+    }
   }
 }
 

src/components/DataTable.vue

@@ -64,7 +64,7 @@ onUnmounted(() => {
               <el-checkbox v-model="fieldStore.columnVisibility[key]" @change="fieldStore.toggleColumnVisibility()">
                 {{ key === 'key' ? 'Key' :
                    key === 'name' ? '字段名' :
-                   key === 'dataType' ? '类型' :
+                   key === 'dataType' ? '数据类型' :
                    key === 'keyAddr' ? '内存地址' :
                    key === 'keySize' ? '内存大小' :
                    key === 'description' ? '描述' :

src/components/SerialConfig.vue

@@ -440,7 +440,7 @@ const handleConenctClick = () => {
               <el-option label="WebSocket" value="websocket"></el-option>
               <el-option label="脚本" value="script"></el-option>
               <el-option label="Stlink" value="webstlink"></el-option>
-              <el-option label="IMU模拟数据" value="mock"></el-option>
+              <el-option label="模拟数据(IMU)" value="mock"></el-option>
             </el-option-group>
           </el-select>
         </div>
@@ -512,7 +512,7 @@ const handleConenctClick = () => {
 }
 
 .port-list {
-  width: 120px;
+  width: 160px;
 }
 
 .config-section {

src/components/SerialSend.vue

@@ -58,19 +58,23 @@ const handleIntervalChange = (value: number) => {
 let historyIndex = -1
 
 const handleKeyDown = (e: KeyboardEvent) => {
-  if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+  if (!e.metaKey && !e.ctrlKey && !e.shiftKey && e.key === 'Enter') {
     sendData()
     historyIndex = -1
-    return
+    e.preventDefault()
+    return false
   }
 
   const target = e.target as HTMLTextAreaElement
-  const cursorPosition = target.selectionStart
-  const contentBeforeCursor = sendConfig.value.content.slice(0, cursorPosition)
-  const isFirstLine = !contentBeforeCursor.includes('\n')
-
-  if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !isFirstLine) {
-    return
+  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+    const cursorPosition = target.selectionStart
+    const contentBeforeCursor = sendConfig.value.content.slice(0, cursorPosition)
+    const isFirstLine = !contentBeforeCursor.includes('\n')
+    if (historyIndex == -1 && !isFirstLine) {
+      return
+    }
+  } else {
+    historyIndex = -1
   }
 
   if (e.key === 'ArrowUp') {
@@ -114,8 +118,11 @@ 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" />
-      <span>ms</span>
+      <el-input-number v-model="sendConfig.autoSendInterval" :min="100" :max="10000" :step="100" @change="handleIntervalChange" size="small" class="me-2" title="自动发送时间间隔">
+        <template #suffix>
+          <span>ms</span>
+        </template>
+      </el-input-number>
       <el-button type="primary" @click="sendData" class="me-2">发送</el-button>
     </div>
     <div class="send-content">

src/utils/ScriptManager.ts

@@ -12,15 +12,17 @@ export interface Runtimer {
   DataSenderInterface: Function | null
 }
 
-const demo1 = `
-// 处理接收的数据  数据格式："pitch:-0.13,roll:0.00,yaw:0.07\\n"
-let cache = '';
+const demo1 = `let cache = '';
+
+// 处理接收的数据
 async function DataReceiver(data) {
   cache += uint8ArrayToString(data);
+  // 数据格式："pitch:-0.13,roll:0.00,yaw:0.07\\n"
 
   if (cache.indexOf('\\n') !== -1) {
     const lines = cache.split('\\n');
     cache = lines.pop() || '';
+    
     for (const line of lines) {
       let files = line.split(',')
       let data = {};
@@ -40,7 +42,9 @@ async function DataReceiver(data) {
 
 // 处理发送的数据
 async function DataSender(data) {
-  await sleep(100);
+  // checksum
+  // await sleep(10);
+
   return data;
 }
 
@@ -50,6 +54,7 @@ setInterval(async () => {
   // sendHex(bytes);
 }, 1000);
 
+// 支持的函数
 // stringToUint8Array();
 // uint8ArrayToHexString();
 // uint8ArrayToString();

vite.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
         manualChunks: {
           'vendor': [],
           'vue': ['vue', 'vue-router', '@vueuse/core', 'pinia'],
-          'three': ['three', 'stats.js'],
+          'three': ['three', 'stats.js', 'three-particle-fire'],
           'uplot': ['uplot'],
           'xterm': ['xterm', 'xterm-addon-fit', 'xterm-addon-web-links', '@xterm/addon-search'],
           'utils': ['splitpanes', 'element-plus']