Applying Gyro Effects to Components

There are seven categories of gyroscopic effects, ranging from rotation to scale (called Dimension) to movement (called Pivot Point X and Y) to translucence (called Opacity). Each set of fields (text inputs/readouts) takes to and from values which will interpolate based on X or Y or XY gyro sensor movement of the smartwatch. This determines how the watch face design component (Watch Hand, Image, Index, Complication, etc.) will behave when it is controlled by the gyroscope sensor in the smartwatch using these 15 data fields in the Gyro Effect control panel, which we will be exploring in detail in this chapter to see how you can use it to apply these 3D special effects. Note that this is a very advanced area of interfacing your watch face design with one of the most advanced sensors in the smartwatch, and therefore the only real way to master it is through repeated entry of data values in the Gyro Effect dialog and testing (and tweaking) the results on the Run emulator as well as on real smartwatch devices.

Adding a Watch Face Gyro Rotation

Let’s start out by launching the Galaxy Watch Face Designer software package so we can use the New Project dialog that appears on start-up to open the project we created in Chapter 10 and make the background pinwheel rotate using the Gyro Effect dialog Rotate setting.

As you can see in Figure 11-1, to apply the Gyro Effect to the CH10 project, we select the Vector Illustration (image) Layer and click the icon to the left of the Gyro Effect section of the Properties dialog, which you can access by scrolling down in the Properties pane, using your middle-mouse wheel or the pane’s right-side scroll bar.

A Warning dialog will appear, advising that Tizen 2.3.2 watches or higher are required to use the Gyroscope feature and that it may not work on older Samsung smartwatches. Click OK to acknowledge this Warning dialog, and it will vanish, and we will continue to set Rotation values for the Gyro Effect. As you can see (encircled in red) in Figure 11-1, there is a button to the left of the Gyro Effects section title that can be clicked to enable the Gyro Effect.

Notice that the default Gyro Effect rotation Range is set from -90 degrees to +90 degrees from zero degrees in the dialog. This should be fine for our background pinwheel to spin around behind the Steps % Complication we added in Chapter 10. Let’s get the Gyro Effect and the Steps % Complication working together in the same watch face design now!

The first thing that you will want to do is to enter 90 in the Range section of the dialog, as seen at the top of Figure 11-2. I tested this in the Run (emulator) and it did nothing on gyro rotation, so I entered the Rotate section of the dialog next and specified 90 -0- to 90 degrees and then tested it again in the Run ➤ Data Tab ➤ Gyro X Slider to see if it was working. It was, and the Vector Illustration was spinning when the watch’s X Gyro Tab was used. Since the code is currently hidden in the Galaxy Watch Designer, the best way to test features such as the Gyroscope is to set your data values and then use the Run ➤ Data Tab ➤ Gyro X and Y Sliders to test your watch face design.

You can look ahead to Figure 11-2.

Test the 90 degree Placement ➤ Gyro Effect ➤ Y Tab setting, seen in the Run (emulator) in Figure 11-5. The Steps % works as well, as you can see on the right side (Steps % Slider works) of Figure 11-3.

Next, I saved the work done so far adding a Gyro Effect to the Chapter 8 watch face design, by using the File ➤ Save As menu sequence, seen at the top left in Figure 11-4 to open the File ➤ Save As menu sequence, and gave this Gyroscope project the new name of CH11_Gyroscope_Watch_Face. I will do this before I use the Run icon (emulator), to test what we have in place so far, and before we change the functionality of the complication, and turn it into a Steps % Complication, by changing its design component layers and settings in the next section of this chapter.

Next, let’s add a Components ➤ Complication ➤ (Gyro) Effects ➤ Light_Effect layer for the compliment and set the watch face effect that puts a ray of light reflection complication on top of the watch face, so that it looks more three dimensional, rotating from 15% to 100%, with Opacity from 25% (we’ll use 51% to see it better) to 50%. To do this, we will go through the steps shown in the next section of the chapter, seen in Figures 11-7 through 11-11.

Adding a Gyro Effect Complication

Let’s add a Gyro Effect to the top of our watch face design, as shown in Figure 11-5. Select the top layer in the project, which now has dozens of layers (a complex project with conditions, complications, gyroscopic movement, and now a Light_Effect Complication on top of it all!). Click the Components ➤ Complications ➤ (Gyro) Effect ➤ Light_Effect menu sequence, and add the Light_Effect image (gray on black) shown in the middle of Figure 11-5.

