Arduino 网页示波器 – 基于 PHPoC Shield 的 6 通道高级触发 Web 示波器

项目特性

• **6 通道同步采集** – 利用 Arduino UNO 6 路 ADC (A0~A5)
• **多模式触发** – 上升沿、下降沿、双沿；单次/普通/自动触发
• **Web 交互界面** – 跨平台浏览器访问，支持触摸/鼠标操作
• **虚拟旋钮调节** – 时基、电压档位、垂直偏移实时调整
• **波形冻结/回放** – 触发后自动捕获并显示触发点前后波形

硬件清单

• Arduino UNO ×1
• PHPoC Shield for Arduino ×1 – 内置 Web 服务器与 WebSocket 网桥
• 跳线若干 – 信号接入 A0~A5，共地

工作原理

数据采集端 (Arduino)

以 115200 波特率持续向串口发送格式化文本：

timestamp_us  ch0_V  ch1_V  ch2_V  ch3_V  ch4_V  ch5_V\n

其中 timestamp_us = micros()，电压值 = analogRead() * (5.0/1023.0)。PHPoC Shield 通过 SPI 读取串口数据并转发至 WebSocket。

Web 显示端 (PHPoC 内嵌 Web App)

浏览器加载 oscilloscope.php，建立 WebSocket 连接 ws:///serial_monitor，实时解析数据流，在 Canvas 绘制波形。前端实现：

• 环形缓冲区存储最近时长 (时基 × 格数) 的数据
• 触发状态机：监测选定通道过零/阈值跳变，满足条件时锁定缓冲区副本
• 虚拟旋钮：极坐标映射鼠标/触摸拖动角度 → 参数增量
• 自适应布局：横屏全屏波形，竖屏/窄屏侧边栏设置

使用步骤

1. 将 PHPoC Shield 堆叠在 Arduino UNO 上，接入 USB 供电
2. 上传 WebOscilloscope.ino 至 Arduino
3. 通过 PHPoC 管理页面上传 oscilloscope.php 至 Shield 文件系统
4. 电脑/手机浏览器访问 https:///oscilloscope.php
5. 用两根杜邦线分别连接 GND 与待测信号至任意 A0~A5，即可观测波形

扩展 GND 引脚技巧

Arduino 仅有 2 个 GND 引脚，6 通道共地时可用排针扩展板或面包板汇聚地线，保持等电位。

代码结构

Arduino 端 (WebOscilloscope.ino)

极简循环：读 6 路 ADC → 计算电压 → 串口按格式输出。可注释掉不需要的通道以提高采样率。

Web 端 (oscilloscope.php)

单文件包含 HTML/CSS/JS，核心模块：

• init() – Canvas/WebSocket/事件绑定初始化
• ws_onmessage() – 解析文本帧，填充 live_data[] 与 live_time_us[]
• handle_trigger() – 触发判定逻辑
• update_loop() – 60fps 定时刷新：数据清理、触发状态更新、波形绘制、旋钮渲染、按钮状态同步
• draw_graph() – 坐标映射绘制多通道折线，含图例、网格、时基/电压标注

性能指标

进阶改进方向

• 改用二进制协议 (如 Protobuf over WebSocket) 提升采样率至 50 kS/s+
• 增加数学运算通道 (FFT、X-Y 模式、差分测量)
• 移植至 ESP32 + WebServer，摆脱 PHPoC Shield 降低成本
• 增加屏幕截图导出 (PNG/CSV) 与波形标注功能
• 集成 WiFi 热点模式，无需外部路由器即可手机直连

适用场景

• 教学演示：模拟信号可视化、PWM 波形观测、传感器输出调试
• 现场快速故障排查：无需携带台式示波器
• 远程监测：局域网内任意设备实时查看波形