指令与绘图联合工作台
左侧下发常用指令，右侧同步观察实时曲线
可编程指令按钮
支持多个本地页面，配置仅保存于当前浏览器
当前页面管理
重命名、复制与删除
指令按钮、页面与协议配置使用 localStorage 保存，不会上传到服务器。清理浏览器站点数据会删除这些内容，建议定期“保存工作区”。
等待绘图数据
发送 ASCII 示例协议，或启用 HEX 解析映射后接收二进制帧。
ASCII 固定绘图协议
一行支持多个 X、多个 Y、多个图像
#PLOT|plot=环境监测|xlabel=时间 / s|ylabel=测量值|x.time=1.20|x.distance=10|y.温度=23.4@time:spline|y.压力=101.2@time:line|y.位移=0.35@distance:scatter #PLOT|plot=空间扫描|xlabel=位置 / mm|ylabel=幅值 / V|x.position=12.5|y.幅值=0.82@position:polyline
- plot：图像名称；不同名称自动创建不同图像。
- xlabel / ylabel：可选，设置本图的横、纵坐标标题，也可在图像右上角手动修改。
- x.名称=数值：定义横坐标，可在一行中定义多个。
- y.曲线名=数值@横坐标名:样式：定义纵坐标及其绑定的 X。
- 样式：line、polyline、spline、scatter。
- 每条数据必须以换行结束（LF、CRLF 均可）。
ASCII 解析测试
无需网络设备即可验证数据格式
JSON 自定义绘图映射
适合 MQTT / 4G 设备的 JSON 上报
尚未应用配置。
- xPath / yPath 使用点号路径，例如 data.temperature。
- plotPath 可从消息中动态读取图像名称；留空则使用固定 plot。
- MQTT 消息可不带回车换行；TCP/UDP JSON 建议一行一条。
HEX 固定帧绘图配置
帧头 + 固定帧长 + 字段偏移
尚未应用配置。
HEX 方案说明
简单、可适配大多数定长二进制协议
- header：帧头，如 AA55。
- frameLength：完整帧字节数，包含帧头与校验字节。
- offset：从帧第 0 字节开始计算的字段偏移。
- 数据类型：uint8/int8/uint16/int16/uint32/int32/float32/float64。
- checksum：支持 none、xor8、sum8；xor8/sum8 默认校验最后一个字节。
推荐使用流程
云端部署版本
- 云服务器安装 Node.js 网关与 Mosquitto MQTT Broker，并通过 Nginx 暴露 /network/ 与 /network-ws。
- TCP/UDP：选择协议与监听端口（默认 888），启动后让 4G 设备连接云服务器公网 IP。
- MQTT：Broker 常驻运行，设备使用安装脚本生成的用户名和密码连接 1883 或 8883。
- 网页端设置主题过滤器即可监控 MQTT 上报，并可向指定主题发布下行指令。
- ASCII、JSON、HEX 数据均可按协议配置实时绘图。
- 使用“保存工作区”备份所有指令、协议、图像和页面参数。
浏览器限制
这是安全机制，不是程序故障
- 浏览器通过 WSS 管理云端网关，原始 TCP/UDP 监听由 Node.js 服务完成。
- MQTT Broker 使用 Mosquitto，默认强制用户名和密码认证。
- TCP/UDP 自定义端口、MQTT 1883/8883 必须同时在云安全组和系统防火墙中放行。
- MQTT 1883 是普通连接，8883 使用 TLS；公网正式设备优先使用 8883。
- 浏览器关闭后 TCP/UDP 监听、MQTT Broker 与后台消息记录仍继续运行。