Digital Watch Faces

The simplest watch faces to create are digital watch faces, which feature numeric readouts with HH : MM : SS for hours, minutes, and seconds along with a date and possibly a stopwatch or timer readout. These digital readouts use a digital font in most instances and must be placed on the screen in an attractive location (usually centered) and may show some other watch features, such as steps, heart rate, weather, battery power, day of week, date in month, and so forth. These watch faces are easier to create, due to the lack of radial elements and calculations which pivot from the center of the screen and array themselves around the round watch face, such as is found on the 360 by 360 resolution Galaxy Watch, Gear S2, S3, and Sport models. Arraying analog elements around rectangular watch faces (Gear S or Gear Fit 2) is difficult, as the design becomes somewhat asymmetrical, due to the top and the corners being farther away than the sides.

Launch Galaxy Watch Designer and you will be presented with the New Project dialog. If you are not (i.e., if you have un-checked “Show on application start”), then use the File➤ New menu sequence to open this dialog, which can be seen in Figure 3-1. Select the New Project (top-right icon), the Gear S2, Gear S3, Gear Sport, and Galaxy Watch 360 x 360 option (middle-left icon), and then name the project CH3_Digital_Watch_Face (or My_Digital_Watch_Face if you prefer), and click the OK button to create an empty project and open Galaxy Watch Designer on your Windows 10 or MacOS workstation.

Click the Digital Clock icon in the Component panel on the left-hand side of the Galaxy Watch Designer software. This can be seen encircled in red in Figure 3-2. A Digital Clock display will be displayed in the center of your watch face in the Preview area, with properties in the Properties panel on the right of the preview which you can adjust to get the result that you desire for your new digital watch face design.

Some of the panels in the Galaxy Watch Designer can contain quite a bit of information and settings, so let’s learn how to scroll these panel properties so you can be sure to access everything during your watch face development process. Put your mouse in or over the pane, and use the middle mouse button scroll wheel to move the panel info up and down. You may need to click (but not on a setting) to show where you want the scrolling to occur. Try it out, you’ll get the hang of it soon enough! As you can see in Figure 3-3, I have exposed the other half of the properties for the Digital Clock Component, and as you’ll see, there are some very advanced features available, which we will be covering a bit later on in this book, as we become more advanced designers!

Next, let’s take a look at how we would design an Analog Watch Face using your Galaxy Watch Designer software, which will take more steps as Analog Watch Faces have considerably more components to add to the watch face design than digital watch faces have.

Analog Watch Faces

Let’s design an Analog watch face and see exactly what is involved and learn more about GWD. Launch Galaxy Watch Designer and you will be presented with the New Project dialog. If you are not (i.e., if you have unchecked “Show on application start”), then use the File ➤New menu sequence to open this dialog, which can be seen in Figure 3-1. Select the New Project (top-right icon), the Gear S2, Gear S3, Gear Sport, and Galaxy Watch 360 x 360 option (middle-left icon), and then name the project CH3_Analog_Watch_Face (or My_Analog_Watch_Face if you prefer), and click the OK button to create an empty project and open Galaxy Watch Designer on your Windows 10 or MacOS workstation.

Click the Background icon in the Component panel on the left-hand side of the Galaxy Watch Designer software. This can be seen encircled in red in Figure 3-5. An Analog Clock background menu will be displayed on the left side of the watch face in the Preview area, with properties next to the Component panel on the left side of the preview. As you select Background assets provided with Galaxy Watch Designer, you will see a preview of the asset pop-up on the right of the menu item. I selected blue ch_bg_a_01, as I wanted to use white watch face design elements (other than a red second hand), and I wanted to have enough contrast (the difference between dark and light), for better readability.

