Search

Filter

Watch Face Studio 100
Sorry, no results
found for "Watch Face Studio" on the website

Learn Code Lab

codelab

Design a watch face with customizable edge complication slots and digital clock

design a watch face with customizable edge complication slots and digital clock objective learn how to add customizable edge complication slots and a digital clock on your watch face using watch face studio overview watch face studio is a graphical authoring tool designed to help users create watch faces for the wear os smartwatch ecosystem, including the galaxy watch4 and its newer versions it offers intuitive and user-friendly features for designing visually appealing and customizable watch faces without requiring coding skills with watch face studio, users can incorporate various components into their watch faces, such as digital clocks these clocks can be designed with different variations and further customized through the galaxy watch interface in addition to digital clocks and other watch face components, users can integrate complications into their designs complications display information from data sources, such as battery indicators or step counts, directly on the watch face you can display additional information on the watch face by adding a complication slot a complication slot consists of complication components and a slot bound the components implement the layout, while the slot bound acts as a cutout through which the complication component appears there are five types of complication slots circle, line, small box, large box, and edge this code lab focuses on adding edge complication slots to your watch face starting from watch face studio 1 8 7 beta , users can define all supported font styles for digital clocks that can be customized on the physical watch the studio also added a feature allowing users to design watch faces with edge complication slots set up your environment you will need the following watch face studio latest version galaxy watch4 or newer smartwatch running on wear os api 34 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! customizable edge complication and digital clock sample project 363 7 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 includes a background image that you can customize by adjusting the hue, saturation, lightness, or opacity to suit your preference add edge complications to the watch face there are two types of edge complication slots that you can add to the watch face duo and quadrant both appear along the edge of the watch face duo edge complication slot - composed of right and left edge complications quadrant edge complication slot - composed of right top, right bottom, left bottom, and left top edge complications you can only select one type per project to fit the design of the sample project, add a quadrant edge complication slot click add component then, in the complication slot section, select edge > quadrant noteyou cannot change the placement, dimension, or rotation angle of an edge complication slot however, you can delete or hide unused complications from the layer list, expand the quadrant edge complication layer select the right top edge complication and the left bottom edge complication right-click and choose delete notealthough you have already deleted a complication slot, it can still be restored to do this, right-click on the quadrant edge complication layer in the layer list and select the option to add the previously deleted complication back configure complications after adding the edge complication slots, you can configure its settings from the layer list, click the right bottom edge complication to edit its properties in the properties pane, go to complication settings and choose the following type fixed default provider watch battery complication type range value range value complication layout progress bar + icon + text notesetting the complication as fixed limits the data and provider to the values you defined customization of this complication on the physical watch or wearable app is not possible to test the complication, go to the run pane and adjust the watch battery slider the bar indicator updates based on the value of the watch battery next, go to the properties of the left top edge complication and choose the following for complication settings type editable supported types short text default provider step count short text complication layout icon + text + title to test the complication, go to the run pane and adjust the step count slider the complication text changes as you change the value of the slider you can also adjust the properties of each complication component for example, when you open the properties of title, you can change its text color add a variable digital clock there are two ways to display a digital clock on watch faces using a variable digital clock and a non-variable digital clock to understand the concept of these two types, start by adding a variable digital clock component to display hours and a colon go to add component > digital clock > variable select colon and h h for the hour adjust the placement and rotation angle of both components to complement the design with a variable digital clock, you can customize each subcomponent creatively for example, you can make the font of the first digit of the hour h10 bigger than the second digit h or place them in different positions adjust the properties of the first and second digits of the hour to have the same font size but with slightly different color tints h10 color #f5f680ff font size 70 h color #fde997ff font size 70 on the other hand, a non-variable digital clock is less flexible but acts as a single component, making it ideal for simpler watch faces to add a non-variable digital clock to display minutes go to add component > digital clock > mm adjust its placement, rotation angle, and text color to complement the design use bitmap font for minutes watch face studio supports the use of truetype and bitmap fonts by default, all text-based components, such as digital clocks, use truetype fonts truetype is the most common font format, utilizing vector-based outlines to define characters bitmap fonts, on the other hand, consist of fixed-size, pixel-based representations of characters, which have smaller file sizes and render directly as pixels, offering faster performance on low-power devices in watch face studio, bitmap fonts are used to replace predefined dynamic content, such as dates, time, and weather, in text and digital clock components this allows you to incorporate custom visual elements that align with your creative vision while maintaining functionality to use bitmap font on your watch face, follow these steps select mm from the layer list go to properties > font setting and select bitmap font click the gear icon to open the bitmap font setting for bitmap font 1 set the default font size to 50 click the + icon to add and assign bitmap images for each digit locate your bitmap images, select the image for the corresponding digit, and click open once you're done adding and assigning bitmap images for each digit, click ok to display the bitmap font as minutes noteyou can also add more bitmap fonts by opening the dropdown menu and selecting add bitmap font make the font style of the digital clock customizable to make the digital clock more customizable, you can apply styles use the style tab to define font styles for a digital clock layer this provides users with more customization options for their watch face noteyou can apply styles to digital clock fonts and image-based layers for detailed information, refer to the style tab documentation from the layer list, choose variable_hh > h10 and go to the style tab click the + button in truetype font to add font styles add fonts with bold font weights such as montserrat-bold, oswald-bold, and roboto-bold then, click the customization editor button in the style set pane, click the text id button beside id_system_style_set click the add new button to add a new text id then, input the following id id_h10_font default value 1st digit hour font then, select the newly added text id this helps users identify which components they are changing when customizing the style on a physical watch repeat the same process for h, and this time, add fonts with a medium font weight for the text id, input the following id id_h_font default value 2nd digit hour font next, add styles to a layer that uses a bitmap font select mm from the layer list and go to the style tab click the + button in bitmap font, then select add bitmap font to add and assign bitmap images for each digit set default font size to 50 click ok and input the name of your bitmap font then, click the customization editor button and modify the text id of the newly added style set using the following values id id_mm_font default value minute font to test the font styles you set, go to the run pane and choose font styles from the dropdown menu this allows you to preview how the selected styles will appear on the watch face tipyou can merge the styles by navigating to the customization editor select the style sets you want to merge, right-click, and then choose merge set test the watch face in the run pane click the preview watch face icon move the step count and watch battery sliders to see data changes in the edge complications as previously mentioned, to observe changes in the digital clock, adjust the time slider and select the font styles from the dropdown menu in the style section to test your watch face on a smartwatch, you need to connect your watch to the same network as your computer in watch face studio, select run on device select the connected watch you want to test with if your watch is not detected automatically, click scan devices to detect your device or enter its ip address manually by clicking the + button when the watch face is launched, touch and hold the watch screen to access the edit mode tap customize to choose font styles and complications 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 design a watch face with customizable edge complication slots and digital clock using watch face studio! if you’re having trouble, you may download this file customizable edge complication and digital clock complete project 420 8 kb to learn more about watch face studio, visit developer samsung com/watch-face-studio

