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

UI optimization.

Browse Source
This commit is contained in:
Blaž Kristan 2021-12-03 14:26:26 +01:00
parent 2eef39d64a
commit 737151ba09
3 changed files with 37 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
wled00/data/index.css
View File

@ -523,18 +523,18 @@ img {
border-radius: 16px; border-radius: 16px;
pointer-events: none; pointer-events: none;
z-index: -1; z-index: -1;
/*
--bg: var(--c-f); --bg: var(--c-f);
*/
} }
/*
#rwrap .sliderdisplay, #rwrap .sliderdisplay,
#gwrap .sliderdisplay, #gwrap .sliderdisplay,
#bwrap .sliderdisplay, #bwrap .sliderdisplay,
#wwrap .sliderdisplay, #wwrap .sliderdisplay,
#vwrap .sliderdisplay, #vwrap .sliderdisplay,
#kwrap .sliderdisplay, #kwrap .sliderdisplay,
#wbal .sliderdisplay { #wbal .sliderdisplay,
*/
#Colors .sliderdisplay {
height: 28px; height: 28px;
top: 0; bottom: 0; top: 0; bottom: 0;
left: 0; right: 0; left: 0; right: 0;
@ -544,9 +544,9 @@ img {
#gwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #0f0); } #gwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #0f0); }
#bwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #00f); } #bwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #00f); }
#wwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #fff); } #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); } #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 { .sliderbubble {
width: 24px; width: 24px;
@ -580,14 +580,16 @@ input[type=range] {
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
} }
/*
#rwrap input[type=range], #rwrap input[type=range],
#gwrap input[type=range], #gwrap input[type=range],
#bwrap input[type=range], #bwrap input[type=range],
#wwrap input[type=range], #wwrap input[type=range],
#vwrap input[type=range], #vwrap input[type=range],
#kwrap input[type=range], #kwrap input[type=range],
#wbal input[type=range] { #wbal input[type=range],
*/
#Colors input[type=range] {
width: 252px; width: 252px;
margin: 0; margin: 0;
} }
@ -623,28 +625,34 @@ input[type=range]::-moz-range-thumb {
background: var(--c-f); background: var(--c-f);
transform: translateY(5px); transform: translateY(5px);
} }
/*
#rwrap input[type=range]::-webkit-slider-thumb, #rwrap input[type=range]::-webkit-slider-thumb,
#gwrap input[type=range]::-webkit-slider-thumb, #gwrap input[type=range]::-webkit-slider-thumb,
#bwrap input[type=range]::-webkit-slider-thumb, #bwrap input[type=range]::-webkit-slider-thumb,
#wwrap input[type=range]::-webkit-slider-thumb, #wwrap input[type=range]::-webkit-slider-thumb,
#vwrap input[type=range]::-webkit-slider-thumb, #vwrap input[type=range]::-webkit-slider-thumb,
#kwrap 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; height: 18px;
width: 18px; width: 18px;
border: 2px solid #000; border: 2px solid #000;
margin-top: 5px; margin-top: 5px;
} }
/*
#rwrap input[type=range]::-moz-range-thumb, #rwrap input[type=range]::-moz-range-thumb,
#gwrap input[type=range]::-moz-range-thumb, #gwrap input[type=range]::-moz-range-thumb,
#bwrap input[type=range]::-moz-range-thumb, #bwrap input[type=range]::-moz-range-thumb,
#wwrap input[type=range]::-moz-range-thumb, #wwrap input[type=range]::-moz-range-thumb,
#vwrap input[type=range]::-moz-range-thumb, #vwrap input[type=range]::-moz-range-thumb,
#kwrap 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); border: 2px solid var(--c-1);
} }
#wwrap, #wbal { #kwrap, #wwrap, #wbal {
display: none; display: none;
} }
@ -653,13 +661,16 @@ input[type=range]::-moz-range-thumb {
width: 230px; width: 230px;
position: relative; position: relative;
} }
/*
#rwrap .sliderwrap, #rwrap .sliderwrap,
#gwrap .sliderwrap, #gwrap .sliderwrap,
#bwrap .sliderwrap, #bwrap .sliderwrap,
#wwrap .sliderwrap, #wwrap .sliderwrap,
#vwrap .sliderwrap, #vwrap .sliderwrap,
#kwrap .sliderwrap, #kwrap .sliderwrap,
#wbal .sliderwrap { #wbal .sliderwrap,
*/
#Colors .sliderwrap {
width: 260px; width: 260px;
margin: 10px 0 0; margin: 10px 0 0;
} }

