Monorepo for Aesthetic.Computer
aesthetic.computer
notepat-remote: W=170 + implicit status dots
Bump device width back up (120 → 170) so Live's rack header has room
for the full 'notepat.com' title. Pads remain 28×28 (height-limited),
centered, extra horizontal space now carries status cues instead of
text.
Top text bar removed. Status is encoded visually:
• top-left corner: 3×3 transport-color dot (green=UDP+WS,
teal=UDP only, yellow=WS, amber=connecting, red=offline)
• right edge: 9-dot octave ladder. Current octave is brighter/wider,
others are dim single pixels. Tint picks up the last-note color
so the ladder also breathes with whatever's playing.
+31
-21
+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 = 120, H = 169;
1069
+
const W = 170, 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 } },
+30
-20
system/public/aesthetic.computer/disks/notepat-remote.mjs
+30
-20
system/public/aesthetic.computer/disks/notepat-remote.mjs
···
474
474
475
475
wipe(...bgBase);
476
476
477
-
// ── Compact top strip: octave + transport only ───────────────────────
478
-
// Title removed — the downloaded filename + Live's device display
479
-
// already label what this is. Octave and transport are the live-
480
-
// updating bits worth keeping visible.
481
-
const topBarH = 12;
482
-
if (focused) {
483
-
ink(...BAR_BG).box(0, 0, W, topBarH, "fill");
484
-
ink(...BAR_BORDER).line(0, topBarH, W - 1, topBarH);
485
-
}
486
-
let y = 2;
487
-
ink(...dim).write(`o${baseOctave}`, { x: 3, y });
477
+
// ── Implicit status cues (no text bar) ────────────────────────────
478
+
// Top bar removed — transport and octave were taking pixels that the
479
+
// pads could use. We encode them as tiny visual cues in the empty
480
+
// side strips instead:
481
+
// • top-left corner dot = transport state (green/yellow/red/…)
482
+
// • right-edge vertical dot ladder = current octave (1..9)
488
483
const udpOk = !!netUdp?.connected;
489
484
const wsOk = wsState === "open";
490
-
const transport = udpOk && wsOk ? "UDP+WS"
491
-
: udpOk ? "UDP"
492
-
: wsOk ? "WS"
493
-
: wsState === "connecting" ? "..."
494
-
: "OFFLINE";
495
485
const transportColor =
496
-
!focused ? dim :
497
-
udpOk ? [120, 220, 140] :
486
+
!focused ? [110, 110, 120] :
487
+
udpOk && wsOk ? [120, 220, 140] :
488
+
udpOk ? [120, 200, 180] :
498
489
wsOk ? [230, 200, 80] :
499
490
wsState === "connecting" ? [255, 200, 90] :
500
491
[255, 100, 100];
501
-
ink(...transportColor).write(transport, { x: W - transport.length * 6 - 3, y });
502
492
503
493
// ── Button grid: 4 cols × 6 rows (stacked octaves) ───────────────────
504
494
// Base octave on top, +1 on bottom — keeps reading order low→high
505
495
// from top to bottom (matches the prior left→right layout, just
506
496
// rotated 90°). Pads remain square.
507
-
const gridTop = topBarH + 1;
497
+
const gridTop = 0;
508
498
const cols = 4;
509
499
const rows = 6; // 2 octave blocks × 3 rows each
510
500
const cellSize = max(1, min(floor(W / cols), floor((H - gridTop) / rows)));
···
656
646
);
657
647
}
658
648
}
649
+
}
650
+
}
651
+
652
+
// ── Transport dot (top-left of the device) ───────────────────────
653
+
if (focused) {
654
+
ink(...transportColor).box(2, 2, 3, 3, "fill");
655
+
}
656
+
657
+
// ── Octave ladder (right-edge vertical dots 1..9) ────────────────
658
+
// One dot per octave; the current octave is bright and 3px wide,
659
+
// others are dim single pixels. Vertically centered in the device.
660
+
if (focused) {
661
+
const ladderH = 9 * 3 - 1; // 9 dots × 2 px + 1 px gaps
662
+
const ladderTop = floor((H - ladderH) / 2);
663
+
for (let oct = 1; oct <= 9; oct += 1) {
664
+
const dotY = ladderTop + (oct - 1) * 3;
665
+
const active = oct === baseOctave;
666
+
const dotColor = active ? (lastNoteColor || focusedFg) : [70, 70, 80];
667
+
const dotW = active ? 3 : 2;
668
+
ink(...dotColor).box(W - dotW - 1, dotY, dotW, 2, "fill");
659
669
}
660
670
}
661
671
system/public/m4l/notepat.com.amxd
system/public/m4l/notepat.com.amxd
This is a binary file and will not be displayed.