https://developer.samsung.com/codelab/watch-face-studio/edge-complication-digital-clock.html

Watch Face Studio

doc

Overview

good lock plugin overview watch face studio wfs good lock plugins enable you to create custom skins for galaxy mobile devices in the same way as creating a watch face, you can use wfs's intuitive interface to add images, watch elements, and watch movements to your custom skin the plugins also allow you to test the custom skin on a connected galaxy mobile device for information about using wfs, see watch face studio user guide to customize an android-based galaxy mobile device, make sure that the plugin supports the device’s one ui version the clock face plugin supports customizing cover screens for selected galaxy flip devices with one ui 5 1 1 or higher

https://developer.samsung.com/watch-face-studio/plugin/goodlock/overview.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

tutorials galaxy watch

blog

Things to Consider when Designing Complication Layouts

watch face studio is an intuitive graphical tool that provides designers a means to design watch faces without jumping into complex coding. complication design is a major feature of this tool, and layout is a vital property of complications. the layout enables you to place components as you wish to create eye-catching watch faces. to learn more about complications, see the design complications using watch face studio blog post. watch face studio has six complication types: short text monochromatic image ranged value long text small image large image each complication has a set of layout options. you can use the layout to present information in a coherent way and make important elements stand out. this article introduces three important behaviors that you must keep in mind when working with complication layouts. blank elements in the default layout some complication providers do not provide data for all the components on a complication. elements without data remain blank on the watch face. for example, figure 1a shows the default layout for the short text complication. it displays the icon, title, and text from the provider. the "step count" provider does not include an icon. if the default layout is used with the "step count" provider, the watch face is blank where the icon is normally displayed, as shown in figure 1b. (a) "icon + text + title" layout (b) no icon for step count figure 1: blank icon slot for step count specifying a single layout watch face studio provides four possible layouts for the short text complication. to implement one specific layout only, you must remove the unwanted layouts from the layout list. for example, if you want to use only the "icon + text" layout, select it and remove the others. (a) keep desired layout and remove others (b) "icon + text" layout on watch figure 2: setting a specific layout components moving between layouts as previously discussed, complication components appear blank when there is no data provided for them. to avoid displaying blank components, you can implement multiple layouts. in this case, the watch automatically selects the appropriate layout based on the complication provider. components changing position this section demonstrates an issue commonly faced when implementing multiple layouts. when the watch switches between layouts, the position of complication components can change undesirably. in figure 3, a short text complication has been selected. to visualize the original position of each component, rectangles have been drawn around them, matching the component boundaries. when the default provider is set to "sunrise sunset" and the default "icon + text + title" layout is selected, the run preview shows the icon and text displaying perfectly within the bounded area. figure 3: visualizing the positions of the default layout components figure 4 shows what happens when the layout is switched to "text + title." the components’ positions have changed and are no longer aligned with our rectangles. notewatch face studio allows you to select and preview any layout. on an actual watch, the user cannot modify or switch layouts. figure 4: complication components changing position between different layouts in figure 5, the watch face has been deployed. customizing the complication reveals that the components do not consistently display in the same location. for example, with the "bixby" or "barometer" providers, the components are in the appropriate positions. however, the components of "feels like temp." and "step count" are not in alignment. (a) bixby (b) feels like temp. (c) step count (d) barometer figure 5: complication components changing position between different layouts on an actual watch fixing the position of complication components this section demonstrates how to make the position of complication components consistent, where the end result is the fixed layout. this resolves the problem of components changing position between layouts. you can follow along with the demonstration by downloading the sample project. to fix the position of complication components: in watch face studio, add a short text complication. to create a rectangle, select add component > shape > rectangle. noteinstead of a rectangle, you can also use an ellipse. adjust the position and size of the rectangle to fit the entire layout. set the opacity of the rectangle to 0%. the rectangle becomes invisible. notein the sample project, for demonstration purposes, the rectangle’s opacity has been set to 20%. give the shape a descriptive name, such as “icon, text, title background.” add the rectangle to the short text complication layout, placing it beneath the icon component. figure 6: adding the rectangle to the layout add the remaining layouts ("text + title," "icon + text," and "text") to the complication. repeat steps 2 to 6 for each layout you want to implement. the following figure shows the result in watch face studio. figure 7: watch face studio view after adding background rectangle when the project is deployed to the watch, the complication components stay in the same place even when switching between layouts. (a) bixby (b) feels like temp. (c) step count (d) barometer figure 8: consistent component position between different layouts conclusion watch face studio provides various layout options for the watch face. the layout considerations described in this blog can help you create an effective layout that enhances and communicates your design to the user. resources for more information about complications, see build complications in watch face studio. you can also visit the samsung developers forum, an active and friendly community where you can ask for and receive help with your application development. the samsung developers site has many resources for developers looking to build for and integrate with samsung devices and services. stay in touch with the latest news by creating a free account and subscribing to our monthly newsletter. visit the marketing resources page for information on promoting and distributing your android apps.

