Phase 2: 10-icon menu ring

Rotating ring modeled after the watch Controls menu: UP/DOWN spin,
START/STOP selects. Selection point sits at −30° (≈ 2 o'clock) so it
lines up with the physical enter button on 5-button round Garmins.
Icons are rasterized at 80×80 with automaticPalette="false" and
scaled via drawBitmap2 to stay crisp at any display resolution. Long
German compounds ("Einsatzbeginn", "Beweismittel", "Letzten löschen")
wrap to two lines via a Config array so the center label never
overlaps the surrounding icons. Selected index is persisted in
Application.Storage and restored on next launch.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
EiSiMo 2026-04-11 20:10:11 +02:00
parent 43f970d764
commit d3494acc0d
18 changed files with 203 additions and 75 deletions

View file

@ -6,23 +6,35 @@ import Toybox.Lang;
// Garmin display.
module LayoutMetrics {
// --- Menu ring geometry --------------------------------------------
// --- Base helpers ---------------------------------------------------
function centerX(dc as Dc) as Number { return dc.getWidth() / 2; }
function centerY(dc as Dc) as Number { return dc.getHeight() / 2; }
// Radius on which the 10 icons sit.
function ringRadius(dc as Dc) as Number {
var min = (dc.getWidth() < dc.getHeight()) ? dc.getWidth() : dc.getHeight();
return (min * 0.38).toNumber();
function minDim(dc as Dc) as Number {
return (dc.getWidth() < dc.getHeight()) ? dc.getWidth() : dc.getHeight();
}
// --- Menu ring geometry --------------------------------------------
function iconSize(dc as Dc) as Number {
var min = (dc.getWidth() < dc.getHeight()) ? dc.getWidth() : dc.getHeight();
return (min * 0.14).toNumber();
return (minDim(dc) * 0.16).toNumber();
}
function selectedIconSize(dc as Dc) as Number {
return (iconSize(dc) * 1.3).toNumber();
return (iconSize(dc) * 1.25).toNumber();
}
// Radius chosen so the accent ring around the selected icon sits
// ~5px from the display edge on any device.
function ringRadius(dc as Dc) as Number {
var half = minDim(dc) / 2;
var selHalf = selectedIconSize(dc) / 2;
var edgeMargin = (minDim(dc) * 0.02).toNumber() + 5;
return (half - selHalf - edgeMargin).toNumber();
}
function accentPenWidth(dc as Dc) as Number {
var w = (minDim(dc) * 0.01).toNumber();
return (w < 2) ? 2 : w;
}
// --- History view sections -----------------------------------------
@ -40,13 +52,11 @@ module LayoutMetrics {
// --- Loading / delete arc radius ------------------------------------
function edgeArcRadius(dc as Dc) as Number {
var min = (dc.getWidth() < dc.getHeight()) ? dc.getWidth() : dc.getHeight();
return (min * 0.48).toNumber();
return ((minDim(dc) / 2) - 4).toNumber();
}
function edgeArcPenWidth(dc as Dc) as Number {
var min = (dc.getWidth() < dc.getHeight()) ? dc.getWidth() : dc.getHeight();
var w = (min * 0.025).toNumber();
var w = (minDim(dc) * 0.025).toNumber();
return (w < 3) ? 3 : w;
}
}