[WIKI] ClockSkin Format

Disclaimer: This wiki page is not finished. Lots of “chinglish” text is clearly present, and is in need of correction.
Feel free to add any sections/information you consider important.

Instructions to create a custom ClocksSkin manually

A ClockSkin is divided into four parts:

  1. parse the file
  2. preview pictures
  3. specific images

The ClockSkin engine will create a dial by parsing the information from the clock_skin.xml file.

After configuration is complete, put the newly created folder into the “clockskin” folder on the watch memory.

(Important note: Dial configuration and rendering is done on the basis that the screen will have a resolution of 400x400 pixels. The software will automatically adapt it to the corresponding size. Our projects have different resolutions so use that as the standard screen resolution.)

The following image indicates how a dial (ClockSkin) folder looks like:

Configuration instructions of Dial:

The name of dial preview image is fixed as “clock_skin_model.png”. The beginning of dial resolved from “Clock_skin.xml”. As follows, first define image is first displayed in the bottom. For example, the background of current dial is called “ clock_skin_panel.png”. So the first definition as a background. The remaining elements of the design dial in accordance with the layers ordinal and successively draw on it can be. Specific properties can be configured, please check the Appendix“ Configuration property description of Dial”.

Configuration process of Dial:

image
!image

As an example to configure the dial as below:

  1. Create a new 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 design dial.

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

  3. Configuration as follows:

    3 - 5 rows as the background image,
    6 - 10 rows as the weather,
    11 - 16 rows as the heart rate image, namely the black :heart: pictures,
    17 - 22 rows as the heart rate,
    23 - 28 rows as the weeks
    29 - 34 rows as the date,
    35 - 39 rows as the time.

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

Appendix: Configuration property description of Dial

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

(Just add the required attributes, if not set the default value will be used):

Element name Meaning Default value Example
<name>day_array.xml</name> Image name can be a single image or “xml” configuration file, A “xml” file which is representative of a picture array. “xml” file can be used for animation (UL only) Indispensable
repeat attribute for name : <name repeat=”X”> X / 1000 (UL only)
<centerX>0</centerX> 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 configured
<centerY>0</centerY> 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
<rotate>1</rotate> 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
<mulrotate>3</mulrotate> With 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 configured Example 1
<angle>60</angle> With 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 configured Example 1
<direction>1</direction> Turn around, “1” is clockwise and “2” is anti-clockwise. Not configured, it defaults to clockwise. 1, may not be configured Example 1
<arraytype>2</arraytype> 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
<color>1</color> Charging color graphics default to white. Need black so that configured 1. Otherwise can not configure. 0, that is white Example 2
<colorarray>ff0000,000000</colorarray> Front made of bright colors and behind made of dark colors. The seconds of running be dedicated. may not be configured Example 3
<movement>X</movement> Special rotate animation (UL only), X can be : 1 : quartz 2 : quartz with overshoot 3 : elastic 4 : jump
<delay>X</delay> Is used to add an offset of X milliseconds to the current time. (UL only)
<framerate>10</framerate> Number of image per second (UL only) Default is 30
<frametime>0.212</frametime> Time per image in second (UL only) Default is 1/30
<hourFormat>X</hourFormat> Is used to force the time format, X can be (UL only): 0-11 1-12 0-23 0-24 Default watch hour format
<referenceTime year=”2012” month=”2” day=”20” hour=”22” minute=”12” second=”42”/> Is used to set the reference time for an animation. Each attribute is optional. (UL only) Default year is current one. Default month is 1, default day is 1, default hour is 0 , default minute is 0, default second is 0.
<animationStartDelay>X</ animationStartDelay> Is used to add a delay of X seconds to an animation. (UL only)
Rotate Index Description
0 Static images, no configuration is required
1 Hour hand rotate
2 Minute hand rotate
3 Second hand rotate
4 Month rotate
5 Week rotation angle
6 Power rotation angle
7 24 hours rotate (Hour hand as a 12-hour period)
8 Hour hand rotate shadow effect (with hour hand become a certain angle, superposed it to formation of shadow effect)
9 Minute hand rotate shadow effect (with hour hand become a certain angle, superposed it to formation of shadow effect)
10 Second hand rotate shadow effect (with hour hand become a certain angle, superposed it to formation of shadow effect)
20 Day hand rotate relative to 31 days.
101 Steps Target hand rotate relative to target steps (UL only ?)
Array Index Description
1 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.
2 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.
3 Month ( use 12 pictures point to 12 months, 1–12 )
4 Date ( use 10 pictures, 0-9 )
5 Week, 7 pictures, Sunday to Monday
6 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.
7 Hours (use 10 pictures, 0-9)
8 Minute (use 10 pictures, 0-9)
9 second (use 10 pictures, 0-9)
10 Weather, fixed 15 pictures. Image sequence can see
11 Temperature, 12 pictures. The 1st image to the 10th image configured as digits 0 to 9. The 11thimage configured negative sign. The 12th image configured unit.
12 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.
13 Last result of heart rate, 10 pictures, 0–9
14 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.
15 The second hand of running image. Walked as a color and not walked as another color. Please use the ff0000,000000 to configure color. The front is light colors and the behind is the dark colors. Please check the Example 3
16 Years (use 10 pictures, 0–9)
17 battery with circle (UL not supported)
18 Steps with circle (UL not supported)
19 Moon phase, 8 pictures, fixed sequence. Please check the picture sequence
24 Battery by image
54 Calorie, 4 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
60 Distance in the form xx.y
97 Text pedometer (UL not supported)
98 Text heartrate (UL not supported)
99 Rechargeable battery graphic. No need to configure the picture, as long as the coordinate position.
100 Touch circle defined using range.
1001 Same as 60 (UL only)
1002 Distance Unit (UL only) The 1st image is for kilometers, 2sd is for Miles
1011 Temperature Unit (UL only) The 1st image is for Celcius, 2sd is for Farenheit

Weather image sequence Note:

  1. Sunny Day 2. Daytime cloudy 3.Overcast 4. Fog 5. Drizzle 6. Showers 7. Thundershower

  2. Heavy rain 9. Snow 10. Sleet 11. High temperature 12. Low temperature 13. Wind

  3. Sunny in the night 15. Cloudy in the night

Image sequence description of moon phase:

  1. Crescent 2. Waxing Crescent 3. First quarter moon 4. waxing gibbous moon

  2. Full Moon 6. Waning gibbous moon 7. Last quarter moon 8. Waning Crescent

Example

Example 1:

image

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

Example 2:

image

If needed charging display charging graphics, only need to configure the position and color. An array as 99.

Image do not need to be configured, it’s defined in the launcher.

Example 3:

image

Peripheral red square is corresponding to the number of seconds. Though one second and add a red square.

Unnamed section
"direction" tag: The direction tag is a bit special. The clock_skin.xml file will be parsed from top to bottom. Once the ClockSkin engine finds a “direction” tag equal to 2, all the following values that need to be shown using a hand/needle (including the one just parsed) will be reversed and shown counter-clockwise. This will be maintained until the engine finds another “direction” equals 2 tag.
There are a few exceptions to this, so far the ones I (iscle) have found are: month hand, week-day hand. Adding a “direction” tag to those will lead to undefined behaviour (launcher-dependant).

11 Likes

This is a Wiki, you can edit this post to enrich it. Be careful with the markdown langage, this is not easy.

5 Likes