Gear Watch Designer

Overview

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

Figure 1 The Final Watch Face

Requirements

The following needs to be installed prior to development

  • Gear Watch Designer Application

  • Watch Application Assets

    • 360x360 Background Image

    • Watch Hand Images

    • Battery Images

Testing

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

Step 1. Preparing the Area

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

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.

Step 2. Placing the Background

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

Figure 3 Selecting the Background

Select the preferred Background image.

Note

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.

Step 3. Setting the Watch Hands

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

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

Figure 5 Rotation Synchronization Options

d. Repeat the steps for the Minute and Second hands.

Figure 6 Setting the Minute and Second Hands

Figure 6 Setting the Minute and Second Hands

Step 4. Setting the Digital Clock

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

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.

Note

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

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

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

Figure 10 Appearance Settings

f. Type in the “4FFF79” in the “#” entry and click OK

Figure 11 Color Picker Window

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:

  • Type

    • Digital Clock: m

  • Placement

    • X: 86px

    • Y: 176px

  • Appearance

    • Font: 93

    • Color: #16A7FF

Figure 12 Digital Clock Minute Settings

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

Figure 13 Digital Clock Preview

Step 5. Display the Date

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:

  • Type

    • Digital Clock: E

  • Placement

    • X: 165px

    • Y: 130px

  • Appearance

    • Font: 20

    • Color: #06FFFC

Figure 14 Day of the Week Settings

Figure 14 Day of the Week Settings

b. Add another digital clock and use the settings below for the day of the month:

  • Type

    • Digital Clock: dd

  • Placement

    • X: 165px

    • Y: 160px

  • Appearance

    • Font: 32

    • Color: #02FAFF

Figure 15 Day of the Month Settings

Figure 15 Day of the Month Settings

Step 6. Create Battery Meter

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

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

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

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

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

Figure 20 Completed Battery Condition

Step 7. Test Design

Testing in the Emulator

You can test the watch face by clicking the “Run” button on the top right corner.

Figure 21 Run Button

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

Figure 22 Watch face time simulation

Testing in the Gear S2

To test in an actual device like the Gear S2, please check the following settings:

  • Bluetooth: Off

  • 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:

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

    Figure 23 Build Project window

  2. Run on Device

    Click the “Run on Device” button on the toolbar to the right and choose your device.

    Figure 24 Run on Device

    Figure 24 Run on Device

    A window will show the install and launch progress

    Figure 25 Install and Launch Progress

    Figure 25 Install and Launch Progress

Step 8. Applying for the Author and Distributor Certificates

Author Certificate

The Author Certificate is required before you can build your project as the TPK package to be generated after building will include it.

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

    Figure 26 The Author Certificate Generation Window

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

    Figure 27 New Author Certificate Information

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

    Figure 28 Samsung Account Sign-in

  4. After a successful sign in, you now have an author certificate.

    Figure 29 Successfully Generated Author Certificate

    Figure 29 Successfully Generated Author Certificate

Distributor 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

Note

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

Figure 30 Run on Device button in the Toolbar

Once your device is in the list, you can now register for a Distributor Certificate.

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

  2. Sign in to your Samsung Account.

    Figure 31 Distributor Certificate Window

    Figure 31 Distributor Certificate Window

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

    Figure 32 Completed Distributed Certificate Registration

Next
Next article does not exist