Skip to content

Redesign entity view: 3-row list with Garmin-like UI#94

Open
leubeem wants to merge 1 commit into
hatl:masterfrom
leubeem:feature/list-view-redesign
Open

Redesign entity view: 3-row list with Garmin-like UI#94
leubeem wants to merge 1 commit into
hatl:masterfrom
leubeem:feature/list-view-redesign

Conversation

@leubeem

@leubeem leubeem commented May 26, 2026

Copy link
Copy Markdown

Hi, did some Claude co-authored coding and changed the layout to a 3-row list, added a colored bar and made some other small changes.

Happy for feedback :)

What changed

The entity view was a single full-screen card (icon centred, name below).
This PR replaces it with a 3-row scrollable list, matching the visual
language of Garmin's native training and activity screens.

List layout

  • Three rows always visible: previous, selected, next
  • Selected row: dark navy background, white title, coloured state label
  • Adjacent rows: plain black, dimmed text — selected item pops without
    any hard separator lines
  • Internal vPad spacing creates breathing room between rows without
    explicit gap arithmetic

Accent bar

  • Thin parallelogram on the left edge of the selected row (slash "/" angle)
  • Colour encodes state: green/orange/blue/purple/gray (see commit message)
  • Drawn with fillPolygon so the angle is crisp on all display types

Input handling

  • onTap → toggle selected entity (covers touch watches where
    BehaviorDelegate does not always translate taps to onSelect)
  • onSwipe UP/DOWN → navigate list (raw swipe events on touch-only devices)
  • onHold → settings menu (long press)
  • Button navigation (UP/DOWN keys) unchanged

Icon caching

  • loadResource() previously ran on every onUpdate() — a filesystem read
    every frame on every device
  • Icons for the 3 visible rows are now cached in a Dictionary keyed by
    entity ID, validated against current (type, state, sensorClass)
  • Stale entries evicted on scroll → peak memory stays bounded to 3 bitmaps
    regardless of list length

Replace the single-entity full-screen view with a scrollable 3-visible-row
list. Selected entity sits in the centre row with a dark navy background and
a state-coloured angled accent bar (parallelogram slash shape). Adjacent rows
are dimmed for depth. Row spacing uses internal vPad so the layout stays
lightweight and breathes on all screen sizes.

Touch support: onTap toggles the selected entity, onSwipe navigates the list,
onHold opens the settings menu — covering both touch-only and button-only
Garmin devices.

Icon bitmaps are now cached per visible row (max 3 in memory at once) and
evicted when scrolled out of view. This removes a loadResource() call per
frame that was hitting the filesystem on every onUpdate().

Accent bar colour encodes entity state at a glance:
  green   = on / open / unlocked
  orange  = transitional (locking, opening, closing)
  blue    = read-only sensor
  purple  = one-shot trigger (scene / script / button)
  gray    = off / closed / locked

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@leubeem

leubeem commented Jun 8, 2026

Copy link
Copy Markdown
Author

@hatl Have you had a chance to look over my PR yet? :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant