Select/deselect all segments.
CSS optimisations & fixes.
This commit is contained in:
parent
8e5f2d91e8
commit
b3d691fff6
1
.gitignore
vendored
1
.gitignore
vendored
@ -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
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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()"></i>
|
<i class="icons slider-icon" style="cursor: pointer;" onclick="tglFreeze()"></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()"></i>
|
<i class="icons slider-icon" style="cursor: pointer;" onclick="tglLabels()"></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"></i>
|
<i class="icons slider-icon"></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"></i>
|
<i class="icons slider-icon"></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"></i>
|
<i class="icons slider-icon"></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">❤︎</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">❤︎</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">
|
||||||
|
@ -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"></i>Add segment</button>';
|
// gId('segutil').innerHTML = '<button class="btn btn-s" onclick="makeSeg()"><i class="icons btn-icon"></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"></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"></i>New preset</button><br>`+
|
gId('psFind').classList.add('staytop');
|
||||||
`<button class="btn btn-s" onclick="makePlUtil()"><i class="icons btn-icon"></i>New 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"></i>preset</button>`
|
||||||
|
+ `<button class="btn btn-s" onclick="makePlUtil()" style="float:right;"><i class="icons btn-icon"><!----></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
3329
wled00/html_ui.h
File diff suppressed because it is too large
Load Diff
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user