Optimize Power: Watch Face States

Smartwatch hardware is designed to optimize battery power, as smartwatches are small in size, meaning their batteries are also small, in order to fit inside of the smartwatch case. For this reason, smartwatches tend to utilize different states (also called “modes”) that activate when your users turn their wrist to view the watch face (invoking what is called an “Active” state) and which otherwise use a low-power state (called an “Always-On” state) when the watch face is perceived to be unused (or not being looked at). The Always-On mode (I may use the words “state” and “mode” interchangeably in this chapter) uses a lot of Black (or “off”) pixels, which do not use any power to generate their 256 different levels or intensities of RGB color, which you learned about in Chapter 2, covering digital imaging fundamentals.

Always-On: Minimize Battery Power Use

Smartwatches use an Always-On “state” and watch face design for that state. This state is used when the watch face is not being actively viewed, which is called the “Active” state, which is not Always-On but instead is “Temporarily On” when the user rotates their wrist to view the full color watch face design or show it off to their friends. Designing Always-On watch faces is not as easy as just adding black (pixel off) values to your watch face full color version in order to “dim” it, as the color values are still used, and dimming them by adding black color value won’t save any power, because the colored pixels are still (barely) turned on. In other words, on at all, with any intensity, from 1 (almost off) to 255 (fully on) is the same as 255 (fully on), so you’ll want to design Always-On watch faces using fully on pixel colors, so your users will have the maximum watch face readability. Only Black value Zero (zero means power off) pixels use no power! These fully off Black pixels also provide the best contrast for the rest of your Always-On watch face design, which should always utilize fully on white (256 Red, 256 Green, 256 Blue) or RGB or CMY colored pixels.

Default Always-On: Lower Battery Power Use

The lowest battery power usage Always-On State (or Mode) uses what would be called the Smartwatch built-in or “default” Always-On watch face design. This is built into (part of the OS codebase) each smartwatch model and would always be utilized if you do not provide an alternate, customized, Always-On watch face design for the Low-Bit Color Mode Always-On State or the High Color Mode Always-On State; we’ll be covering how to create these in this chapter. Shown in Figure 4-1 (also available on the Samsung Developer website) are Always-On Low-bit color mode for Samsung’s Gear S2 smartwatch and Always-On High color mode for Samsung’s Gear S3 smartwatch. As you can see, very minimal components, compliments, and colors are utilized so that the amount of power taken from the battery is minimized.

If any smartwatch model does not support a High Color Mode Always-On State, then your Low-Bit Color Mode Always-On State will be utilized over the default Always-On State (Mode) that comes with the smartwatch model, so include both modes with your watch face design. We will be focusing on Low-bit color mode design in this chapter, as only the Gear S3 and Galaxy Watch models currently support the High color mode of the Always-On smartwatch state .

Low-Bit Color Mode: Low Battery Power Use

The Low-Bit Color Always-On State (or Mode) uses what would be called 3-bit (or 8) color, or Low-bit color mode , to build on what we learned regarding color depth back in Chapter 2. I shared that it took 8 bits (contained in 1 byte) to hold a palette of 256 colors and showed you that fairly impressive imagery can be created using the relatively few colors found in an 8-bit image. This is far more difficult to do with a 3-bit color palette, as you might imagine, so I hope you’re up for a real challenge. The eight colors in this Low-bit color Always-On palette include black and white; Cyan, Magenta, and Yellow (the CMYK subtractive colors used in printing); and Red, Green, and Blue (the RGB additive colors used in computer displays and iTV Sets). An example which you can also see on the Samsung Developer website is shown in Figure 4-2. It’s important to look at the “bright” side (no pun intended) of Always-On watch face design: at least you have the foundational color for additive color imaging (RGB) and subtractive color (print) imaging (CMYK) to use, along with White, for your designs!

To make sure your watch face designs can sell across the many Gear and Galaxy Watch models, be sure to include Low-bit color mode designs with all of your watch faces. In essence, what only having eight colors available to create a watch face design with does is it forces you to really showcase your design chops by using low color image assets, so you can’t just fall back on using true color image compositing chops for your watch face designs. It is possible to have both Low color and True color watch faces in your design that will stun your users, whether or not you turn over your wrist and show the Active state watch design. This is the ultimate goal of the watch face designer: to provide a watch face with great Low color and True color designs.

