notepat: aux-key legend — tiny pads for z/x and ;/'/] below main grid

Visible pads under the bottom corners of the main 4×3 grid showing the
side-keys that aren't in the grid itself:

left corner: [z] [x] → -A♯ / -B (below-octave, left kit)
right corner: [;] ['] []] → ++C / ++C♯ / ++D (above-octave, right kit)

Each pad renders with the same note-color palette + accent-stripe as
the main grid buttons, lights up when its key is active, and fades via
the shared `trail` map on release. Single-letter key label centered in
the pad so "which key plays what" is readable at arm's length.

Skipped entirely if there isn't enough vertical room below the grid
(auxY + auxH >= h - 2) so the layout never overflows off-screen on
unusual screen sizes.

Tied to the recent z/x side-key routing fix: with activeKitForOffset
now sending offset <= 0 to kitLeft, the z/x pads on the left legend
ALWAYS represent the LEFT kit (they don't disappear or change color
when a drum kit is armed on the upper octave).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

prompt.ac/@jeffrey 2 months ago 8c650055 86fb5e07

+54

1 changed file

expand all

fedac

native

pieces

notepat.mjs

+54

fedac/native/pieces/notepat.mjs

··· 4581 4581 drawGrid(LEFT_GRID, leftX, leftOctaveOffset, "left"); 4582 4582 drawGrid(RIGHT_GRID, rightX, rightOctaveOffset, "right"); 4583 4583 4584 + // Auxiliary-key legend — tiny pads showing the side-keys that aren't 4585 + // in the main 4×3 grid but are still bound to notes: 4586 + // z / x → below-octave A♯ and B (LEFT kit) 4587 + // ; ' ] → above-octave C, C♯, D (RIGHT kit) 4588 + // Placed immediately below the main pad row, aligned with their 4589 + // respective grid sides so you can see what's hooked to the side 4590 + // of the keyboard at a glance. 4591 + { 4592 + const auxH = 10; 4593 + const auxW = 14; 4594 + const auxGap = 1; 4595 + const auxY = gridTop + gridH + 2; 4596 + if (auxY + auxH < h - 2) { 4597 + const drawAuxPad = (px, key, letter) => { 4598 + const nc = noteColor(letter); 4599 + const isActive = sounds[key] !== undefined; 4600 + const trailInfo = trail[key]; 4601 + if (isActive) { 4602 + ink(nc[0], nc[1], nc[2]); 4603 + } else if (trailInfo && trailInfo.brightness > 0.05) { 4604 + const b = trailInfo.brightness; 4605 + ink(Math.floor(nc[0] * b * 0.4) + (dark ? 12 : 200), 4606 + Math.floor(nc[1] * b * 0.4) + (dark ? 12 : 200), 4607 + Math.floor(nc[2] * b * 0.4) + (dark ? 12 : 200)); 4608 + } else { 4609 + ink(dark ? Math.floor(nc[0] * 0.25) + 10 : Math.floor(255 - (255 - nc[0]) * 0.18), 4610 + dark ? Math.floor(nc[1] * 0.25) + 10 : Math.floor(255 - (255 - nc[1]) * 0.18), 4611 + dark ? Math.floor(nc[2] * 0.25) + 12 : Math.floor(255 - (255 - nc[2]) * 0.18)); 4612 + } 4613 + box(px, auxY, auxW, auxH, true); 4614 + // Bottom accent strip — matches grid color 4615 + ink(Math.floor(nc[0] * 0.6), Math.floor(nc[1] * 0.6), Math.floor(nc[2] * 0.6), 220); 4616 + box(px, auxY + auxH - 1, auxW, 1, true); 4617 + // Key label (tiny, centered) 4618 + const keyCol = isActive ? (dark ? 20 : 255) : (dark ? 220 : 40); 4619 + ink(keyCol, keyCol, keyCol, 230); 4620 + const lx = px + Math.floor((auxW - 4) / 2); 4621 + write(key, { x: lx, y: auxY + 2, size: 1, font: "font_1" }); 4622 + }; 4623 + // LEFT side: z (=-A#, below-octave A#) and x (=-B, below-octave B) 4624 + // Tucked into the bottom-left corner, just under the left grid's 4625 + // leftmost column so the spatial relationship to the grid reads. 4626 + drawAuxPad(leftX, "z", "a#"); 4627 + drawAuxPad(leftX + auxW + auxGap, "x", "b"); 4628 + // RIGHT side: ; ' ] (above-octave C, C#, D) tucked into the 4629 + // bottom-right corner, aligned with the right grid's rightmost 4630 + // column so the "up-octave" continuation reads visually. 4631 + const r0x = rightX + gridW - (auxW * 3 + auxGap * 2); 4632 + drawAuxPad(r0x, ";", "c"); 4633 + drawAuxPad(r0x + (auxW + auxGap), "'", "c#"); 4634 + drawAuxPad(r0x + (auxW + auxGap) * 2, "]", "d"); 4635 + } 4636 + } 4637 + 4584 4638 // === DRUM INSPECTOR === 4585 4639 // When a drum pad fires, its per-voice synth params are captured. We 4586 4640 // render them just above the grid so you can see exactly what builds

Configure Feed

Configure Feed