Rack: put a patch panel's name above its ports
Lint / JS (eslint) (push) Successful in 8s
Lint / Python (flake8) (push) Successful in 51s
Lint / Notify on failure (push) Skipped
Lint / Deploy (push) Skipped
Security / Python Security (bandit) (push) Successful in 54s
Test / Python Tests (pytest) (push) Successful in 1m21s
Lint / Python (flake8) (pull_request) Successful in 1m7s
Lint / JS (eslint) (pull_request) Successful in 13s
Lint / Notify on failure (pull_request) Skipped
Lint / Deploy (pull_request) Skipped
Security / Python Security (bandit) (pull_request) Successful in 1m18s
Test / Python Tests (pytest) (pull_request) Successful in 1m5s

A long panel name (UACC-Rack-Panel-Patch-Blank-24) was drawn in the left
ear at full size and ran under the ports. It is now a small caption in
the panel's top-left corner, shortened past 48 characters with the full
name in its tooltip.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-11-10 23:02:18 -05:00
co-authored by Claude Opus 5.5
parent bee260f1cd
commit 97e6692ebf
2 changed files with 4 additions and 3 deletions
+2 -2
View File
@@ -61,7 +61,7 @@ function panelSvg(item) {
const rowH = (H - 20) / rows;
// Label characters that fit under one port at the label's font size (9px, ~5.6px a character)
const fit = Math.max(3, Math.floor((pitch - 2) / 5.6));
const short = t => (t.length > fit ? `${t.slice(0, fit - 1)}…` : t);
const short = (t, max = fit) => (t.length > max ? `${t.slice(0, max - 1)}…` : t);
const ports = [];
for (let n = 1; n <= count; n++) {
const r = Math.floor((n - 1) / perRow), c = (n - 1) % perRow;
@@ -81,7 +81,7 @@ function panelSvg(item) {
return `<svg class="rack-svg" viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet" role="group"
aria-label="${esc(item.name)} patch panel">
<rect class="rack-pp-body" width="${W}" height="${H}" rx="3"/>
<text class="rack-pp-name" x="${ear - 50}" y="${H / 2 + 5}">${esc(item.name)}</text>
<text class="rack-pp-name" x="14" y="17"><title>${esc(item.name)}</title>${esc(short(item.name, 48))}</text>
${ports.join('')}
</svg>`;
}
+2 -1
View File
@@ -1464,7 +1464,8 @@ body.fp-marks-off .fp-svg .fp-mark { display: none; }
.rack-kind-shelf .rack-plate { background: repeating-linear-gradient(90deg, var(--rk-plate-b) 0 10px, var(--rk-frame) 10px 20px); }
.rack-pp-body { fill: #1d2229; stroke: #39424e; }
.rack-pp-name { fill: #9aa7b4; font-size: 15px; font-family: var(--font-mono, monospace); }
/* The panel's name sits in its top-left corner, above the port numbers, so a long name can't run under the ports */
.rack-pp-name { fill: #9aa7b4; font-size: 12px; font-family: var(--font-mono, monospace); }
.rack-pp-num { fill: #7d8a97; font-size: 10px; }
.rack-pp-label { fill: #c9d3dc; font-size: 9px; }
.rack-pp-jack { fill: #0c0f13; stroke: #4a5560; stroke-width: 1.5; }