Rename the top layer Light_Effect (Gyro) as is shown in Figure 11-6, and review the Image Properties ➤ Rotate settings of 15% seen in Figure 11-6 encircled in red and Properties ➤ Appearance ➤ Opacity ➤ 25%, which we will increase to 51% before testing so that we can see the effect better when testing it in the Run (emulator) in GWD. Scroll down in the Properties pane (using the middle mouse wheel or right-side scroll bar), to see the settings in the Gyro Effects section next.

As you can see in Figure 11-7, the Range goes from -90 to 90 degrees (the default values), and the XY Dimensions (Scale) and XY Pivot Points (Move) are also left unchanged (default zero values).

The Light Beam Effect image is rotated by the Properties ➤ Gyro Effect ➤ Rotate by -15 degrees, and Properties ➤ Gyro Effect ➤ Opacity is changed by -25% in the Y dimension, as the smartwatch user rotates their wrist in both directions.

You can see the results of these settings in the Run (emulator) in the GWD, which is now working with Gyro Effect.

To see this Light Reflection image better in the Run (emulator), I also upped the Properties ➤ Appearance ➤ Opacity to 51% (Figure 11-7), so that this Light Reflection image compositing could be seen better against your Chapter 8 watch face design when it was being run in the emulator.

You can see the Run (emulator) in Figure 11-8, in which I have tested your new watch face design by using the Gyro Y Slider, which is rotating and fading the Light Reflection image as is specified in the Gyro Effect Rotation and Opacity sections.

I did the screenshot with the watch face compositing Layer setup (image at 51% Opacity is seen encircled in red) and placed it right next to the Run (emulator) so that you could see the effect of pulling the Gyro Y Slider to the 79% position. The Light Reflection image on top of the watch face design compositing stack rotates and fades as expected.

I also tested the watch face design Steps % Complication, which we added in Chapter 10, to make sure all of these complex features we have added since Chapter 8 are working together, as one seamless (complex) watch face design.

This watch face design includes Battery Power % Conditions, Hour Numbers Hide/Show Time Conditions, a Steps % Complication, and the Light_Effect Gyroscopic Effect Complication, all working at the same time together. Try it for yourself in the Run (emulator) and see! Even the pinwheel rotates under the Steps % Complication we added!

Let’s use a File ➤ Save As menu sequence to Save the project as CH11_Gyroscope2_Watch_Face_LightFX, as seen in Figure 11-9.

Pretty cool that you can utilize all of these cutting-edge features together in one watch face design.

Test the watch face design again using the negative Gyro Y Slider direction, to see the light effect composite over (and affect) the 1 AM Hour Indicator, as is shown in Figure 11-10. This happens because it is at the top of the layer compositing stack in the GWD Timeline. We left the conditional time logic from Chapter 8 so that the Hour Indicators for each hour still appear in the watch face design, and their layers are farther down in the compositing stack. We added this Timeline-based Time Condition in Chapters 7 and 8, covering the conditional logic setup, using the Timeline pane, in the Galaxy Watch Designer.

Galaxy Watch Designer executes our design from the bottom of the layer stack up, from background vector images and their rotational Gyro Effects, up through the hour and minute and seconds layers and their conditional time settings, up through the Steps % Complication, up through the Gyro Light_Effect on top, as you can see in Figure 11-11.

If you have turned a layer (view or eye icon) off, as I have in Figure 11-11 on the lower left (the white X on White Vector Illustration layer), you will not see that layer rendered in the Run (emulator) test pane, so you have the maximum flexibility in testing and building your watch face designs.

In Figure 11-12, I will turn that layer visibility back on, inserting it into the watch face design compositing and programming pipeline. As you can see, it’s now visible in the watch face design and does not yet Rotate (as the Gyro Effect settings are not entered in the Gyro Effect section of its Properties Pane as yet), so the Gyro Y Rotation Slider will do nothing at this point in the design.

As you can see in the Run (emulator), everything composites and executes as expected in the Galaxy Watch Designer. The Hour, Minute, and Seconds hands are rotating and appearing correctly based on the Time (Tab), and the Steps & Compliment and Gyro Effects are working correctly based on the settings in the Data Tab. You may want to increase Opacity in Light_Effect, to see it better!

Next, since we don’t have the time or page bandwidth to create all new digital image assets using GIMP as we did in Chapter 7, let’s use the Samples Projects included with Galaxy Watch Designer to look at how to create “Tubular” and “Perspective” isometric 3D effects using Gyroscopic sensors in the smartwatch using 2D images supplied with the software. This work process will let us examine how the Gyro Effect works and learn more about it and get more experience using it without using up too many pages (and figures) within this chapter.

