initial version [by claude]
This commit is contained in:
@@ -0,0 +1,23 @@
|
||||
using Toybox.Application;
|
||||
using Toybox.WatchUi;
|
||||
|
||||
class MetricWatchFaceApp extends Application.AppBase {
|
||||
|
||||
function initialize() {
|
||||
AppBase.initialize();
|
||||
}
|
||||
|
||||
// onStart() is called on application start up
|
||||
function onStart(state) {
|
||||
}
|
||||
|
||||
// onStop() is called when your application is exiting
|
||||
function onStop(state) {
|
||||
}
|
||||
|
||||
// Return the initial view of your application here
|
||||
function getInitialView() {
|
||||
return [ new MetricWatchFaceView() ];
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
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
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user