Difference between Graphics.FONT.. and Graphics.FONT_SYSTEM

Does anyone know the difference?

For example is there any difference between

Graphics.FONT_NUMBER_THAI_HOT (since 1.0.0) and

Graphics.FONT_SYSTEM_NUMBER_THAI_HOT (since 1.3.0)?

I'm interested in fonts as I've just moved from a Vivoactive to a 920XT and the built-in fonts are very different.
  • If you look at ${SDKROOT}/bin/devices.xml, you'll see that each device element has a fonts element that describes the fonts that are used. You can use this command (on a windows system) to just see the device and font information from that file...

    C:\Development\Garmin> findstr "part_number= /font" connectiq-sdk-win-2.1.3\bin\devices.xml | more


    If you look through it, you'll probably see that only the Chronos uses different fonts (between the various system/non-system entries).

    You can use the following code to display the various fonts on a device in the simulator...

    using Toybox.Application as App;
    using Toybox.Graphics as Gfx;
    using Toybox.Lang as Lang;
    using Toybox.System as Sys;
    using Toybox.WatchUi as Ui;

    class TestDelegate extends Ui.BehaviorDelegate
    {
    hidden var _view;

    const _fonts = [
    Gfx.FONT_XTINY , "XTINY",
    Gfx.FONT_SYSTEM_XTINY , "SYSTEM_XTINY",
    Gfx.FONT_TINY , "TINY",
    Gfx.FONT_SYSTEM_TINY , "SYSTEM_TINY",
    Gfx.FONT_SMALL , "SMALL",
    Gfx.FONT_SYSTEM_SMALL , "SYSTEM_SMALL",
    Gfx.FONT_MEDIUM , "MEDIUM",
    Gfx.FONT_SYSTEM_MEDIUM , "SYSTEM_MEDIUM",
    Gfx.FONT_LARGE , "LARGE",
    Gfx.FONT_SYSTEM_LARGE , "SYSTEM_LARGE",
    Gfx.FONT_NUMBER_MILD , "NUMBER_MILD",
    Gfx.FONT_SYSTEM_NUMBER_MILD , "SYSTEM_NUMBER_MILD",
    Gfx.FONT_NUMBER_MEDIUM , "NUMBER_MEDIUM",
    Gfx.FONT_SYSTEM_NUMBER_MEDIUM , "SYSTEM_NUMBER_MEDIUM",
    Gfx.FONT_NUMBER_HOT , "NUMBER_HOT",
    Gfx.FONT_SYSTEM_NUMBER_HOT , "SYSTEM_NUMBER_HOT",
    Gfx.FONT_NUMBER_THAI_HOT , "NUMBER_THAI_HOT",
    Gfx.FONT_SYSTEM_NUMBER_THAI_HOT, "SYSTEM_NUMBER_THAI_HOT"
    ];

    hidden var _current;

    function initialize(view) {
    BehaviorDelegate.initialize();
    _view = view;
    _current = 0;

    changeFont();
    }

    function onSelect() {

    changeFont();

    // force a redraw
    Ui.requestUpdate();

    return true;
    }

    hidden function changeFont() {
    // set the display font and font name
    var font = _fonts[_current + 0];
    var name = _fonts[_current + 1];

    // move to the next font
    _current = (_current + 2) % _fonts.size();

    _view.setFont(font, name);
    }
    }

    class TestView extends Ui.View
    {
    function initialize() {
    View.initialize();
    }

    hidden var _font;
    hidden var _name;

    function setFont(font, name) {
    _font = font;
    _name = name;
    }

    function onUpdate(dc) {
    dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_RED);
    dc.clear();

    var cx = dc.getWidth() / 2;
    var cy = dc.getHeight() / 2;
    var fy = dc.getFontHeight(Gfx.FONT_XTINY);

    var text = "12.3";

    dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_BLACK);
    dc.drawText(cx, cy, _font, text, Gfx.TEXT_JUSTIFY_CENTER);

    dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_RED);
    dc.drawText(cx, cy - fy - 4, Gfx.FONT_XTINY, _name, Gfx.TEXT_JUSTIFY_CENTER);
    }
    }

    class TestApp extends App.AppBase {

    function initialize() {
    AppBase.initialize();
    }

    function getInitialView() {
    var view = new TestView();
    return [ view, new TestDelegate(view) ];
    }
    }
  • Thanks Travis

    Great thanks Travis. That's what I needed.