Most Fowziya Akther Houya

https://developer.samsung.com/sdp/blog/en-us/2022/09/20/things-to-consider-when-designing-complication-layouts

Watch Face Studio

doc

Test your watch face

test your watch face watch face studio wfs lets you test your watch face both within the tool and on a device testing in watch face studio in wfs, preview your watch face in the run panel on the right side of the screen figure 1 watch face preview capture your work you can capture a screen shot from a watch face preview and save it as an image various capture options are supported icon, screen shot and masked screen shot the captured "icon" and "screen shot" images are suitable as preview images for your watch face in the store figure 2 watch face capture properties in wfs preview your always-on watch face you can preview the always-on version of your design to check the highest and lowest pixel ratios of the watch face, click analyze to extend battery life, keep the ratios below 15% figure 3 watch face preview and always-on design analyzer preview on watch to preview the watch face on a strapped circular device, switch to the watch preview mode you can configure the watch options to preview the watch face on a variety of simulated devices notes the preview supports only circular devices figure 4 previewing watch face on different watch bodies testing on a physical device it is often useful to test your watch face on a physical watch to connect your watch and computer for debugging enable debugging on the watch ensure that the watch is connected to the same wi-fi network as your computer in wfs, select project > run on device in case of wear device running android 11 api level 30 , select + button and enter your watch’s ip address in case of wear device running android 13 api level 33 or higher, select + button and enter watch’s ip address, ip port, pairing code and paring port of paired device select ok wfs scans for and attempts to connect to the device figure 5 enter ip address, ip port, pairing code and paring port of paired device