High Color Mode: Medium Battery Power Use

The Gear S3 and Galaxy Watch (and later) support a High color mode that can be used instead of Low color mode (which means always create a Low color Mode Always-On watch face design, unless you are selling Gear S3 and later watch faces). For all of you digital imaging aficionados out there, this is not referencing 16-bit color, commonly termed High-Color in digital image TGA (Targa) or TIFF (Tagged Image File Format) data types. In a smartwatch, 16-bit color space won’t save power over 24-bit color space, so use 24-bit color for Active (also called Ambient) Mode and 3-bit color for Always-On, as shown in Figure 4-3.

Next let’s look at how Samsung measures optimization using an “OPR.”

OPR: Optimizing Per-Pixel Power Usage

The OPR , or On Pixel Ratio , is limited for Samsung Smartwatches to a total of 15% OPR (maximum, or your watch face will not be approved for publishing) for an Always-On watch face design. This means that 15% of your total displayed pixels can be white. So using the calculations we learned in Chapter 2, on a Gear S this means that 360 x 480 x 0.15 pixels can be white, or 25,920 pixels. Since white uses an RGB value that is three times (one red, one green, and one blue pixel) more than a Red, Green, or Blue color pixel used alone, this means that you can use 25,920 x 3 = 77,760 colored pixels, if you use Red, Green, and Blue (RGB) pixel colors. If you use two pixel colors (remember Yellow = one Red pixel on plus one Green pixel on), as in Cyan, Magenta, or Yellow (CMY) pixels, you would cut this color pixels’ number in half (77,760 / 2 = 38,880). Thus, RGB pixels use 33% of one white pixel, and CMY pixels use 66% of one white pixel, and black (the K value in the CMYK color space) use 0% of one white pixel, which is why Always-On watch face designs tend to use the black background color and sparing use of the other seven 3-bit indexed color palette color values. This is important information for designing an Always-On watch face design, as is the information in the next section on burn-in!

Minimizing the AMOLED Screen Burn-In

When a smartwatch uses its Always-On state (yes, all smartwatches feature this), many times the watch face OS will shift watch face pixels around the screen slightly to prevent what the industry terms a “burn-in effect” from occurring on the Active Matrix (AM) OLED display. Screen burn-in originated on Cathode Ray Tubes (CRT displays) when the CRT electron gun would shoot out a stream of electrons which would burn a prolonged image into the luminance material which coated the back of the glass screen. This would cause a ghost of any prolonged image to be visible after the CRT was turned off. It is important to note that design elements near the very edge of your watch face design can be pushed off of the visible display (especially on round or analog watch face designs) when this OS controlled pixel-shifting effect happens.

Just like Always-On optimization, screen burn-in optimization involves replacing high RGB value colors with black for the background, especially at the center (pivot) of the screen for your Analog watch face designs. You may want to avoid designing with high-brightness (white), and even high-chroma (CMY) pixels, in any larger areas of pixels.

For analog watch faces, since pixel on/off varies less the closer you are to the center (pivot) of the watch face (hour, minute, and second hands), you should strongly consider leaving the center pixels using the Black (pixel turned off) color value, or possibly use the Red color value .

Those of you with an Analog Photography (“old school” cameras using film, not digital cameras) background will have experience using a Red light in the “darkroom,” as this wavelength of light won’t even burn in hypersensitive film stocks, so, it’s a safe assumption that using Red pixel color on fixed components will minimize the burn-in effect by using only 33% power, as far as Always-On watch face design is concerned. The wavelength for Red is long/wide, so it carries less (burning) energy within the wavelength to affect either film or organic light-emitting diode screen composition materials. In the next section, where we create the Always-On state for the Hybrid watch face design that we created in the previous chapter, I will use Red for the fixed (Index) part of the design.

Creating an Always-On Watch Face

Since the Always-On watch face design needs to be a part of the Active watch face design, we will need to open the CH3_Hybrid_Watch_Face design we created in the previous chapter and add an Always-On watch face design to that project file. There are two ways to do this, the first is to click “Recents” in the New Project dialog and then to select the Hybrid project, which is not showing up for selection as you can see in Figure 4-4.

