告别切换N个窗口调试:我用 Python + WebView 做了款现代化串口助手(含 TCP/UDP、波形、协议解析)

做嵌入式的朋友都懂:看传感器数据要开串口助手,抓协议帧要开 HEX 查看器,看 ADC 曲线要导 Excel 画图,算 ModBus 校验要开网页小工具,调上位机还得自己写模拟脚本。HSS 串口助手就是把这些塞进一个窗口的尝试------串口/TCP/UDP 收发、波形显示、规则解析、自动应答、校验计算全部内置,单文件 exe 仅 13 MB,开箱即用。本文介绍功能与技术实现,文末附下载方式。

一、它长什么样

HSS 串口助手基于 pywebview:Python 做串口/网络后端,HTML/CSS/JS 做界面,EdgeChromium 内核渲染。界面遵循传统串口助手的布局习惯------顶部连接栏、中间接收区、下方发送区、右侧多命令面板、底部状态栏,上手零成本。

一些整体体验上的设计:

  • 无边框自绘标题栏:SVG 图标 + 主题自适应,支持边缘热区拖拽缩放,最小化/最大化/关闭行为与原生窗口一致;
  • 多会话标签:每路连接(串口或网络)一个标签页,独立统计收发字节,可并行开多路调试;
  • 6 秒上手:所有配置(主题、语言、编码、命令、规则)自动保存,下次启动原样恢复。

二、功能介绍

1. 串口管理与数据收发(基本功)

  • 自动扫描串口并显示设备描述(如 USB-SERIAL CH340),支持热插拔检测;
  • 波特率 300 ~ 921600,数据位/停止位/校验位/RTS-CTS 流控收纳在「更多设置」里,不占主界面;
  • 接收区提供字符串 / HEX 两种视图,勾选「对照」后每帧同时显示 HEX 与文本,协议抓帧很方便;
  • 每帧数据带时间戳与收发方向箭头(← / →),发送内容可回显;
  • 接收超时可按波特率自动计算帧间隔,也可手动指定,帧间自动空行分隔,长时间抓包不糊屏;
  • 收发字节统计实时显示,支持一键清零。

2. 波形显示(嵌入式最爱的部分)

状态栏点「波形」打开示波器风格弹窗,把收到的字节流按 8/16/32/64 位(小端) 组成数值绘制成滚动曲线:

  • 点「启动」开始采集,随时启停、切换位宽;
  • X 轴按时间自适应铺满,Y 轴按可见数据自适应量程;
  • 滚轮以鼠标位置为中心等比缩放,右键拖动平移,双击复位;
  • 支持导出 CSV,也能把「解析规则」提取出的数值直接作为波形数据源(见下文规则解析)。

场景:单片机每 100ms 上报一个 16 位采样值,切到波形选 16 位,曲线立刻出来,不用再导 Excel 画图。

3. 统一规则中心:过滤 / 高亮 / 自动应答 / 解析

这是应对"一帧数据里只想看某个字段""设备没回我"这类痛点的核心。四类规则统一在一个弹窗里管理,都支持字符串包含、HEX 字节子串、正则三种匹配方式:

类型 作用 典型用法
过滤 只显示命中关键字的帧 大量心跳帧里只看报警帧
高亮 命中内容标自定义颜色 ERROR 一眼定位
自动应答 收到匹配帧自动回复(可设毫秒级延时) 主机轮询帧自动回模拟数据,不上硬件调通上位机
解析 从帧中提取字段并解码,结果显示在帧下方 温度、寄存器值直接可读

解析规则的提取方式有两种:位置截取 (自匹配结束后偏移 N 字节、截取 M 字节)或正则表达式 (取分组 1);解码支持 字符串 / 大端整数 / 小端整数(附十六进制)。比如设备上报 temp=25.4C,配置「匹配 temp=、截取其后 4 字节、按字符串解析」,接收区立刻多一行:

复制代码
[10:23:45.123] ← temp=25.4C
↳ [解析] 温度: 25.4

4. 网络调试:TCP 客户端 / TCP 服务器 / UDP

连接类型下拉框一键切换,传输层换掉,收发管线、视图、规则、波形全部复用:

  • TCP 服务器:监听本地端口,等设备来连;
  • TCP 客户端:主动连接远端 IP:端口;
  • UDP:绑定本地端口收发数据报。

配合多会话标签,可以一边连着串口看日志,一边开着 TCP 服务器模拟设备,互不干扰。网络连接意外断开时会自动检测并提示。

5. 发送区进阶能力

  • 字符串 / HEX 双模式,自动转义 \r \n,可自动追加回车换行;
  • 循环发送:设定间隔与次数,联调轮询协议时解放双手;
  • 校验和:ADD8 / ADD16 / XOR8 / ModBusCRC16,可指定参与计算的字节范围,自动插入到指定位置;
  • 帧头帧尾:发送前自动附加,支持 HEX 或文本格式;
  • 发送历史用 ↑ 键召回;发送输入框可收起,给接收区腾地方。

6. 多命令面板(把常用指令做成按钮)

右侧面板把常用指令做成可点击按钮,一次配置长期使用:

  • 按页面分组(AT 指令、ModBus 指令分开放),页面可新增/删除/重命名/调整顺序;
  • 每条命令独立选择 字符串/HEX 模式,双击可加注释名;
  • 顺序执行:本页命令按设定间隔依次发送 N 次,批量初始化设备很好用;
  • Ctrl+点击多选、拖拽排序、批量复制/剪切/粘贴、Delete 批量删除;
  • 支持命令导入/导出(JSON),也支持从 SSCOM 配置一键迁移。

