Last year I moved to a beach and was suddenly interested in knowing the tides. I also have an older Garmin Forerunner 235 GPS watch, and decided to write a Tides widget for the watch. There were already some in the Garmin Connect store, but most didn't support my older watch, cost money, used an API that cost money, or had more features than I was really interested in.
Writing the app was fairly straightforward - it's mostly just a modified version of the WebRequest example app included with the Garmin Connect SDK. I chose to use the NOAA tide API because it is free. This limits the app to only US tides (including territories), but by being free, I don't need to charge others for the app.
When I initially wrote the app last year, I only designed it to work with my Forerunner 235. I tried a couple other watches but each one with a different screen resolution or shape would make the layout wonky, and it was just too much work to design a layout individually for all the various Garmin models.
https://apps.garmin.com/en-US/apps/5d744fb3-998d-4d6b-9214-3c069cff871c
This year, I went back into my code to see if I could do something about that. I tried and tried and tried, but some watches just don't have built in fonts of the correct size, which is such a weird oversight from Garmin - the only fonts available are "Extra Tiny", "Tiny", "Small", "Medium", and "Large". These are just names that mean nothing - most of the time 2 or 3 of them are the same size, and there isn't really Extra Tiny or Tiny, they are the same size as small.
Why they couldn't do fonts normally by Point size, I don't know, because that's literally the solution I used to make it it work with my app - I created an Arial 22pt font and used it just about everywhere. It works cross device on every device. I was shocked when it turned out that I only needed 1 font and that it would look the same everywhere and didn't need to scale it for low resolution devices vs high resolution devices.
Because it's so poorly documented, here's what I had to do to get it to work:
Create a font as documented here: https://developer.garmin.com/connect-iq/core-topics/resources/#fonts. Note that you have to select all the characters in BMFont that you want included in the font. I didn't realize this and was creating empty fonts.
Under Resources, create a "fonts" directory
Add the PNG and FNT files here. Mine was called arial22pt.png and arial22pt.fnt
Create a fonts.xml in this directory. Here's what's in my fonts.xml:
<fonts>
<font id="arial22pt" filename="arial22pt.fnt" />
</fonts>
To reference your font in your layout: font="@Fonts.arial22pt"
Then things got interesting - supporting more devices meant more feedback. I had assumed 3 or 4 High/Low tides a day everywhere. It turns out that in the Gulf Of Mexico, there are only 2 per day. Who knew? Many thanks to the user who not only let me knew about the bug, but also figured out what the problem was. The fix was fairly straightforward, but there were a couple of places where I assumed 3 or 4 tides that needed to be updated. Sorry for the potato photo, I didn't think to take a screenshot before fixing the code:
Then someone asked me to get it working on an Instinct 2. Wow, those are weird devices. Monochrome screen with a little circle cutout in the corner for some reason? Anyone have any ideas what tide data I could put in the circle?
This has been a fun app to work on, it's pretty small so it's easy to come back to after a year and the Garmin SDK is actually pretty good to work with. The simulator is helpful, the documentation is pretty good, and the development community is pretty solid. Garmin just needs to standardize their fonts. If anyone wants to know more about building an app for a Garmin Watch, send me a message. I'm willing to share my code and my experiences.
-Andrew
Lot38Designs
Here's another link to the Daily Tides app:
https://apps.garmin.com/en-US/apps/5d744fb3-998d-4d6b-9214-3c069cff871c