Merge remote-tracking branch 'upstream/main' into mdev
This commit is contained in:
Ewoud
@@ -392,12 +392,16 @@ button {
|
||||
}
|
||||
|
||||
.slider {
|
||||
background-color: var(--c-2);
|
||||
max-width: 300px;
|
||||
min-width: 280px;
|
||||
min-width: 260px;
|
||||
margin: 0 auto; /* add 5px; if you want some vertical space but looks ugly */
|
||||
border-radius: 24px;
|
||||
position: relative;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
#sliders .slider, #info .slider {
|
||||
background-color: var(--c-2);
|
||||
}
|
||||
|
||||
.filter, .option {
|
||||
@@ -425,14 +429,14 @@ button {
|
||||
box-shadow: 4px 4px 10px 4px var(--c-1);
|
||||
color: var(--c-f);
|
||||
text-align: center;
|
||||
padding: 5px 10px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
|
||||
/* Position the tooltip text */
|
||||
width: 160px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 100%;
|
||||
bottom: 80%;
|
||||
left: 50%;
|
||||
margin-left: -92px;
|
||||
|
||||
@@ -647,7 +651,7 @@ img {
|
||||
#wbal .sliderdisplay { background: linear-gradient(90deg, #ff8f1f 0%, #fff 50%, #cbdbff); }
|
||||
|
||||
/* wrapper divs hidden by default */
|
||||
#rgbwrap, #kwrap, #wwrap, #wbal, #qcs-w, #hexw {
|
||||
#rgbwrap, #swrap, #hwrap, #kwrap, #wwrap, #wbal, #qcs-w, #hexw {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -731,7 +735,11 @@ input[type=range]::-moz-range-thumb {
|
||||
|
||||
#Colors .sliderwrap {
|
||||
width: 260px;
|
||||
margin: 10px 0 0;
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
#Colors {
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
/* Dynamically hide brightness slider label */
|
||||
@@ -744,13 +752,14 @@ input[type=range]::-moz-range-thumb {
|
||||
margin-top: var(--bmt);
|
||||
}
|
||||
|
||||
#picker, #rgbwrap, #kwrap, #wwrap, #wbal, #vwrap, #qcs-w, #hexw, #pall, #ledmap {
|
||||
#picker, #qcs-w, #hexw, #pall, #ledmap {
|
||||
margin: 0 auto;
|
||||
width: 260px;
|
||||
/*background-color: unset;*/
|
||||
}
|
||||
|
||||
#picker {
|
||||
margin-top: 10px;
|
||||
margin-top: -10px !important;
|
||||
}
|
||||
|
||||
/* buttons */
|
||||
@@ -1409,6 +1418,9 @@ TD .checkmark, TD .radiomark {
|
||||
.expanded {
|
||||
display: inline-block !important;
|
||||
}
|
||||
.expanded .segin.hide, .expanded .presin.hide, .expanded .sbs.hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.m6 {
|
||||
margin: 6px 0;
|
||||
|
||||
@@ -90,68 +90,73 @@
|
||||
<div class ="container">
|
||||
<div id="Colors" class="tabcontent">
|
||||
<div id="picker" class="noslide"></div>
|
||||
<div id="hwrap">
|
||||
<!--p class="labels hd">Hue</p-->
|
||||
<div id="hwrap" class="slider">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderH" class="noslide" oninput="fromH()" onchange="setColor(0)" max="359" min="0" type="range" value="0" step="any">
|
||||
<div class="sliderdisplay" style="background: linear-gradient(90deg, #f00 2%, #ff0 19%, #0f0 35%, #0ff 52%, #00f 68%, #f0f 85%, #f00)"></div>
|
||||
</div><br>
|
||||
</div>
|
||||
<span class="tooltiptext">Hue</span>
|
||||
</div>
|
||||
<div id="swrap">
|
||||
<!--p class="labels hd">Saturation</p-->
|
||||
<div id="swrap" class="slider">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderS" class="noslide" oninput="fromS()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any">
|
||||
<div class="sliderdisplay" style="background: linear-gradient(90deg, #aaa 0%, #f00)"></div>
|
||||
</div><br>
|
||||
</div>
|
||||
<span class="tooltiptext">Saturation</span>
|
||||
</div>
|
||||
<div id="vwrap">
|
||||
<!--p class="labels hd">Value</p-->
|
||||
<div id="vwrap" class="slider">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderV" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div><br>
|
||||
</div>
|
||||
<span class="tooltiptext">Value/Brightness</span>
|
||||
</div>
|
||||
<div id="kwrap">
|
||||
<!--p class="labels hd">Temperature</p-->
|
||||
<div id="kwrap" class="slider">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderK" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">Kelvin/Temperature</span>
|
||||
</div>
|
||||
<div id="rgbwrap">
|
||||
<p class="labels hd">RGB color</p>
|
||||
<div id="rwrap" class="il">
|
||||
<!--p class="labels hd">RGB color</p-->
|
||||
<div id="rwrap" class="slider">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderR" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">Red channel</span>
|
||||
</div>
|
||||
<div id="gwrap" class="il">
|
||||
<div id="gwrap" class="slider">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderG" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">Green channel</span>
|
||||
</div>
|
||||
<div id="bwrap" class="il">
|
||||
<div id="bwrap" class="slider">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderB" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">Blue channel</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wwrap">
|
||||
<p class="labels hd">White channel</p>
|
||||
<div id="wwrap" class="slider">
|
||||
<!--p class="labels hd">White channel</p-->
|
||||
<div id="whibri" class="sliderwrap il">
|
||||
<input id="sliderW" class="noslide" oninput="fromW()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">White channel</span>
|
||||
</div>
|
||||
<div id="wbal">
|
||||
<p class="labels hd">White balance</p>
|
||||
<div id="wbal" class="slider">
|
||||
<!--p class="labels hd">White balance</p-->
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderA" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
<span class="tooltiptext">White balance</span>
|
||||
</div>
|
||||
<div id="qcs-w">
|
||||
<div class="qcs" onclick="pC('#ff0000');" title="Red" style="background-color:#ff0000;"></div>
|
||||
@@ -322,8 +327,7 @@
|
||||
<div id="segutil2">
|
||||
<button class="btn btn-s" id="rsbtn" onclick="rSegs()">Reset segments</button>
|
||||
</div>
|
||||
<br>
|
||||
<p>Transition: <input id="tt" class="noslide" type="number" min="0" max="65.5" step="0.1" value="0.7"> s</p>
|
||||
<p>Transition: <input id="tt" type="number" min="0" max="65.5" step="0.1" value="0.7"> s</p>
|
||||
<p id="ledmap" class="hide"></p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, sy
|
||||
var hasWhite = false, hasRGB = false, hasCCT = false;
|
||||
var nlDur = 60, nlTar = 0;
|
||||
var nlMode = false;
|
||||
var segLmax = 0; // size (in pixels) of largest selected segment
|
||||
var selectedFx = 0;
|
||||
var selectedPal = 0;
|
||||
var csel = 0; // selected color slot (0-2)
|
||||
@@ -63,13 +64,10 @@ function setCSL(cs)
|
||||
let w = cs.dataset.w ? parseInt(cs.dataset.w) : 0;
|
||||
let hasShadow = getComputedStyle(cs).textShadow !== "none";
|
||||
if (hasRGB && !isRgbBlack(cs.dataset)) {
|
||||
cs.style.backgroundColor = rgbStr(cs.dataset);
|
||||
if (!hasShadow) cs.style.color = rgbBri(cs.dataset) > 127 ? "#000":"#fff"; // if text has no CSS "shadow"
|
||||
if (hasWhite && w > 0) {
|
||||
cs.style.background = `linear-gradient(180deg, ${rgbStr(cs.dataset)} 30%, rgb(${w},${w},${w}))`;
|
||||
}
|
||||
cs.style.background = (hasWhite && w > 0) ? `linear-gradient(180deg, ${rgbStr(cs.dataset)} 30%, rgb(${w},${w},${w}))` : rgbStr(cs.dataset);
|
||||
} else {
|
||||
if (!hasWhite) w = 0;
|
||||
if (hasRGB && !hasWhite) w = 0;
|
||||
cs.style.background = `rgb(${w},${w},${w})`;
|
||||
if (!hasShadow) cs.style.color = w > 127 ? "#000":"#fff";
|
||||
}
|
||||
@@ -779,8 +777,7 @@ function populateSegments(s)
|
||||
<i class="icons e-icon flr" id="sege${i}" onclick="expand(${i})"></i>
|
||||
${cfg.comp.segpwr?segp:''}
|
||||
<div class="segin" id="seg${i}in">
|
||||
<input id="seg${i}fx" value="${inst.fx}" type="hidden"/>
|
||||
<input type="text" class="ptxt noslide" id="seg${i}t" autocomplete="off" maxlength=32 value="${inst.n?inst.n:""}" placeholder="Enter name..."/>
|
||||
<input type="text" class="ptxt" id="seg${i}t" autocomplete="off" maxlength=32 value="${inst.n?inst.n:""}" placeholder="Enter name..."/>
|
||||
<table class="infot segt">
|
||||
<tr>
|
||||
<td>${isM&&staX<mw*mh?'Start X':'Start LED'}</td>
|
||||
@@ -788,24 +785,24 @@ function populateSegments(s)
|
||||
<td>${isM&&staX<mw*mh?'':'Offset'}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input class="noslide segn" id="seg${i}s" type="number" min="0" max="${(isM&&staX<mw*mh?mw:ledCount)-1}" value="${staX}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td>
|
||||
<td><input class="noslide segn" id="seg${i}e" type="number" min="0" max="${(isM&&staX<mw*mh?mw:ledCount)}" value="${stoX-(cfg.comp.seglen?staX:0)}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td>
|
||||
<td style="text-align:revert;">${isM&&staX<mw*mh?miXck+'<br>'+rvXck:''}<input class="noslide segn ${isM&&staX<mw*mh?'hide':''}" id="seg${i}of" type="number" value="${inst.of}" oninput="updateLen(${i})"></td>
|
||||
<td><input class="segn" id="seg${i}s" type="number" min="0" max="${(isM&&staX<mw*mh?mw:ledCount)-1}" value="${staX}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td>
|
||||
<td><input class="segn" id="seg${i}e" type="number" min="0" max="${(isM&&staX<mw*mh?mw:ledCount)}" value="${stoX-(cfg.comp.seglen?staX:0)}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td>
|
||||
<td style="text-align:revert;">${isM&&staX<mw*mh?miXck+'<br>'+rvXck:''}<input class="segn ${isM&&staX<mw*mh?'hide':''}" id="seg${i}of" type="number" value="${inst.of}" oninput="updateLen(${i})"></td>
|
||||
</tr>
|
||||
${isM&&staX<mw*mh ? '<tr><td>Start Y</td><td>'+(cfg.comp.seglen?'Height':'Stop Y')+'</td><td></td></tr>'+
|
||||
'<tr>'+
|
||||
'<td><input class="noslide segn" id="seg'+i+'sY" type="number" min="0" max="'+(mh-1)+'" value="'+staY+'" oninput="updateLen('+i+')" onkeydown="segEnter('+i+')"></td>'+
|
||||
'<td><input class="noslide segn" id="seg'+i+'eY" type="number" min="0" max="'+mh+'" value="'+(stoY-(cfg.comp.seglen?staY:0))+'" oninput="updateLen('+i+')" onkeydown="segEnter('+i+')"></td>'+
|
||||
'<td><input class="segn" id="seg'+i+'sY" type="number" min="0" max="'+(mh-1)+'" value="'+staY+'" oninput="updateLen('+i+')" onkeydown="segEnter('+i+')"></td>'+
|
||||
'<td><input class="segn" id="seg'+i+'eY" type="number" min="0" max="'+mh+'" value="'+(stoY-(cfg.comp.seglen?staY:0))+'" oninput="updateLen('+i+')" onkeydown="segEnter('+i+')"></td>'+
|
||||
'<td style="text-align:revert;">'+miYck+'<br>'+rvYck+'</td>'+
|
||||
'</tr>':''}
|
||||
<tr>
|
||||
<td>Grouping</td>
|
||||
<td>Spacing</td>
|
||||
<td><!--Apply--></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input class="noslide segn" id="seg${i}grp" type="number" min="1" max="255" value="${inst.grp}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td>
|
||||
<td><input class="noslide segn" id="seg${i}spc" type="number" min="0" max="255" value="${inst.spc}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td>
|
||||
<td><input class="segn" id="seg${i}grp" type="number" min="1" max="255" value="${inst.grp}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td>
|
||||
<td><input class="segn" id="seg${i}spc" type="number" min="0" max="255" value="${inst.spc}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td>
|
||||
<td style="text-align:revert;"><button class="btn btn-xs" onclick="setSeg(${i})"><i class="icons btn-icon" id="segc${i}"></i></button></td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -836,10 +833,13 @@ function populateSegments(s)
|
||||
for (var i = 0; i <= lSeg; i++) {
|
||||
updateLen(i, false); //WLEDMM: no draw
|
||||
updateTrail(gId(`seg${i}bri`));
|
||||
gId(`segr${i}`).style.display = "none";
|
||||
gId(`segr${i}`).classList.add("hide");
|
||||
if (!gId(`seg${i}sel`).checked && gId('selall')) gId('selall').checked = false; // uncheck if at least one is unselected.
|
||||
}
|
||||
if (segCount < 2) gId(`segd${lSeg}`).style.display = "none";
|
||||
if (segCount < 2) {
|
||||
gId(`segd${lSeg}`).classList.add("hide");
|
||||
gId(`segp0`).classList.add("hide");
|
||||
}
|
||||
if (!isM && !noNewSegs && (cfg.comp.seglen?parseInt(gId(`seg${lSeg}s`).value):0)+parseInt(gId(`seg${lSeg}e`).value)<ledCount) gId(`segr${lSeg}`).style.display = "inline";
|
||||
gId('segutil2').style.display = (segCount > 1) ? "block":"none"; // rsbtn parent
|
||||
|
||||
@@ -888,6 +888,7 @@ function populateEffects()
|
||||
let m = (eP.length<4 || eP[3]==='')?'1':eP[3]; // flags
|
||||
if (id == 0) m = ''; // solid has no flags
|
||||
if (m.length>0) {
|
||||
if (m.includes('0')) nm += "•"; // 0D effects (PWM & On/Off)
|
||||
if (m.includes('1')) nm += "⋮"; // 1D effects
|
||||
if (m.includes("1.5d")) nm += "⋮"; // WLEDMM: vStrips
|
||||
if (m.includes('2')) nm += "▦"; // 2D effects
|
||||
@@ -1440,18 +1441,19 @@ function updateUI()
|
||||
}
|
||||
if (hasWhite) updateTrail(gId('sliderW'));
|
||||
|
||||
gId('wwrap').style.display = (hasWhite) ? "block":"none"; // white channel
|
||||
gId('wbal').style.display = (hasCCT) ? "block":"none"; // white balance
|
||||
var ccfg = cfg.comp.colors;
|
||||
gId('hexw').style.display = ccfg.hex ? "block":"none"; // HEX input
|
||||
gId('picker').style.display = (hasRGB && ccfg.picker) ? "block":"none"; // color picker wheel
|
||||
gId('hwrap').style.display = (hasRGB && !ccfg.picker) ? "block":"none"; // color picker wheel
|
||||
gId('swrap').style.display = (hasRGB && !ccfg.picker) ? "block":"none"; // color picker wheel
|
||||
gId('vwrap').style.display = (hasRGB /*&& ccfg.picker*/) ? "block":"none"; // brightness (value) slider
|
||||
gId('kwrap').style.display = (hasRGB && !hasCCT /*&& ccfg.picker*/) ? "block":"none"; // Kelvin slider
|
||||
gId('rgbwrap').style.display = (hasRGB && ccfg.rgb) ? "block":"none"; // RGB sliders
|
||||
gId('qcs-w').style.display = (hasRGB && ccfg.quick) ? "block":"none"; // quick selection
|
||||
//gId('palw').style.display = hasRGB ? "block":"none"; // palettes
|
||||
gId('wwrap').style.display = (hasWhite) ? "block":"none"; // white channel
|
||||
gId('wbal').style.display = (hasCCT) ? "block":"none"; // white balance
|
||||
gId('hexw').style.display = (ccfg.hex) ? "block":"none"; // HEX input
|
||||
gId('picker').style.display = (hasRGB && ccfg.picker) ? "block":"none"; // color picker wheel
|
||||
gId('hwrap').style.display = (hasRGB && !ccfg.picker) ? "block":"none"; // hue slider
|
||||
gId('swrap').style.display = (hasRGB && !ccfg.picker) ? "block":"none"; // saturation slider
|
||||
gId('vwrap').style.display = (hasRGB) ? "block":"none"; // brightness (value) slider
|
||||
gId('kwrap').style.display = (hasRGB && !hasCCT) ? "block":"none"; // Kelvin slider
|
||||
gId('rgbwrap').style.display = (hasRGB && ccfg.rgb) ? "block":"none"; // RGB sliders
|
||||
gId('qcs-w').style.display = (hasRGB && ccfg.quick) ? "block":"none"; // quick selection
|
||||
//gId('csl').style.display = (hasRGB || hasWhite) ? "block":"none"; // color selectors (hide for On/Off bus)
|
||||
//gId('palw').style.display = (hasRGB) ? "inline-block":"none"; // palettes are shown/hidden in setEffectParameters()
|
||||
|
||||
updatePA();
|
||||
updatePSliders();
|
||||
@@ -1496,7 +1498,19 @@ function updateSelectedFx()
|
||||
if (selectedEffect) {
|
||||
selectedEffect.classList.add('selected');
|
||||
setEffectParameters(selectedFx);
|
||||
|
||||
// hide non-0D effects if segment only has 1 pixel (0D)
|
||||
var fxs = parent.querySelectorAll('.lstI');
|
||||
for (const fx of fxs) {
|
||||
let opts = fx.dataset.opt.split(";");
|
||||
if (fx.dataset.id>0) {
|
||||
if (segLmax==0) fx.classList.add('hide'); // none of the segments selected (hide all effects)
|
||||
else {
|
||||
if (segLmax==1 && (!opts[3] || opts[3].indexOf("0")<0)) fx.classList.add('hide');
|
||||
else fx.classList.remove('hide');
|
||||
}
|
||||
}
|
||||
}
|
||||
// hide 2D mapping and/or sound simulation options
|
||||
var selectedName = selectedEffect.querySelector(".lstIname").innerText;
|
||||
var segs = gId("segcont").querySelectorAll(`div[data-map="map2D"]`);
|
||||
for (const seg of segs) if (selectedName.indexOf("\u25A6")<0) seg.classList.remove('hide'); else seg.classList.add('hide');
|
||||
@@ -1584,6 +1598,7 @@ function readState(s,command=false)
|
||||
var selc=0;
|
||||
var sellvl=0; // 0: selc is invalid, 1: selc is mainseg, 2: selc is first selected
|
||||
hasRGB = hasWhite = hasCCT = false;
|
||||
segLmax = 0;
|
||||
for (let i = 0; i < (s.seg||[]).length; i++)
|
||||
{
|
||||
if (sellvl == 0 && s.seg[i].id == s.mainseg) {
|
||||
@@ -1597,6 +1612,8 @@ function readState(s,command=false)
|
||||
hasRGB |= !!(lc & 0x01);
|
||||
hasWhite |= !!(lc & 0x02);
|
||||
hasCCT |= !!(lc & 0x04);
|
||||
let sLen = (s.seg[i].stop - s.seg[i].start)*(s.seg[i].stopY?(s.seg[i].stopY - s.seg[i].startY):1);
|
||||
segLmax = segLmax < sLen ? sLen : segLmax;
|
||||
}
|
||||
}
|
||||
var i=s.seg[selc];
|
||||
@@ -1617,7 +1634,7 @@ function readState(s,command=false)
|
||||
cd[e].dataset.r = i.col[e][0];
|
||||
cd[e].dataset.g = i.col[e][1];
|
||||
cd[e].dataset.b = i.col[e][2];
|
||||
if (hasWhite) { cd[e].dataset.w = i.col[e][3]; }
|
||||
if (hasWhite || (!hasRGB && !hasWhite)) { cd[e].dataset.w = i.col[e][3]; }
|
||||
setCSL(cd[e]);
|
||||
}
|
||||
selectSlot(csel);
|
||||
@@ -1769,8 +1786,8 @@ function setEffectParameters(idx)
|
||||
var palw = gId("palw"); // wrapper
|
||||
var pall = gId("pall"); // label
|
||||
// if not controlDefined or palette has a value
|
||||
if ((!controlDefined) || (paOnOff.length>0 && paOnOff[0]!="" && isNaN(paOnOff[0]))) {
|
||||
palw.style.display = hasRGB ? "inline-block" : "none";
|
||||
if (hasRGB && ((!controlDefined) || (paOnOff.length>0 && paOnOff[0]!="" && isNaN(paOnOff[0])))) {
|
||||
palw.style.display = "inline-block";
|
||||
if (paOnOff.length>0 && paOnOff[0].indexOf("=")>0) {
|
||||
// embeded default values
|
||||
var dPos = paOnOff[0].indexOf("=");
|
||||
@@ -1983,21 +2000,21 @@ function makeSeg()
|
||||
});
|
||||
var cn = `<div class="seg lstI expanded">
|
||||
<div class="segin">
|
||||
<input type="text" class="noslide" id="seg${lu}t" autocomplete="off" maxlength=32 value="" placeholder="New segment ${lu}"/>
|
||||
<input type="text" id="seg${lu}t" autocomplete="off" maxlength=32 value="" placeholder="New segment ${lu}"/>
|
||||
<table class="segt">
|
||||
<tr>
|
||||
<td width="38%">${isM?'Start X':'Start LED'}</td>
|
||||
<td width="38%">${isM?(cfg.comp.seglen?"Width":"Stop X"):(cfg.comp.seglen?"LED count":"Stop LED")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input class="noslide segn" id="seg${lu}s" type="number" min="0" max="${isM?mw-1:ledCount-1}" value="${ns}" oninput="updateLen(${lu})" onkeydown="segEnter(${lu})"></td>
|
||||
<td><input class="noslide segn" id="seg${lu}e" type="number" min="0" max="${ct}" value="${ct}" oninput="updateLen(${lu})" onkeydown="segEnter(${lu})"></td>
|
||||
<td><input class="segn" id="seg${lu}s" type="number" min="0" max="${isM?mw-1:ledCount-1}" value="${ns}" oninput="updateLen(${lu})" onkeydown="segEnter(${lu})"></td>
|
||||
<td><input class="segn" id="seg${lu}e" type="number" min="0" max="${ct}" value="${ct}" oninput="updateLen(${lu})" onkeydown="segEnter(${lu})"></td>
|
||||
<td><button class="btn btn-xs" onclick="setSeg(${lu});"><i class="icons bth-icon" id="segc${lu}"></i></button></td>
|
||||
</tr>
|
||||
<tr id="mkSYH" class="${isM?"":"hide"}"><td>Start Y</td><td>${cfg.comp.seglen?'Height':'Stop Y'}</td></tr>
|
||||
<tr id="mkSYD" class="${isM?"":"hide"}">
|
||||
<td><input class="noslide segn" id="seg${lu}sY" type="number" min="0" max="${mh-1}" value="0" oninput="updateLen(${lu})" onkeydown="segEnter(${lu})"></td>
|
||||
<td><input class="noslide segn" id="seg${lu}eY" type="number" min="0" max="${mh}" value="${isM?mh:1}" oninput="updateLen(${lu})" onkeydown="segEnter(${lu})"></td>
|
||||
<td><input class="segn" id="seg${lu}sY" type="number" min="0" max="${mh-1}" value="0" oninput="updateLen(${lu})" onkeydown="segEnter(${lu})"></td>
|
||||
<td><input class="segn" id="seg${lu}eY" type="number" min="0" max="${mh}" value="${isM?mh:1}" oninput="updateLen(${lu})" onkeydown="segEnter(${lu})"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="h" id="seg${lu}len">${ledCount - ns} LEDs</div>
|
||||
@@ -2122,7 +2139,7 @@ function makeP(i,pl)
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<div id="pl${i}o1" style="display:${rep>0?"block":"none"}">
|
||||
<div class="c">Repeat <input class="noslide" type="number" id="pl${i}rp" oninput="plR(${i})" max=127 min=0 value=${rep>0?rep:1}> times</div>
|
||||
<div class="c">Repeat <input type="number" id="pl${i}rp" oninput="plR(${i})" max=127 min=0 value=${rep>0?rep:1}> times</div>
|
||||
<div class="sel">End preset:<br>
|
||||
<div class="sel-p"><select class="sel-ple" id="pl${i}selEnd" onchange="plR(${i})" data-val=${plJson[i].end?plJson[i].end:0}>
|
||||
<option value="0">None</option>
|
||||
@@ -2161,8 +2178,8 @@ ${makePlSel(plJson[i].end?plJson[i].end:0, true)}
|
||||
}
|
||||
}
|
||||
|
||||
return `<input type="text" class="ptxt noslide ${i==0?'show':''}" id="p${i}txt" autocomplete="off" maxlength=32 value="${(i>0)?pName(i):""}" placeholder="Enter name..."/>
|
||||
<div class="c">Quick load label: <input type="text" class="stxt noslide" maxlength=2 value="${qlName(i)}" id="p${i}ql" autocomplete="off"/></div>
|
||||
return `<input type="text" class="ptxt ${i==0?'show':''}" id="p${i}txt" autocomplete="off" maxlength=32 value="${(i>0)?pName(i):""}" placeholder="Enter name..."/>
|
||||
<div class="c">Quick load label: <input type="text" class="stxt" maxlength=2 value="${qlName(i)}" id="p${i}ql" autocomplete="off"/></div>
|
||||
<div class="h">(leave empty for no Quick load button)</div>
|
||||
<div ${pl&&i==0?"style='display:none'":""}>
|
||||
<label class="check revchkl">
|
||||
@@ -2173,9 +2190,9 @@ ${makePlSel(plJson[i].end?plJson[i].end:0, true)}
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="po2" id="p${i}o2">API command<br><textarea class="apitxt noslide" id="p${i}api"></textarea></div>
|
||||
<div class="po2" id="p${i}o2">API command<br><textarea class="apitxt" id="p${i}api"></textarea></div>
|
||||
<div class="po1" id="p${i}o1">${content}</div>
|
||||
<div class="c m6">Save to ID <input class="noslide" id="p${i}id" type="number" oninput="checkUsed(${i})" max=250 min=1 value=${(i>0)?i:getLowestUnusedP()}></div>
|
||||
<div class="c m6">Save to ID <input id="p${i}id" type="number" oninput="checkUsed(${i})" max=250 min=1 value=${(i>0)?i:getLowestUnusedP()}></div>
|
||||
<div class="c">
|
||||
<button class="btn btn-p" onclick="saveP(${i},${pl})"><i class="icons btn-icon"></i>Save</button>
|
||||
${(i>0)?'<button class="btn btn-p" id="p'+i+'del" onclick="delP('+i+')"><i class="icons btn-icon"></i>Delete':'<button class="btn btn-p" onclick="resetPUtil()">Cancel'}</button>
|
||||
@@ -2220,8 +2237,8 @@ function makePlEntry(p,i)
|
||||
<td class="c">#${i+1}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="c" width="40%"><input class="noslide segn" type="number" placeholder="Duration" max=6553.0 min=0.2 step=0.1 oninput="pleDur(${p},${i},this)" value="${plJson[p].dur[i]/10.0}">s</td>
|
||||
<td class="c" width="40%"><input class="noslide segn" type="number" placeholder="Transition" max=65.0 min=0.0 step=0.1 oninput="pleTr(${p},${i},this)" value="${plJson[p].transition[i]/10.0}">s</td>
|
||||
<td class="c" width="40%"><input class="segn" type="number" placeholder="Duration" max=6553.0 min=0.2 step=0.1 oninput="pleDur(${p},${i},this)" value="${plJson[p].dur[i]/10.0}">s</td>
|
||||
<td class="c" width="40%"><input class="segn" type="number" placeholder="Transition" max=65.0 min=0.0 step=0.1 oninput="pleTr(${p},${i},this)" value="${plJson[p].transition[i]/10.0}">s</td>
|
||||
<td class="c"><button class="btn btn-pl-del" onclick="delPl(${p},${i})"><i class="icons btn-icon"></i></button></div></td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -2513,7 +2530,7 @@ function setLor(i)
|
||||
function setPreset(i)
|
||||
{
|
||||
var obj = {"ps":i};
|
||||
if (pJson && pJson[i] && (!pJson[i].win || pJson[i].win.indexOf("Please") <= 0)) {
|
||||
if (!isPlaylist(i) && pJson && pJson[i] && (!pJson[i].win || pJson[i].win.indexOf("Please") <= 0)) {
|
||||
// we will send the complete preset content as to avoid delay introduced by
|
||||
// async nature of applyPreset() and having to read the preset from file system.
|
||||
obj = {"pd":i}; // use "pd" instead of "ps" to indicate that we are sending the preset content directly
|
||||
@@ -3156,7 +3173,7 @@ function hasIroClass(classList)
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
//required by rangetouch.js
|
||||
function lock(e)
|
||||
{
|
||||
if (pcMode) return;
|
||||
@@ -3170,7 +3187,7 @@ function lock(e)
|
||||
|
||||
_C.classList.toggle('smooth', !(locked = true));
|
||||
}
|
||||
|
||||
//required by rangetouch.js
|
||||
function move(e)
|
||||
{
|
||||
if(!locked || pcMode) return;
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
var wasAdvanced = -1; //WLEDMM
|
||||
function B(){window.open("/settings","_self");}
|
||||
function gId(n){return d.getElementById(n);}
|
||||
function fS(){d.Sf.submit();} // <button type=submit> sometimes didn't work
|
||||
// https://www.educative.io/edpresso/how-to-dynamically-load-a-js-file-in-javascript
|
||||
function loadJS(FILE_URL, async = true) {
|
||||
let scE = d.createElement("script");
|
||||
@@ -379,7 +380,7 @@ Y:<input id="P${i}Y" name="P${i}Y" type="number" min="0" max="255" value="0" oni
|
||||
<form id="form_s" name="Sf" method="post">
|
||||
<div class="toprow">
|
||||
<div class="helpB"><button type="button" onclick="H()">?</button></div>
|
||||
<button type="button" onclick="B()">Back</button><button type="submit">Save</button><hr>
|
||||
<button type="button" onclick="B()">Back</button><button type="button" onclick="fS()">Save</button><hr>
|
||||
</div>
|
||||
<h2>2D setup</h2>
|
||||
Strip or panel:
|
||||
@@ -458,7 +459,7 @@ Y:<input id="P${i}Y" name="P${i}Y" type="number" min="0" max="255" value="0" oni
|
||||
A value of -1 means that pixel at that position is missing, a value of 0 means never paint that pixel, and 1 means regular pixel.</i>
|
||||
</div>
|
||||
<hr>
|
||||
<button type="button" onclick="B()">Back</button><button type="submit">Save</button>
|
||||
<button type="button" onclick="B()">Back</button><button type="button" onclick="fS()">Save</button>
|
||||
</form>
|
||||
<div id="toast"></div>
|
||||
</body>
|
||||
|
||||
@@ -144,7 +144,7 @@
|
||||
|
||||
function UI(change=false)
|
||||
{
|
||||
var isRGBW = false, memu = 0;
|
||||
let isRGBW = false, gRGBW = false, memu = 0;
|
||||
|
||||
gId('ampwarning').style.display = (d.Sf.MA.value > 7200) ? 'inline':'none';
|
||||
|
||||
@@ -185,7 +185,7 @@
|
||||
if (t > 31 && t < 48) d.getElementsByName("LC"+n)[0].value = 1; // for sanity change analog count just to 1 LED
|
||||
}
|
||||
gId("rf"+n).onclick = (t == 31) ? (()=>{return false}) : (()=>{}); // prevent change for TM1814
|
||||
isRGBW = ((t > 17 && t < 22) || t == 30 || t == 31 || (t > 40 && t < 46 && t != 43) || t == 88); // RGBW checkbox, TYPE_xxxx values from const.h
|
||||
gRGBW |= isRGBW = ((t > 17 && t < 22) || t == 30 || t == 31 || (t > 40 && t < 46 && t != 43) || t == 88); // RGBW checkbox, TYPE_xxxx values from const.h
|
||||
gId("co"+n).style.display = ((t >= 80 && t < 96) || (t >= 40 && t < 48)) ? "none":"inline"; // hide color order for PWM
|
||||
gId("dig"+n+"w").style.display = (t == 30 || t == 31) ? "inline":"none"; // show swap channels dropdown
|
||||
if (!(t == 30 || t == 31)) d.getElementsByName("WO"+n)[0].value = 0; // reset swapping
|
||||
@@ -198,11 +198,11 @@
|
||||
gId("psd"+n).innerHTML = (t >= 40 && t < 48) ? "Index:":"Start:"; // change analog start description
|
||||
}
|
||||
}
|
||||
// display white channel calculation method
|
||||
var myC = d.querySelectorAll('.wc'),
|
||||
l = myC.length;
|
||||
for (i = 0; i < l; i++) {
|
||||
myC[i].style.display = (isRGBW) ? 'inline':'none';
|
||||
// display global white channel overrides
|
||||
gId("wc").style.display = (gRGBW) ? 'inline':'none';
|
||||
if (!gRGBW) {
|
||||
d.Sf.AW.selectedIndex = 0;
|
||||
d.Sf.CR.checked = false;
|
||||
}
|
||||
// check for pin conflicts
|
||||
var LCs = d.getElementsByTagName("input");
|
||||
@@ -666,8 +666,8 @@ Length: <input type="number" name="XC${i}" id="xc${i}" class="l" min="1" max="65
|
||||
<option value="3">Sunrise</option>
|
||||
</select>
|
||||
<h3>White management</h3>
|
||||
White Balance correction: <input type="checkbox" name="CCT"> <br>
|
||||
<span class="wc">
|
||||
White Balance correction: <input type="checkbox" name="CCT"><br>
|
||||
<div id="wc">
|
||||
Global override for Auto-calculate white:<br>
|
||||
<select name="AW">
|
||||
<option value=255>Disabled</option>
|
||||
@@ -677,9 +677,10 @@ Length: <input type="number" name="XC${i}" id="xc${i}" class="l" min="1" max="65
|
||||
<option value=3>Dual</option>
|
||||
<option value=4>Max</option>
|
||||
</select>
|
||||
<br>
|
||||
Calculate CCT from RGB: <input type="checkbox" name="CR"> <br>
|
||||
CCT additive blending: <input type="number" class="s" min="0" max="100" name="CB" required> %</span>
|
||||
<br>
|
||||
Calculate CCT from RGB: <input type="checkbox" name="CR"><br>
|
||||
CCT additive blending: <input type="number" class="s" min="0" max="100" name="CB" required> %
|
||||
</div>
|
||||
<h3>Advanced</h3>
|
||||
Palette blending:
|
||||
<select name="PB">
|
||||
|
||||
@@ -127,19 +127,19 @@
|
||||
<p class="label h">RGB channels</p>
|
||||
<div id="rwrap" class="il">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderR" onchange="fromRgb()" max="255" min="0" type="range" value="128" />
|
||||
<input id="sliderR" class="noslide" onchange="fromRgb()" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
</div><br>
|
||||
<div id="gwrap" class="il">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderG" onchange="fromRgb()" max="255" min="0" type="range" value="128" />
|
||||
<input id="sliderG" class="noslide" onchange="fromRgb()" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
</div><br>
|
||||
<div id="bwrap" class="il">
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderB" onchange="fromRgb()" max="255" min="0" type="range" value="128" />
|
||||
<input id="sliderB" class="noslide" onchange="fromRgb()" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
</div><br>
|
||||
@@ -147,14 +147,14 @@
|
||||
<div id="wwrap" class="center">
|
||||
<p class="label h">White channel</p>
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderW" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
|
||||
<input id="sliderW" class="noslide" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wbal">
|
||||
<p class="label h">White balance</p>
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderA" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
|
||||
<input id="sliderA" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -562,7 +562,7 @@ function populateSegments(s)
|
||||
<div class="il">
|
||||
<i class="icons slider-icon pwr ${powered[i] ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})" title="${inst.n}"></i>
|
||||
<div id="sliderSeg${i}Bri" class="sliderwrap il">
|
||||
<input id="seg${i}bri" class="noslide" onchange="setSegBri(${i})" oninput="updateTrail(this)" max="255" min="1" type="range" value="${inst.bri}" />
|
||||
<input id="seg${i}bri" onchange="setSegBri(${i})" oninput="updateTrail(this)" max="255" min="1" type="range" value="${inst.bri}" />
|
||||
<div class="sliderdisplay"></div>
|
||||
</div>
|
||||
<output class="sliderbubble"></output>
|
||||
@@ -1390,7 +1390,7 @@ function hasIroClass(classList)
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
//required by rangetouch.js
|
||||
function lock(e)
|
||||
{
|
||||
var l = e.target.classList;
|
||||
@@ -1403,7 +1403,7 @@ function lock(e)
|
||||
|
||||
_C.classList.toggle('smooth', !(locked = true));
|
||||
}
|
||||
|
||||
//required by rangetouch.js
|
||||
function move(e)
|
||||
{
|
||||
if(!locked) return;
|
||||
|
||||
Reference in New Issue
Block a user