12h shadow

resources/properties.xml

@@ -1,3 +1,5 @@
 <properties>
     <property id="UseFiveHourMode" type="boolean">false</property>
+    <property id="Show12HourShadow" type="boolean">false</property>
+    <property id="ShowNumericTime" type="boolean">true</property>
 </properties>

resources/settings/settings.xml

@@ -2,4 +2,10 @@
     <setting propertyKey="@Properties.UseFiveHourMode" title="@Strings.FiveHourModeTitle">
         <settingConfig type="boolean" />
     </setting>
+    <setting propertyKey="@Properties.Show12HourShadow" title="@Strings.Show12HourShadowTitle">
+        <settingConfig type="boolean" />
+    </setting>
+    <setting propertyKey="@Properties.ShowNumericTime" title="@Strings.ShowNumericTimeTitle">
+        <settingConfig type="boolean" />
+    </setting>
 </settings>

resources/strings/strings.xml

@@ -1,4 +1,6 @@
 <strings>
     <string id="AppName">Decimal Day</string>
     <string id="FiveHourModeTitle">5-Hour Mode</string>
+    <string id="Show12HourShadowTitle">12 Hour Shadow</string>
+    <string id="ShowNumericTimeTitle">Show Numeric Time</string>
 </strings>

source/DecimalWatchFaceView.mc

@@ -31,8 +31,10 @@ class DecimalWatchFaceView extends WatchUi.WatchFace {
         var clockTime = System.getClockTime();
         var decimalTime = computeDecimalTime(clockTime);
 
-        // Check if 5-hour mode is enabled
+        // Check settings
         var useFiveHourMode = Application.Properties.getValue("UseFiveHourMode");
+        var show12HourShadow = Application.Properties.getValue("Show12HourShadow");
+        var showNumericTime = Application.Properties.getValue("ShowNumericTime");
         var displayTime = decimalTime;
         var isMorning = true;
 
@@ -55,10 +57,18 @@ class DecimalWatchFaceView extends WatchUi.WatchFace {
         drawWatchFace(dc, useFiveHourMode, isMorning);
 
         // Draw the hands
-        drawHand(dc, displayTime, useFiveHourMode);
+        drawHand(dc, displayTime, useFiveHourMode, show12HourShadow, clockTime);
 
-        // Draw digital time display
+        // Draw digital time displays
+        if (showNumericTime) {
+            // Draw decimal time at bottom
             drawDigitalTime(dc, decimalTime);
+
+            // If 12-hour shadow is also enabled, draw traditional time at top
+            if (show12HourShadow) {
+                drawTraditionalTime(dc, clockTime);
+            }
+        }
     }
 
     // Called when this View is removed from the screen. Save the
@@ -170,13 +180,33 @@ class DecimalWatchFaceView extends WatchUi.WatchFace {
     }
 
     // Draw hour, minute, and second hands for current decimal time
-    function drawHand(dc, decimalTime, useFiveHourMode) {
+    function drawHand(dc, decimalTime, useFiveHourMode, show12HourShadow, clockTime) {
         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 traditional 12-hour shadow hands first (if enabled), so they appear behind
+        if (show12HourShadow) {
+            var hour = clockTime.hour;
+            var minute = clockTime.min;
+
+            // Calculate traditional 12-hour hand angle
+            var traditional12HourAngle = ((hour % 12) + (minute / 60.0)) / 12.0 * 360.0 - 90.0;
+            var traditional12HourLength = radius - 70; // Same as decimal hour hand
+
+            // Calculate traditional 60-minute hand angle
+            var traditional60MinuteAngle = (minute / 60.0) * 360.0 - 90.0;
+            var traditional60MinuteLength = radius - 45; // Same as decimal minute hand
+
+            // Draw traditional minute hand (dark gray)
+            drawSingleHand(dc, centerX, centerY, traditional60MinuteAngle, traditional60MinuteLength, 4, Graphics.COLOR_DK_GRAY);
+
+            // Draw traditional hour hand (dark red)
+            drawSingleHand(dc, centerX, centerY, traditional12HourAngle, traditional12HourLength, 6, Graphics.COLOR_DK_RED);
+        }
+
         // Adjust scale based on mode
         var maxValue = useFiveHourMode ? 5.0 : 10.0;
 
@@ -258,4 +288,32 @@ class DecimalWatchFaceView extends WatchUi.WatchFace {
             Graphics.TEXT_JUSTIFY_CENTER | Graphics.TEXT_JUSTIFY_VCENTER
         );
     }
+
+    // Draw traditional 12-hour time display
+    function drawTraditionalTime(dc, clockTime) {
+        var width = dc.getWidth();
+        var height = dc.getHeight();
+
+        var hour = clockTime.hour;
+        var minute = clockTime.min;
+
+        // Convert to 12-hour format
+        var hour12 = hour % 12;
+        if (hour12 == 0) {
+            hour12 = 12;
+        }
+
+        // Format as HH:MM
+        var timeString = hour12.format("%d") + ":" + minute.format("%02d");
+
+        // Draw at top center in dark gray
+        dc.setColor(Graphics.COLOR_DK_GRAY, Graphics.COLOR_TRANSPARENT);
+        dc.drawText(
+            width / 2,
+            height * 0.25,
+            Graphics.FONT_LARGE,
+            timeString,
+            Graphics.TEXT_JUSTIFY_CENTER | Graphics.TEXT_JUSTIFY_VCENTER
+        );
+    }
 }