New personal graphics tool for Garmin

Long story short (not to short as it seems).

I was still a newbie on the garmin platform. But in that short time and a few finished watch faces, I found out that there is probably no proper tool that could help me enough when working with graphics, especially with regard to bitmap character sets, and fully automated it. Everyone knows that garmin can't use antialiasing for maps, so it's necessary to do these things as a character set that can handle it. I wasted hours and even days of work on this. Since I use about 4 character sets for one resolution, it was necessary to constantly set up the software (FontBuilder is very nicely done by the way) and export character set after character set. In my case, a total of 28 times. In addition, FontBuilder exported .png images with a transparent background, so additional editing of both the image and the generated .fnt file was necessary.

However, what I couldn't do at all is creating a character set using my own images (icons). I had to design everything first, draw it in a graphic editor, export it as an png image and later manually define .fnt file for the layout of the elements. Time-consuming work and all this 7x, while each resolution has different sized icons and they are in different positions. Yes, I could use one, the largest size, and for lower resolutions scale the icons but keep them at the same coordinates, but the problem is that I almost always use different icon sizes for each watch face + I need to add different icons depending on the watch face = still a lot of manual work.

That's why I decided to automate it all and I made this simple tool in PHP that can do all this difficult work for me in one minute.

It all runs on my home server, so I can access the tool from any PC in the home. In the future, I am thinking, if I catch all the flies and maybe add some other useful tools, to publish the GGT tool somewhere on the Internet and give others access to it. However, it is still only at the level of reasoning. I would definitely like to include in the tool the possibility of generating bitmap character sets for generating analog hands. At the moment, I don't know if I will create my own model for rotation and character generation, but maybe user ftrimboli allows me to use his great python script, which should also be executable on PHP, which I found out (I can install python on my home server).

And the reason why I don't publish it right away is that the whole tool is tailored to my needs based on what I've learned in that short time and what I need to achieve with automation and it's not optimized to work for other users. For example, I only have fonts in the list that I use when creating watch faces and if I need a new font, I simply copy it to a folder on the server by hand. There is no possibility to upload your own and work with it. Also, since it's PHP and I didn't design any form input protections at all, it's quite dangerous for the live server. I think.

I'm quite interested what graphic tools do you use when creating watch faces? Do you also have and use some simple scripts for example written in python that you use to make things easier? Especially with those more design-oriented, where it's more about graphics than data and texts. To me it seemed endlessly exhausting. Until now...

  • As far as a custom font for Icons, have you seen this thread?  There's a TTF file for watch face icons, and with BMFont you can easily create various sizes.

    https://forums.garmin.com/developer/connect-iq/f/discussion/6777/where-to-find-standard-garmin-icons-for-use-in-apps-watchfaces

    As far as hands for an analog watch face, have you looked at tilemapper?

    https://forums.garmin.com/developer/connect-iq/f/discussion/195648/tilemapper-tool-for-tile-mapped-anti-aliased-graphics

  • Yes, I know many character sets for activity icons, but I'm more satisfied when I can draw my own. Bmfont is nice, but it is only the basis and it is always necessary to set the size of the character set for each resolution rather awkwardly via the top menu menu and export size by size.

    Tilemapper is fantastic and very useful and I use it. It's actually the only thing I can use to make clock hands. But it is also quite laborious, if for example I have one hand and it has two colors, then I have to write and edit a .bat file. And if one hand has two colors and there are three hands, then I need a 6 character set. Well, and if they are graphically more complicated hands and do not fit into one character set (those about 570 characters) and need to be divided into 0-29; 39-59, so it all doubles. We are already at the 12th character sets for one resolution. If I'm creating for 7 resolutions, I need an 84(!) character set. Ugh.

    The only problem is that it is unnecessarily time-consuming. It is much better if there is a tool for this that manages everything at once and in a fraction of the time. Basically, on another platform, I never even had to pause with something like clock hands. Hour hands were either easy to create or there were things like rotating bitmap graphics. I'm very surprised that garmin doesn't provide any quality tools to the developers and they state in their documentation that people can download and use BMfont. Weird.

  • BMFont has a command line which you can use to generate many sizes in one go. You don't need to use the GUI at all. 

  • I didn't notice that :) Thank You. Even if it would partially help, it wouldn't be a significant time saver in my case. 
    I would still have to manually calculate all the sizes of character sets for all resolutions in advance. And I don't know if there is a possibility to export different sets for the assembly. for example, for the character set size of 72px, I only need numbers, and for the size of 36px, I only need capital letters.

  • For a custom font, you can specify "filter" in the xml file.  Export all characters, and then with "filter", specify 0 through 9 for the larger one, and A through Z for the smaller one

    For example,

    <font id="large" antialias="true" filter="0123456789:" filename="lai100.fnt"/
  • I'm not sure what your PHP script can do, that you can't do with BMFont? I literally can create a bash script outputting 100's of sizes each with its own settings etfc in seconds.

    To be honests it seems you just kinda made something redundant, not knowing BMFont is actually just a command line tool? 

  • basically, it's about not having to deal with what sizes of character sets must be used for other resolutions. I work in the native resolution of 454px and all other resolutions are just a recalculation that takes place from this size. this means that a font size of 72px for a resolution of 454px is a font size of 38px for a resolution of 240px. I don't have to write any batch files and waste time. I will generate the characters of the set and I can continue with more important things.

    example, how within one minute I have generated all characters of the set for all resolutions.

    but everyone has a completely different style in which they work on dials, so our needs probably diverge here :) just generate, save, copy to watchface and move on.

  •  I also found out that I also need a tool that automatically calculates the exact positions of the elements on the image and generates the .fnt file with characters table and for all resolutions automatically.

    So just draw or find a picture that is created in a grid and use the position calculator to calculate the exact positions of the individual elements in source image.

    A resizer would also be useful...

  • All tools are used for the first time in this watch face. Incredible time saver for me.