- Restore watchface-kit design (500x500, scaled per device) - 7 themes auto-generated from tokens via gen_themes.py -> Themes.mc - Four-segment gradient progress ring (22+21 ticks, 4 anchor dots) - Center time, date band w/ Bluetooth icon, top battery + dual complications, bottom distance/steps - 17 devices compiled clean (SDK 9.1.0) - Includes browser/JS preview (preview.html) + 7-theme SVG sheet
9.5 KiB
Fenix 8 V3 — Garmin 数据表盘
一款基于 Connect IQ 设计稿(watchface-kit)1:1 还原的多指标数据表盘。设计画布为 500×500 正方形,渲染时按屏幕宽度等比缩放,支持圆形 AMOLED(Fenix 8 / Enduro 3 / Epix 2)与圆屏 MIP(Fenix 7 / FR965 等)设备。
- SDK:Connect IQ SDK 9.1.0(
monkeyc9.1.0,API levelminSdkVersion="4.2.0") - 语言:Monkey C
- 类型:
watchface - 应用 ID:
f8a3c1b2c3d44e5f8a9b0c1d2e3f4a5b
1. 布局还原(与设计稿基准)
所有坐标以 500×500 设计画布为基准,渲染时统一乘以缩放系数 s = screenWidth / 500.0(Enduro 3 屏宽 416px → s≈0.832)。下表中 y 为设计稿原始像素值。
| 区域 | 设计坐标(500 基准) | 内容 | 说明 |
|---|---|---|---|
| 进度环 | 外半径 rOut=249.5,内半径 rIn=231.5 |
四段进度弧 + 4 个锚点圆点 | 见 §2 |
| 电量 | y=53.5,电池框居中偏左 |
电池图标 + 百分比 | System.getSystemStats().battery |
| 上方双复杂功能 | 图标 y=90,数值 y=130.5;左侧 x=156,右侧 x=343 |
天气温度 / 卡路里 / 步数 / 距离 / 楼层 / 电量 | 见 §4 |
| 中央时间 | y=220;小时 x=211(右对齐),分钟 x=272(左对齐) |
HH : MM(12 小时制) |
冒号用两块矩形块,位于 x=238 |
| 日期带 | 矩形 y=286.5,高 44 |
蓝牙图标 + 星期 + 月日 + AM/PM | 蓝牙图标 x=36.5,星期 x=177.5,月日 x=297.5 |
| 底部指标 | 数值 y=366,标签 y=410.5 |
左侧距离(DST),右侧步数(STEP) |
距离单位 km |
进度环几何(取自设计稿 rebuild.py):
- 顶弧:22 根刻度,角度
TOP = [2,6,…,86](步距 4),线宽13,渐变停止点 9 个(8→86)。 - 底弧:21 根刻度,角度
BOT = [6,9,…,66](步距 3),线宽9,渐变停止点 7 个(7→47)。 - 锚点圆点:位于角度
[0.0, 93.3, 180.0, 266.7],圆心半径240.5,圆点半径9.5。 - 刻度“点亮”数量按对应指标进度换算:
litTR/TL = progress × 22,litBR/BL = progress × 21。
时间字体为 FONT_NUMBER_HOT(大号数字),其余为 FONT_MEDIUM / FONT_SMALL。
2. 七套主题(Themes)
颜色数据由 watchface-tokens.json 经 gen_themes.py 生成到 source/Themes.mc(请勿手改,改 tokens 后重新生成)。每套主题包含:顶/底弧渐变停止点、未点亮刻度色 tickOff、锚点色 anchorDot、日期带填充 bandFill / 文字 bandText、强调色 accent、主文字 textPrimary、冒号色 colon、小时 hours、分钟 minutes。
| # | 主题 | 主色调 | 分钟数字 | 日期带 |
|---|---|---|---|---|
| 1 | Ember | 橙红渐变(黄→红) | 0xFCA901 |
橙底黑字 |
| 2 | Aurora | 青绿渐变(黄绿→青) | 0xAAF701 |
深灰底白字 |
| 3 | Brass | 金铜渐变 | 0xECCC93 |
深棕底白字 |
| 4 | Voltage | 蓝→黄渐变 | 0x52A8FD |
蓝底黑字 |
| 5 | Reef | 橙→青渐变 | 0xFC7801 |
青底黑字 |
| 6 | Acid | 黄绿(近单色) | 0xC4F900 |
深灰底黑字 |
| 7 | Kelp | 橙→绿渐变 | 0xF4880A |
深灰底黑字 |
3. 可配置设置(Garmin Connect / 表盘设置)
通过 resources/settings/ 暴露,键名与默认值见 properties.xml:
| 设置 | 键 | 可选值 | 默认 |
|---|---|---|---|
| 主题 | Theme |
1–7(Ember…Kelp) | 1 |
| 顶右弧指标 | RingTR |
0 步数 / 1 卡路里 / 2 距离 / 3 楼层 / 4 动动条 | 0 |
| 顶左弧指标 | RingTL |
同上 | 1 |
| 底右弧指标 | RingBR |
同上 | 4 |
| 底左弧指标 | RingBL |
同上 | 3 |
| 左上复杂功能 | LeftTop |
0 天气 / 1 卡路里 / 2 步数 / 3 距离 / 4 楼层 / 5 电量 | 1 |
| 右上复杂功能 | RightTop |
同上 | 0 |
| 显示顶行 | ShowTop |
布尔 | true |
| 显示日期带 | ShowBand |
布尔 | true |
| 显示底行 | ShowBottom |
布尔 | true |
指标默认值对应设计稿:顶右=步数、顶左=卡路里、底右=动动条、底左=楼层;左上=卡路里、右上=天气。
指标进度换算规则(metricProgress)
| idx | 指标 | 进度分母 |
|---|---|---|
| 0 | 步数 Steps | stepGoal(目标步数) |
| 1 | 卡路里 Calories | 固定 2000 kcal |
| 2 | 距离 Distance | 10 km(1,000,000 cm) |
| 3 | 楼层 Floors | floorsClimbedGoal(默认 10) |
| 4 | 动动条 Move Bar | moveBarLevel(归一化 0–1) |
进度超出 1 会被钳制,弧长即“点亮”刻度数。
4. 数据源与已知偏差
| 元素 | 数据来源 | 备注 |
|---|---|---|
| 步数 / 卡路里 / 距离 / 楼层 / 动动条 | ActivityMonitor.getInfo() |
SDK 9.1.0 字段:steps/stepGoal/calories/distance/floorsClimbed/floorsClimbedGoal/moveBarLevel |
| 天气温度 | Weather.getCurrentConditions().temperature |
需手表已配对天气 |
| 电量 | System.getSystemStats().battery |
0–1 浮点,×100 显示 |
| 日期 / 时间 | Time.Gregorian |
12 小时制,带 AM/PM |
| 蓝牙图标 | System.getDeviceSettings().phoneConnected(仅取状态) |
见下方偏差 |
⚠️ 与设计稿的关键偏差
- “日出(sunrise)”元素 → 实时天气温度。 设计稿顶部复杂功能中有一个日出图标及时间,但
Weather.CurrentConditions在 SDK 9.1.0 不暴露 sunrise 字段。因此该位置改为显示实时天气温度(NN°),图标保留太阳造型。 - 进度环为实时数据,非设计稿中的静态填充演示值;四段弧指标可在设置中自由分配。
- 蓝牙图标目前按日期带文字色常显(未根据
phoneConnected切换亮/暗),如需“未连接变暗”可后续在drawDateBand中据ds.phoneConnected调色。
5. 编译 / 构建
需安装 Connect IQ SDK(本文基于 9.1.0)并把 monkeyc 加入 PATH,且准备开发者密钥 developer_key.der(已在仓库内)。
# 单设备(Enduro 3 主产物)
monkeyc -o bin/Fenix8V3.prg -f monkey.jungle -y developer_key.der -d enduro3
# 导出调试资源(含 -settings.json,便于模拟器载入设置)
monkeyc -o bin/Fenix8V3.prg -f monkey.jungle -y developer_key.der -d enduro3 -x
# 多设备批量(已验证可编译)
for d in enduro3 fenix843mm fenix847mm fenix8pro47mm fenix8solar47mm \
fenix8solar51mm epix2 epix2pro47mm epix2pro51mm fenix7 fenix7x \
fenix7s fr965 fr265 fr255 venu3 vivoactive5; do
monkeyc -o "bin/Fenix8V3_${d}.prg" -f monkey.jungle -y developer_key.der -d "$d" \
&& echo "[$d] OK" || echo "[$d] FAIL"
done
已验证编译通过的设备:enduro3, fenix843mm, fenix847mm, fenix8pro47mm, fenix8solar47mm, fenix8solar51mm, epix2, epix2pro47mm, epix2pro51mm, fenix7, fenix7x, fenix7s, fr965, fr265, fr255, venu3, vivoactive5。产物位于 bin/,每个设备对应一个 .prg 及 .prg.debug.xml(调试版含资源镜像)。
6. 模拟器与侧载
- Connect IQ Simulator(Garmin 自带):
File → Open App Project选本目录,选设备后Run。在bin/*.prg.debug.xml旁会生成-settings.json,可在模拟器菜单View → Settings载入并实时切换主题/指标验证。 - 真机侧载(Garmin Connect / Garmin Express):
- 用 Garmin Express 或 Connect 手机 App 的“侧载(sideload)”功能导入对应设备的
bin/Fenix8V3_<device>.prg; - 或把
.prg拷入手表的/GARMIN/Apps/目录(需开发者模式 / WiFi 文件传输)。
- 用 Garmin Express 或 Connect 手机 App 的“侧载(sideload)”功能导入对应设备的
- 安装后在手表“表盘”列表选择 Fenix 8 V3,长按进入设置即可调主题与指标。
7. 目录结构
fenix8v3-watchface/
├── manifest.xml # 应用清单(ID / 支持设备 / 语言)
├── monkey.jungle # 构建配置(manifest + 源码/资源路径)
├── developer_key.der # Connect IQ 开发者签名密钥
├── source/
│ ├── Fenix8V3App.mc # 应用入口:getInitialView / onSettingsChanged
│ ├── Fenix8V3View.mc # 表盘渲染主逻辑(onUpdate + 各 draw*)
│ └── Themes.mc # ⚠️ 自动生成:7 套主题颜色(勿手改)
├── resources/
│ ├── strings/strings.xml # AppName / 设置项 / 主题 / 指标 / 字段文案
│ └── settings/
│ ├── properties.xml # 设置默认值
│ └── settings.xml # 设置 UI 定义(列表/布尔)
└── bin/ # 编译产物(.prg + 调试 xml + settings.json)
8. 二次开发与扩展
- 改主题配色:编辑
watchface-tokens.json(设计稿目录下),运行gen_themes.py重新生成source/Themes.mc。新增主题时同步在Themes.mc的ORDER数组、settings.xml的Theme列表、strings.xml的ThemeXX文案中登记。 - 加指标:在
metricProgress(进度换算)与complicationValue(复杂功能文本)两个方法里按idx分支扩展,并在settings.xml/properties.xml的列表项补充。 - 调布局:所有坐标集中在
Fenix8V3View.mc的draw*方法里,均为 “设计像素 ×s” 形式,改一处即可全局缩放生效。
9. 设计稿来源
还原基准为 watchface-kit.zip 内的 8 张 SVG 变体 + watchface-tokens.json(配色)+ watchface-spec.html(像素测量规范)+ rebuild.py(几何常量)。本仓库为按该规范落地的 Monkey C 实现,设计版权归原作者所有。