U8g2 Preview
在 VS Code 中静态解析 C/C++ 源码并以 Webview <canvas> 渲染单色屏的 U8g2/GFX 风格绘制,无需 MCU/SDL。
功能
- 命令:
U8g2: Open Preview 打开右侧预览面板
- 自动刷新:监听当前活动文件变更/保存,120ms 去抖
- 支持绘制指令(按源码顺序渲染):
- U8g2:
setDrawColor、drawPixel、drawLine、drawBox、drawFrame、drawCircle、drawDisc、drawStr
- 文本流:
setCursor + print/println
- GFX 子集:
drawFastVLine、drawFastHLine、drawLine、drawRect、fillRect
- 表达式求值:
- 识别
#define、简单常量赋值、display.width()/height()、四则运算
- 内置
WIDTH/HEIGHT
- 设置项:
width、height、scale、invert、grid
- UI:状态栏一键打开;输出面板“U8g2 Preview”记录解析统计与日志
- 视图缩放:工具栏按钮(缩小/100%/放大/适配),支持 Ctrl+滚轮
使用
- 打开包含 C/C++ 代码的文件(例如
.c/.cpp/.h/.ino)。
- 运行命令
U8g2: Open Preview。
- 修改源码,右侧预览自动刷新(120ms 去抖)。
注释中指定分辨率
缩放与适配
- 设置
u8g2Preview.scale 可调整“像素基准倍率”(例如 1/2/3)。
- 右上工具栏支持视图缩放:
- 缩小(−)、还原(100%)、放大(+)
- 适配:根据可用视口自动缩放以完整显示画布
- 支持 Ctrl+滚轮平滑缩放(仅 Webview 内)。
兼容性与差异
- 文本绘制使用浏览器字体近似像素字体,布局与真实 U8g2 字体会有偏差;用于逻辑/排布预览足够。
- 表达式求值为轻量实现(四则运算 + 常量/宏);复杂宏/条件编译不支持。
- 源码中函数名支持
obj.drawXxx(...)、drawXxx(...)、以及 GFX 风格的 drawFastVLine/HLine 等。
设置
u8g2Preview.width:显示宽度(默认 128)
u8g2Preview.height:显示高度(默认 64)
u8g2Preview.scale:像素缩放倍数(默认 2)
u8g2Preview.invert:黑底白字(默认 false)
u8g2Preview.grid:显示像素网格(默认 false)
u8g2Preview.sourceGlob:可选的工作区文件监听模式(默认 **/*.{c,cpp,h,hpp,ino})
开发
npm install
npm run watch
# F5 启动扩展开发主机
字体缓存
- 命令:U8g2: Refresh Fonts Cache 清空字体缓存。
- 缓存目录位于扩展 globalStorage/fonts,超出 ont.cacheLimitMB 会自动清理最旧文件。
#� �P�r�e�V�i�e�w�U�8�g�2�
�
�
| |