Search

Filter

Code lab 7
Sorry, no results
found for "Watch Face Studio" on the website

Learn Code Lab

codelab

Customize styles of a watch face with Watch Face Studio

customize styles of a watch face with watch face studio objective learn how to easily customize the style of a watch face using the customization editor in watch face studio know how to make your watch face respond to your step count using conditional lines overview watch face studio is a graphic authoring tool that enables you to create watch faces for wear os it offers a simple and intuitive way to add images and components, and to configure the watch movement without any coding watch face studio supports watch faces for the galaxy watch4 or newer version, and other watch devices that run on the same platform the style in watch face studio allows you to modify the style of the selected layer you can define image styles and theme color palettes that the user can choose from to customize their watch the customization editor in wfs enables you to refine, organize, name, and preview the styles you have defined for the watch conditional lines let you show and hide components on your watch face and control the behavior of the components use conditional lines to change the look of your watch face in response to certain conditions, such as the time and event, such as unread notifications set up your environment you will need the following watch face studio galaxy watch4 or newer smart watch running on wear os3 or higher sample project here is a sample project for this code lab download it and start your learning experience! style customization sample project 385 30 kb start your project download the sample project file, and click open project in watch face studio locate the downloaded sample project, and then click open add styles to the watch hands and index styles can be added for image-based layers such as icons, index, and hand component layers the watch face supports up to 10 image styles in the style tab, add a file of the same type as the existing image in the layer select the watch hand named min_hand click on the style tab click the + button to add more minute hands simply select the first three images repeat the previous steps for the hour hand and index create style sets go to the style tab and click on customization editor select min_hand, hour_hand, and index_line merge these by using right-click on your mouse change the name of the style sets using text id click on text id of the previously merged style set then, click the add new button set the id name to id_time and the default value to time then, click ok now, you can change the name of your style set click again on the text id and search for the id name that you just set here, the name and default value for your style set are changed finally, repeat the same thing for the background merge the other components to make a single background using the text id, change the name of the style set to id_background and the default value to background modify the theme color palette the theme color palette is a set of colors that you can use on a specific design component each palette can have up to three colors the watch face supports up to 30 theme colors here, you add a new set of colors for the month component go to the style tab under the theme color palette, click the + button choose a color from the palette you can change the other two colors by clicking on the color box preview your watch face using customization editor at this point, you have created custom styles for the watch hands and index, background, and color you can use the run pane and customization editor to preview how the watch face looks like when changing different styles open the run pane in a separate window and click customization editor in the customization editor, you can see the three tabs background, color, and time go to each tab and preview the different custom styles that you’ve created use conditional lines for step count use the conditional lines to make the step count on your watch face respond to certain conditions here, you want to show different images depending on the step count percentage 0% to 20%, 21% to 80%, and 81% to 100% click on the + button and select steps as a conditional line click on the steps icon to view the default conditional lines for all components select the sc_initial component then, double-click on the layer of its conditional line a warning prompts you that any existing conditional lines will be overwritten, simply click ok now, you can start changing the conditional line for the sc_initial component drag the start of the bar to 0% and drag the end of the bar to 20% this sets the condition that the sc_initial image visually appears on the watch face when the step percentage is from 0% to 20% for the sc_moderate component, set the conditional line from 21% to 80%, and for the sc_good component, set it from 81% to 100% this makes the sc_moderate and sc_good images to visually appear on the mentioned step count percentages tipread apply conditional lines on watch faces to know more about conditional line test the watch face in the run pane, click the preview watch face icon and you can run the created watch face with different custom designs to test your watch face, you need to connect a watch device to the same network as your computer in watch face studio, select run on device select the connected watch device you want to test with if your device is not detected automatically, click scan devices to detect your device or enter its ip address manually by clicking the + button noteto run the watch face successfully, you may need to configure its always-on display to avoid any error when you run it on your watch for more details about testing your watch faces, click here you're done! congratulations! you have successfully achieved the goal of this code lab now, you can create a watch face using style and conditional lines in watch face studio by yourself! if you face any trouble, you may download this file style customization complete project 425 73 kb to learn more about watch face studio, visit developer samsung com/watch-face-studio

https://developer.samsung.com/codelab/watch-face-studio/style-customization.html

Learn Code Lab

codelab

Apply gyro effects to a watch face using Watch Face Studio

