mirror
/
WLED
kopia lustrzana https://github.com/Aircoookie/WLED
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

UI optimization.

pull/2737/head
Blaž Kristan 2021-12-03 14:26:26 +01:00
rodzic 2eef39d64a
commit 737151ba09
3 zmienionych plików z 37 dodań i 26 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

35
wled00/data/index.css
Wyświetl plik

@ -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
wled00/data/index.htm
Wyświetl plik

@ -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>

19
wled00/data/index.js
Wyświetl plik

@ -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