Development ENKRCN

1. Overview

Overview

The Gear Watch Designer interface should be instantly familiar to those who have used modern design tools. Just arrange your screen by dragging and dropping, then let your creativity flow.

Overview
A. Component

Add as many different components as you like to your watch face.
For some components, you can even use a customized design source.

For example,
bring the heart rate or step count data to the forefront with the Text tool,
or add an image to launch a particular app.

bring the heart rate or step count data to the forefront with the Text tool, or add an image to launch a particular app.
B. Preview

Change the position of your design elements, or add new ones by dragging and dropping components from the Resource pane.

C. Properties

Each component has a corresponding range of properties that you can amend and tweak as you like.

For example, you can change the color of the numbers on a digital clock, or choose whether the watch hands measure hours, minutes, or seconds.

For example, you can change the color of the numbers on a digital clock, or choose whether the watch hands measure hours, minutes, or seconds.
D. Resources

You can import many different types of files (JPG, PNG, fonts, etc.) to use as components. Use the [+] button to import fonts, and keep your components organized in different folders.

You can import many different types of file (JPG, PNG, fonts, etc.) to use as components.
E. Layer

Manage, order, or remove any layer image on your watch face.

F. Conditional lines

Make your designs more dynamic with components that change their appearance depending on certain conditions. These conditions could include the time of day, number of daily steps, battery status, and more.

You can show or hide objects in the preview by choosing show or hide in the appropriate frames.

The time of day is set as the default condition. For example, your watch face can be bright during the day then gradually darken as it gets later. You can set the scale of the timeline to be measured in minutes or seconds.

2. Designing a clock - Analog clock

Create an analog watch in three simple steps.

Create an analog watch in three simple steps

Step 1. Select a background image
Pick a background image provided by the Gear Watch Designer, or use a custom one*.

Step 2. Add an index
Select the range and bar count from Properties to automatically create an index.

Step 3. Add a watch hands
Pick the length, thickness, and sync source of the hour/minute/second hands.
To change the pivot point, right-click on it and select Show Pivot.

Drag and drop the watch hands wherever you like. You can also change the range of rotation.

Images created elsewhere will be saved as a PNG file.

* Images created elsewhere will be saved as a PNG file.

Tip

As well as hours/minutes/seconds, you can set the hands to show other things like the battery level and step count.

Tip

You can also select an animated background image.

2. Designing a clock - Digital clock

For a more modern design, a digital clock is easy to create too.

For a more modern design, a digital clock is easy to create too.

Step 1. Select a background image
Pick a background image provided by the Gear Watch Designer, or use a custom one*.

Step 2. Add a digital clock

Step 3. Set up your digital clock
Choose a 12-hour or 24-hour format, then decide how the date is shown.
Click More > to format the date and time for a different country or region. Take a look at the ICU format documentation for more details.

For a more modern design, a digital clock is easy to create too.
Use fonts

Step 4. Use fonts

You can add different fonts to Resources as Truetype fonts, or a custom image as
a bitmap font.

Click 1Open Bitmap font settings.

Click 2Load an image to replace numbers or symbols.

3. Conditional lines - Time

Watch faces can be designed to change depending on certain conditions, such as the time, step count, and date using conditional lines.

Watch faces can be designed to change depending on certain conditions, such as time, step count and date using the Conditional line.

Morning - Afternoon - Evening

Step 1. Create layers
Create three background image layers.

Create some time periods, Hide layers

Step 2. Create some time periods
Set time periods to control when each layer is displayed.
First, select the starting frame, then the time range.
Drag 1-2Drag from the start frame to the end frame.

Step 3. Hide layers
Right Click 3, 4Right-click the frame area, then click Hide.

Click on the Scale button to change the time measurement units.
Tip

Click the Scale button to change the time measurement units.

Show other layers, Play

Step 4. Show other layers
Show other layers in the same way.

Step 5. Play
Press play to preview your changes.

Watch faces can be designed to change depending on certain conditions, such as time, step count and date using the Conditional line.

Watch faces can be designed to change depending on certain conditions,such as time, step count, and date using conditional lines.
Right Click 5Right-click on the frame area.
Click 6Select show.

3. Conditional lines - Step count

Watch faces can also change according to step count.

Watch faces can also change according to step count.

Changes according to the step goal
Creating a watch face that changes according to the percentage of daily steps achieved is easy.

Step 1. Change the condition
Add Steps to the Conditional lines.

Step 2. Activate layers, Step 3. Show or hide layers

Step 2. Activate the layers
Right click 1Right-click a frame area, then click Activate.
A layer will only change according to the step count from the moment it is activated.

Step 3. Show or hide layers
Show or hide layers as illustrated in the previous steps.

Step 3. Show or hide layers
Tip

Each layer only monitors one type of condition at a time. If a layer is activated to change according to step count, any existing monitoring of another condition will stop.

3. Conditional lines – 12-hour and 24-hour versions

Show different watch faces based on the setting chosen on the user’s phone.

Watch faces can also change according to step count.

