Simple DataField layout specs

Getting my feet wet in Connect IQ programming, I'm doing a simple data field, but one which requires changing the label and can't be implemented using SimpleDataField. So I'm left with direct drawing or layouts, but in either case I've run into an issue where I'd like the field to appear exactly as the standard Garmin fields.

On my initial target -- the FR645 (same as FR935) -- there are several available field layouts and the standard implementation used two or three different fonts as well as different relative positioning in the field. The UXGuide shows the specs for the font sizes and layout parameters, but it would really be helpful to know the positioning parameters (X, Y, etc.) that are used by the build-in data field items. Otherwise it seems like I'm going to have to do some trial-and-error pixel tweaking to get my field lined up with the others that are on the screen. And that would just be for one supported device family.

Is there a solution that I'm missing, such as documentation that I haven't been able to find? What do other developers do?
  • This is really just a matter of doing things by eye. Look at one you want to look like, and tweaking things in yours until it looks right.

    I think in many cases, people just use a layout that works for what they want to show - and will include things like different colors, etc as they want.

    Part of it is while you are looking at the 645 and 945, if you start building for other devices, trying to look like a native DF could become a huge task.
  • Even the lining up method by eye will not work properly in the end as some of the font sizes used by native data fields has not been made available to connect iq.

    a way out is to import a custom font (if your data field doesnt have to much logic and you have memory to spare...)
  • Yes, you will find that you start out with "idealistic code" where you try to position everything properly and respect all the font heights returned by the API. Then you'll see that some targets like VA3, FR230, Fenix 3, etc. actually return a much taller height in pixels in the SDK than the font actually physically takes up, so you might start hardcoding/overriding certain things. (I know that ignoring the font height in the API is not great practice, but what else are you going to do when users complain that numbers are too small, and they can clearly fit?)

    I have my own custom layout code where I do emulate native 2/4 field layouts, but I do have little hardcoded pixel tweaks here and there. It does become a nightmare when you code for different platforms. I can tell you the font/screen families are roughly:
    FR230/235/630/735 (Semiround)

    Fenix 5/5X/5 Plus, 935, 645 (240x240)
    Fenix 5S (similar to above, but 218x218 instead of 240x240)

    Approach S60/VA3 (also 240x240, but different fonts)

    Fenix 3 (also a 218x218 screen, but totally different fonts than 5S)

    920XT
    Vivoactive (same screen as 920XT, but different fonts)

    VAHR


    Now imagine not only doing layouts for all those devices, but applying your own tweaks to align things and make the fonts as big as possible. Then you have to check that everything always looks good.

    You can line things up by eye, but you can also compare screenshots from the sim/device to your own app, if that helps. That way you can be as pixel-perfect as possible. But then again, will anyone notice while they're biking/running?

    Anyway, to actually answer your question, you can find the X,Y, and font information for layouts in SDK_ROOT/bin/devices.xml. The simulator needs this information to render the device screen....
    e.g. 645 4 Fields A
    <datafieldlayouts>
    ...
    <layout name="4 Fields A">
    <field datafont="numberMedium" datajustify="center" datawidth="132" datax="120" datay="74" height="77"
    labelfont="tiny" labeljustify="center" labelx="119" labely="29" left="0" obscurity="7" top="0" width="240" />
    <field datafont="numberMedium" datajustify="center" datawidth="115" datax="60" datay="69" height="82"
    labelfont="tiny" labeljustify="center" labelx="58" labely="25" left="0" obscurity="1" top="79" width="119" />
    <field datafont="numberMedium" datajustify="center" datawidth="115" datax="60" datay="69" height="82"
    labelfont="tiny" labeljustify="center" labelx="58" labely="25" left="121" obscurity="4" top="79" width="119" />
    <field datafont="numberMedium" datajustify="center" datawidth="132" datax="120" datay="65" height="77"
    labelfont="tiny" labeljustify="center" labelx="119" labely="21" left="0" obscurity="13" top="163" width="240" />
    /layout>