支持 8 通道、100kHz 实时刷新的 Web 示波器，专为解析 JustFloat 与 FireWater 二进制协议设计。无需安装软件，在浏览器中即可通过 USB 串口（Web Serial）、BLE 蓝牙（Web Bluetooth） 或 WebSocket 接入设备，实时捕获并可视化高频传感器或嵌入式系统数据。所有波形渲染与协议解析均在客户端完成，确保低延迟与数据隐私。适用于飞控调试、电机控制、多轴传感器分析等对速率和通道数有较高要求的场景。基于现代 Web 技术构建，兼容主流桌面及移动端浏览器，开源免费，即开即用。
An 8-channel Web oscilloscope with real-time 100 kHz waveform refresh, designed specifically for parsing JustFloat and FireWater binary protocols. This open-source tool runs entirely in the browser—no installation required—and supports three flexible data sources: USB serial (via Web Serial API), BLE devices (via Web Bluetooth API), and remote streams over WebSocket.
在线使用：https://createskyblue.github.io/justfloat-web-oscilloscope/
获取源代码：https://github.com/createskyblue/justfloat-web-oscilloscope
功能特性- 通过串口或WebSocket连接设备并实时接收数据
- 解析JustFloat协议数据（协议格式：[float ch1, ..., float chN, 0x00, 0x00, 0x80, 0x7F]）
- 解析FireWater协议数据（文本格式：:ch0,ch1,ch2,...,chN\n）
- 支持协议动态切换（JustFloat/FireWater）
- 支持连接方式切换（串口/WebSocket）
- 实时绘制多通道波形图（最多支持8种颜色区分通道）
- 支持数据导入/导出功能（JSON格式）
- 通道配置：可独立设置每个通道的名称、单位、系数和可见性
- 实时显示通道统计数据（最小值、最大值、平均值、当前值）
- 可配置的缓冲区大小（最小1000点，最大1000000点）
- 支持多种波特率（默认115200）、*虚拟串口不需要设置波特率
- 性能优化：JustFloat模式下 1个通道 100KHz 运行流畅！
连接方式串口连接- 使用Web Serial API与设备通信
- 适用于本地串口设
- 需要在浏览器中选择对应的串口设备
WebSocket连接- 通过WebSocket协议接收数据
- 适用于远程数据源或网络转发服务
- 支持文本和二进制数据格式
- 可配置WebSocket服务器地址（默认：ws://localhost:8080）
协议说明JustFloat协议数据格式：[float ch1, ..., float chN, 0x00, 0x00, 0x80, 0x7F] - 数据以4字节为单位的浮点数传输
- 以[0x00, 0x00, 0x80, 0x7F]作为帧同步字
- 解析器使用状态机逐字节解析数据
FireWater协议数据格式：[:]ch0,ch1,ch2,...,chN\n - 文本协议，逗号分隔的数值
- 例如：data: 123,456,789\n
性能特点- 高速率支持：支持高达100KHz的速率
- 高效数据解析：使用批处理机制提高解析效率
- 智能渲染：根据数据量和速率动态调整刷新频率
- 内存管理：自动限制缓冲区大小，避免内存溢出
- 响应式界面：使用uPlot图表库实现高性能数据可视化
技术栈- Vue 3 (Composition API)
- uPlot (高性能图表渲染)
- Tailwind CSS (样式框架)
安装和运行
使用说明- 确保浏览器支持所需功能（Chrome/Edge推荐）
- 连接设备到电脑或启动WebSocket数据服务
- 打开应用，选择对应的协议类型（JustFloat或FireWater）
- 选择连接方式：
- 串口连接：点击"连接设备"按钮并选择对应的串口设备
- WebSocket连接：输入WebSocket服务器地址，点击"连接"按钮
- 根据需要调整波特率设置（串口连接时有效）
- 实时查看设备发送的数据波形
- 使用鼠标框选功能进行数据区域分析
功能操作- 缩放功能：在图表上拖拽鼠标创建选区，可以放大查看特定数据段
- 缩放历史：支持多级缩放历史记录，双击图表或点击右上角的返回按钮可返回上一级缩放状态
- 连续框选会自动记录每次缩放的状态
- 缩放状态指示器会显示当前历史记录的级数
- 当没有历史记录时，双击会完全重置缩放
- 数据统计：选区后会显示详细的统计数据（采样点数、时长、速率等）
- 通道控制：可以在侧边栏单独控制每个通道的显示/隐藏
- 实时光标：移动鼠标可以查看任意点的具体数值
- 数据导出：可将当前显示的数据导出为JSON文件（按通道存储，包含采样率信息）
- 连接切换：可在串口和WebSocket之间切换连接方式
| 
发表于 2026-1-23 17:47:29
发表于 2026-1-24 09:59:52
楼主