If for some reason the New Project dialog is not finding all of your recent projects and listing them, use the Cancel or New options and open up an empty version of the Galaxy Watch Designer software and then use the File ➤ Open menu sequence to access the Open dialog, which is shown in Figure 4-5.

Select the CH3_Hybrid_Watch_Face project file , and click the Open button to open it in the Galaxy Watch Designer software package.

This will open up the project in Galaxy Watch Designer as seen in Figure 4-6. Look in the upper-right corner of the Galaxy Watch Designer user interface, and you will see buttons labeled Active, which will be depressed (selected) currently, and another next to it labeled Always-On. If you click the Generate Always-On button next to the Run button to enable High color and low color profiles, then you can click the Always-On button, and a menu will drop down with choices to put the GWD software package into two different design modes, the Low-bit color mode and the High color mode, which will reset the GWD software to what looks like the empty watch face design state, so that you can design your (two, if you wish) Always-On watch face designs from scratch for each of these modes. In this way, one GWD project file can be loaded with up to three different watch face designs to be used for Active, Always-On Low (3-bit color), and Always-On High (True Color) compositions (as dictated by the Timeline pane).

You can toggle (switch between) your designs in GWD simply by clicking these buttons (and sub-menu) any time you wish, as you are working in the Galaxy Watch Designer software. Pretty cool modal operation for watch design software, if you ask me. Kudos to Samsung!

As you can see encircled in red in Figure 4-6, I selected a Low-bit color mode, which then put me into an entirely new design, which now features the Black background color, as shown in Figure 4-7. The OPR (On Pixel Ratio) for an All-Black design is 0.0% as you can see at the bottom of the Preview pane, which means we can see how the OPR will grow, from 0.0% to the maximum 15.0%, as we create your Always-On Low-bit color watch face design.

Since we are going to learn from what we did in Chapter 3, and do not need to add a background component (as you can see GWD has added a Black solid color Background component for us), let’s add the Index over the background so that we add things in the proper Z-order.

This will make your Always-On design match your Active design pixel for pixel, so components won’t move; then the user turns their wrist over to view the Active watch face design. We will be configuring this Index to use the low-vibrating-red wavelength however to minimize the AMOLED screen burn-in in the next step in the process, to build upon what we have learned previously about low-power watch face design in the first half of this chapter.

To configure the Properties of the Always-On Low-bit color watch face Index component, select the component’s layer in the Timeline pane, so that it turns blue and selects the component in the Preview pane in Figure 4-8, and then use your center mouse button scroll wheel to scroll the Properties pane to the bottom so that we can set the color value from White to Red.

As you can see, the Galaxy Watch Designer software is paying close attention to what we are doing and has changed the Appearance section of the Properties pane to utilize the 3-bit color palette selection user interface, rather than a True color 24-bit color Hue, Saturation, and Luminance selection user interface widget collection as it did for our Active watch face design workflow. Now you are seeing how the Galaxy Watch Designer software is helping out to make salient Always-On watch face design decisions, which is also pretty cool, if you ask me.

Click the Red color swatch in the 3-bit color palette and you will see the watch face Index component turn from White to Red, and thereby save on your OPR as well as the dreaded screen burn-in. In fact, you can see that with a Red Index, your OPR is now at only 1.3%.

Since we are adding watch face design elements (components) from back to front, let’s make the Always-On design a Hybrid design and add a Digital Clock component at the bottom of the watch face. Make it 28 pixels in font size, and Green, so that it stands out, by using one of the RGB color values, which only uses 33% of what a White readout would use, as far as OPR is concerned. As you will see, this will take our OPR to 1.7%, or about one-tenth of the maximum allowable value.

I tried to change the readout of the Digital Clock component to match the HH : mm : ss used in the Active watch face design, but GWD does not allow seconds on Always-On watch states, which means that I will have to manually position (center) the digital readout over the 6, and at the same Y pixel height value as we are using in your Active design.

To accomplish this, use snap and grid line positioning in GWD to ascertain a correct X value (103), then click the Active button to be able to read the Y (height) positioning value of 225 from your Active design. Next, enter a Y of 225 manually in the Always-On design after switching back into that design mode, by again clicking the Always-On Low-bit color button and sub-menu selection. This correctly aligns your readout.

Next, let’s add your Minute Hand, again using something other than White, to save on OPR. This is done by clicking the Watch Hand icon in the Component pane, and we want to click the Minute, then the Hour, then the Second so they are added in the proper Z-order.

