ncode
f8565c35cd
The two chip rows sat flush: the reference spaces them with '#strip .chips + .chips', but the .lbl between them is display:none on phones and still in the DOM, so the sibling selector never matched. Measured gap was 0px, and both selected chips are light-filled and left-aligned, so they merged into one shape. - collapse the 7 context chips into one 44px control opening the existing sheet, whose rows now show CTXHINT (never surfaced on phones before) - chip targets 34.9px -> 44px; they scroll, so a mis-hit scrolled instead of tapping - right-edge fade only on rows that actually overflow (703px and 952px of content in a 360px viewport, scrollbars hidden) Applied in native/ so reference/ stays frozen; CLAUDE.md records what the React port must carry. scripts/device.sh makes the screen-off renderer denial unmissable: it verifies the phone is awake, waits for the page to parse rather than for the activity, and reads the pid after start (adb install -r kills the old process, which produced one false 'page never loaded'). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
208 lines
9.9 KiB
Markdown
208 lines
9.9 KiB
Markdown
# SP-404MK2 layers
|
||
|
||
A combo trainer for the Roland SP-404MK2, wrapped as a sideloaded Android APK.
|
||
|
||
**Phase 1 (current):** the original single-file web app, wrapped in Capacitor as-is.
|
||
**Phase 2 (next):** port to React + TypeScript via Vite — data and pure logic with
|
||
tests first, then UI, then multitouch input.
|
||
|
||
## Layout
|
||
|
||
```
|
||
reference/ The original working web app. FROZEN — this is the spec.
|
||
Never edit it. Behaviour, data and styling are all defined here.
|
||
native/ Native-only additions (native.css, native.js). Not in reference.
|
||
scripts/ install-android-toolchain.sh, sync-www.sh
|
||
www/ GENERATED by sync-www.sh. Never edit by hand, never committed.
|
||
android/ Generated by `npx cap add android`. A few files are hand-edited
|
||
(see "Hand-edited native files" below).
|
||
```
|
||
|
||
## Commands
|
||
|
||
| Command | What it does |
|
||
|---|---|
|
||
| `npm run sync:www` | Rebuild `www/` from `reference/` + `native/` |
|
||
| `npm run sync` | The above, then `npx cap sync android` |
|
||
| `npm run apk` | Sync, then `./gradlew assembleDebug` |
|
||
| `npm run install:apk` | `adb install -r` the debug APK |
|
||
| `npm run run:android` | Build + install in one go — the usual loop |
|
||
| `npm run logcat` | Tail Capacitor + web console output from the device |
|
||
|
||
APK lands at `android/app/build/outputs/apk/debug/app-debug.apk`.
|
||
|
||
The Gradle build needs these in the environment (persisted to `~/.zshrc` by the
|
||
install script):
|
||
|
||
```
|
||
JAVA_HOME=/usr/lib/jvm/java-21-openjdk-amd64
|
||
ANDROID_HOME=$HOME/Android/Sdk
|
||
```
|
||
|
||
## Driving the device
|
||
|
||
**The screen must be awake and unlocked before launching, every time.** While
|
||
the display dozes, TCL denies the WebView renderer and the app comes up blank
|
||
with no crash, no JS error and an empty `document.title`. The failure is sticky
|
||
for the life of the process, so waking the phone afterwards does not repair it —
|
||
the app has to be force-stopped and started again.
|
||
|
||
`scripts/device.sh` handles this so it cannot be forgotten:
|
||
|
||
| Command | What it does |
|
||
|---|---|
|
||
| `npm run device:keep-awake` | Stay awake while charging. Do this at the start of a session. |
|
||
| `npm run device:launch` | Check awake/unlocked, force-stop, start, wait for the page to actually parse |
|
||
| `npm run device:awake` | Just the check — prints a loud warning if locked |
|
||
| `npm run device:sleep-normal` | Revert the stay-awake setting when finished |
|
||
|
||
`device:launch` waits for the page, not merely for the activity: the activity
|
||
starts fine even when the renderer was denied. On failure it prints the
|
||
`AppBootManager` denial lines rather than leaving a blank window to puzzle over.
|
||
|
||
It also reads the pid *after* starting the app. `adb install -r` kills the
|
||
running process, so a pid captured earlier points at a dead process and the
|
||
devtools socket lookup fails while the app itself is healthy — that produced one
|
||
false "page never loaded" during Phase 1.
|
||
|
||
To attach Chrome DevTools by hand: `chrome://inspect`, or
|
||
`adb forward tcp:9333 localabstract:webview_devtools_remote_$(adb shell pidof dev.ncode.sp404layers)`
|
||
and open `http://127.0.0.1:9333/json`.
|
||
|
||
## Toolchain (verified, do not bump blind)
|
||
|
||
Pinned against Capacitor 8.5.2's `capacitor/build.gradle`:
|
||
`compileSdk 36`, `targetSdk 36`, `minSdk 24`, Java 21.
|
||
|
||
- JDK **21** — required by Capacitor 8; `openjdk-21-jdk` from apt
|
||
- cmdline-tools **15859902**
|
||
- build-tools **36.1.0** — pairs with compileSdk 36
|
||
- platforms **android-35**, **android-36**
|
||
|
||
`sdkmanager` prints a deprecation warning pointing at the newer `android` CLI.
|
||
It still works, and it writes the `licenses/` directory that Gradle checks. The
|
||
replacement downloads itself on first run and gates on an interactive ToS, which
|
||
is worse in an idempotent install script. Revisit if it actually breaks.
|
||
|
||
## Decisions
|
||
|
||
**`reference/` is never edited.** It is the Phase 2 spec, so it has to stay
|
||
byte-for-byte comparable. Everything native-specific is either an additive file
|
||
or one of three removals applied by `sync-www.sh`, which asserts each anchor
|
||
exists and fails loudly if the reference ever changes shape.
|
||
|
||
The three removals:
|
||
1. **Service worker registration** — would cache `index.html` and serve a stale
|
||
app after an APK update. Assets are already local, so it buys nothing.
|
||
2. **Web manifest link** — the APK's own manifest governs the app.
|
||
3. Nothing else. `native.css` and `native.js` are *injected*, not substituted.
|
||
|
||
**Haptics needs no reference change.** `buzz()` is a `const` and cannot be
|
||
reassigned, but it calls `navigator.vibrate`, which can be overridden. `native.js`
|
||
redefines that to dispatch to `@capacitor/haptics`: scalar → `impact`, array →
|
||
`notification({type:"SUCCESS"})`, `>15` → `notification({type:"ERROR"})`.
|
||
|
||
**Storage mirrors rather than migrates.** `localStorage` stays the synchronous
|
||
source of truth so `load()`/`save()` keep their signatures. `save()` is wrapped
|
||
to mirror into `@capacitor/preferences` (SharedPreferences), which survives a
|
||
"clear app data" wipe. On boot, if `localStorage` is empty but Preferences is
|
||
not, it restores and re-renders. A full async port was rejected as a refactor of
|
||
code about to be rewritten in React anyway.
|
||
|
||
**Back button** is owned by `native.js`: sheet open → close it; otherwise not on
|
||
Explore → go to Explore; otherwise exit. Registering a listener suppresses
|
||
Capacitor's default history navigation.
|
||
|
||
**Edge-to-edge is handled natively, not avoided.** Android 16 is API 36 and
|
||
Capacitor 8 targets SDK 36, which is exactly the combination where
|
||
`windowOptOutEdgeToEdgeEnforcement` stops working. An Android WebView never
|
||
populates `env(safe-area-inset-*)`, so `MainActivity` installs an
|
||
`OnApplyWindowInsetsListener`, converts px → dp, and pushes the values into
|
||
`--ins-t/r/b/l` via `window.__applyInsets()`. `native.css` re-points the
|
||
reference's `--sab` at `--ins-b`, so `.bnav` and `.sheet` need no changes.
|
||
|
||
The push retries on a bounded schedule (25 × 200ms) because insets typically
|
||
arrive before the page has run any JS.
|
||
|
||
**No community plugins.** Only first-party: `@capacitor/core`, `/cli`,
|
||
`/android`, `/haptics`, `/preferences`, `/app`.
|
||
|
||
**Debug signing.** The debug keystore is stable per-machine, so Phase 2's APK
|
||
installs over Phase 1's without an uninstall and drill progress survives.
|
||
`appId` is `dev.ncode.sp404layers` and must not change for the same reason.
|
||
|
||
## Phase 2 must carry these UI changes
|
||
|
||
Phase 1 fixes a strip ergonomics problem in `native/native.{css,js}` rather than
|
||
in `reference/`, which stays frozen. The React port must reproduce these, since
|
||
they will not come along with the reference:
|
||
|
||
1. **The two chip rows sit flush on phones.** The reference spaces them with
|
||
`#strip .chips + .chips { margin-top: 6px }`, but the `.lbl` heading between
|
||
them is `display:none` on phones and still in the DOM, so the adjacent-sibling
|
||
selector never matches. Measured gap: 0px. Both selected chips are also
|
||
light-filled and left-aligned, so they visually merge into one shape.
|
||
2. **The 7 context chips collapse into one 44px control** that opens the existing
|
||
sheet, freeing a row for the panel. The sheet rows show `CTXHINT`, which the
|
||
phone layout otherwise never displays.
|
||
3. **Chip targets go from 34.9px to 44px.** They scroll horizontally, so an
|
||
undersized target turns a mis-hit into a scroll instead of a tap.
|
||
4. **Overflowing rows get a right-edge fade.** Scrollbars are hidden, and both
|
||
rows overflow badly (703px and 952px of content in a 360px viewport) with
|
||
nothing indicating more content. The fade is applied only to rows that
|
||
actually overflow.
|
||
|
||
In React this should be real component state, not a post-render DOM patch:
|
||
Phase 1 has to re-apply the collapse after every `renderExplore()` because that
|
||
function rewrites `#strip` wholesale.
|
||
|
||
## Hand-edited native files
|
||
|
||
`cap sync` does not regenerate these — keep them when recreating `android/`:
|
||
|
||
- `android/app/src/main/java/dev/ncode/sp404layers/MainActivity.java` — inset bridge
|
||
- `android/app/src/main/AndroidManifest.xml` — `android:screenOrientation="portrait"`
|
||
|
||
## Device notes (TCL 50 PRO NXTPAPER 5G, Android 16 / API 36)
|
||
|
||
**adb needs a udev rule.** The phone is USB `1bbb:0c01`. Ubuntu's
|
||
`android-sdk-platform-tools-common` matches vendor *and* product, and lists only
|
||
older TCL products, so nothing matched and the device node stayed `root:root`.
|
||
Fixed with a vendor-wide rule (product IDs change with USB mode):
|
||
|
||
```
|
||
echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="1bbb", MODE="0660", GROUP="plugdev", TAG+="uaccess"' \
|
||
| sudo tee /etc/udev/rules.d/51-android-tcl.rules
|
||
sudo udevadm control --reload-rules && sudo udevadm trigger
|
||
```
|
||
|
||
It lives in `/etc/udev` so apt upgrades don't overwrite it. The `uaccess` tag
|
||
grants the logged-in session access, so no logout is needed.
|
||
|
||
**A blank grey window means the screen was off when the app started.** TCL's
|
||
`AppBootManagerService` refuses to let the app bind the WebView's sandboxed
|
||
renderer process while the display is dozing:
|
||
|
||
```
|
||
W/AppBootManager: Type[TYPE_SERVICE];Result[false];
|
||
Target[org.chromium.content.app.SandboxedProcessService0];
|
||
Caller[dev.ncode.sp404layers];Reason[screen_off & caller care]
|
||
E/cr_ChildProcessConn: Failed to establish the service connection.
|
||
```
|
||
|
||
With no renderer the page never parses, so there is no crash, no JS error, an
|
||
empty `document.title`, and DevTools `Runtime.evaluate` hangs. The failure is
|
||
sticky for the life of the process — reopening from Recents keeps the grey
|
||
window. Wake and unlock the phone first, then `am force-stop` and relaunch.
|
||
This is an OEM policy, not an app bug, and it only bites when launching over adb.
|
||
|
||
## Gotchas
|
||
|
||
- The reference's multitouch relies on `touch-action:none` on `.unit` plus
|
||
per-`pointerId` tracking in a `Map`. This is the most delicate part to port in
|
||
Phase 2 — read `exDown`/`exUp`/`drDown`/`drUp` before touching it.
|
||
- `store`, `st` and `SK` are `const`/`let` at classic-script top level: reachable
|
||
by bare name from `native.js`, but absent from `window`. `save`/`render`/
|
||
`closeSheet` are function declarations, so they *are* on `window` and can be
|
||
wrapped.
|