Analog Watchface Fenix 6SPro Font Problem

Hello, 

I am completely new to the language of Monkey C. 

Since I am trying to create a first simple version of an analog watchface I got following problem:

I want to draw the 3, 6, 9 and 12 hour labels on the watchface. When Im adding the drawClockNumbers function to the onLayout function and run it afterwards, my simulation isn't show me anything... Is there a problem with the font I am using? I use the font from the analog sample folder.(blackdiamond.fnt)

On the other side, removing the drawClockNumbers function results in my simulation showing me everything correctly. So the problem has to be the drawClockNumbers function.

That is the code of my ...View.mc file: 

import Toybox.Graphics;
import Toybox.Lang;
import Toybox.System;
import Toybox.WatchUi;

class AnalogesWFView extends WatchUi.WatchFace {

    private var _hourHandLength = 50;
    private var _minuteHandLength = 70;
    private var _secondHandLength = 90;
    private var _font as FontResource?;

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

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

    function onUpdate(dc as Dc) {
        var _centerX = dc.getWidth() / 2;
        var _centerY = dc.getHeight() / 2;

        drawBackground(dc, _centerX, _centerY);

        drawClockNumbers(dc, _centerX, _centerY);

        var _currentTime = System.getClockTime();
        var _hours = _currentTime.hour % 12;
        var _minutes = _currentTime.min;
        var _seconds = _currentTime.sec;

        drawHourHand(_centerX, _centerY, _hourHandLength, _hours, _minutes, dc);
        drawMinuteHand(_centerX, _centerY, _minuteHandLength, _minutes, dc);
        drawSecondHand(_centerX, _centerY, _secondHandLength, _seconds, dc);

        WatchUi.requestUpdate();
    }

    function drawHourHand(_centerX as Number, _centerY as Number, _hourHandLength as Number, _hours as Number, _minutes as Number, dc as Dc){
        var _hourAngle = ((_hours + _minutes / 60.0) * 30) - 90;
        var _hourX = _centerX + _hourHandLength * Math.cos(Math.toRadians(_hourAngle));
        var _hourY = _centerY + _hourHandLength * Math.sin(Math.toRadians(_hourAngle));
        dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_BLACK);
        dc.drawLine(_centerX, _centerY, _hourX, _hourY);
    }

    function drawMinuteHand(_centerX as Number, _centerY as Number, _minuteHandLength as Number, _minutes as Number, dc as Dc){
        var _minuteAngle = (_minutes * 6) - 90;
        var _minuteX = _centerX + _minuteHandLength * Math.cos(Math.toRadians(_minuteAngle));
        var _minuteY = _centerY + _minuteHandLength * Math.sin(Math.toRadians(_minuteAngle));
        dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_BLACK);
        dc.drawLine(_centerX, _centerY, _minuteX, _minuteY);
    }

    function drawSecondHand(_centerX as Number, _centerY as Number, _secondHandLength as Number, _seconds as Number, dc as Dc){
        var _secondAngle = (_seconds * 6) - 90;
        var _secondX = _centerX + _secondHandLength * Math.cos(Math.toRadians(_secondAngle));
        var _secondY = _centerY + _secondHandLength * Math.sin(Math.toRadians(_secondAngle));
        dc.setColor(Graphics.COLOR_RED, Graphics.COLOR_BLACK);
        dc.drawLine(_centerX, _centerY, _secondX, _secondY);
    }

    function drawBackground(dc as Dc, _centerX as Number, _centerY as Number){
        dc.setColor(Graphics.COLOR_BLACK, Graphics.COLOR_BLACK);
        dc.clear();

        dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_WHITE);
        dc.drawCircle(_centerX, _centerY, 120);
    }

    function drawClockNumbers (dc as Dc, _centerX as Number, _centerY as Number){
        var _radius = 100;

        for (var i = 1; i <= 12; i++){
            var _angle = (i * 30) - 90;
            var _x = _centerX + _radius * Math.cos(Math.toRadians(_angle));
            var _y = _centerY + _radius * Math.cos(Math.toRadians(_angle));
            var _clockNumbers = "" + i;
        

            dc.drawText(_x - 5, _y - 5, Graphics.FONT_TINY,  _clockNumbers, 20);
        }
    }
}

I am still at the beginning, so I would be thankful for any tips / enhancements / improvements. Thank you !!

  • 1. I think you need to remove the call to the requestUpdate from your onUpdate

    2. This might not be the problem with the specific device you're trying, but in general radius shouldn't be 100, but rather something you calculate based on the actual screen size. For example _centerX or maybe a bit less that it. The same is true for all the other "constants" (hourHandLength, etc)

    3. you're not even using _font, but rather FONT_TINY, so for sure the problem is not with your custom font :) (unless it's so bad that it causes the code to crash in onLayout)