Which font to use in a DataField for the label?

What is the best practice for font and position of datafield label? I'm sure I'm not the 1st developer that tries to create a custom field and want it to look like the native. (Using SimpleDataField is not a solution, there are graphics also, just not shown on the above images) Which font should I use? Where should I position it? Or should I have a different font and position for each device? (maybe for each datafield-layout?) If the answer is to do it per device then is there a way to see a default datafield in the simulator? I'd like to be able to run my DF and see it next to some simple field, like Timer (or doesn't matter which)

I used Graphics.FONT_XTINY for the label "HRM HR" and positioned at the top of the field. This looks exactly like the native datafields in fenix 6:

Today I saw how it looks in Edge Explore 2 compared to the native fields ("HRM B-118"):

The font is too small and the label is "glued" to the top of the field (or maybe that just looks like that because of the small font)

Top Replies

FlowState over 2 years ago in reply to FlowState +1 verified
Speaking of simulator.json, the font name/size is right in the layout definition.

e.g. For 945 LTE:
```
"layouts": [{
    "datafields": {
      "datafields": [{
            "drawBorders": true,
     …
```

All Replies

0 FlowState over 2 years ago

I would say "create a simple data field with a similar label and value as a native field", and select the layout of your choice in the sim to see how a native data field would look, but at least for 945 LTE, the sim doesn't faithfully reproduce the alignment of the label or the value. It might have used the correct font tho - I'm not sure.

e.g.

Sim:

Real device:

There's also the fact that old devices render native field labels in title case like "Lap Pace" but newer devices use all caps like "LAP PACE", which is something you won't see in the sim.

So I'll just sarcastically echo the default forum advice: "Just test on a real device!"

0 flocsy🤠 over 2 years ago in reply to FlowState

Thanks, That's a good idea, at least I have some chance to compare them in the simulator. It's a pity I can't make screenshots from command line then I would be able to make a script that runs the SimpleDataField in each device and saves the screenshot, and then I open one by one each screenshot and run my app next to it and tweak the font and layout... So now I'll have to do it manually I guess.

Ah and also each device starts with some random layout (X datafields)...

0 _psx_ over 2 years ago in reply to flocsy🤠

custom fonts == big memory consumption

0 flocsy🤠 over 2 years ago in reply to _psx_

I don't think you understood the problem. I'm only using system fonts. The question is which one of them looks the same as the datafield labels.

0 _psx_ over 2 years ago

fast reading custom filed / custom fonts

0 FlowState over 2 years ago in reply to flocsy🤠

flocsy🤠 said:
Ah and also each device starts with some random layout (X datafields)...

You could try auto-generating / auto-editing the layouts.datafields section of simulator.json for your automated testing / investigation, after saving a backup copy, of course. Hopefully if only one layout exists in simulator.json, the sim will pick that one automatically. (I assume there isn't some other duplicate reference / definition to data fields layouts in some other file.)

EDIT: although this seems pointless as you can grab the font right from the definition, unless you really want screenshots.

+1 FlowState over 2 years ago in reply to FlowState

Speaking of simulator.json, the font name/size is right in the layout definition.

e.g. For 945 LTE:

"layouts": [{
    "datafields": {
      "datafields": [{
            "drawBorders": true,
            "fields": [{
              "data": {
                "font": "simExtNumber3",
                "justification": "center",
                "width": 192,
                "x": 119,
                "y": 149
              },
              "label": {
                "font": "xtiny",
                "justification": "center",
                "x": 120,
                "y": 70
              },
              "labelDisabled": false,
              "location": {
                "height": 240,
                "width": 240,
                "x": 0,
                "y": 0
              },
              "obscurity": [
                "left",
                "top",
                "right",
                "bottom"
              ]
            }],
            "name": "1 Field"
          },
          {
            "drawBorders": true,
            "fields": [
                {
                    "data": {
                        "font": "numberThaiHot",
                        "justification": "center",
                        "width": 154,
                        "x": 120,
                        "y": 107
                    },
                    "label": {
                        "font": "xtiny",
                        "justification": "center",
                        "x": 120,
                        "y": 49
                    },
                    "labelDisabled": false,
                    "location": {
                        "height": 119,
                        "width": 240,
                        "x": 0,
                        "y": 0
                    },
                    "obscurity": [
                        "left",
                        "top",
                        "right"
                    ]
                },
                ...

So that may save you some time. But there's still the problem where the label and value positions don't seem to match reality :/.

The other thing is that, in this case, some of the layouts seem to be using a font that's only available to the simulator, which leaves the question of what font the real device uses... (Unless the device uses a similar font, and it's just not available to CIQ, which means you would potentially have to use a custom font.)

0 flocsy🤠 over 2 years ago in reply to FlowState

Ok, this really can work because it has both the font and the y position. But I see now that it's much more complicated than what I thought because different fields in different layouts can have differences on the same device.

Slightly offtoppic, but this (maybe together with an old idea) can be useful:

This could be used to auto-generate some code for each device that will detect (as much as possible) in which position on the screen the datafield is based on width + height (and in relevant cases obscurityFlags). I was thinking about once doing this. It would have an advantage that on a circular watch it could in some cases detect more precisely the available screen estate. For example in the following layout:

it would be possible to differentiate between these 2 positions and use correct layout.

But I admit this is an edge case, and not sure if it's worth the effort. Although in theory it could not only make the layouts nicer but also save a significant amount of code, because one huge function that currently calculates positions and font sizes based on obscurityFlags + width + height in real time would _probably_ be possible to replace by a compile-time generated table and a relatively small code-size and efficient lookup in run-time.

0 FlowState over 2 years ago in reply to flocsy🤠

flocsy🤠 said:
Ok, this really can work because it has both the font and the y position

Yeah but like I showed above, what's shown in the sim isn't exactly the same as what's on the device, at least for my device and the one layout I tried.

Sure I can file a bug report but I can already see the very first comment: "Understand the simulator is not an emulator!"

0 peterdedecker over 2 years ago

flocsy🤠 said:
Using SimpleDataField is not a solution

ok it's not an option for you, but did you know that even if it were an option that the SimpleDataField also not always matches the look of the native data field....