apply gyro effects to a watch face using watch face studio objective learn how to change the appearance of your watch face as the watch tilts in different directions by applying gyro effects using watch face studio overview watch face studio is a graphical authoring tool that enables you to design watch faces for the wear os smartwatch ecosystem, including galaxy watch4 and newer versions it provides easy and simple features, such as gyro effects, for creating attractive and dynamic watch faces without coding gyro effects are a feature in watch face studio, which uses the watch's gyro sensor to animate or alter the look of watch faces the effects are triggered when the watch is tilted within the -90° to 90° tilt angle range along the x and y axes see illustration below a tilt angle of 0° on both axes indicates that the watch rests on a flat surface the following shows the expected tilt angle values when the watch tilts 90° in different directions direction of tilt tilt angle clockwise along the y-axis or tilt forward y = -90° counterclockwise along the y-axis or tilt backward y = 90° clockwise along the x-axis or tilt to the right x = 90° counterclockwise along the x-axis or tilt to the left x = -90° set up your environment you will need the following watch face studio latest version galaxy watch4 or newer smart watch running on wear os api 30 or higher sample project here is a sample project for you to start coding in this code lab download it and start your learning experience! gyro effects sample project 322 00 kb start your project to load the sample project in watch face studio click open project locate the downloaded file and click open the sample project is a premade watch face design it contains a background image, a digital clock, and a date notein watch face studio, you can add a digital clock component in different formats such as hh, mm, ss, or hh mm ss setting the digital time properties, such as color and dimension, per digit is also possible when you choose a component from variable options the project also contains three ellipses two ellipses with tag expressions in rotate > angle properties to represent the analog time hour and second and one ellipse as the background of the digital hour in the style tab, you can see the watch face's different theme color palettes resize a component when tilted forward or backward as the watch tilts, a component can enlarge or shrink relative to its pivot when applying gyro effects the pivot is the point at the center of the component the component remains at the same position as it gets bigger or smaller select the time background component in properties, you can see that the component's dimension width x height is 100px by 100px select apply gyro to show the properties of gyro effects initially, a component does not resize, move, rotate, or change opacity when you tilt the watch in any direction the gyro effect occurs when you set the changing to properties higher or lower than the default values to resize the component when the watch tilts forward or backward, go to y-axis properties and set the scale width and height to the following 70% for -90° to 0° range 130% for 0° to 90° range in the run pane, you can simulate the rotation of the watch the component enlarges from 100% to 130% as the watch tilts backward and shrinks to 70% as the watch tilts forward notewhen you drag the gyro joystick upward, it simulates the backward rotation of the watch similarly, when you move the joystick downward, it simulates the forward rotation rotate a component when tilted to the left or right in gyro mode, a component can rotate around its pivot when a component rotates, its position remains the same select the digital date component the format of the digital date is a curved text, and its pivot is at the center of the canvas inner pivot x = 225px, inner pivot y = 225px enable gyro effects then, change the rotation angle to -90° for the following tilt angle ranges along the x-axis -90° to 0° 0° to 90° as the watch tilts to the left or right, the date component rotates up to 90° gradually counter-clockwise change the appearance of the background image based on the adjusted tilt angle range range values define how tilted the watch should be for a component to resize, rotate, appear, or move to the maximum value you set for example, when you set the range from 0° to 45° along the x-axis and the scale to 200%, the component will enlarge twice from its original size once the watch reaches the 45° tilt angle to the right select the background image change the opacity of the components to 0° for the following ranges -45° to 0° along the x-axis 0° to 45° along the x-axis -45° to 0° along the y-axis as the watch tilts in any direction other than backward, the background image slowly disappears as it approaches the 45° tilt angle then, for the 0° to 45° range along the y-axis, change the rotation angle to 360° to rotate the background image clockwise as the watch tilts backward test the watch face in the run pane, click the preview watch face icon move the gyro simulator joystick to see how the appearance of time background, digital date, and background image changes to test your watch face on a smartwatch, you need to connect a watch device to the same network as your computer in watch face studio, select run on device select the connected watch device you want to test with if your device is not detected automatically, click scan devices to detect your device or enter its ip address manually by clicking the + button notethe always-on display is already set in the project to run the watch face successfully, you may need to configure its always-on display to avoid any error when you click run on device you’re done! congratulations! you have successfully achieved the goal of this code lab now, you can apply gyro effects using watch face studio to change the appearance of your watch face all by yourself! if you’re having trouble, you may download this file gyro effects complete project 322 02 kb to learn more about watch face studio, visit developer samsung com/watch-face-studio

https://developer.samsung.com/codelab/watch-face-studio/gyro-effects.html

Learn Code Lab

codelab

Customize Flex Window using Good Lock plugin on Watch Face Studio

