Difference between Graphics.FONT.. and Graphics.FONT_SYSTEM

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) ];
}
}