The Cyan color looks good with the red and green, and stands out well in the watch face design, so I chose that color for the Hour and Minute hands.

Scroll down the Properties panel and find the 3-bit color palette swatches in the Appearance section, and click on the Cyan color to set the Minute Hand to this color value.

You will notice that the OPR has now risen to a value of 2.9% which is less than a fifth of our allowed 15% OPR value, and we are already starting to look like a real watch face design!

Next, we are going to add the Hour Hand, and make the same color selection, and then a Second Hand which we will make Yellow in order to differentiate it from the Hour and Minute hands.

Next, let’s add an Hour Hand, so it is on top of the Minute Hand. This is done by clicking the Watch Hand icon in the Component pane, and we want to click the Hour Hand, and then add your Watch Hand ➤ Seconds Hand, so both of these are added in the proper layer Z-order.

Let’s also rename the three layers in the Timeline to Seconds, Minutes, and Hour Hand, like we did in the Active version of the watch face, so that we can identify what we are doing in the software later on. Again we will want to use something other than White, to save on OPR.

Scroll down the Properties panel and find the 3-bit color palette swatches in the Appearance section, and click the Cyan color, to set the Hour Hand to this color value. A Cyan color looks good with red and green and stands out well in a watch face design, so I chose that color for the Hour and Minute hands. You will notice the OPR has now risen to a value of 3.2%, more than a fifth of our allowed 15% OPR value.

The Yellow color makes the second hand stand out also, but be aware that the second hand may not always work reliably in Always-On mode and that you may want to leave the second hand out of your design when creating Always-On Mode watch face designs.

I am including the Second Hand here just to be complete from a watch face design perspective, since that is the primary subject of the book. Let’s add the compliments near the center of the watch face (by the 3 on the right-hand side) next.

Since an Always-On Low-bit color watch face can’t monitor your heart rate, we’ll just add the day of the month compliment to get the day displayed, and come close to replicating our Active Hybrid watch face design. Since the Background is already Black, we also will not need the small black square (layer) that puts a black background behind the White number to improve its contrast.

After we add the Data_Digital_A compliment, as seen in Figure 4-12, we’ll fix its Z-order, visibility, and alignment in the next section of the chapter.

Notice that I selected the Digital Clock Layer in the Timeline pane before I added the Day of the Month compliment. What I was doing was to see if this software was smart enough (as yet, it will be, someday) to add the selected compliment in the Layer order that I was specifying using this selection (much like the drag to move layer works).

Since GWD added the day of the month compliment to the top of the layer stack, I will drag the numeric readout portion down on top of the Digital Clock readout, as seen in Figure 4-13 in the Timeline pane Layer section.

I can delete the Image 1 (black square box outlined with white) that serves as a background for the day of month (date) on the watch face design. I want to make sure that the month day number matches pixel for pixel with the Active design and that it stands out, so I am keeping it white in color.

I was thinking of adding the Heart Rate Monitor as a Magenta element (since it’s pink like a real heart), but when I tried to add it, the software gave me an error message, which tells me that the heart rate sensor does not work when the watch is in a low-power mode.

To delete the Image 1 background image layer, select it so that it’s blue, and right-click the selected layer to open a context-sensitive menu. All software can (and should) have context-sensitive menus for all of the major features, as it allows professional users to navigate the features of the software more rapidly during the development process.

Notice that things you can do to a layer using this shortcut include Cut, Copy, Paste, Delete, Rename, Swap Image, and Group and Ungroup. You may have noticed grouping being used in the past when we added Heart Rate and Date compliments to the watch face design, as these were multi-layer groups that were designed to stay, and be used, together in the watch face design.

Let’s right-click and select Delete from the menu to remove the background Image 1 from the watch face design, as it is redundant, as the background of the watch face is already black, and we can reduce the OPR using this “move.”

This reduced our OPR to 3.3%, which is fairly low as far as OPR goes for watch face designs. I notice the pixel positioning is slightly off for the date display, so let’s learn how to micro-adjust components next.

To micro-position watch face design components (elements), you can select the layer holding the component or compliment, so that it will turn blue. At that point in time, you’ll use the Up – Down – Left – Right arrow keys on your keyboard to move (and adjust) the positioning of the element by one pixel at a time.

