Skip to main content
版本:v3

可编辑表盘

可编辑 Widget

说明
hmUI.edit_type.STEP步数
hmUI.edit_type.BATTERY电量
hmUI.edit_type.HEART心率
hmUI.edit_type.CAL消耗
hmUI.edit_type.PAIPAI
hmUI.edit_type.DISTANCE距离
hmUI.edit_type.AQI空气质量
hmUI.edit_type.HUMIDITY湿度
hmUI.edit_type.UVI紫外线
hmUI.edit_type.DATE日期
hmUI.edit_type.WEEK星期
hmUI.edit_type.WEATHER天气
hmUI.edit_type.TEMPERATURE温度
hmUI.edit_type.SUN日出日落
hmUI.edit_type.STAND站立
hmUI.edit_type.SUN_RISE日出
hmUI.edit_type.SUN_SET日落
hmUI.edit_type.WIND风力
hmUI.edit_type.WIND_DIRECTION风向
hmUI.edit_type.SPO2血氧
hmUI.edit_type.STRESS压力
hmUI.edit_type.FAT_BURN燃脂
hmUI.edit_type.FLOOR爬楼
hmUI.edit_type.ALTIMETER压强
hmUI.edit_type.BODY_TEMP温度
hmUI.edit_type.MOON月相
hmUI.edit_type.APP_PAIAPP_PAI 暂时无用
hmUI.edit_type.COUNT_DOWN倒计时
hmUI.edit_type.STOP_WATCH秒表
hmUI.edit_type.SLEEP睡眠
hmUI.edit_type.ALARM_CLOCK闹钟

层级

图层1

图层2

  • 注意 tips_x tips_y 的坐标是相对于组件内的 x y 所以 如果 tips 在组件上方 需要写负值

getProperty(hmUI.prop.CURRENT_TYPE)

调用此属性会返回当前用户选择 type 类型 使用此 type 来绘制不同的组件

const groupX = 153
const groupY = 246

editGroup = hmUI.createWidget(hmUI.widget.WATCHFACE_EDIT_GROUP, {
edit_id: 101,
x: groupX,
y: groupY,
w: 148,
h: 148,
select_image: rootPath + 'mask/select.png',
un_select_image: rootPath + 'mask/select.png',
default_type: hmUI.edit_type.HEART,
optional_types: [{ type: hmUI.edit_type.HEART, preview: rootPath + 'preview/bat.png' }],
count: 1,
tips_BG: rootPath + 'mask/text_tag.png',
tips_x: 172 - groupX,
tips_y: 210 - groupY,
tips_width: 110,
tips_margin: 10 // optional, default value: 0
})
const editType = editGroup.getProperty(hmUI.prop.CURRENT_TYPE)
switch (editType) {
case hmUI.data_type.HEART:
this.drawHeartWidget(groupX, groupY)
break
case hmUI.data_type.BATTERY:
break
}
//100%mask
maskCover = hmUI.createWidget(hmUI.widget.WATCHFACE_EDIT_MASK, {
x: 0,
y: 0,
w: 454,
h: 454,
src: rootPath + 'mask/mask100.png',
show_level: hmUI.show_level.ONLY_EDIT
})
//70%msk
mask = hmUI.createWidget(hmUI.widget.WATCHFACE_EDIT_FG_MASK, {
x: 0,
y: 0,
w: 454,
h: 454,
src: rootPath + 'mask/mask70.png',
show_level: hmUI.show_level.ONLY_EDIT
})

以全屏幕的控件提供给用户选择展示内容,尝试以下代码,省略部分与上文一致

editGroup = hmUI.createWidget(hmUI.widget.WATCHFACE_EDIT_GROUP, {
// ...
select_list: {
title_font_size :34 ,
title_align_h: hmUI.align.CENTER_H ,
list_item_vspace: 8,
list_tips_text_font_size: 32,
list_tips_text_align_h : hmUI.align.LEFT,
}
})

高级用法 自定义 editType

如果当前固件所支持的 editType 不全(可能产品新需求)不支持当前表盘 可以自定义 type

自定义的 type 范围 0x186a0 - UINT32_MAX

title 必须写

const optional_types = [
{
type: 100001,
preview: rootPath + 'preview/bat.png',
title_sc: '标题',
title_tc: '标题',
title_en: 'title'
}
]

可编辑背景

  • 可编辑背景+可编辑 widget 时 widget 省略 100%mask
  • 只有可编辑背景时 上面的两层去掉即可

id 自己写 别重复即可

背景

const editBg = hmUI.createWidget(hmUI.widget.WATCHFACE_EDIT_BG, {
edit_id: 103,
x: 0,
y: 0,
bg_config: [
{ id: 1, preview: BGROOT + 'bg_edit_1.png', path: BGROOT + 'preview_1.png' },
{ id: 2, preview: BGROOT + 'bg_edit_2.png', path: BGROOT + 'preview_2.png' },
{ id: 3, preview: BGROOT + 'bg_edit_3.png', path: BGROOT + 'preview_3.png' },
{ id: 4, preview: BGROOT + 'bg_edit_4.png', path: BGROOT + 'preview_4.png' },
{ id: 5, preview: BGROOT + 'bg_edit_5.png', path: BGROOT + 'preview_5.png' }
],
count: 5,
default_id: 1,
fg: BGROOT + 'fg.png',
tips_x: 178,
tips_y: 428,
tips_bg: TIPS_ROOT + 'bg_tips.png'
})

可编辑指针

指针

  • 如果没有可编辑背景 不可省略 100%Cover

id 不要重复

pointerEdit.getProperty(hmUI.prop.CURRENT_CONFIG,true) //第二个参数是是否导出秒针属性

此函数返回的时用户选择指针样式属性配置 直接把它赋值给 TIME_POINTER 即可

const pointerConfig = [
{
id: 1,
hour: {
centerX: centerXValue,
centerY: centerYValue,
posX: 12,
posY: 172,
path: pointPath + 'hand_4_h.png'
},
minute: {
centerX: centerXValue,
centerY: centerYValue,
posX: 18,
posY: 229,
path: pointPath + 'hand_4_m.png'
},
second: {
centerX: centerXValue,
centerY: centerYValue,
posX: 13,
posY: 245,
path: pointPath + 'hand_all_s.png'
},
preview: pointPath + 'preview1.png'
}
// ...
]

const pointerEdit = hmUI.createWidget(hmUI.widget.WATCHFACE_EDIT_POINTER, {
edit_id: 120,
x: 0,
y: 0,
config: pointerConfig,
count: pointerConfig.length,
default_id: 1,
fg: ROOTPATH + 'pointer/fg.png',
tips_x: 178,
tips_y: 428,
tips_bg: TIPS_ROOT + 'bg_tips.png'
})
const screenType = hmSetting.getScreenType()
const aodModel = screenType == hmSetting.screen_type.AOD
const pointerProp = pointerEdit.getProperty(hmUI.prop.CURRENT_CONFIG, !aodModel)
pointer = hmUI.createWidget(hmUI.widget.TIME_POINTER, pointerProp)