subdivision, 'minute' hand

source/MetricWatchFaceView.mc

@@ -77,45 +77,54 @@ class MetricWatchFaceView extends WatchUi.WatchFace {
         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
+        // 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 - 15) * Math.cos(angleRad);
-            var tickInnerY = centerY + (radius - 15) * 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
-            var numberX = centerX + (radius - 35) * Math.cos(angleRad);
-            var numberY = centerY + (radius - 35) * Math.sin(angleRad);
+            // 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,
-                i.toString(),
-                Graphics.TEXT_JUSTIFY_CENTER | Graphics.TEXT_JUSTIFY_VCENTER
-            );
+                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 the hand pointing to current decimal time
+    // Draw both hour and minute hands for current decimal time
     function drawHand(dc, decimalTime) {
         var width = dc.getWidth();
         var height = dc.getHeight();
@@ -123,19 +132,37 @@ class MetricWatchFaceView extends WatchUi.WatchFace {
         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);
+        // 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
 
-        // Hand length (slightly shorter than radius to not overlap with numbers)
-        var handLength = radius - 50;
+        // 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 handWidth = 6;
         var perpAngleRad1 = angleRad + Math.toRadians(90);
         var perpAngleRad2 = angleRad - Math.toRadians(90);
 
@@ -145,7 +172,7 @@ class MetricWatchFaceView extends WatchUi.WatchFace {
         var baseY2 = centerY + handWidth * Math.sin(perpAngleRad2);
 
         // Draw the hand as a filled polygon
-        dc.setColor(Graphics.COLOR_RED, Graphics.COLOR_TRANSPARENT);
+        dc.setColor(color, Graphics.COLOR_TRANSPARENT);
         dc.fillPolygon([
             [handTipX, handTipY],
             [baseX1, baseY1],