From 742f240a62755397b5248d65a09b22d14824fd1c Mon Sep 17 00:00:00 2001 From: MelekTaus Date: Sat, 10 Oct 2026 23:16:47 +0200 Subject: [PATCH] Make the Bitcrusher and Delay plates shorter (#399, #393) Both devices were 280 tall, but their knobs end well above that. The gap between the lamps or levers and the knobs was wide, and below the knobs about 70 units stayed empty. - The Bitcrusher is 680x220. Its knobs sit 14 higher, closer to the row of bit lamps. - The Delay is 680x224. Its knob groups start 16 higher, closer to the two levers. - The screen's frame is now worked out from the plate's bottom edge. It stays as far from the bottom as from the side, so the screen shrinks with the plate (116 and 120 tall). Tests: - crusher-view and delay-view: 30 tests green - e2e 34 on melektaus-atx: ALL PASSED, 144 checks - gate on melektaus-atx: 293 files, 4495 tests Co-Authored-By: Claude Opus 5.5 --- src/editor/soundfx/crusherView.ts | 13 +++++++------ src/editor/soundfx/delayView.ts | 13 +++++++------ tools/e2e/34-sound.mjs | 4 ++-- 3 files changed, 16 insertions(+), 14 deletions(-) diff --git a/src/editor/soundfx/crusherView.ts b/src/editor/soundfx/crusherView.ts index d07d81c5..532782ce 100644 --- a/src/editor/soundfx/crusherView.ts +++ b/src/editor/soundfx/crusherView.ts @@ -48,8 +48,8 @@ export const CRUSH_KNOBS: Record = { // --- The plate. --- -/** The plate: as the Flanger's (#398), the panel never takes another size. */ -export const CRUSHER_PANEL = { w: 680, h: 280 }; +/** The plate: as the Flanger's (#398), the panel never takes another size – no taller than its knobs need (#399). */ +export const CRUSHER_PANEL = { w: 680, h: 220 }; /** The extra the strip of text under the screen takes. */ export const TEXT_ROW = 14; @@ -72,11 +72,12 @@ export interface CrusherLayout { } function crusherLayout(): CrusherLayout { - const { w } = CRUSHER_PANEL; - const screen = { x: 34, y: 60, w: 280, h: 176 }; - const bezel = { x: 24, y: 44, w: screen.w + 20, h: screen.h + 16 + TEXT_ROW + 6 }; + const { w, h } = CRUSHER_PANEL; + // The screen as tall as the plate leaves, its frame as far from the bottom as from the side. + const bezel = { x: 24, y: 44, w: 300, h: h - 24 - 44 }; + const screen = { x: 34, y: 60, w: bezel.w - 20, h: bezel.h - 16 - TEXT_ROW - 6 }; // The bits and the rate big, the two edges of a pixel on the screen; the wet small after them. - const dialY = 160; + const dialY = 146; const bits = { x: bezel.x + bezel.w + 20 + BIG_DIAL / 2, y: dialY, size: BIG_DIAL }; const rate = { x: bits.x + BIG_DIAL + 20, y: dialY, size: BIG_DIAL }; const mix = { x: rate.x + BIG_DIAL / 2 + 20 + 30, y: dialY, size: SMALL_DIAL }; diff --git a/src/editor/soundfx/delayView.ts b/src/editor/soundfx/delayView.ts index 63b1ef7f..c892881a 100644 --- a/src/editor/soundfx/delayView.ts +++ b/src/editor/soundfx/delayView.ts @@ -115,8 +115,8 @@ export const DELAY_KNOBS: Record = { // --- The plate. --- -/** The plate: as the Compressor's (#379), the panel never takes another size. */ -export const DELAY_PANEL = { w: 680, h: 280 }; +/** The plate: as the Compressor's (#379), the panel never takes another size – no taller than its knobs need. */ +export const DELAY_PANEL = { w: 680, h: 224 }; const KNOB_SLOT = 64; const GROUP_GAP = 16; @@ -143,15 +143,16 @@ export interface DelayLayout { } function delayLayout(): DelayLayout { - const { w } = DELAY_PANEL; - const screen = { x: 34, y: 60, w: 300, h: 176 }; - const bezel = { x: 24, y: 44, w: screen.w + 20, h: screen.h + 16 + TEXT_ROW + 6 }; + const { w, h } = DELAY_PANEL; + // The screen as tall as the plate leaves, its frame as far from the bottom as from the side. + const bezel = { x: 24, y: 44, w: 320, h: h - 24 - 44 }; + const screen = { x: 34, y: 60, w: bezel.w - 20, h: bezel.h - 16 - TEXT_ROW - 6 }; // The right of the plate: the two levers on top, the knobs below. const left = bezel.x + bezel.w + 24; const right = w - 24; const sync = { x: left, y: 52, ...LEVER }; const pingPong = { x: right - LEVER.w, y: 52, ...LEVER }; - const groupTop = 130; + const groupTop = 114; const dialY = groupTop + GROUP_LINE + KNOB_CAPTION + SMALL_DIAL / 2; const groups: { label: string; box: Box }[] = []; const knobs = {} as Record; diff --git a/tools/e2e/34-sound.mjs b/tools/e2e/34-sound.mjs index 9fd981d0..a09272dc 100644 --- a/tools/e2e/34-sound.mjs +++ b/tools/e2e/34-sound.mjs @@ -1413,7 +1413,7 @@ export async function sound(t) { check( 'a Delay node is a device with its echoes on a screen and a running light; ping-pong, sync and the time knob are one undo step each', dlShown.size.w === 680 && - dlShown.size.h === 280 && + dlShown.size.h === 224 && Object.values(dlShown.inputs).length === 5 && Object.values(dlShown.inputs).every((p) => p.x < dlShown.rect.x) && Object.values(dlShown.outputs).every((p) => p.x > dlShown.rect.x + dlShown.rect.w) && @@ -1659,7 +1659,7 @@ export async function sound(t) { check( 'a Bitcrusher node is a device whose screen draws a sine in the cells of its bits and its rate; both knobs are one undo step each', bcShown.size.w === 680 && - bcShown.size.h === 280 && + bcShown.size.h === 220 && Object.values(bcShown.inputs).length === 4 && Object.values(bcShown.inputs).every((p) => p.x < bcShown.rect.x) && Object.values(bcShown.outputs).every((p) => p.x > bcShown.rect.x + bcShown.rect.w) &&