7. 主题、颜色自定义与双语

  • 三档主题:浅色 / 深色 / 跟随系统,一键切换;
  • 颜色自定义:浅色、深色模式各自可改 界面底色、卡片底色、控件底色、主/次文字、强调色、边框色,改完实时生效、随设置持久化,还能一键恢复默认;
  • 中英双语:状态栏一键切换中文/English,即时生效。

8. 其他

  • 数据记录与导出:实时记录收发数据到本地(超 10MB 自动分割),支持 TXT / CSV / HEX 导出,可按收/发方向过滤;
  • 应用内更新:设置页一键检测新版本、应用内下载并自动重启完成升级,无需手动下载;
  • 接收编码:GB2312 / GBK / UTF-8 等常见编码可切换,多字节字符跨帧不乱码。

三、技术栈与实现思路

整个项目就是"Python 后端 + Web 前端"的经典组合:

层 技术 说明
界面 HTML / CSS / JS 原生实现,无框架;CSS 变量做主题与颜色自定义
桥接 pywebview js_api 把 Python 对象直接暴露给 JS,前端 50ms 轮询取数据
串口/网络 pyserial + socket 统一传输层抽象,串口/TCP/UDP 热切换
打包 PyInstaller 单文件 exe(约 13 MB),前端资源随包分发
更新 Gitee Release API 源码仓库与发行仓库分离,应用内自更新

几个值得一提的实现细节:

  1. 接收线程与帧聚合:pyserial 在独立线程读取,按"字节间隔 ×5"聚合出完整帧再推给前端,避免高速数据被拆得七零八落;间隔按当前波特率、数据位、校验位自动计算。
  2. 增量解码 :GB2312/GBK 等多字节编码的字符可能被串口分帧截断,采用 codecs.getincrementaldecoder 增量解码,跨帧字符不乱码。
  3. 发送管线统一:手动发送、命令按钮、自动应答、顺序执行共用一条管线------转义 → 编码 → 校验 → 帧头帧尾 → 发送,行为完全一致。
  4. 解析在字节层进行:规则解析统一在原始字节流上查找匹配(HEX 按字节、字符串按编码后的字节),截取与大小端重组都在字节层完成,不受显示格式影响。
  5. 无边框窗口的任务栏修补 :FormBorderStyle.None 的无边框窗口在 Windows 上缺少 WS_MINIMIZEBOX|WS_SYSMENU 样式,点击任务栏图标无法最小化/还原,启动后需要用 SetWindowLongW 补上这两个样式。
  6. 自更新的坑 :PyInstaller onefile 运行时会把依赖解压到临时目录,更新重启时若继承了 _MEIPASS2 等引导环境变量,新进程会依附旧进程的临时目录,旧目录被清理后新进程无声退出------重启前必须清掉这些变量。

四、下载与使用

Windows 免安装,下载单个 exe 直接运行(约 13 MB):

👉 Gitee 发行版(当前 v1.5.2)

运行需系统自带 EdgeChromium/WebView2 运行时(Win10/11 一般已内置)。

开发者方式运行:

bash 复制代码
git clone <仓库地址>
pip install pywebview pyserial chardet
python main.py

五、写在最后

这个工具是跟着自己的调试需求一步步长出来的:先有收发,然后嫌切窗口麻烦加了波形,再嫌手算校验麻烦加了校验和,接着把"看协议字段"做成规则解析,后来联调网络设备又加了 TCP/UDP......下一个版本想把协议模板导入和多串口联动做进去,如果你也在做嵌入式开发,欢迎试用反馈。

觉得有用的话,点个赞/收藏支持一下,这是更新的最大动力 🚀

相关推荐
论文复现现场1 小时前
DeepSeek V4.1 Flash 各平台价格怎么比?缓存、峰谷计费与 Python 成本计算
开发语言·python·缓存·大模型·成本优化·deepseek
打工仔折腾 AI1 小时前
鸿蒙平板远控电脑实测:ToDesk蓝牙键鼠、双模式鼠标与跨端剪贴板落地记录
人工智能·后端·python·性能优化·计算机外设·电脑·harmonyos
Metaphor6921 小时前
Python 实用技巧:从零自主生成结构化 PDF 页面
python·pdf
打工仔折腾 AI1 小时前
鸿蒙端ToDesk远控电脑实测:蓝牙键鼠、双模式鼠标与跨端剪贴板实践
后端·python·性能优化·计算机外设·电脑·harmonyos·ai agent 实战
kimnoic1 小时前
Python变量与数据类型全解析(最新整理)
开发语言·python
Python图像识别2 小时前
46-【2027毕设】YOLO11田间杂草检测识别系统 - Python完整源码+PyQt5界面+训练模型+数据集
python·qt·课程设计
计算机编程指导师2 小时前
计算机毕设选题:基于Spark+Django的水质多指标关联分析与可视化系统源码 毕业设计 选题推荐 数据分析 机器学习
大数据·hadoop·python·spark·毕业设计·课程设计·水质
小白快快跑哦2 小时前
python-字符串全解(六):正则表达式-分组
python·mysql·正则表达式·分组
计算机编程指导师2 小时前
【大数据毕设】Hadoop+Spark台北市住宅价格数据可视化分析系统源码 毕业设计 选题推荐 毕设选题 数据分析 机器学习
大数据·hadoop·python·spark·毕业设计·课程设计·住宅价格