ion

All web apps in the Catalogue

Web Serial Plotter - 高性能网页串口绘图器

by CaptainKAZ · io.github.captainkaz.web-serial-plotter

Not TrustedWeb appUnrated★ 27 stars

An implementation of a pure front-end-based serial port plotting debugger…

An implementation of a pure front-end-based serial port plotting debugger, based on Timechart, THREE.js & WebUSB.

Screenshots

  • Web Serial Plotter 应用截图
    Web Serial Plotter 应用截图

About

这是一个基于 Web Serial API 的高性能网页串口数据绘图和可视化工具,旨在提供一个无需安装、跨平台的串口数据监控解决方案。它利用 Web Worker 处理数据以保持主线程流畅,使用 TimeChart 库进行高效的 WebGL 加速绘图,并集成了 Three.js 实现四元数姿态的 3D 可视化,以及 xterm.js 来显示原始数据流。 * 🔌 Web Serial 连接: 通过浏览器直接连接和读取串口设备数据。 * 🧪 模拟数据源: 内置模拟数据生成器,方便无设备时进行功能测试和性能演示。 * 🧩 多种解析协议: * 支持多种内置串口数据解析协议(默认逗号/空格分隔、JustFloat、FireWater)。 * 支持用户自定义 JavaScript 解析函数,提供最大的灵活性。 * 📈 高性能实时绘图: * 使用 TimeChart 库进行 WebGL 加速的多通道数据曲线绘制。 * 交互式图表:支持缩放(鼠标滚轮)、平移(鼠标拖拽)。 * 自动跟随最新数据或手动浏览历史数据(可切换)。 * 图表通道数可根据接收到的数据动态增加。 * 🔢 数据显示: * 实时显示最新解析出的各通道数值。 * 使用 xterm.js 终端模拟器显示原始串口数据流,支持文本(STR)和十六进制(HEX)两种格式切换。 * 四元数 3D 可视化: * 使用 Three.js 实时展示基于四元数数据的 3D 物体姿态。 * 需要用户从可用数据通道中选择代表 W, X, Y, Z 的四个通道。 * 💾 数据缓冲与导出: * 可配置数据点的内存缓冲大小。 * 实时显示缓冲区使用百分比、已缓冲点数和预计剩余/总缓冲时间。 * 可以将缓冲区内的数据点(时间戳和数值)导出为 CSV 文件。 * 🚀 性能优化: * 使用 Web Worker 进行数据处理和解析,避免阻塞浏览器主线程,确保 UI 流畅。 * 优化数据批处理和 UI 更新逻辑。 * 📱 现代化 Web 技术: * 采用 ES Modules 进行模块化开发。 * 支持 PWA (Progressive Web App),可添加到主屏幕并具有一定的离线缓存能力 (通过 Service Worker)。 * 使用 Split.js 实现可拖拽调整大小的界面布局。 * 使用 Lucide Icons 提供清晰的图标。 我们致力于保持 Web Serial Plotter 的高性能特性。 Web Worker 的使用、WebGL 加速的 TimeChart 以及优化的数据处理流程都是为了确保应用的流畅运行,即使在处理高频数据时也是如此。 Web Serial Plotter - 高性能网页串口绘图器 is the open-source project CaptainKAZ/web-serial-plotter (https://github.com/CaptainKAZ/web-serial-plotter) by CaptainKAZ, released under MIT. Ion packages it unmodified from commit bb1e018a431d, adding only a manifest, an icon and a storage compatibility script.

Source

Written by CaptainKAZ, published to Oikou by Ben Grande.

  • ★ 27 stars on GitHub
  • Licence: MIT
  • Built from commit bb1e018a431d

View the repository on GitHub

Age rating

Not rated. Nobody has said who this app is suitable for, so Personal Clouds and the Oikou app treat it as 18+.

What version 0.20260930.0 may do

Internet

It asks to reach these hosts, and no others:

  • captainkaz.github.io
  • cdn.jsdelivr.net
  • unpkg.com
  • cdn.tailwindcss.com
  • cdnjs.cloudflare.com
  • huww98.github.io

Devices you plug into your own computer

  • Uses serial ports you choose in your browser (Web Serial): Talks to the serial ports you plug into your computer

High risk: a page can change a device’s settings or replace its firmware. Your browser shows its own chooser for each device, and the app gets only the ones you pick there, while its page is open. These are not the devices on your Personal Cloud’s computer. You choose whether it gets each kind; Chrome and Edge have them, Firefox, Safari and the iOS app do not.

Personal Cloud tools

  • Keep a database of its own on your Personal Cloud ion.db
  • Keep files in its own storage on your Personal Cloud ion.files

Notifications

It does not send push notifications.

Storage

Up to 1 GB on your Personal Cloud.

Add to Personal Cloud

Sign in to add this web app to a Personal Cloud of yours. It runs there, on your own computer, and you open it from there; nothing is installed on your phone.

Sign in to add

Versions

0.20260930.0 Latest Shown above

Published · a ready-built bundle

Imported from CaptainKAZ/web-serial-plotter at bb1e018a431d.

Report this app