为开发单色屏，我给 AI 造了浏览器仿真环境

CO₂ 趋势界面

单色屏开发卡在 AI 看不见屏幕

OLED、单色点阵屏（12864 那类灰白屏）、墨水屏这类单色屏资源有限，跑不动 LVGL 一类重型 GUI。单色屏图形库的事实标准是 U8G2：支持几十种屏幕控制器、字体库庞大、内存占用极小。

但 U8G2 开发很慢：改一次显示效果，要重新编译、烧录、上板看，一轮几十秒到几分钟。AI 写的 U8G2 代码经常能编译过、屏幕不对，字体、坐标、布局来回调都对不上。AI 看不见屏幕，写完只能等人烧录反馈，迭代闭环断在它看不见的地方。

为了让 AI 能独立把单色屏界面做对，我把它需要的环境直接搬进浏览器：一份像素级还原 U8G2 的纯 JS 仿真，AI 在这里生成代码、实时预览、截图自检，确认效果对了，再把同一份代码挪到嵌入式真机。

浏览器里的像素级仿真闭环

把 U8G2 完整移植成纯 JS 后，AI 在浏览器里就能跑通整个闭环：

开发 U8G2 显示界面（JavaScript，浏览器原样运行）
视觉验证：AI 自己运行、截图、识图，把 UI 闭环
自动化测试：AI 在浏览器上跑测试，提前排除错误隐患
用户确认：效果符合预期即通过
部署：同一份代码上真机（与原生 U8G2 C 库 API 一致）

显示逻辑在浏览器里提前验证，问题不用等到上板才发现。

U8G2JS 项目： github.com/createskyblue/u8g2-js

Demo 仓库： createskyblue.github.io/u8g2-js/

用仿真环境做出的墨水屏传感器趋势界面

仿真环境最大的价值，是能低成本反复试错。下面这套单色墨水屏传感器趋势界面，就是 AI 在浏览器里迭代出来的：

CO₂ 曲线趋势：渐变填充分两步，先在独立灰度通道按曲线生成深浅渐变，再用误差扩散把灰度量化成黑白点阵叠加到屏幕，整体墨量近似守恒，观感平滑，全程整数运算，符合嵌入式无浮点约束
PM2.5 三粒径趋势：多曲线同屏，靠抖动区分层次
温湿度双曲线：双轴对照，信息密度压进单色屏

CO₂ 趋势界面

PM2.5 三粒径趋势界面

温湿度双曲线界面

仿真器逐字节一致的实现

浏览器里的效果必须和真机一模一样，否则仿真毫无意义。这部分是仿真器的核心。

逐行移植 C 渲染引擎

移植没有走 WASM 或自动转译，直接对照 C 源码逐行手写 JS：同一套算法、同一种控制流，连字体格式和帧缓冲的字节布局都保持一致。浏览器端能直接读源码、改算法，AI 也容易理解和修改。

与原版 C 库逐字节对拍

手工移植最怕大概一致。做法是把原版 U8G2 C 库用 gcc 编译出来，跑 18 个场景（文本、图形、旋转、裁剪、XOR、按钮、Unicode、全量中文），每一帧都与 JS 输出逐字节比对，0 字节差异。验证脚本可复现，改完核心代码重跑一遍即可确认没有偏差。

像素级还原细节

帧缓冲、字体 RLE 位流、draw_color 0/1/2、旋转，输出与真机逐字节一致
字体运行时加载：字体就是字节数组，运行时代码里直接 load / fromBase64 载入任意 U8G2 字体
内置全量中文字库：宋体 12/16/24px，约 2.8 万字形，AI 写的中文直接渲染
零依赖开箱即用：纯 ESM，浏览器 file:// 双击 demo 即可运行，Node 可无头测试
API 与真机一致：Arduino U8g2lib 风格 camelCase 加 C 风格别名，仿真代码可直接平移到硬件

快速开始

import { U8g2, U8g2Font } from './src/index.js';
const u8g2 = new U8g2({ display: 'ssd1306_128x64_noname_f' });
u8g2.setFont(U8g2Font.fromBase64('AP//AA...'));
u8g2.drawStr(0, 10, 'Hello');
u8g2.sendBuffer();
u8g2.attachCanvas(document.getElementById('screen'));

本地运行

python -m http.server 8765 --bind 127.0.0.1

然后访问 http://127.0.0.1:8765/。