Position: Home >  News  
Instructions of DIY custom dial - NO.1 D5, NO.1 D6 watch face DIY
Date2016/7/1 17:14:59

Instructions of DIYcustom dial

Entire customdial divided into four parts.

Part 1: parsethe file,

Part 2: previewpictures,

Part 3: specificimages,

The system is tocreate a dial by parsing the information in the file. Afterconfiguration is complete, put the file into the files “ ClockSkin” of watch memory through the computer.That will be generated automatically dial.

( Important note:

Dial configuration isdone on the basis of 400x400. The software will automatically shrink thecorresponding proportion. Our projects have different resolutions so that the maximumscreen resolution as a benchmark. A project may also use other. )

Following a specificexample to illustrate how to configure the dial:

Configurationinstructions of Dial:

The name of dial preview image is fixed as “clock_skin_model.png”. Thebeginning of dial resolved from “ Clock_skin.xml”. As follows, first defineimage is first displayed in the bottom. For example, the background of currentdial is called “ clock_skin_panel.png”. So the first definition as abackground. The remainingelements of the design dial in accordance with the layers ordinal andsuccessively draw on it can be. Specificproperties can be configured, please check the Appendix“ Configurationproperty description of Dial”.

Configurationprocess of Dial:

As an example toconfigure the dial as below:

1. Create anew folder names can be named anything. We suggest the best start with “ClockSkin” and easy to follow-up management. For example, this dial is “ClockSkinP2”. And the “P” means “Picture”. That is our second image designdial.

2. Increase thepreview image, the name is fixed as “ clock_skin_model.png”.

3. Configurationas follows:

3--5 rows as the backgroundimage,

6--10rows as the weather,

11--16rows as the heart rate image, namely the black pictures,

17--22rows as the heart rate,

23 - 28rows as the weeks

29--34rows as the date,

35--39rows as the time.

4. Copy this folder to the “ClockSkin”folder of phone memory root directory. If you do not have this folder, youcan manually create. After placed in “ClockSkin” folder, you can come back dialinterface and press the dial to enter the selection interface. Then you can seethis dial.

Appendix: Configuration property description of Dial

Dial configured as apicture or an element configured to “ drawable”label. Each “drawable” label can be configured properties as follows.

(Just add therequired attributes, without is the default value):

Property name

Attribute  Meaning

Default  value



Image name can be a single image or “xml”  configuration file, A “xml” file which is representative of a picture array



X coordinate, and the center of the  screen as an origin. The center point was not configured

(Center point as  the standard 400x400 screen, that is the central point 200)

200, may not be



Y coordinate, and the center of the  screen is the origin, The center point was not configured

(Same as X)

200, may not be  configured


Hour and minute hands and other rotating  logo, see in particular explained as below “Roate Index Properties  Description”

0, that is static images.

May not be configured


With <rotate> match. Multiples of  normal rotation speed defaults to 1. As a positive number, then default  rotation speed multiplied configured values. As a negative number, then  default rotation speed divided by its absolute value.

1, may  not be


Example 1


With <rotate> match. Rotate  deviation angle. If the default start 0 degrees, now we need to start from 60°. So configured in  this.

0, may not be


Example 1


Turn around, “1” is clockwise and “2” is  anti-clockwise. Not configured, it defaults to clockwise.

1, may not be


Example 1


If the image is configured “xml”. That  can identify its specific type. See “Arraytype Index Properties Description”  as below

If you configure the xml, So  indispensable


Charging color graphics default to white.  Need black so that configured 1. Otherwise can not configure.

0, that is white

Example 2


Front made of bright colors and behind  made of dark colors. The seconds of running be dedicated.

may not be


Example 3

Rotate Index Properties  Description


Static images, no  configuration is required


Hour hand rotate


Minute hand  rotate


Second hand  rotate


Month rotate


Week rotation  angle


Power rotation  angle


24 hours rotate  (Hour hand as a 12-hour period)


Hour hand rotate shadow effect

(with hour hand become a certain  angle, superposed it to formation of shadow effect)


Minute hand  rotate shadow effect

(with hour hand  become a certain angle, superposed it to formation of shadow effect)


Second hand  rotate shadow effect

(with hour hand  become a certain angle, superposed it to formation of shadow effect)

Array Index Properties Description


Numeric date,  such as 2015-01-01. Using 11 pictures, the 1st image to the 10th image as  numbers 0 to 9. The 11th as the date segmentation map.


Numeric month and  date, such as 10-01. Using 11 pictures, the 1st image to the 10th  image as digits 0 to 9. The 11th as the month and date  segmentation map.


Month ( use 12  pictures point to 12 months, 1--12 )


Date ( use 10  pictures, 0-9 )


Week, 7 pictures,  Sunday to Monday


Digital time,  like 10:59 am. The 1st image to the 10th image  configured 0-9. The 11th image configured segmentation map. The 12th  image configured AM. The 13th image configured PM. If there is no  AM and PM can not configure. The configured of this combination center point  as the center point of numbers. If there is AM and PM, it will be  automatically added to the digital rear.


Hours ( use 10 pictures, 0-9 )


Minute ( use 10 pictures, 0-9 )


second ( use 10  pictures, 0-9 )


Weather, fixed 15  pictures. Image sequence can see <weather image  sequence description>


Temperature, 12  pictures. The 1st image to the 10th image configured as  digits 0 to 9. The 11th image configured negative sign. The 12th  image configured unit.


Step count, 5  digits. High as empty and then use special image. The 1st  image to the 10th image configured as digits 0 to 9. The 11th  image configured configured special image.


Last result of  heart rate, 10 pictures, 0--9


Power, 3 digits.  High as empty and then use special image. The 1st image to the 10th  image configured as digits 0 to 9. The 11th image configured  configured special image.


The second hand  of running image. Walked as a color and not walked as another color. Please  use the <colorarray> ff0000,000000 </ colorarray> to configure  color. The front is light colors and the behind is the dark colors. Please  check the Example 3


Years ( use 10  pictures, 0--9 )


Moon phase, 8  pictures, fixed sequence. Please check the picture sequence <Image sequence description of moon phase>


Rechargeable  battery graphic. No need to configure the picture, as long as the coordinate  position.

Weatherimage sequence Note:

1. Sunny Day2. Daytime cloudy3.Overcast4. Fog5. Drizzle6. Showers7. Thundershower

8. Heavy rain9. Snow10. Sleet11. High temperature12. Low temperature13. Wind

14. Sunny in the night15. Cloudy in the night

Image sequencedescription of moon phase:

1. Crescent2. Waxing Crescent3. First quarter moon4. waxing gibbous moon

5. Full Moon6. Waning gibbous moon7. Last quarter moon8. Waning Crescent


Example 1:

Similar multi-gear dial. Angle of rotation anddirections of each gear in different. You can use mulrotate, angle anddirection to achieve a different direction and rotate angle of the gear.

Example 2:

Ifneeded charging display charging graphics, only need to configure the positionand color. An array as 99.

Image do not need to configured, because the system isbuilt.

Example 3:

Peripheral redsquare is corresponding number of seconds. Though one second and add a redsquare.