jawhng/404-Layers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Design canvas, third pass: usable screen, fix label overflow

Browse Source 
RESAMPLE was overflowing its button and REMAIN was touching its
borders. Both lack a space, so unlike PTN EDIT or BPM SYNC they cannot
wrap. Restored the soft hyphens the reference already uses
(RE-SAMPLE, RE-MAIN, RE-VERSE) plus hyphens:manual on the key style.

The screen was faithful to the object but too small for the job it does
here. The circle no longer encloses the display: a 124px circle sits
behind a 168x84 LCD, so it reads as two 20px caps above and below with
no ring around the rectangle. Area goes up 2.4x, enough for the display
to name the layer and list what is on it, or show the card and verdict
when drilling.

Room came from the control rows (-6), knobs (-2), info card (-4) and
tab bar (-4):
  8 + 44 + 8 + 525 + 8 + 84 + 8 + 50 = 735
  8 + 36 + 8 + 124 + 10 + 134 + 10 + 187 + 8 = 525
Pad rows are 43px.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Georgi Durankiev
2026-09-17 00:15:45 +03:00
parent ae142cdf52
commit 12a86fb5db
4 changed files with 115 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
design/canvas/Main.dc.html
View File

@@ -13,7 +13,8 @@
a { color: #FF4A00; } a:hover { color: #C43900; }
.k { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; text-align:center;
background:#F5F5F2; border:2px solid #111111; border-radius:3px; color:#111111; font-size:8px;
line-height:1.05; letter-spacing:.03em; padding:2px 1px; box-sizing:border-box; font-weight:500; }
line-height:1.02; letter-spacing:.03em; padding:2px 2px; box-sizing:border-box; font-weight:500;
hyphens:manual; overflow-wrap:break-word; }
.lit { background:#FF4A00; color:#111111; font-weight:700; }
.pad { background:#1B1B1B; border:2px solid #111111; border-radius:4px; color:#EDEDEB; font-size:9px; }
.num { font-family:'Space Mono',monospace; font-size:16px; font-weight:700; color:#6E6E69; }
@@ -23,9 +24,12 @@
.cap { font-family:'Space Mono',monospace; font-size:6px; letter-spacing:.11em; color:#6E6E69; white-space:nowrap; }
.rule { flex:1; height:1px; background:#B5B5B0; }
.caprow { height:8px; display:flex; align-items:center; gap:4px; }
.btnrow { height:34px; display:flex; gap:5px; }
.grp { height:42px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr); gap:10px; }
.btnrow { height:32px; display:flex; gap:5px; }
.grp { height:40px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr); gap:10px; }
.col { display:flex; flex-direction:column; }
.lcdrow { display:flex; justify-content:space-between; align-items:center;
font-family:'Space Mono',monospace; font-size:6.5px; letter-spacing:.06em; }
.inv { background:#111111; color:#C9D2C4; padding:1px 4px; }
</style>
</helmet>
@@ -50,49 +54,45 @@
</div>
<!-- the unit -->
<div style="height:517px; flex:0 0 auto; background:#D2D2CE; border:2px solid #111111;
<div style="height:525px; flex:0 0 auto; background:#D2D2CE; border:2px solid #111111;
box-shadow:4px 4px 0 #111111; box-sizing:border-box; padding:8px;
display:flex; flex-direction:column;">
<!-- knobs -->
<div style="height:38px; display:flex; justify-content:space-between; align-items:center; padding:0 4px;">
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;
letter-spacing:.02em;">VOLUME</div>
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;
letter-spacing:.02em;">CTRL 1</div>
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;
letter-spacing:.02em;">CTRL 2</div>
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;
letter-spacing:.02em;">CTRL 3</div>
<div style="height:36px; display:flex; justify-content:space-between; align-items:center; padding:0 4px;">
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">VOLUME</div>
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 1</div>
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 2</div>
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 3</div>
</div>
<!-- fx + circular screen housing with a rectangular LCD -->
<div style="height:104px; margin-top:8px; display:grid; grid-template-columns:62px minmax(0,1fr) 62px; gap:8px;">
<!-- fx + screen: circle shows only as caps above and below the display -->
<div style="height:124px; margin-top:8px; display:grid; grid-template-columns:62px minmax(0,1fr) 62px; gap:8px;">
<div style="display:flex; flex-direction:column; gap:5px;">
<div class="fxk">FILTER<br>+DRIVE</div>
<div class="fxk">RESONATOR</div>
<div class="fxk">DELAY</div>
</div>
<div style="display:flex; align-items:center; justify-content:center;">
<div style="width:104px; height:104px; border-radius:50%; background:#1B1B1B; border:2px solid #111111;
display:flex; align-items:center; justify-content:center; box-sizing:border-box;">
<div style="width:76px; height:48px; background:#C9D2C4; border:1px solid #111111; box-sizing:border-box;
padding:3px 5px; display:flex; flex-direction:column; justify-content:space-between;
font-family:'Space Mono',monospace; color:#111111;">
<div style="font-size:5.5px; letter-spacing:.08em; display:flex; justify-content:space-between;">
<span>SAMPLE</span><span>S&nbsp;MODE</span>
</div>
<div style="font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700; text-align:center; line-height:1;">&#8212;</div>
<div style="font-size:5.5px; letter-spacing:.08em; display:flex; justify-content:space-between;">
<span>LAYER</span><span>3 FN</span>
</div>
<div style="position:relative; display:flex; align-items:center; justify-content:center;">
<div style="position:absolute; left:50%; top:0; width:124px; height:124px; margin-left:-62px;
border-radius:50%; background:#1B1B1B; border:2px solid #111111; box-sizing:border-box;"></div>
<div style="position:relative; width:168px; height:84px; background:#C9D2C4; border:2px solid #111111;
box-sizing:border-box; padding:4px 6px; display:flex; flex-direction:column;
justify-content:space-between; color:#111111;">
<div class="lcdrow"><span>MODE:SAMPLE</span><span>LAYER:&#8212;</span></div>
<div style="font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:700;
text-align:center; line-height:1;">3 functions</div>
<div class="lcdrow" style="gap:3px;">
<span class="inv">STOP&#215;4</span><span class="inv">INFO</span><span class="inv">SKIPBACK</span>
</div>
</div>
</div>
<div style="display:flex; flex-direction:column; gap:5px;">
<div class="fxk">ISOLATOR</div>
<div class="fxk">DJFX<br>LOOPER</div>
@@ -100,8 +100,8 @@
</div>
</div>
<!-- control block, grouped the way the hardware silkscreens it -->
<div style="height:140px; margin-top:10px; display:flex; flex-direction:column; gap:7px;">
<!-- control block, grouped as the hardware is silkscreened -->
<div style="height:134px; margin-top:10px; display:flex; flex-direction:column; gap:7px;">
<div class="grp">
<div class="col">
@@ -121,12 +121,13 @@
<div class="grp">
<div class="col">
<div class="caprow"><span class="cap">SAMPLING</span><span class="rule"></span></div>
<div class="btnrow"><div class="k">DEL</div><div class="k">REC</div><div class="k">RESAMPLE</div></div>
<div class="btnrow"><div class="k">DEL</div><div class="k">REC</div><div class="k">RE&shy;SAMPLE</div></div>
</div>
<div class="col">
<div class="caprow"><span class="rule"></span></div>
<div class="btnrow">
<div class="k">BPM SYNC</div><div class="k">GATE</div><div class="k">LOOP</div><div class="k">REVERSE</div><div class="k">ROLL</div>
<div class="k">BPM SYNC</div><div class="k">GATE</div><div class="k">LOOP</div>
<div class="k">RE&shy;VERSE</div><div class="k">ROLL</div>
</div>
</div>
</div>
@@ -146,7 +147,7 @@
</div>
<!-- pads -->
<div style="height:191px; margin-top:10px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) .9fr;
<div style="height:187px; margin-top:10px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) .9fr;
grid-auto-rows:1fr; gap:5px;">
<div class="k pad"><span class="num">1</span></div>
<div class="k pad"><span class="num">2</span></div>
@@ -172,20 +173,20 @@
</div>
<!-- info -->
<div style="height:88px; flex:0 0 auto; background:#F5F5F2; border:2px solid #111111;
<div style="height:84px; flex:0 0 auto; background:#F5F5F2; border:2px solid #111111;
box-shadow:3px 3px 0 #111111; box-sizing:border-box; padding:7px 10px;
display:flex; flex-direction:column; gap:4px;">
<div style="display:flex; justify-content:space-between; align-items:baseline; gap:8px;">
<span style="font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.12em; color:#6E6E69;">TOP SCREEN, PADS ORANGE</span>
<span style="flex:0 0 auto; border:2px solid #111111; padding:2px 6px; font-size:9px; font-weight:700; letter-spacing:.06em;">LIST 3</span>
</div>
<div style="font-size:13px; line-height:1.3; text-wrap:pretty;">
<div style="font-size:12.5px; line-height:1.3; text-wrap:pretty;">
Hold a button to peek at its layer, tap it to lock, tap again to release. Tap a lit control to read it.
</div>
</div>
<!-- tabs -->
<div style="height:54px; flex:0 0 auto; display:flex; border:2px solid #111111; background:#F5F5F2; box-sizing:border-box;">
<div style="height:50px; flex:0 0 auto; display:flex; border:2px solid #111111; background:#F5F5F2; box-sizing:border-box;">
<div style="flex:1; display:flex; align-items:center; justify-content:center; background:#FF4A00;
color:#111111; font-size:11px; font-weight:700; letter-spacing:.08em;">EXPLORE</div>
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:2px solid #111111;