alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add visual display layout and enhanced display information in Web UI
Some checks failed
Validate / validate (push) Failing after 14s
Details

Browse Source 
- Visual display layout visualization showing all monitors in their relative positions
- Displays are scaled proportionally and positioned based on actual coordinates
- Primary displays marked with star icon and green borders
- Secondary displays with gray borders
- Hover effects on display visualization with detailed tooltips
- Color-coded legend explaining primary/secondary displays
- Enhanced display cards with primary/secondary badges
- Added display index to display cards for clarity
- Added lightbulb emoji favicon for browser tab

This makes it much easier to understand multi-monitor setups and identify
which physical monitor corresponds to which display index when configuring
WLED devices.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-06 17:03:20 +03:00
parent d471a40234
commit 6a0cc12ca1
3 changed files with 230 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
server/src/wled_controller/static/index.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WLED Screen Controller</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>💡</text></svg>">
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
@@ -30,6 +31,21 @@
<section class="displays-section">
<h2>Available Displays</h2>
<!-- Visual Layout Preview -->
<div class="display-layout-preview">
<h3>Display Layout</h3>
<div id="display-layout-canvas" class="display-layout-canvas">
<div class="loading">Loading layout...</div>
</div>
<div class="layout-legend">
<span class="legend-item"><span class="legend-dot primary"></span> Primary Display</span>
<span class="legend-item"><span class="legend-dot secondary"></span> Secondary Display</span>
</div>
</div>
<!-- Display Cards -->
<h3 style="margin-top: 30px;">Display Information</h3>
<div id="displays-list" class="displays-grid">
<div class="loading">Loading displays...</div>
</div>