Click the Index icon, in the Component panel, on the left-hand side of the Galaxy Watch Designer software. This can be seen encircled in red in Figure 3-6. An Analog Clock indices menu will be displayed on the left side of your watch face in the Preview area, with properties next to the Component panel on the left side of the preview. As you select Index assets provided with the Galaxy Watch Designer, you will see the preview of each index asset pop-up on the right of each menu item. I selected 360_modern, as I wanted to use a modern watch face design, and this option has large readable numbers and large lines (“ticks”) as well around the perimeter.

Once you select the Index to use, the Galaxy Watch Designer will place it over the Background you selected, which can be better in the next screenshot in the series (Figure 3-7) if you wanted to look ahead. We will start to add Watch Hand Components next, which is what will be shown in that screenshot, which shows what the index will look like over the blue background color, and ultimately, it looks fairly readable from what I can ascertain.

Once you select an index to use, you will see the Properties (or Options) for that design component populate the Properties panel, and at the same time, the index you selected will be overlaid on top of the background you selected in the Preview area.

In this Analog Watch Face design section, this will be shown in the next screenshot (Figure 3-7) for this series of screens.

The next step, shown in Figure 3-7, is to click the Watch Hand icon, seen encircled in red in the Component panel, and select the classic_sec (classic second hand) watch hand design element from the drop-down menu, which will contain (you guessed it) different types of Watch Hands! This includes Hour, Minute, and Second Hands, which are key components of Analog Watch Face design.

As you can see in Figure 3-7, the classic second hand is red and slim and, as we will learn later on, saves power and screen burn-in due to its sparing use of pixels and bright colors.

Also, as you add watch face design elements (Components), notice that they are added to the Timeline panel as layers in your watch face design compositing pipeline that Galaxy Watch Design processes.

Once you select a second hand to use, you’ll see the Properties (or Options) for that design component populate the Properties panel, and at the same time, the second hand you selected will be overlaid on top of the background and index that you selected in the Preview area.

In this Analog Watch Face design section, this will be shown in the next screenshot (Figure 3-8) for this series of screens.

The next step, shown in Figure 3-8, is to again click the Watch Hand icon, seen encircled in red in the Component panel, and select gentle_min (a gentle minute hand, not a gentleman) watch hand design element from the Watch Hands drop-down menu. Now we have our (not Hour) Minute and Second Hands, which are key components of Analog Watch Face design. We only have to add our Hour Hand, and we’ll be ready to add a day of the month display.

As you can see in Figure 3-8, the gentle minute hand is white and hollow and, as we will learn later on, saves power and screen burn-in due to its sparing use of pixels. Notice that we now have three layers of watch face design components in the Timeline pane on the lower left of the Galaxy Watch Designer software user interface.

Once you select a minute hand to use, you’ll see the Properties (or Options) for that design component populate the Properties panel, and at the same time the minute hand you selected will be overlaid on top of the background, index, and second hand you selected.

In this Analog Watch Face design section, this will be shown in the next screenshot (Figure 3-9) for this series of screens.

The next step, shown in Figure 3-9, is to again click the Watch Hand icon, seen encircled in red in the Component panel, and select the gentle_hr (a gentle hour hand) watch hand design element from the Watch Hand drop-down menu. Now we have Hour, Minute, and Second Hands, which are key components of Analog Watch Face design. Now we only have to add our day of the month display.

As you can see in Figure 3-9, the gentle hour hand is white and hollow and, as we will learn later on, saves power and screen burn-in due to its sparing use of pixels. Notice that we now have four layers of watch face design components in the Timeline pane on the lower left of the Galaxy Watch Designer software user interface.

Once you select an hour hand to use, you’ll see the Properties (or Options) for that design component populate the Properties panel, and at the same time, the hour hand you selected will be overlaid on top of the background, index, and minute and second hands you selected.

In this Analog Watch Face design section, this will be seen in the next screenshot (Figure 3-10) for this series of screens.

The next step, shown in Figure 3-10, is to click the Complications icon, seen encircled in red in the Component panel, and select the Date_Digital_A (Digital Date Box) watch face design element from the Complications drop-down menu. Now we have a Date Box as well as Hour, Minute, and Second Hands, which are key components of Analog Watch Face design. Now we will only have to position this Date Box on the display, next to the 3, on the right side.

