Custom Font not Displaying

I have previously generated and used a custom font on my Watchface ("Concise"). I am now trying to generate a Data Field also with a custom font for a Speedometer. I cannot seem to get the font to display. I am getting no errors but also no text on either the simulator or the actual device. I am using the same font that works for Concise. I even tried creating a new Watch Face and copying the entire code over from Concise and it still does not work! Clearly something has changed that I am missing but the documentation is old and still refers to a Resources.xml instead of a fonts.xml file.

Here is the contents of my fonts.xml file...
<fonts>
<font id="SpeedoFont" filename="Rationale_Modified.fnt" filter="0123456789" />
</fonts>

The "Rationale_Modified.fnt" file is in the /resources/fonts/ folder of the project. As is the font.xml. The font file is a good file as it works for my Concise Watch Face.

Here is the entire code of my test Data Field which I had expect would display "88" is Rationale Modified font...
using Toybox.WatchUi as Ui;
using Toybox.Graphics as Gfx;

class CustFontView extends Ui.DataField {

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

function onLayout(dc) {
}

function compute(info) {
}

function onUpdate(dc) {
var SFont = Ui.loadResource(Rez.Fonts.SpeedoFont);
dc.setColor( Gfx.COLOR_RED, Gfx.COLOR_TRANSPARENT );
dc.drawText( 2, 2, SFont , "88", Gfx.TEXT_JUSTIFY_CENTER );
}
}

What am I missing?

travis.vitek over 8 years ago

I'm not sure what is wrong with your project, but I can see a few things that you should consider doing. I've written a sample that uses a custom font and it works as expected...

using Toybox.Application as App;
using Toybox.Graphics as Gfx;
using Toybox.WatchUi as Ui;

class TestView extends Ui.DataField
{
    hidden var _count;
    hidden var _font;

    function initialize() {
        DataField.initialize();
        _count = 0;
    }

    function onLayout(dc) {
        // just load the font once
        _font = Ui.loadResource(Rez.Fonts.SpeedoFont);
    }

    function onUpdate(dc) {

        // display the text centered so it appears on a round watch face
        var cx = dc.getWidth() / 2;
        var cy = dc.getHeight() / 2;

        // be sure to clear the data field background so we don't end up with rendering artifacts
        var background = getBackgroundColor();
        dc.setColor(~background & 0xFFFFFF, background);
        dc.clear();

        dc.setColor(Gfx.COLOR_RED, Gfx.COLOR_TRANSPARENT);
        dc.drawText(cx, cy, _font, _count.toString(), Gfx.TEXT_JUSTIFY_CENTER);

        // update the displayed value to expose rendering artifacts
        _count = (_count + 1) % 100;
    }
}

class TestApp extends App.AppBase {

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

    function getInitialView() {
        return [ new TestView() ];
    }
}

I'm using a single resource file, and it looks like this...

<resources>

  <drawables>
    <bitmap id="LauncherIcon" filename="images/launcher_icon.png" />
  </drawables>

  <strings>
    <string id="AppName">Test</string>
  </strings>
  
  <bitmaps />
  
  <fonts>
    <font id="SpeedoFont" filename="fonts/blackdiamond.fnt" filter="0123456789" />
  </fonts>

</resources>

Astranomical over 8 years ago

I've written a sample that uses a custom font and it works as expected...

Thanks Travis. I started a new project with the same name as yours ("Test") and copied your exact code into it. I noticed that you seem to have just a Test.mc file (judging by the fact all the code is in one chain) where as my system made a TestView.mc and TestApp.mc so I copied the code appropriately. My older project ("Concise") was also constructed this way at the time as this was how the SDK worked. I also created a resources.xml file in the resources folder and copied your xml into (with a modification for the font name). When I ran it, I had the same issue I have been encountering - no data shown. Changing to a built in font and your code works perfectly.

Therefore it appears to be to be a configuration type issue. I have the latest SDK (2.1.3) and Eclipse Lune SR2 (4.4.2). I created my Project as a Data Field with minimum SDK of 2.1.x (I later changed this to 1.2.x with no improvement) targeting an "EDGE 820 / Explore" only. Can you please let me know what versions you are working with and what project properties you chose?

travis.vitek over 8 years ago

I have the latest SDK (2.1.3)

2.1.3

Eclipse Lune SR2 (4.4.2)

Luna 4.4.0

I created my Project as a Data Field with minimum SDK of 2.1.x

I've tested with both.

targeting an "EDGE 820 / Explore" only.

I've ran the simulator with various different devices, including the edge_820 profile. All of them work just fine.

travis.vitek over 8 years ago

I've uploaded a zip of my test project folder here if you'd like to try it.

Travis

Astranomical over 8 years ago

Thanks Travis - Problem solved! My .png file had become corrupt. Recreated font and hey presto mine works too. Should have seen that didn't. Thanks so much for your help!!!