Maximum font size on a watch face

Hi there,
is there a way to draw a text with a built-in font of the same size as the one on the standard digital watch face of fenix 3 HR? The maximum size of text I'm able to get is something like 75 px versus ~110-115 px on the standard WF. In addition, for the built-in font, some vertical spacing seems to be embedded in the font, so that the getFontHeight function returns the height of the space the font+spacing occupies (e.g. 116 for FONT_NUMBER_THAI_HOT), and not the height of the font itself (i.e. 75 for FONT_NUMBER_THAI_HOT). Because of this, I'm not able to align the text correctly with other drawables on the WF.
Do I understand correctly that the only way to overcome this is to use a custom font?

Standard WF:

Custom WF:

Code for the "Custom WF":

function onUpdate(dc) {

	    var txt = "10:36";

	    var txtFont = Gfx.FONT_NUMBER_THAI_HOT;

	    var width = dc.getWidth();

	    var height = dc.getHeight();



	    dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_LT_GRAY);

	    dc.drawText(width / 2, height / 2, txtFont, txt, Gfx.TEXT_JUSTIFY_CENTER | Gfx.TEXT_JUSTIFY_VCENTER);

    }

Thank you,
Evgeny.

jim_m_58 over 7 years ago

The standard fonts (FONT_*) are really defined by the base FW, and native watchfaces kind of exists outside both CIQ and the native FW and can do different thing. With the extra spacing, that might be something the FW folks wanted for some reason. You can position things with CIQ to make things work. You can't however, adjust the size like you want to do.

Also, you are using the f3-hr as a target - what you see there is the same with things like the f3,d2's,and Chronos, but will be different on other devices like the va-hr, forerunners, and even the F5's.

The easiest way to get the size you want and to get the same one on various devices, are custom fonts. With Custom Fonts, the bigger they are, the more space they use in your watchface, so if you're using it for time, you probably want to cut back the available characters to something like 0 to 9 and : (if you click on my sig, "Simple Big" does this - a large custom font that's the same for all the supported devices).

Another thing that can be done, is to not use fonts and draw everything yourself and make them any size you want. Doing this can(will) be harder on the battery (more draws to display the time each time, etc), but is also really flexible, as you can change things based on what else you are displaying (for example, make the time a bit shorter if you need to display the move bar) If you look at "FontLess" in my sig, that's how that one was done.

EvgenyPopov over 7 years ago

Thanks, Jim.
I already started playing with custom fonts. What I currently am trying to do is to get rid of the extra space above and below characters of my font. You can see what I mean on the f3HR_custom.png screenshot of my first post. I added a font in the BMFont tool with size 116, and exported it to PNG. In the PNG file, the chars have height around 80 px. When the font is added a Connect IQ project, and a text is drawn using the font, extra space is added below and above the chars, to get the total height of the text equal to 116.
Is it possible to have chars with exactly the specified height and no extra space?

jim_m_58 over 7 years ago

Ok, missed that! (still on my first cup of coffee :) ). That space may be based on one of two things - the original font you are using with BMFont, or a setting in BMFont.

What I'd do is a bit of editing to the .fnt file for your custom font It defines where in the .png's you character is, where the top is (the "y"), and height, etc.

EvgenyPopov over 7 years ago

Yes, I just managed to achieve what I wanted by editing the font size and yoffset in the .fnt file :) The only question left is if it is possible to achieve this via the BMFont tool settings, with no need to edit the .fnt file manually... Keeping trying :)

Thank you!