Watch Face Development Guide

for Huawei Watch

2019-12-30
 Objective

2
 Watch Face Development Tool and Specifications
Step 1: Register with HUAWEI Developer.
Visit the HUAWEI Developer website at
https://developer.huawei.com/consumer/en/ and register a HUAWEI ID as
instructed. If you have already get registered, skip this step.

Step 3: Download the watch face development

tool.
After completing identity verification, go to Distribute Services >
Huawei Themes > Development Guide > Development Tools on
HUAWEI Developer and download the development tool.

Step 2: Verify identity.

Sign in with the HUAWEI ID that you have registered in Step 1. Click Console
or Identity Verification and complete the identity verification process as
instructed. If you have already had your identity verified, skip this step.
Step 4: Download the watch face development
specifications.
After completing identity verification, go to Distribute Services >
Huawei Themes > Development Guide > Development
Specification on HUAWEI Developer and download the
specifications and development guide.

3
 Watch Face Development Process
Step 1
Design your watch face
Design the watch face by using tools
such as PS. This design contains the
final visual effect of your watch face.
4
Step 2 Step 3
Decompose and configure Watch face making
elements
Step 1: Decompose the design elements into four types:
background, time (hour, minute, and second), date (year, Pack the cropped images and
month, week, and day), complication (weather, step count, etc). configuration files and synchronize them
Step 2: Divide each element into one or more layers based on to the watch for testing.
its drawing type.
Step 3: Crop images for drawing on each layer.
Step 4: Configure how an element is displayed by combining
the widget as defined in the XML codes and the cropped image
for each minimum layer.
...
Complication
Weather icon
Weather
Temperature
Element Image layer 1 Image layer 2 Resources (cropped images)
 Supported Watch Face Specifications (Resolution)
Currently, watch faces with the following two specifications are customizable:

