custom font adding

When you use a custom font, in your code you have to load it.  For example:

timeF=WatchUi.loadResource(Rez.Fonts.tbig);

(where "tbig" is the ID of the font)

You then use timeF when you want  to use that font.

Watch this.  It was done by Petr K, the Actiface guy.

https://www.youtube.com/watch?v=PRQyA4BeqqE

It was done years back and a few minor things have changed.  Graphics instead of Gfx for example.

Hermo's (NoFrills) writeup is more advanced - once you understand custom fonts, here are some tricks you can use.

Hi Jim, ty for answering. I wrote what you wrote in my code, I called but just used font and custom instead of timeF and tbig. Ive also loaded the font in a font folder in resources and used the app the guy in the video suggested. Also I have followed the video twice trying to learn the steps to custom font but it didnt work in neither of those times.

Watch Petr's video. It shows all the steps.  And yes, I remember "Square Watch" 

I watched Petr's video and followed it step by step with my own font. My project which is a copy of his project with a different font I used from Bitmap font generator is not working and has errors in it. Here is the project is a drive file: https://drive.google.com/drive/folders/1QCZxRW9cBGVTeGnfg6_eYYwuEHYaVKw0?usp=sharing

because the project I used by following the tutorial isn't working I am struggling with using a custom font

Post the errors you see in this forum, and skip the whole google thing.  And you can do screen shots if needed.

Your existing code has some typos which are preventing it from building. This is where beautifying your code and/or making consistent use of indentation would be helpful. (The existing code has a mix of tabs and spaces, and beyond that, inconsistent indentation, which can make it harder to read.)

Here's what I changed to get the code to build and run. (I overrode the custom font because it isn't working yet -- haven't had a chance to look at that)

    function onLayout(dc as Dc) as Void {
        customFont = WatchUi.loadResource(Rez.Fonts.customFont);
        customFont = Graphics.FONT_NUMBER_MILD; // temporary code as the custom font isn't working
    }

    function onUpdate(dc as Dc) as Void {
        dc.clear();
        var clockTime = System.getClockTime();
        var hour = clockTime.hour;
        if (!System.getDeviceSettings().is24Hour) {
            hour = hour % 12;
            if (hour == 0) {
                hour = 12;
            }
        }
        dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_BLACK);
        dc.drawText(dc.getWidth() / 2, 22, customFont, hour.toString(), Graphics.TEXT_JUSTIFY_RIGHT);
        dc.setColor(Graphics.COLOR_RED, Graphics.COLOR_BLACK);
        dc.drawText(dc.getWidth() / 2, 22, customFont, hour.toString(), Graphics.TEXT_JUSTIFY_LEFT);
    }

Found the problem with the custom font file. custom.fnt was pointing to a non-existent file.

Original:

page id=0 file="ninja naruto_0.png"

New:

page id=0 file="custom_0.png"

Arguably the compiler should throw an error here but oh well.

I changed onLayout back to the original...

    function onLayout(dc as Dc) as Void {
        customFont = WatchUi.loadResource(Rez.Fonts.customFont);
    }

...built and ran the app:

This exposed another issue in the app. The actual hour is being used for both the displayed hour and displayed minutes. I'm guessing you're aware of that tho, and this is just intermediate code that you had while you're getting the app to work.

Np!

Beautifying your code makes it easier for you and others to see its structure.

(Although editors like Sublime and VS Code also have great plugins which help even further, by doing things such as using different colors for different levels of matching brackets. You'll also find that if you use VS Code, it will naturally format your code as you type -- to a certain extent -- by choosing the correct indentation level after you type "{" + ENTER, for example.) Sublime will do something similar, but only if it knows the type of file you are editing -- in the case of monkey C, you would have to fool Sublime into thinking it's Java or JavaScript. Eclipse would do the same thing if it thought your MC files were Java (for example), but then you would lose syntax highlighting and auto-complete.

What you can do is use another editor to beautify your code, such as Sublime Text.

Installation:

1) Install Sublime Text: https://www.sublimetext.com/

2) CTRL/CMD-SHIFT-P, "Install Package Control"

3) CTRL-SHIFT-P, "Install Package", "Prettify" (select "HTML-CSS-JS Prettify")

Usage:

1) Copy your code into Sublime Text

2) CTRL-SHIFT-P, "Prettify" (select "HTMLPrettify"). This will format your code and get rid of mixed tabs/spaces.

3) Copy your text back into Eclipse.

I would also go to Eclipse preferences and turn on visible whitespace so you can see where you have mixed tabs and spaces.

Menu > Window (Eclipse on Mac) > Preferences > General > Editors > Text Editors > Show whitespace characters

Another way to do this without leaving Eclipse would be to create a new empty Java file (e.g. call it tmp.java), paste your code into the file, press CTRL-SHIFT-F and copy it back into the original. The downside of this is that it doesn't resolve mixed tabs and spaces.

Or you could go Window > Preferences > General > Editors > File Associations, and change the default editor for *.mc to Java Editor, but I don't recommend that for the reasons I mentioned above.

The nice thing about VS Code (although it's not perfect), is:

- it will auto-format any kind of file as you type (even plain text files)

- it has a Beautify extension that runs on any kind of file

Eclipse is a little too rigid, IMO.

Hi, thanks a lot for the help! I followed the steps for the Sublime Text and for the show whitespace characters in Eclipse.

In the case of Sublime Text I had a problem when trying to use the pretify. It said "node.js was not found in the default path. please specify the location" and opened another window with a code. I guess the code has a meaning so I'll add it:

https://pastebin.com/DmBfV8tt by searching in google I have seen that node.js is a program running over java script files but because I don't know about it's connection to this specific package of the prettify I think it will be better waiting for your response. TY again for helping me out, really appreciating it!