UI: show color controls based on segment light capabilities (#2567)

* Dynamic hiding of unused color controls in UI

(e.g. a PWM white bus with no auto white mode will not display the color wheel or palette list)

* Store segment capabilities

Don't use palettes if no RGB supported
Make it safe to update busses using `/json/cfg`
This commit is contained in:
Christian Schwinne
2022-03-05 01:05:26 +01:00
committed by GitHub
parent 85b1c309d1
commit 9c864c9759
7 changed files with 2351 additions and 2301 deletions

View File

@@ -44,13 +44,15 @@
<div class ="container">
<div id="Colors" class="tabcontent">
<div id="picker" class="noslide"></div>
<div id="vwrap">
<div class="sliderwrap il" id="vwrap">
<input id="sliderV" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="128" step="any" />
<div class="sliderdisplay"></div>
</div><br>
</div>
<div id="pwrap">
<div id="picker" class="noslide"></div>
<div id="vwrap">
<div class="sliderwrap il" id="vwrap">
<input id="sliderV" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="128" step="any" />
<div class="sliderdisplay"></div>
</div><br>
</div>
</div>
<div id="kwrap">
<div class="sliderwrap il">
<input id="sliderK" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" />
@@ -108,32 +110,26 @@
<input id="hexc" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" />
<button id="hexcnf" class="xxs btn" onclick="fromHex();"><i class="icons no-margin">&#xe390;</i></button>
</div>
<p class="labels">
<i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i>
Color palette
</p>
<div class="il">
<div id="pallist" class="list">
<div class="lstI" data-id="0">
<label class="check schkl">
&nbsp;
<input type="radio" value="${palettes[i].id}" name="palette" onChange="setPalette()">
<span class="radiomark schk"></span>
</label>
<div class="lstIcontent">
<span class="lstIname">
Default
</span>
<div id="palwrap">
<p class="labels">
<i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i>
Color palette
</p>
<div class="il">
<div id="pallist" class="list">
<div class="lstI" data-id="0">
<label class="check schkl">
&nbsp;
<input type="radio" value="${palettes[i].id}" name="palette" onChange="setPalette()">
<span class="radiomark schk"></span>
</label>
<div class="lstIcontent">
<span class="lstIname">
Default
</span>
</div>
</div>
</div>
<div class="lstI">
<div class="lstIcontent">
<span class="lstIname">
Loading...
</span>
</div>
</div>
</div>
</div>
</div>