bitmap fonts bitmap fonts aren’t really fonts. bitmap fonts are bitmap images used to replace predefined dynamic content like dates, time, and weather in text and digital clock components. you can replace numbers, punctuation, clock and calendar abbreviations, or characters/words in different languages. bitmap fonts can also be combined with other features of galaxy watch studio (gws) to add custom functionality. for example, using bitmap fonts, you can: create unique styles for numbers or letters that can’t be done using fonts use custom images for weather, health, or moon phase add predefined terms in a language not supported by a gws feature or on the phone replace a word in a digital clock component for more than one language change font color by tapping it note : when you import images as bitmap fonts into gws, they are saved as png files as part of the watch face project. if you update the original image (on your system), it will not affect the image in your project. if you update the original image and want to use it in your watch face, you will need to re-import the new image into your project. bitmap font images cannot be resized in gws. create a digital watch that uses pictographs this example is a simple replacement of numbers and predefined date values with images within a digital clock component. this watch face shows two digital clock components whose icu format is set to “mmm d eee” (where “mmm” is the abbreviated month, “d” is the numerical day of the month, and “eee” is the abbreviated day of the week). the upper digital clock uses the default truetype fonts. the lower digital clock uses bitmap fonts for months of the year, numbers, and days of the week. to create the lower digital clock, do the following: in your favorite drawing program, create images for months of the year, numbers (for the days of the month), and days of the week. because you cannot resize these images in gws, images should be the same or similar height. you may want to test images of different heights before creating all of your images. in this example, the numbers have a height of 30px and the pictographs have a height of 50px. tip : if you want some space between the images that make up the digital clock, add some blank space on the right of the month images and on the left of the days of the week images. start a new gws project and add a digital clock component. in the type section of the properties window, set icu format to “mmm d eee”. in the appearance section of the properties window: a. select bitmap font then click bitmap font setting. b. in the digit tab, set the numbers. click to import an image for each digit. c. click the other tab and set the predefined clock and calendar abbreviations. click to import an image for each item. d. click ok note : if you do not enter an image for a value and that value is used by the component, nothing is displayed for that value in the watch face. for example, if you do not assign an image to the number 1 and the time is 12:15, then the digital clock will display 2:5. add a background that will make your images stand out on the watch face. information : a background component is always added as the bottom or lowest layer in your design. use custom images for weather, health, or moon phase weather, health, and moon phase components display dynamic predefined content. you can replace this content using bitmap fonts. the weather type text component has five different display types: main, icon, description, number, and id. the icon display type cannot be customized using bitmap fonts. however, the main, description, number, and id display types can be customized using bitmap fonts. you can configure one of these display types to display customized weather icons. this example shows all five display types and their values when the weather is clear. the image on the bottom is the id display type configured to display a custom icon. for a list of the predefined values provided by openweather and an example of how to display custom weather icons, see weather. this watch face shows the moon phase type, step count, and heart rate (bpm) text components. on the left, the components use the default configuration. on the right, the step count and heart rate components have been customized to show an icon rather than the units of measurement (steps and bpm). the moon phase type component is used as the background of the watch face. to create the customized moon phase type, step count, and heart rate components, do the following: in your favorite drawing program, create the following (you cannot resize these images in gws): images for numbers for the step counts and heart rate components. the numbers should be the same height. you can use the same images for both components or create different ones for each component. in this example, the numbers all have a height of 30px. images for the units of measurement for the step counts and heart rate components. in this example, the height of these images are the same height as the numbers (30px). tip : if you want some space between the numbers and the icon in the watch face, add some empty space on the left side of these images. * images of the moon phase types. there are a total of eight moon phase types. see faq [q.14 how do i use the moon phase and position?][9] for more information. because these images are being used as a background for the watch face, they are 360 x 360 px (the size of the watch face). start a new gws project and add a moon phase type text component. position the moon phase component in the center of the watch face. in the appearance section of the properties window: a. select bitmap font then click bitmap font setting. b. in the digit tab, set the numbers. click to import an image for numbers 0 - 7. click ok. add an image component that is the background for the step count and heart rate to make the content stand out. position the image in the watch face by dragging and dropping it to the desired location. add a step counts component. position the step counts component in the watch face by dragging and dropping it to the desired location. in the appearance section of the properties window: a. select bitmap font then click bitmap font setting. b. in the digit tab, set the numbers. click to import an image for each digit. c. in the custom tab, select add text string and enter the image for the “steps” unit of measurement. the text string is case-sensitive. click ok. add a heart rate (bpm) text component. position the heart rate component in the watch face by dragging and dropping it to the desired location. in the appearance section of the properties window: a. select bitmap font then click bitmap font setting. b. in the digit tab, set the numbers. click to import an image for each digit. c. in the custom tab, select add text string and enter the image for the “bpm” unit of measurement. the text string is case-sensitive. click ok. add a language not supported by a watch feature or a phone many gws components display dynamic or static content that are only available in english. or, some components offer other languages, but they may not provide the language you want. using bitmap fonts, you can translate these items to a language that is not supported. for example, the weather type text component displays a single-word description of the weather, in english only (the main display type). using bitmap fonts, you can display this information in any language. this watch face shows three weather type text components. the leftmost component is the icon display type, which cannot be customized. the upper component is the main display type and uses truetype fonts (and it can only be displayed in english). the lower component is the main display type and uses bitmap fonts to show the weather in greek. to create the greek weather type component, do the following: in your favorite drawing program, create images for each of the greek translations for the english main display type. for a list of the english main display types, see weather. the images should be the same height. you cannot resize these images in gws. in the examples, the greek word images have a height of 50px. start a new gws project and add a weather type text component. if a warning window displays, read and acknowledge that the listed features and components cannot be used when this weather type component is used. click ok. position the weather component in the watch face by dragging and dropping it to the desired location. in the appearance section of the properties window: a. select bitmap font then click bitmap font setting. b. in the custom tab, select add text string and enter a main display type (in english). repeat this step for every main display type. note : values entered are case-sensitive. that is, if you enter “snow” (instead of “snow”), nothing is displayed in the watch face when the weather type is snow. c. click  to import an image for each text string.  d. click **ok**. <div class="alert alert-info" role="alert"><strong>note</strong> : <p>if you do not enter a value or an image for a value and that value is used by the component, nothing is displayed for that value in the watch face. for example, if you do not add the value fog, if the weather type is fog, nothing is displayed in the watch face.</p> add a background that will make your images stand out on the watch face. note : a background component is always added as the bottom or lowest layer in your design.  replace a word for more than one language (digital clock component) in a digital clock component, you can select one or more languages in which the information will display on the watch face (the language displayed is determined by the language setting of the paired phone). if you have selected more than one language, you can replace the same word or words, language by language, using bitmap fonts. this watch face displays the day of the week. the languages set for the digital clock component are korean, russian, and vietnamese. the language displayed depends on the language setting of the phone. in your favorite drawing program, create images for the days of the week. make sure the images fit in the watch face. you cannot resize these images in gws. start a new gws project and add a digital clock component. in the type section of the properties window, set icu format to “eeee” (where “eeee” is the full name of the day of the week): in the appearance section of the properties window: a. select bitmap font then click bitmap font setting. b. in the custom tab, select add text string and enter the day of the week in one of the languages. repeat this step for every day of the week for each language. note : values entered are case-sensitive. that is, if you enter “thứ năm” (instead of “thứ năm”) and the day of the week is thursday (thứ năm), nothing is displayed in the watch face paired with a phone whose language setting is vietnamese. c. click  to import an image for each text string.  d. click **ok**. <div class="alert alert-info" role="alert"><strong>note</strong> : <p>if you do not enter a value or an image for a value and that value is used by the component, nothing is displayed in the watch face. for example, if you do not add a value for 금요일 (friday in korean), if the day of the week is friday, nothing is displayed in the watch face that is paired with a phone whose language setting is korean.</p> change font color by tap have you ever wanted to design a watch face that dynamically changes the color of a word or number by tapping it? unfortunately, gws does not directly provide this feature. however, you can use bitmap fonts along with a tappable image to create this action. this watch face is a digital clock whose numbers have been replaced by bitmap fonts. the bitmap font numbers are transparent. the digital clock component is layered above an image of a single color. the image has been set as a button and changes images when tapped. in your favorite drawing program, create the following: images for numbers and a colon. these should be transparent on a background that matches the background you will use for your watch face (the images will look like stencils). the numbers should be the same height and width. the colon should be the same height. you cannot resize these images in gws. in this example, the numbers are 38px x 50px and the colon is 15px x 50px. images of the colors you want to use for the numbers in your watch. tip : if you are using solid colors, make the images 2px x 2px. after you import them, you can resize them. using smaller images will minimize the size of your project. start a new gws project and add a digital clock component. in the appearance section of the properties window: a. select bitmap font then click bitmap font setting. b. in the digit tab, set the numbers. click to import an image for each digit. c. click the symbol tab, and set the image for the colon. click to import the image. d. click ok. add the image of one of the colors. move and resize it to exactly cover the digital clock. you can enlarge the image in the preview window to precisely resize the image. move the color image to the layer below the digital clock component: in gws’s layer area, select the image, then drag and drop it on the digital clock component. in the properties window of the image (the image must be selected), select set as button from the dropdown menu. in the action tab of the properties window, click on the action and select change image. click to add more images of different colors. add a background to the watch face that matches the background of the numbers. in the run window, click on the digital clock to change the colors. if your digital watch has stripes on either side of the time, it may be because the width of your bitmap images are not the same (in the picture below, the width for the image of the number 1 is 22px while the other numbers are 38px) or the color image is longer than the digital clock component. note : you should always test your design on an actual watch to make sure all components are positioned correctly. about custom bitmap font text strings when entering custom bitmap font text strings, consider the following: text is case-sensitive within gws. gws saves the image and names the file based on the text string. therefore, if you enter text strings that are the same but with different capitalization, only one image is saved. that is, if you enter both “cloud” and “cloud,” you will only be able to use one image for both strings. this is because file naming on your pc (windows or macos) is not case-sensitive. text is character-based and supports multiple languages. text will replace full words or substrings returned by the component. only the text entered is replaced; all other content returned by the component that does not match the configured text strings will not be replaced and is not displayed. after you have saved and exited your project, when you re-open the project and the bitmap font settings window, in the custom tab, the text strings will be re-ordered in the precedence that they will be replaced. if you have entered the same text strings with different capitalization, in order to change the image used by all instances of these text strings, you must re-import the image for the last instance. it is the image set for the last instance that is used by all other instances. in order for the re-imported image to appear in gws, you must save your project, exit gws, then re-launch gws. for example, if you enter “cloud,” “cloud,” and “cloud” (in this order), “cloud” is the last instance and the image imported for it will be used by “cloud” and “cloud” (after you re-open the project). if you want to change the image used by these strings, you must re-import the image for “cloud.” if you want to see this change in gws, you must save your project, exit gws, and then re-launch gws. if you don’t exit gws and simply re-open the project, the image reverts back to the previous image. however, when you exit and re-launch gws, the image will change to the re-imported image. for example, if you configured a normal text component with the following bitmap fonts for “cloud,” “loud,” “y,” and “구름,” here is what displays when “cloud,” “cloud,” “cloudy,” “clouds,” “aloud,” and “구름” are entered into that text component: here is how the text strings are re-ordered in the custom tab area after a project has been saved and re-opened: how to re-import a bitmap font image if you have updated an image and want to replace an existing bitmap font image in your watch face design, open the bitmap font setting window, select the tab where the image is set, and click on the image that needs to be updated.
