jmrp.io / kleidos

Fork 0

[READ-ONLY] Mirror of https://github.com/jmrplens/kleidos. Kleidos — Hardware BLE password manager for ESP32-S3 (M5StickC Plus2, StickS3, M5Stack Gray, T-Deck, Cardputer) jmrplens.github.io/kleidos/

Fork 0

kleidos / docs / design / mockups_v2 /

at main 3 files

José M. Requena Plens Add the CoreInk UI v2: ink vault pager, dial-disc PIN, retained lock face 2mo ago

f3a0a2f2

README.md

Add the CoreInk UI v2: ink vault pager, dial-disc PIN, retained lock face Implements the Claude Design v2 CoreInk sheet (200x200, 1-bit e-paper, paper theme) on the m5core_ink variant, built against pixel-exact 1:1 mock references extracted from the handoff sheet (in-page html2canvas at scale 1) and verified by overlay diff against captures from real silicon. Screens - Vault home: new ink render of the tabbed pager (Pass | TOTP | Actions) composing the shared v2 components — drawHeader (2 px ink rule), drawTabBar (K0-inverse active cell), drawMenuList (Cozy rows, brand badges, dotted dividers), TotpCodeCard rows with live codes + countdown rings at 1 Hz, and the dial-affordance action bar. Replaces the hand-rolled 320x240 v1 render whose hardcoded geometry garbled the 200 px header; the color (Gray/Core2/ CoreS3) render path is untouched. - PIN entry: the sheet's dial disc — brand lockup, rim digits at the e-ink legibility floor, solid ink ring (new crispTrackFill opt-in on PinDial), mono-face hero numeral, hollow/filled ink dots, ▲▼ DIGIT / OK hint bar — replacing the v1 arrows-and-giant-digit landscape render. - Lock face: the shared idle clock face is now armed on the e-paper 3-button path, and goToSleep() paints it before power-off so the panel retains the sheet's zero-power lock clock through deep sleep. Component e-ink anatomy (extended, never forked) - Tab bar Mono1: K0-inverse active cell, small-role labels, 20 px band. - Header Mono1: 2 px solid ink bottom rule. - Menu list Mono1: 50% dotted ink row dividers (the sheet's light hairline). - PinDial: crisp-path solid annulus band behind an explicit opt-in prop. - E-ink font floor: HEADING drops to the sans-16 rung (the sheet titles every header at 17 px; the 24 px rung doubled the mock's title band). Fixes found on silicon - Entering Settings from the Actions tab bounced straight back out: the opening tap's release detection is deferred past the 500 ms back-hold threshold by the e-paper repaint, so the tap read as a long-press back. The tabbed tree now swallows the opening release (TotpScreenController pattern). - The tabbed header item count was hardcoded English ("%u item%s") with an English-only plural; now the localized VaultItemsFmt via trFormat. Docs and QA - docs/design/mockups_v2/README.md: corrected three stale CoreInk claims (driver blocked / bitmap-font fallback / keep out of matrices). - 43 mock refs extracted from the CoreInk sheet + final on-device captures and ref/capture/diff overlays under docs/design/qa-captures/coreink-v2/. - New native test for the PinDial crisp band; header mono test updated to the 2 px rule contract. Native 2259/2259; m5core_ink, sticks3, m5stack_gray and tdeck build -Werror; clang-tidy 0 findings across 270 TUs; doxygen 0 warnings; i18n +4 ids x5 languages.

2 months ago

device-mechanics-v2.svg

Update device CAD sources, SVG pipeline and design docs Add CoreS3 SE and Core2 v1.3 measurements/sources, refresh T-Deck STEP files, update emit_front_svg.py and fronts-contact-sheet. Extend sources.md for Gray, Plus1, Plus2 and StickS3. Update design docs: device-mechanics-cad, UI iteration handoff, mockups_v2 overview, and add auth/navigation/popup coherence mockups.

4 months ago

device-screens-v2.svg

4 months ago

README.md

Kleidos Mockups V2#

Last updated: 2026-07-17.