As you can see in Figure 3-10, the Date Box is Black, and as we will learn later on, this saves power and screen burn-in due to its sparing use of bright pixels (only a few white pixels for the number). Notice we now have five layers of watch face design components in the Timeline pane on the lower left in the Galaxy Watch Designer software.

Figure 3-11 shows that we can drag and drop any watch face component (watch face design element) around the Preview area to position it within our design – in this case, an Analog Watch Face design. The Galaxy Watch Designer software has automatic “snap-to-grid” features and also adds magenta guidelines in both the X and Y dimensions to show designers what their design components are going to line up with. This is a pretty cool and useful feature and makes your design process more fun, as well as more precise.

Also notice that since we are not adding watch face design components to the preview area, we have a clear view of our design at this point as well. It is important to notice at this point in time the “Z-order” of the watch face design components. Z-order is the position above and below each other, which is determined by the layer order in the Timeline pane, which serves as the watch face design compositing stack, much like you saw in GIMP (and will see much more later). After we add some cool elements to the watch face design to create a Hybrid Watch Face design (the next section of the chapter), you will “optimize” this watch face design, so you can put the second hand on the surface.

This Z-order is quite important in watch face design if you think about it. The hour hand should overlay on top of the minute hand, and the second hand should overlay both of those. All watch face hands should overlay the date window, which means that as we become more optimized watch face designers, we’ll add components such as the day of the month and cool complications such as heart rate and battery power first, so that they are behind the watch hands when the hands pass over them!

I’m going to do this optimization phase/section of the chapter last, to make it stand out more in the process and so that I can continue to add the digital time readout and heart rate monitor to this watch face to turn it into a Hybrid watch face design and continue with this design workflow and feature learning workflow before we look at the Z-order optimization and layer compositing and similar more advanced features. I am thus attempting to stratify this book so that later chapters build upon earlier materials, to make the learning process as smooth, fast, and seamless as possible for the readers.

Hybrid Watch Faces

Let’s continue building up this watch face design and add a digital time readout to the bottom of the watch face, making it both an analog and a digital watch face. I like to call this a “Hybrid” watch face design, that is, one that is beyond or different than a traditional analog or digital watch face design. In this case the design has both analog and digital features and is thus a Hybrid Watch Face. We’ll also add a heart rate monitor in the area next to the 9 (on the left) to balance out the areas of the watch face. It is important to have a balanced use of the watch face so that the watch face components and compliments do not overcrowd each other.

The first thing we want to do, which we did in the “Digital Watch Faces” section of this chapter (without the repositioning we will be doing here), is to click the Digital Clock icon on the middle left and then drag this Digital Clock readout to the bottom of the hybrid watch face design, between the 8 (on the left) and 4 (on the right). This should yield a very balanced placement of a digital time readout, as you see in Figure 3-12.

As you can see in Figure 3-12, the digital time readout is a bit large and needs to fit better between the 8 and the 4, so let’s edit some of the Properties for this Digital Clock readout so it fits perfectly at the bottom of the watch with even spacing and is still readable. I reduced the font size from 40 to 28 by clicking on the downward facing arrow on the font size UI, so that the digital time readout numbers were similar in size to the numbers around the Analog Watch Face perimeter, as you can see in Figure 3-13. Next, let’s add a heart rate monitor readout across from the day of the month readout to balance out this design.

To add a Heart Rate Monitor readout, which is kept under the watch face complication (shown encircled in red) in Figure 3-14, click the Complications icon at the bottom of the Component pane, which will bring up the menu of different types of complications. Each of these menu items has its own sub-menu, as you can see in Figure 3-14. There are menu items for Time, Battery, Workout, Water, Caffeine, Heart Rate, and Effects. Click Heart Rate and Heart_03 to insert the heart icon and bpm readout previewed at the bottom of Figure 3-14.