https://developer.samsung.com/watch-face-studio/user-guide/test.html

Develop Galaxy Watch for Tizen

doc

Watch Face Design Review

watch face design review thank you for your interest in becoming a galaxy watch face designer! for galaxy watch4 and later, you are no longer required to have a watch face design partnership with samsung in order to distribute watch face designs starting with galaxy watch4, samsung switched the watch os from tizen to wear os powered by samsung and new watch apps developed for galaxy watch4 and later are distributed through google play store if you are a first-time watch face designer or developer welcome! you are not required to have a watch face design partnership with samsung in order to distribute your designs in play store discover the options for developing apps for galaxy watch, including watch face studio and the play store asset creator you can learn more about the principles of wear os development and distributing to wear os from the android developer web site if you are a previous watch face designer or developer on february 8, 2023, you will no longer be able to register new tizen-based watch apps in seller portal instead, we ask that you create your new watch apps for wear os powered by samsung and distribute them from the play store for the latest galaxy watches note that you can continue to update your existing tizen-based watch apps in seller portal if you use galaxy watch studio for tizen, we provide some tools to help you transition to wear os powered by samsung, including watch face studio and the galaxy watch studio converter

https://developer.samsung.com/galaxy-watch-tizen/studio/tutorial/design-review.html

tutorials galaxy watch, design

blog

Use Masks to Get Creative with Watch Faces

