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

Select/deselect all segments.

Browse Source 
CSS optimisations & fixes.
This commit is contained in:
Blaz Kristan 2022-03-11 23:38:50 +01:00
parent 8e5f2d91e8
commit b3d691fff6
6 changed files with 1775 additions and 1738 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -17,3 +17,4 @@ node_modules
wled-update.sh wled-update.sh
esp01-update.sh esp01-update.sh
/wled00/LittleFS /wled00/LittleFS
replace_fs.py

90
wled00/data/index.css
View File

@ -148,12 +148,7 @@ button {
padding: 0; padding: 0;
vertical-align: middle; vertical-align: middle;
} }
/*
.segt TD.h, .plentry TD.h {
font-size: 13px;
padding: 2px 0 0;
}
*/
.keytd { .keytd {
text-align: left; text-align: left;
} }
@ -312,27 +307,30 @@ button {
#segutil, #segutil2, #segcont, #putil, #pcont, #pql { #segutil, #segutil2, #segcont, #putil, #pcont, #pql {
width: 280px; width: 280px;
min-height: 42px;
}
#segutil, #segcont, #pcont, #pql {
margin: 10px auto 0; margin: 10px auto 0;
} }
#segutil2 {
margin: 0 auto;
}
#segutil .seg { #segutil .seg {
margin: 10px 0; margin: 10px 0;
} }
#pcont { #segcont, #pcont {
margin-bottom: 10px; margin-bottom: 10px;
} }
#putil { #putil {
padding: 0 0 10px; /*padding: 0 0 10px;*/
margin: 0 auto; margin: 0 auto;
} }
#putil .btn-n, #putil .btn-s {
/*box-shadow: 0 0 0 5px var(--c-1);*/
margin-bottom: 10px;
}
.smooth { transition: transform calc(var(--f, 1)*.5s) ease-out } .smooth { transition: transform calc(var(--f, 1)*.5s) ease-out }
.tab-label { .tab-label {
@ -362,7 +360,7 @@ button {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 2;
margin: 0 auto auto; margin: 0 auto auto;
} }
@ -438,11 +436,11 @@ button {
} }
#info, #nodes { #info, #nodes {
z-index: 3; z-index: 4;
} }
#rover { #rover {
z-index: 2; z-index: 3;
} }
#ndlt { #ndlt {
@ -473,7 +471,6 @@ button {
} }
#kv, #kn { #kv, #kn {
/*max-width: 490px;*/
display: inline-block; display: inline-block;
} }
@ -529,10 +526,6 @@ img {
position: absolute; position: absolute;
top: 13px; left: 8px; right: 8px; top: 13px; left: 8px; right: 8px;
height: 4px; height: 4px;
/*
top: 12.5px; bottom: 12.5px;
left: 13px; right: 13px;
*/
background: var(--c-4); background: var(--c-4);
border-radius: 16px; border-radius: 16px;
pointer-events: none; pointer-events: none;
@ -656,6 +649,7 @@ input[type=range]::-moz-range-thumb {
width: 260px; width: 260px;
} }
/* buttons */
.btn { .btn {
padding: 8px; padding: 8px;
margin: 10px 4px; margin: 10px 4px;
@ -675,8 +669,8 @@ input[type=range]::-moz-range-thumb {
background-color: var(--c-3); background-color: var(--c-3);
} }
.btn:hover { .btn:hover {
border: 1px solid var(--c-5); border: 1px solid var(--c-5) !important;
background-color: var(--c-5); background-color: var(--c-5) !important;
} }
.btn-s { .btn-s {
width: 100%; width: 100%;
@ -706,6 +700,15 @@ input[type=range]::-moz-range-thumb {
margin: 0; margin: 0;
} }
#putil .btn-s {
width: 135px;
}
#segutil .btn-s, #segutil2 .btn-s, #putil .btn-s {
background-color: var(--c-3);
border: 1px solid var(--c-3);
}
.btn-pl-del, .btn-pl-add { .btn-pl-del, .btn-pl-add {
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
@ -858,11 +861,11 @@ input[type=number]::-webkit-outer-spin-button {
top:0; top:0;
} }
/* preset id number */
.pid { .pid {
position: absolute; position: absolute;
top: 8px; top: 8px;
left: 12px; left: 12px;
/*padding: 10px 0 0 12px;*/
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
color: var(--c-b); color: var(--c-b);
@ -917,6 +920,7 @@ input[type=number]::-webkit-outer-spin-button {
right: 8px; right: 8px;
} }
/* radiobuttons and checkmarks */
.check, .radio { .check, .radio {
display: block; display: block;
position: relative; position: relative;
@ -1009,10 +1013,11 @@ input[type=number]::-webkit-outer-spin-button {
margin-bottom: 5px; margin-bottom: 5px;
} }
/* segment & preset wrapper */
.seg, .pres { .seg, .pres {
position: relative; position: relative;
display: block; display: block;
padding: 10px 0; padding: 8px 0;
margin: 0 0 10px; margin: 0 0 10px;
background-color: var(--c-2); background-color: var(--c-2);
color: var(--c-f); color: var(--c-f);
@ -1037,10 +1042,11 @@ input[type=number]::-webkit-outer-spin-button {
.seg .schkl { .seg .schkl {
position: absolute; position: absolute;
top: 8px; top: 7px;
left: 8px; left: 9px;
} }
/* list wrapper */
.list { .list {
position: relative; position: relative;
width: 280px; width: 280px;
@ -1050,8 +1056,8 @@ input[type=number]::-webkit-outer-spin-button {
line-height: 24px; line-height: 24px;
} }
/* list item */
.lstI { .lstI {
/*display: flex;*/
align-items: center; align-items: center;
padding: 8px 10px; padding: 8px 10px;
cursor: pointer; cursor: pointer;
@ -1063,6 +1069,7 @@ input[type=number]::-webkit-outer-spin-button {
min-height: 24px; min-height: 24px;
} }
/* selected item/element */
.selected { /* has to be after .lstI */ .selected { /* has to be after .lstI */
background: var(--c-4); background: var(--c-4);
} }
@ -1079,6 +1086,7 @@ input[type=number]::-webkit-outer-spin-button {
background-color: var(--c-3); background-color: var(--c-3);
} }
/* selected list item */
.lstI.selected { .lstI.selected {
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -1089,42 +1097,38 @@ input[type=number]::-webkit-outer-spin-button {
} }
#pcont .selected { #pcont .selected {
bottom: 114px; bottom: 42px;
top: 40px; top: 40px;
} }
/* calculated in index.js /* calculated in index.js
#fxlist .lstI.selected { #fxlist .lstI.selected {
top: 142px; top: 142px !important;
} }
*/ */
#pallist .lstI.selected { #pallist .lstI.selected {
top: 82px; top: 82px;
} }
/* must be after .selected */
/* calculated in index.js /* calculated in index.js
#fxlist .lstI.sticky { #fxlist .lstI.sticky {
top: 99px; top: 99px !important;
} }
*/ */
#pallist .lstI.sticky { #pallist .lstI.sticky {
top: 40px; top: 40px;
} }
/* list item content */
.lstIcontent { .lstIcontent {
/*width: 100%; padding: 0;
vertical-align: middle;*/
padding: 0; /*20px 0 5px;
text-align: left;
display: inline-block;*/
position: relative; position: relative;
/*left: 40px;*/
} }
/* list item name (for sorting) */
.lstIname { .lstIname {
white-space: nowrap; white-space: nowrap;
} }
/* palette preview */ /* list item palette preview */
.lstIprev { .lstIprev {
width: 100%; width: 100%;
height: 7px; height: 7px;
@ -1134,11 +1138,10 @@ input[type=number]::-webkit-outer-spin-button {
z-index: -1; z-index: -1;
} }
/* find/search element */
.fnd { .fnd {
width: 280px; width: 280px;
margin: 0 auto; margin: 0 auto;
/*border-radius: 25px;
box-shadow: 0 0 0 5px var(--c-1);*/
} }
input[type="text"].fnd { input[type="text"].fnd {
@ -1161,9 +1164,12 @@ input[type="text"].fnd:hover {
background-color: var(--c-3); background-color: var(--c-3);
} }
/* segment inner (expanded) content */
.segin { .segin {
padding: 8px 8px 0; padding: 8px 8px 0;
} }
/* preset inner/expanded content */
.presin { .presin {
padding: 8px 0 0; padding: 8px 0 0;
} }
@ -1177,7 +1183,7 @@ input[type="text"].fnd:hover {
background-color: var(--c-5); background-color: var(--c-5);
} }
/* must be after .expanded */ /* hidden list items, must be after .expanded */
.pres .lstIcontent, .segin { .pres .lstIcontent, .segin {
display: none; display: none;
} }

42
wled00/data/index.htm
View File

@ -182,8 +182,8 @@
</div> </div>
<div id="Effects" class="tabcontent"> <div id="Effects" class="tabcontent">
<div id="sliders"> <span id="sliders">
<p class="labels" id="sliderLabel0">Effect speed</p> <p class="labels hd" id="sliderLabel0">Effect speed</p>
<div class="staytop" id="slider0"> <div class="staytop" id="slider0">
<i class="icons slider-icon" style="cursor: pointer;" onclick="tglFreeze()">&#xe325;</i> <i class="icons slider-icon" style="cursor: pointer;" onclick="tglFreeze()">&#xe325;</i>
<div class="sliderwrap il"> <div class="sliderwrap il">
@ -192,7 +192,7 @@
</div> </div>
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
</div> </div>
<p class="labels" id="sliderLabel1">Effect intensity</p> <p class="labels hd" id="sliderLabel1">Effect intensity</p>
<div class="staytop" id="slider1"> <div class="staytop" id="slider1">
<i class="icons slider-icon" style="cursor: pointer;" onclick="tglLabels()">&#xe409;</i> <i class="icons slider-icon" style="cursor: pointer;" onclick="tglLabels()">&#xe409;</i>
<div class="sliderwrap il"> <div class="sliderwrap il">
@ -201,7 +201,7 @@
</div> </div>
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
</div> </div>
<p class="labels" id="sliderLabel2">Custom 1</p> <p class="labels hd" id="sliderLabel2">Custom 1</p>
<div class="staytop" id="slider2"> <div class="staytop" id="slider2">
<i class="icons slider-icon">&#xe410;</i> <i class="icons slider-icon">&#xe410;</i>
<div class="sliderwrap il"> <div class="sliderwrap il">
@ -210,7 +210,7 @@
</div> </div>
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
</div> </div>
<p class="labels" id="sliderLabel3">Custom 2</p> <p class="labels hd" id="sliderLabel3">Custom 2</p>
<div class="staytop" id="slider3"> <div class="staytop" id="slider3">
<i class="icons slider-icon">&#xe410;</i> <i class="icons slider-icon">&#xe410;</i>
<div class="sliderwrap il"> <div class="sliderwrap il">
@ -219,7 +219,7 @@
</div> </div>
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
</div> </div>
<p class="labels" id="sliderLabel4">Custom 3</p> <p class="labels hd" id="sliderLabel4">Custom 3</p>
<div class="staytop" id="slider4"> <div class="staytop" id="slider4">
<i class="icons slider-icon">&#xe410;</i> <i class="icons slider-icon">&#xe410;</i>
<div class="sliderwrap il"> <div class="sliderwrap il">
@ -228,7 +228,7 @@
</div> </div>
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
</div> </div>
</div> </span>
<div class="il"> <div class="il">
<p class="labels hd" id="modeLabel">Effect mode</p> <p class="labels hd" id="modeLabel">Effect mode</p>
<div class="staytop fnd" id="fxFind"> <div class="staytop fnd" id="fxFind">
@ -295,17 +295,12 @@
</div><br> </div><br>
<div id="kv">Loading...</div><br> <div id="kv">Loading...</div><br>
<div> <div>
<!--table> <button class="btn" onclick="requestJson()">Refresh</button>
<tr> <button class="btn" onclick="toggleInfo()">Close Info</button>
<td class="keytd"--><button class="btn" onclick="requestJson()">Refresh</button><!--/td> <button class="btn" onclick="toggleNodes()">Instance List</button>
<td class="valtd"--><button class="btn" onclick="toggleInfo()">Close Info</button><!--/td> <button class="btn" id="resetbtn" onclick="cnfReset()">Reboot WLED</button>
</tr> </div>
<tr> <br>
<td class="keytd"--><button class="btn" onclick="toggleNodes()">Instance List</button><!--/td>
<td class="valtd"--><button class="btn" id="resetbtn" onclick="cnfReset()">Reboot WLED</button><!--/td>
</tr>
</table-->
</div><br>
<span class="h">Made with <span id="heart">&#10084;&#xFE0E;</span> by Aircoookie and the <a href="https://wled.discourse.group/" target="_blank">WLED community</a></span> <span class="h">Made with <span id="heart">&#10084;&#xFE0E;</span> by Aircoookie and the <a href="https://wled.discourse.group/" target="_blank">WLED community</a></span>
</div> </div>
@ -313,13 +308,10 @@
<div id="ndlt">WLED instances</div> <div id="ndlt">WLED instances</div>
<div id="kn">Loading...</div><br> <div id="kn">Loading...</div><br>
<div> <div>
<!--table> <button class="btn infobtn" onclick="loadNodes()">Refresh</button>
<tr> <button class="btn infobtn" onclick="toggleNodes()">Close list</button>
<td class="keytd"--><button class="btn infobtn" onclick="loadNodes()">Refresh</button><!--/td> </div>
<td class="valtd"--><button class="btn infobtn" onclick="toggleNodes()">Close list</button><!--/td> <br>
</tr>
</table-->
</div><br>
</div> </div>
<div id="rover" class="modal"> <div id="rover" class="modal">

47
wled00/data/index.js
View File

@ -89,8 +89,8 @@ function applyCfg()
var l = cfg.comp.labels; var l = cfg.comp.labels;
var e = d.querySelectorAll('.tab-label'); var e = d.querySelectorAll('.tab-label');
for (let i of e) i.style.display = l ? "block":"none"; for (let i of e) i.style.display = l ? "block":"none";
e = d.querySelector('.hd'); //e = d.querySelector('.hd');
e.style.display = l ? "block":"none"; //e.style.display = l ? "block":"none";
sCol('--tbp',l ? "14px 14px 10px 14px":"10px 22px 4px 22px"); sCol('--tbp',l ? "14px 14px 10px 14px":"10px 22px 4px 22px");
sCol('--bbp',l ? "9px 0 7px 0":"10px 0 4px 0"); sCol('--bbp',l ? "9px 0 7px 0":"10px 0 4px 0");
sCol('--bhd',l ? "block":"none"); sCol('--bhd',l ? "block":"none");
@ -1267,7 +1267,7 @@ function setSliderAndColorControl(idx, applyDef=false)
var label = gId("sliderLabel" + i); var label = gId("sliderLabel" + i);
// if (not controlDefined and for AC speed or intensity and for SR alle sliders) or slider has a value // if (not controlDefined and for AC speed or intensity and for SR alle sliders) or slider has a value
if ((!controlDefined && i < ((idx<128)?2:nSliders)) || (slOnOff.length>i && slOnOff[i] != "")) { if ((!controlDefined && i < ((idx<128)?2:nSliders)) || (slOnOff.length>i && slOnOff[i] != "")) {
label.style.display = "block"; //label.style.display = "block";
if (slOnOff.length>i && slOnOff[i].indexOf("=")>0) { if (slOnOff.length>i && slOnOff[i].indexOf("=")>0) {
// embeded default values // embeded default values
var dPos = slOnOff[i].indexOf("="); var dPos = slOnOff[i].indexOf("=");
@ -1281,7 +1281,7 @@ function setSliderAndColorControl(idx, applyDef=false)
else if (i==0) label.innerHTML = "Effect speed"; else if (i==0) label.innerHTML = "Effect speed";
else if (i==1) label.innerHTML = "Effect intensity"; else if (i==1) label.innerHTML = "Effect intensity";
else label.innerHTML = "Custom" + (i-1); else label.innerHTML = "Custom" + (i-1);
label.style.top = "auto"; //label.style.top = "auto";
slider.style.display = "block"; slider.style.display = "block";
slider.style.top = topPosition + "px"; slider.style.top = topPosition + "px";
topPosition += 28; // increase top position for the next control topPosition += 28; // increase top position for the next control
@ -1289,7 +1289,7 @@ function setSliderAndColorControl(idx, applyDef=false)
} else { } else {
// disable label and slider // disable label and slider
slider.style.display = "none"; slider.style.display = "none";
label.style.display = "none"; //label.style.display = "none";
} }
} }
if (topPosition>0) topPosition += 2; if (topPosition>0) topPosition += 2;
@ -1530,7 +1530,10 @@ function makeSeg()
function resetUtil() function resetUtil()
{ {
gId('segutil').innerHTML = '<button class="btn btn-s" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>Add segment</button>'; // gId('segutil').innerHTML = '<button class="btn btn-s" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>segment</button>';
gId('segutil').innerHTML = '<div class="seg btn btn-s" style="border-radius:24px;">'
+ '<label class="check schkl"><input type="checkbox" onchange="selSegAll(this)"><span class="checkmark schk"></span></label>'
+ '<div class="segname" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>segment</div></div>';
} }
var plJson = {"0":{ var plJson = {"0":{
@ -1701,7 +1704,14 @@ ${(i>0)? ('<div class="h">ID ' +i+ '</div>'):""}`;
function makePUtil() function makePUtil()
{ {
gId('putil').innerHTML = `<div class="pres"><div class="segin expanded">${makeP(0)}</div></div>`; let p = gId('putil');
p.classList.remove('staybot');
p.innerHTML = `<div class="pres"><div class="segin expanded">${makeP(0)}</div></div>`;
p.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
gId('psFind').classList.remove('staytop');
} }
function makePlEntry(p,i) { function makePlEntry(p,i) {
@ -1736,14 +1746,23 @@ function makePlUtil()
showToast("You need at least 2 presets to make a playlist!"); //return; showToast("You need at least 2 presets to make a playlist!"); //return;
} }
if (plJson[0].transition[0] < 0) plJson[0].transition[0] = tr; if (plJson[0].transition[0] < 0) plJson[0].transition[0] = tr;
gId('putil').innerHTML = `<div class="pres"><div class="segin expanded" id="seg100">${makeP(0,true)}</div></div>`; let p = gId('putil');
p.classList.remove('staybot');
p.innerHTML = `<div class="pres"><div class="segin expanded" id="seg100">${makeP(0,true)}</div></div>`;
refreshPlE(0); refreshPlE(0);
p.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
gId('psFind').classList.remove('staytop');
} }
function resetPUtil() function resetPUtil()
{ {
gId('putil').innerHTML = `<button class="btn btn-s" onclick="makePUtil()"><i class="icons btn-icon">&#xe18a;</i>New&nbsp;preset</button><br>`+ gId('psFind').classList.add('staytop');
`<button class="btn btn-s" onclick="makePlUtil()"><i class="icons btn-icon">&#xe139;</i>New&nbsp;playlist</button>`; gId('putil').classList.add('staybot');
gId('putil').innerHTML = `<button class="btn btn-s" onclick="makePUtil()" style="float:left;"><i class="icons btn-icon">&#xe18a;</i>preset</button>`
+ `<button class="btn btn-s" onclick="makePlUtil()" style="float:right;"><i class="icons btn-icon">&#xe18a;<!--&#xe139;--></i>playlist</button>`;
} }
function tglCs(i) function tglCs(i)
@ -1758,6 +1777,14 @@ function tglSegn(s)
d.gId(`seg${s}t`).style.display = (window.getComputedStyle(d.gId(`seg${s}t`)).display === "none") ? "inline":"none"; d.gId(`seg${s}t`).style.display = (window.getComputedStyle(d.gId(`seg${s}t`)).display === "none") ? "inline":"none";
} }
function selSegAll(o)
{
//o.checked = true;
var obj = {"seg":[]};
for (let i=0; i<=lSeg; i++) obj.seg.push({"id":i,"sel":o.checked});
requestJson(obj);
}
function selSegEx(s) function selSegEx(s)
{ {
var obj = {"seg":[]}; var obj = {"seg":[]};

3329
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff

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 2203101 #define VERSION 2203111
//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