customize flex window using good lock plugin on watch face studio objective learn to customize a clock face for your flex window using watch face studio's good lock plugin called clockface overview watch face studio wfs is a graphic authoring tool that enables you to create watch faces for wear os smartwatches using good lock plugins, you can also create a cover screen design for galaxy z flip4 and z flip5 wfs good lock plugins enable watch face studio to create customization elements for a specific good lock application good lock is a family of applications that allows users to customize various aspects of their galaxy mobile device, such as the lock screen, home screen, and clock face clockface plugin, one of the good lock plugins, allows you to create clock faces that you can use on a mobile device through the clockface module of good lock app clockface enables users to customize the clock face on their mobile device's lock screen, always on display aod , and cover screen it is part of the good lock family of applications for detailed information, see good lock plugin set up your environment you will need the following watch face studio latest version clockface plugin installation file galaxy z flip5 with good lock app installed clockface module installed within good lock app sample project here is a sample project for this code lab download it and start your learning experience! flex window customization sample project 473 53 kb initial setup from the main menu ☰, choose preferences go to the plugins tab and click the install plugin button you can click the download plugin button to download the installation file locate the installation file and click ok after adding clockface plugin to plugins list install the good lock app in galaxy z flip5 then, download and install the clockface module from good lock app start your project to load the sample project in watch face studio click open project locate the downloaded file, then click open the sample project is a premade watch face design with preloaded images, including a background, trees, clouds, and more it also contains analog hands and a progress bar to represent step count in the style tab, you can see the watch face's different theme color palette you can see other options for background, analog hands, and color when you click the customization editor button noteto learn how to create different watch face designs in one project, see customize styles of a watch face create a rectangular clock face design from a circular watch face the usual shape of a watch face design that you can create in watch face studio is circular using the clockface plugin, you can set the project type as coverscreen, which allows the creation of rectangular designs for galaxy z flip4 and z flip5's cover screen the sample project is a circular watch face to change the design to rectangle click the watch face studio logo to go back to the dashboard click the three dots menu next to the sample project you added to show additional options select create project from enter your project name, keep coverscreen as type, and select galaxy z flip5 for size some features of a watch face design made for a smartwatch, such as showing step count data, might not work for the flex window it is suggested to delete unsupported features when you modify the project after clicking ok in the dialog box, you can now see a new project with a rectangle canvas right-click on the step_count group and choose delete to remove all components related to step count redesign the project for flex window you need to adjust some components of the newly created project to fit with the flex window to do this resize all images as a group select the background group hold down the shift key move the mouse pointer over one of the corner handles, then click and drag the mouse to resize the images or, you can change the dimension's width and height of the background group in the properties tab adjust the x and y placements to reposition the images replace analog hands with digital clock depending on your preference, you can display analog hands or digital clocks on your flex window but for this code lab activity, change the time display with a digital clock remove the time group, which includes analog hands and an index click add component > digital clock > time in text appearance properties, change font type and size edit the tag expression in text field with [hour_1_12_z] [min_z] to only show the current time in 12-hour format and minutes to indicate whether the time is am or pm, add a text component and adjust font type and size in text field, enter the [ampm] tag as value lastly, move the month component anywhere in the canvas and adjust its text appearance display the clock design on flex window to install and display the cover screen design on your flex window, you need to connect the galaxy z flip5 to the computer using usb or wifi in watch face studio, select project > run on device select the connected galaxy z flip5 you want to test with if your device is not detected automatically, click scan devices to see your device or enter its ip address manually by clicking the + button open the good lock app on your device and click the clockface module choose cover screen as clock style and select your clock design choose the edit button to customize the style or tap the check button to apply the design you're done! congratulations! you have successfully achieved the goal of this code lab now, you can customize a clock face for your flex window by yourself! if you face any trouble, you may download this file flex window customization complete project 420 44 kb to learn more about watch face studio, visit developer samsung com/watch-face-studio

https://developer.samsung.com/codelab/watch-face-studio/flex-window-customization.html

Learn Code Lab

codelab

Apply Conditional Lines on Watch Faces

apply conditional lines on watch faces objective learn how to create a watch face that responds to time and notification using conditional lines in watch face studio overview watch face studio is a graphic authoring tool that enables you to create and design watch faces for watches running on wear os it offers a simple and intuitive way to add images and components, and to configure the watch movement without any coding watch face studio supports watch faces for the galaxy watch4 or newer version, and other watch devices that run on the same platform conditional lines in watch face studio lets users easily control components and its behaviors on watch faces you can make your watch faces change dynamically based on time, step-count, or battery using conditional lines now, with the latest version of watch face studio, you can also set conditional lines based from events such as low battery, unread notification, or scenarios without any events set up your environment you will need the following watch face studio latest version galaxy watch4 or newer any supported wear os watch sample project here is a sample project for this code lab download it and start your learning experience! conditional lines sample project 2 43 mb start your project download the sample project file, and click open project in watch face studio locate the downloaded file, then click open apply conditional lines based on time using conditional lines in watch face studio, your watch face can visually change its design based on the time of the day here, you can change the background image of the watch face based on certain time intervals by setting the timeline condition of two background images, named background_day and background_night click the show/hide timeline icon to show the frame area notice that there's a default conditional line based on time for every component each conditional line is represented by a bar in the timeline and you can adjust it using the slider at the end of the bar collapse the background group containing the two background images in the timeline area of background_day, click on its bar and hover your mouse at the start of the bar drag the start of the bar to 06 00 00h and drag the end of the bar to 18 00 00h this sets the condition that background_day visually appears on the watch face from 6 00 am until 6 00 pm tipto quickly navigate on the timeline, hold shift + mouse scroll learn more about keyboard shortcuts, by referring to this guide next, for background_night, set the first time condition from 00 00 00h to 06 00 00h by dragging its bar respectively at the start of 18 00 00h, double-click at the timeline area to create a 2nd bar at that specific time drag the end of the bar to 00 00 00h, at the rightmost part of the timeline this makes background_night to appear conditionally from 6 00 pm until 6 00am on your watch face now, it's time to check if your watch face responds correctly based on the time of the day click show/hide run button to open the run panel in watch face studio move the time control slider from 06 00 00h to 18 00 00h and the watch face should show background_day as its background similarly, check if the watch face changes its background to background_night when the time is from 18 00 00h to 06 00 00h set the unread notification event make your watch face change dynamically based on a specific device event in this step, add an event for unread notifications on notification_envelope, an animation component included in the sample project click + or add conditional line and select event noteto remove conditional line icons such as the battery, steps, 12h/ 24h, or event, simply right-click on it and select remove click show/hide event to start configuring the event-based conditional line for notification_envelope on the notification_envelope layer, double-click on the event frame in the warning window, click ok in this case, all existing conditional frames for this layer are deleted afterward, a bar is created for the event-based conditional line noteeach layer responds to only one type of condition next, drag the bar from no event to unread notification noteno event is used if there is no condition set on either battery low or unread notification events check if the notification_envelope animation component appears on your watch face whenever there's an unread notification click play run preview and move the unread notification slider in the run panel when the unread notification is set to a value of 1 or more, the animation component should visually appear on your watch face test the watch face to test your watch face, you need to connect a watch device to the same network as your computer in watch face studio, select run on device select the connected watch device you want to test with if your device is not detected automatically, click scan devices to detect your device or enter its ip address manually by clicking the + button notethe always-on display is already set in the project to run the watch face successfully, you may need to configure its always-on display to avoid any error when you run on device you're done! congratulations! you have successfully achieved the goal of this code lab now, you can use conditional lines in watch face studio, all by yourself! if you're having trouble, you may download this file conditional lines complete project 2 43 mb to learn more about watch face studio, visit developer samsung com/watch-face-studio

