Monorepo for Aesthetic.Computer
aesthetic.computer
notepat-remote: stacked octaves + compact header
Octave blocks now stack vertically (4 cols × 6 rows) instead of side-
by-side. Base octave on top, +1 on bottom — reading top→bottom gives
ascending pitch, matching the prior left→right layout rotated 90°.
Drops the device to W=120 while keeping pads at 26×26.
Dropped the 'notepat.com' title + ACTIVE/last-note status row since
they were blowing out the header at narrow widths (and the filename/
pad highlights already convey the same info). Compact single-row top
strip now shows just the octave (\`oN\`) and transport badge.
+21
-42
+1
-1
oven/bundler.mjs
+1
-1
oven/bundler.mjs
···
1066
1066
// octave, focus, ping from the daw bridge) pass through the final outlet to
1067
1067
// the MIDI router. Everything else matches the hand-rolled notepat device.
1068
1068
function generateChunkedNotepatM4DPatcher(pieceName, bootstrapDataUri, chunks) {
1069
-
const W = 140, H = 169;
1069
+
const W = 120, H = 169;
1070
1070
const liveUrl = "https://aesthetic.computer/" + pieceName + "?daw=1&nogap=1&density=1";
1071
1071
const boxes = [
1072
1072
{ box: { disablefind: 0, id: "obj-jweb", latency: 0, maxclass: "jweb~", numinlets: 1, numoutlets: 3, outlettype: ["signal","signal",""], patching_rect: [10,10,W,H], presentation: 1, presentation_rect: [0,0,W,H], rendermode: 1, url: bootstrapDataUri } },
+20
-41
system/public/aesthetic.computer/disks/notepat-remote.mjs
+20
-41
system/public/aesthetic.computer/disks/notepat-remote.mjs
···
475
475
476
476
wipe(...bgBase);
477
477
478
-
// ── Top bar: notepat-native BAR_BG strip across the full width ───────
479
-
// Keeps header chrome legible while the responsive backdrop still shows
480
-
// through the 1px gaps between pads below.
481
-
const topBarH = 22;
478
+
// ── Compact top strip: octave + transport only ───────────────────────
479
+
// Title removed — the downloaded filename + Live's device display
480
+
// already label what this is. Octave and transport are the live-
481
+
// updating bits worth keeping visible.
482
+
const topBarH = 12;
482
483
if (focused) {
483
484
ink(...BAR_BG).box(0, 0, W, topBarH, "fill");
484
485
ink(...BAR_BORDER).line(0, topBarH, W - 1, topBarH);
485
486
}
486
-
487
-
// ── Header row: piece name + transport state ─────────────────────────
488
487
let y = 2;
489
-
ink(...fg).write("notepat.com", { x: 4, y });
490
-
// Transport indicator mirrors arena.mjs: UDP (green) > WS (yellow) >
491
-
// OFFLINE (red). UDP means net.udp is live (session geckos channel up);
492
-
// WS means the raw notepat:midi subscription socket is open.
488
+
ink(...dim).write(`o${baseOctave}`, { x: 3, y });
493
489
const udpOk = !!netUdp?.connected;
494
490
const wsOk = wsState === "open";
495
491
const transport = udpOk && wsOk ? "UDP+WS"
···
503
499
wsOk ? [230, 200, 80] :
504
500
wsState === "connecting" ? [255, 200, 90] :
505
501
[255, 100, 100];
506
-
ink(...transportColor).write(transport, { x: W - transport.length * 6 - 4, y });
507
-
y += 10;
502
+
ink(...transportColor).write(transport, { x: W - transport.length * 6 - 3, y });
508
503
509
-
// ── Status row: ACTIVE + octave + last note ──────────────────────────
510
-
if (focused) {
511
-
ink(...accent).box(4, y + 1, 6, 6, "fill");
512
-
ink(...fg).write("ACTIVE", { x: 14, y });
513
-
}
514
-
ink(...dim).write(`oct ${baseOctave}`, { x: 70, y });
515
-
if (lastNote) {
516
-
const noteFresh = sinceNote < 30;
517
-
const pn = pitchName(lastNote.pitch);
518
-
const noteColor = noteFresh ? accent : dim;
519
-
const srcTag =
520
-
lastNote.source === "relay" ? (lastNote.transport === "udp" ? "⚡" : "") + "@" + (lastNote.handle || "?") :
521
-
lastNote.source === "tap" ? "tap" : "kbd";
522
-
const label = `${lastNote.vel === 0 ? "v" : "^"} ${pn} ${srcTag}`;
523
-
ink(...noteColor).write(label, { x: W - label.length * 6 - 4, y });
524
-
}
525
-
y += 10;
526
-
527
-
// ── Button grid area: two 4×3 octave blocks side-by-side ─────────────
528
-
// Pads are always square — cell size is the min of width/cols and
529
-
// height/rows, so the grid stays piano-shaped no matter how narrow or
530
-
// tall the device is. Grid centers horizontally; extra vertical space
531
-
// falls below (kept for future readouts).
532
-
const gridTop = y + 1;
533
-
const cols = 8; // 4 pads × 2 octave blocks
534
-
const rows = 3;
504
+
// ── Button grid: 4 cols × 6 rows (stacked octaves) ───────────────────
505
+
// Base octave on top, +1 on bottom — keeps reading order low→high
506
+
// from top to bottom (matches the prior left→right layout, just
507
+
// rotated 90°). Pads remain square.
508
+
const gridTop = topBarH + 1;
509
+
const cols = 4;
510
+
const rows = 6; // 2 octave blocks × 3 rows each
535
511
const cellSize = max(1, min(floor(W / cols), floor((H - gridTop) / rows)));
536
512
const gridW = cellSize * cols;
537
513
const gridLeft = floor((W - gridW) / 2);
···
551
527
const key = row[colIdx];
552
528
const offset = rowIdx * 4 + colIdx;
553
529
const pitch = (baseOctave + 1 + octIdx) * 12 + offset;
554
-
const globalCol = octIdx * 4 + colIdx;
530
+
// Stacked layout: base octave on top (globalRow 0-2),
531
+
// +1 octave below (globalRow 3-5). 4 cols per row.
532
+
const globalCol = colIdx;
533
+
const globalRow = octIdx * 3 + rowIdx;
555
534
const x0 = colEdges[globalCol];
556
535
const x1 = colEdges[globalCol + 1];
557
-
const y0 = rowEdges[rowIdx];
558
-
const y1 = rowEdges[rowIdx + 1];
536
+
const y0 = rowEdges[globalRow];
537
+
const y1 = rowEdges[globalRow + 1];
559
538
const b = { x: x0, y: y0, w: x1 - x0, h: y1 - y0, key, pitch };
560
539
buttons.push(b);
561
540
system/public/m4l/notepat.com.amxd
system/public/m4l/notepat.com.amxd
This is a binary file and will not be displayed.