Drop the Gain's engraved name and centre its knob (#384)
The plate was taller than its one knob needs, and the engraved "GAIN" only repeated the node's title. Without it the plate is square, and the knob sits in its middle. - The plate is 160x160 instead of 160x220, without the "GAIN" engraving. - The knob is centred on what it shows: the "DB" caption and the dial. Since #382 its number hangs inside the dial's open bottom, so it adds no height. - CAPTION_AIR (4) takes out the empty space above the caption's capitals. Without it the knob sat a little too low. Measured on a picture at zoom 0.8: 19 px of air above "DB" and 19 px below the number. The user's screenshot showed about 14 above and 35 below. Tests: - Unit hardware-view: 12 tests green. The layout test now asks for the same air above and below. - e2e 34 (melektaus-atx): ALL PASSED, 126 checks. - Gate (melektaus-atx): CHECK EXIT 0, 283 files, 4359 tests. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
01ee61868b
commit
17f47f6956
4 files changed
+19
-14
No files matched your search
@@ -30,7 +30,6 @@ const DARK_ARC = 0x3b1a06;
|
||||
export class GainPanel extends Widget {
|
||||
private readonly plate = new Graphics();
|
||||
readonly knob: Knob;
|
||||
private readonly title: { ink: Text; edge: Text };
|
||||
private readonly caption: { ink: Text; edge: Text };
|
||||
|
||||
constructor(host: GainHost) {
|
||||
@@ -38,7 +37,6 @@ export class GainPanel extends Widget {
|
||||
this.minWidth = GAIN_PANEL.w;
|
||||
this.minHeight = GAIN_PANEL.h;
|
||||
this.addChild(this.plate);
|
||||
this.title = engrave(this, 'GAIN', 14);
|
||||
this.caption = engrave(this, 'DB', 11);
|
||||
const row = GAIN_ROW;
|
||||
this.knob = new Knob('', row.default, {
|
||||
@@ -70,13 +68,11 @@ export class GainPanel extends Widget {
|
||||
}
|
||||
|
||||
override layout(): void {
|
||||
const L = GAIN_LAYOUT;
|
||||
const spot = L.knob;
|
||||
const spot = GAIN_LAYOUT.knob;
|
||||
const size = this.knob.measure();
|
||||
this.knob.position.set(Math.round(spot.x - size.w / 2), Math.round(spot.y - spot.size / 2));
|
||||
this.knob.resize(size.w, size.h);
|
||||
placeEngraving(this.caption, spot.x, spot.y - spot.size / 2 - KNOB_CAPTION);
|
||||
placeEngraving(this.title, L.title.x, L.title.y + 6);
|
||||
}
|
||||
|
||||
override redraw(): void {
|
||||
|
||||
@@ -74,12 +74,15 @@ export const PANEL_LAYOUT: PanelLayout = {
|
||||
screws: screwsOf(PANEL),
|
||||
};
|
||||
|
||||
/** The Gain as a device (#384): an orange plate with one big knob. */
|
||||
export const GAIN_PANEL = { w: 160, h: 220 };
|
||||
/** The Gain as a device (#384): an orange plate with one big knob and no name, as low as it allows. */
|
||||
export const GAIN_PANEL = { w: 160, h: 160 };
|
||||
|
||||
/** The air in a caption's line above its capitals, and the hair a tucked number hangs below the dial. */
|
||||
export const CAPTION_AIR = 4;
|
||||
|
||||
export const GAIN_LAYOUT = {
|
||||
title: { x: GAIN_PANEL.w / 2, y: 14 },
|
||||
knob: { x: GAIN_PANEL.w / 2, y: 120, size: BIG_DIAL },
|
||||
// Its number hangs in the dial's open bottom (#382), so the caption's ink and the dial are what to centre.
|
||||
knob: { x: GAIN_PANEL.w / 2, y: (GAIN_PANEL.h + KNOB_CAPTION - CAPTION_AIR) / 2, size: BIG_DIAL },
|
||||
screws: screwsOf(GAIN_PANEL),
|
||||
};
|
||||
|
||||
|
||||
Reference in new issue
Block a user