garmin-decimalface/source/DecimalWatchFaceView.mc

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

class DecimalWatchFaceView 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;

        dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_TRANSPARENT);

        // Draw tick marks at 0.1 intervals (major at whole numbers, minor at 0.1)
        for (var i = 0; i < 100; i++) {
            var decimalValue = i * 0.1;
            var angle = (decimalValue / 10.0) * 360.0 - 90.0; // -90 to start at top
            var angleRad = Math.toRadians(angle);

            // Determine if this is a major tick (whole number) or minor tick
            var isMajor = (i % 10 == 0); // Every 10th position is a whole number
            var tickLength = isMajor ? 15 : 8; // Major ticks are longer
            var penWidth = isMajor ? 3 : 1; // Major ticks are thicker

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

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

            // Draw number only for major ticks
            if (isMajor) {
                var numberX = centerX + (radius - 38) * Math.cos(angleRad);
                var numberY = centerY + (radius - 38) * Math.sin(angleRad);
                var numberValue = (i / 10).toNumber(); // Convert to 0-9
                if (numberValue == 0) {
                    numberValue = 10; // Display 10 instead of 0
                }

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

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

    // Draw both hour and minute hands for 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 hour hand (shows which decimal unit 0-9, one rotation per day)
        var hourAngle = (decimalTime / 10.0) * 360.0 - 90.0;
        var hourAngleRad = Math.toRadians(hourAngle);
        var hourHandLength = radius - 70; // Shorter hand

        // Calculate minute hand (shows fractional part, 10 rotations per day)
        var fractionalPart = decimalTime - decimalTime.toNumber(); // Get decimal part
        var minuteAngle = fractionalPart * 360.0 - 90.0;
        var minuteAngleRad = Math.toRadians(minuteAngle);
        var minuteHandLength = radius - 45; // Longer hand

        // Draw minute hand (longer, thinner)
        drawSingleHand(dc, centerX, centerY, minuteAngle, minuteHandLength, 4, Graphics.COLOR_WHITE);

        // Draw hour hand (shorter, wider)
        drawSingleHand(dc, centerX, centerY, hourAngle, hourHandLength, 6, Graphics.COLOR_RED);

        // Redraw center dot on top of hands
        dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_TRANSPARENT);
        dc.fillCircle(centerX, centerY, 5);
    }

    // Helper function to draw a single hand
    function drawSingleHand(dc, centerX, centerY, angle, handLength, handWidth, color) {
        var angleRad = Math.toRadians(angle);

        // 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 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(color, 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
        );
    }
}