https://developer.samsung.com/codelab/watch-face-studio/conditional-lines.html

Learn Code Lab

codelab

Design a Watch Face using Mask and Moon Phase Tags

design a watch face using mask and moon phase tags objective design a watch face that shows the eight phases of the moon using the mask feature and moon phase tags in watch face studio overview watch face studio is a graphical authoring tool that enables you to design watch faces for the wear os smartwatch ecosystem, including galaxy watch4 and newer versions it provides easy and simple features, such as masking and tag expression, for creating attractive and dynamic watch faces without coding masking is the technique of hiding or revealing parts of a layer based on the shape outline of the bottom layer you can use it to enhance visual impact, create special effects, or draw focus to specific areas of an image tag expressions are conditions in watch face studio that let you dynamically configure the movement and data of a watch face what is moon phase? the moon completes its orbit for approximately 28 days, undergoing a singular lunar cycle from new moon to new moon this lunar cycle is divided into eight distinct phases with 28 positions the visible appearance of the moon, as observed from earth, is referred to as its phase moon phase position days type of moon phase 0~0 5 new moon 0 5~0 65 evening crescent 7 first quarter 7 5~13 5 waxing gibbous 14 full moon 14 5~20 5 waning gibbous 21 last quarter 21 5~27 5 morning crescent 27 5~28 new moon set up your environment you will need the following watch face studio galaxy watch4 or newer smart watch running on wear os3 or higher sample project here is a sample project for this code lab download it and start your learning experience! moon phase sample project 1 41 mb start your project download the sample project file, and click open project in watch face studio locate the downloaded file, then click open show grid, coordinate axis and rulers to set the different positions of the moon accurately and easily, you can utilize the coordinate system of the watch face studio select the show grid, show coordinate axis, and show rulers options from the view menu it will display a grid on the canvas, the x and y axis, and rulers for precise measurement and placement of components the center placement of the entire watch face is 225,225 noteyou can change the grid's color from the preferences > view create two mask groups when you mask two or more images, the shape of the bottom-most layer determines the visible area of the mask group the layers above it appear only through the shape outline of the bottom layer for example, if you place a square image on the bottom layer and an image in the layer above it, the image appears only through the square outline of the bottom layer the sample project consists of two similar images of the moon moon_qgf and moon_nc and two different shapes as bottom layers moon_qgf_layer and moon_nc_layer using these components, create two mask groups to use for simulating eight major moon phases select moon_qgf and moon_qgf_layer images and click mask rename the mask group as moon_qgf_mask it will cover five moon phases the first quarter, waxing gibbous, full moon, waning gibbous, and last quarter do the same for moon_nc and moon_nc_layer to cover the remaining moon phases the new moon, evening crescent, and morning crescent rename the mask group as moon_nc_mask tipread use masks to get creative with watch faces to explore other possibilities of masking add tag expressions to simulate different moon phases watch face studio provides tags to determine the moon phase's type moon_ty and position moon_po the corresponding tag values per moon phase are listed in the table below moon phase [moon_ty] values [moon_po] values new moon 0 0~0 5 evening crescent 1 0 5~0 65 first quarter 2 7 waxing gibbous 3 7 5~13 5 full moon 4 14 waning gibbous 5 14 5~20 5 last quarter 6 21 morning crescent 7 21 5~27 5 new moon 0 27 5~28 using tag expressions, adjust the properties of each mask group and its bottom-most layer to dynamically show each moon phase in different placements you can lay out the moon phases as below gibbous, quarter, and full moon the moon_qgf_mask currently displays the full moon, and its placement coordinate is 195, 23 use the grid lines and rulers to determine the placement of the other four moon phases the first quarter, waxing gibbous, waning gibbous, and last quarter add tag expressions to the placement x and y and color properties of moon_qgf_mask placement - x coordinate move the mask group to the left of the full moon for the first quarter and waxing gibbous and to the right for the waning gibbous and last quarter replace each x with the distance in pixels between the x-placement of the full moon and the preferred x-placement of the other four moon phases [moon_ty] == 2 ? -x [moon_ty] == 3 ? -x [moon_ty] == 5 ? + x [moon_ty] == 6 ? + x 0 placement - y coordinate move the mask group down replace each y with the distance between the y-placement of the full moon and the preferred y-placement of the other four moon phases [moon_ty] == 2 ? + y [moon_ty] == 3 ? + y [moon_ty] == 5 ? + y [moon_ty] == 6 ? + y 0 color - opacity show moon_qgf_mask only if the mask group covers the current moon phase otherwise, hide it [moon_ty] ==2 + [moon_ty] ==3 + [moon_ty] ==4 + [moon_ty] ==5 + [moon_ty] ==6 ?0 -100 change the moon's appearance by adjusting the dimension and image placement of moon_qgf_layer using tag expressions placement - x coordinate move the image to the right of the moon image for the first quarter and waxing gibbous and to the right for the waning gibbous and last quarter replace each x with the length of the portion to hide if the moon image is 50px and the quarter moon shows only half of it, then the portion to hide is ~25px [moon_ty] == 2 ? +x [moon_ty] == 3 ? +x [moon_ty] == 5 ? -x [moon_ty] == 6 ? - x 0 placement - y coordinate move the image up for the first and last quarter [moon_ty] == 2 ? -y [moon_ty] == 6 ? -y 0 dimension - height for the first and last quarter, adjust the height h to transform the image from a circle to an oval shape to simulate the appearance of a quarter moon [moon_ty] ==2 ? h [moon_ty] ==6 ? h 0 crescent and new moon the moon_nc_mask currently displays the evening crescent, and its placement coordinate is 6, 110 changing its placement and dimension properties can show the rest of the moon phases the morning crescent and the new moon similarly, add tag expressions to the properties of moon_nc_mask placement - x coordinate move the mask group slightly to the left of the evening crescent when the new moon's position is 0 5 or less otherwise, move the mask group to the opposite side of the watch face; the same for the morning crescent replace each x with the distance between the x-placement of the evening crescent and the preferred x-placement of the other moon phases [moon_ty] == 0 ? [moon_po] <= 0 5 ? -x +x [moon_ty] == 7 ? +x 0 placement - y coordinate move the mask group down for the new moon replace y with the distance between the y-placement of the evening crescent and the preferred y-placement of the new moon [moon_ty] == 0 ? +y 0 color - opacity show moon_nc_mask only if the mask group covers the current moon phase otherwise, hide it [moon_ty] ==0 + [moon_ty] ==1 + [moon_ty] ==7 ?0 -100 change the moon's appearance by adjusting the image placement of moon_nc_layer using tag expressions placement - x coordinate move the image slightly to the right of the moon image when the new moon's position is 0 5 or less otherwise, move the image to the left replace each y with the distance between the initial x-placement of the layer and the preferred x-placement; to hide portions of the moon image to simulate the appearance of the other moon phases [moon_ty] == 0 ? [moon_po] <= 0 5 ? +y -y [moon_ty] == 7 ? -y 0 test the watch face in the run pane, click the preview watch face icon adjust the date to see the moon change from one phase to another you can check for a complete lunar cycle from 18 july 2023 to 16 august 2023 to test your watch face on a smart watch, you need to connect a watch device to the same network as your computer in watch face studio, select run on device select the connected watch device you want to test with if your device is not detected automatically, click scan devices to detect your device or enter its ip address manually by clicking the + button notethe always-on display is already set in the project to run the watch face successfully, you may need to configure its always-on display to avoid any error when you run on device you're done! congratulations! you have successfully achieved the goal of this code lab now, you can use mask and moon phase tags for making a dynamic watch face in watch face studio all by yourself! if you're having trouble, you may download this file moon phase complete project 1 87 mb to learn more about watch face studio, visit developer samsung com/watch-face-studio