1. Watch face specifications 390px*390px (the 2. Watch face specifications 454px*454px (the "454
"390 specifications"). specifications").
Supporting the HONOR watch and the HUAWEI WATCH GT/GT2 Supporting the HUAWEI WATCH GT/GT2 Sport Edition and Active Edition
Elegant Edition

454px
390px

454px
390px

5
 Watch Face Directory Structure

Root directory
It can be named based on the characteristics of your watch face.

Watch face description file

Stores the watch face preview

Parent directory of cropped image files and configuration files

Stores cropped image files

Watch face configuration file, which describes the watch face layout
and content

Watch face description file, with the same content as description.xml

6
 Watch face description description.xml and
watch_face_info.xml

English name of the watch face

Chinese name of the watch face
Watch face developer
Watch face designer
Watch face resolution
Watch face version number
English font on the watch face
Chinese font on the watch face
Brief description of the watch face

1. The English theme name, Chinese theme name, developer name, and designer name cannot be changed after the theme is released.
2. The designer name is bound to the designer's HUAWEI Developer account.
3. There are two theme resolutions: HWHD01 (390px*390px) and HWHD02 (454px*454px).
4. Theme version numbering rule: x.y.z
x: ID of the device's GUI framework capability. For the 454 specifications (HUAWEI WATCH GT/GT2 Sport Edition and Active Edition), the value is 2. For the 390 specifications
(HONOR watch and HUAWEI WATCH GT/GT2 Elegant Edition), the value is 3.
y: version number of the watch face framework capability, which identifies the number of iterations of the capability on the device. The value starts from 1. (For the existing version, the
value is 1.)
z: version number of the watch face resource package, which is used for watch face version update. The value starts from 1 and is defined by the watch face developer.
5. Both the default English and Chinese theme fonts are used and cannot be changed.

7
 Watch Face Preview Directory: Preview
Watch face preview images in the Preview directory are displayed both on the user's mobile phone. Two such images are needed:

cover.jpg:
A 960px * 960px image in the JPG format, which is used on Watch
Faces as a demonstration of the watch face

icon_small.jpg:
A 390px * 390px image in the JPG format, which is used as the watch face
preview icon.
8
 Watch Face Image Directory: src
The src directory stores all PNG images of the watch face, which must be named as A100_001.png, A100_002.png, A100_003.png, and
so on. In addition, A100_001.png must be the watch face thumbnail of the corresponding size: 250px*250px for the 454
specifications and 216px*216px for the 390 specifications.

A100_003.png A100_004.png A100_005.png

A100_001.png

A100_006.png A100_007.png A100_008.png

A100_002.png

9
 Structure of Watch Face Configuration File
watch_face_config.xml
The file is in the XML format and adopts UTF-8 encoding.
Root node, under which all watch face configurations are defined.
Sub-root node, where the dpi attribute, namely, screen resolution, is set. The dpi values can be 390 or 454.

Widget node. Each widget corresponds to an image layer and is displayed in the order as define in the
XML codes. The widget that is defined first will be displayed at the bottom layer. If the same display area
contains two widget descriptions, the widget that is described later will be placed on top of the widget
that is described earlier.

For example, background image A100_002.png is displayed by using the first widget and step count is
displayed by using the second widget. Step count appears on top of the background image, as shown
below:

+ 14398
= 14398

Information displayed using Information displayed Combined information

the first widget using the second widget

10
 Widgets in the Watch Face Configuration File
watch_face_config.xml
Currently, 8 types of widgets are supported:

• IMAGE: static images, such as background images and icons

• TEXTUREMAPPER: images that represent rotations, for example, the hour, minute, and second hands on the watch
• CIRCLE: circular progress bar, which is used to display progress towards a goal, such as step count and consumption
• Line: linear progress bar, which is used to display progress towards a goal, such as step count and calorie consumption
• TEXTAREAWITHONEWILDCARD: dynamic text box, which is used to display changed text, such as the step count and heart rate.
• Box: background box, which is used to display the background color
• SELECTIMAGE: image playback. Different images are displayed when the data of the subscribed type (such as weather, date, and week) changes.
• TEXTAREAWITHTWOWILDCARD: dynamic text box with a connector, for example, time in XX:XX format and date in XX/XX format

Notes:
1. Different layers can be displayed using the combination of the eight widgets.
2. By widget type, each widget node has at least one subnode of a different type.
3. All types of subnodes must have their own label and type attributes, which are used to describe the correlation between the widget and a specific element and
whether the described widget is static or dynamic, respectively.

Widget type
Describes the correlation between the widget and a specific
element. You can define this attribute as needed.
Describes whether the widget is static or dynamic.
Currently, only static is supported.

For details about the widget specifications, please refer to the Widget Reference for Huawei Watch.docx
11
 Watch Face References

Coordinate system Area Font display

x=0,y=0 x Width, drawable_width

x/y coordinate

Height,
drawable_height
Alignment Alignment
y Display the font in the pre-defined area. Horizontally, font
X/Y coordinate system, starting from the upper left corner of alignment should be configurable. Vertically, the font
the square that is tangent to the watch face circumference. should be aligned to the bottom of the display area. When
Identify the start and end points of the area in the x/y the font is large and goes beyond the display area, it will
The unit is px.
coordinate system and define the area by width and height. be directly displayed in this manner.

Image display Circular progress bar Image rotation (special x/y)

Width, drawable_width Width, drawable_width
x/y coordinates x/y coordinates
40

Height, drawable_height
Height, drawable_height Width of the edge of The system automatically aligns
a circle the image with the point around
line_width which the image will rotate. For
Upper left corner 80 example:
of the image Radius, cycle_r, rotation_center_x = 20
from the center of rotation_center_y = 80
the circle to the
midpoint of the edge The point around which the
Align the upper left corner of the image with the x/y of the circle image will rotate, which is
coordinates, and display the image from top to bottom and automatically calculated based
Center, cycle_x,
from left to right. Do not stretch or scale the image. on the area (as defined by
cycle_y
diagonal lines of the square).

12
 Testing the Watch Face
Step 1: Save the .hwt watch face file, for example, 24-hour_Time.hwt to the mobile phone. The resource package name must not contain Chinese characters but
English characters and digits.
Step 2: Install and sign in to the beta version of HUAWEI Health app. Download the version by going to Document > Create Your Themes on HUAWEI Developer.
Step 3: Scan the QR code to bind the app to the watch and go to Me > My Devices > Watch Faces. Load the watch face resource package that has been stored in the
mobile phone and install it to the watch.
Step 4: Check how the watch face looks on the watch.

Open the
phone file
manager.

Select the
After completing
watch face
installation,
resource
check how the
package on
watch face looks
the phone.
on the watch.
Click Install
to install the
watch face on
to the watch.

13
 Releasing the Watch Face
Step 1: Sign in to HUAWEI Developer at https://developer.huawei.com/consumer/en/ with your HUAWEI ID that has completed the identity verification process.
Step 2: If this is the first time that you have uploaded a watch face, go to Console > DiyDesktop > Theme Services, and add HUAWEI Themes.
Step 3: Go to Console > Theme Services > HUAWEI Themes > Publish.
Step 4: Fill in the product information. Select Theme for Product Category, and click Create Product to add the watch face resource package (.hwt) and upload it.
Step 5: After the watch face is successfully uploaded, it will be in the Pending Publication state. Huawei will complete the review within 5 days.

14
 Appendix: data_type Values

DATA_STEPS //Step count DATA_HOUR12_HIGH //Most significant place of hour in 12-hour clock DATA_POWER_RATIO //Battery ratio
DATA_CALORIE //Calorie DATA_HOUR12_LOW //Least significant place of hour in 12-hour clock DATA_HEARTRATE_RATIO //Heart rate ratio
DATA_HEARTRATE //Heart rate DATA_HOUR24_HIGH //Most significant place of hour in 24-hour clock DATA_CALORIE_RATIO //Calorie ratio
DATA_STRENTHTIME //Moderate and high intensity exercise time DATA_HOUR24_LOW //Least significant place of hour in 24-hour clock DATA_STANDUPTIMES_RATIO //Ratio of stand-up times
DATA_TEMPERATURE //Temperature DATA_HOUR_HIGH //Most significant place of hour DATA_STRENTHTIME_RATIO //Ratio of moderate and high intensity exercise time
DATA_PM25 //PM2.5 DATA_HOUR_LOW //Least significant place of hour DATA_STEPS_RATIO //Ratio of steps
DATA_AQI //AQI DATA_MINITE_HIGH //Most significant place of minute DATA_VO2MAX_RATIO //Maximal oxygen uptake ratio
DATA_PRESSURE //Pressure DATA_MINITE_LOW //Least significant place of minute
DATA_AILTITUDE //Altitude DATA_SECOND_HIGH //Most significant place of second
DATA_POWER //Battery percentage DATA_SECOND_LOW //Least significant place of second
DATA_HOUR24 //Hour in 24-hour clock DATA_STEPS_ONE //Ones place of step count
DATA_HOUR12 //Hour in 12-hour clock DATA_STEPS_TWO //Tens place of step count
DATA_HOUR //Hour DATA_STEPS_THREE //Hundreds place of step count
DATA_MINITE //Minute DATA_STEPS_FOUR //Thousands place of step count 1. Data types without the suffix "_RATIO" are value-based.
DATA_SECOND //Second DATA_STEPS_FIVE //Ten thousands place of step count They indicate specific values and are used by the
DATA_STANDUPTIMES //Stand-up times DATA_DATE_HIGH //Most significant place of date
DATA_DATE_LOW //Least significant place of date
TEXTAREAWITHONEWILDCARD, SELECTIMAGE, and
DATA_VO2MAX //Maximal oxygen uptake
DATA_UNREADMSG_STATE //Unread message state TEXTAREAWITHTWOWILDCARD widgets.
DATA_DATE //Date
DATA_HEARTRATE_MAX //Maximum heart rate DATA_HOUR12_RATIO //Ratio of hour in 12-hour clock
DATA_HEARTRATE_MIN //Minimum heart rate DATA_HOUR24_RATIO //Ratio of hour in 24-hour clock 2. Data types with the suffix "_RATIO" are ratio-based. They
DATA_AMPM //Morning/Afternoon in 12-hour clock DATA_HOUR_RATIO //Ratio of hour indicate the ratio of the current value to the maximum value
DATA_MONTH //Month DATA_MINITE_RATIO //Ratio of minute and are used by the TEXTUREMAPPER, CIRCLE, and LINE
DATA_WEEK //Week DATA_SECOND_RATIO //Ratio of second
DATA_DATE_RATIO //Ratio of date
widgets.
DATA_WEATHERTYPE //Weather
DATA_POWER_ENUM //Battery DATA_WEEK_RATIO //Ratio of week

For details, please refer to the attachment to section

"3 data_type Values" in the Widget Reference for
Huawei Watch.docx

15
 Appendix: Supported Fonts
Fonts supported by the 390 Fonts supported by the 454
specifications: specifications:
T_HYQIHEI_65S_18 T_ROBOTOCONDENSED_REGULAR_18 F_ROBOTOCONDENSED_REGULAR_20
T_HYQIHEI_65S_20 T_ROBOTOCONDENSED_REGULAR_20 F_ROBOTOCONDENSED_REGULAR_23
T_HYQIHEI_65S_22 T_ROBOTOCONDENSED_REGULAR_22 F_ROBOTOCONDENSED_REGULAR_26
T_HYQIHEI_65S_24 T_ROBOTOCONDENSED_REGULAR_24 F_ROBOTOCONDENSED_REGULAR_28
T_HYQIHEI_65S_26 T_ROBOTOCONDENSED_REGULAR_26 F_ROBOTOCONDENSED_REGULAR_30
T_HYQIHEI_65S_32 T_ROBOTOCONDENSED_REGULAR_32 F_ROBOTOCONDENSED_REGULAR_38
T_HYQIHEI_65S_36 T_ROBOTOCONDENSED_REGULAR_36 F_ROBOTOCONDENSED_REGULAR_48
T_HYQIHEI_65S_42 T_ROBOTOCONDENSED_REGULAR_42

For details, please refer to section "4 Supported Fonts and Font Sizes" in
the Widget Reference for Huawei Watch.docx

16
 Watch Face Example (24-Hour Clock) (1/7)
Dynamic text box widget

Starting positions of the x

Static image widget and y coordinates for the
display area
Width and height of
x coordinate at the upper left the display area
corner of the image
R\G\B color code for
XML y coordinate at the upper left
the font
corner of the image
Description Name of the referenced Step count
image
Horizontally, align center
Font
Transparency, from 1 to 255,
where 255 indicates opacity

Drawing Drawing the background: Display the background image Drawing steps: From the (87,226) position in the x/y coordinate system, draw
Instructions A100_002.png from the origin (0,0) of the x/y coordinate system. an area of 75px (width) and 27px (height), and display the step count in white
The image must not be scaled but displayed directly. and in F_ROBOTOCONDENSED_REGULAR_30 font.

Effect
After
14398
Overlay

17
 Watch Face Example (24-Hour Clock) (2/7)
Image playback widget

Starting positions of the x and y

coordinates for the image
Enumerated value of week

XML The parameters

have the same
Description meaning as
those described
Specify the image to be displayed in slide Watch
based on the enumerated value. If no Face Example
enumerated value is specified, the (24-Hour Clock)
integrity of parameters from res_0 to (1/7).
res_14 must be ensured still.

Drawing week: From the (191,128) position in the x/y coordinate system, display the Drawing date: From the (237,128) position in the x/y coordinate system,
Drawing designated image as defined in the enumerated value of date. (See the HUAWEI draw an area of 22px (width) and 20px (height), and display the date in
Instructions WATCH Face Widget Reference.docx for the enumerated values.) white and in F_ROBOTOCONDENSED_REGULAR_30 font.

Effect 6

After
14398 14398
Overlay

18
 Watch Face Example (24-Hour Clock) (3/7)
Dynamic text box widget with a
connector

The parameters have the same

meaning as those described in
slide Watch Face Example (24-
Hour Clock) (1/7). The parameters have the same
XML meaning as those described in
Description slide Watch Face Example (24-
Hour Clock) (2/7).
"%" is the connector.
Battery level is displayed to the
left of the connector.
Nothing is displayed to
the right of the connector.

Drawing battery percentage: From the (304,227) position in the x/y Drawing heart rate range: From the (156,256) position in the x/y
coordinate system, draw an area of 73px (width) and 27px (height), and
Drawing coordinate system, display the designated image as defined in
display the battery percentage in white and in the enumerated value of heart rate.
Instructions F_ROBOTOCONDENSED_REGULAR_30 font.

Effect 6 6

After
14398 40% 14398 40%
Overlay

19
 Watch Face Example (24-Hour Clock) (4/7)
Circular progress bar widget

Starting positions of the x and y coordinates

for the display area

Width and height of the display area

XML The center and radius of the circle The parameters have the same
Width of the circle edge. For details, please meaning as those provided on
Description refer to the Watch Face References slide. the left of this slide. However,
Start and end angles for drawing the circle the circle is drawn in the anti-
Drawing precision, where the default value 6 clockwise direction (where the
(degrees) is used. The image display area will be start angle is greater than the
refreshed when the change exceeds 6 degrees. end angle).
Data source of the drawing reference (ratio)
The image to e referenced

Drawing step goal: From the (54,54) position in the x/y coordinate system, draw an area of
346px (width) and 446px (height). Place A100_015.png (173,173) in the area, with (173,173)
Drawing being the center of the circle, display only the sector part of the image that is between 245
Instructions and 294 degrees, and show the progress in the sector as steps increase.
Drawing battery percentage: From the (54,54) position in the x/y coordinate
system, draw an area of 346px (width) and 446px (height). Place A100_015.png
(173,173) in the area, with (173,173) being the center of the circle, display only the
sector part of the image that is between 114 and 66 degrees, and show the progress
in the sector as battery reduces.

Effect 6 6

After
14398 40% 14398
14398 40%
Overlay

20
 Watch Face Example (24-Hour Clock) (5/7)
Circular rotating widget

Starting positions of the x and y

coordinates as well as width and
The parameters height of the display area
have the same x and y coordinates for the center of
XML meaning as rotation. For details, please refer to the
Description those described Watch Face References slide.
in slide Watch Start and end angles for rotation
Face Example Data source of the drawing
(24-Hour Clock) reference (ratio)
(1/7). Image to be rotated

Drawing heart rate: From the (194,326) position in the x/y Drawing the hour hand in a 24-hour clock: From the origin (0,0) of the x/y
coordinate system, draw an area of 65px (width) and 27px coordinate system, draw an area of 454px (width) and 454px (height). Place
Drawing (height), and display the heart rate in white and in A100_019.png in the area, with (25,227) being the center, and rotate the image by
Instructions F_ROBOTOCONDENSED_REGULAR_30 font. referring to the hours in a 24-hour clock.

Effect 6 6

After
14398 40% 14398
14398
Overlay 14398 14398 40%

80 80

21
 Watch Face Example (24-Hour Clock) (6/7)

The
The
The parameters
parameters
parameters have the
have the
have the same
same
same meaning
meaning as
meaning as as those
those
those described
XML described in
described
in slide
in slide
Description slide Watch
Watch
Watch
Face Face
Face
Example Example
Example
(24-Hour (24-Hour
(24-Hour
Clock) (5/7). Clock)
Clock)
(5/7).
(1/7).

Drawing the hour hand in a 12-hour clock: From
the origin (0,0) of the x/y coordinate system, draw
an area of 454px (width) and 454px (height). Place
A100_009.png in the area, with (25,227) being the
Drawing center, and rotate the image by referring to the
Instructions hours in a 12-hour clock.
Drawing the center of the clock: From
the position (202,202) in the x/y coordinate
system, draw A100_012.png.
Drawing the minute hand: From the origin (0,0) of
the x/y coordinate system, draw an area of 454px
(width) and 454px (height). Place A100_011png in
the area, with (25,227) being the center, and rotate
the image by referring to the minute data.

Effect 6 6 6

After
14398
14398 40% 14398
14398 40% 14398
14398 40%
14398 14398 14398
Overlay
80 80 80

22
 Watch Face Example (24-Hour Clock) (7/7)

The The
The parameters parameters
parameters have the have the
have the same same same
meaning as meaning as meaning as
those those those
described in described in described in
XML slide Watch slide Watch slide Watch
Description Face Example Face Face Example
(24-Hour Example (24-Hour
Clock) (1/7). (24-Hour Clock) (1/7).
Clock)
(5/7).

Drawing the second hand: From the origin (0,0)

of the x/y coordinate system, draw an area of
Drawing the center of the clock: From 454px (width) and 454px (height). Place Drawing the center of the clock: From
Drawing the position (204,204) in the x/y coordinate the position (204,204) in the x/y coordinate
A100_010.png in the area, with (25,227) being the
Instructions system, draw A100_013.png. system, draw A100_020.png.
center, and rotate the image by referring to the
second data.

Effect 6 6 6

After
14398
14398 40% 14398
14398 40% 14398
14398 40%
14398 14398 14398
Overlay
80 80 80

23
Thank You