The Gear Watch Designer is a simple one-stop shop for visual designers who are looking to produce and distribute their own watch face designs for the Gear S2. This document will be your guide in making your own simple Watch Face using the Gear Watch Designer.
Figure 1 The Final Watch Face
The following needs to be installed prior to development
Gear Watch Designer Application
Watch Application Assets
360x360 Background Image
Watch Hand Images
Samsung Gear S2 (Optional)*
*Building and Testing on a Samsung Gear S2 will require author and distributor certificates, both of which can be created inside the Gear Watch Designer application’s Project menu. The Author Certificate allows you to build a TPK package which can be tested on a device. The Distributor Certificate lets you install and test your TPK package on a test device. Both certificates need a Samsung Account.
a. Open the Gear Watch Designer.
b. In the “New Project” window, press the “New” icon on the top most options.
c. Enter the Project Name, and then click "OK".
Figure 2 New Project Window
Below are the possible options in the New Project window(Figure 2):
Sample - shows all preset projects within the Gear Watch Designer. These projects can be loaded and modified to serve as a template for building new projects.
My Project - lists all the projects you created.
New - lets you create a watch face from a blank project and also set its location.
a. Click the "Background" icon in the "Component" panel on the left side to display all images available for selection.
Figure 3 Selecting the Background
Select the preferred Background image.
To add your custom images to the preset images included in the Gear Watch Designer, add your images to the following folder: C:\Program Files (x86)\GearWatchDesigner\res\
Inside the “res” folder are five image subfolders: animation, background, complications, hands and index. These subfolders hold the preset images for its corresponding watch component. You can copy and paste your image assets to these folders so that it will be selectable in the Gear Watch Designer options. You can also create a folder called “image” to hold any generic image you plan to use.
There are 3 types of Watch Hands – hour, minute, and second. We will need to load each hand and synchronize it to its corresponding time separately.
a. Click the “Watch Hand” icon to show the available images for the Watch Hand.
b. Select the image for the Hour hand first.
Figure 4 Selecting the Watch Hand Image
c. In “Rotation Properties” under the “Properties” panel displayed on the right, click “Sync with” and select “Hour” on the list.
Figure 5 Rotation Synchronization Options
d. Repeat the steps for the Minute and Second hands.
Figure 6 Setting the Minute and Second Hands
a. Click the “Digital Clock” at the “Component” panel. The digital clock will be automatically added to the watch face with the default hour-minute-second format.
Figure 7 Default Digital Clock Format
b. Go to the “Type” section of the “Properties” panel and click on the “Digital clock” entry.
c. Click “More” to list other options then find and select “hour in day” type to set the Digital Clock to Hour in 24 hour format.
The “Digital Clock” type can also be changed by typing the corresponding “Symbol” in the Digital Clock entry box. In this example, type “H” to set the digital clock to “hour in day”
Figure 8 Digital Clock Type Settings
d. In the “Placement” section in the “Properties” panel, set the “X” to 86px and “Y” to 93px
Figure 9 Placement Settings
e. In the “Appearance” section in the “Properties” panel, set the font size to 93 then click on the Color Preview to open the “Color Picker” Window.
Figure 10 Appearance Settings
f. Type in the “4FFF79” in the “#” entry and click OK
Figure 11 Color Picker Window
g. Do similar steps to create a digital clock to display the Minutes. Use the following. settings in the “Property” panel:
Digital Clock: m
Figure 12 Digital Clock Minute Settings
After all the steps for the Hour and Minute digital clocks are done, the preview window will display the watch face below:
Figure 13 Digital Clock Preview
We can add a date display to the watch face using similar steps in adding a digital clock. For this section, we will add digital displays for the day of the week and day of the month.
a. Click the “Digital Clock” at the “Component” panel and use the setting below to add the display for the day of the week:
Digital Clock: E
Figure 14 Day of the Week Settings
b. Add another digital clock and use the settings below for the day of the month:
Digital Clock: dd
Figure 15 Day of the Month Settings
We can add more complications like the battery meter to help the user watch his or her usage of the device. In this example, we’ll be using a series of images to show the amount of battery left.
a. Click on the “Image” component on the left hand side of the window and open all the images imported to the “Image” folder earlier.
Figure 16 Image Open Dialog
b. Go into detail with the battery meter by clicking the plus (+) button beside Timeline to see the battery conditions ranging from 0% to 100%.
Figure 17 Adding the Battery Conditions
c. For all the added images, click and drag on any part of the battery meter’s timeline to select, right click it, and choose "Activate". When a notice is shown, just click "Yes". This will activate the needed layers for the battery meter as it changes over time.
Figure 18 Activate the Battery images
d. Hide all the other elements besides Image6 and Image7 by clicking and dragging on their timeline and click “Hide”
Figure 19 Hide All the other layers
e. Show the images following the given criteria by clicking and dragging, right click, then click “Show”.
Image0 = 0% to 19%
Image1 & Image2 = 20% to 100%
Image3 = 40% to 100%
Image4 = 60% to 100%
Image5 = 80% to 100%
Image8 = 20% to 99%
Image9 = 100%
Image10 = 0% to 19%
The result may look similar to the image below. You can test by dragging the blue bar around.
Figure 20 Completed Battery Condition
You can test the watch face by clicking the “Run” button on the top right corner.
Figure 21 Run Button
You can test if the Hour/minute/second hands and digital clock work correctly by moving the Time slide bar. The time is reflected live. The battery meter can also be tested by dragging the battery slide bar around. To change the date, click on the Text tab and drag around the year, month, and day sliders to test.
Figure 22 Watch face time simulation
To test in an actual device like the Gear S2, please check the following settings:
Debugging Feature: On
Wi-Fi: connect to the same network as your PC
Once the settings have been set properly in your device, follow these steps:
Build the Project
Click “Project” in the menu and click “Build”. You can also press F10 on your keyboard. A window will give you options to configure your build such as the project name, version, security level, and label. When you’re okay with the configuration, click “Build”
Figure 23 Build Project window
Run on Device
Click the “Run on Device” button on the toolbar to the right and choose your device.
Figure 24 Run on Device
A window will show the install and launch progress
Figure 25 Install and Launch Progress
The Author Certificate is required before you can build your project as the TPK package to be generated after building will include it.
Go to the Project menu and click “Author Certificate”. In the new window, click “Generate a new certificate signing request” and then click Next.
Figure 26 The Author Certificate Generation Window
In the “Your Info” page of the window, add details for the name, password, and password confirmation fields. You may optionally add details for the country, state, city, organization, and department fields.
Figure 27 New Author Certificate Information
Sign in to your Samsung Account to authenticate the newly generated CSR file. You can also Create a New Account if you don’t have one yet.
Figure 28 Samsung Account Sign-in
After a successful sign in, you now have an author certificate.
Figure 29 Successfully Generated Author Certificate
The Distributor Certificate is needed if you would like to test on an actual Samsung Gear S2 device. Before you can test, you need to make sure of the following settings on your wearable device:
Settings > Gear Info > Debugging: On
Settings > Connections > Bluetooth: Off
Settings > Connections > Wi-Fi: On
The Gear S2 must be connected on the same wireless network as your PC.
To check if your Gear S2 is visible on the Gear Watch Designer, click the “Run on device” button in the toolbar to see if it is connected.
Figure 30 Run on Device button in the Toolbar
Once your device is in the list, you can now register for a Distributor Certificate.
Go to the Project menu and click on Distributor Certificate. A window will open showing the Connected Device ID and Samsung Account page. If your Gear S2 was detected from the setup earlier, its device ID should show up in the Connected Device ID field.
Sign in to your Samsung Account.
Figure 31 Distributor Certificate Window
Once you have successfully signed in, it will let you know that your device has been successfully registered. You can now install and test on your registered Gear S2.
Figure 32 Completed Distributed Certificate Registration