Exposing segment power and intensity button/slider

This commit is contained in:
Blaz Kristan 2021-05-16 17:19:35 +02:00
parent cc10ee0134
commit 94113827a7
4 changed files with 2137 additions and 2129 deletions

View File

@ -525,11 +525,11 @@ input[type=range]::-moz-range-thumb {
} }
.sws { .sws {
width: 212px; width: 220px;
} }
.sis { .sis {
width: 192px !important; width: 210px !important;
} }
.hd { .hd {
@ -687,7 +687,7 @@ input[type=number]::-webkit-outer-spin-button {
margin: 3px 0 6px 0 !important; margin: 3px 0 6px 0 !important;
} }
.segname { .segname, .pname {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 50%; left: 50%;
@ -695,15 +695,24 @@ input[type=number]::-webkit-outer-spin-button {
transform: translateX(-50%); transform: translateX(-50%);
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
text-align: center;
} }
/*
.segname {
padding: 7px 0;
font-size: 11px;
}
*/
.pname { .pname {
width: 208px; width: 208px;
text-align: center;
overflow: hidden; overflow: hidden;
text-overflow: clip; text-overflow: clip;
} }
.segpwr {
margin: 8px 0 0;
}
.pid { .pid {
position: absolute; position: absolute;
top: 0px; top: 0px;
@ -890,7 +899,7 @@ input[type=number]::-webkit-outer-spin-button {
position: relative; position: relative;
display: inline-block; display: inline-block;
padding: 8px; padding: 8px;
margin: 6px 0; margin: 3px 0;
width: 260px; width: 260px;
font-size: 19px; font-size: 19px;
background-color: var(--c-2); background-color: var(--c-2);
@ -1024,7 +1033,7 @@ input[type="text"].fnd:not(:placeholder-shown) {
.segin { .segin {
padding: 8px 8px 4px 8px; padding: 8px 8px 4px 8px;
display: none; display: none;
margin: 24px 0 0; /*margin: 24px 0 0;*/
} }
.expanded { .expanded {

View File

@ -487,7 +487,7 @@ function populatePresets(fromls)
cn += `<div class="seg pres" id="p${i}o">`; cn += `<div class="seg pres" id="p${i}o">`;
if (cfg.comp.pid) cn += `<div class="pid">${i}</div>`; if (cfg.comp.pid) cn += `<div class="pid">${i}</div>`;
cn += `<div class="segname pname" onclick="setPreset(${i})">${pName(i)}</div> cn += `<div class="pname" onclick="setPreset(${i})">${pName(i)}</div>
<i class="icons e-icon flr ${expanded[i+100] ? "exp":""}" id="sege${i+100}" onclick="expand(${i+100})">&#xe395;</i> <i class="icons e-icon flr ${expanded[i+100] ? "exp":""}" id="sege${i+100}" onclick="expand(${i+100})">&#xe395;</i>
<div class="segin" id="seg${i+100}"></div> <div class="segin" id="seg${i+100}"></div>
</div><br>`; </div><br>`;
@ -608,7 +608,14 @@ function populateSegments(s)
<div class="segname" onclick="selSegEx(${i})"> <div class="segname" onclick="selSegEx(${i})">
${inst.n ? inst.n : "Segment "+i} ${inst.n ? inst.n : "Segment "+i}
</div> </div>
<i class="icons e-icon flr ${expanded[i] ? "exp":""}" id="sege${i}" onclick="expand(${i})">&#xe395;</i> <i class="icons e-icon flr ${expanded[i] ? "exp":""}" id="sege${i}" onclick="expand(${i})">&#xe395;</i><br>
<div class="segpwr">
<i class="icons e-icon pwr ${powered[i] ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})">&#xe08f;</i>
<div class="sliderwrap il sws">
<input id="seg${i}bri" class="noslide sis" onchange="setSegBri(${i})" oninput="updateTrail(this)" max="255" min="1" type="range" value="${inst.bri}" />
<div class="sliderdisplay"></div>
</div>
</div>
<div class="segin ${expanded[i] ? "expanded":""}" id="seg${i}"> <div class="segin ${expanded[i] ? "expanded":""}" id="seg${i}">
<input type="text" class="ptxt noslide" id="seg${i}t" autocomplete="off" maxlength=32 value="${inst.n?inst.n:""}" placeholder="Enter name..."/><br> <input type="text" class="ptxt noslide" id="seg${i}t" autocomplete="off" maxlength=32 value="${inst.n?inst.n:""}" placeholder="Enter name..."/><br>
<table class="segt"> <table class="segt">
@ -631,11 +638,6 @@ function populateSegments(s)
</tr> </tr>
</table> </table>
<div class="h bp" id="seg${i}len"></div> <div class="h bp" id="seg${i}len"></div>
<i class="icons e-icon pwr ${powered[i] ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})">&#xe08f;</i>
<div class="sliderwrap il sws">
<input id="seg${i}bri" class="noslide sis" onchange="setSegBri(${i})" oninput="updateTrail(this)" max="255" min="1" type="range" value="${inst.bri}" />
<div class="sliderdisplay"></div>
</div>
<i class="icons e-icon del" id="segd${i}" onclick="delSeg(${i})">&#xe037;</i> <i class="icons e-icon del" id="segd${i}" onclick="delSeg(${i})">&#xe037;</i>
<label class="check revchkl"> <label class="check revchkl">
Reverse direction Reverse direction
@ -1305,11 +1307,7 @@ ${(i>0)? ('<div class="h">ID ' +i+ '</div>'):""}`;
function makePUtil() function makePUtil()
{ {
gId('putil').innerHTML = `<div class="seg pres"> gId('putil').innerHTML = `<div class="seg pres"><div class="pname newseg">New preset</div><div class="segin expanded">${makeP(0)}</div></div>`;
<div class="segname newseg">
New preset</div>
<div class="segin expanded">
${makeP(0)}</div></div>`;
updateTrail(gId('p0p')); updateTrail(gId('p0p'));
for (var i=0; i<expanded.length; i++) if (expanded[i]) expand(i); for (var i=0; i<expanded.length; i++) if (expanded[i]) expand(i);
} }

File diff suppressed because it is too large Load Diff

View File

@ -8,7 +8,7 @@
*/ */
// version code in format yymmddb (b = daily build) // version code in format yymmddb (b = daily build)
#define VERSION 2105152 #define VERSION 2105161
//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