watch face studio (wfs) is a powerful tool for creating custom watch faces for galaxy watches running on wear os powered by samsung. wfs has many features that enable you to create attractive watch faces, such as masking. masking is used to selectively hide or reveal specific parts of a specific layer. you can use it to enhance visual impact, create special effects, or draw focus to specific areas of an image. in wfs, a mask is defined by the bottommost layer of the layers to be masked. in other words, the lowest layer is a mask container that partially hides the layers above it. this article describes how you can use masks in wfs to create a simple watch face with a color-changing effect on the watch index and date. at the end of this blog, you will find a sample project which i am going to demonstrate here. color-changing watch index to create a watch index that appears to change color, define a watch index that selectively shows a rotating image. step 1: create a rotating image first, create an image for the colors of the watch index. to set the image to rotate each second, in the image properties, enter the following tag expression as the rotation angle: [sec]*60 figure 1: define the rotating image step 2: add the watch index next, add a suitable watch index, such as one consisting of digits. since we want the color image to show through the digits on the watch index, move the watch index layer below the image layer. the watch index layer will become the mask container. figure 2: watch index layer below image layer step 3: create the mask select both the image and watch index layers and click “mask.” figure 3: create the mask the image layer is now masked by the watch index. as the image layer rotates, the portion visible through the watch index changes, creating the appearance of a changing color background. figure 4: watch index with color-change effect color-changing date text a mask can also be applied to multiple layers simultaneously. combined with tag expressions, you can create effects such as colors that scroll across text. step 1: create and configure the color images create seven images in different colors on separate layers. to make each image move sideways every second, in the image properties for each layer, define the tag expression for image placement using the following formula: [sec] <= x ? 0 : ([sec] - x)*4 in the formula, replace “x” with “0” for the topmost layer, “10” for the second layer, and so on, incrementing by 10 for each layer. do not define a tag expression for the bottommost layer. figure 5: define tag expressions when the seconds value is equal to or less than x, the image is in its initial position. as the second value increments past x, each second the image moves 4 pixels to the right. to make it easier to work with the set of color images, select all of them and add them to a group. step 2: add the date component and mask create a digital clock date component and adjust its size to cover the color images. in a similar way to creating the mask for the watch index, move the date component to the bottom layer. select it and all the color images above it, then click “mask.” all the color image layers are simultaneously masked by the date text. figure 6: masked date component to complete the watch face, add watch hands to it. watch face preview when you have implemented both the watch index and date, you can preview the watch face in wfs. download the sample project from here and open it with watch face studio. click “run” and select “on watch” to see how the watch face looks on a real device. figure 7: watch face preview note : watch faces with multiple masks can affect device performance. conclusion image masking is a powerful technique that can be used to enhance or manipulate images in various ways. watch face studio makes it easy and intuitive to implement masked text layers in your design, enabling you to create unique and attractive watch faces. for more information about watch face studio, see the watch face studio documentation. you can also visit the samsung developers forum, an active and friendly community where you can ask for and receive help with your application development. if you face any issue regarding wfs, feel free to contact the developer technical support team. sample mask project (247kb) apr. 18, 2023

Jakia Sultana

https://developer.samsung.com/sdp/blog/en-us/2023/04/18/use-masks-to-get-creative-with-watch-faces

Learn Code Lab

codelab

Optimize your watch face design

