Draw realistic front panels for every device model #13

Merged

jared merged 1 commits from device-faceplates into main 2026-11-05 11:16:28 -05:00

Conversation 0 Commits 1 Files Changed 7

+750 -117

jared commented 2026-11-05 11:12:07 -05:00

Owner

Copy Link

Copy Source

Device pages now draw each device as it really looks, using SVG traced from reference images, in place of generic port blocks.

Closes #6, closes #9, closes #10, closes #11. #7 and #8 stay open for the items below.

What changed

• New faceplates: Dream Machine Pro, USW Pro 24 PoE, USW Aggregation, USW Flex, USW Flex Mini, USP PDU Pro and UPS 2U Pro, in static/faceplates.js. A new model only needs an entry there.
• LEDs: port LEDs use the colors from each model's quick start guide where one was available. They blink when a port has traffic, unless the browser asks for reduced motion.
• Link state: ports with link show a cable or module, and empty ones show the jack or cage.
• Outlets: the PDU and UPS show on/off state and auto power-cycle. An outlet reading 0 W isn't shown as off.
• UPS: front and rear are both drawn, because its outlets are on the back. Its page now shows a panel even though it reports no ports.
• Readout: jacks are too small for text, so a line under the panel names the hovered or selected port, including its neighbor.
• Narrow screens: panels crop or scroll within their frame so ports stay tappable.

Bugs fixed

• The aggregation switch was numbered across the rows, but the hardware has odd ports over even, so clicking a cage could open the wrong port.
• The USW Flex drew an SFP cage it doesn't have.
• The PDU drew one network port and no outlets.

SWITCH_LAYOUTS is removed. Models without a faceplate use plain blocks.

Testing

• 211 tests pass; flake8 is clean; ESLint reports 0 errors.
• Checked in a browser with sample data at desktop and phone widths: click, keyboard and #port-N selection, no sideways page scroll, and a hostile neighbor name renders as plain text.

Not tested: live data. These drawings have only run on sample data, so check each device page after deploy, especially the UPS outlet tiles.

Known limits

• Layouts for the USW Pro 24 PoE, USW Aggregation and PDU come from reference images. The first two take their LED colors from the non-PoE USW Pro 24 guide.
• USP Strip has no faceplate because no reference image was found. The AT&T modem keeps its existing panel.
• #7: why one check saw 25 ports instead of 26 is still unexplained.
• #8: bonded ports aren't grouped yet.
• RPDU ports 22-23 and the UPS surge and MGMT jacks are drawn but have no data.

🤖 Generated with Claude Code

Device pages now draw each device as it really looks, using SVG traced from reference images, in place of generic port blocks. Closes #6, closes #9, closes #10, closes #11. #7 and #8 stay open for the items below. ## What changed - **New faceplates:** Dream Machine Pro, USW Pro 24 PoE, USW Aggregation, USW Flex, USW Flex Mini, USP PDU Pro and UPS 2U Pro, in `static/faceplates.js`. A new model only needs an entry there. - **LEDs:** port LEDs use the colors from each model's quick start guide where one was available. They blink when a port has traffic, unless the browser asks for reduced motion. - **Link state:** ports with link show a cable or module, and empty ones show the jack or cage. - **Outlets:** the PDU and UPS show on/off state and auto power-cycle. An outlet reading 0 W isn't shown as off. - **UPS:** front and rear are both drawn, because its outlets are on the back. Its page now shows a panel even though it reports no ports. - **Readout:** jacks are too small for text, so a line under the panel names the hovered or selected port, including its neighbor. - **Narrow screens:** panels crop or scroll within their frame so ports stay tappable. ## Bugs fixed - The aggregation switch was numbered across the rows, but the hardware has odd ports over even, so clicking a cage could open the wrong port. - The USW Flex drew an SFP cage it doesn't have. - The PDU drew one network port and no outlets. `SWITCH_LAYOUTS` is removed. Models without a faceplate use plain blocks. ## Testing - 211 tests pass; flake8 is clean; ESLint reports 0 errors. - Checked in a browser with sample data at desktop and phone widths: click, keyboard and `#port-N` selection, no sideways page scroll, and a hostile neighbor name renders as plain text. **Not tested:** live data. These drawings have only run on sample data, so check each device page after deploy, especially the UPS outlet tiles. ## Known limits - Layouts for the USW Pro 24 PoE, USW Aggregation and PDU come from reference images. The first two take their LED colors from the non-PoE USW Pro 24 guide. - USP Strip has no faceplate because no reference image was found. The AT&T modem keeps its existing panel. - #7: why one check saw 25 ports instead of 26 is still unexplained. - #8: bonded ports aren't grouped yet. - RPDU ports 22-23 and the UPS surge and MGMT jacks are drawn but have no data. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

jared added 1 commit 2026-11-05 11:12:07 -05:00

Draw realistic front panels for every device model ... 051e70b82b

Replace the port blocks on device pages with SVG faceplates traced from
reference images: Dream Machine Pro, USW Pro 24 PoE, USW Aggregation,
USW Flex, USW Flex Mini, USP PDU Pro and UPS 2U Pro. Port LEDs use each
model's documented colors, and ports show a cable or module when up.

Remove SWITCH_LAYOUTS, which had wrong data: the aggregation switch was
numbered across the rows instead of odd over even, and the USW Flex had
an SFP cage it doesn't have. Models without a faceplate use plain blocks.

Show PDU and UPS outlets with on/off state and auto power-cycle, and let
the UPS page show its panel even though it reports no ports.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

jared merged commit 7c917969d8 into main 2026-11-05 11:16:28 -05:00

jared deleted branch device-faceplates 2026-11-05 11:16:39 -05:00

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

No items

No labels

Milestone

No items

No Milestone

Projects

Clear projects

No projects

Assignees

Clear assignees

cole (Cole Keller) jared (Jared Vititoe) nathan (Nathan Vititoe)

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: LotusGuild/gandalf#13