• 嵌入式
• 物联网
• 智能硬件
• 硬件开发
• 嵌入式GUI

Clawd Mochi 是一款基于 ESP32-C3 的像素桌面伙伴：它内置 WiFi 热点 AP 模式，手机连上ClaWD-Mochi热点后，打开浏览器访问 192.168.4.1 就能进入它自带的 Web 控制台，用网页按钮、滑杆、甚至手写笔和手机键盘，直接控制那块 1.54 英寸小屏幕上的一切——不需要 App，不联网、不上云。这篇文章带你完整拆解这条控制链路是怎么跑起来的。

先认识一下：一个 7 美元的 WiFi 桌面玩具

Clawd Mochi 的核心硬件只有两块：一块 ESP32-C3 Super Mini 开发板，加一块 ST7789 驱动的 1.54 英寸 240×240 彩色屏。所有功能——眼型动画、伪终端、画板、热点、Web 服务——全部写在一个文件里：clawd_mochi.ino。

第一步：ESP32-C3 开启 WiFi 热点（AP 模式）

整个链路的起点在 setup() 的末尾。固件启动时先初始化屏幕、播放开机 Logo 动画，然后执行两行关键代码（见 clawd_mochi.ino#L1047-L1049）：

• WiFi.mode(WIFI_AP)—— 把 WiFi 切到 AP（Access Point）模式，也就是"自己当路由器发热点"
• WiFi.softAP(AP_SSID, AP_PASS)—— 广播名为ClaWD-Mochi的热点，密码clawd1234（常量定义在 clawd_mochi.ino#L35-L36）

💡为什么是 192.168.4.1？这是 ESP32 官方 SDK 在 softAP 模式下的固定行为：AP 自己固定拿192.168.4.1，并给连入的手机分配192.168.4.x的地址。所以手机连上热点后，浏览器输入http://192.168.4.1一定能找到它，不依赖你家的路由器或外网。

贴心的是，屏幕此时会直接显示一张"WiFi 信息卡"（clawd_mochi.ino#L1051-L1063）：SSID、密码、要访问的地址全印在屏上。就算你忘了热点名，看一眼设备就知道怎么连——这对新手非常友好。

第二步：80 端口上的内置 Web 服务器

固件用 Arduino 的WebServer库在 80 端口起了一座"微型 Web 服务器"：WebServer server(80);（clawd_mochi.ino#L37）。

有意思的是，整个控制台页面并不是存在文件里的，而是一段直接编译进 Flash 的 HTML 字符串INDEX_HTML（clawd_mochi.ino#L456），包含全部 CSS 和 JavaScript。访问/时，服务器把它原样吐给浏览器，并加上no-cache响应头保证每次都是最新版页面。

页面加载完成后，路由注册在 clawd_mochi.ino#L1065-L1077。全部接口一览：

而loop()里只有一行server.handleClient();（clawd_mochi.ino#L1087）——死循环轮询、处理每一个进来的 HTTP 请求。这就是整个控制台的后端。

一次点击的完整链路：从按钮到屏幕

以"点击 Normal eyes 按钮"为例，数据是这样流动的：

1. 手机已连上ClaWD-Mochi热点，浏览器打开http://192.168.4.1拿到控制台页面
2. 点击按钮，网页 JS 发出GET /cmd?k=w
3. routeCmd()收到请求，置currentView并调用animNormalEyes()播放"晃动 + 眨眼"动画
4. 动画函数通过硬件 SPI（SCK=GPIO 8、MOSI=GPIO 10）把像素帧一帧帧刷进 ST7789 屏幕
5. 动画期间固件有一个busy标志；网页每 150ms 轮询一次/state（clawd_mochi.ino#L1009-L1017），等busy变 false 后解锁按钮，防止中途乱点

还有个细节：开机 Logo 描线动画跑到每 4 笔时，会主动插入一次server.handleClient()（clawd_mochi.ino#L446）。因为 Arduino 是单线程的，不这么做的话动画期间 Web 服务就会"假死"，页面点什么都没反应。

终端与画板：把手机键盘和手势变成 HTTP 请求

这是整个控制台最"炫"的部分，原理却很简单——一切交互都被拆成了普通的 HTTP GET 请求。

伪终端：切到 Claude Code 视图后，网页弹出一个输入框。你在手机键盘上每敲一个字符，JS 就发一次/char?c=你的字符；routeChar()把它交给termAddChar()，固件在 15 列 × 8 行的字符栅格里画字、移动光标、满了自动滚屏。也就是说，你的手机键盘就是这块 1.54 英寸屏的"键盘"。

画板：在网页的 240×240 canvas 上用手指或鼠标画线时，手机本地先画预览；手指抬起的瞬间，整笔的坐标序列被打包成/draw/stroke?pen=颜色&pts=x,y;x,y;…一次性发过去，固件逐段drawLine()复现在屏幕上。"clear / done" 按钮则对应/draw/clear和/canvas?on=0。

动手改一改：SSID、密码与速度

所有可玩的旋钮都集中在文件头部，改起来毫不费力：

• 热点名和密码：AP_SSID/AP_PASS（clawd_mochi.ino#L35-L36），改完重新烧录即可
• 动画速度：网页滑杆发送/speed?v=1~3，固件用speedMs()统一缩放所有delay()（clawd_mochi.ino#L193-L197）
• 背景色与笔色：网页选色器实时经/redraw?bg=生效，十六进制颜色由hexToRgb565()转成屏幕的 RGB565 格式（clawd_mochi.ino#L199-L204）
• 眼睛大小位置：EYE_W、EYE_H、EYE_GAP等常量（clawd_mochi.ino#L44-L48）

接线与烧录教程（含 GPIO 对照表）在 README.md 的 Wiring 和 Software setup 两节，按提示操作，新手约 1 小时即可完成。

延伸阅读：3D 打印外壳与模型

电子部分之外的"颜值担当"——3D 打印外壳模型放在仓库的 models/ 目录里：主外壳文件是 clawd_mochi_v1.stl，另有纯装饰的 3D Clawd 造型（含挤压眼变体）：clawd_3D_no_AMS.stl、clawd_3D_squished_eyes_no_AMS.stl，打印参数（层厚 0.15–0.20mm、15% 填充、需要支撑）见 README.md 的 3D case 一节。

小结：Clawd Mochi 的 Web 控制台本质上是"AP 热点 + 80 端口 WebServer + 一组极简 GET 接口 + 轮询状态机"四件套。理解了这条从ClaWD-Mochi到 192.168.4.1 的链路，你也能给任何 ESP32 小玩具加上自己的手机遥控器。

• 嵌入式
• 物联网
• 智能硬件
• 硬件开发
• 嵌入式GUI