找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 37|回复: 0
打印 上一主题 下一主题
收起左侧

Web 示波器:实时解析 JustFloat 与 FireWater 协议,支持串口、蓝牙 和 WebSocket

[复制链接]
跳转到指定楼层
楼主
支持 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.




在线使用:
获取源代码(附件压缩包源代码可能不是最新的):
游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0

提示:推荐使用最新版本的 Chrome浏览器 或者 Edge浏览器,其他浏览器不保证兼容

功能特性
  • 通过串口或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 (样式框架)

安装和运行
  • 确保已安装Node.js环境
  • 克隆项目:
    游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
  • 进入项目目录并安装依赖:
    cd justfloat-web-oscilloscopenpm install
  • 启动开发服务器:
    npm run dev

使用说明
  • 确保浏览器支持所需功能(Chrome/Edge推荐)
  • 连接设备到电脑或启动WebSocket数据服务
  • 打开应用,选择对应的协议类型(JustFloat或FireWater)
  • 选择连接方式:
    • 串口连接:点击"连接设备"按钮并选择对应的串口设备
    • WebSocket连接:输入WebSocket服务器地址,点击"连接"按钮
  • 根据需要调整波特率设置(串口连接时有效)
  • 实时查看设备发送的数据波形
  • 使用鼠标框选功能进行数据区域分析

功能操作
  • 缩放功能:在图表上拖拽鼠标创建选区,可以放大查看特定数据段
    • 缩放历史:支持多级缩放历史记录,双击图表或点击右上角的返回按钮可返回上一级缩放状态
    • 连续框选会自动记录每次缩放的状态
    • 缩放状态指示器会显示当前历史记录的级数
    • 当没有历史记录时,双击会完全重置缩放
  • 数据统计:选区后会显示详细的统计数据(采样点数、时长、速率等)
  • 通道控制:可以在侧边栏单独控制每个通道的显示/隐藏
  • 实时光标:移动鼠标可以查看任意点的具体数值
  • 数据导出:可将当前显示的数据导出为JSON文件(按通道存储,包含采样率信息)
  • 连接切换:可在串口和WebSocket之间切换连接方式

justfloat-web-oscilloscope-main.zip

305.46 KB, 下载次数: 0, 下载积分: 黑币 -5

评分

参与人数 1黑币 +50 收起 理由
admin + 50 共享资料的奖励!

查看全部评分

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享淘帖 顶 踩
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|51黑电子论坛 |51黑电子论坛6群 QQ 管理员QQ:125739409;技术交流QQ群281945664

Powered by 单片机教程网

快速回复 返回顶部 返回列表