Drag the Heart Rate Complication to the left side of the watch face, opposite the day of the month readout on the right. As you can see in Figure 3-15, as you drag this Heart Rate Complication, the snap and alignment lines will kick into play, and you can align your heart rate readout to be perfectly centered on the 3 and 9, using similar spacing that you used to center the digital readout (between the 8 and 4), but this time between the 8 and 10 vertically, rather than horizontally.

Also notice that in the Timeline panel, five new layers have been added for the various components of the Heart Rate Complication, including the numeric readout, the white (Heart Off) and red (Heart On) off-screen, and the bpm text portion beneath the readout. Later in this chapter, we’ll learn how to use the layer select and layer visibility icons to ascertain what every layer added to the Timeline panel contains and what it references in the Preview area.

For the moment let’s continue learning the features of the Galaxy Watch Designer software, including how to use File ➤ Save As to save the new Hybrid Watch Face design that we created using your Analog Watch Face design, using a Save As dialog to assign a new file name.

Use the File ➤ Save As menu sequence to open the Save As dialog, shown in Figure 3-16, and name the CH3_Hybrid_Watch_Face to differentiate the new hybrid watch face design from the analog and digital watch face designs you created earlier using the File ➤ New dialog that comes up when you start Galaxy Watch Designer. Notice the file location in Wallace Jackson ➤ GearWatchDesigner ➤ workspace.

The software package was recently renamed Galaxy Watch Designer, and this part of the code still needs to be updated to create a GalaxyWatchDesigner folder on developer’s workstations rather than a GearWatchDesigner folder. This may have been done by the time you get this book and download the latest version of the Watch Designer.

Tweaking Watch Face Designs

Next, there are a few things we need to adjust, regarding Z-order, as we need the second hand at the very top of the design, and the hour hand needs to be visible above the minute hand as well, as it is shorter and is usually visible in this way in Analog (non-smartwatch) Watches. We also need to make sure that the three Watch Hands are all above the day of month readout, the Digital Clock readout, and the heart rate monitor readout. To do this, we can select and drag Timeline layers to reorder them. The layers are at the top of a watch face design. If you drag a layer up and drop it on the topmost layer, it will land above it.

Figure 3-18 shows your second hand layer moved to the top of your Timeline layer stack compositing pipeline. As you’ll see, in Figure 3-18, the Preview reflects this compositing change, by rendering the second hand on top of the hybrid watch face. Let’s fix the other Z-order issues.

Let’s do the same exact work process with the hour and minute hands, as these also need to “render” in front of all the other watch face design elements, such as heart rate and date indicators and the digital time readout. Since I’ve resized the Timeline pane to be half the screen, placing the cursor between the two panes, so it becomes the up-down pane resize cursor, I can now drag the other two hand elements to the top of the stack. This is seen in Figure 3-19, moving the Hand 3 Z-order.

As you can see, Galaxy Watch Designer shows you the layer you are moving in blue and where you wish to drop it (move it above), using a blue tint and outline effect, so you can see exactly what you are doing. Since the watch face hands need to move over all the other face design elements, we will need to do this for all of the Hand (1, 2, and 3) elements in the Timeline compositing stack area, so let’s do this next!

Next, let’s grab the Hand 2 element and drag it up so it will also be moved on top of the bpm layer and to the top of the layer compositing stack, along with your other three watch hand design elements, as shown in Figure 3-20. Let’s look at how to rename these layers next.

As a user of other software packages, such as GIMP 2.10.6 and Inkscape, you can make some assumptions about the way that things are being represented in similar software user interfaces. For instance, in GIMP 2.10 (and most other new media production software), layer or component names can be changed by clicking (or double-clicking) on the name that you wish to change in the user interface. If the clicked-on name becomes selected, it can usually be changed (replaced), using the name of your choice. In this case, Hands 1, 2, and 3 should become Seconds, Hours, and Minutes, so that your layer stack in the Timeline window will become clearer to you when you open the file later or to other watch face developers who open your GWD (Galaxy Watch Designer) files. This is important if you have a team working on watch face design, allowing you to clarify the Watch Designer user interface.

