MIBO 仪表与音乐背景制作说明¶
最后更新：
本说明用于制作 MIBO 内置仪表页和音乐页的可替换背景。这里的“背景”是固定主题的底图， 不是 TF 媒体，也不是宠物包背景；三者的尺寸、方向和目录都不同。
1. 最终交付格式¶
| 项目 | 要求 |
|---|---|
| 目录 | /mibo/资源/背景/仪表 或 /mibo/资源/背景/音乐 |
| 推荐扩展名 | .jpg，也兼容 .jpeg |
| JPEG 类型 | baseline JPEG，不要 progressive |
| 尺寸 | 严格 820×320 |
| 色彩 | RGB；推荐高质量、4:4:4 采样 |
| 单文件上限 | 2 MiB |
| 方向 | 正常横屏逻辑方向，不要旋转成 320×820 |
| 刷新方式 | 重启 MIBO，或通过 Recovery 替换后重新启动 Main |
官方预设由全色 Canvas 直接编码为质量 99、4:4:4 的 baseline JPEG。不要先转成 RGB565 再 编码 JPEG，否则渐变和暗部会被二次量化，容易出现色阶、偏色和脏块。
2. 固定文件名¶
Main 不扫描任意背景名称，而是根据主题和日夜模式读取固定文件名。
2.1 仪表背景¶
放入 /mibo/资源/背景/仪表/：
soft_day.jpg
soft_night.jpg
neon_day.jpg
neon_night.jpg
widgets_day.jpg
widgets_night.jpg
type_day.jpg
type_night.jpg
pixel_day.jpg
pixel_night.jpg
2.2 音乐背景¶
放入 /mibo/资源/背景/音乐/：
文件名区分主题；_day 和 _night 分别用于白天和夜间。不要自创 stem，也不要在文件名中
增加版本号。需要保留旧版本时，把备份放到 TF 根目录 /资料库/主题/，不要和正式文件放在
同一背景目录。
3. 设计要求¶
3.1 画布¶
- 从一开始就使用
820×320画布。 - 不要按手机竖屏或
320×820设计。 - 如果源图比例不同，优先等比缩放并补边，不要拉伸角色、圆形或文字。
- 背景应铺满整个画布，不要保留透明通道。
3.2 可读性¶
页面会在背景上叠加速度、档位、歌词、进度、状态或数据卡片，因此：
- 主信息区域避免高对比细碎纹理。
- 不要在背景中预先画入速度、歌词、进度条或会与运行时 UI 重叠的文字。
- 日间图要保证深色文字和控件可辨；夜间图要避免大面积纯白高亮。
- 同一主题的 day/night 应保持构图一致，只调整光照、色温和环境细节。
- 不要把重要主体贴到四边；不同页面可能使用边缘状态栏或阴影。
3.3 风格建议¶
soft：柔和、低对比、适合长期驾驶。neon：深色底、局部霓虹，避免全屏高饱和。widgets：为多个数据卡片保留干净分区。type：为大号主数据预留视觉中心。pixel：保持整齐像素网格，避免 JPEG 前的多次缩放。ripple：适合音乐色彩波纹，但不要模拟实时进度。led：深色舞台或点阵氛围，运行时歌词字体由 MIBO 叠加。vignette：中心或文字区清晰，边缘可适度压暗。
4. 使用 Codex 制作背景¶
Codex 可以帮助分析现有页面、生成视觉方案、调整图片和校验成品。建议分阶段完成，不要一次性 要求 AI 生成全部 16 张图。
4.1 准备输入¶
向 Codex 提供：
- 要替换的主题名称，例如
neon或ripple。 - 期望风格、主色、车辆内饰或品牌参考。
- 是否需要 day/night 成对制作。
- 有合法使用权的参考图片。
- 当前 MIBO 工程目录，便于 AI 读取真实主题和预览器。
示例提示词：
请在当前 MIBO 工程中为仪表 neon 主题制作一对白天/夜间背景。
先读取 tf-card/mibo/资源/背景/README.md 和页面预览器，确认叠加 UI 的位置。
画布必须是 820×320，最终输出 baseline JPEG、4:4:4、每张小于 2 MiB，文件名分别为
neon_day.jpg 和 neon_night.jpg。保持两张构图一致，不要在底图中加入速度、歌词、Logo
或可读文字。先给我看预览，确认后再覆盖正式文件；覆盖前保留原文件。
如果 Codex 具备图片生成或编辑能力，应让它直接生成/编辑光栅图片，并在写入正式目录前展示 预览。让 AI 明确区分“视觉预览通过”和“实体 MIBO 屏幕通过”。
4.2 推荐检查点¶
- 先看单张构图和 UI 叠加效果。
- 再看 day/night 并排对比，确认身份和构图没有漂移。
- 以原始分辨率检查文字区域、渐变、暗部和边缘。
- 最后才编码 JPEG 并替换固定文件名。
5. 从普通图片导出¶
如果源图不是精确 820×320，可以使用 Pillow 等比缩放并补边。以下示例不会裁剪：
from pathlib import Path
from PIL import Image
source = Path("source.png")
output = Path("neon_day.jpg")
image = Image.open(source).convert("RGB")
image.thumbnail((820, 320), Image.Resampling.LANCZOS)
canvas = Image.new("RGB", (820, 320), (0, 0, 0))
canvas.paste(image, ((820 - image.width) // 2, (320 - image.height) // 2))
canvas.save(
output,
format="JPEG",
quality=99,
subsampling=0,
progressive=False,
optimize=False,
)
补边颜色应根据主题调整。若源图允许裁切，可由设计者明确指定裁切区域，但不要让脚本自动裁掉 重要内容。
6. 校验成品¶
6.1 文件级检查¶
在电脑上确认：
输出应包含类似：
也可以用 Pillow 检查：
python3 - <<'PY'
from PIL import Image
from pathlib import Path
for path in Path("tf-card/mibo/资源/背景").rglob("*.jpg"):
with Image.open(path) as image:
assert image.format == "JPEG", path
assert image.size == (820, 320), (path, image.size)
assert path.stat().st_size <= 2 * 1024 * 1024, path
print(path, image.size, path.stat().st_size)
PY
工程契约回归：
这个测试证明背景加载规则没有被破坏；它不能代替逐张视觉检查。
6.2 页面预览¶
如果在 MIBO 工程中制作资源，可以启动电脑预览器：
浏览器预览适合检查构图和颜色，但浏览器与 LVGL 的字体、抗锯齿、色彩和实体屏幕扫描仍有差异。
6.3 实体设备检查¶
至少检查：
- 白天和夜间都能载入正确文件。
- 切换主题时不会继承上一主题的图片。
- 速度、档位、数据卡片、歌名和歌词都清晰。
- 暗部没有严重色阶，亮部没有刺眼大块纯白。
- 页面连续切换没有永久黑屏、花屏或错图。
7. 部署¶
方法一：关机后直接读卡复制到固定路径，复制完成后安全推出。
方法二：进入 Recovery，通过 EVCC 或网页上传到固定路径。Recovery 会先校验摘要，再原子替换。
工作区用户可先预览差异：
真实 push 是 /mibo 精确镜像，可能删除实体卡中工作区没有的其他普通文件；必须先确认差异。
8. 旧 RGB565 格式¶
同名背景会依次尝试：
.jpg.jpeg.rgb565
.rgb565 是旧卡兼容格式：无文件头、逐行原始 RGB565、严格 524800 字节。新卡只需保留
JPEG。不要同时维护多份同名格式，因为较高优先级文件会遮蔽后面的文件，也容易造成“替换了却
没有变化”的误判。
9. 常见错误¶
| 错误 | 结果 | 修正 |
|---|---|---|
输出为 320×820 |
解码尺寸不符 | 背景保持正常横屏 820×320 |
| progressive JPEG | 可能被拒绝或无法显示 | 重新保存为 baseline |
| 文件名增加版本后缀 | 固件找不到 | 使用固定 stem，把备份放 /资料库 |
| 先转 RGB565 再转 JPEG | 渐变色阶和偏色 | 从全色源图直接编码 JPEG |
| day/night 构图完全不同 | 切换时视觉跳变 | 保持主体和构图一致，只改环境光 |
| 把背景放入 TF 媒体目录 | 被当成媒体而不是主题背景 | 使用 /资源/背景/{仪表,音乐} |
| 只看浏览器预览 | 无法证明实体屏幕表现 | 最后做真机日夜和页面切换验收 |