• Replies 126 replies
  • Subscribers 33 subscribers
  • Views 27886 views
  • Users 0 members are here
Options
Related

"tilemapper" tool for tile-mapped anti-aliased graphics

ftrimboli
over 5 years ago

Hey folks,

Here's my command line tool that helps developers build tile-mapped anti-aliased graphics for Garmin wearables;
github.com/.../garmin-tilemapper

Way back in 2017, I showcased a tile-map sprite technique to compress graphics;
forums.garmin.com/.../my-technique-for-anti-aliased-animation-and-bitmaps

You've probably seen my anti-aliased watchfaces in the app store. 
https://apps.garmin.com/en-US/developer/e43b20dc-99b5-4906-ae38-65b36a68b208/apps

This is one of the tools I have been using to develop them.

As a handy extra, I've also included two sample watchfaces, and their artwork. This includes a new "steamboat willie" watchface.

The great thing about this approach, is that you can scale your designs seamlessly across many different devices and resolutions.

Please be mindful that this is the first release, so your milage may vary with bugs, and platform support. Happy to hear your feedback.

Can't wait to see what you all create!! Slight smile

  • over 5 years ago in reply to HermoT

    Wow, that’s great — happy to see your creations! Grin

  • over 5 years ago in reply to ftrimboli

    Version 0.9.3 is out. Fixed a few bugs allowing you to generate up to 576 tiles per font.

    Also, there's a few updated samples to play with.

  • over 5 years ago in reply to ftrimboli

    Thanks Franco

    Appreciate your efforts with this, it has been super handy (pardon the pun)

    Is there any way to get decimal rotate angle steps, like -3.6 for example.

    I realise ctypes_int needs integers, but was wondering if you know how to (or could make an option) to rotate decimal/float and still get a json array with decimal angles

    Useful for hands/pointers that don't only follow 6 degree increments only as hrs/sec/min

  • over 5 years ago

    Hi, 

    That sounds incredible and awsome !

    Since im a newbe on dev, I really dont know how to use it...

    Can someone explain me step by step how to do ? 

    Have a great day. 

    Sob

  • over 4 years ago

    It is possible to display the seconds?
    I speak with the BufferedBitmap, I try but I explode the memory.

  • over 4 years ago in reply to Alexis_Lecanu

    This is quite difficult due to the memory constraints on the devices!

  • over 4 years ago in reply to ftrimboli

    Thanks for putting in the work here. I was able to do pip ,load Pillow, etc. Then I was able to get your steamboat willie to work. I actually originally got your code from the start to run website and had to modify that a lot to get it going. I was wondering what editing tool you used? Also, you mentioned 240x240 as the default resolution, but for arms and hands, I assume you want something smaller... or maybe I am missing something? To be clearer, to draw the arm and the hand, i would assume you want a smaller footprint on the watch than let's say his body. So, how do you handle that? thanks

    Oh... and one other thing... I would assume for the minute hand, you would want it to move 6 degrees every minute, but not so with the hour hand. Since the hour hand moves only 6 degrees every hour, you would like want it to move only 0.5 degrees every 5 minutes... or maybe every minute you move it 0.1 degrees?

  • over 4 years ago in reply to 4716774

    The hour hand moves 360/12=30 degrees every hour, 6 degrees every 12 minutes

  • over 3 years ago

    Excellent work! The tool works like a charm! I am a newbie and hobbyist but was able to create a great watch face in a matter of hours.  I have a few questions.

    1. Are anti-aliasing and a simpler script the only upsides to this method? Does it drain less battery?
    2. Is it ever going to be able to incorporate a second hand (e.g., in newer more capable devices)? And/Or, can we use the polygon approach for drawing an overlay of the second hand together with the tiled images?
    3. Does this approach allow us to create and overlay data fields and objects (i.e., custom-designed date window, battery meter/warning)

    Thanks for sharing your hard work with the community.

  • over 3 years ago in reply to ftrimboli

    Hi I'm trying to use your tile mapper program to create a rotated font (ABCDE ... etc) with all characters in one fnt/png output set,  not an animation. I'm having a lot of difficulty in understanding how to do this.  Do I have to make a PNG file for each character?  What tool do you use to do this easily? What about the margins required around the character?  How is proportional spacing handled if all the input PNGs are 1:1 aspect ratio. Let's say I want a 15 pixel high font on a 240x240 screen.  What size should the input PNGs be, and should the -r parameter be 240?  All I'm getting is a blank output PNG or a PNG with the characters sliced up. Thanks in advance.