9
wled00/data/index.htm
View File

@ -9,6 +9,8 @@
<title>WLED</title> <title>WLED</title>
<script>function feedback(){}</script> <script>function feedback(){}</script>
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<script src="iro.js"></script>
<script src="rangetouch.js"></script>
</head> </head>
<body onload="onLoad()"> <body onload="onLoad()">
@ -54,8 +56,9 @@
</div><br> </div><br>
</div> </div>
<div id="kwrap"> <div id="kwrap">
<p class="labels hd">White balance</p> <p class="labels hd">White from K</p>
<div class="sliderwrap il"> <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" /> <input id="sliderK" 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>
@ -88,13 +91,13 @@
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
</div> </div>
<!--div id="wbal"> <div id="wbal">
<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" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
</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>
<div class="qcs" onclick="pC('#ffa000');" title="Orange" style="background-color:#ffa000;"></div> <div class="qcs" onclick="pC('#ffa000');" title="Orange" style="background-color:#ffa000;"></div>

19
wled00/data/index.js
View File

@ -602,7 +602,7 @@ function parseInfo() {
pmt = li.fs.pmt; pmt = li.fs.pmt;
cct = li.leds.cct; cct = li.leds.cct;
} }
/*
function loadInfo(callback=null) function loadInfo(callback=null)
{ {
var url = (loc?`http://${locip}`:'') + '/json/info'; var url = (loc?`http://${locip}`:'') + '/json/info';
@ -636,7 +636,7 @@ function loadInfo(callback=null)
updateUI(); updateUI();
}); });
} }
*/
function populateInfo(i) function populateInfo(i)
{ {
var cn=""; var cn="";
@ -1213,7 +1213,7 @@ function readState(s,command=false)
if (isRgbw) whites[e] = parseInt(w); if (isRgbw) whites[e] = parseInt(w);
} }
selectSlot(csel); selectSlot(csel);
gId('sliderW').value = whites[csel]; //gId('sliderW').value = whites[csel];
if (i.cct && i.cct>=0) gId("sliderA").value = i.cct; if (i.cct && i.cct>=0) gId("sliderA").value = i.cct;
gId('sliderSpeed').value = i.sx; gId('sliderSpeed').value = i.sx;
@ -1982,14 +1982,11 @@ function delP(i) {
function selectSlot(b) function selectSlot(b)
{ {
csel = b;
var cd = gId('csl').children; var cd = gId('csl').children;
for (let i = 0; i < cd.length; i++) { for (let i = 0; i < cd.length; i++) cd[i].classList.remove('xxs-w');
cd[i].classList.remove('xxs-w'); cd[b].classList.add('xxs-w');
} cpick.color.set(cd[b].style.backgroundColor);
cd[csel].classList.add('xxs-w'); gId('sliderW').value = whites[b];
cpick.color.set(cd[csel].style.backgroundColor);
gId('sliderW').value = whites[csel];
updatePSliders(); updatePSliders();
} }
@ -2030,7 +2027,7 @@ function updatePSliders() {
var c = iro.Color.hsvToRgb(hsv); var c = iro.Color.hsvToRgb(hsv);
var cs = 'rgb('+c.r+','+c.g+','+c.b+')'; var cs = 'rgb('+c.r+','+c.g+','+c.b+')';
//v.parentNode.getElementsByClassName('sliderdisplay')[0].style.setProperty('--bg',cs); //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); //updateTrail(v);
//update Kelvin slider //update Kelvin slider