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

Replace display selection dropdowns with visual display picker lightbox

Browse Source 
Remove the Displays tab and replace <select> dropdowns in stream and
template test modals with a lightbox overlay showing the spatial display
layout. Clicking a display selects it. Uses percentage-based positioning
so the layout always fits its container.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-11 12:36:21 +03:00
parent ebd6cc7d7d
commit c8ebb60f99
5 changed files with 232 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,7 +35,7 @@
<div class="tabs">
<div class="tab-bar">
<button class="tab-btn active" data-tab="devices" onclick="switchTab('devices')"><span data-i18n="devices.title">💡 Devices</span></button>
<button class="tab-btn" data-tab="displays" onclick="switchTab('displays')"><span data-i18n="displays.layout">🖥️ Displays</span></button>
<button class="tab-btn" data-tab="streams" onclick="switchTab('streams')"><span data-i18n="streams.title">📺 Picture Streams</span></button>
<button class="tab-btn" data-tab="templates" onclick="switchTab('templates')"><span data-i18n="templates.title">🎯 Capture Templates</span></button>
<button class="tab-btn" data-tab="pp-templates" onclick="switchTab('pp-templates')"><span data-i18n="postprocessing.title">🎨 Processing Templates</span></button>
@@ -55,14 +55,6 @@
</div>
</div>
<div class="tab-panel" id="tab-displays">
<div class="display-layout-preview">
<div id="display-layout-canvas" class="display-layout-canvas">
<div class="loading-spinner"></div>
</div>
</div>
<div id="displays-list" style="display: none;"></div>
</div>
<div class="tab-panel" id="tab-streams">
<p class="section-tip">
@@ -451,10 +443,11 @@
</div>
<div class="modal-body">
<div class="form-group">
<label for="test-template-display" data-i18n="templates.test.display">Display:</label>
<select id="test-template-display">
<option value="" data-i18n="templates.test.display.select">Select display...</option>
</select>
<label data-i18n="templates.test.display">Display:</label>
<input type="hidden" id="test-template-display" value="">
<button type="button" class="btn btn-display-picker" id="test-display-picker-btn" onclick="openDisplayPicker(onTestDisplaySelected)">
<span id="test-display-picker-label" data-i18n="displays.picker.select">Select display...</span>
</button>
</div>
<div class="form-group">
@@ -517,8 +510,11 @@
<!-- Raw stream fields -->
<div id="stream-raw-fields">
<div class="form-group">
<label for="stream-display-index" data-i18n="streams.display">Display:</label>
<select id="stream-display-index"></select>
<label data-i18n="streams.display">Display:</label>
<input type="hidden" id="stream-display-index" value="">
<button type="button" class="btn btn-display-picker" id="stream-display-picker-btn" onclick="openDisplayPicker(onStreamDisplaySelected)">
<span id="stream-display-picker-label" data-i18n="displays.picker.select">Select display...</span>
</button>
</div>
<div class="form-group">
<label for="stream-capture-template" data-i18n="streams.capture_template">Capture Template:</label>
@@ -627,6 +623,17 @@
</div>
</div>
<!-- Display Picker Lightbox -->
<div id="display-picker-lightbox" class="lightbox" onclick="closeDisplayPicker(event)">
<button class="lightbox-close" onclick="closeDisplayPicker()" title="Close">&#x2715;</button>
<div class="lightbox-content display-picker-content">
<h3 class="display-picker-title" data-i18n="displays.picker.title">Select a Display</h3>
<div id="display-picker-canvas" class="display-picker-canvas">
<div class="loading-spinner"></div>
</div>
</div>
</div>
<script src="/static/app.js"></script>
<script>
// Initialize theme
@@ -682,7 +689,6 @@
// Clear the UI
document.getElementById('devices-list').innerHTML = `<div class="loading">${t('auth.please_login')} devices</div>`;
document.getElementById('displays-list').innerHTML = `<div class="loading">${t('auth.please_login')} displays</div>`;
}
// Initialize on load