lba.gitea/WLED
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix

Browse Source 
Checkbox fixes added
This commit is contained in:
Alerson Jorge 2023-10-20 12:20:49 -03:00
parent a485451328
commit 14fc64f2f1
3 changed files with 1460 additions and 1465 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
wled00/data/index.htm
View File

@ -90,71 +90,62 @@
<div id="picker" class="noslide"></div> <div id="picker" class="noslide"></div>
<div id="hwrap" class="slider"> <div id="hwrap" class="slider">
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderH" class="noslide" oninput="fromH()" onchange="setColor(0)" max="359" min="0" type="range" value="0" step="any"> <input id="sliderH" tooltip="Hue" class="noslide" oninput="fromH()" onchange="setColor(0)" max="359" min="0" type="range" value="0" step="any">
<div class="sliderdisplay" style="background: linear-gradient(90deg, #f00 2%, #ff0 19%, #0f0 35%, #0ff 52%, #00f 68%, #f0f 85%, #f00)"></div> <div class="sliderdisplay" style="background: linear-gradient(90deg, #f00 2%, #ff0 19%, #0f0 35%, #0ff 52%, #00f 68%, #f0f 85%, #f00)"></div>
</div> </div>
<span class="tooltiptext">Hue</span>
</div> </div>
<div id="swrap" class="slider"> <div id="swrap" class="slider">
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderS" class="noslide" oninput="fromS()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any"> <input id="sliderS" tooltip="Saturation" class="noslide" oninput="fromS()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any">
<div class="sliderdisplay" style="background: linear-gradient(90deg, #aaa 0%, #f00)"></div> <div class="sliderdisplay" style="background: linear-gradient(90deg, #aaa 0%, #f00)"></div>
</div> </div>
<span class="tooltiptext">Saturation</span>
</div> </div>
<div id="vwrap" class="slider"> <div id="vwrap" class="slider">
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderV" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" /> <input id="sliderV" tooltip="Value / Brightness" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<span class="tooltiptext">Value/Brightness</span>
</div> </div>
<div id="kwrap" class="slider"> <div id="kwrap" class="slider">
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderK" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" /> <input id="sliderK" tooltip="Kelvin / Temperature" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<span class="tooltiptext">Kelvin/Temperature</span>
</div> </div>
<div id="rgbwrap"> <div id="rgbwrap">
<!--p class="labels hd">RGB color</p--> <!--p class="labels hd">RGB color</p-->
<div id="rwrap" class="slider"> <div id="rwrap" class="slider">
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderR" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" /> <input id="sliderR" tooltip="Red channel" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<span class="tooltiptext">Red channel</span>
</div> </div>
<div id="gwrap" class="slider"> <div id="gwrap" class="slider">
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderG" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" /> <input id="sliderG" tooltip="Green channel" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<span class="tooltiptext">Green channel</span>
</div> </div>
<div id="bwrap" class="slider"> <div id="bwrap" class="slider">
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderB" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" /> <input id="sliderB" tooltip="Blue channel" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<span class="tooltiptext">Blue channel</span>
</div> </div>
</div> </div>
<div id="wwrap" class="slider"> <div id="wwrap" class="slider">
<!--p class="labels hd">White channel</p--> <!--p class="labels hd">White channel</p-->
<div id="whibri" class="sliderwrap il"> <div id="whibri" class="sliderwrap il">
<input id="sliderW" class="noslide" oninput="fromW()" onchange="setColor(0)" max="255" min="0" type="range" value="128" /> <input id="sliderW" tooltip="White channel" class="noslide" oninput="fromW()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<span class="tooltiptext">White channel</span>
</div> </div>
<div id="wbal" class="slider"> <div id="wbal" class="slider">
<!--p class="labels hd">White balance</p--> <!--p class="labels hd">White balance</p-->
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderA" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" /> <input id="sliderA" tooltip="White balance" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<span class="tooltiptext">White balance</span>
</div> </div>
<div id="qcs-w"> <div id="qcs-w">
<div class="qcs" onclick="pC('#ff0000');" title="Red" style="background-color:#ff0000;"></div> <div class="qcs" onclick="pC('#ff0000');" title="Red" style="background-color:#ff0000;"></div>
@ -294,17 +285,17 @@
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
</div> </div>
<div id="fxopt" class="option fade"> <div id="fxopt" class="option fade">
<label id="opt0" class="check ochkl hide"><i class="icons">&#xe2b3;</i><span class="tooltiptext" id="optLabel0">Check 1</span> <label id="opt0" class="check ochkl hide"><i class="icons">&#xe2b3;</i>
<input id="checkO1" type="checkbox" onchange="setOption(1, this.checked)"> <input id="checkO1" type="checkbox" onchange="setOption(1, this.checked)">
<span class="checkmark"></span> <span class="checkmark" tooltip="Check 1"></span>
</label> </label>
<label id="opt1" class="check ochkl hide"><i class="icons">&#xe34b;</i><span class="tooltiptext" id="optLabel1">Check 2</span> <label id="opt1" class="check ochkl hide"><i class="icons">&#xe34b;</i>
<input id="checkO2" type="checkbox" onchange="setOption(2, this.checked)"> <input id="checkO2" type="checkbox" onchange="setOption(2, this.checked)">
<span class="checkmark"></span> <span class="checkmark" tooltip="Check 2"></span>
</label> </label>
<label id="opt2" class="check ochkl hide"><i class="icons">&#xe04c;</i><span class="tooltiptext" id="optLabel2">Check 3</span> <label id="opt2" class="check ochkl hide"><i class="icons">&#xe04c;</i>
<input id="checkO3" type="checkbox" onchange="setOption(3, this.checked)"> <input id="checkO3" type="checkbox" onchange="setOption(3, this.checked)">
<span class="checkmark"></span> <span class="checkmark" tooltip="Check 3"></span>
</label> </label>
</div> </div>
</div> </div>