optimize your watch face design objective learn how to optimize watch face designs created in watch face studio by minimizing memory usage and reducing the on pixel ratio overview starting from watch face studio wfs version 1 6, watch face developers can now utilize the memory usage plugin during development to monitor the memory consumption of their watch faces this tool ensures that projects adhere to google's defined memory requirements another valuable feature of wfs is the aod always-on display analyzer, which evaluates the contribution of each component to the on pixel ratio opr the opr indicates the number of pixels that remain lit in aod mode since a higher opr results in more lit pixels, it directly impacts battery life the aod analyzer helps identify which layers, colors, or visual elements consume the most power, enabling developers to optimize designs for better energy efficiency both tools are essential for enhancing overall performance and user experience excessive memory usage can lead to lag and instability, while a high opr accelerates battery drain by understanding and balancing these metrics, developers can create visually dynamic and appealing watch faces while ensuring they remain optimized for power consumption and system efficiency set up your environment you will need the following watch face studio version 1 9 5 or higher memory usage plugin galaxy watch or smartwatch running on wear os 5 or higher adobe photoshop or any photo editing software noteto add the memory usage plugin to wfs, refer to the plugin installation guide sample project here is a sample project for this code lab download it and start your learning experience! optimize watch face sample project 1 1 mb start your project to load the sample project in watch face studio click open project in watch face studio locate the downloaded sample project and click open the sample project includes a design with high memory usage and opr check watch face’s initial memory usage and run aod analyzer click the diagnosis button to check the memory usage of the watch face while the diagnosis result indicates that the current memory usage of the watch face is significantly below the memory budget, which is 100 mb for normal mode and 10 mb for always-on mode see wo-p8 in performance and functionality requirements , it still consumes a considerable amount of memory this is notable given its simple design and lack of complex graphics next, go to the run pane and click the preview watch face icon in the preview watch face window, toggle the always-on state to see the watch face in ambient mode the current opr of the watch face is 59 7% it is recommended that your design uses no more than 15% of the available pixels in always-on states see wo-p7 in performance and functionality requirements click analyze to open the aod analyzer, a tool that checks each watch face component and color-codes how much each component contributes to the opr the aod analyzer indicates that the watch face design contains pixel-intensive components, which increase the opr adjusting these components to stay within the 15% opr limit for both aod mode and normal mode can improve power efficiency and battery life adjust colors and sizes of components using dark colors in your watch face reduces power consumption, which applies to both always-on and normal modes additionally, higher-resolution bitmap assets consume more memory in the sample project, you can find very bright-colored and unnecessarily high-resolution images with extra transparent pixels that can be optimized go to the layer list and hide the gif_halfcircle layer temporarily to view the components behind it click on any empty space in the layer list to view the canvas color of the watch face currently, the color is set to #fbf5f5ff off-white , which is a very light color and can significantly increase the opr change the canvas color to #000000ff black you can also select other dark colors that you prefer next, select the image_squaregradient layer this image is unnecessarily high-resolution, with only a portion of it displayed on the screen you need to crop images like this first using photo editing software before importing them into the studio an optimized version of this image is ready for you to add go to add component > preset image select the image_halfcircletop png file from optimized resources folder included in the sample project drag the newly added image layer and place it above the image_squaregradient layer then, delete the image_squaregradient layer select the image_halfcircletop layer and, in the placement properties, choose align top next, select the image_circle layer by hiding the layer on top of it, you can see that half of the image is covered but still takes up space and affects performance as it is partially rendered additionally, the image has extra transparent pixels that are unnecessary crop this image or, from the optimized resources folder, add the image_halfcirclebottom png file adjust it placement like below drag the image_halfcirclebottom layer above the image_circle layer then, delete the image_circle layer you can combine images with the same purpose using any photo editing software, as this consumes less memory, particularly when working with high-quality complex graphics such as logos, illustrations, and textures from the optimized resources folder, add the image_backgroundcombined png file and align it as shown below drag the newly added image layer above the image_halfcircletop layer, and then delete both the image_halfcircletop and image_halfcirclebottom layers noteyou can optimize your images while preserving the bright colors of your watch face in normal mode by simply adding a dark version of your resources in the always-on tab this approach can still significantly reduce the opr while maintaining your color preferences utilize shapes whenever possible shapes are vector-based elements in wfs, defined by mathematical properties such as color, size, and position not pixel data like images they are lightweight, scale perfectly without pixelation, and have minimal impact on memory and storage additionally, shapes are fully adjustable in wfs, allowing you to easily tweak or animate them directly to further optimize the watch face, you can replace simple images in the sample project with shapes select image_outlinecircle this image is a plain white circle outline, which can be replicated using a shape go to add component > shape > ellipse rename the ellipse component to ellipse_outline and adjust its properties as follows delete the image_outlinecircle layer and drag the ellipse_outline layer on top of the image_center layer next, select the image_center layer this is an imported gradient image that consumes a significant amount of memory to improve the efficiency of the design, you can replace it with a shape filled with gradients add a component by selecting shapes > ellipse rename the newly added shape component to ellipse_center open the fill color properties of ellipse_center there are three available gradient types linear, radial, and angular choose radial and adjust the color stops and colors as follows drag the ellipse_center layer above the image_center layer then, delete the image_center layer unhide the gif_halfcircle layer and rerun diagnosis and aod analyzer to see how much the watch face has improved limit constantly updating complications and components having too many complications and components, especially those that update every second, can impact the overall performance and efficiency of a watch face when multiple components update simultaneously, the watch performs more background tasks to keep everything current this can lead to higher power consumption, increased memory usage, and slower interface responsiveness to ensure a smooth, energy-efficient, and visually clear user experience, it is generally advisable to keep the number of complications below eight and remove any unnecessary components temporarily hide the gif_halfcircle again select complication_wordclock, complication_unreadnotification, and complication_dayofweek, along with their background components ellipse_left, ellipse_right, and ellipse_top right-click on these layers and choose delete it is still possible for users to customize and set these complications in any quadrant edge complication slot, as these complications are designed to be editable directly on the device delete the progressbar_seconds and digital_clock unnecessary components that serve a similar purpose as other existing components, such as analogclock 1, can be removed to streamline the design and improve efficiency next, delete the ellipse_bottom_copy layer instead of hiding components using a tag expression, it is more effective to delete them, as components hidden in this manner are still partially rendered and can impact performance improve animated components animation can greatly enhance the overall aesthetic of a watch face when done thoughtfully smooth and well-timed animations can make the design feel more dynamic, premium, and engaging, adding a sense of liveliness that static designs often lack when incorporating animations, it's essential to use them purposefully for example, in the sample project, the component ellipse_bottom is set to blink every second while this adds visual interest, it also updates continuously, requiring the watch face to refresh each second this can lead to higher battery consumption without necessarily enhancing the user experience to optimize this, consider adding specific conditions for when the animation should occur in the ellipse_bottom fill opacity property, click on tags and change the tag expression to blink only every second when the heart rate is not normal i e , less than 60 or greater than 100 [hr]<60 + [hr]>100 ? [sec]%2==0 ?-100 0 0 unhide gif_halfcircle this component is a half-circle with a wipe animation that reveals the components underneath when the watch face is turned on it is a gif file while this file type is supported by wfs, it is still recommended to import webp animations, as they are smaller in file size, lighter to render, offer better image quality, and consume less power you can add the webp file from the optimized resources folder by going to add component > animation > animated gif/webp add the webp_halfcircle and position it as shown below drag the webp_halfcircle layer below the ellipse_center layer and delete the gif_halfcircle layer set the trigger property noteif possible, consider using tag expressions to animate your components this approach allows you to achieve visually appealing effects without putting unnecessary strain on the watch's memory and battery additionally, components with similar purposes, such as the hour hand and its shadow, should be grouped together, and a tag expression should be applied to the group for cohesive animation check the memory usage of the optimized watch face and rerun the aod analyzer run the diagnosis and aod analyzer to see how much the watch face improved you can reduce the opr further by hiding layers in always-on tab, as shown below notesince the second hand components sec_simple and sec_shadow_simple does not update in aod, it is recommended to hide it test the watch face to test your watch face on a smartwatch, you need to connect your watch to the same network as your computer in watch face studio, select run on device select the connected watch you want to test with if your watch is not detected automatically, click scan devices to detect your device or enter its ip address manually by clicking the + button the watch face launches upon successful installation you're done! congratulations! you have successfully achieved the goal of this code lab now, you can optimize a watch face using watch face studio! if you’re having trouble, you may download this file optimize watch face complete project 418 1 kb to learn more, visit watch face studio performance tips