Changes according to the time format set on the user’s phone
You can show different watch faces for the 12-hour and 24-hour versions.

Step 1. Prepare 2 digital clock components
One 12-hour version and one 24-hour version.
Place them in the same position.

Watch faces can also change according to step count.

Step 2. Change the condition
Add 12H/24H to the conditional lines

Step 3. Active layers
Right click 1Right-click a frame area and select Activate.
A layer will change the time format from the time it is activated

condition 바꾸기, 비활성화 상태의 Layer를 Activate 해 주기

Step 4. Show or hide layer

Only show the digital clock for 12-hour layer in the 12-hour format, and show
the other layers in the 24-hour format.

Tip

You can change the layer name by double clicking the name field and entering a new name.

Tip

You can handle distance units (km/miles) in the same way.

3. Conditional lines – Loop

Conditional lines let you show and hide components on watch face and control their behavior.
For example, you can change the background every second.

Watch faces can also change according to step count.

Changing the background every second
In this example, 5 background images are used and they
are shown and hidden respectively every second.

Step 1. Place 5 background images
Use 5 different background images

Note

To show the sequence from beginning to end, start it from 00:00:00. Otherwise, the sequence won’t be shown before the selected point.

Watch faces can also change according to step count.

Step 2. Set the layers that you want to show and hide each second

Step 3. Repeat the cycle
Right Click 1Open context popup and select Loop. Set loop for each layers.

4. Adding animations - PNG sequences

Make a more vibrant design by adding animations.

Put your own spin on a watch face, Step 1. Create an animation source

Put your own spin on a watch face

Step 1. Create an animation source
Create your own PNG sequence animation with a design program like Adobe Flash or Premier.

Step 2. Import an animation, Step 3. Create a smart component*

Step 2. Import an animation

Click 1When the animation is clicked, you will see a file select dialog.

Drag all or multi select 2Select the files to include in the PNG sequence.

Click 3Click Open.

Step 3. Create a smart component*
If your files are a PNG sequence, a new layer will automatically be created as a smart component.

Click 4Click Yes to import the sequence as a smart component.

* Smart components let you associate additional actions with objects. You can specify actions based on conditions.

Step 4. Change the smart component conditions, Step 5. Play

Step 4. Change the smart component conditions

The PNG images will be added as individual layers in an ordered timeline.
You can edit the animations by showing or hiding them, or by changing the length of time a frame displays for.

Step 5. Play

Run the animation to see it in action.

5. Always-on states

Always-on states are designed to display the time information with ultra-low power consumption.
The Gear Watch Designer automatically generates an Always-on version of your watch face.

Because the Always-on state is set as low power mode, there is restriction to represent the color.
Samsung recommends a design that uses no more than 15% of the available pixels in always-on states.
If your watch faces use more than that, they will be rejected.
If an Always-on version of your watch face is not created, a default version will be displayed.

For more detail on designing and developing Always-on states watch face, see the Home structure > Watch Face.

Note

Gear Watch Designer is now checking the Always-on states when it starts to build.
If it uses more than 15% of the available pixels in Always-on states, build process is suspended.
If it exceeds 15% temporarily, the watch face could be built. However, the store registration can be rejected during the quality verification process or it can be canceled by the user complaints even if the watch face was built.

Always-on mode 1
Always-on mode 2

Step 1. Create an Always-on version automatically

Click the always-on state button to generate an Always-on version of your watch face automatically.

Click 1Turn on Always-on mode

There are two different color schemes - Low-bit color and high color.

In low-bit color, the always-on state only uses cyan, magenta, yellow, red, green, blue and white at full brightness. Gray scales and gradients cannot be used.

In high color, there are no color limitations so the corresponding active versions of your watch face can be replicated more closely. High color always-on states are only available for Gear S3 or newer devices.

Step 2. Change the design, Step 3. Switch back to active view

Step 2. Change the design

Gear Watch Designer will initially generate both a low-bit color and high color version of your always-on state automatically. You can use these versions in the final product, or modify them if they’re not suitable.

You can also design your own always-on watch face with a limited number of features and functions.

Step 3. Switch back to active view

Once you’re happy with your Always-on watch face, continue with the rest of your design by switching back to active mode.

6. Adding complications

Enhance your watch faces by adding a variety of information.
Tapping on a complication lets users run apps directly from their watch face.

Adding complications 1
Adding complications 2

Step 1. Position the complication background

Decide where you want to position your complication.

Tip

Adding backgrounds for all your complications isn't necessary. In this example, a background is used as a start for creating a complication. You can create complications for any component, like hands, indexes, and other elements.

Step 2. Decorate the complication

Add some hands and an index to the complication. In this example, the complication will show the battery level.

2. IndexGo to Component > Index

3. HandsAdd some hands, then go to Properties > Sync to > Battery %. Set rotation to 1.

* You can decorate complications in many other ways.
For example, a battery level can be displayed in digits, and warning messages can be displayed when the battery level falls below 20%.

Step 3. Make an interactive complication

The complication now shows the current battery level. Next, let’s make this complication a button that can open the Battery app.

