Last updated: 2020-07-28

Overview

Huawei Watch Face Designer supports the watch face development for multiple watch and band products. New features have been constantly added to the tool with the upgrade and iteration of watch products, allowing you to provide richer and more interesting watch face styles for users.
Huawei Watch Face Designer is an editing tool developed by Huawei, which allows you to edit and generate a watch face quickly after completing the design and the editing of slice images. It has the following features:

In this codelab, you will create an elegant and interesting watch face using Huawei Watch Face Designer, bringing you a brand new watch face style.

Key Points

  1. Extract elements like background image, hour, minute, week, and date from a watch face.
  2. Select the matching widget from the Designer to display each element.

Creating a Watch Face

  1. Double-click Huawei Watch Face Designer to start the tool.
  2. Go to File > New project.
  3. Set Watch type and Series name.
  4. Set Resolution to 454 x 454.
  5. Enter the project name and storage path.

Entering the Watch Face Information

  1. Name (EN), Name (CH), Developer, and Designer: cannot be changed after a theme is released.
  2. Designer: bound to a designer's HUAWEI Developers account.
  3. Version No.: version number of a watch face. You are advised to set the initial version number to 1.
  4. Watch face image: Three images are required:
  5. cover.jpg, 960 x 960: displayed on the watch face market.

    icon_small.jpg, 390 * 390: displayed on the details page after a watch face is tapped.

    A100_001.png, 250 * 250: displayed on the watch.

  6. Intro: watch face description.

Adding a Watch Face Background Image

  1. Choose SglImage from the widget bar and drag it to the widget area on the left.
  2. Select A100_029.png from the Digital watch face material folder as the watch face background.
  3. In Position, set (X, Y) (coordinates of the upper left corner of the image) to (0, 0).

Adding Hour (Tens Digit) Images

  1. Choose SelImage from the widget bar and drag it to the widget area on the left.
  2. In Position, set (X, Y) (coordinates of the upper left corner of the image) to (106, 72).
  3. Select Hour (high) for Data type.
  4. Add the following images from the resource library in sequence: A100_002.png, A100_003.png, A100_004.png, A100_005.png, A100_006.png, A100_007.png, A100_008.png, A100_009.png, A100_010.png, and A100_011.png. The watch face dynamically displays the images based on the enumerated value of Hour (high).

Adding Hour (Units Digit) Images

  1. Choose SelImage from the widget bar and drag it to the widget area on the left.
  2. In Position, set (X, Y) (coordinates of the upper left corner of the image) to (216, 72).
  3. Select Hour (low) for Data type.
  4. Add the following images from the resource library in sequence: A100_002.png, A100_003.png, A100_004.png, A100_005.png, A100_006.png, A100_007.png, A100_008.png, A100_009.png, A100_010.png, and A100_011.png. The watch face dynamically displays the images based on the enumerated value of Hour (low).

Adding Minute (Tens Digit) Images

  1. Choose SelImage from the widget bar and drag it to the widget area on the left.
  2. In Position, set (X, Y) (coordinates of the upper left corner of the image) to (106, 213).
  3. Select Minute (high) for Data type.
  4. Add the following images from the resource library in sequence: A100_012.png, A100_013.png, A100_014.png, A100_015.png, A100_016.png, A100_017.png, A100_018.png, A100_019.png, A100_020.png, and A100_021.png. The watch face dynamically displays the images based on the enumerated value of Minute (high).

Adding Minute (Units Digit) Images

  1. Choose SelImage from the widget bar and drag it to the widget area on the left.
  2. In Position, set (X, Y) (coordinates of the upper left corner of the image) to (216, 213).
  3. Select Minute (low) for Data type.
  4. Add the following images from the resource library in sequence: A100_012.png, A100_013.png, A100_014.png, A100_015.png, A100_016.png, A100_017.png, A100_018.png, A100_019.png, A100_020.png, and A100_021.png. The watch face dynamically displays the images based on the enumerated value of Minute (low).

Adding Week Images

  1. Choose SelImage from the widget bar and drag it to the widget area on the left.
  2. In Position, set (X, Y) (coordinates of the upper left corner of the image) to (176, 389).
  3. Select Weekly data for Data type.
  4. Add the following images from the resource library in sequence: A100_028.png, A100_022.png, A100_023.png, A100_024.png, A100_025.png, A100_026.png, and A100_027.png. The watch face dynamically displays the images based on the enumerated value of Weekly data.

Configuring Date Display

  1. Choose Changing text from the widget bar and drag it to the widget area on the left.
  2. In Position, set (X, Y) (coordinates of the upper left corner of the image) to (239, 385), and W (text width) to 40.
  3. Select RobotoCondensed_26 for Text.
  4. Set the RGB color value to (255, 255, 255) and set the text transparency to 255.

  5. Set Alignment to left-aligned.
  6. Set Data type tDate**te.

Exporting the Watch Face Files

Go to File > Export and export the watch face files.
In the exported files, the .hwt file is the final watch face resource package.

Well done. You have successfully developed your first watch face.

Testing Your Watch Face on a Watch

  1. Save the .hwt file to your phone.
  2. Sign in to Huawei Health using the HUAWEI ID registered on HUAWEI Developers.
  3. Load the watch face resource package in the watch face market and install it on your watch.
  4. Check how the watch face looks on the watch.
Code copied