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...

  • GGT clock hand generator in action. Will generate all necessary images and files. Just copy and done.
    Here is an example of how simple it is. I will add hands for all resolutions to the empty watchface. (the generation process is accelerated by about 60x. I don't have a very powerful server :)

  • hello, Where can I download GGT?

  • thank you GGT. in less than an hour I have completely prepared more complex (each consists of three layers; transparent black frame and two colors on the hand) clock hands and hands for the battery and goal + hr zone bar for all resolutions. character set and icon set as well, but they are not used in the demo.

    whups. I apologize for the sound in the video, I forgot to turn off the audio recording so you can hear the style I'm listening to ;) Boris Brejcha fires it up.


    by the way. I often encountered a memory problem with devices with less RAM (92kb) when the generated images for more complex hands simply ran out and the watch face fell. therefore, I optimized GGT and added the possibility of generating image sizes that automatically adjust to the resolution. thus generating more images and more code for processing, but the watch has no problem with lack of memory. on a device with 92kb ram, I have this particular watch face where there are 5 hands and each of them uses 3 layers, almost half of the free memory.

  • We’ve been asking for a download link?

  • yes, sorry, but the download link does not exist. it is not an application that can be run on a PC as an .exe file. GGT works as a web application and it runs on a server at home so that I can access the tool from any PC. therefore there is no URL either. yet. I`m thinking about something and prepare everything necessary, so sooner or later GGT will be available for everyone. but there is no time horizon for when it will be. I ask for your patience ;)

    in addition, I am constantly finding small bugs while working and i optimizing performance and adding new functionalities that make everything even easier. for example, the possibility to set the transparency for the characters of the set, or the automatic generation of the set for the icons, because I really didn't enjoy manually defining the matrix and writing the numbers in the table. now it puts together an icon set for me in one click. and finally I can save the project and continue later. until now, when I closed the browser, everything was gone :)

  • Hi all. After many, many another improvements (and I have more planned), GGT is finally out!

    ggt.teretto.com

  • Excellent, will try!

    Btw, do you have any sample projects included or documentation how to use e.g clockhands etc?

  • I should still work on the documentation. but the use is simple. GGT will create processed graphics for each tool and .fnt or .json files. in the case of hour hands, GGT also generates the source code. all that needs to be done is to copy the output from GGT into the project. it's clear to me that everyone probably approaches their projects differently, so I don't know the code structure and methods of other developers.

    in any case, GGT is not a graphic editor and therefore it is alpha-omega to insert and process pre-prepared images. the basic rule is not to use unnecessarily large images. choose one native resolution in advance, which will be used for the entire project. I use the largest 454x454 and I don't notice the other resolutions. I always design the entire graphics of projects for a resolution of 454. I export the necessary images from the graphics editor and transfer them to GGT for processing. I always use images with the same aspect ratio. I will avoid unnecessary problems. so I adjust all the pictures in advance into squares with a black or transparent background.

    for example. these would be my source images (open attached image in new tab) for the hour hands. they should always be prepared so that the handle rotates around the center.

    then, GGT with these three images will generate this (the sample is only generated for 454x454 resolution)

    the downloaded output then contains completely everything necessary


    and then just copy everything to the project.