jeans/WLED
jeans/WLED
1
0
Fork 0
mirror of https://github.com/wled/WLED.git synced 2025-04-25 15:27:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI fix.

Browse Source
This commit is contained in:
Blaz Kristan 2021-12-02 22:57:32 +01:00
parent 821f76bcd6
commit 2eef39d64a
3 changed files with 30 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
wled00/data/index.css
View File

@ -513,44 +513,41 @@ img {
.sliderdisplay {
content:'';
position: absolute;
/*
top: 13px; left: 8px; right: 8px;
height: 4px;
*/
/*
top: 12.5px; bottom: 12.5px;
left: 13px; right: 13px;
*/
background: var(--c-4);
border-radius: 16px;
pointer-events: none;
z-index: -1;
/*
--bg: var(--c-f);
*/
}
#rwrap .sliderdisplay { --bg: #f00; }
#gwrap .sliderdisplay { --bg: #0f0; }
#bwrap .sliderdisplay { --bg: #00f; }
#wbal .sliderdisplay, #kwrap .sliderdisplay {
background: linear-gradient(90deg, #ff8f1f 0%, #fff 50%, #cbdbff);
}
#rwrap .sliderdisplay,
#gwrap .sliderdisplay,
#bwrap .sliderdisplay,
#wwrap .sliderdisplay,
#vwrap .sliderdisplay,
#kwrap .sliderdisplay,
#wbal .sliderdisplay {
height: 28px;
top: 0; bottom: 0;
left: 0; right: 0;
/*border: 1px solid var(--c-b);*/
}
/*
#rwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #f00); }
#gwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #0f0); }
#bwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #00f); }
*/
#wwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #fff); }
/*
#wbal .sliderdisplay { background: linear-gradient(90deg, #ff8f1f 0%, #fff 50%, #d4e0ff); }
*/
#vwrap .sliderdisplay { /*background: linear-gradient(90deg, #000 0%, #fff);*/ }
#kwrap .sliderdisplay { background: linear-gradient(90deg, #ff8f1f 0%, #fff 50%, #cbdbff); }
#wbal .sliderdisplay { background: linear-gradient(90deg, #ff8f1f 0%, #fff 50%, #cbdbff); }
.sliderbubble {
width: 24px;
position: relative;
@ -583,16 +580,18 @@ input[type=range] {
background-color: transparent;
cursor: pointer;
}
/*
#rwrap input[type=range],
#gwrap input[type=range],
#bwrap input[type=range],
#wwrap input[type=range],
#wbal input[type=range] {
#vwrap input[type=range],
#kwrap input[type=range],
#wbal input[type=range] {
width: 252px;
margin: 0;
}
*/
input[type=range]:focus {
outline: none;
}
@ -628,6 +627,8 @@ input[type=range]::-moz-range-thumb {
#gwrap input[type=range]::-webkit-slider-thumb,
#bwrap input[type=range]::-webkit-slider-thumb,
#wwrap input[type=range]::-webkit-slider-thumb,
#vwrap input[type=range]::-webkit-slider-thumb,
#kwrap input[type=range]::-webkit-slider-thumb,
#wbal input[type=range]::-webkit-slider-thumb {
height: 18px;
width: 18px;
@ -638,6 +639,8 @@ input[type=range]::-moz-range-thumb {
#gwrap input[type=range]::-moz-range-thumb,
#bwrap input[type=range]::-moz-range-thumb,
#wwrap input[type=range]::-moz-range-thumb,
#vwrap input[type=range]::-moz-range-thumb,
#kwrap input[type=range]::-moz-range-thumb,
#wbal input[type=range]::-moz-range-thumb {
border: 2px solid var(--c-1);
}
@ -654,6 +657,8 @@ input[type=range]::-moz-range-thumb {
#gwrap .sliderwrap,
#bwrap .sliderwrap,
#wwrap .sliderwrap,
#vwrap .sliderwrap,
#kwrap .sliderwrap,
#wbal .sliderwrap {
width: 260px;
margin: 10px 0 0;

8
wled00/data/index.htm
View File

@ -46,13 +46,15 @@
<div class ="container">
<div id="Colors" class="tabcontent">
<div id="picker" class="noslide"></div>
<div id="vwrap" class="IL">
<div id="vwrap">
<p class="labels hd">Value</p>
<div class="sliderwrap il">
<input id="sliderV" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" />
<div class="sliderdisplay"></div>
</div><br>
</div>
<div id="kwrap">
<p class="labels hd">White balance</p>
<div class="sliderwrap il">
<input id="sliderK" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" />
<div class="sliderdisplay"></div>
@ -86,13 +88,13 @@
<div class="sliderdisplay"></div>
</div>
</div>
<div id="wbal">
<!--div id="wbal">
<p class="labels hd">White balance</p>
<div class="sliderwrap il">
<input id="sliderA" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
</div>
</div-->
<div id="qcs-w">
<div class="qcs" onclick="pC('#ff0000');" title="Red" style="background-color:#ff0000;"></div>
<div class="qcs" onclick="pC('#ffa000');" title="Orange" style="background-color:#ffa000;"></div>

13
wled00/data/index.js
View File

@ -1074,7 +1074,7 @@ function updateUI()
gId('wwrap').style.display = (isRgbw) ? "block":"none";
gId("wbal").style.display = (cct) ? "block":"none";
gId('kwrap').style.display = (lastinfo.leds.cct) ? "none":"block";
gId('kwrap').style.display = (cct) ? "none":"block";
updatePA();
updatePSliders();
@ -2029,8 +2029,9 @@ function updatePSliders() {
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.parentNode.getElementsByClassName('sliderdisplay')[0].style.setProperty('--bg',cs);
updateTrail(v);
//v.parentNode.getElementsByClassName('sliderdisplay')[0].style.setProperty('--bg',cs);
v.nextElementSibling.style.backgroundImage = `linear-gradient(90deg, #000 0%, rgb(${c.r},${c.g},${c.b}))`;
//updateTrail(v);
//update Kelvin slider
gId('sliderK').value = cpick.color.kelvin;
@ -2095,12 +2096,6 @@ function setBalance(b)
requestJson(obj);
}
function setBalance(b)
{
var obj = {"seg": {"cct": parseInt(b)}};
requestJson(obj);
}
var hc = 0;
setInterval(function(){if (!isInfo) return; hc+=18; if (hc>300) hc=0; if (hc>200)hc=306; if (hc==144) hc+=36; if (hc==108) hc+=18;
gId('heart').style.color = `hsl(${hc}, 100%, 50%)`;}, 910);