UI optimization.
This commit is contained in:
Blaž Kristan
parent
2eef39d64a
commit
737151ba09
@ -523,18 +523,18 @@ img {
|
||||
border-radius: 16px;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
/*
|
||||
--bg: var(--c-f);
|
||||
*/
|
||||
}
|
||||
|
||||
/*
|
||||
#rwrap .sliderdisplay,
|
||||
#gwrap .sliderdisplay,
|
||||
#bwrap .sliderdisplay,
|
||||
#wwrap .sliderdisplay,
|
||||
#vwrap .sliderdisplay,
|
||||
#kwrap .sliderdisplay,
|
||||
#wbal .sliderdisplay {
|
||||
#wbal .sliderdisplay,
|
||||
*/
|
||||
#Colors .sliderdisplay {
|
||||
height: 28px;
|
||||
top: 0; bottom: 0;
|
||||
left: 0; right: 0;
|
||||
@ -544,9 +544,9 @@ img {
|
||||
#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); }
|
||||
#vwrap .sliderdisplay { /*background: linear-gradient(90deg, #000 0%, #fff);*/ }
|
||||
/*#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); }
|
||||
#wbal .sliderdisplay { background: linear-gradient(90deg, #ff8f1f 0%, #fff 50%, #cbdbff); }
|
||||
|
||||
.sliderbubble {
|
||||
width: 24px;
|
||||
@ -580,14 +580,16 @@ input[type=range] {
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*
|
||||
#rwrap input[type=range],
|
||||
#gwrap input[type=range],
|
||||
#bwrap input[type=range],
|
||||
#wwrap input[type=range],
|
||||
#vwrap input[type=range],
|
||||
#kwrap input[type=range],
|
||||
#wbal input[type=range] {
|
||||
#wbal input[type=range],
|
||||
*/
|
||||
#Colors input[type=range] {
|
||||
width: 252px;
|
||||
margin: 0;
|
||||
}
|
||||
@ -623,28 +625,34 @@ input[type=range]::-moz-range-thumb {
|
||||
background: var(--c-f);
|
||||
transform: translateY(5px);
|
||||
}
|
||||
/*
|
||||
#rwrap input[type=range]::-webkit-slider-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 {
|
||||
#wbal input[type=range]::-webkit-slider-thumb,
|
||||
*/
|
||||
#Colors input[type=range]::-webkit-slider-thumb {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
border: 2px solid #000;
|
||||
margin-top: 5px;
|
||||
}
|
||||
/*
|
||||
#rwrap 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 {
|
||||
#wbal input[type=range]::-moz-range-thumb,
|
||||
*/
|
||||
#Colors input[type=range]::-moz-range-thumb {
|
||||
border: 2px solid var(--c-1);
|
||||
}
|
||||
#wwrap, #wbal {
|
||||
#kwrap, #wwrap, #wbal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -653,13 +661,16 @@ input[type=range]::-moz-range-thumb {
|
||||
width: 230px;
|
||||
position: relative;
|
||||
}
|
||||
/*
|
||||
#rwrap .sliderwrap,
|
||||
#gwrap .sliderwrap,
|
||||
#bwrap .sliderwrap,
|
||||
#wwrap .sliderwrap,
|
||||
#vwrap .sliderwrap,
|
||||
#kwrap .sliderwrap,
|
||||
#wbal .sliderwrap {
|
||||
#wbal .sliderwrap,
|
||||
*/
|
||||
#Colors .sliderwrap {
|
||||
width: 260px;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
|
||||
@ -9,6 +9,8 @@
|
||||
<title>WLED</title>
|
||||
<script>function feedback(){}</script>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<script src="iro.js"></script>
|
||||
<script src="rangetouch.js"></script>
|
||||
</head>
|
||||
<body onload="onLoad()">
|
||||
|
||||
@ -54,8 +56,9 @@
|
||||
</div><br>
|
||||
</div>
|
||||
<div id="kwrap">
|
||||
<p class="labels hd">White balance</p>
|
||||
<p class="labels hd">White from K</p>
|
||||
<div class="sliderwrap il">
|
||||
<!--input id="sliderK" class="noslide" oninput="fromK()" onchange="setBalance(Math.trunc((parseInt(this.value)-2400)/32))" max="10060" min="1900" type="range" value="5964" /-->
|
||||
<input id="sliderK" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
@ -88,13 +91,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>
|
||||
|
||||
@ -602,7 +602,7 @@ function parseInfo() {
|
||||
pmt = li.fs.pmt;
|
||||
cct = li.leds.cct;
|
||||
}
|
||||
|
||||
/*
|
||||
function loadInfo(callback=null)
|
||||
{
|
||||
var url = (loc?`http://${locip}`:'') + '/json/info';
|
||||
@ -636,7 +636,7 @@ function loadInfo(callback=null)
|
||||
updateUI();
|
||||
});
|
||||
}
|
||||
|
||||
*/
|
||||
function populateInfo(i)
|
||||
{
|
||||
var cn="";
|
||||
@ -1213,7 +1213,7 @@ function readState(s,command=false)
|
||||
if (isRgbw) whites[e] = parseInt(w);
|
||||
}
|
||||
selectSlot(csel);
|
||||
gId('sliderW').value = whites[csel];
|
||||
//gId('sliderW').value = whites[csel];
|
||||
if (i.cct && i.cct>=0) gId("sliderA").value = i.cct;
|
||||
|
||||
gId('sliderSpeed').value = i.sx;
|
||||
@ -1982,14 +1982,11 @@ function delP(i) {
|
||||
|
||||
function selectSlot(b)
|
||||
{
|
||||
csel = b;
|
||||
var cd = gId('csl').children;
|
||||
for (let i = 0; i < cd.length; i++) {
|
||||
cd[i].classList.remove('xxs-w');
|
||||
}
|
||||
cd[csel].classList.add('xxs-w');
|
||||
cpick.color.set(cd[csel].style.backgroundColor);
|
||||
gId('sliderW').value = whites[csel];
|
||||
for (let i = 0; i < cd.length; i++) cd[i].classList.remove('xxs-w');
|
||||
cd[b].classList.add('xxs-w');
|
||||
cpick.color.set(cd[b].style.backgroundColor);
|
||||
gId('sliderW').value = whites[b];
|
||||
updatePSliders();
|
||||
}
|
||||
|
||||
@ -2030,7 +2027,7 @@ function updatePSliders() {
|
||||
var c = iro.Color.hsvToRgb(hsv);
|
||||
var cs = 'rgb('+c.r+','+c.g+','+c.b+')';
|
||||
//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}))`;
|
||||
v.nextElementSibling.style.backgroundImage = `linear-gradient(90deg, #000 0%, ${cs})`;
|
||||
//updateTrail(v);
|
||||
|
||||
//update Kelvin slider
|
||||
|
||||
Loading…
Reference in New Issue
Block a user