Adding complications 3

Step 4. Make the complication a button

Click 1Open the settings menu

Click 2Select Set as button

The complication is now a button, and you can change its properties.

Tip

Any component of a complication can be a button. We recommend using components which cover the entire area of the complication, like a background. If it does not cover the entire complication area, use a transparent component positioned to cover the complication as a button.

Step 5. Edit the button properties

Once a component is set as a button, you will see two new tabs in Properties: Normal and Action.

Normal controls a component’s properties when it is not being used. Action controls a component’s properties when it is tapped.

Adding complications 4

Step 6. Set Action behavior

Decide what you want your new button to do when it is tapped.In this example, the Battery app will open.

Click 1Show the list of apps from the drop-down menu.

Click 2Select the app that you want to open when the button is tapped.

Tip

You can make a component’s image change when you tap it. Select ‘Change image’ from the drop-down menu to add a maximum of 6 images.

Step 7. Complication complete

Your complication is now complete.
It will show the current battery level. When tapped, the Battery app will open.

Tip

There are a number of complication templates in the Gear Watch Designer. You can use these as a basis to create your own designs.

7. Groups

Manage all your Gear Watch Designer objects with a new grouping feature.
Group multiple objects together, and control them as one object.

Adding complications 1

Step 1. Select multiple objects
Select two or more objects.

Step 2. Create a control box for each one
Functions like Multi-select. Delete, Copy, and Move are available.

Step 3. Make a group
Multiple objects are combined in one group object. Each group object will have one control box and the pivot point of each group object will initially be located at the center.
* Ctrl+G (Group)
* Ctrl+shift+G (Ungroup)

8. Dynamic watch faces (Gyro)

There’s now a new way to add a bit of movement to your watch face that’ll make your design stand out from the rest.

Adding complications 1

Gyro Effect
Add Gyro effects to your watch face and see how it moves and changes appearance as users tilt their Gears.

The aspects of watch face components that you can change include size, position, rotation and opacity.

<The Gear Gyroscope >

Adding complications 1

A Gyro effect is applied when a Gear is tilted at an angle within the -90º to 90º range along the X and Y axes.

Watch faces can also change appearance when a Gear is moved clockwise or counter clockwise

Adding complications 1

-90 º is the maximum angle that a Gear can tilt upwards.

90° is the maximum angle that a Gear can tilt downwards along the Y axis.

Adding complications 1

The X axis runs horizontally. A Gear can tilt left along this axis to a maximum of -90°.

It can also tilt right up to a maximum of 90°.

Adding complications 1

When the Gear is laid flat with no tilt in any direction
(0º along both the X and Y axes), the dimension values of the watch face are at 100%.
(Case ①) Any movement downwards or to the right will incrementally increase this percentage up to a maximum of 200%.
Any movement upwards or to the left will decrease this percentage down to a minimum of 0%.

In the example above:
② If the Gear is tilted -90º along the X axis and -90º along the Y axis, the watch face will shrink and disappear from the screen (0%).
③ If the Gear is tilted 90º along the X axis and 90º along the Y axis, the watch face will double in size on the screen (200%).
④ If the Gear is tilted upwards at -45º and to the right at 45º, the positive and negative values will cancel each other out. This means that the dimensions of the watch face will be the same as they are when the Gear is laid flat (100%).
⑤ If the X direction is 45 º, the Y direction is 45 º, or the X direction is -45 º the Y direction is -45 º, the two forces appeared together.

9. Weather

Weather contents is provided by OpenWeatherMap

Adding complications 1
Adding complications 1

Step 1. Get an API key
Before you can add weather data to your watch face, you’ll need an API key.
Go to https://home.openweathermap.org/ and create an account to get a free API key.
You can also buy a paid plans.

Note

To use OpenWeatherMap API, you must follow the service provider’s Terms and Conditions.

Adding complications 1

Step 2. Enter your API key

In the Gear Watch Designer, go to Edit > Preferences > APIs
and enter your API key in the Weather input field.

Step 3. Apply the weather data

Once your API key is activated, you can use the weather data in your watch face.

Tip

The .gwd file itself doesn’t contain the API key, so sharing the .gwd file doesn’t guarantee that weather data will be displayed correctly.

10. Trial periods

Trial periods let users try out your watch face for free before they buy it.

Adding complications 1

*To add a free trial period to your watch face, you’ll need to change a few settings first.

Adding complications 1

To add a free trial period to your watch face, you’ll need to change a few settings first.

Adding complications 1

Step 1. Edit the In App Purchase settings
1. Click the In App Purchase settings button on the toolbar.
2. Select Enable In App Purchase.
3. Select what happens when a trial expires in the Options menu.
4. Set the duration of the trial period (at least 1 minute).
5. Click OK.

Step 2. Edit the IAP Test settings
Change the IAP Test mode to Commercial, then upload your watch face to Galaxy Apps.

* If you’re selling your watch face in Galaxy Apps, you’ll need to add some additional info about the trial period before it becomes available for sale. For more details, see the Uploading section.