INTERACTION2024
BoOC
概述
BoOC（Book of Occupancy，占座之书）是在 UCL CASA 完成的小组硬件项目，通过 UCL Workspace API 将三座校园图书馆 09:00–17:00 的实时占用数据转化为一套物理 + 数字的可视化体验。外壳是手工做旧的复古书本，内置磁吸指针表盘、4.2 英寸 E-ink 屏与三枚弹簧按钮；配套的 Unity AR 仪表盘由羽毛形激光切割书签触发，通过 MQTT 与实体设备实时同步状态，构成「同一套交互、两块表面」的数字孪生。
角色
IoT 工程师 · 外壳制作 · 交互设计师
年份
2024
领域
IOTARUNITYESP32MQTTE-INKHARDWAREDATA VIZINTERACTION DESIGNUCL
01项目概览
一本读取 UCL 图书馆占用率的「魔法书」
BoOC 是一台数据可视化设备，通过 UCL API 获取三座图书馆在 09:00–17:00 的实时占用数据，并以书本的形态展现出来。主体是一枚嵌在「泛黄纸页」上的磁吸指针表盘，用百分比实时显示所选图书馆的占用率；配套移动端则通过 AR 将书本「翻」成一块 3D 仪表盘，三枚物理按钮的输入同步作用于虚拟面板。
02设计概念
把 IoT 包装成一本「魔法书」
外壳灵感来自一座摆满旧书的古典图书馆。把书当作「讲故事的道具」，再把 IoT 硬件藏进去，形成一种接近「魔法」的反差——正好呼应 McEwen & Cassimally（2013）所说「技术本身几十年来都像某种魔法」的观点。团队围绕「独特、互动、有效、有吸引力」几个关键词头脑风暴，最终选择「古老而神秘」的风格，以《哈利·波特》等视觉参考作为基调，让隐藏其中的 IoT 技术显得好玩而非冰冷。
03外壳设计
尺寸、结构、材质、细节
设计围绕尺寸、结构、材质、细节四个方向展开。先在 Rhino 中把所有硬件摆进 3D 模型里确认内部空间，最终定下 260 × 180 × 44 mm —— 既能放下舵机、电池、E-ink 等所有元件，又保持可手持的尺寸。结构部分重点研究合页与开合过程对内部元件的影响；材质选择 3 mm 木纹复合板，并手工加入裂纹与不规则缺口，强化「旧书」的质感。
04制作过程
激光切割 → 做旧 → 组装
为了得到真实的木质感，外壳采用激光切割而非 3D 打印：先从 3D 模型展开出平面刀路，再用切穿与雕刻两种模式混用，在板材上做出「裂痕」效果。由于可用板材只有一种发亮的新木色复合板，团队手工调配丙烯颜料，把每块板重新染成「旧木」色；再打磨尖锐边缘、用金色手绘 CASA logo，最后组装为完整的书壳。
05硬件架构
ESP32、300° 舵机与一页 E-ink
书内的硬件组合是：ESP32 DEVKIT V1、一枚 300° 舵机、Waveshare 4.2 英寸 E-ink 屏、一块移动电源、三颗弹簧开关以及三个 1 kΩ 上拉电阻。ESP32 直接由电池供电，并为其他元件分配电流：Pin 13 控制舵机，Pin 25/26/27 读取三颗按钮。指示结构没有沿用传统指针，而是让一颗金属小球在圆形滑轨上滚动——舵机末端的磁铁带动小球移动。设计时要同时平衡三件事：舵机转角范围、磁铁与钢球的距离、以及表盘刻度的可读性。
06固件与数据
从 UCL API 到舵机角度
设备订阅了两个 UCL Workspace API：一个返回最近一分钟内各楼层的占用情况，另一个返回全天统计。代码中用六个字符串变量存放 URL，用一个三维容器存放「各图书馆 × 各楼层」的数据，另一个普通容器存放全天概览。开机后，ESP32 连接 WiFi，启动 HTTPClient，依次 GET 两个接口，解码 JSON 并按宏定义的结构存入数组；随后连接 MQTT broker，发送一条激活消息唤醒手机端仪表盘。占用率 0–100 % 在建模阶段就映射到了舵机的 0–270°，因此每次切换图书馆，钢球都会缓慢滚到对应百分比的位置。
07墨水屏界面
GxEPD2、XBM 与三枚按钮
墨水屏界面基于 GxEPD2 库实现。因为该库对使用的 ESP32 开发板支持不完整，我重写了底层的 I²C 驱动与像素级控制函数，才让屏幕正常刷新。Arduino 平台上无法直接绘制 JPG 图像，因此所有图片先在 GIMP 里按 E-ink 的着色规则转成二进制 XBM，再存入 images.h 中的多个 PROGMEM 数组。三颗按钮分别对应三座图书馆，代码中用计数器判断「本次按下是在同一图书馆内翻页，还是切换到另一座图书馆」；页面顺序为：首页 → 地图 + 总占用率 → 各楼层占用率，每次进入第二页都会触发舵机，把钢球转到最新百分比。
08AR 仪表盘
手机里那本书的 Unity 数字孪生
为了与实物保持一致，Unity 端的数字仪表盘沿用了复古的木色 / 米色调，整体尺寸 190 × 260 mm，由饼图、折线图、地图、日期 / 时间、图书馆名称以及 TextMeshPro 文本组成。它持续监听实体书发来的 MQTT 消息，所有数值都随物理按钮同步变化：饼图展示空座与占座的实时比例；折线图绘制整周按小时平均的占用趋势（只显示 09:00–17:00，保证可读性）；用户切换图书馆时，对应的地图会动态切换。
09AR 触发
用羽毛形书签触发开书动画
AR 需要一个物理触发物，因此团队在 Illustrator 里绘制了一枚羽毛形书签，激光切割后上色，风格与书本统一。书签注册进 Unity 的 ReferenceImageLibrary，并绑定 UCL 校门 FBX 动画（quad.fbx）——用手机扫它时，就会播放「开书」动画进入场景。场景内用 Leantouch + TapToPlace 处理手势：双击放置或移动，单击触发开书动画，双指旋转，三指缩放。另一个 AnimatorController（BoocAnimatorController）承载 booc_all3 动画，并挂在模型的 Animator 上，让开书过程显得自然而不机械。
10技术栈
主要元件与工具
硬件：ESP32 DEVKIT V1 · 300° 舵机 · Waveshare 4.2 英寸 E-ink 屏 · 3 颗带 1 kΩ 上拉电阻的弹簧开关 · 移动电源。软件：Arduino / C++，配合 GxEPD2（墨水屏驱动）、HTTPClient（轮询 UCL API）、PubSubClient（MQTT）；Unity 端使用 AR Foundation、Leantouch、TapToPlace 与 TextMeshPro 实现 AR 仪表盘。制作：外壳在 Rhino 中建模，在 3 mm 木纹复合板上激光切割，再手工做旧；书签用 Illustrator 绘制、激光切割；E-ink 图像用 GIMP 转成 XBM。