sim-dashboard 概览¶
sim-dashboard 是一个双组件应用，提供逼真的电子墨水屏模拟器和实时预览功能。它作为 sim-hw 模拟设备的可视化前端。
架构¶
sim-dashboard 由两个运行在不同端口上的组件组成：
Fastify 服务器（端口 3001）¶
一个轻量级 Node.js 服务器，功能包括：
- 接收帧缓冲 --- 通过 HTTP POST 接收来自 sim-hw 设备的 800x480 PNG 图像
- 存储帧缓冲 --- 在内存中维护每个设备的最新帧缓冲
- WebSocket 广播 --- 实时将帧缓冲更新推送给所有已连接的浏览器客户端
- 设备注册 --- 跟踪已推送过帧的设备
React 前端（端口 5173）¶
一个基于 Vite 的 React 应用，功能包括：
- 用户认证 --- 通过 Inklet 后端登录以查看你绑定的设备
- 设备列表 --- 显示当前认证用户绑定的所有设备
- 电子墨水屏渲染 --- 以逼真的电子墨水视觉效果展示设备帧缓冲
- 实时更新 --- 通过 WebSocket 接收帧缓冲更新，实现实时显示预览
- 公开设备视图 ---
/device/{hwid}无需登录即可查看单个设备的显示内容
电子墨水显示效果¶
React 前端应用了多种视觉效果来忠实模拟真实电子墨水屏的外观和行为：
| 效果 | 描述 |
|---|---|
| 全刷动画 | 模拟电子墨水面板全刷时的黑-白-黑闪烁效果 |
| 局部刷新动画 | 增量显示更新的平滑过渡效果 |
| 残影 | 前一张图像的微弱残留透过显示，模拟真实电子墨水的持久性 |
| 纸张纹理 | 带有纤维纹理的微妙灰白色背景，模拟真实电子墨水纸张 |
| 噪点 | 轻微的像素噪点，模拟物理显示器的模拟缺陷 |
| 深色/浅色主题 | 模拟器 UI 支持深色和浅色主题，但模拟显示屏本身始终使用电子墨水的标准配色 |
提示
电子墨水效果使模拟器可以验证内容在物理设备上的实际呈现效果 --- 包括在原生 800x480 分辨率下的可读性、对比度和布局。
系统示意图¶
sim-hw (Python) sim-dashboard
────────────── ──────────────
MQTT command received Fastify Server (:3001)
│ │
▼ │
Render 800×480 PNG ──── HTTP POST ────▶ │
│
Store framebuffer
│
WebSocket broadcast
│
▼
React Frontend (:5173)
│
Apply e-ink effects
│
Display in browser
功能一览¶
- 实时预览 --- 命令发送后即可看到电子墨水屏的显示内容
- 多设备支持 --- 在仪表盘中同时查看多个模拟设备
- 逼真渲染 --- 电子墨水效果帮助在部署到硬件前发现视觉问题
- 无需硬件 --- 无需物理设备即可完成完整的开发和测试流程
- 集成认证 --- 使用与生产门户相同的 Inklet 账户体系
- 公开设备 URL --- 分享设备显示的直接链接，用于演示或监控