从电极到浏览器：基于BW16与ESP32-CYD的无线EEG实时波形链路搭建

年初我手头同时到了两块板子一块是安信可的 BW16另一块是带 2.8 寸 TFT 屏的 ESP32-CYD。原本只是打算各自跑跑 demo后来一个念头冒出来能不能让它们合作把一路脑电信号从传感器上取下来经过无线传输既显示在 ESP32-CYD 的屏幕上又同步推到手机浏览器的网页里实时画波形于是就有了这条藏在桌面乱线堆里的 EEG 原型链路。花了一个周末打通整个过程暴露出来的坑不算少但把逻辑理顺之后会发现它其实是一条很规矩的数据管道。这篇文章就是完整的搭建记录。我会从选型逻辑、数据流设计、固件思路、网页可视化到实测踩坑一条条讲清楚。无论你是刚接触生物电采集的硬件爱好者还是想在嵌入式设备上做实时 Web 可视化的人都能在这条链路里找到值得拿走的东西。1. BW16 与 ESP32-CYD 的选型逻辑为什么这条链路这样搭1.1 采集端用 BW16低功耗、双频 Wi-Fi、够用的外设先说说为什么采集端选了 BW16。BW16 是瑞昱 RTL8720DN 方案的模组双核 Cortex-M4F主频 125MHz 左右支持 2.4G/5G 双频 Wi-Fi 和 BLE 5.0。这个芯片放在 EEG 采集场景里有几个天然优势。第一个是低功耗。脑电采集往往要贴着头部或者戴在头上如果用一块开发板拖着 USB 线跑那纯属自找麻烦。BW16 支持多种低功耗模式射频关掉之后电流能压到很低后面接锂电池或者纽扣电池都有余量。第二个是外设接口够用。EEG 模块一般输出模拟电压或者串口数据BW16 的 ADC、UART、SPI、I2C 都能接不用像某些小模块那样还得靠软串口硬凑。第三是无线能力不弱。RTL8720DN 的 Wi-Fi 吞吐在几十 Mbps 级别传一路 16bit、256Hz 采样的 EEG 数据连零头都用不到但它胜在协议栈完整、丢包重连逻辑能自己控制。我实测下来BW16 作为采集节点有一个容易被忽略的优点它可以在 Wi-Fi 和 BLE 之间灵活切换。如果你不想依赖路由器完全可以把 BLE 通道打开让手机直接接收数据。不过这条链路里我用了 Wi-Fi原因是 ESP32-CYD 要同时充当 Web 服务器走同一局域网可以把数据广播和网页访问合并到一张网里整体架构最干净。1.2 接收端用 ESP32-CYD一块低成本的带屏网关ESP32-CYD 这个名字你可能听着陌生它全称是 ESP32-2432S028R因为那块黄色的 PCB 在圈子里得了个外号叫 Cheap Yellow Display。它本质上是一块集成了 ESP32 主控和 2.4 英寸电阻触摸屏的小板子屏幕分辨率 320x240主控是经典的 ESP32 双核 240MHz。为什么接收端选它而不是另一块 BW16核心原因有三个。第一ESP32 的内存和 Flash 更大跑 Web 服务器不吃力。BW16 的 RAM 相对局促又当采集端又当服务器会非常紧张而 ESP32 的 320KB RAM 加上 4MB Flash足够塞下一个小型 HTTP 服务器、TCP 客户端连接池和波形绘图缓冲。第二板载屏幕让调试效率翻倍。数据通没通、波形长什么样、信号有没有饱和抬眼就能看到根本不用每次打开串口监视器。第三ESP32 的 Arduino 生态极其成熟TFT_eSPI 库驱动这块屏幕只需要改一个配置文件WebServer 库又是官方自带的上手门槛比你想的低很多。所以这条链路的分工很明确BW16 负责靠近电极采集信号ESP32-CYD 负责收数据、画屏幕、开网页服务。两个低成本的模组拼在一起完成了一条完整的数据管道。1.3 链路全景EEG 电极到浏览器页面要经过哪几步在动手之前先把整条链路的逻辑写在前面后面所有操作都不会跑偏。EEG 电极采到的微伏级信号先经过前端放大和滤波变成可被 ADC 采样的电压信号。BW16 以固定采样率读取这个电压值加上帧头、序号和校验字节打包成 UDP 数据包发到局域网。ESP32-CYD 在同一个局域网里监听固定端口收到 UDP 包之后解析出原始幅值。这个幅值有两路去向一路直接画在板载 TFT 屏幕上一路暂存在内存环形缓冲区里。手机或电脑浏览器访问 ESP32-CYD 的 IP 地址网页通过 HTTP 轮询接口每隔 100ms 拉取缓冲区里的最新数据然后用 Canvas 画成波形。整个过程没有云服务器没有 MQTT broker就是两个设备加一个浏览器。最妙的是无论屏幕端还是网页端读到的都是同一份数据源所以你可以一边盯着板子上的波形一边看手机浏览器里的动态曲线两者的趋势完全一致。这为后面做算法验证打下了很好的基础。2. 链路设计中的四个关键取舍2.1 脑电信号接入串口模块还是模拟前端EEG 信号本身的特征决定了接入方式不能随便选。头皮上测到的脑电信号幅度一般在 10 到 100 微伏频率主要集中在 0.5Hz 到 50Hz 之间周围环境里的 50Hz 工频干扰往往比信号大好几个数量级。这种量级的信号如果直接怼进单片机的 ADC你读到的基本是噪声。所以第一步要解决信号调理。目前常见的做法有两种。第一种是使用集成了放大滤波甚至 ADC 的串口输出模块。这类模块内部已经把模拟前端做完了通过 UART 输出数字化的原始数据或者压缩后的波形值单片机只需要负责读取和转发。上手最简单适合第一次搭 EEG 原型的人。我在这个项目里用的就是这种方式EEG 模块内部完成前置放大、带通滤波和 24bit ADC 采样输出的是数字格式的数据帧。第二种是自己搭模拟前端用仪表放大器加运放滤波器再把信号送进 BW16 的片内 ADC。这种方式自由度最高但对硬件功底要求高任何一个环节接地处理不好波形都会被噪声吞掉。如果你是第一次接触生物电信号我建议先走串口模块路线把无线链路和网页可视化跑通等有了经验再去折腾模拟前端。2.2 无线传输协议UDP 才是实时波形的好朋友无线传输协议的选择是这条链路里最核心的取舍之一。很多人一上来就会想用 TCP因为 TCP 可靠、不会丢包。但实时波形场景下TCP 的可靠有时候反而是负担。TCP 为了保证数据包不丢不重会在丢包时触发重传。重传意味着什么意味着后面的数据包要排队等待网络稍一波动整条波形就会周期性卡顿。对于 EEG 这种连续采样、天然容忍少量丢点的数据TCP 的可靠性其实是过度保障。我最后选了 UDP并且自己做了一层轻量校验。每次发送的数据包很小只有几个字节即使丢了 1% 的包反映在波形上也只是个别采样点的横向缺失肉眼根本分不出来。更重要的一点是UDP 没有连接状态ESP32-CYD 不需要为每一个采集节点维护 TCP 连接这对嵌入式设备的内存和 CPU 都非常友好。这里可以顺带算一笔账单通道 EEG采样率 256Hz每个采样点 16bit每秒产生的原始数据只有 512 字节。哪怕把协议开销翻一倍也才 1KB/s。Wi-Fi 的带宽对这个量级毫无压力真正的瓶颈从来不是带宽而是协议设计的复杂度和节点的处理能力。2.3 数据包格式小帧、序号、CRC 一个都不能少有了 UDP 这个传输底座数据包格式就得自己设计了。我用的数据帧非常简单结构如下字段长度含义帧头2 字节固定为 0xA5 0x5A用于同步序号1 字节0~255 循环递增用于检测乱序和丢包采样值高字节1 字节16bit 采样值的高 8 位采样值低字节1 字节16bit 采样值的低 8 位状态位1 字节携带信号饱和、电极脱落等标志CRC81 字节对前 6 字节做简单 CRC 校验这个包总共 7 字节加上 UDP 头也不过 35 字节左右。放在 256Hz 采样率下每秒发送 256 个这样的包网络开销也就 9KB/s完全可以接受。序号字段一开始觉得多余后来实测发现是必须的。Wi-Fi 环境下偶尔会出现包乱序如果没有序号你没法判断当前画的数据是否比上一个帧更旧。CRC 校验同样不能省嵌入式环境里电磁干扰可能导致个别字节跳变一个粗校验就能过滤掉绝大多数坏帧。2.4 网页实时显示为什么用 HTTP 轮询而不是 WebSocket网页端的数据展示是这条链路里最有意思的部分。ESP32-CYD 既要画屏幕又要当 HTTP 服务器开发资源非常有限。很多教程会推荐 WebSocket实时性好、全双工但代价是嵌入式端要维护长连接、解析 WebSocket 帧、处理心跳代码量和内存占用都不小。我在项目里选择了一个“土但有效”的方案HTTP 轮询。ESP32-CYD 只暴露两个接口根路径返回 HTML 页面/latest 接口返回最近 64 个采样点的数组。前端 JavaScript 每 100ms 用 fetch 拉一次数据然后直接画到 Canvas 上。轮询的延迟是 100ms 级别对脑电波形观察完全够用。EEG 主要能量集中在 0.5Hz 到 50Hz100ms 的刷新间隔相当于每秒更新 10 次画面已经能清楚看到 alpha 波的起伏轮廓。而且 HTTP 轮询不占长期连接ESP32 的 WebServer 库处理完一次请求就释放连接内存管理压力小很多。如果你后续想把刷新率提到 30fps 以上可以考虑升级为 SSE 或者 WebSocket但作为原型验证轮询方案是我认为性价比最高的选择。3. 完整实操记录从接线到网页画波形3.1 硬件接线与供电先把地线处理好硬件接线是整个项目最枯燥也最容易出错的一步。我的连接方式是这样EEG 模块的信号输出接 BW16 的 UART 串口模块供电用 3.3V信号地和 BW16 的地必须共地。如果是模拟输出则把输出脚接到 BW16 的 ADC 引脚。这里有一条必须强调的经验生物电采集最忌讳地线环路。EEG 模块如果同时接了 USB 供电和外部电池可能会形成两个参考地导致工频干扰暴涨。我最早用 USB 给 BW16 供电波形里 50Hz 噪声几乎把信号完全淹没后来改成锂电池独立供电噪声立刻下去了。浮地供电对抑制工频干扰的效果比你加再多滤波算法都明显。ESP32-CYD 端的供电相对省心我直接用 USB 或者充电宝供电。两块板子之间没有任何物理连接完全靠 Wi-Fi 通信这保证了采集端可以真正脱离地面电网独立工作。3.2 BW16 端固件定时采样、打包、UDP 发送BW16 端用 Arduino 框架开发核心流程是初始化串口和 Wi-Fi然后在主循环里读取 EEG 模块的数据帧加头加序号之后通过 UDP 发出去。下面是这个项目的核心代码片段你可以直接参考#include WiFi.h #include WiFiUdp.h const char* ssid EEG_Lab; const char* pass 12345678; const IPAddress serverIP(192, 168, 1, 100); // ESP32-CYD 的 IP const unsigned int serverPort 2199; WiFiUDP udp; uint8_t frameCount 0; void setup() { Serial1.begin(57600); // 接 EEG 模块的 UART WiFi.begin(ssid, pass); while (WiFi.status() ! WL_CONNECTED) { delay(100); } udp.begin(2198); } void loop() { // 读取 EEG 模块输出的 4 字节帧头、高字节、低字节、状态位 if (Serial1.available() 4) { uint8_t h Serial1.read(); if (h 0xA5) { uint8_t data[7]; data[0] h; data[1] frameCount; data[2] Serial1.read(); // 采样值高字节 data[3] Serial1.read(); // 采样值低字节 data[4] Serial1.read(); // 状态位 data[5] 0; // CRC 占位 for (int i 0; i 5; i) { data[5] ^ data[i]; // 最简单的异或校验 } udp.beginPacket(serverIP, serverPort); udp.write(data, 6); udp.endPacket(); } } }这段代码有几个细节值得说明。第一串口波特率要跟 EEG 模块匹配常见的模块有 57600 和 115200 两种接上之后先拿串口监视器看一眼输出再往下走。第二CRC 我用的是异或校验虽然不如 CRC8 严谨但足够过滤掉绝大多数单比特错误。第三如果 EEG 模块本身输出的就是完整数据帧那你完全可以跳过解析直接把帧尾加上序号和校验转发出去代码会更简单。Wi-Fi 连接部分要提醒一句BW16 连接路由器需要一点时间我在 setup 里用了阻塞等待实际项目中如果对功耗敏感可以改成超时重连机制。但原型阶段怎么简单怎么来。3.3 ESP32-CYD 端接收解析、屏幕描点与 HTTP 服务ESP32-CYD 端的代码要干三件事接收 UDP 数据、把采样值画到屏幕上、提供 HTTP 接口给网页拉数据。这里我直接用官方 WebServer 库TFT 屏幕用 TFT_eSPI 驱动。TFT_eSPI 在使用前需要修改 User_Setup.h 文件把屏幕驱动型号改成 CYD 对应的那款常见是 ILI9341 或者 ST7789引脚定义也要按照板子标注填好。很多新手在这里卡住其实只要在库目录里找到 User_Setup.h搜索你的屏幕型号并取消注释即可。核心代码框架如下#include WiFi.h #include WebServer.h #include WiFiUdp.h #include TFT_eSPI.h const char* ssid EEG_Lab; const char* pass 12345678; WebServer server(80); WiFiUDP udp; TFT_eSPI tft; #define HISTORY_LEN 64 uint16_t history[HISTORY_LEN]; int historyIndex 0; int historyCount 0; void addSample(uint16_t v) { history[historyIndex] v; historyIndex (historyIndex 1) % HISTORY_LEN; if (historyCount HISTORY_LEN) historyCount; } void drawWave(uint16_t v) { static uint32_t x 0; uint16_t y map(v, 200, 800, 220, 20); tft.drawPixel((x / 2) % 320, y); x; } void handleLatest() { String body ; for (int i 0; i historyCount; i) { if (i) body ,; body String(history[(historyIndex i) % HISTORY_LEN]); } server.send(200, text/plain, body); } void setup() { WiFi.begin(ssid, pass); while (WiFi.status() ! WL_CONNECTED) delay(100); udp.begin(2199); server.on(/, []() { server.send(200, text/html, PAGE_HTML); }); server.on(/latest, handleLatest); server.begin(); tft.init(); tft.setRotation(1); } void loop() { server.handleClient(); int packetSize udp.parsePacket(); if (packetSize 6) { uint8_t buf[6]; udp.read(buf, 6); if (buf[0] 0xA5) { uint16_t raw (buf[2] 8) | buf[3]; addSample(raw); drawWave(raw); } } }注意 tft.drawPixel((x / 2) % 320, y) 这行我做了简单的横向缩放让波形在 320 像素宽的屏幕上以两像素为步进移动。如果你觉得屏幕上的波形移动太快或太慢可以调整这个除数。实际跑起来屏幕会从左到右一列列画出波形视觉上就像一台迷你脑电图机。3.4 浏览器端用原生 JavaScript 画实时曲线网页端没有引入任何框架一个 HTML 文件加几十行 JavaScript 就够用了。核心思路是每隔 100ms 请求一次 /latest 接口拿到逗号分隔的采样值数组然后逐个绘制到 Canvas 上。!DOCTYPE html html head meta charsetutf-8 titleBW16 EEG Monitor/title /head body canvas idc width600 height300 stylebackground:#000;width:100%/canvas script const canvas document.getElementById(c); const ctx canvas.getContext(2d); const W canvas.width; const H canvas.height; let x 0; async function update() { try { const resp await fetch(/latest); const text await resp.text(); const values text.split(,); for (let i 0; i values.length; i) { const v Number(values[i]); const y H - ((v - 200) / 600) * H; ctx.fillStyle #0f0; ctx.fillRect(x, y, 2, 2); x (x 1) % W; } } catch (e) { // 网络还没准备好等一下轮询 } setTimeout(update, 100); } update(); /script /body /html这段代码里的 y 坐标映射关系跟屏幕上的一致都假设信号范围在 200 到 800 之间。这个范围取决于你 EEG 模块的输出量程实测后如果波形顶到天花板或者压成一条直线改 map 上下限就行。用手机浏览器打开 ESP32-CYD 的 IP 地址就能看到和板载屏幕几乎同步的波形曲线。由于历史数据缓冲了 64 个点网页端刷新时会先补一段最近的数据不会出现白屏等待的尴尬。4. 实测效果与避坑清单4.1 无线传输丢包与队列积压我最初跑起来的时候屏幕上波形每隔几秒就会出现一条断线或者毛刺。分析后定位到两个原因。第一个原因是 Wi-Fi 环境干扰。我的路由器同时连着十几台设备2.4GHz 频段拥塞严重。后来把 BW16 和 ESP32-CYD 都切到 5GHz 频段丢包率肉眼可见地下降。BW16 支持双频的优势在这里体现得很充分。第二个原因是 UDP 发送频率过高导致接收端处理不过来。我一开始把采样率设成 512Hz每 2ms 发一个包ESP32-CYD 在 handleClient 和 UDP 接收之间切换偶尔会错过几个包。解决办法是降低采样率到 256Hz或者在 ESP32-CYD 端把 UDP 接收改成中断驱动。原型阶段降采样率最直接数据量小一半波形时域轮廓几乎看不出差别。4.2 内存告急ESP32 的 Web 服务要轻薄ESP32 的内存虽然比 BW16 大但也经不起折腾。我一开始想在前端页面里塞入一个画网格的背景图和一些图表库结果页面还没加载完ESP32 的堆内存就被字符串拼接吃掉了不少。解决思路有两条。第一HTML 页面不要用模板字符串里嵌大段 CSS尽量写精简内联样式。第二/latest 接口返回的字符串不要无限增长我的 HISTORY_LEN 控制在 64每次最多返回 64 个数算下来几百字节完全在安全范围。还有一个容易被忽略的点WebServer 的 client 连接在 handleClient 之后会自动释放但如果前端页面频繁刷新旧的 TCP 连接会进入 TIME_WAIT 状态长时间操作后 ESP32 的连接表会慢慢占满。实际使用中你不需要频繁刷新页面Canvas 的动画已经足够实时。4.3 信号里的工频干扰和运动伪迹怎么处理当你第一次看到原始波形八成会失望波形里全是毛刺几乎看不出脑电特征。这时候要做的不是加数字滤波而是先检查硬件端。电极贴合位置、皮肤清洁度、是否使用导电膏这些因素对信号质量的影响远大于算法。我实测中最立竿见影的一步是在 EEG 模块的参考电极和右腿驱动电极上涂了导电膏工频干扰立刻降了一个量级。硬件优化之后如果还想让波形更平滑可以在固件里做一个很简单的预处理。比如对连续三个采样点取平均等效于一个低通滤波能将高频噪声压下去不少。更专业的做法是加 50Hz 陷波器和 0.5Hz 高通滤波器但这两者在 8 位单片机上的实时实现需要小心处理溢出。对于原型演示滑动平均已经能获得相当干净的曲线了。4.4 常见问题速查表现象可能原因解决办法屏幕无波形ESP32-CYD 没收到 UDP检查两块板子是否在同一网段IP 是否写对波形全是竖线毛刺工频干扰严重改用锂电池供电检查电极贴合使用导电膏网页白屏IP 地址输错或端口没开放浏览器直接访问 http://ESP32_IP/ 确认 LED 指示灯波形横向移动太慢history 缓冲太小增大 HISTORY_LEN或降低横向步进除数的分母每几秒出现断线Wi-Fi 拥塞切换到 5GHz 频段或降低 UDP 发送频率屏幕显示花屏TFT_eSPI 引脚配置错误检查 User_Setup.h确认屏幕型号和引脚定义采集端频繁掉线路由器连接数限制改用静态 IP 配置关闭其他高带宽设备5. 可以从原型进一步扩展的方向5.1 多通道同步采集与离线源定位这条链路的单通道版本跑通之后最自然的扩展方向就是增加通道数。脑电信号本质上是一个空间场单通道只能看到某一个位置的电活动如果要定位信号从哪里发出就需要多点同步采集。多通道带来的第一问题是数据量成倍增长。4 通道、每通道 256Hz、16bit 采样每秒数据量大约 2KBUDP 依然能轻松承载。第二个问题是时间同步。每个 BW16 节点独立运行它们的采样时刻并不对齐这会严重影响后续的源定位计算。在原型层面可以先用一个主节点同时读取多路 ADC 或者多个串口模块保证每包数据里包含同一时刻的多个通道。更专业的做法是给每个采样点打上硬件时间戳利用 PTP 或者简单的 beacon 同步协议对齐节点时钟。至于源定位中的最小范数估计那是离线分析阶段的事把原始数据通过网页接口导出成 CSV再导入 MATLAB 或者 Python 做处理完全不需要在嵌入式端跑。5.2 便携化锂电池供电和无线充电我给 BW16 采集端换上 18650 锂电池之后整个节点就完全脱离了线缆束缚。空闲状态下BW16 进入轻度休眠只在采样时唤醒射频发送数据一节 2000mAh 电池撑上半天没有问题。如果想彻底摆脱充电线可以在采集端加一个无线充电接收模块。市面上常见的 Qi 协议模块非常便宜输出 5V配合 TP4056 充电板就能给锂电池充电。这样每次实验前把采集端往充电底座上一放充满就能拿下来用一整天体验很接近消费级可穿戴设备了。5.3 更实时从轮询升级到 SSE 或 WebSocket如果你把前端刷新率当成一个正经优化项可以考虑从 HTTP 轮询升级为 SSE。SSE 只需要服务器单向推送ESP32 端用 WiFiServer 手动维持一个流式连接比 WebSocket 节省资源不少。升级之后网页端可以做到 20ms 级别的刷新间隔波形的平滑度会上一个台阶。升级过程中要注意两点。第一SSE 连接需要服务器在响应头里带上 Content-Type: text/event-stream并且保持连接不关闭。第二连接数不能太多我实测 ESP32-CYD 同时维持 3 路 SSE 连接已经是比较舒适的上限再多就需要用异步服务器了。就我个人体验来说这条链路的最大价值不是“脑电波上网页”这个噱头而是把采集、传输、嵌入式渲染和 Web 可视化这四块完全不同的技术栈串成了一个完整闭环。你可以在任何一环上把它换成更专业的解决方案但骨架不变。如果你手头刚好也有这两块板子按这个思路搭一遍哪怕只是看着自己眨眼的伪迹在屏幕上跳出一个小谷也会觉得这个周末花得值。