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

HSV sliders option instead of color picker.

Browse Source
This commit is contained in:
Blaz Kristan 2022-04-26 22:16:08 +02:00
parent a053e81797
commit d4ef26e0f3
5 changed files with 1421 additions and 1371 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
wled00/data/index.css
View File

@ -362,6 +362,12 @@ button {
#fx {
height: calc(100% - 121px);
overflow-y: scroll;
padding-left: 6px; /* compensate scroll bar */
}
#sliders {
width: 310px;
margin: 0 auto;
}
#sliders .labels {

14
wled00/data/index.htm
View File

@ -88,6 +88,20 @@
<div class ="container">
<div id="Colors" class="tabcontent">
<div id="picker" class="noslide"></div>
<div id="hwrap">
<!--p class="labels hd">Hue</p-->
<div class="sliderwrap il">
<input id="sliderH" 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><br>
</div>
<div id="swrap">
<!--p class="labels hd">Saturation</p-->
<div class="sliderwrap il">
<input id="sliderS" 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><br>
</div>
<div id="vwrap">
<!--p class="labels hd">Value</p-->
<div class="sliderwrap il">

39
wled00/data/index.js
View File

@ -1038,8 +1038,10 @@ function updateUI()
var ccfg = cfg.comp.colors;
gId('hexw').style.display = ccfg.hex ? "block":"none"; // HEX input
gId('picker').style.display = (hasRGB && ccfg.picker) ? "block":"none"; // color picker wheel
gId('vwrap').style.display = (hasRGB && ccfg.picker) ? "block":"none"; // brightness (value) slider
gId('kwrap').style.display = (hasRGB && !hasCCT && ccfg.picker) ? "block":"none"; // Kelvin slider
gId('hwrap').style.display = (hasRGB && !ccfg.picker) ? "block":"none"; // color picker wheel
gId('swrap').style.display = (hasRGB && !ccfg.picker) ? "block":"none"; // color picker wheel
gId('vwrap').style.display = (hasRGB /*&& ccfg.picker*/) ? "block":"none"; // brightness (value) slider
gId('kwrap').style.display = (hasRGB && !hasCCT /*&& ccfg.picker*/) ? "block":"none"; // Kelvin slider
gId('rgbwrap').style.display = (hasRGB && ccfg.rgb) ? "block":"none"; // RGB sliders
gId('qcs-w').style.display = (hasRGB && ccfg.quick) ? "block":"none"; // quick selection
//gId('palw').style.display = hasRGB ? "block":"none"; // palettes
@ -2110,14 +2112,21 @@ function updatePSliders() {
gId('hexc').value = str;
gId('hexcnf').style.backgroundColor = "var(--c-3)";
// update value slider
var v = gId('sliderV');
v.value = cpick.color.value;
// background color as if color had full value
var hsv = {"h":cpick.color.hue,"s":cpick.color.saturation,"v":100};
var c = iro.Color.hsvToRgb(hsv);
var cs = 'rgb('+c.r+','+c.g+','+c.b+')';
v.nextElementSibling.style.backgroundImage = `linear-gradient(90deg, #000 -15%, ${cs})`;
// update HSV sliders
var c;
let h = cpick.color.hue;
let s = cpick.color.saturation;
let v = cpick.color.value;
gId("sliderH").value = h;
gId("sliderS").value = s;
gId('sliderV').value = v;
c = iro.Color.hsvToRgb({"h":h,"s":100,"v":100});
gId("sliderS").nextElementSibling.style.backgroundImage = 'linear-gradient(90deg, #aaa -15%, rgb('+c.r+','+c.g+','+c.b+'))';
c = iro.Color.hsvToRgb({"h":h,"s":s,"v":100});
gId('sliderV').nextElementSibling.style.backgroundImage = 'linear-gradient(90deg, #000 -15%, rgb('+c.r+','+c.g+','+c.b+'))';
// update Kelvin slider
gId('sliderK').value = cpick.color.kelvin;
@ -2154,6 +2163,16 @@ function setPicker(rgb) {
updateTrail(gId('sliderB'));
}
function fromH()
{
cpick.color.setChannel('hsv', 'h', gId('sliderH').value);
}
function fromS()
{
cpick.color.setChannel('hsv', 's', gId('sliderS').value);
}
function fromV()
{
cpick.color.setChannel('hsv', 'v', gId('sliderV').value);

2731
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff

2
wled00/wled.h
View File

@ -8,7 +8,7 @@
*/
// version code in format yymmddb (b = daily build)
#define VERSION 2204241
#define VERSION 2204261
//uncomment this if you have a "my_config.h" file you'd like to use
//#define WLED_USE_MY_CONFIG