How can i achieve this watchface hour digits design?

Hello,

I'm new here so a bit of help will be very appreciated.

Default garmin fenix 7 watchfaces and some custom ones haves this "black" stripes Hour digits look.

Is this a custom font or a some gfx applied to the font? Do we have some custom fonts already loaded in the system that can be used ?

Thank you.

Top Replies

jim_m_58 over 1 year ago +1 verified

Custom fonts. Here are some tricks you can do: https://developer.garmin.com/connect-iq/connect-iq-faq/how-do-i-use-custom-fonts/#howdoiusecustomfonts

Custom fonts are based on the specific app, and there…
flocsy🤠 over 1 year ago in reply to Jacquers +1

I wouldn't use drawLine for this for 2 reasons: 1 My guess is that it's less efficient, 2. it's buggy! I noticed that different devices behave differently in terms of being 1 pixel "off". In my app where…

All Replies

+1 jim_m_58 over 1 year ago

Custom fonts. Here are some tricks you can do: https://developer.garmin.com/connect-iq/connect-iq-faq/how-do-i-use-custom-fonts/#howdoiusecustomfonts

Custom fonts are based on the specific app, and there are none "already loaded in the System".

In the case of the first pic, I'd probably just use a font I liked for the numbers, then use dc.drawLine() calls (with the color set to the background ), and draw the lines over numbers.

For the hollow numbers, that's all a custom font with just the outlines of the digits in that font.

0 Florin over 1 year ago in reply to jim_m_58

Thank you Jim!

I've assumed that i can be done with drawLine, just don't know how intensive this could be, don't want to consume more system resources/batttery.

0 jim_m_58 over 1 year ago in reply to Florin

Drawing 10 lines would have much less of an impact that all the other stuff shown on that watch face, and with a watch face, it's only updating every second for a short time.

0 Florin over 1 year ago in reply to jim_m_58

Works perfectly!

Just a note for the new devs, to achieve a straight diagonal line and avoid aliases you need to draw the line with a specific angle that follows screen pixels. Enabling antialias will help a bit.

This code worked for me:

dc.setAntiAlias(true);

dc.setPenWidth(2);

dc.drawLine(50, 95, 115, 160);

Thanks.

0 Jacquers over 1 year ago

There's a watch face called Infocal for which the source is available on GitHub. The technique it uses is a custom glyph for the stripes that I think is drawn over the other text, probably in black. I'm not sure if this or manually drawing the lines would be more efficient.

0 flocsy🤠 over 1 year ago in reply to Jacquers

I wouldn't use drawLine for this for 2 reasons: 1 My guess is that it's less efficient, 2. it's buggy! I noticed that different devices behave differently in terms of being 1 pixel "off". In my app where I wanted pixel perfect drawing and used drawLine, drawRectangle, fillRectangle I noticed that all these behave slightly differently and thus even if I add or remove 1 pixel to fix the drawing on one device (and I'll add on the simulator, who knows how it is on real devices...) it won't be good on some other devices.