https://developer.samsung.com/codelab/watch-face-studio/design-optimization.html

Connect Samsung Developer Conference

web

SDC23 | Samsung Developer

your impact made our sdc23 shine! samsung's innovations include bixby, knox, smartthings, and tizen.see sdc23 for a connected ecosystem with multi-device experiences. samsung developer conference 2023 thu, oct 5, 2023 10:00 am ptmoscone north in san francisco and online video thumbanil highlights though sdc23 has ended, the innovation lives on! whether you missed the event or just want to revisit the highlights, you can watch the excitement on demand. keynote discover samsung’s broad ecosystem of powerful, next-level tech and hear how samsung is building toward a smarter, safer, and more personally connected future. view keynote sessions view sessions dive into the future of connected customer experiences through tech sessions by developers offering further insight into the innovations introduced in the keynote. gamepad on tizen tv mega session screen experience, game, developer program, tizen this session provides valuable tips and techniques for game application developers and gamepad manufacturers. hdr10+ gaming mega session screen experience, game the hdr10+ gaming panel discussion covers an overview of hdr10+ gaming and how game developers can support it. games with samsung galaxy mega session mobile experience, game, android, mobile the latest in mobile gaming development technologies, responsive ui for flex mode, and mobile cloud gaming. exploring the digital health ecosystem: samsung health as digital front door mega session health experience, health, wearable, mobile new samsung health features, samsung privileged health sdk, and collaboration for research with samsung health stack. smartthings and matter tech session platform innovation, iot, open source, developer program get a brief introduction to matter, new enhancements with smartthings, and new developer tools that make it easy to integrate your devices. what's new and next in watch face studio 2023 tech session mobile experience, wearable, design, mobile let's learn the main new features of watch face studio 2023 and enjoy the new watch face studio plugin experience. speakers check out the speakers who joined us at sdc23 to share their experience and expertise, and get a sense of what you can expect from next year’s sdc event. view speakers code labs view code lab get hands-on with the latest development features through new code lab topics and samples introduced for sdc23. smartthings matter: build a matter iot app with smartthings home api 25 mins start smartthings develop a smartthings find-compatible device 30 mins start foldable develop a widget for flex window 25 mins start samsung wallet integrate 'add to samsung wallet' button into partner services 30 mins start gamedev galaxy z implement flex mode into a unity game 30 mins start watch face studio customize styles of a watch face with watch face studio 30 mins start tech square talk with product experts, experience innovations in tech square. catch up on new updates from samsung platforms and os like smartthings, knox and tizen, mobile & screen experience, home & health experience, sustainability. view tech square samsung c-lab meet six passionate entrepreneurs and start-ups accelerated by samsung c-lab, an in-house venture and start-up acceleration program. these start-ups are making waves in the healthcare and ai industries, and are here to showcase their latest innovations. view samsung c-lab prior years watch highlights of selected sessions from sdc events in last samsung developer conference. sdc22 october 12, 2022moscone north and onlinesan francisco, california sdc21 october 26, 2021online sdc19 october 29–30, 2019mcenery convention centersan jose, california sdc18 november 8-9, 2018moscone westsan francisco, california sdc17 october 18-19, 2017moscone westsan francisco, california sdc16 april 27-28, 2016moscone westsan francisco, california