https://developer.samsung.com/codelab/watch-face-studio/dynamic-moon-phase.html

Learn Code Lab

codelab

Create a Watch Face Using Tag Expressions

create a watch face using tag expressions objective learn how to create a watch face that responds based on the date, time, step count, heart rate, and battery level using tag expressions in watch face studio in this code lab, you will create a basic watch face with complications such as step count, heart rate, and battery level later, you will improve its functionalities and make it visually dynamic using tag expressions overview watch face studio is a graphic authoring tool that enables you to create watch faces for wear os it offers a simple and intuitive way to add images and components, and to configure the watch movement without any coding watch face studio supports watch faces for the galaxy watch4 or newer version, and other watch devices that run on the same platform tag expressions are conditions in watch face studio that allows you to customize watch face through dynamic configuration of its movement and data set up your environment you will need the following watch face studio galaxy watch4 or newer any supported wear os watch start your project create a new project and input project name a blank studio will show upon clicking ok add analog hands and index watch face studio allows you to add components like text, image, shape, analog hands, and index in a watch face for your watch to have the look and feel of an analog watch, add the following components time > index time > analog hands > minute time > analog hands > hour notethe index and watch hand images used in this code lab are no longer included in the latest version of the watch face studio however, you can choose a design for the index and watch hands from available images in the resources folder you can also create and add your own design you will see that the hands move automatically and in sync with the device time select all the newly added components and click group rename the group as group_analogtime use a progress bar for seconds a component like a progress bar can be used to show how much of the process is completed and how much is left in this step, you will use it to show how far or close the next minute is to use a progress bar as seconds click add component and select progress bar rename the component to seconds move seconds behind group_analogtime in properties of seconds, do the following a adjust the dimension width and height to 395 b align the component to the center c drag the background slider to 0% d make sure that the type is a circular progress bar; otherwise change it e in range setting, change value to 0 and click tags beside it to open the tags window f type in [sec] it means that the value from 0 will increment as the value of the second increases g set max value to 59 since it is the maximum value of [sec] notein this scenario, the progress bar disappears in the canvas as the preview only uses the base value, which is 0 however, the component is still present in run format and position a digital clock in this step, you will learn how grouping works and affects its components you will also learn how to format the date and time using tags to format and position a digital clock, you need to add a digital clock > time twice rename them as hour and minute, respectively add a digital clock > date and rename the component as date put them in one group and rename it as group_digitaltime go to the properties of hour and change the text appearance to 80 do the same for minute adjust the text size of date to 15 adjust the y placements of the individual components to look like the image below when you change a certain component, it won’t affect other components in the group format hour to only show the time in hour a go to its properties and click the tags button in text field b replace text field value with [hour_0_23_z] to show the current hour with leading zero do the same for minute but replace the text field value with [min_z] to show the current minute in an hour with leading zero go to group_digitaltime placement properties and align it horizontally after that, place it to the left you will see the components adjusted as a group utilize health features and battery level watch face studio also allows you to utilize data like step count, heart rate, and battery level follow the steps below to show these real-time data using tags on texts or progress bar battery level add a circular progress bar and rename the component as battery level drag the background slider to 0% go to value properties replace the value with 0 and, in tags, input or choose [batt_per] to use the current battery percentage as the value add a circle complication slot and rename it as battery icon complications are a set of components that can be handled as one group set the type to fixed and change the default provider to watch battery select short text as complication type and choose icon + text for layout select and move battery level and battery icon together to the bottom right heart rate add a circular progress bar and rename the component as heart rate drag the background slider to 0% go to value properties replace the value with 0 and, in tags, input or choose [hr] to use heart rate as value set the max value to 240 since it's the maximum heart rate a person can have add a text component and rename it as heart rate label in the text field, input heart rate and change the text size to 12 change the y placement to 195 add another text component and rename it as heart rate text in the text field, input [hr] and change the text size to 30 group heart rate, heart rate label, and heart rate text together rename the group as group_heartrate move the group_heartrate placement to the center right step count add a circular progress bar and rename the component as step count drag the background slider to 0% go to value properties replace the value with 0 and, in tags, input or choose [sc_per] to use the current percentage to the goal of step count add a circle complication slot and rename it as step count text set the type to fixed and change the default provider to step count select short text as complication type and choose text + title for layout it will now show "steps" as title and step count as text place the step count text in the center horizontally select and move step count and step count text together to the top right select group_digitaltime, group_batterylevel, group_heartrate, group_stepcount, battery icon, and step count text drag them behind group_analoghands and seconds by doing this, the analog hands would overlap the components make use of tag expressions you already have three progress bars that show data of battery level, heart rate, and step count this time, you will make these features more functional by changing the progress bars' color to red using tag expressions tag expressions are conditions that allow you to change the rotation, placement, behavior, and opacity of a component based on tag values it can alter your watch face's appearance dynamically as the tag value changes tag expressions support different types of operators – arithmetic, relational, logical, and ternary for this step, you will apply tag expressions on the color opacity but first, you will have to duplicate all the circular progress bars seconds, battery level, heart rate, and step count move all the duplicates to a new group called group_colorchange make sure that group_colorchange is behind all other groups change individual component’s color to #ffffff or white duplicate this group and rename it as group_background move it behind group_colorchange drag the background slider to 16% and remove tags in the value properties of each component of group_background change group_colorchange color to #ff001e or red group_colorchange will be used as components underneath when you set the opacity of the main components to 0 using tag expressions group_background will serve as gap fillers of each progress bar below are conditions that will trigger the opacity of the main components to become 0 and reveal the duplicated red components change the color of the battery level to red if the battery level is equal to or less than 20% go to group_batterylevel and select battery level navigate to color properties check if the color opacity value is 100 this will serve as the base value in tags, input [batt_per]<=20?-100 0 to subtract 100 from the base value of opacity if the battery level is equal to or less than 20 otherwise, the base opacity value remains the same in the run pane, adjust the device > watch battery to 20% or less, and you will see how the color will change to red change the color of step count to red if the goal hasn't been reached yet and the time is already 18 00 6 00 pm or beyond go to group_stepcount and select step count navigate to color properties check if the color opacity value is 100 this will serve as the base value in tags, input [sc]<[sc_goal] * [hour_0_23]>=18 ?-100 0 to subtract 100 from the base value of opacity if the step count is less than the goal, and if the value of hour in a day is 18 or beyond otherwise, the base opacity value remains the same play with the time control bar in the run pane and health > steps data to see how the color will change from blue to red change the color of the heart rate and seconds to red if the heart rate is below or above the normal go to group_heartrate and select heart rate navigate to color properties check if the color opacity value is 100 this will serve as the base value in tags, input [hr]<60 + [hr]>100 ?-100 0 to subtract 100 from the base value of opacity if the heart rate is below or above the normal 60-100 otherwise, it remains the same do the same for seconds test it in the run pane by adjusting the health > heart rate to below 60 or above 100, and you will see how the color will change to red prolong the battery life now that you already know what group and tag expressions are, it's about time for you to use both to your advantage it is observed that the darker a watch face design is, the longer the battery life can be to help the watch stay powered even when there’s a little battery left, you will need to decrease the opacity of the watch face when the battery level is equal to or less than 10% to do this, you have to select and combine all created groups and components, except for group analogtime, battery icon, and step count text, to a new group called group_watchface go to group_watchface color properties and change the base opacity value to 20 in tags, input [batt_per]<=10?0 80 to add 0 to the base value of opacity if the battery level is equal to or less than 10 otherwise, it adds 80 to the base value, making the watch face 100% visible adjust the device > watch battery to 10% or less, and you will see how most components' opacity decreased choose components for always-on always-on display is a feature that allows your galaxy watch to show the time without checking on it by pressing a button or lifting your hand in watch face studio, you can choose which group or component to display on the always-on by following these steps go to the always-on tab, to see the same set of components you added and grouped click the eye icon next to the group name to hide or make it visible hide group_watchface, battery icon, and step count text at this point, your always-on display will display a basic analog watch face whenever your watch is in idle mode test the watch face to test your watch face, you need to connect a watch device to the same network as your computer in watch face studio, select project > run on device select the connected watch device you want to test with if your device is not detected automatically, click scan devices to detect your device or enter its ip address manually by clicking the + button you're done! congratulations! you have successfully achieved the goal of this code lab now, you can create and design a watch face using tag expressions by yourself! if you're having trouble, you may download this file tag expression complete project 272 71 kb to learn more about watch face studio, visit developer samsung com/watch-face-studio

