diff --git a/static/faceplates.js b/static/faceplates.js index 8529031..f2cab7c 100644 --- a/static/faceplates.js +++ b/static/faceplates.js @@ -225,7 +225,21 @@ function fpQuadScreen(x, y, s) { `; } -const fpBrand = (x, y, text) => `${text}`; +// The model name printed under a UniFi screen: centred on the screen, first word bold and +// second word light ("USW Pro", "NVR Pro"), as on the real units. `bolt` adds the PoE mark. +function fpModel(cx, y, bold, light = '', { size = 7.5, bolt = false } = {}) { + const chars = bold.length + (light ? light.length + 1 : 0); + const boltW = bolt ? size * 1.3 : 0; + const textW = chars * size * 0.6; + const x = cx - boltW / 2; + const mark = bolt + ? ` + + ` + : ''; + return `${bold}${light + ? `${light}` : ''}${mark}`; +} // Two rows of jacks, odd numbers on top: how UniFi rack switches number ports function rj45Pairs(columns, rows) { @@ -270,7 +284,7 @@ const FACEPLATES = { - ${fpBrand(16, 94, 'Dream Machine Pro')} + ${fpModel(43, 94, 'UDM', 'Pro')} @@ -305,7 +319,7 @@ const FACEPLATES = { ${n}`; return `${fpVents(spans, 8, 4)}${fpVents(spans, 216, 4)} - ${fpQuadScreen(14, 33, 62)}${fpBrand(26, 112, 'NVR Pro')} + ${fpQuadScreen(14, 33, 62)}${fpModel(45, 111, 'NVR', 'Pro')} ${[97, 384, 669].map((x, i) => bay(x, 27, i + 1)).join('')} ${[12, 299, 585, 871].map((x, i) => bay(x, 125, i + 4)).join('')} @@ -328,7 +342,7 @@ const FACEPLATES = { ], decor() { return `${fpVents([[98, 298], [304, 504], [512, 710], [717, 917], [923, 1122]], 3)} - ${fpQuadScreen(15, 23, 62)}${fpBrand(17, 99, 'USW Pro')} + ${fpQuadScreen(15, 23, 62)}${fpModel(46, 99, 'USW', 'Pro', { bolt: true })} @@ -350,7 +364,7 @@ const FACEPLATES = { const dividers = [876.4, 925.6, 975.6, 1025] .map(x => ``).join(''); return `${fpVents([[91, 280], [287, 476], [482, 671], [678, 867], [874, 1062]], 7)} - ${fpQuadScreen(12, 25, 58)}${fpBrand(28, 96, 'USW')} + ${fpQuadScreen(12, 25, 58)}${fpModel(41, 96, 'USW')} ${dividers} ${fpReset(1078.6, 95)}`; @@ -425,7 +439,7 @@ const FACEPLATES = { `; return `${ear(0)}${ear(1126)} - ${fpQuadScreen(61, 132, 56)}${fpBrand(68, 199, 'USP PDU Pro')} + ${fpQuadScreen(61, 132, 56)}${fpModel(89, 199, 'USP', 'PDU Pro')} diff --git a/static/style.css b/static/style.css index fed6043..32eb5ac 100644 --- a/static/style.css +++ b/static/style.css @@ -1190,7 +1190,10 @@ tr.device-row.is-selected { background: var(--bg-tertiary); box-shadow: inset 3p .fp-screen { fill: #0c1020; stroke: #2a2c34; stroke-width: 1; } .fp-screen-ring{ fill: none; stroke: #3f7bd9; stroke-width: 2.2; } .fp-screen-dot { fill: #dfe8f8; } -.fp-brand { fill: #55565c; font: 600 7.5px Arial, Helvetica, sans-serif; } +.fp-brand { fill: #2e2f33; font: 700 7.5px Arial, Helvetica, sans-serif; } +.fp-brand-light{ font-weight: 400; fill: #55565c; } +.fp-brand-bolt-ring { fill: #2e2f33; } +.fp-brand-bolt { fill: #e4e4e6; } .fp-bay { fill: url(#fp-bay-face); stroke: #54555a; stroke-width: 1; } .fp-bay-edge { fill: #bdbdc1; } .fp-bay-led { fill: #3a3a3e; }