標題: Web 示波器:實時解析 JustFloat 與 FireWater 協議,支持串口、藍牙 和 WebSocket [打印本頁]
作者: createskyblue 時間: 2026-1-23 14:08
標題: 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.
PixPin_2026-01-23_14-01-00.png (366 KB, 下載次數: 0)
下載附件
2026-1-23 14:07 上傳
在線使用:
獲取源代碼(附件壓縮包源代碼可能不是最新的):
提示:推薦使用最新版本的 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環境
- 克隆項目:
- 進入項目目錄并安裝依賴:
cd justfloat-web-oscilloscopenpm install - 啟動開發服務器:
npm run dev
使用說明- 確保瀏覽器支持所需功能(Chrome/Edge推薦)
- 連接設備到電腦或啟動WebSocket數據服務
- 打開應用,選擇對應的協議類型(JustFloat或FireWater)
- 選擇連接方式:
- 串口連接:點擊"連接設備"按鈕并選擇對應的串口設備
- WebSocket連接:輸入WebSocket服務器地址,點擊"連接"按鈕
- 根據需要調整波特率設置(串口連接時有效)
- 實時查看設備發送的數據波形
- 使用鼠標框選功能進行數據區域分析
功能操作- 縮放功能:在圖表上拖拽鼠標創建選區,可以放大查看特定數據段
- 縮放歷史:支持多級縮放歷史記錄,雙擊圖表或點擊右上角的返回按鈕可返回上一級縮放狀態
- 連續框選會自動記錄每次縮放的狀態
- 縮放狀態指示器會顯示當前歷史記錄的級數
- 當沒有歷史記錄時,雙擊會完全重置縮放
- 數據統計:選區后會顯示詳細的統計數據(采樣點數、時長、速率等)
- 通道控制:可以在側邊欄單獨控制每個通道的顯示/隱藏
- 實時光標:移動鼠標可以查看任意點的具體數值
- 數據導出:可將當前顯示的數據導出為JSON文件(按通道存儲,包含采樣率信息)
- 連接切換:可在串口和WebSocket之間切換連接方式
-
-
justfloat-web-oscilloscope-main.zip
2026-1-23 14:12 上傳
點擊文件名下載附件
下載積分: 黑幣 -5
305.46 KB, 下載次數: 0, 下載積分: 黑幣 -5
| 歡迎光臨 (http://m.raoushi.com/bbs/) |
Powered by Discuz! X3.1 |