https://developer.samsung.com/conference/sdc23

Watch Face Studio

doc

User Guide

clockface plugin installing the clockface plugin enables you to use wfs to create skins for mobile device cover screens and creates a production environment for syncing your watch face and mobile cover screen designs creating clock face projects to create your cover screen, you can start from a blank clock face project or adapt an existing watch face project to a clock face project create a blank project to create a cover screen from a blank project from the wfs landing page, select new project define a name for the project from the type dropdown menu, select clockface figure 1 select project type from the size dropdown menu, select the screen size of your mobile device figure 2 select screen size click ok a blank project is created design your cover screen in the same way as designing a watch face for information on implementing various design elements, see the watch face studio user guide adapt an existing watch face project to create a cover screen from an existing watch face project on the wfs landing page, from the more menu next to the watch face project, select create project from figure 3 create project from menu item define a name for the project from the type dropdown menu, select clockface from the size dropdown menu, select the screen size of your mobile device click ok a project is created based on the existing watch face project design your cover screen in the same way as designing a watch face for information on implementing various design elements, see the watch face studio user guide changes to the wfs environment for clock face projects when working with clock face projects, because they are not watch faces, some wfs features are limited or not available importing from a gwd resource is not supported, because gwd resources are watch face resources the screen shape is fixed to rectangle because mobile device cover screens are rectangular functionalities related to heart rate measurement and complications are not supported, because mobile devices do not support them the publish and upload functionalities are not supported, because plugin-based projects are not distributed through an app store installing clock face projects when you have completed designing your cover screen, you can install and use it on your mobile device the device must meet the following requirements the good lock application and its clockface application module are installed good lock is available in selected countries only the device runs one ui version 5 1 1 or higher the device model matches the screen size that you selected when creating the project usb debugging is enabled for instructions, see enable adb debugging on the device to install a clock face project on the mobile device in wfs, open the clock face project connect the device to your computer with a usb cable select run on device and select the device from the list if your device does not appear in the list, check that it meets the requirements figure 4 run on device the installed clock face project is set as the cover screen on your device to use a different cover screen, in the clockface application, select cover screen cover screens created through the clockface plugin for wfs can be found in the studio tab

https://developer.samsung.com/watch-face-studio/plugin/goodlock/user-guide.html

Didn’t find what you were looking for?

FAQ

Search frequently asked
questions
by keywords.

Join the Forum

Visit the Forum to ask
questions and exchange
ideas with other developers.

Get Support

Submit a 1:1 Support request
and receive a response
within 2 business days.

Preferences Submitted

You have successfully updated your cookie preferences.