这是一个纯静态网页上位机,可直接通过 GitHub Pages 使用,用于给 WeatherClock 制作并写入自定义首页 GIF 动图、图库静图资源,也可辅助进行固件烧录和串口日志查看。
访问:
https://wickenzh.github.io/ESP32-S3-RLCD-4.2_Web/
请使用 Edge 或 Chrome 浏览器打开页面,并通过 USB 连接 ESP32-S3 设备。
首页 GIF 会被转换成设备固件要求的 84×84、60 帧、1-bit 资源。
- 打开页面后进入
资源制作。 - 在
GIF 动图区域选择一个.gif文件。 - 根据需要调整
适配方式、阈值、抖动、反色。 - 查看
原始 GIF和转换预览,确认 1-bit 效果。 - 点击
转换 GIF。 - 如需同时写入静图,也继续完成静图转换;否则直接点击页面顶部的
生成资源包。 - 页面提示资源包生成完成后,切换到
资源写入。 - 点击
选择并核对设备,浏览器会请求选择串口设备,并读取设备分区表。 - 确认分区表中
assets分区核对通过后,点击串口写入资源。 - 写入完成后设备会自动复位,固件会优先加载写入的自定义 GIF。
图库静图会被转换成设备固件要求的 220×208、1-bit packed 资源,最多支持一次选择并转换前 24 张。
- 打开页面后进入
资源制作。 - 在
静图区域选择 JPG、PNG、WebP、BMP 等图片文件,可多选。 - 在
预览图片下拉框中选择当前要查看的图片。 - 根据需要调整
适配方式、阈值、边缘淡化、抖动、反色。 - 查看
原图裁剪和转换预览,确认边缘和黑白效果。 - 点击
转换静图,页面会转换最多前24张图片。 - 如需同时写入首页 GIF,也继续完成 GIF 转换;否则直接点击页面顶部的
生成资源包。 - 切换到
资源写入,点击选择并核对设备。 - 分区表核对通过后点击
串口写入资源。 - 写入完成并重启后,设备会优先加载自定义图库静图。
- GIF 和静图可以单独写入,也可以一起打包到同一个
custom_assets.bin。 - 上位机会读取设备分区表,并只写入真实的
assets分区。 - v1.5.x 及后续版本不再使用旧固定地址写入资源,避免覆盖 App、NVS 或 model 分区。
- 如果想恢复内置素材,可以在
资源写入中点击清空资源分区,或重新生成不包含对应资源的资源包再写入。 - 写入资源不会擦除 NVS,不会覆盖 Wi-Fi、天气城市等设备端已保存配置。
- 推送仓库到 GitHub。
- 打开仓库
Settings / Pages。 - Source 选择
Deploy from a branch。 - 如果使用上位机专用仓库,把
host_web/的内容放到该仓库根目录,Branch 选择main,Folder 选择/ (root)。 - 专用仓库发布后访问:
https://<username>.github.io/<host-repo>/
assets/ 中的预览图已经包含在上位机目录内,不依赖本项目仓库的其他路径。
当前 GitHub Pages 访问地址:
https://wickenzh.github.io/ESP32-S3-RLCD-4.2_Web/
- Web Serial 串口日志读取、命令发送、日志保存。
- 图片资源制作:静图支持 JPG、PNG、WebP、BMP 等浏览器可读图片,转换为
220×208、1-bit packed。 - GIF 资源制作:动图只支持 GIF,转换为
84×84、60 帧、整帧连续 1-bit bitstream。 - 设置:可在
custom_assets.bin中附带天气城市和 OTA 清单地址兜底配置;留空则不生成对应 entry,不写 NVS,也不覆盖设备端已有手动配置。 - 资源写入:先选择设备并读取分区表,确认
assets为data / subtype 0x40且资源包不超过分区大小后,才会使用设备分区表中的真实地址写入或清空资源分区。 - 固件烧录:merged bin 只写入
0x0;OTA App bin 只允许写入读取到的ota_0/ota_1,并会检查文件大小不超过目标 App 分区。首次迁移到 v1.5.x 分区表时必须使用 merged bin 完整写入。 - 浏览器烧录依赖使用仓库内固定版本的
esptool-js 0.5.6和esp-web-tools 10.0.1,不会在运行时加载第三方 CDN 脚本。 - 离线缓存,便于打开页面后再切换到设备 AP。
默认在线固件来源:
https://github.com/wickenzh/ESP32-S3-RLCD-4.2/releases
上位机读取 GitHub Release 最近版本列表。每个可用 Release 需要同时包含:
weather_clock_vX.Y.Z.bin:OTA App 固件,用于写入读取到的ota_0/ota_1。weather_clock_vX.Y.Z_merged.bin:完整 merged 固件,只写入0x0。
GitHub Pages 部署工作流会读取 GitHub Release,下载最近 10 个完整版本,在部署阶段核对文件大小和 Release asset 的 sha256 digest,再把固件放入 Pages 部署产物。大体积 bin 不会提交到 Git 历史。网页从同源 Pages 地址自动读取固件到浏览器内存,再次计算 SHA-256;大小和摘要完全一致后才会启用烧录,用户不需要把在线固件下载到本地或手动选择文件。自定义固件仍通过“自定义固件文件”来源手动选择。
部署由 .github/workflows/static.yml 执行:推送 main 时立即更新,此后每 6 小时同步一次 Release。scripts/build_pages_site.mjs 负责生成部署清单和经过校验的同源固件镜像。
custom_assets.bin 使用 WCA1 格式,除 GIF 和静图外,还可包含两个可选 UTF-8 文本 entry:
type=3:天气城市兜底,1 到 31 bytes,只填写城市名。type=4:OTA 清单地址兜底,1 到 255 bytes;输入服务器基础地址时会自动规范化为/firmware/latest.json。
这两项只作为兜底配置。若设备 NVS 中已有手动天气城市,固件优先使用 NVS;OTA 仍优先使用固件内置 R2 / GitHub 备用源。若要恢复不带兜底配置的状态,请重新生成不含对应字段的资源包,或清空 assets 分区。
firmware/manifest.example.json 是 ESP Web Tools 示例。ESP-IDF v4+ 固件推荐使用 esptool merge_bin 生成的单个 merged bin,并写入 0x0。
上位机不再使用旧版固定地址写入资源或 App。连接设备后会读取 0x8000 分区表:
custom_assets.bin只允许写入分区表中的assets。- OTA App 只允许写入分区表中的
ota_0或ota_1。 model分区由 merged bin 覆盖,单独更新 App 时不会擦除model。- 分区表读取失败或找不到目标分区时,禁止对应写入。
Web Serial 需要 HTTPS 和 Chromium 内核浏览器,例如 Chrome 或 Edge。