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

Playlist UI (#2046)

Browse Source 
* Test 1

* State 2

* Playlist UI progress

* Playlist saving

* Playlist saving

* Playlist object array

* Added Offset to segment options

* Positioning

* Playlist UI complete
This commit is contained in:
Christian Schwinne 2021-06-30 01:01:15 +02:00 committed by GitHub
parent 7233c55428
commit 4b46502d22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 378 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
wled00/data/index.css
View File

@ -402,9 +402,8 @@ button {
} }
#imgw { #imgw {
width: 200px;
height: 55px;
display: inline-block; display: inline-block;
margin: 8px;
} }
#kv, #kn { #kv, #kn {
@ -432,6 +431,12 @@ img {
max-height: 100%; max-height: 100%;
} }
.wi {
image-rendering: pixelated;
image-rendering: crisp-edges;
width: 210px;
}
@keyframes fadein { @keyframes fadein {
from {bottom: 0; opacity: 0;} from {bottom: 0; opacity: 0;}
to {bottom: calc(var(--bh) + 22px); opacity: 1;} to {bottom: calc(var(--bh) + 22px); opacity: 1;}
@ -519,12 +524,16 @@ input[type=range]:active + .sliderbubble {
position: relative; position: relative;
} }
.sbs {
margin: 0px -20px 5px -6px;
}
.sws { .sws {
width: 212px; width: 230px;
} }
.sis { .sis {
width: 192px !important; width: 214px !important;
} }
.hd { .hd {
@ -561,12 +570,11 @@ input[type=range]:active + .sliderbubble {
} }
.btn-s { .btn-s {
padding: 9px;
width: 276px; width: 276px;
background-color: var(--c-2); background-color: var(--c-2);
} }
.btn-i { .btn-i {
padding-bottom: 3px; padding-bottom: 4px;
} }
.btn-icon { .btn-icon {
margin: 0px 8px 4px 0; margin: 0px 8px 4px 0;
@ -578,6 +586,19 @@ input[type=range]:active + .sliderbubble {
.btn-p { .btn-p {
width: 216px; width: 216px;
} }
.btn-xs {
width: 39px;
}
.btn-pl-add {
position: absolute;
bottom: -29px;
left: 94px;
}
.btn-pl-del {
position: absolute;
right: 2px;
bottom: -3px;
}
#qcs-w { #qcs-w {
margin-top: 10px; margin-top: 10px;
@ -601,6 +622,16 @@ input[type=range]:active + .sliderbubble {
width: 42px; width: 42px;
} }
.sel-pl {
width: 200px;
background-position: 176px 16px;
}
.sel-ple {
width: 216px;
background-position: 192px 16px;
}
select { select {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
@ -665,6 +696,11 @@ input[type=text] {
margin: 26px 0 6px 12px !important; margin: 26px 0 6px 12px !important;
} }
.plentry {
margin-top: 16px;
position: relative;
}
.stxt { .stxt {
width: 50px !important; width: 50px !important;
} }
@ -741,9 +777,9 @@ input[type=number]::-webkit-outer-spin-button {
.cnf-s { .cnf-s {
position: absolute; position: absolute;
top: 66px; top: 172px;
right: 28px; right: 23px;
padding: 43px 6px; padding: 7.5px 22px;
} }
.pwr { .pwr {
@ -1016,6 +1052,16 @@ input[type="text"].search:not(:placeholder-shown) {
color: red; color: red;
} }
.hrz {
width: auto;
height: 2px;
background-color: var(--c-e);
}
.hrz-pl {
margin: 20px 0;
position: relative;
}
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 6px; width: 6px;
} }

12
wled00/data/index.htm
View File

@ -165,15 +165,7 @@
<div id="pcont"> <div id="pcont">
Loading... Loading...
</div><br> </div><br>
<label class="check psvl"> Transition <input id="tt" class="noslide" type="number" min="0" max="65.5" step="0.1" value="0.7">s
Preset cycle
<input type="checkbox" id="cyToggle" onchange="toggleCY()">
<span class="checkmark psv"></span>
</label><br>
First preset: <input id="cycs" class="noslide" type="number" min="1" max="249" value="1"><br>
Last preset: <input id="cyce" class="noslide" type="number" min="2" max="250" value="3"><br>
Time per preset: <input id="cyct" class="noslide" type="number" min="0.2" max="6553.5" step="0.1" value="1.2">s<br>
Transition: <input id="cyctt" class="noslide" type="number" min="0" max="65.5" step="0.1" value="0.7">s
</div> </div>
</div> </div>
@ -189,7 +181,7 @@
<div id="namelabel" onclick="toggleNodes()"></div> <div id="namelabel" onclick="toggleNodes()"></div>
<div id="info" class="modal"> <div id="info" class="modal">
<div id="imgw"> <div id="imgw">
<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAggAAACMCAYAAAAZQlGEAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKLSURBVHhe7dgxjtwwEADBpf//5zUDwklnpzFAnKoSTigNFTT0AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGDcOieX+G5nvNLaznil6f1Nv+/tz3c7+3tmen/Tpu/jbe877c85AQD+EQgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAACEQAAAQiAAACEQAIAQCABACAQAINY5+aHvdsYRazvjK9jfM7fvz/0+Y3+/2+336w8CABACAQAIgQAAhEAAAEIgAAAhEACAEAgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAADEOudrfLczXmltZ3yF6fuwv2em9+d+n5ne3zT3cZfp+/AHAQAIgQAAhEAAAEIgAAAhEACAEAgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAACEQAAAYp3zNb7bGUes7Yz8wO334fmeuf35bmd/z9y+v9ufzx8EACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAACEQAAAQiAAACEQAIAQCABACAQAIAQCABACAQCIdc4x3+2MV1rbGfmFpr+/6e/l9ue73fT+pt1+H2/bn+/lGX8QAIAQCABACAQAIAQCABACAQAIgQAAhEAAAEIgAAAhEACAEAgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgP/u8/kLYCqAxINTyZkAAAAASUVORK5CYII="> <img class="wi" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAFCAYAAAC5Fuf5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABbSURBVChTlY9bDoAwDMNW7n9nwCipytQN4Z8tbrTHmDmF4oPzyldwRqp1SSdnV/NuZuzqerAByxXznBw3igkeFEfXyUuhK/yFM0CxJfyqXZEOc6/Sr9/bf7uIC5Nwd7orMvAPAAAAAElFTkSuQmCC" />
</div><br> </div><br>
<div id="kv">Loading...</div><br> <div id="kv">Loading...</div><br>
<button class="btn infobtn" onclick="requestJson(null)">Refresh</button> <button class="btn infobtn" onclick="requestJson(null)">Refresh</button>

421
wled00/data/index.js
View File

@ -14,11 +14,12 @@ var currentPreset = -1;
var lastUpdate = 0; var lastUpdate = 0;
var segCount = 0, ledCount = 0, lowestUnused = 0, maxSeg = 0, lSeg = 0; var segCount = 0, ledCount = 0, lowestUnused = 0, maxSeg = 0, lSeg = 0;
var pcMode = false, pcModeA = false, lastw = 0; var pcMode = false, pcModeA = false, lastw = 0;
var tr = 7;
var d = document; var d = document;
const ranges = RangeTouch.setup('input[type="range"]', {}); const ranges = RangeTouch.setup('input[type="range"]', {});
var palettesData; var palettesData;
var pJson = {}; var pJson = {};
var pN = "", pI = 0; var pN = "", pI = 0, pNum = 0;
var pmt = 1, pmtLS = 0, pmtLast = 0; var pmt = 1, pmtLS = 0, pmtLast = 0;
var lastinfo = {}; var lastinfo = {};
var cfg = { var cfg = {
@ -304,6 +305,10 @@ function pName(i) {
return n; return n;
} }
function isPlaylist(i) {
return pJson[i].playlist && pJson[i].playlist.ps;
}
function papiVal(i) { function papiVal(i) {
if (!pJson[i]) return ""; if (!pJson[i]) return "";
var o = Object.assign({},pJson[i]); var o = Object.assign({},pJson[i]);
@ -418,9 +423,9 @@ function populatePresets(fromls)
var cn = ""; var cn = "";
var arr = Object.entries(pJson); var arr = Object.entries(pJson);
arr.sort(cmpP); arr.sort(cmpP);
var added = false;
pQL = []; pQL = [];
var is = []; var is = [];
pNum = 0;
for (var key of (arr||[])) for (var key of (arr||[]))
{ {
@ -432,15 +437,15 @@ 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="segname pname" onclick="setPreset(${i})">${isPlaylist(i)?"<i class='icons btn-icon'>&#xe139;</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>`;
added = true; pNum++;
} }
d.getElementById('pcont').innerHTML = cn; d.getElementById('pcont').innerHTML = cn;
if (added) { if (pNum > 0) {
if (pmtLS != pmt && pmt != 0) { if (pmtLS != pmt && pmt != 0) {
localStorage.setItem("wledPmt", pmt); localStorage.setItem("wledPmt", pmt);
pJson["0"] = {}; pJson["0"] = {};
@ -451,6 +456,7 @@ function populatePresets(fromls)
let i = is[a]; let i = is[a];
if (expanded[i+100]) expand(i+100, true); if (expanded[i+100]) expand(i+100, true);
} }
makePlSel(arr);
} else { presetError(true); } } else { presetError(true); }
updatePA(); updatePA();
populateQL(); populateQL();
@ -487,8 +493,8 @@ function populateInfo(i)
${inforow("Signal strength",i.wifi.signal +"% ("+ i.wifi.rssi, " dBm)")} ${inforow("Signal strength",i.wifi.signal +"% ("+ i.wifi.rssi, " dBm)")}
${inforow("Uptime",getRuntimeStr(i.uptime))} ${inforow("Uptime",getRuntimeStr(i.uptime))}
${inforow("Free heap",heap," kB")} ${inforow("Free heap",heap," kB")}
${inforow("Estimated current",pwru)} ${inforow("Estimated current",pwru)}
${inforow("Frames / second",i.leds.fps)} ${inforow("Frames / second",i.leds.fps)}
${inforow("MAC address",i.mac)} ${inforow("MAC address",i.mac)}
${inforow("Filesystem",i.fs.u + "/" + i.fs.t + " kB (" +Math.round(i.fs.u*100/i.fs.t) + "%)")} ${inforow("Filesystem",i.fs.u + "/" + i.fs.t + " kB (" +Math.round(i.fs.u*100/i.fs.t) + "%)")}
${inforow("Environment",i.arch + " " + i.core + " (" + i.lwip + ")")} ${inforow("Environment",i.arch + " " + i.core + " (" + i.lwip + ")")}
@ -522,34 +528,39 @@ function populateSegments(s)
</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>
<div class="segin ${expanded[i] ? "expanded":""}" id="seg${i}"> <div class="segin ${expanded[i] ? "expanded":""}" id="seg${i}">
<table class="segt"> <div class="sbs">
<tr> <i class="icons e-icon pwr ${powered[i] ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})">&#xe08f;</i>
<td class="segtd">Start LED</td> <div class="sliderwrap il sws">
<td class="segtd">Stop LED</td> <input id="seg${i}bri" class="noslide sis" onchange="setSegBri(${i})" oninput="updateTrail(this)" max="255" min="1" type="range" value="${inst.bri}" />
</tr> <div class="sliderdisplay"></div>
<tr> </div>
<td class="segtd"><input class="noslide segn" id="seg${i}s" type="number" min="0" max="${ledCount-1}" value="${inst.start}" oninput="updateLen(${i})"></td> </div>
<td class="segtd"><input class="noslide segn" id="seg${i}e" type="number" min="0" max="${ledCount}" value="${inst.stop}" oninput="updateLen(${i})"></td> <table class="infot">
</tr> <tr>
</table> <td class="segtd">Start LED</td>
<table class="segt"> <td class="segtd">Stop LED</td>
<tr> <td class="segtd">Offset</td>
<td class="segtd">Grouping</td> </tr>
<td class="segtd">Spacing</td> <tr>
</tr> <td class="segtd"><input class="noslide segn" id="seg${i}s" type="number" min="0" max="${ledCount-1}" value="${inst.start}" oninput="updateLen(${i})"></td>
<tr> <td class="segtd"><input class="noslide segn" id="seg${i}e" type="number" min="0" max="${ledCount}" value="${inst.stop}" oninput="updateLen(${i})"></td>
<td class="segtd"><input class="noslide segn" id="seg${i}grp" type="number" min="1" max="255" value="${inst.grp}" oninput="updateLen(${i})"></td> <td class="segtd"><input class="noslide segn" id="seg${i}of" type="number" min="0" max="${ledCount-1}" value="${inst.of}" oninput="updateLen(${i})"></td>
<td class="segtd"><input class="noslide segn" id="seg${i}spc" type="number" min="0" max="255" value="${inst.spc}" oninput="updateLen(${i})"></td> </tr>
</tr> </table>
</table> <table class="infot">
<div class="h bp" id="seg${i}len"></div> <tr>
<i class="icons e-icon pwr ${powered[i] ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})">&#xe08f;</i> <td class="segtd">Grouping</td>
<div class="sliderwrap il sws"> <td class="segtd">Spacing</td>
<input id="seg${i}bri" class="noslide sis" onchange="setSegBri(${i})" oninput="updateTrail(this)" max="255" min="1" type="range" value="${inst.bri}" /> <td class="segtd">Apply</td>
<div class="sliderdisplay"></div> </tr>
</div> <tr>
<i class="icons e-icon cnf cnf-s" id="segc${i}" onclick="setSeg(${i})">&#xe390;</i> <td class="segtd"><input class="noslide segn" id="seg${i}grp" type="number" min="1" max="255" value="${inst.grp}" oninput="updateLen(${i})"></td>
<i class="icons e-icon del" id="segd${i}" onclick="delSeg(${i})">&#xe037;</i> <td class="segtd"><input class="noslide segn" id="seg${i}spc" type="number" min="0" max="255" value="${inst.spc}" oninput="updateLen(${i})"></td>
<td class="segtd"><i class="icons e-icon cnf cnf-s" id="segc${i}" onclick="setSeg(${i})">&#xe390;</i></td>
</tr>
</table>
<div class="h" id="seg${i}len"></div>
<button class="btn btn-i btn-xs del" id="segd${i}" onclick="delSeg(${i})"><i class="icons btn-icon">&#xe037;</i></button>
<label class="check revchkl"> <label class="check revchkl">
Reverse direction Reverse direction
<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":""}>
@ -1007,11 +1018,8 @@ function requestJson(command, rinfo = true, verbose = true) {
nlFade = s.nl.fade; nlFade = s.nl.fade;
syncSend = s.udpn.send; syncSend = s.udpn.send;
currentPreset = s.ps; currentPreset = s.ps;
d.getElementById('cyToggle').checked = (s.pl >= 0); tr = s.transition;
d.getElementById('cycs').value = s.ccnf.min; d.getElementById('tt').value = tr/10;
d.getElementById('cyce').value = s.ccnf.max;
d.getElementById('cyct').value = s.ccnf.time /10;
d.getElementById('cyctt').value = s.transition /10;
var selc=0; var ind=0; var selc=0; var ind=0;
populateSegments(s); populateSegments(s);
@ -1077,7 +1085,7 @@ function requestJson(command, rinfo = true, verbose = true) {
errstr = "Not enough space to save preset!"; errstr = "Not enough space to save preset!";
break; break;
case 12: case 12:
errstr = "The requested preset does not exist."; errstr = "Preset not found.";
break; break;
case 19: case 19:
errstr = "A filesystem error has occured."; errstr = "A filesystem error has occured.";
@ -1096,7 +1104,7 @@ function requestJson(command, rinfo = true, verbose = true) {
function togglePower() { function togglePower() {
isOn = !isOn; isOn = !isOn;
var obj = {"on": isOn}; var obj = {"on": isOn};
obj.transition = parseInt(d.getElementById('cyctt').value*10); obj.transition = parseInt(d.getElementById('tt').value*10);
requestJson(obj); requestJson(obj);
} }
@ -1172,7 +1180,7 @@ function makeSeg() {
<td class="segtd"><input class="noslide segn" id="seg${lowestUnused}e" type="number" min="0" max="${ledCount}" value="${ledCount}" oninput="updateLen(${lowestUnused})"></td> <td class="segtd"><input class="noslide segn" id="seg${lowestUnused}e" type="number" min="0" max="${ledCount}" value="${ledCount}" oninput="updateLen(${lowestUnused})"></td>
</tr> </tr>
</table> </table>
<div class="h" id="seg${lowestUnused}len">${ledCount - ns} LEDs</div> <div class="h" id="seg${lowestUnused}len">${ledCount - ns} LED${ledCount - ns >1 ? "s":""}</div>
<i class="icons e-icon cnf cnf-s half" id="segc${lowestUnused}" onclick="setSeg(${lowestUnused}); resetUtil();">&#xe390;</i> <i class="icons e-icon cnf cnf-s half" id="segc${lowestUnused}" onclick="setSeg(${lowestUnused}); resetUtil();">&#xe390;</i>
</div> </div>
</div>`; </div>`;
@ -1184,37 +1192,148 @@ function resetUtil() {
d.getElementById('segutil').innerHTML = cn; d.getElementById('segutil').innerHTML = cn;
} }
function makeP(i) { var plJson = {"0":{
"ps": [0],
"dur": [100],
"transition": [-1], //to be inited to default transition dur
"repeat": 0,
"r": false,
"end": 0
}};
var plSelContent = "";
function makePlSel(arr) {
plSelContent = "";
for (var i = 0; i < arr.length; i++) {
var n = arr[i][1].n ? arr[i][1].n : "Preset " + arr[i][0];
if (arr[i][1].playlist && arr[i][1].playlist.ps) continue; //remove playlists, sub-playlists not yet supported
plSelContent += `<option value=${arr[i][0]}>${n}</option>`
}
}
function refreshPlE(p) {
var plEDiv = d.getElementById(`ple${p}`);
if (!plEDiv) return;
var content = "";
for (var i = 0; i < plJson[p].ps.length; i++) {
content += makePlEntry(p,i);
}
plEDiv.innerHTML = content;
var dels = plEDiv.getElementsByClassName("btn-pl-del");
if (dels.length < 2 && p > 0) dels[0].style.display = "none";
var sels = d.getElementById(`seg${p+100}`).getElementsByClassName("sel");
for (var i of sels) {
if (i.dataset.val) {
if (parseInt(i.dataset.val) > 0) i.value = i.dataset.val;
else plJson[p].ps[i.dataset.index] = parseInt(i.value);
}
}
}
//p: preset ID, i: ps index
function addPl(p,i) {
plJson[p].ps.splice(i+1,0,0);
plJson[p].dur.splice(i+1,0,plJson[p].dur[i]);
plJson[p].transition.splice(i+1,0,plJson[p].transition[i]);
refreshPlE(p);
}
function delPl(p,i) {
if (plJson[p].ps.length < 2) {if (p == 0) resetPUtil(); return;}
plJson[p].ps.splice(i,1);
plJson[p].dur.splice(i,1);
plJson[p].transition.splice(i,1);
refreshPlE(p);
}
function plePs(p,i,field) {
plJson[p].ps[i] = parseInt(field.value);
}
function pleDur(p,i,field) {
if (field.validity.valid)
plJson[p].dur[i] = Math.floor(field.value*10);
}
function pleTr(p,i,field) {
if (field.validity.valid)
plJson[p].transition[i] = Math.floor(field.value*10);
}
function plR(p) {
var pl = plJson[p];
pl.r = d.getElementById(`pl${p}rtgl`).checked;
if (d.getElementById(`pl${p}rptgl`).checked) { //infinite
pl.repeat = 0;
delete pl.end;
d.getElementById(`pl${p}o1`).style.display = "none";
} else {
pl.repeat = parseInt(d.getElementById(`pl${p}rp`).value);
pl.end = parseInt(d.getElementById(`pl${p}selEnd`).value);
d.getElementById(`pl${p}o1`).style.display = "block";
}
}
function makeP(i,pl) {
var content = "";
if (pl) {
var rep = plJson[i].repeat ? plJson[i].repeat : 0;
content = `
<div id="ple${i}"></div><label class="check revchkl">
Shuffle
<input type="checkbox" id="pl${i}rtgl" onchange="plR(${i})" ${plJson[i].r?"checked":""}>
<span class="checkmark schk"></span>
</label>
<label class="check revchkl">
Repeat indefinitely
<input type="checkbox" id="pl${i}rptgl" onchange="plR(${i})" ${rep?"":"checked"}>
<span class="checkmark schk"></span>
</label>
<div id="pl${i}o1" style="display:${rep?"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>
End preset:<br>
<select class="btn sel sel-ple" id="pl${i}selEnd" onchange="plR(${i})" data-val=${plJson[i].end?plJson[i].end:0}>
<option value=0>None</option>
${plSelContent}
</select>
</div>
<button class="btn btn-i btn-p" onclick="testPl(${i}, this)"><i class='icons btn-icon'>&#xe139;</i>Test</button>`;
}
else content = `<label class="check revchkl">
Include brightness
<input type="checkbox" id="p${i}ibtgl" checked>
<span class="checkmark schk"></span>
</label>
<label class="check revchkl">
Save segment bounds
<input type="checkbox" id="p${i}sbtgl" checked>
<span class="checkmark schk"></span>
</label>`;
return ` return `
<input type="text" class="ptxt noslide" id="p${i}txt" autocomplete="off" maxlength=32 value="${(i>0)?pName(i):""}" placeholder="Enter name..."/><br> <input type="text" class="ptxt noslide" id="p${i}txt" autocomplete="off" maxlength=32 value="${(i>0)?pName(i):""}" placeholder="Enter name..."/><br>
<div class="c">Quick load label: <input type="text" class="stxt noslide" maxlength=2 value="${qlName(i)}" id="p${i}ql" autocomplete="off"/></div> <div class="c">Quick load label: <input type="text" class="stxt noslide" maxlength=2 value="${qlName(i)}" id="p${i}ql" autocomplete="off"/></div>
<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'":""}>
<label class="check revchkl"> <label class="check revchkl">
${(i>0)?"Overwrite with state":"Use current state"} ${pl?"Show playlist editor":(i>0)?"Overwrite with state":"Use current state"}
<input type="checkbox" id="p${i}cstgl" onchange="tglCs(${i})" ${(i>0)?"":"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><br> </label><br>
<div class="po2" id="p${i}o2">
API command<br>
<textarea class="noslide" id="p${i}api"></textarea>
</div>
<div class="po1" id="p${i}o1">
<label class="check revchkl">
Include brightness
<input type="checkbox" id="p${i}ibtgl" checked>
<span class="checkmark schk"></span>
</label>
<label class="check revchkl">
Save segment bounds
<input type="checkbox" id="p${i}sbtgl" checked>
<span class="checkmark schk"></span>
</label>
</div> </div>
<div class="po2" id="p${i}o2">
API command<br>
<textarea class="noslide" id="p${i}api"></textarea>
</div>
<div class="po1" id="p${i}o1">
${content}
</div>
<div class="c">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">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"> <div class="c">
<button class="btn btn-i btn-p" onclick="saveP(${i})"><i class="icons btn-icon">&#xe390;</i>${(i>0)?"Save changes":"Save preset"}</button> <button class="btn btn-i btn-p" onclick="saveP(${i},${pl})"><i class="icons btn-icon">&#xe390;</i>Save ${(pl)?"playlist":(i>0)?"changes":"preset"}</button>
${(i>0)?'<button class="btn btn-i btn-p" onclick="delP('+i+')"><i class="icons btn-icon">&#xe037;</i>Delete preset</button>': ${(i>0)?'<button class="btn btn-i btn-p" id="p'+i+'del" onclick="delP('+i+')"><i class="icons btn-icon">&#xe037;</i>Delete '+(pl?"playlist":"preset"):
'<button class="btn btn-p" onclick="resetPUtil()">Cancel</button>'} '<button class="btn btn-p" onclick="resetPUtil()">Cancel'}</button>
</div> </div>
<div class="pwarn ${(i>0)?"bp":""} c" id="p${i}warn"> <div class="pwarn ${(i>0)?"bp":""} c" id="p${i}warn">
@ -1228,11 +1347,48 @@ function makePUtil() {
New preset</div> New preset</div>
<div class="segin expanded"> <div class="segin expanded">
${makeP(0)}</div></div>`; ${makeP(0)}</div></div>`;
updateTrail(d.getElementById('p0p')); }
function makePlEntry(p,i) {
return `
<div class="plentry">
${i+1}:
<select class="btn sel sel-pl" onchange="plePs(${p},${i},this)" data-val=${plJson[p].ps[i]} data-index=${i}>
${plSelContent}
</select>
<table class="segt">
<tr>
<td class="segtd">Duration</td>
<td class="segtd">Transition</td>
</tr>
<tr>
<td class="segtd"><input class="noslide segn" type="number" max=6553.0 min=0.2 step=0.1 oninput="pleDur(${p},${i},this)" value=${plJson[p].dur[i]/10.0}></td>
<td class="segtd"><input class="noslide segn" type="number" max=65.0 min=0.0 step=0.1 oninput="pleTr(${p},${i},this)" value=${plJson[p].transition[i]/10.0}> s</td>
</tr>
</table>
<button class="btn btn-i btn-xs btn-pl-del" onclick="delPl(${p},${i})"><i class="icons btn-icon">&#xe037;</i></button></div>
<div class="hrz hrz-pl" />
<button class="btn btn-i btn-xs btn-pl-add" onclick="addPl(${p},${i})"><i class="icons btn-icon">&#xe18a;</i></button></div>
</div>`;
}
function makePlUtil() {
if (pNum < 2) {
showToast("You need at least 2 presets to make a playlist!"); return;
}
if (plJson[0].transition[0] < 0) plJson[0].transition[0] = tr;
d.getElementById('putil').innerHTML = `<div class="seg pres">
<div class="segname newseg">
New playlist</div>
<div class="segin expanded" id="seg100">
${makeP(0,true)}</div></div>`;
refreshPlE(0);
} }
function resetPUtil() { function resetPUtil() {
var cn = `<button class="btn btn-s btn-i" onclick="makePUtil()"><i class="icons btn-icon">&#xe18a;</i>Create preset</button><br>`; var cn = `<button class="btn btn-s btn-i" onclick="makePUtil()"><i class="icons btn-icon">&#xe18a;</i>Create preset</button><br>
<button class="btn btn-s btn-i" onclick="makePlUtil()"><i class='icons btn-icon'>&#xe139;</i>Create playlist</button><br>`;
d.getElementById('putil').innerHTML = cn; d.getElementById('putil').innerHTML = cn;
} }
@ -1266,8 +1422,10 @@ function setSeg(s){
{ {
var grp = parseInt(d.getElementById(`seg${s}grp`).value); var grp = parseInt(d.getElementById(`seg${s}grp`).value);
var spc = parseInt(d.getElementById(`seg${s}spc`).value); var spc = parseInt(d.getElementById(`seg${s}spc`).value);
var ofs = parseInt(d.getElementById(`seg${s}of` ).value);
obj.seg.grp = grp; obj.seg.grp = grp;
obj.seg.spc = spc; obj.seg.spc = spc;
obj.seg.of = ofs;
} }
requestJson(obj); requestJson(obj);
} }
@ -1339,7 +1497,7 @@ function setPalette(paletteId = null)
function setBri() { function setBri() {
var obj = {"bri": parseInt(d.getElementById('sliderBri').value)}; var obj = {"bri": parseInt(d.getElementById('sliderBri').value)};
obj.transition = parseInt(d.getElementById('cyctt').value*10); obj.transition = parseInt(d.getElementById('tt').value*10);
requestJson(obj); requestJson(obj);
} }
@ -1358,17 +1516,6 @@ function setLor(i) {
requestJson(obj); requestJson(obj);
} }
function toggleCY() {
var obj = {"pl" : -1};
if (d.getElementById('cyToggle').checked)
{
obj = {"pl": 0, "ccnf": {"min": parseInt(d.getElementById('cycs').value), "max": parseInt(d.getElementById('cyce').value), "time": parseInt(d.getElementById('cyct').value*10)}};
obj.transition = parseInt(d.getElementById('cyctt').value*10);
}
requestJson(obj);
}
function setPreset(i) { function setPreset(i) {
var obj = {"ps": i}; var obj = {"ps": i};
@ -1377,12 +1524,14 @@ function setPreset(i) {
requestJson(obj); requestJson(obj);
} }
function saveP(i) { function saveP(i,pl) {
pI = parseInt(d.getElementById(`p${i}id`).value); pI = parseInt(d.getElementById(`p${i}id`).value);
if (!pI || pI < 1) pI = (i>0) ? i : getLowestUnusedP(); if (!pI || pI < 1) pI = (i>0) ? i : getLowestUnusedP();
pN = d.getElementById(`p${i}txt`).value; pN = d.getElementById(`p${i}txt`).value;
if (pN == "") pN = "Preset " + pI;
if (pN == "") pN = (pl?"Playlist ":"Preset ") + pI;
var obj = {}; var obj = {};
if (!d.getElementById(`p${i}cstgl`).checked) { if (!d.getElementById(`p${i}cstgl`).checked) {
var raw = d.getElementById(`p${i}api`).value; var raw = d.getElementById(`p${i}api`).value;
try { try {
@ -1396,15 +1545,21 @@ function saveP(i) {
d.getElementById(`p${i}warn`).innerHTML = "&#9888; Syntax error in custom JSON API command"; d.getElementById(`p${i}warn`).innerHTML = "&#9888; Syntax error in custom JSON API command";
return; return;
} else if (raw.indexOf("Please") == 0) { } else if (raw.indexOf("Please") == 0) {
d.getElementById(`p${i}warn`).innerHTML = "&#9888; Please refresh the page before modifying this preset"; d.getElementById(`p${i}warn`).innerHTML = "&#9888; Please refresh the page before modifying this preset";
return; return;
} }
} }
obj.o = true; obj.o = true;
} else { } else {
obj.ib = d.getElementById(`p${i}ibtgl`).checked; if (pl) {
obj.sb = d.getElementById(`p${i}sbtgl`).checked; obj.playlist = plJson[i];
obj.o = true;
} else {
obj.ib = d.getElementById(`p${i}ibtgl`).checked;
obj.sb = d.getElementById(`p${i}sbtgl`).checked;
}
} }
obj.psave = pI; obj.n = pN; obj.psave = pI; obj.n = pN;
var pQN = d.getElementById(`p${i}ql`).value; var pQN = d.getElementById(`p${i}ql`).value;
if (pQN.length > 0) obj.ql = pQN; if (pQN.length > 0) obj.ql = pQN;
@ -1426,11 +1581,36 @@ function saveP(i) {
resetPUtil(); resetPUtil();
} }
function delP(i) { function testPl(i,bt) {
var obj = {"pdel": i}; if (bt.dataset.test == 1) {
bt.dataset.test = 0;
bt.innerHTML = "<i class='icons btn-icon'>&#xe139;</i>Test";
stopPl();
return;
}
bt.dataset.test = 1;
bt.innerHTML = "<i class='icons btn-icon'>&#xe38f;</i>Stop";
var obj = {};
obj.playlist = plJson[i];
requestJson(obj); requestJson(obj);
delete pJson[i]; }
populatePresets();
function stopPl() {
requestJson({playlist:{}})
}
function delP(i) {
var bt = d.getElementById(`p${i}del`);
if (bt.dataset.cnf == 1) {
var obj = {"pdel": i};
requestJson(obj);
delete pJson[i];
populatePresets();
} else {
bt.style.color = "#f00";
bt.innerHTML = "<i class='icons btn-icon'>&#xe037;</i>Confirm delete";
bt.dataset.cnf = 1;
}
} }
function selectSlot(b) { function selectSlot(b) {
@ -1530,7 +1710,7 @@ function setColor(sr) {
} }
updateHex(); updateHex();
updateRgb(); updateRgb();
obj.transition = parseInt(d.getElementById('cyctt').value*10); obj.transition = parseInt(d.getElementById('tt').value*10);
requestJson(obj); requestJson(obj);
} }
@ -1658,22 +1838,61 @@ function cancelSearch(ic) {
searchField.focus(); searchField.focus();
} }
//make sure "dur" and "transition" are arrays with at least the length of "ps"
function formatArr(pl) {
var l = pl.ps.length;
if (!Array.isArray(pl.dur)) {
var v = pl.dur;
if (isNaN(v)) v = 100;
pl.dur = [v];
}
var l2 = pl.dur.length;
if (l2 < l)
{
for (var i = 0; i < l - l2; i++)
pl.dur.push(pl.dur[l2-1]);
}
if (!Array.isArray(pl.transition)) {
var v = pl.transition;
if (isNaN(v)) v = tr;
pl.transition = [v];
}
var l2 = pl.transition.length;
if (l2 < l)
{
for (var i = 0; i < l - l2; i++)
pl.transition.push(pl.transition[l2-1]);
}
}
function expand(i,a) function expand(i,a)
{ {
if (!a) expanded[i] = !expanded[i]; if (!a) expanded[i] = !expanded[i];
d.getElementById('seg' +i).style.display = (expanded[i]) ? "block":"none"; d.getElementById('seg' +i).style.display = (expanded[i]) ? "block":"none";
d.getElementById('sege' +i).style.transform = (expanded[i]) ? "rotate(180deg)":"rotate(0deg)"; d.getElementById('sege' +i).style.transform = (expanded[i]) ? "rotate(180deg)":"rotate(0deg)";
if (i > 100) { //presets if (i < 100) return; //no preset, we are done
var p = i-100;
d.getElementById(`p${p}o`).style.background = (expanded[i] || p != currentPreset)?"var(--c-2)":"var(--c-6)"; var p = i-100;
if (d.getElementById('seg' +i).innerHTML == "") { d.getElementById(`p${p}o`).style.background = (expanded[i] || p != currentPreset)?"var(--c-2)":"var(--c-6)";
d.getElementById('seg' +i).innerHTML = makeP(p); if (d.getElementById('seg' +i).innerHTML != "") return;
var papi = papiVal(p); if (isPlaylist(p)) {
d.getElementById(`p${p}api`).value = papi; plJson[p] = pJson[p].playlist;
if (papi.indexOf("Please") == 0) d.getElementById(`p${p}cstgl`).checked = true; //make sure all keys are present in plJson[p]
tglCs(p); formatArr(plJson[p]);
} if (isNaN(plJson[p].repeat)) plJson[p].repeat = 0;
if (!plJson[p].r) plJson[p].r = false;
if (isNaN(plJson[p].end)) plJson[p].end = 0;
d.getElementById('seg' +i).innerHTML = makeP(p,true);
refreshPlE(p);
} else {
d.getElementById('seg' +i).innerHTML = makeP(p);
} }
var papi = papiVal(p);
d.getElementById(`p${p}api`).value = papi;
if (papi.indexOf("Please") == 0) d.getElementById(`p${p}cstgl`).checked = true;
tglCs(p);
} }
function unfocusSliders() { function unfocusSliders() {