CoreInk is fully supported: the SSD1681/GDEW0154D67 e-paper driver (damage-diff partial refresh) is hardware-verified, its PlatformIO environments build -Werror in the fleet matrix, and its v2 screens follow the dedicated CoreInk design sheet in docs/design/handoff/reference/ (paper theme, 200x200, ordered-dither grays).

Scope#

Mockups V2 targets the devices that currently have working physical display orientation/color and usable screenshot capture:

Family	Variants	Screen	Input model	UI density
Stick portrait	Plus 1.1, Plus2, StickS3	135 x 240	BtnA + BtnB, optional IMU	tiny
Core landscape	Gray, Core2 v1.3, CoreS3 SE	320 x 240	3 face/touch-button zones	comfort
T-Deck	T-Deck	320 x 240	QWERTY, trackball, touch	comfort
Cardputer ADV	Cardputer ADV	240 x 135	QWERTY + dedicated arrows + side button	compact keyboard

Cardputer navigation should be treated as a real keyboard flow: arrow keys move focus, Enter/Space activate, and Backspace/Esc/Left go back. On the current Cardputer ADV keyboard the arrows are dedicated physical keys; serial aliases KEY UP, KEY DOWN, KEY LEFT, and KEY RIGHT remain available for screenshot automation.

Typography Direction#

The firmware currently uses two rendering paths:

Color (RGB565) panels use display::Font roles backed by the direct-HAL text renderer. Anti-aliased A4 atlases (generated via scripts/fonts/convert_fonts.py) are served for named font sizes; the bitmap renderer is the fallback when a size is not yet generated.
The monochrome e-paper panel (CoreInk) renders the same AA Inter / JetBrains Mono atlases through an 8x8 Bayer ordered dither of the glyph coverage (plus a weight bias), sized to the e-ink legibility floor; the local bitmap renderer remains only as the last-resort fallback for boards missing an atlas.

The firmware integration decision is documented in font-integration.md: development builds use real Montserrat metrics now, then generate optimized subsets later from supported-language UI strings and printable ASCII data.

V2 keeps the role names stable and defines target sizes per family:

Role	Stick 135x240	Core/T-Deck 320x240	Cardputer 240x135	Usage
`SMALL`	8 px	10-12 px	8 px	action bars, captions
`BODY`	10-12 px	12-14 px	10 px	rows, labels, hints
`HEADING`	14-16 px	16-20 px	12-14 px	titles, current screen
`LARGE`	28-36 px	36-48 px	22-28 px	PIN digit, primary code
`MONO`	8-12 px	12-18 px	8-12 px	TOTP, counts, fingerprints

Language stress strings to test every screen before firmware changes:

Key	en	es	fr	de	it
Welcome title	Welcome	Bienvenido	Bienvenue	Willkommen	Benvenuto
Continue	Continue	Continuar	Continuer	Weiter	Continua
Delete	Delete	Borrar	Supprimer	Loeschen	Elimina
Settings	Settings	Ajustes	Reglages	Einstellungen	Impostazioni
Lockout	Try again in 45s	Reintenta en 45s	Reessayez dans 45s	Erneut in 45s	Riprova in 45s

Files#

device-screens-v2.svg: first cross-device layout sheet with concrete display viewBoxes and input affordances.
device-mechanics-v2.svg: mechanical frame and onboarding-callout sheet based on official CAD/spec envelopes.
device-mechanics-cad.md: official CAD, dimensions, and mechanical references for device frames and onboarding button/key animations.

Firmware Follow-Up#

Done in this pass:

Added the first per-family direct-renderer font-role mapping in text_renderer.cpp, keeping the public display::Font enum stable.
Added Cardputer dedicated arrow-key semantics to the firmware input model so V2 mockups can assume directional focus movement instead of only J/K aliases.
Added the first mechanical frame/onboarding-callout sheet so firmware UI screens can be aligned to physical controls before animation work.

Next firmware steps:

Replace screen-local brand mark geometry with a shared helper for all direct-HAL screens.
Add screenshot-driven visual checks per active device family before changing interaction-heavy screens.
Keep CoreInk in the compile/test matrices (its e-paper driver is hardware-verified; the board builds -Werror alongside the rest of the fleet).