We should rename these layers so we can be clear what design element we are working with, since element names when they are added to the design use a generic name and the order number which indicates the order they were added to the design. Once you have some experience designing watch faces, you will probably add components and complications in the back to front Z-order they should render in to avoid having to change your layer Z-order to correct rendering issues, but it’s good to learn about the various features of the Galaxy Watch Designer as we progress along the way so you become an expert!

As you can see in Figure 3-21, I have selected the text in the top three layers and typed in new descriptions. The way that you find out what layer is attached to what design element you are working with in the preview is by either selecting the layer (selecting the design element in the preview) or using the “visibility” on/off dot (becomes a white x once selected) in the first column on the right side of the layer pane (the second is a Lock Design Element Into Place dot/option). Using this we can make sure that watch face layer options progress from Seconds to Hours to Minutes, so the hour hand overlays the minute hand correctly.

Uncheck the Visibility for the Minutes layer so that you can see the minute hand in the watch face design again, and let’s get to tweaking the background color. Our objective here is to increase the watch face contrast, which is the difference between the dark and light colors, so that things like the watch face ticks (time and in-between markings around the perimeter of the watch face), hands, digital time readout, heart rate monitor readout, and so forth are more apparent to the user.

The easiest way to select the Background watch face design component is to click the Background layer to select it, as shown in Figure 3-22. This will also select the Background in the Preview pane and place the Background properties into the Properties pane where you can edit them. In this case, it is the Hue, Saturation, and Lightness of the color of the Background that you wish to edit, so scroll the Properties pane to the bottom with your middle mouse button scroll wheel until you see the Adjust Color section of the panel and its three slider indicators. Grab the arrow indicator in the middle of the Hue slider, and drag it to the right to rotate the Hue 45 degrees, so that watch face background goes from light purple to blue, as is shown in Figure 3-22.

The next thing that we want to “tweak” is the Luminance, or lightness to darkness, of the watch face background. In order to make the white elements, and the second hand, which we will shift later on to a gold color to stand out in the design better, we need the Background component to be a dark purple to dark blue spectrum, as is shown in Figure 3-23.

Finally, let’s select the Seconds layer which contains the second hand and color-shift the red hue by 45 degrees to be a gold color, which looks better against the purple and dark blue portions of the watch face background. When I tried to do this, the Eye (Visibility or Editability) icon in the Adjust Color Properties area was toggled off, so I had to click it to enable this color value. This means that you can use this feature to “lock” certain design properties, just like you can lock an entire watch face design component layer, using the Lock icon in the Timeline layer stack. As you can see in Figure 3-24, the Gold Second Hand looks great with the Hybrid Watch Face design we are working on, and the watch face we have created during this chapter looks professional enough to host in the Samsung Galaxy Smartwatch store for sale.

In case you are wondering what the red heart that is off-screen on the left is, keeping an alternate state of a graphic outside the edge of the screen is a popular technique in game design; if you have read my Pro Java 9 Games Development book, you may be familiar with this game design technique. Tizen uses this off-screen representation to toggle the Heart Rate Icon to be red when the HRM data is being actively read.

You can select this red heart design element and adjust its color properties (for instance, turn it pink like a real-world heart is) using these same selection, visibility, and adjustment techniques outlined within this chapter. Try tweaking some of the other watch face design elements to get some practice.

For instance, change the digital time readout to a bright yellow color against the dark blue, or change the day of the month readout to a more readable green color, to get some practice with the work process which is needed to master the Galaxy Watch Designer.

Congratulations, as you have learned how to use the Galaxy Watch Designer software at its most rudimentary level to create Analog, Digital, and Hybrid Watch Faces, and we’re only three chapters into the book! This is going to get more and more exciting, as what watch faces can do is limited only by the sensor hardware and Tizen APIs available to Tizen smartwatch developers.