https://developer.samsung.com/codelab/watch-face-studio/tag-expression.html

Learn Code Lab

codelab

Transfer heart rate data from Galaxy Watch to a mobile device

transfer heart rate data from galaxy watch to a mobile device objective create a health app for galaxy watch, operating on wear os powered by samsung, to measure heart rate and inter-beat interval ibi , send data to a paired android phone, and create an android application for receiving data sent from a paired galaxy watch overview with this code lab, you can measure various health data using samsung health sensor sdk and send it to a paired android mobile device for further processing samsung health sensor sdk tracks various health data, but it cannot save or send collected results meanwhile, wearable data layer allows you to synchronize data from your galaxy watch to an android mobile device using a paired mobile device allows the data to be more organized by taking advantage of a bigger screen and better performance see samsung health sensor sdk descriptions for detailed information set up your environment you will need the following galaxy watch4 or newer android mobile device android studio latest version recommended java se development kit jdk 17 or later sample code here is a sample code for you to start coding in this code lab download it and start your learning experience! heart rate data transfer sample code 213 7 kb connect your galaxy watch to wi-fi go to settings > connection > wi-fi and make sure that the wi-fi is enabled from the list of available wi-fi networks, choose and connect to the same one as your pc turn on developer mode and adjust its settings on your watch, go to settings > about watch > software and tap on software version 5 times upon successful activation of developer mode, a toast message will display as on the image below afterwards, developer options will be visible under settings tap developer options and enable the following options adb debugging in developer options find wireless debugging turn on wireless debugging check always allow on this network and tap allow go back to developer options and click turn off automatic wi-fi notethere may be differences in settings depending on your one ui version connect your galaxy watch to android studio go to settings > developer options > wireless debugging and choose pair new device take note of the wi-fi pairing code, ip address & port in android studio, go to terminal and type adb pair <ip address> <port> <wi-fi pairing code> when prompted, tap always allow from this computer to allow debugging after successfully pairing, type adb connect <ip address of your watch> <port> upon successful connection, you will see the following message in the terminal connected to <ip address of your watch> now, you can run the app directly on your watch turn on developer mode for health platform to use the app, you need to enable developer mode in the health platform on your watch go to settings > apps > health platform quickly tap health platform title for 10 times this enables developer mode and displays [dev mode] below the title to stop using developer mode, quickly tap health platform title for 10 times to disable it set up your android device click on the following links to setup your android device enable developer options run apps on a hardware device connect the galaxy watch with you samsung mobile phone start your project in android studio, click open to open an existing project locate the downloaded android project hrdatatransfer-code-lab from the directory and click ok you should see both devices and applications available in android studio as in the screenshots below initiate heart rate tracking noteyou may refer to this blog post for more detailed analysis of the heart rate tracking using samsung health sensor sdk first, you need to connect to the healthtrackingservice to do that create connectionlistener, create healthtrackingservice object by invoking healthtrackingservice connectionlistener, context invoke healthtrackingservice connectservice when connected to the health tracking service, check the tracking capability the available trackers may vary depending on samsung health sensor sdk, health platform versions or watch hardware version use the gettrackingcapability function of the healthtrackingservice object obtain heart rate tracker object using the function healthtrackingservice gethealthtracker healthtrackertype heart_rate_continuous define event listener healthtracker trackereventlistener, where the heart rate values will be collected start tracking the tracker starts collecting heart rate data when healthtracker seteventlistener updatelistener is invoked, using the event listener collect heart data from the watch the updatelistener collects datapoint instances from the watch, which contains a collection of valuekey objects those objects contain heart rate, ibi values, and ibi statuses there's always one value for heart rate while the number of ibi values vary from 0-4 both ibi value and ibi status lists have the same size go to wear > java > data > com samsung health hrdatatransfer > data under ibidataparsing kt, provide the implementation for the function below /******************************************************************************* * [practice 1] get list of valid inter-beat interval values from a datapoint * - return arraylist<int> of valid ibi values validibilist * - if no ibi value is valid, return an empty arraylist * * var ibivalues is a list representing ibivalues up to 4 * var ibistatuses is a list of their statuses has the same size as ibivalues ------------------------------------------------------------------------------- * - hints * use local function isibivalid status, value to check validity of ibi * ****************************************************************************/ fun getvalidibilist datapoint datapoint arraylist<int> { val ibivalues = datapoint getvalue valuekey heartrateset ibi_list val ibistatuses = datapoint getvalue valuekey heartrateset ibi_status_list val validibilist = arraylist<int> //todo 1 return validibilist } check data sending capabilities for the watch once the heart rate tracker can collect data, set up the wearable data layer so it can send data to a paired android mobile device wearable data layer api provides data synchronization between wear os and android devices noteto know more about wearable data layer api, go here to determine if a remote mobile device is available, the wearable data layer api uses concept of capabilities not to be confused with samsung health sensor sdk’s tracking capabilities, providing information about available tracker types using the wearable data layer's capabilityclient, you can get information about nodes remote devices being able to consume messages from the watch go to wear > java > com samsung health hrdatatransfer > data in capabilityrepositoryimpl kt, and fill in the function below the purpose of this part is to filter all capabilities represented by allcapabilities argument by capability argument and return the set of nodes set<node> having this capability later on, we need those nodes to send the message to them /************************************************************************************** * [practice 2] check capabilities for reachable remote nodes devices * - return a set of node objects out of all capabilities represented by 2nd function * argument, having the capability represented by 1st function argument * - return empty set if no node has the capability -------------------------------------------------------------------------------------- * - hints * you might want to use filtervalues function on the given allcapabilities map * ***********************************************************************************/ override suspend fun getnodesforcapability capability string, allcapabilities map<node, set<string>> set<node> { //todo 2 } encode message for the watch before sending the results of the heart rate and ibi to the paired mobile device, you need to encode the message into a string for sending data to the paired mobile device we are using wearable data layer api’s messageclient object and its function sendmessage string nodeid, string path, byte[] message go to wear > java > com samsung health hrdatatransfer > domain in sendmessageusecase kt, fill in the function below and use json format to encode the list of results arraylist<trackeddata> into a string /*********************************************************************** * [practice 3] - encode heart rate & inter-beat interval into string * - encode function argument trackeddata into json format * - return the encoded string ----------------------------------------------------------------------- * - hint * use json encodetostring function **********************************************************************/ fun encodemessage trackeddata arraylist<trackeddata> string { //todo 3 } notetrackeddata is an object, containing data received from heart rate tracker’s single datapoint object @serializable data class trackeddata var hr int, var ibi arraylist<int> = arraylist run unit tests for your convenience, you will find an additional unit tests package this will let you verify your code changes even without using a physical watch or mobile device see the instruction below on how to run unit tests right click on com samsung health hrdatatransfer test , and execute run 'tests in 'com samsung health hrdatatransfer" command if you have completed all the tasks correctly, you will see all the unit tests pass successfully run the app after building the apks, you can run the applications on your watch to measure heart rate and ibi values, and on your mobile device to collect the data from your watch once the app starts, allow the app to receive data from the body sensors afterwards, it shows the application's main screen to get the heart rate and ibi values, tap the start button tap the send button to send the data to your mobile device notethe watch keeps last ~40 values of heart rate and ibi you’re done! congratulations! you have successfully achieved the goal of this code lab now, you can create a health app on a watch to measure heart rate and ibi, and develop a mobile app that receives that health data! if you face any trouble, you may download this file heart rate data transfer complete code 213 9 kb to learn more about samsung health, visit developer samsung com/health

https://developer.samsung.com/codelab/health/heart-rate-data-transfer.html