Editable watchface

Editable Widget

Value	Description
hmUI.data_type.BATTERY	Electricity
hmUI.data_type.STEP	Current Step Count
hmUI.data_type.STEP_TARGET	Target number of steps
hmUI.data_type.CAL	Current Calories
hmUI.data_type.CAL_TARGET	Target Calories
hmUI.data_type.HEART	Current heart rate
hmUI.data_type.PAI_DAILY	Today PAI
hmUI.data_type.PAI_WEEKLY	Total PAI
hmUI.data_type.DISTANCE	Distance
hmUI.data_type.STAND	Current stand
hmUI.data_type.STAND_TARGET	Target stand
hmUI.data_type.WEATHER_CURRENT	Current temperature
hmUI.data_type.WEATHER_LOW	Current low temperature
hmUI.data_type.WEATHER_HIGH	Current high temperature
hmUI.data_type.UVI	Ultraviolet light
hmUI.data_type.AQI	Air Quality
hmUI.data_type.HUMIDITY	Humidity
hmUI.data_type.FAT_BURNING	Fat Burning
hmUI.data_type.FAT_BURNING_TARGET	Fat Burning Goals
hmUI.data_type.SUN_CURRENT	Sunrise and sunset will be displayed according to the time
hmUI.data_type.SUN_RISE	Sunrise
hmUI.data_type.SUN_SET	Sunset
hmUI.data_type.WIND	Wind Power
hmUI.data_type.STRESS	Pressure
hmUI.data_type.SPO2	Blood oxygen
hmUI.data_type.BODY_TEMP	Temperature
hmUI.data_type.ALTIMETER	Pneumatic pressure
hmUI.data_type.MOON	Moon phase. Only progress is supported
hmUI.data_type.FLOOR	Climbing a building
hmUI.data_type.ALARM_CLOCK	Alarm Clock
hmUI.data_type.COUNT_DOWN	Countdown
hmUI.data_type.STOP_WATCH	Stopwatch
hmUI.data_type.SLEEP	Sleep

Levels

• Note that the tips_x tips_y coordinates are relative to the x y inside the component, so if the tips are above the component, you need to write negative values.

getProperty(hmUI.prop.CURRENT_TYPE)

Calling this property returns the type type selected by the current user Use this type to draw different components.

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
})

To provide the user with a full screen control to select the display content, try the following code, the omitted part is the same as above.

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,
  }
})

Advanced Usage Customizing editType

If the editType supported by the current firmware is incomplete (possibly a new product requirement) and does not support the current dial, you can customize the type.

Custom type range 0x186a0 - UINT32_MAX

title must be written.

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

Editable backgrounds

• When editable background + editable widget, widget omits 100%mask
• If only editable background, just remove the top two layers

Just write your own ids and don't repeat them.

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'
})

Editable pointers

• 100%Cover cannot be omitted if there is no editable background.

ID Do not repeat.

pointerEdit.getProperty(hmUI.prop.CURRENT_CONFIG,true) //The second parameter is whether to export the second hand property.

This function returns the configuration of the user-selected pointer style attribute and assigns it directly to 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)