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

JS/CSS optimisations

Browse Source
This commit is contained in:
Blaz Kristan 2022-02-28 23:32:24 +01:00
parent 4d10c9de95
commit 61a01cb163
5 changed files with 4110 additions and 4120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
wled00/data/index.css
View File

@ -565,7 +565,7 @@ output.sliderbubbleshow {
opacity: 1; opacity: 1;
} }
.hidden { #rgbwrap, #kwrap, #wwrap, #wbal {
display: none; display: none;
} }
@ -623,9 +623,6 @@ input[type=range]::-moz-range-thumb {
#Colors 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);
} }
#kwrap, #wwrap, #wbal {
display: none;
}
.sliderwrap { .sliderwrap {
height: 30px; height: 30px;
@ -651,10 +648,6 @@ input[type=range]::-moz-range-thumb {
width: 260px; width: 260px;
} }
#rgbwrap {
display: none;
}
.btn { .btn {
padding: 8px; padding: 8px;
margin: 10px 4px; margin: 10px 4px;
@ -673,11 +666,11 @@ input[type=range]::-moz-range-thumb {
} }
.btn:hover { .btn:hover {
border: 1px solid var(--c-4); border: 1px solid var(--c-4);
background-color: var(--c-4); background-color: var(--c-5);
} }
.btn { .btn {
border: 1px solid var(--c-3); border: 1px solid var(--c-1);
background-color: var(--c-3); background-color: var(--c-2);
} }
.btn-s { .btn-s {
width: 100%; width: 100%;
@ -728,17 +721,15 @@ input[type=range]::-moz-range-thumb {
margin-top: 5px; margin-top: 5px;
display: none; display: none;
} }
.sel {
margin: 5px 0 10px; select/*, .sel-p, .sel-pl, .sel-ple*/ {
}
.sel-p, .sel-pl, .sel-ple {
padding: 4px; padding: 4px;
margin: 0; margin: 0;
font-size: 19px; font-size: 19px;
background-color: var(--c-3); background-color: var(--c-3);
color: var(--c-d); color: var(--c-d);
cursor: pointer; cursor: pointer;
border: 1px solid var(--c-3); border: 1px solid var(--c-2);
border-radius: 5px; border-radius: 5px;
transition-duration: 0.5s; transition-duration: 0.5s;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
@ -753,7 +744,8 @@ input[type=range]::-moz-range-thumb {
width: 42px; width: 42px;
} }
.sel-p { .sel-p {
width: 4.5em; margin: 5px 0 10px;
width: 5em;
} }
.sel-pl { .sel-pl {
width: 100%; width: 100%;
@ -770,7 +762,7 @@ option {
input[type=number], input[type=text] { input[type=number], input[type=text] {
background: var(--c-3); background: var(--c-3);
color: var(--c-f); color: var(--c-f);
border: 0px solid var(--c-f); border: 1px solid var(--c-2);
border-radius: 5px; border-radius: 5px;
padding: 8px; padding: 8px;
margin: 6px 6px 6px 0; margin: 6px 6px 6px 0;
@ -907,17 +899,16 @@ input[type=number]::-webkit-outer-spin-button {
} }
.check, .radio { .check, .radio {
display: inline-block; display: block;
position: relative; position: relative;
padding-bottom: 32px; padding-bottom: 32px;
margin-bottom: 14px; margin-bottom: 14px;
cursor: pointer; cursor: pointer;
text-align: center;
} }
.schkl { .schkl {
padding: 2px 5px 0px 35px; padding: 2px 0 0;
margin: 0 0 0 2px; margin: 0;
} }
.revchkl { .revchkl {
@ -936,6 +927,8 @@ input[type=number]::-webkit-outer-spin-button {
.checkmark, .radiomark { .checkmark, .radiomark {
position: absolute; position: absolute;
height: 24px;
width: 24px;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -944,14 +937,13 @@ input[type=number]::-webkit-outer-spin-button {
} }
.radiomark { .radiomark {
height: 24px; top: 1px;
width: 24px; height: 22px;
width: 22px;
border-radius: 50%; border-radius: 50%;
} }
.checkmark { .checkmark {
height: 25px;
width: 25px;
border-radius: 10px; border-radius: 10px;
} }
@ -959,24 +951,16 @@ input[type=number]::-webkit-outer-spin-button {
.check:hover input ~ .checkmark { .check:hover input ~ .checkmark {
background-color: var(--c-4); background-color: var(--c-4);
} }
/*
.check input:checked ~ .checkmark {
background-color: var(--c-6);
}
*/
.checkmark:after, .radiomark:after { .checkmark:after, .radiomark:after {
content: ""; content: "";
position: absolute; position: absolute;
display: none; display: none;
} }
.check input:checked ~ .checkmark:after, .radio input:checked ~ .radiomark:after {
display: block;
}
.check .checkmark:after { .check .checkmark:after {
left: 9px; left: 9px;
top: 5px; top: 4px;
width: 5px; width: 5px;
height: 10px; height: 10px;
border: solid var(--c-f); border: solid var(--c-f);
@ -987,11 +971,11 @@ input[type=number]::-webkit-outer-spin-button {
} }
.radio .radiomark:after { .radio .radiomark:after {
width: 12px; width: 14px;
height: 12px; height: 14px;
top: 50%; top: 50%;
left: 50%; left: 50%;
margin: -6px; margin: -7px;
border-radius: 50%; border-radius: 50%;
background: var(--c-f); background: var(--c-f);
} }
@ -1035,10 +1019,6 @@ input[type=number]::-webkit-outer-spin-button {
padding-bottom: 4px; padding-bottom: 4px;
} }
#pcont .pres:hover {
background-color: var(--c-3);
}
.list { .list {
position: relative; position: relative;
width: 280px; width: 280px;
@ -1066,15 +1046,23 @@ input[type=number]::-webkit-outer-spin-button {
background: var(--c-4); 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); 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=number],
.selected input[type=text], .selected input[type=text],
.selected button.btn, .selected button.btn {
#pcont .expand, #pcont .expand:hover { background-color: var(--c-3);
background-color: var(--c-2);
} }
.lstI.selected { .lstI.selected {
@ -1104,12 +1092,13 @@ input[type=number]::-webkit-outer-spin-button {
} }
.lstIcontent { .lstIcontent {
width: 100%; /*width: 100%;
vertical-align: middle; vertical-align: middle;
padding: 0 20px 0 5px; padding: 0 20px 0 5px;
text-align: left; text-align: left;
display: inline-block; display: inline-block;*/
position: relative; position: relative;
left: 40px;
} }
.lstIname { .lstIname {
@ -1118,10 +1107,11 @@ input[type=number]::-webkit-outer-spin-button {
.lstIprev { .lstIprev {
width: 100%; width: 100%;
height: 8px; height: 7px;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: -1;
} }
.fnd { .fnd {
@ -1133,7 +1123,7 @@ input[type="text"].fnd {
display: block; display: block;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 8px 48px 8px 60px; padding: 8px 40px 8px 52px;
margin: 5px auto 0; margin: 5px auto 0;
text-align: left; text-align: left;
border-radius: 25px; border-radius: 25px;
@ -1156,6 +1146,16 @@ input[type="text"].fnd:hover {
display: none; 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 { .expanded {
display: block; display: block;
} }

107
wled00/data/index.js
View File

@ -3,7 +3,6 @@ var loc = false, locip;
var noNewSegs = false; var noNewSegs = false;
var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true, isRgbw = false, cct = 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 whites = [0,0,0];
var selColors;
var expanded = [false]; var expanded = [false];
var powered = [true]; var powered = [true];
var nlDur = 60, nlTar = 0; var nlDur = 60, nlTar = 0;
@ -636,7 +635,6 @@ function populateSegments(s)
cn += `<div class="seg ${i==s.mainseg ? 'selected' : ''}" id="seg${i}wrp"> cn += `<div class="seg ${i==s.mainseg ? 'selected' : ''}" id="seg${i}wrp">
<label class="check schkl"> <label class="check schkl">
&nbsp;
<input type="checkbox" id="seg${i}sel" onchange="selSeg(${i})" ${inst.sel ? "checked":""}> <input type="checkbox" id="seg${i}sel" onchange="selSeg(${i})" ${inst.sel ? "checked":""}>
<span class="checkmark schk"></span> <span class="checkmark schk"></span>
</label> </label>
@ -677,12 +675,16 @@ function populateSegments(s)
</table> </table>
<div class="h bp" id="seg${i}len"></div> <div class="h bp" id="seg${i}len"></div>
<label class="check revchkl"> <label class="check revchkl">
<span class="lstIname">
Reverse direction Reverse direction
</span>
<input type="checkbox" id="seg${i}rev" onchange="setRev(${i})" ${inst.rev ? "checked":""}> <input type="checkbox" id="seg${i}rev" onchange="setRev(${i})" ${inst.rev ? "checked":""}>
<span class="checkmark schk"></span> <span class="checkmark schk"></span>
</label> </label>
<label class="check revchkl"> <label class="check revchkl">
<span class="lstIname">
Mirror effect Mirror effect
</span>
<input type="checkbox" id="seg${i}mi" onchange="setMi(${i})" ${inst.mi ? "checked":""}> <input type="checkbox" id="seg${i}mi" onchange="setMi(${i})" ${inst.mi ? "checked":""}>
<span class="checkmark schk"></span> <span class="checkmark schk"></span>
</label> </label>
@ -809,27 +811,24 @@ function genPalPrevCss(id)
var gradient = []; var gradient = [];
for (let j = 0; j < paletteData.length; j++) { for (let j = 0; j < paletteData.length; j++) {
const element = paletteData[j]; const e = paletteData[j];
let r; let r, g, b;
let g;
let b;
let index = false; let index = false;
if (Array.isArray(element)) { if (Array.isArray(e)) {
index = element[0]/255*100; index = e[0]/255*100;
r = element[1]; r = e[1];
g = element[2]; g = e[2];
b = element[3]; b = e[3];
} else if (element == 'r') { } else if (e == 'r') {
r = Math.random() * 255; r = Math.random() * 255;
g = Math.random() * 255; g = Math.random() * 255;
b = Math.random() * 255; b = Math.random() * 255;
} else { } else {
if (selColors) { let i = e[1] - 1;
let e = element[1] - 1; var cd = gId('csl').children;
r = selColors[e][0]; r = parseInt(cd[i].dataset.r);
g = selColors[e][1]; g = parseInt(cd[i].dataset.g);
b = selColors[e][2]; b = parseInt(cd[i].dataset.b);
}
} }
if (index === false) { if (index === false) {
index = j / paletteData.length * 100; 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})"> return `<div class="lstI${id==0?' sticky':''} ${extraClass}" data-id="${id}" data-opt="${extraPar}" onClick="${clickAction}(${id})">
<label class="radio schkl" onclick="event.preventDefault()"> <label class="radio schkl" onclick="event.preventDefault()">
&nbsp;
<input type="radio" value="${id}" name="${listName}"> <input type="radio" value="${id}" name="${listName}">
<span class="radiomark schk"></span> <span class="radiomark schk"></span>
<div class="lstIcontent">
<span class="lstIname">
${name}
</span>
</div>
</label> </label>
<div class="lstIcontent">
<span class="lstIname">
${name}
</span>
</div>
${extraHtml} ${extraHtml}
</div>`; </div>`;
} }
@ -967,14 +965,9 @@ function updateLen(s)
//updates background color of currently selected preset //updates background color of currently selected preset
function updatePA() function updatePA()
{ {
var ps = gEBCN("pres"); let ps;
for (let i = 0; i < ps.length; i++) { ps = gEBCN("pres"); for (let p of ps) p.classList.remove('selected');
ps[i].classList.remove('selected');; ps = gEBCN("psts"); for (let p of ps) p.classList.remove('selected');
}
ps = gEBCN("psts");
for (let i = 0; i < ps.length; i++) {
ps[i].classList.remove('selected');;
}
if (currentPreset > 0) { if (currentPreset > 0) {
var acv = gId(`p${currentPreset}o`); var acv = gId(`p${currentPreset}o`);
if (acv && !expanded[currentPreset+100]) { if (acv && !expanded[currentPreset+100]) {
@ -1137,15 +1130,13 @@ function readState(s,command=false)
return; return;
} }
selColors = i.col;
var cd = gId('csl').children; var cd = gId('csl').children;
for (let e = cd.length-1; e >= 0; e--) for (let e = cd.length-1; e >= 0; e--) {
{ let r,g,b,w;
var r,g,b,w; r = cd[e].dataset.r = i.col[e][0];
r = i.col[e][0]; g = cd[e].dataset.g = i.col[e][1];
g = i.col[e][1]; b = cd[e].dataset.b = i.col[e][2];
b = i.col[e][2]; if (isRgbw) w = cd[e].dataset.w = i.col[e][3];
if (isRgbw) w = i.col[e][3];
cd[e].style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")"; cd[e].style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
if (isRgbw) whites[e] = parseInt(w); if (isRgbw) whites[e] = parseInt(w);
} }
@ -1259,7 +1250,7 @@ function setSliderAndColorControl(idx, applyDef=false)
gId("fxFind").style.top = topPosition + "px"; gId("fxFind").style.top = topPosition + "px";
topPosition += 42; topPosition += 42;
var fxList = gId("fxlist"); 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 selected = fxList.querySelector('.selected');
var sticky = fxList.querySelector('.sticky'); var sticky = fxList.querySelector('.sticky');
if (sticky) { if (sticky) {
@ -1606,17 +1597,23 @@ ${makePlSel(true)}
} else { } else {
content = content =
`<label class="check revchkl"> `<label class="check revchkl">
<span class="lstIname">
Include brightness Include brightness
</span>
<input type="checkbox" id="p${i}ibtgl" checked> <input type="checkbox" id="p${i}ibtgl" checked>
<span class="checkmark schk"></span> <span class="checkmark schk"></span>
</label> </label>
<label class="check revchkl"> <label class="check revchkl">
<span class="lstIname">
Save segment bounds Save segment bounds
</span>
<input type="checkbox" id="p${i}sbtgl" checked> <input type="checkbox" id="p${i}sbtgl" checked>
<span class="checkmark schk"></span> <span class="checkmark schk"></span>
</label> </label>
<label class="check revchkl"> <label class="check revchkl">
<span class="lstIname">
Checked segments only Checked segments only
</span>
<input type="checkbox" id="p${i}sbchk"> <input type="checkbox" id="p${i}sbchk">
<span class="checkmark schk"></span> <span class="checkmark schk"></span>
</label>`; </label>`;
@ -1632,7 +1629,9 @@ ${makePlSel(true)}
<div class="h">(leave empty for no Quick load button)</div> <div class="h">(leave empty for no Quick load button)</div>
<div ${pl&&i==0?"style='display:none'":""}> <div ${pl&&i==0?"style='display:none'":""}>
<label class="check revchkl"> <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":""}> <input type="checkbox" id="p${i}cstgl" onchange="tglCs(${i})" ${(i==0||pl)?"checked":""}>
<span class="checkmark schk"></span> <span class="checkmark schk"></span>
</label> </label>
@ -2250,28 +2249,18 @@ function formatArr(pl) {
} }
} }
function expand(i/*,a=false*/) function expand(i, c=false)
{ {
var seg = gId('seg' +i); var seg = gId('seg' +i);
let util = i<100?'segutil':'putil'; let util = i<100?'segutil':'putil';
let stay = i<100?"staybot":"staytop"; let stay = i<100?"staybot":"staytop";
/*
if (!a) { if (!c && i>100) for (let j=100; j<expanded.length; j++) if (i!=j && expanded[j]) expand(j,true); // collapse all expanded presets
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
}
*/
expanded[i] = !expanded[i]; expanded[i] = !expanded[i];
seg.style.display = (expanded[i]) ? "block":"none"; seg.classList.toggle("expanded");
//gId('sege' +i).style.transform = (expanded[i]) ? "rotate(180deg)":"rotate(0deg)"; gId('sege' +i).classList.toggle("exp");
if (expanded[i]) { gId(util).classList.toggle(stay);
gId('sege' +i).classList.add("exp");
gId(util).classList.remove(stay);
} else {
gId('sege' +i).classList.remove("exp");
gId(util).classList.add(stay);
}
if (i >= 100) { if (i >= 100) {
var p = i-100; var p = i-100;

3264
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff

11
wled00/json.cpp
View File

@ -728,8 +728,7 @@ void serializePalettes(JsonObject root, AsyncWebServerRequest* request)
curPalette.add("c2"); curPalette.add("c2");
curPalette.add("c1"); curPalette.add("c1");
break; 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"); 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("c3"); curPalette.add("c3");
curPalette.add("c1"); curPalette.add("c1");
break;} break;
case 6: //Party colors case 6: //Party colors
setPaletteColors(curPalette, PartyColors_p); setPaletteColors(curPalette, PartyColors_p);
break; break;
@ -768,14 +767,12 @@ void serializePalettes(JsonObject root, AsyncWebServerRequest* request)
case 12: //Rainbow stripe colors case 12: //Rainbow stripe colors
setPaletteColors(curPalette, RainbowStripeColors_p); setPaletteColors(curPalette, RainbowStripeColors_p);
break; break;
default: default:
if (i < 13) { {
break;
}
byte tcp[72]; byte tcp[72];
memcpy_P(tcp, (byte*)pgm_read_dword(&(gGradientPalettes[i - 13])), 72); memcpy_P(tcp, (byte*)pgm_read_dword(&(gGradientPalettes[i - 13])), 72);
setPaletteColors(curPalette, tcp); setPaletteColors(curPalette, tcp);
}
break; break;
} }
} }

2
wled00/wled.h
View File

@ -8,7 +8,7 @@
*/ */
// version code in format yymmddb (b = daily build) // 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 //uncomment this if you have a "my_config.h" file you'd like to use
//#define WLED_USE_MY_CONFIG //#define WLED_USE_MY_CONFIG