garmin-decimalface/PLAN-metric-watchface.md

Decimal Day Progress Watchface - Implementation Plan

Concept Overview

Create a joke/novelty Garmin watchface that displays time as a decimal day progress meter instead of traditional 12/24 hour format.

Key Features

• 10 equal divisions on the watchface (instead of 12 hours)
• Single hand showing day progress as a decimal (0-10)
• Analog display with tick marks at each decimal position
• Optional digital readout showing exact decimal time

Time Mapping

• Midnight (00:00) → 0.0
• 6:00 AM → 2.5
• Noon (12:00) → 5.0
• 6:00 PM → 7.5
• Midnight (24:00) → 10.0 (wraps to 0)

Technical Implementation

Project Structure

MetricWatchFace/
├── manifest.xml                    # App metadata and device compatibility
├── monkey.jungle                   # Build configuration
├── resources/
│   ├── drawables/
│   │   └── drawables.xml          # Layout definitions
│   ├── strings/
│   │   └── strings.xml            # Localization
│   └── settings/
│       └── settings.xml           # User settings (if needed)
└── source/
    ├── MetricWatchFaceApp.mc      # Application entry point
    └── MetricWatchFaceView.mc     # Main watchface view logic

Core Calculation

Decimal Time Formula:

decimalTime = (currentHour + currentMinute/60.0 + currentSecond/3600.0) / 24.0 * 10.0

Hand Angle Calculation:

handAngle = (decimalTime / 10.0) * 360.0 - 90.0  // -90 to start at top (12 o'clock position)

Drawing Components

1. Watchface Circle

   • Use drawCircle() or drawArc() for outline
   • Draw 10 tick marks at 36° intervals (360°/10)

2. Decimal Markers

   • Place numbers 0-9 around the perimeter
   • Position 0 at top (traditional 12 o'clock position)
   • Position 5 at bottom (traditional 6 o'clock position)

3. Progress Hand

   • Use fillPolygon() to draw a triangle/arrow hand
   • Calculate hand coordinates using trigonometry
   • Rotate based on current decimal time

4. Digital Display (optional)

   • Show exact decimal time (e.g., "3.47")
   • Position at center or bottom of face

Key Methods

MetricWatchFaceView.mc:

• initialize() - Set up initial state
• onUpdate(dc) - Main rendering method (called periodically)
• computeDecimalTime() - Calculate current decimal time
• drawWatchFace(dc) - Draw the analog face and markers
• drawHand(dc, decimalTime) - Draw the progress hand
• drawDigitalTime(dc, decimalTime) - Optional digital display

Device Compatibility

Target devices:

• Fenix series (5, 6, 7)
• Forerunner series (245, 645, 945)
• Vivoactive series (3, 4)
• Other modern Garmin watches with Connect IQ support

Considerations:

• Handle different screen sizes/resolutions
• Support both round and semi-round displays
• Test with MIP and AMOLED displays

Implementation Steps

1. Project Setup

   • Create manifest.xml with app metadata
   • Set up basic directory structure
   • Create application entry point

2. Core Logic

   • Implement decimal time calculation
   • Add time update handling
   • Create view class structure

3. Rendering

   • Draw watchface circle and divisions
   • Add decimal markers (0-9)
   • Implement hand rotation logic
   • Add digital display

4. Testing & Refinement

   • Test in simulator
   • Verify calculations at key times
   • Optimize drawing performance
   • Test on actual device if available

Future Enhancements (Optional)

• Add date display
• Include battery indicator
• Show step count or other metrics
• Customizable colors via settings
• Alternative hand styles
• Animation effects

References

• Garmin Connect IQ SDK Documentation
• Swiss Railway Clock example (analog implementation)
• Monkey C API reference for graphics primitives