Looking at the Sample Watch Faces

Another great way to investigate how the Gyro Effect works is to dissect the Sample Watch Faces that come with Galaxy Watch Designer. This is a great way to look at all of the GWD Features for new watch designers, so we are going to cover it here, relating to the Gyro Effect, so that the work process is covered in this book. Let’s use a File ➤ New menu sequence to bring up a New Project dialog, seen in Figure 11-13. Click Samples at the top left and then the Vacation sample.

Test the Vacation Gyro Sample using the Run icon to launch the emulator in Galaxy Watch Designer. As you can see, there are layers for the AM indicator, as well as Hour and Minute text overlayed at the top of the compositing layer pipeline, shadows under that, and a floating person PNG32 (Alpha) under that, and a PNG24 Pool Line Deformed Grid under that (to indicate wave turbulence) and a shadow layer PNG32 under that, and a blue water background color under that.

As you can see in Figure 11-14 in the Run (emulator) Icon pane, the floating body (inner tube) and the time shadow can be moved using the Gyro X and Gyro Y Sliders in the Data Tab.

Notice in Figure 11-15 the Gyro Effect settings for each of the layer elements, including the white time text and gray time text shadow, as one must remain fixed, and one must move, to give the proper light source offset effect shown in Figure 11-14. In fact, a great exercise to learn Gyro Effect would be to make one move while the other remains fixed; it doesn’t matter which one has the Gryo Effect applied, as long as the Opacity levels are applied correctly in the compositing pipeline, which is implemented by the layer Z-order and the Opacity setting in the Properties dialog.

As seen in Figure 11-15, the Gyro Effects setting for the AM indicator is -137 pixels and -301 pixels, so the white text is moving relative to the shadows, to create the drop-shadowing offset which can be seen in the Run (emulator) icon. You can look at the other layers in the watch face composite and look at GDW’s Properties ➤ Gyro Effect pane to see which layers are Gyro positioned relative to each other in order to learn about how the Gyroscope effects are implemented for this watch face design.

The next thing that we need to do, all shown in Figure 11-16, is to look at the watch face layers, to see how they are composited, and to observe how each layer (design element) implements the Gyro Effect panel settings.

As far as digital image compositing goes, the PNG32 image files include transparency (the inner tube and shadow). There is a Resource Preview pane on the far right of the Galaxy Watch Designer where you can see the image layer, file name (file type), resolution, and data footprint simply by clicking the layer name and the asset will be shown above along with its corresponding data. You can use this feature as well when you are dissecting sample files to see how they have been constructed. Be sure to do this using all of the GWD tools, as this is what we are learning in this section of the chapter. The Image 5 layer shown selected in Figure 11-16 contains the deformed grid which shows the watch face viewer that there is turbulence in the water (pool) that the inner tube is floating on. This is what is moving the inner tube and the shadow around relative to each other. Each layer plays a role in making the effect look more real, moving by using the Gyro Effect.

Fixing a Sample Watch Gyro Face

Let’s fix the problem with one of the sample Gyro watch face designs! Open the Fly in the sky sample watch face design project, as shown in Figure 11-17. This project is in the Samples section of the Galaxy Watch Designer software and also can be opened using the File ➤ New Project dialog anytime you start up the software. Click the Samples section (shown in red) in Figure 11-17, and then scroll right and click the Fly in the sky 360 x 360 round watch face design and then the OK button to Open it for closer review, which we will be doing in the final part of this chapter.

Click the Background Image (bg) Layer and the Run Icon (emulator) to test the Sample Project, and see how it works by using the Gyro X and Gyro Y Sliders under the Data Tab.

As you can see in Figure 11-18, the background layer (i.e., bg) image is set to move -183 X pixels in the Gyro Effect XY Tab and thus moves slightly in both the X and Y directions when the X and Y Sliders are used (respectively).

This is because any values entered in the XY Tab are applied as if they are entered in both the X and Y tabs, and this is where entering Gyro values can get very tricky for some advanced projects.

If you want the values applied to both X and Y Tabs equally, enter them in the XY Tab and not in the X and Y tabs. That is, only enter values in one of the three tabs, X (X Only), Y (Y Only), or XY (X and Y Both), for each section of the Gyro Effects Tab.

In this way, advanced special effects can be created using the various sections of the Gyro Effects dialog, using these three different X, Y, and XY tabs, individually. You can only use one section of each tab at a time, so if you want to do something in X and Y, use the XY Tab!

