How do you add icons to watch faces?

Former Member
Former Member
I am able to capture the data but i am having issues with creating icons. I tried importing icons from a bitmap file but it puts the watchface out of memory. Is there a known method for doing this within the SDK?
  • What I did, is I created a custom font with BMfont, with just a few characters in it. And then modified the .png for those characters to become icons. I think many people do something like this.

    Then to use them, I load the font, and then use that font to display the icons. (this way you can also change the color of icons without needing multiple bitmaps.

    So for example,

    dc.drawText(x,y,myiconfont,"B",Gfx.TEXT_JUSTIFTY_CENTER);

    displays my battery full icon, while the same with "b", my battery empty icon.
  • Former Member
    Former Member over 9 years ago
    RE

    What I did, is I created a custom font with BMfont, with just a few characters in it. And then modified the .png for those characters to become icons. I think many people do something like this.

    Then to use them, I load the font, and then use that font to display the icons. (this way you can also change the color of icons without needing multiple bitmaps.

    So for example,

    dc.drawText(x,y,myiconfont,"B",Gfx.TEXT_JUSTIFTY_CENTER);

    displays my battery full icon, while the same with "b", my battery empty icon.



    I have tried this but when i try to run the watch in the simulator i get an OOM (out of memory). Also, do your edits to the .png file let you set which characters represent which icons? IE B = full and b = empty.
  • Have a look at this great resource
    https://forums.garmin.com/showthread.php?341166-Open-Source-for-Garmin-Connect-IQ-Watch-Face-Analog-amp-Bars&p=791531#post791531

    With OOM I suggest you start really small. Don't unnecessarily use a large png. Also note the size of your png file to make sure it is not ridiculously big
  • I have tried this but when i try to run the watch in the simulator i get an OOM (out of memory). Also, do your edits to the .png file let you set which characters represent which icons? IE B = full and b = empty.


    With BMfont, you get a .fnt file and one or more .png's. The .fnt file is a text file, that defines what character, and basically where it is in the .png (x,y,width,height). For my icon font all 20 fit on the single .png
  • Former Member
    Former Member over 9 years ago
    Thank you

    Thank you very much for your help. I think i can piece it together from here.
  • Former Member
    Former Member over 9 years ago
    Final Update

    So i finally beat my head against this long enough to figure out the rest of it. Again, thank you to those who responded to get me going in the right direction. So, what i did is shown below:

    1: create a font from BMFont tool that contains my icons
    2: import that using any available method (i was already using a layout.xml file so i just created a label)
    3: open the .fnt file and assign char id values to the entries for your icons. My icons used "Char id= 62408" and that was not a character in the alphanumeric set.
    97 = a, 98 = b. Check the way its done in the link provided in a previous post. You will see 24 characters with char id's ranging from 97 to 120, that represents
    abcdevghijklmnopqrstuvwx.
    4: when you set your text you just make sure you label is using that font and use this code:
    notifyView.setText("b");
    This means that whatever character you assigned to 98 in your .fnt file will be presented in your label.

    ***NOTE****
    there are other steps for assigning the font to the label, creating the label, updating your resource file, etc... Those are not covered in this post.