23
wled00/data/index.js
View File

@ -1511,22 +1511,29 @@ function setEffectParameters(idx)
if ((!controlDefined && i < ((idx < 128) ? 2 : nSliders)) || (slOnOff.length > i && slOnOff[i] != "")) { if ((!controlDefined && i < ((idx < 128) ? 2 : nSliders)) || (slOnOff.length > i && slOnOff[i] != "")) {
const newText = slOnOff.length > i && slOnOff[i] != "!" ? slOnOff[i] : text; const newText = slOnOff.length > i && slOnOff[i] != "!" ? slOnOff[i] : text;
tooltip.setAttribute("tooltip", newText); tooltip.setAttribute("tooltip", newText);
slider.classList.remove('hide'); slider.classList.remove('hide');
} else { } else {
slider.classList.add('hide'); slider.classList.add('hide');
} }
}); });
if (slOnOff.length>5) { // up to 3 checkboxes if (slOnOff.length > 5) { // up to 3 checkboxes
gId('fxopt').classList.remove('fade'); gId('fxopt').classList.remove('fade');
for (let i = 0; i<3; i++) {
if (5+i<slOnOff.length && slOnOff[5+i]!=='') { let checks = d.querySelectorAll("#fxopt .check");
gId('opt'+i).classList.remove('hide');
gId('optLabel'+i).innerHTML = slOnOff[5+i]=="!" ? 'Option' : slOnOff[5+i].substr(0,16); checks.forEach(function(check, i){
} else const tooltip = check.querySelector('[tooltip]');
gId('opt'+i).classList.add('hide'); const text = tooltip.getAttribute("tooltip");
if (5 + i < slOnOff.length && slOnOff[5 + i] !== '') {
const newText = slOnOff[5 + i] == "!" ? text : slOnOff[5 + i].substr(0, 16);
tooltip.setAttribute("tooltip", newText);
check.classList.remove('hide');
} else {
check.classList.add('hide');
} }
});
} else { } else {
gId('fxopt').classList.add('fade'); gId('fxopt').classList.add('fade');
} }

2861
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff