Rookie/Green Horn Needing Help

Former Member over 7 years ago

So I tried to replicate the results (different font) that Petr Koula had when he was doing the video tutorial. However, when I run the simulation at the end it just shows up black. I am trying to create a watch face for a Fenix 5X Plus to no avail. Any help would be appreciated.

Running Mac OS Mojave
The newest Eclipse with Connect IQ SDK

using Toybox.WatchUi as Ui;

using Toybox.Graphicsas Gfx;

using Toybox.Systemas Sys;

using Toybox.Langclass USAWatchView




as Lang;extendsUi.WatchFace {

    function initialize() {

        WatchFace.initialize();

}

var customFont = null;



    function onLayout(dc) {

    customFont = Ui.loadResource(Rez.Fonts.customFont);

    }




    function onUpdate(dc) {

dc.setColor(Gfx.COLOR_BLACK, Gfx.COLOR_BLACK);

dc.clear();

        var clockTime = System.getClockTime();

        var hour = clockTime.hour;

        if (!Sys.getDeviceSettings().is24Hour) {

         hour = hour % 12;

         if (hour == 0) {

         hour = 12;

           }

    }

    dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_BLACK);

    dc.drawText(dc.getWidth()/2, 22, customFont, hour.toString(), Gfx.TEXT_JUSTIFY_RIGHT);

    dc.setColor(Gfx.COLOR_RED, Gfx.COLOR_BLACK);

    dc.drawText(dc.getWidth()/2, 22, customFont, Lang.format("$1$", [clockTime.min.format("%02d")]), Gfx.TEXT_JUSTIFY_LEFT);




  }



    function onHide() {

    }




    function onExitSleep() {

    }






    function onEnterSleep() {

    }




}

flowstate over 7 years ago

Without knowing how your custom font was created it's hard to say.

However, if I comment out...
// customFont = Ui.loadResource(Rez.Fonts.customFont);

...and change the following line...

//var customFont = null;
var customFont = Gfx.FONT_NUMBER_THAI_HOT; // any of the standard fonts will do

...I do see the current time, displayed in white and red. (Although it's really high up.)

Which suggests to me there's an issue with your custom font.

Did you save it as PNG when you created it? Did you filter out too many characters? Did you copy both the .PNG and .FNT files to the resources folder?

Here's how I created my custom font (for a different kind of app).

I got most of the following procedure from here
https://developer.garmin.com/connect...ompiler/#fonts

You can use FontForge and BMFont to create fonts:
https://fontforge.github.io/en-US/
http://www.angelcode.com/products/bmfont/

If you have a pre-existing font (e.g. in TTF format) to convert, skip to step 4.

In FontForge
1) Create a new font
2) Add all your characters. E.g. Import SVG files for your icons
3) Use Generate Fonts... which exports as TTF

4) Import the font into your OS (double-click on the TTF in Windows)

In BMFont:
5) In Font Options,
5a) Select your font.
5b) Set size in pixels

6) In Export Options,
6a) Set Channel A to glyph.
6b) Set textures to PNG

7) Click Save Bitmap Font as...

jim_m_58 over 7 years ago

When you use bmfont, you'll get these files - <myfont>.fnt and one or more<myfont>.png.

The fnt is a text file, and that's what you reference in the xml file and defines where things are in the png(s), and the .png's have to be in the same place.

if you look at the png do you see the characters you expect? If you're not using bmfont, the results should be the same - the text file and png file(s).

In addition to Petr's video, HermoT did a blog post about some of his Tricks with Custom Fonts which may help.