JS/CSS optimisations
This commit is contained in:
Blaz Kristan
parent
4d10c9de95
commit
61a01cb163
@ -565,7 +565,7 @@ output.sliderbubbleshow {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
#rgbwrap, #kwrap, #wwrap, #wbal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -623,9 +623,6 @@ input[type=range]::-moz-range-thumb {
|
||||
#Colors input[type=range]::-moz-range-thumb {
|
||||
border: 2px solid var(--c-1);
|
||||
}
|
||||
#kwrap, #wwrap, #wbal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sliderwrap {
|
||||
height: 30px;
|
||||
@ -651,10 +648,6 @@ input[type=range]::-moz-range-thumb {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
#rgbwrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px;
|
||||
margin: 10px 4px;
|
||||
@ -673,11 +666,11 @@ input[type=range]::-moz-range-thumb {
|
||||
}
|
||||
.btn:hover {
|
||||
border: 1px solid var(--c-4);
|
||||
background-color: var(--c-4);
|
||||
background-color: var(--c-5);
|
||||
}
|
||||
.btn {
|
||||
border: 1px solid var(--c-3);
|
||||
background-color: var(--c-3);
|
||||
border: 1px solid var(--c-1);
|
||||
background-color: var(--c-2);
|
||||
}
|
||||
.btn-s {
|
||||
width: 100%;
|
||||
@ -728,17 +721,15 @@ input[type=range]::-moz-range-thumb {
|
||||
margin-top: 5px;
|
||||
display: none;
|
||||
}
|
||||
.sel {
|
||||
margin: 5px 0 10px;
|
||||
}
|
||||
.sel-p, .sel-pl, .sel-ple {
|
||||
|
||||
select/*, .sel-p, .sel-pl, .sel-ple*/ {
|
||||
padding: 4px;
|
||||
margin: 0;
|
||||
font-size: 19px;
|
||||
background-color: var(--c-3);
|
||||
color: var(--c-d);
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--c-3);
|
||||
border: 1px solid var(--c-2);
|
||||
border-radius: 5px;
|
||||
transition-duration: 0.5s;
|
||||
-webkit-backface-visibility: hidden;
|
||||
@ -753,7 +744,8 @@ input[type=range]::-moz-range-thumb {
|
||||
width: 42px;
|
||||
}
|
||||
.sel-p {
|
||||
width: 4.5em;
|
||||
margin: 5px 0 10px;
|
||||
width: 5em;
|
||||
}
|
||||
.sel-pl {
|
||||
width: 100%;
|
||||
@ -770,7 +762,7 @@ option {
|
||||
input[type=number], input[type=text] {
|
||||
background: var(--c-3);
|
||||
color: var(--c-f);
|
||||
border: 0px solid var(--c-f);
|
||||
border: 1px solid var(--c-2);
|
||||
border-radius: 5px;
|
||||
padding: 8px;
|
||||
margin: 6px 6px 6px 0;
|
||||
@ -907,17 +899,16 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
}
|
||||
|
||||
.check, .radio {
|
||||
display: inline-block;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-bottom: 32px;
|
||||
margin-bottom: 14px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.schkl {
|
||||
padding: 2px 5px 0px 35px;
|
||||
margin: 0 0 0 2px;
|
||||
padding: 2px 0 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.revchkl {
|
||||
@ -936,6 +927,8 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
|
||||
.checkmark, .radiomark {
|
||||
position: absolute;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@ -944,14 +937,13 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
}
|
||||
|
||||
.radiomark {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
top: 1px;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@ -959,24 +951,16 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
.check:hover input ~ .checkmark {
|
||||
background-color: var(--c-4);
|
||||
}
|
||||
/*
|
||||
.check input:checked ~ .checkmark {
|
||||
background-color: var(--c-6);
|
||||
}
|
||||
*/
|
||||
|
||||
.checkmark:after, .radiomark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.check input:checked ~ .checkmark:after, .radio input:checked ~ .radiomark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.check .checkmark:after {
|
||||
left: 9px;
|
||||
top: 5px;
|
||||
top: 4px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid var(--c-f);
|
||||
@ -987,11 +971,11 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
}
|
||||
|
||||
.radio .radiomark:after {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -6px;
|
||||
margin: -7px;
|
||||
border-radius: 50%;
|
||||
background: var(--c-f);
|
||||
}
|
||||
@ -1035,10 +1019,6 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
#pcont .pres:hover {
|
||||
background-color: var(--c-3);
|
||||
}
|
||||
|
||||
.list {
|
||||
position: relative;
|
||||
width: 280px;
|
||||
@ -1066,15 +1046,23 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
background: var(--c-4);
|
||||
}
|
||||
|
||||
.lstI:hover, #pcont .selected:hover {
|
||||
#pcont .pres:hover, #pcont .selected:hover,
|
||||
.lstI:hover {
|
||||
border: 1px solid var(--c-5);
|
||||
background: var(--c-5);
|
||||
}
|
||||
|
||||
#pcont .expand, #pcont .expand:hover {
|
||||
border: 1px solid var(--c-1);
|
||||
background-color: var(--c-2);
|
||||
}
|
||||
|
||||
.selected .checkmark,
|
||||
.selected .radiomark,
|
||||
.selected input[type=number],
|
||||
.selected input[type=text],
|
||||
.selected button.btn,
|
||||
#pcont .expand, #pcont .expand:hover {
|
||||
background-color: var(--c-2);
|
||||
.selected button.btn {
|
||||
background-color: var(--c-3);
|
||||
}
|
||||
|
||||
.lstI.selected {
|
||||
@ -1104,12 +1092,13 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
}
|
||||
|
||||
.lstIcontent {
|
||||
width: 100%;
|
||||
/*width: 100%;
|
||||
vertical-align: middle;
|
||||
padding: 0 20px 0 5px;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
display: inline-block;*/
|
||||
position: relative;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.lstIname {
|
||||
@ -1118,10 +1107,11 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
|
||||
.lstIprev {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
height: 7px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.fnd {
|
||||
@ -1133,7 +1123,7 @@ input[type="text"].fnd {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 48px 8px 60px;
|
||||
padding: 8px 40px 8px 52px;
|
||||
margin: 5px auto 0;
|
||||
text-align: left;
|
||||
border-radius: 25px;
|
||||
@ -1156,6 +1146,16 @@ input[type="text"].fnd:hover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.segin .btn {
|
||||
border: 1px solid var(--c-2);
|
||||
background-color: var(--c-3);
|
||||
}
|
||||
.segin .btn:hover {
|
||||
border: 1px solid var(--c-4);
|
||||
background-color: var(--c-5);
|
||||
}
|
||||
|
||||
.check input:checked ~ .checkmark:after, .radio input:checked ~ .radiomark:after,
|
||||
.expanded {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -3,7 +3,6 @@ var loc = false, locip;
|
||||
var noNewSegs = false;
|
||||
var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true, isRgbw = false, cct = false;
|
||||
var whites = [0,0,0];
|
||||
var selColors;
|
||||
var expanded = [false];
|
||||
var powered = [true];
|
||||
var nlDur = 60, nlTar = 0;
|
||||
@ -636,7 +635,6 @@ function populateSegments(s)
|
||||
|
||||
cn += `<div class="seg ${i==s.mainseg ? 'selected' : ''}" id="seg${i}wrp">
|
||||
<label class="check schkl">
|
||||
|
||||
<input type="checkbox" id="seg${i}sel" onchange="selSeg(${i})" ${inst.sel ? "checked":""}>
|
||||
<span class="checkmark schk"></span>
|
||||
</label>
|
||||
@ -677,12 +675,16 @@ function populateSegments(s)
|
||||
</table>
|
||||
<div class="h bp" id="seg${i}len"></div>
|
||||
<label class="check revchkl">
|
||||
<span class="lstIname">
|
||||
Reverse direction
|
||||
</span>
|
||||
<input type="checkbox" id="seg${i}rev" onchange="setRev(${i})" ${inst.rev ? "checked":""}>
|
||||
<span class="checkmark schk"></span>
|
||||
</label>
|
||||
<label class="check revchkl">
|
||||
<span class="lstIname">
|
||||
Mirror effect
|
||||
</span>
|
||||
<input type="checkbox" id="seg${i}mi" onchange="setMi(${i})" ${inst.mi ? "checked":""}>
|
||||
<span class="checkmark schk"></span>
|
||||
</label>
|
||||
@ -809,27 +811,24 @@ function genPalPrevCss(id)
|
||||
|
||||
var gradient = [];
|
||||
for (let j = 0; j < paletteData.length; j++) {
|
||||
const element = paletteData[j];
|
||||
let r;
|
||||
let g;
|
||||
let b;
|
||||
const e = paletteData[j];
|
||||
let r, g, b;
|
||||
let index = false;
|
||||
if (Array.isArray(element)) {
|
||||
index = element[0]/255*100;
|
||||
r = element[1];
|
||||
g = element[2];
|
||||
b = element[3];
|
||||
} else if (element == 'r') {
|
||||
if (Array.isArray(e)) {
|
||||
index = e[0]/255*100;
|
||||
r = e[1];
|
||||
g = e[2];
|
||||
b = e[3];
|
||||
} else if (e == 'r') {
|
||||
r = Math.random() * 255;
|
||||
g = Math.random() * 255;
|
||||
b = Math.random() * 255;
|
||||
} else {
|
||||
if (selColors) {
|
||||
let e = element[1] - 1;
|
||||
r = selColors[e][0];
|
||||
g = selColors[e][1];
|
||||
b = selColors[e][2];
|
||||
}
|
||||
let i = e[1] - 1;
|
||||
var cd = gId('csl').children;
|
||||
r = parseInt(cd[i].dataset.r);
|
||||
g = parseInt(cd[i].dataset.g);
|
||||
b = parseInt(cd[i].dataset.b);
|
||||
}
|
||||
if (index === false) {
|
||||
index = j / paletteData.length * 100;
|
||||
@ -845,15 +844,14 @@ function generateListItemHtml(listName, id, name, clickAction, extraHtml = '', e
|
||||
{
|
||||
return `<div class="lstI${id==0?' sticky':''} ${extraClass}" data-id="${id}" data-opt="${extraPar}" onClick="${clickAction}(${id})">
|
||||
<label class="radio schkl" onclick="event.preventDefault()">
|
||||
|
||||
<input type="radio" value="${id}" name="${listName}">
|
||||
<span class="radiomark schk"></span>
|
||||
<div class="lstIcontent">
|
||||
<span class="lstIname">
|
||||
${name}
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
<div class="lstIcontent">
|
||||
<span class="lstIname">
|
||||
${name}
|
||||
</span>
|
||||
</div>
|
||||
${extraHtml}
|
||||
</div>`;
|
||||
}
|
||||
@ -967,14 +965,9 @@ function updateLen(s)
|
||||
//updates background color of currently selected preset
|
||||
function updatePA()
|
||||
{
|
||||
var ps = gEBCN("pres");
|
||||
for (let i = 0; i < ps.length; i++) {
|
||||
ps[i].classList.remove('selected');;
|
||||
}
|
||||
ps = gEBCN("psts");
|
||||
for (let i = 0; i < ps.length; i++) {
|
||||
ps[i].classList.remove('selected');;
|
||||
}
|
||||
let ps;
|
||||
ps = gEBCN("pres"); for (let p of ps) p.classList.remove('selected');
|
||||
ps = gEBCN("psts"); for (let p of ps) p.classList.remove('selected');
|
||||
if (currentPreset > 0) {
|
||||
var acv = gId(`p${currentPreset}o`);
|
||||
if (acv && !expanded[currentPreset+100]) {
|
||||
@ -1137,15 +1130,13 @@ function readState(s,command=false)
|
||||
return;
|
||||
}
|
||||
|
||||
selColors = i.col;
|
||||
var cd = gId('csl').children;
|
||||
for (let e = cd.length-1; e >= 0; e--)
|
||||
{
|
||||
var r,g,b,w;
|
||||
r = i.col[e][0];
|
||||
g = i.col[e][1];
|
||||
b = i.col[e][2];
|
||||
if (isRgbw) w = i.col[e][3];
|
||||
for (let e = cd.length-1; e >= 0; e--) {
|
||||
let r,g,b,w;
|
||||
r = cd[e].dataset.r = i.col[e][0];
|
||||
g = cd[e].dataset.g = i.col[e][1];
|
||||
b = cd[e].dataset.b = i.col[e][2];
|
||||
if (isRgbw) w = cd[e].dataset.w = i.col[e][3];
|
||||
cd[e].style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
|
||||
if (isRgbw) whites[e] = parseInt(w);
|
||||
}
|
||||
@ -1259,7 +1250,7 @@ function setSliderAndColorControl(idx, applyDef=false)
|
||||
gId("fxFind").style.top = topPosition + "px";
|
||||
topPosition += 42;
|
||||
var fxList = gId("fxlist");
|
||||
for (var i=0; i<fxList.children.length; i++) fxList.children[i].style.top = null; // remove top
|
||||
for (let f of fxList.children) f.style.top = null; // remove top
|
||||
var selected = fxList.querySelector('.selected');
|
||||
var sticky = fxList.querySelector('.sticky');
|
||||
if (sticky) {
|
||||
@ -1606,17 +1597,23 @@ ${makePlSel(true)}
|
||||
} else {
|
||||
content =
|
||||
`<label class="check revchkl">
|
||||
<span class="lstIname">
|
||||
Include brightness
|
||||
</span>
|
||||
<input type="checkbox" id="p${i}ibtgl" checked>
|
||||
<span class="checkmark schk"></span>
|
||||
</label>
|
||||
<label class="check revchkl">
|
||||
<span class="lstIname">
|
||||
Save segment bounds
|
||||
</span>
|
||||
<input type="checkbox" id="p${i}sbtgl" checked>
|
||||
<span class="checkmark schk"></span>
|
||||
</label>
|
||||
<label class="check revchkl">
|
||||
<span class="lstIname">
|
||||
Checked segments only
|
||||
</span>
|
||||
<input type="checkbox" id="p${i}sbchk">
|
||||
<span class="checkmark schk"></span>
|
||||
</label>`;
|
||||
@ -1632,7 +1629,9 @@ ${makePlSel(true)}
|
||||
<div class="h">(leave empty for no Quick load button)</div>
|
||||
<div ${pl&&i==0?"style='display:none'":""}>
|
||||
<label class="check revchkl">
|
||||
${pl?"Show playlist editor":(i>0)?"Overwrite with state":"Use current state"}
|
||||
<span class="lstIname">
|
||||
${pl?"Show playlist editor":(i>0)?"Overwrite with state":"Use current state"}
|
||||
</span>
|
||||
<input type="checkbox" id="p${i}cstgl" onchange="tglCs(${i})" ${(i==0||pl)?"checked":""}>
|
||||
<span class="checkmark schk"></span>
|
||||
</label>
|
||||
@ -2250,28 +2249,18 @@ function formatArr(pl) {
|
||||
}
|
||||
}
|
||||
|
||||
function expand(i/*,a=false*/)
|
||||
function expand(i, c=false)
|
||||
{
|
||||
var seg = gId('seg' +i);
|
||||
let util = i<100?'segutil':'putil';
|
||||
let stay = i<100?"staybot":"staytop";
|
||||
/*
|
||||
if (!a) {
|
||||
var j = i>100 ? 100 : 0;
|
||||
var l = i>100 ? expanded.length : 100;
|
||||
for (; j<l; j++) if (i!=j && expanded[j]) expand(j,true); // collapse all expanded elements
|
||||
}
|
||||
*/
|
||||
|
||||
if (!c && i>100) for (let j=100; j<expanded.length; j++) if (i!=j && expanded[j]) expand(j,true); // collapse all expanded presets
|
||||
|
||||
expanded[i] = !expanded[i];
|
||||
seg.style.display = (expanded[i]) ? "block":"none";
|
||||
//gId('sege' +i).style.transform = (expanded[i]) ? "rotate(180deg)":"rotate(0deg)";
|
||||
if (expanded[i]) {
|
||||
gId('sege' +i).classList.add("exp");
|
||||
gId(util).classList.remove(stay);
|
||||
} else {
|
||||
gId('sege' +i).classList.remove("exp");
|
||||
gId(util).classList.add(stay);
|
||||
}
|
||||
seg.classList.toggle("expanded");
|
||||
gId('sege' +i).classList.toggle("exp");
|
||||
gId(util).classList.toggle(stay);
|
||||
|
||||
if (i >= 100) {
|
||||
var p = i-100;
|
||||
|
||||
3264
wled00/html_ui.h
3264
wled00/html_ui.h
File diff suppressed because it is too large
Load Diff
@ -728,8 +728,7 @@ void serializePalettes(JsonObject root, AsyncWebServerRequest* request)
|
||||
curPalette.add("c2");
|
||||
curPalette.add("c1");
|
||||
break;
|
||||
case 5: {//primary + secondary (+tert if not off), more distinct
|
||||
|
||||
case 5: //primary + secondary (+tert if not off), more distinct
|
||||
curPalette.add("c1");
|
||||
curPalette.add("c1");
|
||||
curPalette.add("c1");
|
||||
@ -746,7 +745,7 @@ void serializePalettes(JsonObject root, AsyncWebServerRequest* request)
|
||||
curPalette.add("c3");
|
||||
curPalette.add("c3");
|
||||
curPalette.add("c1");
|
||||
break;}
|
||||
break;
|
||||
case 6: //Party colors
|
||||
setPaletteColors(curPalette, PartyColors_p);
|
||||
break;
|
||||
@ -768,14 +767,12 @@ void serializePalettes(JsonObject root, AsyncWebServerRequest* request)
|
||||
case 12: //Rainbow stripe colors
|
||||
setPaletteColors(curPalette, RainbowStripeColors_p);
|
||||
break;
|
||||
|
||||
default:
|
||||
if (i < 13) {
|
||||
break;
|
||||
}
|
||||
{
|
||||
byte tcp[72];
|
||||
memcpy_P(tcp, (byte*)pgm_read_dword(&(gGradientPalettes[i - 13])), 72);
|
||||
setPaletteColors(curPalette, tcp);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
*/
|
||||
|
||||
// version code in format yymmddb (b = daily build)
|
||||
#define VERSION 2202271
|
||||
#define VERSION 2202281
|
||||
|
||||
//uncomment this if you have a "my_config.h" file you'd like to use
|
||||
//#define WLED_USE_MY_CONFIG
|
||||
|
||||
Loading…
Reference in New Issue
Block a user