搞脑电的人应该都有同一种感觉模块采样只是第一关真正让人头疼的是数据到了手上之后「怎么看、怎么用」。我之前一直是 USB-TTL 插电脑串口助手拉出来一堆十六进制人就被线拴在桌面上想戴着电极站起来走两步都不行。这次我做了一个更彻底的拆解——把「采集」和「显示」完全分开脑电模块把原始数据交给 BW16BW16 走 WiFi 空中接力另一头用带屏幕的 ESP32-CYD 接收本地屏画波形同时开一个网页让手机、电脑也能实时看。这条无线 EEG 原型链路从接线到跑通花了两个晚上中间踩了不少坑但整体思路和最终效果都很稳定。如果你也在琢磨怎么把脑电模块的数据搬到屏幕和网页上这篇文章应该能帮你少走一半弯路。我先把结论放在前面这不是一套医疗级系统而是一个强调「快速验证、随时演示」的原型链路。它的价值在于把传感器到人眼之间的路径彻底打通让你能自由探索脑机接口实验、专注度监测、睡眠数据观察这类应用场景。1. 为什么必须把「采集端」和「显示端」拆开脑电模块的输出形态其实很固定大多数单通道模块都是通过 UART 吐出一串一串的二进制帧。像 NeuroSky 系模块以及国产的很多兼容模块内部已经完成了 512Hz 的原始波形采样还顺带算出了信号质量、注意力、眨眼强度这些指标。问题从来不在「能不能采到数据」而在「数据采到了之后去哪儿」。1.1 有线方案的三宗罪用 USB 串口直连电脑的做法最省事但有几个绕不开的痛点活动范围被锁死USB 线的长度就是你的活动半径稍微一动就容易拉扯到电极线产生运动伪迹。数据被关在单一设备里波形只在电脑的串口助手里跳动别人想看就得凑过来根本没法一边做演示一边让手机、平板同步观察。采集端与显示端强耦合换一个显示平台就要重新插拔线软硬件都绑在一起后续想扩展成头戴式设备几乎不可能。这些痛点的本质是脑电信号本身是「连续产生的流」消费它的场景却应该是「多端、移动、实时」的。我想要的不是一根更长的线而是像现在的无线耳机一样把传感器挂在身上数据自己飞出去。1.2 原型链路的整体拓扑于是就有了这条链路的四段式结构脑电模块 → BW16采集端贴身 → WiFi 无线传输 → ESP32-CYD网关显示端 → 屏幕 / 网页第一段是脑电模块通过串口把原始帧喂给 BW16BW16 负责把帧打包成 UDP 报文通过 WiFi 发给 ESP32-CYD。CYD 这边同时要做三件事接收无线数据、在 TFT 屏幕上绘制实时波形、再把数据通过 WebSocket 广播给局域网里的浏览器页面。架构听起来不复杂但每个环节里都有不少细节。我下面按链路顺序把选型逻辑、接线方式、协议设计、渲染实现和排错经验一条条拆开说。2. 选型推演为什么是 BW16 加 ESP32-CYD有人可能会问BW16 能干的活ESP32 单板不也能干吗为什么还要引入两个板子这其实是这条链路最关键的设计决策。2.1 采集端选 BW16 的理由BW16 用的是瑞昱 RTL8720DN双核 Cortex-M33支持 2.4GHz 和 5GHz WiFi 加 BLE 5.0。我选它做采集端有几个具体原因体积和功耗适合贴身设备脑电采集端最终是要固定在头带或者帽子上的BW16 模块很小工作电流比 ESP32 第一代明显低用一块小锂电池就能跑挺久。串口资源够用脑电模块占一个 UART调试日志可以走另一个 UART不用来回切换。双频 WiFi 的抗干扰优势在 2.4GHz 频段堆满蓝牙、鼠标、路由器的环境里5GHz 频段往往更干净。虽然 CYD 只支持 2.4GHz但 BW16 至少给了选择空间。当然我得说句实话ESP32 也能干这个活而且资料更多。这次用 BW16 是因为我本身想验证「轻薄采集节点 带屏网关」这种拆分架构顺便看看 RTL8720DN 在 Arduino 生态下的实际表现。2.2 接收端选 ESP32-CYD 的理由ESP32-CYD 就是国内玩家常说的「黄色廉价屏幕板」典型型号 ESP32-2432S028R。它本质上是一块 ESP32-WROOM-32 主板板上集成了一块 2.8 寸 TFT 触摸屏ILI9341 驱动还有 MicroSD 卡槽、触摸芯片、RGB LED 和几个按键。我选它做接收端的原因更直接屏幕是现成的不用额外接显示器插上电就能画波形这对原型演示来说太重要了。ESP32 的 WiFi 加 WebSocket 生态成熟既能当 UDP 接收端又能开一个网页服务器一板两用。价格便宜坏了不心疼适合反复折腾。2.3 无线拓扑的选择这版原型用的是最朴素的拓扑BW16 和 CYD 都连到同一个路由器走 STA 模式。BW16 通过 UDP 把数据单播给 CYD 的 IP 地址。为什么不直接用 BW16 的 AP 模式让 CYD 去连它原因很现实AP 模式下一旦断开重连IP 分配和网页访问都会变得麻烦而且局域网里的手机、电脑就没法同时访问 CYD 的页面了。路由器中转虽然多绕一跳但换来的是所有设备在同一网段内自由通信调试成本最低。提示如果你是在户外演示没有路由器可用可以让 BW16 开 APCYD 连上来CYD 再开一个网页服务。拓扑上多一层但原理完全一样。3. 脑电模块到 BW16串口接线与帧解析硬件链路的第一步是把脑电模块的串口接进 BW16。不要小看这一步电平、共地、波特率、帧格式任何一个不对后面全是乱的。3.1 接线与电平核对手里这块脑电模块输出的是 3.3V TTL 串口这和 BW16 的 GPIO 电平是兼容的。接线遵循最基础的规则模块 TX 接 BW16 RX模块 RX 接 BW16 TX如果模块支持反向配置地线一定要共地不然波形会漂得没法看供电优先用干电池或锂电池不要直接用 USB 供电原因后面排错部分细说BW16 在 Arduino 环境里默认的 Serial 是板载 USB 调试口接传感器要另外指定硬件串口。不同板卡包对引脚命名有差异我实际用的是 Serial1具体 RX/TX 引脚按你自己板子的丝印确认。3.2 理解脑电模块的二进制帧这类脑电模块的串口帧长得很像「自定义协议」的教科书案例。开销是两个字节的同步头0xAA 0xAA紧接着是载荷长度、信号质量、原始波形两字节、注意力、冥想值、校验和。每次解析就是不断从字节流里找同步头校验通过后把各字段拆出来。如果只把串口数据当普通文本打印到监视器上你会看到满屏乱码。正确的做法是逐字节状态机解析。下面是我实际用的解析伪代码用 Arduino 风格写// 状态机核心逻辑假设数据已存入 rxBuffer[i] for (size_t i 0; i rxLen; i) { uint8_t byte rxBuffer[i]; switch (parseState) { case STATE_SYNC_1: if (byte 0xAA) parseState STATE_SYNC_2; break; case STATE_SYNC_2: if (byte 0xAA) parseState STATE_LENGTH; else parseState STATE_SYNC_1; break; case STATE_LENGTH: payloadLen byte; if (payloadLen 64) { parseState STATE_SYNC_1; // 异常长度直接丢弃重找 } else { payloadIndex 0; parseState STATE_PAYLOAD; } break; case STATE_PAYLOAD: payload[payloadIndex] byte; if (payloadIndex payloadLen) { parseState STATE_CHECKSUM; } break; case STATE_CHECKSUM: uint8_t sum 0; for (int j 0; j payloadLen; j) sum payload[j]; if (sum byte) { // 完整帧已拿到从 payload 里解析原始波形、信号质量、专注度等 parseEEGFrame(payload, payloadLen); } parseState STATE_SYNC_1; break; } }校验和是脑电模块协议里最关键的一环。我一开始偷懒没做校验结果无线传输时偶尔一两个字节错位波形直接崩成毛刺。后来老老实实把校验加上数据质量立刻上了一个台阶。3.3 波特率与数据密度模块默认波特率常见是 57600 或 115200必须和 Serial1.begin() 的参数完全一致。512Hz 的采样率意味着每秒钟模块会吐出来 512 个原始数据点——如果每个点都单独组一包网络报文每秒钟 512 个包WiFi 会被打得很碎。所以我在采集端做了一个简单的攒包操作每 20ms 攒一批采样点约 10 个点合成一个 UDP 报文这样每秒只有 50 个包无线压力小得多。抽包这个概念特别重要。脑电数据是连续流但实时刷新率根本不需要 512Hz 这么细20ms 一个包在上屏时依旧顺滑。攒包操作同时天然形成一定缓冲抗抖动能力也更强。4. 无线传输设计为什么选了 UDP帧结构怎么定链路中间段是整个原型系统的核心。这里要决策的是「用什么传输协议」和「网络包长什么样」。4.1 UDP 而不是 TCP纯从「数据不丢」的角度TCP 似乎更稳妥。但实时波形场景恰好相反TCP 丢包后疯狂重传会把旧数据堆在缓冲区里新数据被挤在后面反而造成明显的延迟和卡顿。UDP 的哲学是「丢了就丢了下一包继续」这种牺牲局部、保住实时的思路非常适合连续采样的传感器流。另一个体会是 UDP 有天然的报文边界一包对应一包不会像 TCP 那样出现粘包、半包省了很多拆流逻辑。4.2 自定义网络帧的格式脑电模块原始帧是模块自定义的为了避免把无线协议和模块协议绑死我在外层重新包了一层统一网络帧字节序字段长度说明0帧头1固定 0xEE用来快速定位报文起点1版本号1当前填 0x01方便以后协议迭代2-3序号2每包递增接收端用来检测丢包4-7时间戳4采集端毫秒计数方便算延迟8数据长度1载荷字节数9-10载荷N脑电模块原始帧或攒包后的多帧拼接末尾CRC162对前面所以字节做 CRC16 校验序号和时间戳是调试时的救命字段。看序号能知道 WiFi 丢了几个包看时间戳能算整条链路延迟多少。我把这两行字段写进协议后排错效率明显提高。代码层面BW16 发送端的核心逻辑很短#include WiFi.h #include WiFiUdp.h WiFiUDP udp; IPAddress targetIP(192, 168, 1, 100); uint16_t targetPort 8888; void sendPacket(uint8_t* payload, uint8_t payloadLen) { uint8_t pkt[256]; pkt[0] 0xEE; pkt[1] 0x01; uint16_t seq nextSeq; pkt[2] seq 8; pkt[3] seq 0xFF; // 时间戳、长度填入然后拷贝 payload pkt[8] payloadLen; memcpy(pkt 9, payload, payloadLen); // 计算 CRC16 填入末尾 udp.beginPacket(targetIP, targetPort); udp.write(pkt, 9 payloadLen 2); udp.endPacket(); }注意 BW16 在 Arduino 环境里的 WiFi 库 API 和 ESP32 基本一致这段代码在两端平台都能编译。有一点要提醒WiFi 断线后不会自动恢复主循环里要加一个WiFi.status()检查断线就重连并重新udp.begin()。4.3 单播、广播还是组播这版我用了单播只发给 CYD 一个 IP。如果有多台设备要同时收原始 UDP 流可以考虑广播地址255.255.255.255或者组播组地址。但广播会被有些路由器的 AP 隔离挡住组播也不是所有平台都支持反而让问题复杂化。最终我让 CYD 做网关把所有数据统一转成 WebSocket 分发给网页端UDP 层只保持点对点。5. ESP32-CYD 屏幕渲染从原始波形到指标卡片CYD 是整个系统里最直观的一块。它的屏幕上要同时展示实时波形和几个关键指标而且必须做到不卡顿、不闪烁。5.1 TFT_eSPI 的环境配置驱动 ILI9341 我用的库是 TFT_eSPI。这个库需要手动修改User_Setup.h把 CYD 的引脚定义填进去。不同批次的板子引脚会有差异我这里给一份常见配置实际以你手上板子的丝印为准#define USER_SETUP_ID 1 #define ILI9341_DRIVER #define TFT_MISO 12 #define TFT_MOSI 13 #define TFT_SCLK 14 #define TFT_CS 15 #define TFT_DC 2 #define TFT_RST -1 #define LOAD_GLCD 1 #define SPI_FREQUENCY 40000000配置完之后找一个官方示例跑一下能显示渐变彩色条就说明基本环境通了。如果颜色不对多半是 RGB 顺序问题在 TFT_eSPI 里调TFT_SWAP_RB宏。5.2 波形绘制的关键逻辑屏幕是 320x240 分辨率但脑电数据是 512Hz 连续流。直接每点画一个像素完全不可行屏幕刷新会卡到没法看。我的做法是环形缓冲区存最近 8 秒的数据8 秒 × 512Hz ≈ 4096 个点。降采样到屏幕宽度320 像素宽对应 4096 个点每个像素要 12.8 个点。我用的是「窗口最大值/最小值」法而不是简单平均。脑电波形最关心的是峰值形态平均会把尖峰抹掉min/max 能保留原始轮廓。定时刷新而不是每包刷新主循环里设置一个 20ms 的 tick到时间才重绘波形区。这样屏幕刷新率稳定在 50FPS实际视觉效果已经非常顺滑。波形绘制用drawLine连接相邻像素点不要用drawPixel一个个点。SPI 屏幕的写入瓶颈是像素吞吐量一次画一条线比画几十个独立点的指令开销小得多。直观比喻这就像用低帧率拍高速运动屏幕的每一列像素是一个采样窗口窗口里只要抓住最高和最低两个点波形的大致形态就不会失真。5.3 屏幕分区与指标卡片下屏区域我分成了三块上方约 170 像素高是波形区底部一行放信号质量、注意力值、专注度等级再下面一行放网络状态和序号丢包率。指标卡片用色块底加白色文字实现。中文显示需要额外加载字库TFT_eSPI 默认字库只有 ASCII我为了省事直接用英文缩写标注SIG、ATT、MEDIT。如果你一定要显示中文可以生成一个适合屏幕尺寸的取模字库但内存占用会明显增加建议先把功能跑通再做美化。6. 网页可视化把 CYD 变成 WebSocket 数据网关屏幕再大也只有 320 像素宽真正适合深度观察波形的一定是浏览器。所以我在 CYD 上额外跑了一个网页服务把实时数据推给局域网里的任何设备。6.1 为什么让 CYD 当网关而不是让 BW16 直接发网页BW16 的资源理论上也能跑一个轻量 Web 服务但有两个问题一是采集端承担太多任务会增加丢帧风险二是网页端需要 WebSocket 并发支持用 ESP32 的生态做更顺。职责划分明确之后BW16 只做「采集传输」CYD 做「收数据出界面」后续任何一端想替换都很容易。6.2 WebSocket 转发逻辑CYD 用 ESP32 原生的 WebServer 提供页面再用 WebSocketsServer 库维护浏览器连接。收到 UDP 包后解帧得到原始波形点攒一小批通过 JSON 格式广播给所有已连接的客户端。void websocketBroadcast() { // 组一个轻量 JSON包含序号、信号质量、波形数组 String json {\seq\: String(lastSeq) ,\quality\: String(quality) ,\wave\:[; for (int i 0; i WAVE_CHUNK; i) { json String(filteredWave[i]); if (i WAVE_CHUNK - 1) json ,; } json ]}; webSocket.broadcastTXT(json); }带宽算一下每包约 20 个波形点每秒 50 包每点用 2~4 字节表示总带宽不过几 KB/s完全在 CYD 的能力范围内。6.3 浏览器端画布网页端我用 Canvas 2D 绘图。核心逻辑是维护一个数组收到 WebSocket 消息后把波形点push进去超过显示窗口就把最老的shift掉然后整体重绘。为了护眼页面底色用深色波形用亮青色网格线用低亮度灰线。const canvas document.getElementById(wave); const ctx canvas.getContext(2d); let data []; ws.onmessage (e) { const msg JSON.parse(e.data); data.push(...msg.wave); if (data.length 2048) data.splice(0, data.length - 2048); draw(); }; function draw() { ctx.fillStyle #101820; ctx.fillRect(0, 0, canvas.width, canvas.height); // 根据 data 数组映射到画布逐段 drawLine }页面还有个隐藏功能点击「记录数据」按钮可以起一个定时器把最近 5 分钟的数据下载为 CSV。这个 CSV 之后拿到电脑上做功率谱分析或者源定位、最小范数估计都没有问题等于把实时链路和离线分析链路接上了。7. 实测数据、稳定性问题与排错清单链路跑通只是第一步稳定性和排错才是真正花时间的地方。我把实测效果和踩过的坑一起整理在这里。7.1 实测指标参考用时间戳字段粗略测了一轮脑电模块串口取数到 BW16 组包约 3~5msWiFi 单播从 BW16 到 CYD 在同一路由器下约 2~5msCYD 屏幕 20ms 刷新一次网页端 WebSocket 推送到浏览器绘制约 20~50ms。整体从电极到网页画面体感延迟大约 50~80ms对观察脑电波形来说完全够用。如果想更低延迟可以把刷屏间隔从 20ms 改成 10ms但屏幕闪烁感会强一些。7.2 排错清单下表是我实际遇到的五类问题以及对应的排查路径现象根本原因解决方案波形乱码、数值周期性跳变波特率不一致或校验没做核对 Serial1.begin() 参数补上帧校验逻辑无线偶尔断流序号跳变WiFi 信道拥塞路由器 5GHz 优先BW16 支持或固定 2.4GHz 信道屏幕显示颜色异常ILI9341 RGB 顺序不对在 TFT_eSPI 配置里开启/关闭 TFT_SWAP_RB波形有明显 50Hz 工频干扰USB 供电引入噪声换成干电池/LiPo 供电电极线远离电源线网页客户端连不上 WebSocketCYD 掉线或端口被占用固定 CYD 局域网 IP重启后自动重连 UDP7.3 两个容易忽视的坑第一个坑是 CYD 复位后 UDP 绑定会失效。WiFi 重连成功后必须重新执行udp.begin()否则收不到任何包症状就是屏幕左上角网络状态一直显示「未连接」。我最初把udp.begin()放在初始化里结果一断电重启就掉链子。第二个坑是 TFT_eSPI 刷新整屏占用的 SPI 时间太长会导致 UDP 接收缓冲溢出。后来我把波形区域改成只重绘变化的矩形区域脏矩形刷新再配合更快的 SPI 频率才算彻底稳定下来。最后说一点体会搭建这种原型链路的乐趣不在于代码多巧妙而在于把「传感器到人眼」的每个环节都亲手打通之后你对数据的理解会完全不同。后续如果你想做多通道 EEG把 BW16 换成带更多 ADC 的采集板即可传输和显示这层架构可以原样复用。这套链路现在还在我桌上跑着信号稳定网页打开就有波形已经是我做脑电实验的基础设施了。