• Replies 13 replies
  • Subscribers 15 subscribers
  • Views 7643 views
  • Users 0 members are here
Options
Related

Using Custom Fonts

kafolske
over 8 years ago
Hey All,

Have done plenty o' searching and still haven't found a tutorial on how to use custom fonts on the watchface.

I have my font in the fonts directory and have added this to my resources.xml file:
<fonts>
<font id="id_konqa32_hd" filename="fonts/konqa32-hd.fnt" filter="0123456789"/>
</fonts>


At this point, I can't figure out what to do next. The API documentation doesn't really cover this as far as I can tell. Do I use the "font id" in place of on of the standard font number in the layout.xml file? Do I need to "load" the font somehow in onLayout()? I have tried several of these approaches by mimicking a few of the example templates, but none of them were successful.

So, how do I actually go about using a custom font?

Thanks.
  • over 8 years ago
    It's actually simple.

    In your code (I do it in initialize()), have something like"

    bigNumFont=Ui.loadResource(Rez.Fonts.id_bignum);

    (with your own id in place of id_bignum)

    and in dc.textDraw() calls, use "bigNumFont" where you'd normaly use something like "Gfx.FONT_MEDIUM"

    If you use layouts, you should be able to specify the font using the id, but I can't find an example. The programmers guide says this:

    "Graphics font constant or the ID of a user-defined font"
  • over 8 years ago
    If you use layouts, you should be able to specify the font using the id, but I can't find an example. The programmers guide says this:

    "Graphics font constant or the ID of a user-defined font"


    Jim is right, here is a sample for the layout (as I use it in one of my watchfaces, where "font" is the id of my custom font):

    <label id="TimeLabel" x="113" y="63" font="@Fonts.font" justification="Gfx.TEXT_JUSTIFY_CENTER | Gfx.TEXT_JUSTIFY_VCENTER" />
  • over 8 years ago
    I have tried several of these approaches by mimicking a few of the example templates, but none of them were successful.


    Make sure that if you use BMFont, that you set the "File format Texture" to "png".
    By default it is "tga".

    ConnectIQ only support png custom fonts. This has caused many developers lost sleep!
  • over 8 years ago
    Thanks everyone - I'll give it a shot and let you know if I have any further trouble.

    Thanks.
  • over 8 years ago
    Well,

    It looks like it worked.

    In the end, I didn't have to use the UI.loadResource() function. I only needed to add the font to the resources.xml file and add "[email protected]_konqa32_hd" to my layout file label definitions.

    Couldn't have done it without you - Thanks again.
  • over 4 years ago in reply to kafolske

    Where is this documented? How is people supposed to guess this? 

  • over 4 years ago in reply to Danielo

    Actually, since the docs got reorganized, I'm not sure.

    Here's a video Petr Koula (the guy that wrote Actiface) did years ago

    https://www.youtube.com/watch?v=PRQyA4BeqqE

    and in the FAQ doc in the SDK, there's a writeup of some font tricks that was written by Hermo T (NoFrills)

  • over 4 years ago in reply to Danielo

    Several example programs included with the SDK demonstrate, and the How Do I Use Custom Fonts FAQ covers it fully as well. As mentioned, the Programmer's Guide was recently rewritten so things have moved around a bit. There is a section on creating your own fonts here, and examples of using WatchUi.loadResource() or font references are scattered throughout.

  • over 4 years ago in reply to Travis.ConnectIQ

    Sorry, but the FAQ should not be a place to search for SDK reference/specs. Even if it is, there is no mention about the thing I was asking about, which is the "[email protected]_konqa32_hd"  bit. Not in the FAQ nor in the video.

    I'm not meant to be rude, but Garmin documentation is terrible, and I don't know how many developers have managed to create so many great watchfaces.

    Everytime you need something a bit out of the standard you have to dig on the forums and expect that the answers there still hold (some of them are as old as 5 years)

  • over 4 years ago in reply to Danielo

    I put together this sample in a few minutes.  It's really not that complex to do.

    I used BmFont and a font I had called "chiller".  I set the height to be 45 pixels, and set the export to be "png", and saved it under resources>fonts.

    Then with simple code, I use it to display the time.

    in fonts.xml there is this:

    <font id="c1" antialias="true" filter="0123456789:" filename="chill.fnt"/>

    and then to use it, see line where I load the font

    myFont=WatchUi.loadResource(Rez.Fonts.c1);

    and to display the time using that font,

    dc.drawText(width/2,height/2,myFont,timeString,Gfx.TEXT_JUSTIFY_CENTER|Gfx.TEXT_JUSTIFY_VCENTER);

    if you comment out line 14 in customView.mc it will use a standard font

    custom.zip