As you can see in Figure 4-15, we were a few pixels too high for the day to be centered on the line that emanates from the 3 at the right side of the watch face design, so we move the 164 Y position down to 166 pixels in the Y dimension, so this component is better positioned.

We need to remember to also do this in the Active Hybrid watch face design, which, as you will see in Figure 4-16, better centers your day of the month readout inside of the Image 1 black box background area behind the date readout in the Active watch face design as well.

After we finish this design process, our OPR is at 3.3%, which is quite low, which means that users with this watch design will not run out of battery power due to the watch face design, which will serve to make it more popular in the watch face marketplace.

Let’s see how to change the day number position in Active watch face design to match Always-On design. Note the X, Y position of this component in Figure 4-15 by noting the 249, 166 coordinate used for the Placement section of the Properties pane for the selected layer named Digitalclock 2 in the Timeline pane.

Next, click the Active button at the top right of the Galaxy Watch Designer software to switch back into Active watch face design mode, and go to this same for the Placement section of the Properties pane for the selected layer named Digitalclock 2 in the Timeline pane by selecting that layer in the Active design to make that date component active for editing, and its positioning data available for updating to the new X, Y coordinate you tweaked the Always-On watch face design version to utilize. Making the Active and Always-On Low-bit color states (or modes) use the same positioning data for all of these components means that you will only get certain portions of the watch face design that change when the user rotates their wrist, which can be a fairly cool effect. In this case, the background turns black (off), the Index turns red, and the time indicators become green, cyan, and yellow (colored).

Seconds and Second Hand usage is not always available on smartwatches earlier than the S3 and Galaxy Watch. Watches that come out later than the Galaxy Watch are likely to have better battery life, faster processing, and better screens and will be more likely to do things such as High color Always-On watch face designs that would accurately advance the second hand and display seconds on your digital clock, if you so desire. After all, most users do not use the second hand unless they are using a stop watch application, so for telling time this is not a huge functional loss for your Always-On watch face design attributes.

Notice in Figure 4-17 that your OPD is down to 3.1% using the current design. Let’s see if we can get this down by another percentage point, to around 2%, so that our user’s battery life will be significantly extended. The first step toward doing this is to delete the unneeded Yellow second hand entirely and then to change the White and Cyan watch face components to be one of the low-power RGB color values.

Click the Seconds layer in the Timeline pane , as shown in Figure 4-17, and then select the Delete context menu option. This will remove that layer and component from the watch face design.

Next, select the Digitalclock 2 layer and the day of the month numeric component of the watch face design, and scroll down into the Appearance section of the Properties pane, and click the green color swatch in the 3-bit color palette options at the bottom.

This will reduce the white pixels used by 67% to green pixels, which will reduce the OPD even further. We can reduce the hands by 33% as well by using a Blue color rather than Cyan, which will reduce the OPD even further toward the target 2% on pixels displayed usage.

To do this, select the Hour Hand layerh then go to the Properties pane, and scroll down to Appearance and select the Blue color for the Hour Hand. Do the same thing with the Minutes layer, and you will see that the OPD goes down to 2.3% or 2.2%. On my system, I dragged the Timeline time marker indicator to the right and noticed that the OPD is modulating between 2.2% and 2.3%, which means that your OPD can change based upon what time it is on the user’s smartwatch!

Keep this in mind when you design for Always-On as you might want to target 14% rather than 15% when working in the Galaxy Watch Designer software.

Now you have a complete watch face design with an Always-On mode using the Low color (3-bit color palette) mode that works in all of the Samsung smartwatches out there. If you want to practice using the Galaxy Watch Designer a bit more before we dive into the fourth dimension of animation in the next chapter, you can click the Always-On button in the upper-right corner and select High color mode and create a third watch face design (more similar to the first one you did in Chapter 3 in true color, only without the compliments/sensors and possibly without a second hand and seconds) to get some practice using the Components, Timeline, Properties, and Preview panes in the Galaxy Watch Designer.

We’ll cover even more concepts in Chapter 5 as we take static digital imaging concepts from Chapters 2 through 4 and learn how 2D and 3D assets can move over time to become animation. After that, we will learn how to attach code to these 2D and 3D assets so that they can become i2D and i3D interactive assets, so we can take your watch face designs even further into the stratosphere! This is getting exciting!