Add OpenRGB per-zone LED control with separate/combined modes and zone preview

- Zone picker UI in device add/settings modals with per-zone checkbox selection
- Combined mode: pixels distributed sequentially across zones
- Separate mode: full effect resampled independently to each zone via linear interpolation
- Per-zone LED preview in target cards: one canvas strip per zone with hover overlay labels
- Zone badges on device cards enriched with actual LED counts from OpenRGB API
- Fix stale led_count by using device_led_count discovered at connect time

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-01 20:35:51 +03:00
parent aafcf83896
commit 52ee4bdeb6
19 changed files with 769 additions and 55 deletions

View File

@@ -56,6 +56,31 @@
<small class="input-hint" style="display:none" data-i18n="device.serial_port.hint">Select the COM port of the Adalight device</small>
<select id="device-serial-port" onfocus="onSerialPortFocus()"></select>
</div>
<div class="form-group" id="device-zone-group" style="display: none;">
<div class="label-row">
<label data-i18n="device.openrgb.zone">Zones:</label>
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
</div>
<small class="input-hint" style="display:none" data-i18n="device.openrgb.zone.hint">Select which LED zones to control (leave all unchecked for all zones)</small>
<div id="device-zone-list" class="zone-checkbox-list"></div>
</div>
<div class="form-group" id="device-zone-mode-group" style="display: none;">
<div class="label-row">
<label data-i18n="device.openrgb.mode">Zone mode:</label>
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
</div>
<small class="input-hint" style="display:none" data-i18n="device.openrgb.mode.hint">Combined treats all zones as one continuous LED strip. Separate renders each zone independently with the full effect.</small>
<div class="zone-mode-radios">
<label class="zone-mode-option">
<input type="radio" name="device-zone-mode" value="combined" checked>
<span data-i18n="device.openrgb.mode.combined">Combined strip</span>
</label>
<label class="zone-mode-option">
<input type="radio" name="device-zone-mode" value="separate">
<span data-i18n="device.openrgb.mode.separate">Independent zones</span>
</label>
</div>
</div>
<div class="form-group" id="device-led-count-group" style="display: none;">
<div class="label-row">
<label for="device-led-count" data-i18n="device.led_count">LED Count:</label>