garmin-decimalface/source/MetricWatchFaceView.mc

using Toybox.WatchUi;
using Toybox.Graphics;
using Toybox.System;
using Toybox.Lang;
using Toybox.Time;
using Toybox.Time.Gregorian;

class MetricWatchFaceView extends WatchUi.WatchFace {

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

    // Load your resources here
    function onLayout(dc) {
        // We draw everything programmatically, no layout needed
    }

    // Called when this View is brought to the foreground. Restore
    // the state of this View and prepare it to be shown. This includes
    // loading resources into memory.
    function onShow() {
    }

    // Update the view
    function onUpdate(dc) {
        // Get the current time
        var clockTime = System.getClockTime();
        var decimalTime = computeDecimalTime(clockTime);

        // Clear the screen
        dc.setColor(Graphics.COLOR_BLACK, Graphics.COLOR_BLACK);
        dc.clear();

        // Draw the watchface
        drawWatchFace(dc);

        // Draw the hand
        drawHand(dc, decimalTime);

        // Draw digital time display
        drawDigitalTime(dc, decimalTime);
    }

    // Called when this View is removed from the screen. Save the
    // state of this View here. This includes freeing resources from
    // memory.
    function onHide() {
    }

    // The user has just looked at their watch. Timers and animations may be started here.
    function onExitSleep() {
    }

    // Terminate any active timers and prepare for slow updates.
    function onEnterSleep() {
    }

    // Compute decimal time from current clock time
    // Returns a value from 0.0 to 10.0 representing the day's progress
    function computeDecimalTime(clockTime) {
        var hour = clockTime.hour;
        var min = clockTime.min;
        var sec = clockTime.sec;

        // Convert to decimal: (hours + minutes/60 + seconds/3600) / 24 * 10
        var decimalTime = (hour + (min / 60.0) + (sec / 3600.0)) / 24.0 * 10.0;

        return decimalTime;
    }

    // Draw the watchface circle, tick marks, and numbers
    function drawWatchFace(dc) {
        var width = dc.getWidth();
        var height = dc.getHeight();
        var centerX = width / 2;
        var centerY = height / 2;
        var radius = (width < height ? width : height) / 2 - 10;

        // Draw outer circle
        dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_TRANSPARENT);
        dc.setPenWidth(3);
        dc.drawCircle(centerX, centerY, radius);

        // Draw tick marks and numbers for each decimal position (0-9)
        dc.setPenWidth(2);
        for (var i = 0; i < 10; i++) {
            var angle = (i / 10.0) * 360.0 - 90.0; // -90 to start at top
            var angleRad = Math.toRadians(angle);

            // Calculate tick mark positions
            var tickOuterX = centerX + radius * Math.cos(angleRad);
            var tickOuterY = centerY + radius * Math.sin(angleRad);
            var tickInnerX = centerX + (radius - 15) * Math.cos(angleRad);
            var tickInnerY = centerY + (radius - 15) * Math.sin(angleRad);

            // Draw tick mark
            dc.drawLine(tickOuterX, tickOuterY, tickInnerX, tickInnerY);

            // Draw number
            var numberX = centerX + (radius - 35) * Math.cos(angleRad);
            var numberY = centerY + (radius - 35) * Math.sin(angleRad);

            dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_TRANSPARENT);
            dc.drawText(
                numberX,
                numberY,
                Graphics.FONT_MEDIUM,
                i.toString(),
                Graphics.TEXT_JUSTIFY_CENTER | Graphics.TEXT_JUSTIFY_VCENTER
            );
        }

        // Draw center dot
        dc.fillCircle(centerX, centerY, 5);
    }

    // Draw the hand pointing to current decimal time
    function drawHand(dc, decimalTime) {
        var width = dc.getWidth();
        var height = dc.getHeight();
        var centerX = width / 2;
        var centerY = height / 2;
        var radius = (width < height ? width : height) / 2 - 10;

        // Calculate hand angle (0-10 maps to 0-360 degrees, starting at top)
        var angle = (decimalTime / 10.0) * 360.0 - 90.0; // -90 to start at top
        var angleRad = Math.toRadians(angle);

        // Hand length (slightly shorter than radius to not overlap with numbers)
        var handLength = radius - 50;

        // Calculate hand tip position
        var handTipX = centerX + handLength * Math.cos(angleRad);
        var handTipY = centerY + handLength * Math.sin(angleRad);

        // Calculate hand base positions (for a triangle/arrow shape)
        var handWidth = 6;
        var perpAngleRad1 = angleRad + Math.toRadians(90);
        var perpAngleRad2 = angleRad - Math.toRadians(90);

        var baseX1 = centerX + handWidth * Math.cos(perpAngleRad1);
        var baseY1 = centerY + handWidth * Math.sin(perpAngleRad1);
        var baseX2 = centerX + handWidth * Math.cos(perpAngleRad2);
        var baseY2 = centerY + handWidth * Math.sin(perpAngleRad2);

        // Draw the hand as a filled polygon
        dc.setColor(Graphics.COLOR_RED, Graphics.COLOR_TRANSPARENT);
        dc.fillPolygon([
            [handTipX, handTipY],
            [baseX1, baseY1],
            [baseX2, baseY2]
        ]);
    }

    // Draw digital display of decimal time
    function drawDigitalTime(dc, decimalTime) {
        var width = dc.getWidth();
        var height = dc.getHeight();

        // Format decimal time to 2 decimal places
        var timeString = decimalTime.format("%.2f");

        // Draw at bottom center
        dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_TRANSPARENT);
        dc.drawText(
            width / 2,
            height * 0.75,
            Graphics.FONT_LARGE,
            timeString,
            Graphics.TEXT_JUSTIFY_CENTER | Graphics.TEXT_JUSTIFY_VCENTER
        );
    }
}