Skip to main content
Version: v3

Create a watch face

Here's a simple watch face, "Art Ideas-Hi", with the following effects:

Preparations​

  1. A computer with a browser is recommended for chrome
  2. Prepare the design resource. Resource .zip
  3. Go to the watch face maker interface. Complete developer registration, login according to the relevant tips on the page

Start​

1. Create a new watch face​

  1. Visit https://watchface.zepp.com
  2. Click the New button in the navigation bar at the top to jump to the creating page
  3. Enter the name of watch face in the creating page, select the watch face type, resolution（Device Resolution Information）, support language and other information, upload the preview images by support languages
  4. Click the Create button. When you're done creating, you'll be taken to the watch face details page.

create.png

2.Add a background picture​

  1. Click "Background" to select "Background" in the pop-up drop-down menu
  2. Tap the "Background" module that was just added to the left side of the screen
  3. Upload the background picture in the configuration panel on the right

addBg.png

3. Add heart rate​

  1. Select "Workout & Health" - "Heart Rate" and add the Heart Rate module
  2. Configure the Data Empty picture (the default picture that appears when the data is not available) and 10 digital tangents (0 - 9) in the configuration panel on the right
  3. You can see the display of the digital picture in the preview area of the center of the interface, adjusting the position of the picture to (110, 80) and alignment to center left and right

addHr.png

4. Add pointer time​

  1. Click "Time" to select "Pointer Time" in the pop-up drop-down menu
  2. Click "Pointer Time" - "Hour hand" in the left panel to add a time-hand picture (pointer/hour.png in footage) in the right-most configuration panel
  3. Enter the following coordinate information in the configuration panel on the right:
  • Center of watch face rotation - The center point of the entire watch face, the current watch face resolution is 454 x 454, so the center coordinate of the watch face rotation is (227, 227)
  • Pointer rotation center - the coordinates of the rotation point on the pointer picture, reference to the figure below can be seen that the pointer rotation center coordinates of the current pointer are (25, 227)

Similarly, we configure the minute hand and the second hand in turn, so that we can adjust the preview value of the minute and second hand when adjusting the panel on the right, with the following effect:

addPointer.png

5. Save the watch face​

Click the "Save" button on the page to save the current watch face configuration