The two dangling foot images (the left and right layers, as can be seen at the bottom-left in Figure 11-18) move separately, based on Inner Pivot XY settings, which can be seen in Figure 11-19. This is so that they can “dangle” more realistically in a watch face gyro simulation.

Both images use the PNG32 alpha channel, so that they can be composited “over” the background image, which is probably a PNG24, and this shows you how this special effect be composited in real time using multiple images within multiple layers inside of the Galaxy Watch Designer.

The gyroscope sensor then attaches itself to each image individually, and moves each image individually, and the effect is then created within the composite, combined with the Z-order layering and alpha channel transparency.

This is why I included the advanced topics on GIMP 2.10 and digital image compositing in this book, because they are necessary to create advanced watch face designs, as you can see looking at these Samples Projects in the Galaxy Watch Designer. This work process is an important one to master for watch face designers!

I have clicked the white X in the bg or Background image layer, so that you can see (and test) the foot (left and right) images (layers), as can be seen in Figure 11-19.

Click the right (foot) layer, and take a look at the Gyro Effect Tab for the image, which can be seen in Figure 11-20 (notice that your bg or background layer is now hidden using the white X selector in the layer, so that we can better see the two foot alpha channel images).

The Gyro Effect XY Tab setting is at -180 X pixels and -186 Y pixels. When you test this watch face, the edge of the left foot graphic is showing as seen in Figure 11-21. This represents a mistake at Gyro X Slider 90 degrees and Gyro Y Slider -90 degrees, as is shown in the Run (emulator) pane in Figure 11-20.

This mistake does not show up in Figure 11-19, as the Gyro Slider X and Y settings are at 32 and -46, respectively, placing the two foot images (intact) in the watch face’s field of view.

However, the left foot has been positioned further inside the watch face due to the 90,-90 Gyro X, Y settings, so let’s fix this mistake.

As an exercise, and to learn more about Gyro Effect settings, try and adjust the Inner Pivot X and Y settings in the Gyro XY Tab, in order to fix this problem, which can be seen in the Run (emulator) Test pane in Figure 11-20.

The fix for this positioning problem turns out to be a relatively simple one. What I did was to drag the right foot image out of the way, as the right foot image overlaps the left foot image, all the way outside of the preview circle, and then I grabbed the left foot image and pulled it downward about the same amount as it protruded into the circle (watch face) which is what showed the mistake in the first place.

This changed the Gyro Effect Inner Pivot settings accordingly, which can be seen as -179 degrees and -220 degrees in Figure 11-22 (I encircled it in Red). That was fairly simple, and when I test the Gyro Effect using the Run (emulator) icon pane in Figure 11-21, at the 90, -90 Slider settings, the cut in the left foot graphic is now hidden behind the edge of the watch face design.

This is exactly what we were trying to achieve – we have fixed the Sample Fly in the sky watch face design to be perfect! Great job!

The fix for this problem is shown in Figure 11-22 (outlined), and the left foot layer now moves at -179 and -220 and covers up that cut.

As you can see in the GWD Run (emulator) testing pane, seen in Figure 11-21, the two feet are now showing correctly within the watch face design, at X 90 degrees (Slider) and Y -90 degrees (Slider).

In Figure 11-22, both feet are visible more underneath the edge of the background, and protrude into the watch face less, thus fixing this problem, which becomes apparent when the Gyro X Slider is set at 90 degrees and when the Gyro Y Slider is at -90 degrees, as can be seen in Figures 11-20 and 11-21.

Thus, the mistake in this Sample “Fly in the sky” watch face design has now been fixed, and the Fly in the sky 2 watch face project has been saved, using File ➤ Save As, so you can reference it along with the other couple dozen .GWD files included with this book.

In the next chapter, we’ll take a look at how to add weather data into your watch face design, by using a Weather API from an open-source provider, much as we have been doing with everything else (CC0 or Creative Commons Zero, GIMP 2.10.8, InkScape, Tizen, etc.) within this book, so that everything is readily accessible to the readers and developers.

Summary

In this chapter, we looked at how to incorporate the gyroscope sensor output into your watch face design, using the Gyro Effect section of the Properties pane in the Galaxy Watch Designer. Gyroscopic effects can be added in any watch face component which includes this sub-section in its Properties pane. We went over the sub-sections of the Gyro Effect in the first section of the chapter, including Range, Dimension X, Dimension Y, Inner Pivot X, Inner Pivot Y, Rotate, and Opacity. Next, we looked at how to add Gyroscopic data to a watch face component.

We also looked at how to learn more Gyro Effect features using the watch face design samples which are included with Galaxy Watch Designer, in order to learn new Galaxy Watch Designer features.