Watch Face Development Guide for Huawei Band 2019

Watch Face Development Guide for Huawei Band 2019 -12 -30

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. 2

Watch Face Development Process Step 2 Step 1 Decompose and configure elements Design your watch face Watch face making Design the watch face by using tools Step 1: Decompose the design elements into four types: Pack the cropped images and such as PS. This design contains the background, time (hour, minute, and second), date (year, configuration files and synchronize them final visual effect of your watch face. month, week, and day), complication (weather, step count, to the watch for testing. etc. ). Step 2: Divide each element into one or more layers based on its drawing type. Step 3: Crop images for drawing on each layer. . . Complication Number of Step count icon steps Number of steps Element Image layer 1 Image layer 2 3 Step 3 Resources (cropped images)

Supported Watch Face Specifications (Resolution) Currently, only the Honor Band 5 supports watch faces. 1. The watch face specification is 120 pixel * 240 pixel (the “ 120 specifications"). 120 pixel 240 pixel 4

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 preview on the band (displayed on the band) Split the image into two 120 px x 120 px. bmp files. Path for storing map cut resource files. Watch face configuration file, which describes the watch face layout and content Watch face description file, with the same content as description. xml 5

Watch face 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. 2. 3. 4. The English theme name, Chinese theme name, developer name, and designer name cannot be changed after theme is released. The designer name is bound to the designer's HUAWEI Developer account. There are two theme resolutions: HWHD 03 indicates 120 px * 240 px Watch face version number: x. y. z x: ID of the GUI framework capability of the device. The value is 4 for the smart band (Honor Band 5) and watch face. y: indicates the version number of the watch face framework capability, which is used to identify iterative update of the watch face framework 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 customized by the watch face developer. 5. Both the default English and Chinese theme fonts are used and cannot be changed. 6

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: The specification is 480 px * 960 px. The cover is used to display the watch face effect in the watch face market. The JPG image (size ≤ 200 KB) is required. The preview time is displayed as 10: 08: 36 icon_small. jpg: 390 px * 390 px, used for icon preview. The JPG image is required (size ≤ 200 KB). The preview time is displayed as 10: 08: 36 7

Watch Face Image Directory: src Directory for storing all BMP image files used by the watch face. The directories are named in the format of A 000, A 001, A 002, and so on. Each type of resources is placed in a directory. (The development tool will automatically create directories according to the naming rule. ) A 000 Back. Ground A 003 Time. White A 001 AMPM A 004 Date A 002 Time. Yellow A 005 Date. Icon A 006 Step. Icon Note: The original size of the background image in the A 000 Back. Ground folder is 120 px * 240 px. Split the image into two 120 px *120 px. bmp files. 8 A 007 Step. Number

Structure of Watch Face Configuration File watch_face_config. xml The file is in XML format and encoded using UTF-8. Root node, under which all watch face configurations are defined. Sub-root node. You need to set the dpi attribute, that is, the screen resolution. 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. The definition on the left is to display a background image through the first control, and then the morning and afternoon information displayed on the second control is overwritten on the background image, as shown in the following figure. + Information displayed using the first widget 9 = Information displayed using the second widget Combined information

Widgets in the Watch Face Configuration File watch_face_config. xml Currently, the following 4 widgets are supported: • • SINGLEIMAGE: static image, for example, background image and icon. DIGITALIMAGE: digital image selection, which displays dynamic data, such as the time, date, and number of steps. MUTILLANGUAGE: month, week, and other languages MUTILWIDGET: multi-component, which displays information composed of multiple data of the same type, for example, a combination of a step count icon and a step count, a heart rate icon and a heart rate value, and a heart rate unit combination. 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. Control 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 control specifications, see the Widget Reference for Huawei Band. docx 10

Watch Face References Coordinate system x x=0, y=0 Image display x/y coordinates Upper left corner of the image y X/Y coordinate system, starting from the upper left corner of the square that is tangent to the watch face circumference. The unit is px. 11 Align the upper left corner of the image with the x/y coordinates, and display the image from top to bottom and from left to right. Do not stretch or scale the image.

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 watch face resource package on the phone. Click Install to install the watch face on to the watch. 12 After completing installation, check how the watch face looks on the watch.

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 > Diy. Desktop > 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. 13

Attachment: Value of data_type DATA_TIME_SEPAR//Separator DATA_STEPS // Number of steps. DATA_BLUETOOTH_STATUS//Bluetooth DATA_CALORIE // Calorific value DATA_BATTERY//Battery DATA_HEARTRATE // Heart rate value DATA_BATTERT_CHARGING// Charging DATA_TEMPERATURE//Temperature DATA_DISTURB// Do not disturb DATA_DATE//Day DATA_TEMPERATURE_NULL//Temperature-DATA_BACKGROUND//Background DATA_TEMDOWNZERO//– 0 DATA_AMPM// AMPM DATA_TEMPERATURE_UNIT //Temperature unit DATA_MONTH//Month DATA_KCALICON// Heat icon DATA_WEEK//Week DATA_KCALUNIT // Heat unit DATA_WEATHERTYPE// Weather DATA_STEPICON// Step count icon DATA_HOUR_HIGH//10 th hour DATA_DISTANCEICON// Distance icon DATA_HOUR_LOW//Hour DATA_DISTANCE//Distance value DATA_MINITE_HIGH//10 -digit minute DATA_DISTANCESPOT//Distance decimal point DATA_MINITE_LOW//Minute bit DATA_DISTANCEUNIT//Distance unit DATA_UNREADMSG_STATE//Message DATA_HEARTICON//heart rate icon DATA_SWITCH_DIAL//Switch watch faces. DATA_CONSTELLATION_TYPE// Constellation background DATA_HEARTNULL// Heart rate-DATA_HEARTUNIT// Heart rate unit DATA_CONSTELLATION_BG // Constellation icon DATA_STEPUNIT//Step unit DATA_CONSTELLATION_TEXT// Constellation text DATA_BATTERYNUM//Indicates the battery level. information DATA_PERCENT//Percentage DATA_ANIMATION// Animation DATA_MONTH_EN// Month-Full image DATA_SEPAR//Separator For details, see the attachment in section 4. Value of data_type in the Widget Reference for Huawei Band. docx DATA_HOUR_PRICKER// Clock DATA_MIN_PRICKER//Minute hand DATA_SEC_PRICKER//Second hand 14

Example 1: digital watch face (1/6) Static image control Folders that reference images X coordinate of the upper left corner of an image. XML Description Y coordinate of the upper left corner of an image. Filter the background color of BMP file resources. Data Type Alignment mode: left alignment Offset of the Y axis Drawing Instructions Draw the background of the watch face: The background image in the A 000 folder is displayed from coordinate 0 in the x-coordinate system to coordinate 0 in the y-coordinate system. The picture is displayed without being zoomed in or out. Draw AMPM: From 26 and 20 in the x/y coordinate system, the AM/PM images in the A 002 folder are directly displayed without being zoomed in or out. Effect After Overlay 14398 15

Example 1: digital watch face (2/6) Digital image selection, time and number, date and number, and step count controls Folders that reference images X coordinate of the upper left corner of an image. XML Description Y coordinate of the upper left corner of an image. Alignment mode Number of digits to be displayed. Drawing Instructions Effect After Overlay 16 Draw hourly high-order bits: Use coordinates 16 and 43 in the x/y coordinate system as the start points. The system automatically reads the digital images in the folder based on the time and displays the hourly high-order bits. Digital image selection, time and number, date and number, and step count controls Folders that reference images X coordinate of the upper left corner of an image. Y coordinate of the upper left corner of an image. Alignment mode Number of digits to be displayed. Hourly low order: The system automatically reads the digital images in the folder based on the time from coordinates 61 and 43 in the x/y coordinate system and displays the hourly low order.

Example 1: digital watch face (3/6) Digital image selection, time and number, date and number, and step count controls XML Description Effect After Overlay 17 Folders that reference images X coordinate of the upper left corner of an image. Y coordinate of the upper left corner of an image. Alignment mode Number of digits to be displayed. Drawing Instructions Digital image selection, time and number, date and number, and step count controls High-order bits of the drawing minute: The system automatically reads the digital image in the folder based on the time from 16 and 106 in the x/y coordinate system and displays the high-order bits of the drawing minute. Alignment mode Number of digits to be displayed. The lower bits of the minute are drawn from coordinates 61 and 106 in the x/y coordinate system. The digital images in the folder are automatically read based on the time and displayed in the lower bits of the minute.

Example 1: digital watch face (4/6) Multi-component controls Folders that reference images X coordinate of the upper left corner of an image. Y coordinate of the upper left corner of an image. XML Description Data Type Alignment mode Number of multi-component controls Drawing Instructions Draw Month: Create a multi-component from 0 and 169 in the x/y coordinate system. The month, tilted rod, and day are displayed in center alignment mode. (The month code is used in this example. ) Effect After Overlay Six. 14398 18 40% Multi-component controls Folders that reference images X coordinate of the upper left corner of an image. Y coordinate of the upper left corner of an image. Data Type Alignment mode Number of multi-component controls Draw a slash: Create a multi-component from 0 and 169 in the x/y coordinate system. The month, tilt rod, and day image types are displayed in center alignment mode. (Here is the tilt rod code. )

Example 1: digital watch face (5/6) Multi-component controls Folders that reference images X coordinate of the upper left corner of an image. Y coordinate of the upper left corner of an image. XML Description Drawing Instructions Effect After Overlay 19 Data Type Alignment mode Number of multi-component controls Drawing date: Use 0 and 169 in the x/y coordinate system as the start points to create a multi-component. The month, tilted rod, and day are displayed in the center of the chart in alignment mode. (The date code is used in this example. ) Multi-component controls Folders that reference images X coordinate of the upper left corner of an image. Y coordinate of the upper left corner of an image. Data Type Number of multi-component controls Alignment mode Drawing step count icons: Create a multi-component from 0 204 in the x/y coordinate system. The step count icons and step count icons are displayed in the center of the image in alignment mode. (The step count icon code is used in this example. )

Example 1: digital watch face (6/6) Multi-component controls Folders that reference images X coordinate of the upper left corner of an image. Y coordinate of the upper left corner of an image. XML Description Data Type Number of multi-component controls Alignment mode Drawing Instructions Effect After Overlay 20 Draw Steps: Create a multi-component from 0 204 in the x/y coordinate system. The image types including the step count icon and step count are displayed in center alignment mode (step count code in this example).

Thank You