Do More with Gyro: What Designers Need to Know
Josue Bustos
Samsung Technical Evangelist
Over the past few months, we’ve been exploring various design elements for Samsung Gear watch faces including the Gear Watch Design tool, design tips and tricks, and much more. Today, I want to help you get to the next step, with details around Gyro effect using Gear Watch Designer 1.5.3.
Let's get started, shall we?
What is a Gyro Anyway?
Gyro is short for the gyroscope. It’s a device that uses earth’s gravity for measuring and maintaining orientation and angular velocity. The Samsung Gear S series and the Samsung Gear Fit series, including the Samsung VR Controller, all have embedded gyroscope sensors in their hardware.
As a developer, you may have implemented this feature with a few lines of code. However, with Gear Watch Designer, all you have to do is modify a few values in three separate tabs to create the effect you need.
With Gyro, for example, you can create a parallax effect that gives the user the sense of depth and distance. As a matter of fact, this sounds just like a technique that artists use all the time. In the traditional fine art world, we call this perspective.
Using a myriad of creative, visual techniques and your preferred graphic editing tool, you can create unbelievable and dynamic watch faces. The sky’s the limit.
The Gyro Effect Property Tabs
Today, in Gear Watch Designer 1.5.3 you are now able to add Gyro properties to text and digital clock components. The Gyro effect property comes with three tabs: Gyro XY, Gyro X, and Gyro Y.
You can only modify either of the X or Y inner pivots once for the Gyro X or Gyro Y tabs. In the Gyro XY tab, adjusting the inner pivot Y will duplicate the value to the inner pivot X input box. You cannot change all four values at the same time. Only two values are allowed at a time for either inner pivot X or Y.
Take as much time as you need to experiment with these controls. There is no right or wrong way to approach creativity. Let’s go a bit further and talk about the range, dimension, and inner pivot properties.
Range
The range property comes with three input boxes to control the position of your component. The lowest numerical value you can enter is 0, and the max is 90. You can use these values to create the illusion of speed. To demonstrate this, view the boomerang example below.
BOOMERANGE VIDEO
Dimension X and Y
Use dimension X and Y to transform the width or height of your component. For example, adding a positive value of 100% to your Y input box will increase the size of your component and adding a negative 100% value will shrink your component.
Inner Pivot X and Y
Use the inner pivot to control the direction of your component on the X or Y axis. For example, the X-axis runs across the 6 and 12 o’clock markers and the Y-axis runs across the 3 and 9 o’clock markers on an analog watch face.
If I want my component to move up and down along the X-axis, I will navigate to the Gyro X tab and change the inner pivot value to positive 180 and minus 180. Note: Having two positives or two negatives on one inner pivot X or Y control will create a boomerang effect.0
Rotate
Use the negative and positive rotate properties to rotate your component clockwise or counterclockwise. To apply a clockwise effect on your component, make sure that your property value is positive and negative, not positive and positive and so on.
Opacity
The opacity property controls work similar to other graphic editing tools with some minor differences. For example, to make your opaque component translucent you must add a negative value.
Though we have only scratched the surface, working with the Gyro effect properties is one of many ways to creating a striking watch face for your users.
Where to Go From here?
If you are new to watch face design and development using Gear Watch Designer and you would like to learn more about watch face design concepts and best practices, we have provided a few links below to get you started.
New to Gear Watch Designer tool? Getting started with Gear Watch Designer is easy. Learn the basic concepts from the Gear Watch Designer tutorial.
Ready to Publish? Learn more about how to distribute your watch face apps by heading over to the Samsung Developer website.
Need More Downloads? The Samsung Developer Program gives you access to development and promotional tools. Become a member to get started.
