Practice Studio — piano, guitar & ukulele trainer for the Galaxy Z TriFold
_Plan v2 (after critique) · 2026-10-02 · status: plan only, nothing built_
1. What it is
A single web app (installable PWA, works offline) that turns the unfolded TriFold into:
- Piano — a playable keyboard that fits the screen, with a scale slider from "real size" to "all 88 keys".
- Guitar & ukulele fretboard at true 1:1 scale — lay the phone flat, put your fretting-hand fingers on the glass exactly where they go on a real neck. The app checks each finger and turns it green when it is right. (No strumming on glass — strum/pick on your real instrument.)
- Chord coach — big, clear chord diagrams + the same chord drawn on the 1:1 neck.
- Song library — classics and popular songs as chord charts with a scrolling, tempo-locked player.
- Recorder — records your real instrument through the mic, plus logs what you tapped on screen, so you can play it back next to the song.
Screen mockups
Comment on these by number (e.g. "A5", "B4"): https://practice-plan.arnao.ai/mockups/
2. The screen math (Galaxy Z TriFold, unfolded)
Source: Samsung Galaxy Z TriFold specs, Wikipedia.
| Quantity | Value | How |
|---|
| Main display | 10.0" diagonal, 2160 × 1584 px | spec |
| Pixel density | 267.9 ppi = 10.55 px/mm | √(2160²+1584²) / 10 |
| Active area | 204.8 × 150.2 mm (landscape) | px ÷ px/mm |
| Unfolded body | 214.1 × 159.2 × 3.9–4.2 mm | spec |
| CSS px per mm | ≈ 4.69 if Chrome reports DPR 2.25 (960 × 704 CSS px); 5.27 at DPR 2.0 | 10.55 ÷ DPR |
Browsers lie about millimetres. CSS 1mm on Android is not a physical millimetre. The app computes cssPxPerMm = (screen.width × devicePixelRatio) / 204.8 on first launch, then shows a one-time calibration check: hold a credit card (85.60 mm, ISO/IEC 7810 ID-1) against an on-screen outline and nudge until it matches. Stored per device. Samsung's "Screen zoom" setting changes DPR, so the check re-runs if DPR changes.
Piano — real key size
Standard white key: 23.5 mm wide (octave ≈ 165 mm), black key ≈ 13.7 mm wide.
| Slider setting | White keys across 204.8 mm | Key width | Use |
|---|
| 1:1 real size | 8.7 (one octave + a 4th) | 23.5 mm | finger-position practice, true hand span |
| 1.5 octaves | 10.5 | 19.5 mm | comfortable melody |
| 2 octaves (default) | 14 | 14.6 mm | two-hand chords + melody |
| 3 octaves | 21 | 9.8 mm | still tappable (≥ 9 mm touch target) |
| 4 octaves | 28 | 7.3 mm | single-finger, careful |
| 88 keys | 52 | 3.9 mm | view-only overview — taps disabled, tap to zoom there |
Key height scales with width (real proportion 23.5 : 150 mm); at 2 octaves keys are ~95 mm tall, leaving ~55 mm for the song/chord strip above. A mini-map strip of all 88 keys sits on top; drag it to pan.
Guitar — real fret positions
Fret distance from nut: dₙ = L · (1 − 2^(−n/12)).
| Instrument | Scale L | Frets 1 / 3 / 5 / 6 (mm from nut) | Frets that fit in 204.8 mm (6 mm nut margin) |
|---|
| Electric/steel acoustic (Fender) | 648 mm (25.5") | 36.4 / 103.1 / 162.5 / 189.8 | nut → 6th fret |
| Gibson-style | 628 mm (24.75") | 35.2 / 99.9 / 157.5 / 183.9 | nut → 6th fret |
| Classical | 650 mm | 36.5 / 103.4 / 163.1 / 190.4 | nut → 6th fret |
Nut width 43 mm (steel) / 52 mm (classical), widening to ~52/56 mm at the 12th fret. So the neck takes ~45–55 mm of the 150 mm height; the rest shows the chord diagram and next chord. Every open "cowboy" chord (frets 0–3) fits at true scale. For barre chords and higher positions the neck slides — the window shows any 6-fret span (e.g. frets 5–10) still at 1:1.
Ukulele — the whole useful neck fits
| Uke | Scale L | 12th fret at | Frets that fit |
|---|
| Soprano | 346 mm (13.6") | 173.0 mm | nut → 14th |
| Concert | 381 mm (15") | 190.5 mm | nut → 12th |
| Tenor | 432 mm (17") | 216.0 mm | nut → 10th |
Nut width ~35 mm, 4 strings. Default: concert, GCEA (low-G option). You select your own instrument's scale length — or measure nut-to-12th-fret on your instrument and enter it (×2 = scale length), so the glass matches your neck exactly.
3. Features
3.1 Fingering trainer ("place your fingers")
- Target dots show finger numbers (1–4, T) and which strings are muted/open.
- Android Chrome reports up to 10 simultaneous touches → app maps each touch to (string, fret) using the 1:1 geometry.
- Each target turns green when touched in the right fret zone (just behind the fret wire, as on a real neck); red if on the wrong string/fret. Hold the full shape 1 s = pass. Sound plays the chord on pass.
- Drill modes: single chord · chord change pairs (G→C, C→D, Am→F…) with a timer · "chord of the song" (cycles through the current song's chords).
- Lefty mirror toggle.
3.2 Chord display
- Large standard chord box (vertical) + the same shape on the 1:1 horizontal neck.
- Library: all major / minor / 7 / maj7 / m7 / sus2 / sus4 / dim / aug / add9 in all 12 keys, with 2–3 voicings each, generated from interval rules + a curated "easy voicing" table for guitar and uke.
- Piano mode shows the chord as highlighted keys with finger numbers (RH 1-3-5 etc.) and inversions.
3.3 Song library
- Format: ChordPro (open standard:
[G]Take me [C]home).
- Player: lyrics/chords auto-scroll at the song's tempo; current + next chord shown large; tap a chord to drill it.
- Transpose and capo; "simplify" (replace F with Fmaj7/Fadd9 easy shapes, barre → open).
- Starter set: public-domain classics with full lyrics (Amazing Grace, House of the Rising Sun trad., Scarborough Fair, Danny Boy, Greensleeves, Ode to Joy, Für Elise for piano…); popular songs as chord progressions + structure only (see §5).
- Import: paste ChordPro text or a URL, or drop a MIDI file (piano: falling-notes view).
3.4 Record & review
- Mic recording of your real instrument (MediaRecorder → Opus/WebM), saved in IndexedDB, tied to the song + date.
- Play back over the backing click/chords; mark takes as favourites; export/share file.
- On-screen piano taps logged as note events (→ export MIDI).
- Practice log: minutes per day per instrument, chords "mastered" (passed 5× under 2 s change).
3.5 Practice helpers
- Metronome (Web Audio, sample-accurate), tuner (mic pitch detection, YIN), tempo slow-down.
- Phase 2: listen mode — mic pitch detection checks single notes on piano/guitar; chord recognition from audio is approximate and marked "beta".
4. Build
- Vanilla TypeScript + Vite, canvas/SVG rendering, no backend. PWA with offline cache.
- Audio: Web Audio; sampled piano (Salamander, ~4 MB compressed subset) and Karplus-Strong plucked strings.
- Fold-aware: unfolded (10") = full instrument layout; cover screen (6.5") = chord-chart + tuner only. Landscape lock via fullscreen + Screen Orientation API.
- Host: practice.arnao.ai (Vercel, static). Data stays on the phone.
- Effort: v1 (piano + 1:1 fretboards + chord library + 20 songs + recorder + metronome/tuner) ≈ 2–3 build sessions.
5. Critique (my own first pass)
- "Popular songs" collides with copyright. Lyrics and melodies of modern songs are copyrighted; chord progressions alone generally are not. Ultimate Guitar etc. pay licences. → Ship chord charts without lyrics for popular songs, full lyrics only for public domain, and a paste/import box for anything you bring yourself.
- Fingers on glass ≠ fingers on strings. No string tension, no fret wire feel, no thumb behind the neck. It trains where fingers go and fast chord changes (the actual beginner bottleneck), not pressure or clean tone. Keep it honest: pair every drill with "now do it on the real instrument" and the mic check.
- Physical scale depends on calibration. If DPR or screen zoom is off, 1:1 is wrong by 10–20 %. The credit-card check is mandatory, not optional.
- Multi-touch limits. Palm/hand resting on the glass creates ghost touches; barre chords put one finger across 6 strings (one touch point). → treat a long, wide contact as a barre (touch radiusX/Y), and enable palm rejection by ignoring touches larger than ~25 mm.
- Hinge area. The TriFold's two creases run vertically across the landscape screen at ~⅓ and ~⅔. Frets crossing a crease are fine visually, but avoid placing small targets on them.
- Piano on 205 mm is a toy for two hands. Even 2 octaves at 14.6 mm keys is ~62 % real size; muscle memory of span won't transfer. Use the 1:1 octave mode for hand-shape and the smaller modes for note learning; recommend a cheap MIDI keyboard over USB-C (Web MIDI works in Android Chrome) as the real upgrade path.
- Audio-based chord grading is unreliable on phone mics. Ship single-note checking and tuner first; chords later as beta.
6. Self-critique — Fable adversarial pass
What changed because of it (plan v2)
| Fable said | Decision |
|---|
| The calibration formula is only a seed; the credit card must be the source of truth | Adopted. The card check is mandatory on first launch and whenever DPR/fold state changes. |
| A real barre often shows up as 1–3 flickering touches, and palm rejection may not work on Samsung panels | Adopted. Day 1 is a touch spike on your TriFold (palm rest, barre, 4 fingers at once). That is the go/no-go test for on-glass drills. |
| "Hold the shape 1 s" trains mashing | Adopted. Grading is on landing time (all fingers down, how fast), like Justin Guitar's one-minute changes. |
| Creases fall near frets 4–5 and 8–9 | Adopted. The sliding fret window snaps so that fret wires avoid the creases. |
| Touch can't tell which finger is which | Adopted. It checks positions only. Finger numbers are a guide, not graded. |
| Mic coach is the real product, glass fretboard is a demo | Partly adopted. You asked for 1:1 finger placement, so it stays as a mode. But the core loop becomes: see the shape at 1:1 → play it on your real instrument → the app listens and checks it against the chord it expects (chroma match, which is much easier than open-ended chord recognition). If the touch spike fails, glass becomes view-only. |
| Piano slider is "theater"; Web MIDI is the real piano story | Adopted. Piano has two modes: Playable (2 octaves, 14.6 mm keys) and Overview (88 keys), plus a 1:1 octave view. USB-C/Bluetooth MIDI keyboard support moves into v1. |
| "2–3 sessions" is fantasy | Adopted. About 6–8 sessions. The recorder ships without export/favourites. |
| Bold idea: use the folded cover screen as a daily 90-second "changes" habit loop | Adopted for v1.1. |
Revised build order
- Touch spike on the TriFold: palm rejection, barre clustering, crease positions (go/no-go)
- Calibration + 1:1 fretboard/keyboard rendering
- Tuner + single-note listening (YIN)
- Chord check against the expected chord (chroma) + change-speed drills on the real instrument
- ChordPro song player + chord library (public-domain lyrics; popular songs as chords only)
- Web MIDI piano + mic recorder
- Cover-screen daily-changes loop
Full critique (verbatim)
1. Physical-scale math: mostly right, one real error, one conceptual problem
The arithmetic checks out. 2160×1584 at 10.0" → 267.9 ppi is correct; 204.8×150.2 mm active area is consistent; the fret formula d = L·(1−2^(−n/12)) gives 36.37 mm for fret 1 at 648 mm — your table is accurate. Credit-card calibration is the right call and your note that CSS mm is fiction is correct.
The error: cssPxPerMm = (screen.width × devicePixelRatio) / 204.8 assumes screen.width reports landscape width and that the physical panel is exactly spec. On foldables, screen.width is orientation- and fold-state-dependent, and Samsung's reported resolution can differ from panel-native under screen zoom. Don't compute at all — treat the credit-card calibration as the source of truth, not a "check." Your formula is a seed value only.
The conceptual problem: 1:1 is genuinely useful for fretboards and near-useless for your piano framing. You already admit this in §5.6, but the plan doesn't follow through: the piano slider table presents 1:1 as a feature when it fits 8.7 keys — not even enough for a one-octave scale with crossing comfortably. The piano's honest value is note-location learning and chord-tone visualization, not finger placement. Say that, and stop selling the slider as a spatial-fidelity feature.
For fretboards, 1:1 has real value with a caveat you're underweighting: a real neck is a cylinder in the air with a thumb behind it. Flat glass trains the x/y map (which fret, which string) and change speed — legitimately the beginner bottleneck — but finger curvature and approach angle won't transfer. That's fine. But your "hold the shape 1 s = pass" metric will train flat-fingered mashing. Grade on landing time, not hold time.
2. Touch/hardware feasibility: this is where the plan is weakest
- 10-touch limit is real but palm rejection is the killer. A guitarist naturally rests the heel of the hand. Your ~25 mm radius filter via
radiusX/Y is reasonable in theory; in practice Android Chrome's touch radius reporting is inconsistent across Samsung panels and often returns coarse or zeroed values. Prototype this first — day one, before any rendering code. If palm rejection fails, the hero fretboard drill is dead on glass.
- Barre detection via one wide contact is optimistic. A barre finger often registers as 1–3 discrete points that flicker. You need temporal clustering, not a single-frame radius test.
- Creases at ⅓ and ⅔ land right around frets 4–5 and 8–9 at guitar scale. "Avoid small targets on creases" isn't actionable when physics dictates fret positions. The sliding 6-fret window should snap so fret wires avoid creases, even if that means showing frets 0–5 vs 1–6.
- Finger identity is unknowable. Touch events don't tell you which finger touched. Your "finger numbers 1–4" grading can only verify positions, not fingering. Don't claim you're checking fingers; you're checking a point set.
- Audio latency on Android Chrome Web Audio is 60–150 ms. Chord-on-pass playback is fine; anything rhythmic on glass (tap-along) will feel broken. Good that you didn't plan it — don't add it.
3. Pedagogy: partially sound, but the loop is open
The genuinely good insight: chord-change speed is the beginner bottleneck, and timed change drills (G→C under 2 s) map to proven practice methodology (this is literally Justin Guitar's "one-minute changes"). The drill modes are the strongest pedagogical element in the plan.
The weakness: nothing closes the loop with the real instrument. The plan's own §5.2 admits glass doesn't train pressure or clean tone — then offers "pair every drill with 'now do it on the real instrument'" as a suggestion, not a product mechanic. Without the app hearing the real instrument, you've built a quiz app about chord shapes, and flashcards do that for free. The recorder is passive; it logs but doesn't judge. No feedback → no deliberate practice → marginal improvement.
Piano pedagogy: the MIDI-keyboard-over-USB-C path (§5.6) is the only version that makes pianists better. Web MIDI on Android Chrome works. That should be v1, not a footnote.
4. The verdict: mic coach is the product; glass fretboard is the demo
Resolve definitively: the mic-listening coach is the real product. Here's the argument you're avoiding:
- The glass fretboard is impressive for 10 minutes and then the user picks up their actual guitar — because the whole point is playing guitar. Every minute on glass is a minute not building calluses, pressure, and tone.
- The thing beginners actually lack is feedback: "was that a clean G?" "are my changes getting faster?" Your §5.7 pessimism about chord recognition is outdated — chroma-vector matching against a known expected chord (you know what they should be playing from the song chart) is a vastly easier problem than blind chord recognition. You're not transcribing; you're verifying. That's tractable on a phone mic.
- The TriFold's actual advantage isn't glass-as-fretboard; it's a big screen on a music stand showing chord charts, with the mic listening. That's the honest hardware story.
Keep the 1:1 fretboard as the reference view — "here's where your fingers go, at real scale" — not as the drill surface. Demote the touch-grading to a nice-to-have.
Scope & build order (corrected)
- Palm-rejection + multi-touch spike (go/no-go on glass drills)
- Tuner + single-note mic detection (YIN) — proves the listening pipeline
- Chord-verification-against-expected (chroma matching) + change-speed timer on the real instrument
- ChordPro player + chord library
- 1:1 fretboard reference view; glass drills only if the spike passed
- Web MIDI piano
"2–3 build sessions" for v1 is fantasy; the calibration, touch heuristics, and audio pipeline alone are that. Budget 3× and cut the recorder's export/favourites for v1.
Three highest-leverage changes:
- Invert the hero: mic-verified chord-change drills on the real instrument; glass fretboard becomes the reference display.
- Run the palm-rejection/multi-touch spike before writing anything else — it's the single existential risk to the on-glass feature.
- Make Web MIDI the piano story in v1; drop the key-width slider theater to two modes (playable / overview).
Bold idea you're missing: Use the TriFold's cover screen while folded as a pocket practice-streak companion — the daily "do your one-minute changes, app listens, 90 seconds total" habit loop. Duolingo's retention mechanic, pointed at a real guitar. The unfolded screen is the practice session; the folded screen is the reason they come back tomorrow.
7. References