mirror of
https://github.com/wled/WLED.git
synced 2025-07-28 05:06:34 +00:00
UI code optimisations.
This commit is contained in:
parent
a7c99cbbd2
commit
70546cd2ec
@ -569,7 +569,7 @@ input[type=range]::-moz-range-thumb {
|
|||||||
width: 276px;
|
width: 276px;
|
||||||
background-color: var(--c-2);
|
background-color: var(--c-2);
|
||||||
}
|
}
|
||||||
.btn-i, .btn-p {
|
.btn-i {
|
||||||
padding-bottom: 3px;
|
padding-bottom: 3px;
|
||||||
}
|
}
|
||||||
.btn-icon {
|
.btn-icon {
|
||||||
|
@ -54,6 +54,7 @@ var cpick = new iro.ColorPicker("#picker", {
|
|||||||
|
|
||||||
function handleVisibilityChange() {if (!d.hidden && new Date () - lastUpdate > 3000) requestJson({'v':true,'rev':2},false);}
|
function handleVisibilityChange() {if (!d.hidden && new Date () - lastUpdate > 3000) requestJson({'v':true,'rev':2},false);}
|
||||||
function sCol(na, col) {d.documentElement.style.setProperty(na, col);}
|
function sCol(na, col) {d.documentElement.style.setProperty(na, col);}
|
||||||
|
function gId(c) {return d.getElementById(c);}
|
||||||
|
|
||||||
function applyCfg()
|
function applyCfg()
|
||||||
{
|
{
|
||||||
@ -61,10 +62,10 @@ function applyCfg()
|
|||||||
var bg = cfg.theme.color.bg;
|
var bg = cfg.theme.color.bg;
|
||||||
if (bg) sCol('--c-1', bg);
|
if (bg) sCol('--c-1', bg);
|
||||||
var ccfg = cfg.comp.colors;
|
var ccfg = cfg.comp.colors;
|
||||||
d.getElementById('hexw').style.display = ccfg.hex ? "block":"none";
|
gId('hexw').style.display = ccfg.hex ? "block":"none";
|
||||||
d.getElementById('picker').style.display = ccfg.picker ? "block":"none";
|
gId('picker').style.display = ccfg.picker ? "block":"none";
|
||||||
d.getElementById('rgbwrap').style.display = ccfg.rgb ? "block":"none";
|
gId('rgbwrap').style.display = ccfg.rgb ? "block":"none";
|
||||||
d.getElementById('qcs-w').style.display = ccfg.quick ? "block":"none";
|
gId('qcs-w').style.display = ccfg.quick ? "block":"none";
|
||||||
var l = cfg.comp.labels;
|
var l = cfg.comp.labels;
|
||||||
var e = d.querySelectorAll('.tab-label');
|
var e = d.querySelectorAll('.tab-label');
|
||||||
for (var i=0; i<e.length; i++) e[i].style.display = l ? "block":"none";
|
for (var i=0; i<e.length; i++) e[i].style.display = l ? "block":"none";
|
||||||
@ -117,7 +118,7 @@ function cTheme(light) {
|
|||||||
sCol('--c-tb','rgba(204, 204, 204, var(--t-b))');
|
sCol('--c-tb','rgba(204, 204, 204, var(--t-b))');
|
||||||
sCol('--c-tba','rgba(170, 170, 170, var(--t-b))');
|
sCol('--c-tba','rgba(170, 170, 170, var(--t-b))');
|
||||||
sCol('--c-tbh','rgba(204, 204, 204, var(--t-b))');
|
sCol('--c-tbh','rgba(204, 204, 204, var(--t-b))');
|
||||||
d.getElementById('imgw').style.filter = "invert(0.8)";
|
gId('imgw').style.filter = "invert(0.8)";
|
||||||
} else {
|
} else {
|
||||||
sCol('--c-1','#111');
|
sCol('--c-1','#111');
|
||||||
sCol('--c-f','#fff');
|
sCol('--c-f','#fff');
|
||||||
@ -137,7 +138,7 @@ function cTheme(light) {
|
|||||||
sCol('--c-tb','rgba(34, 34, 34, var(--t-b))');
|
sCol('--c-tb','rgba(34, 34, 34, var(--t-b))');
|
||||||
sCol('--c-tba','rgba(102, 102, 102, var(--t-b))');
|
sCol('--c-tba','rgba(102, 102, 102, var(--t-b))');
|
||||||
sCol('--c-tbh','rgba(51, 51, 51, var(--t-b))');
|
sCol('--c-tbh','rgba(51, 51, 51, var(--t-b))');
|
||||||
d.getElementById('imgw').style.filter = "unset";
|
gId('imgw').style.filter = "unset";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -178,11 +179,10 @@ function onLoad()
|
|||||||
applyCfg();
|
applyCfg();
|
||||||
loadBg(cfg.theme.bg.url);
|
loadBg(cfg.theme.bg.url);
|
||||||
|
|
||||||
var cd = d.getElementById('csl').children;
|
var cd = gId('csl').children;
|
||||||
for (var i = 0; i < cd.length; i++) cd[i].style.backgroundColor = "rgb(0, 0, 0)";
|
for (var i = 0; i < cd.length; i++) cd[i].style.backgroundColor = "rgb(0, 0, 0)";
|
||||||
selectSlot(0);
|
selectSlot(0);
|
||||||
updateTablinks(0);
|
updateTablinks(0);
|
||||||
resetUtil();
|
|
||||||
cpick.on("input:end", function() {
|
cpick.on("input:end", function() {
|
||||||
setColor(1);
|
setColor(1);
|
||||||
});
|
});
|
||||||
@ -199,10 +199,12 @@ function onLoad()
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
resetUtil();
|
||||||
|
updateUI(true);
|
||||||
|
|
||||||
d.addEventListener("visibilitychange", handleVisibilityChange, false);
|
d.addEventListener("visibilitychange", handleVisibilityChange, false);
|
||||||
size();
|
size();
|
||||||
d.getElementById("cv").style.opacity=0;
|
gId("cv").style.opacity=0;
|
||||||
if (localStorage.getItem('pcm') == "true") togglePcMode(true);
|
if (localStorage.getItem('pcm') == "true") togglePcMode(true);
|
||||||
var sls = d.querySelectorAll('input[type="range"]');
|
var sls = d.querySelectorAll('input[type="range"]');
|
||||||
for (var sl of sls) {
|
for (var sl of sls) {
|
||||||
@ -242,18 +244,18 @@ function openTab(tabI, force = false)
|
|||||||
var timeout;
|
var timeout;
|
||||||
function showToast(text, error = false)
|
function showToast(text, error = false)
|
||||||
{
|
{
|
||||||
if (error) d.getElementById('connind').style.backgroundColor = "#831";
|
if (error) gId('connind').style.backgroundColor = "#831";
|
||||||
var x = d.getElementById("toast");
|
var x = gId("toast");
|
||||||
x.innerHTML = text;
|
x.innerHTML = text;
|
||||||
x.className = error ? "error":"show";
|
x.className = error ? "error":"show";
|
||||||
clearTimeout(timeout);
|
clearTimeout(timeout);
|
||||||
x.style.animation = 'none';
|
x.style.animation = 'none';
|
||||||
x.style.animation = null;
|
// x.style.animation = null;
|
||||||
timeout = setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2900);
|
timeout = setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2900);
|
||||||
}
|
}
|
||||||
|
|
||||||
function showErrorToast() {showToast('Connection to light failed!', true);}
|
function showErrorToast() {showToast('Connection to light failed!', true);}
|
||||||
function clearErrorToast() {d.getElementById("toast").className = d.getElementById("toast").className.replace("error", "");}
|
function clearErrorToast() {gId("toast").className = gId("toast").className.replace("error", "");}
|
||||||
|
|
||||||
function getRuntimeStr(rt)
|
function getRuntimeStr(rt)
|
||||||
{
|
{
|
||||||
@ -285,11 +287,11 @@ function getLowestUnusedP()
|
|||||||
|
|
||||||
function checkUsed(i)
|
function checkUsed(i)
|
||||||
{
|
{
|
||||||
var id = d.getElementById(`p${i}id`).value;
|
var id = gId(`p${i}id`).value;
|
||||||
if (pJson[id] && (i == 0 || id != i))
|
if (pJson[id] && (i == 0 || id != i))
|
||||||
d.getElementById(`p${i}warn`).innerHTML = `⚠ Overwriting ${pName(id)}!`;
|
gId(`p${i}warn`).innerHTML = `⚠ Overwriting ${pName(id)}!`;
|
||||||
else
|
else
|
||||||
d.getElementById(`p${i}warn`).innerHTML = "";
|
gId(`p${i}warn`).innerHTML = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
function pName(i)
|
function pName(i)
|
||||||
@ -317,7 +319,7 @@ function qlName(i)
|
|||||||
|
|
||||||
function cpBck()
|
function cpBck()
|
||||||
{
|
{
|
||||||
var copyText = d.getElementById("bck");
|
var copyText = gId("bck");
|
||||||
|
|
||||||
copyText.select();
|
copyText.select();
|
||||||
copyText.setSelectionRange(0, 999999);
|
copyText.setSelectionRange(0, 999999);
|
||||||
@ -350,8 +352,8 @@ function presetError(empty)
|
|||||||
<button class="btn btn-p" onclick="cpBck()">Copy to clipboard</button>`;
|
<button class="btn btn-p" onclick="cpBck()">Copy to clipboard</button>`;
|
||||||
}
|
}
|
||||||
cn += `</div>`;
|
cn += `</div>`;
|
||||||
d.getElementById('pcont').innerHTML = cn;
|
gId('pcont').innerHTML = cn;
|
||||||
if (hasBackup) d.getElementById('bck').value = bckstr;
|
if (hasBackup) gId('bck').value = bckstr;
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadPresets(callback = null)
|
function loadPresets(callback = null)
|
||||||
@ -392,7 +394,7 @@ function loadPalettes(callback = null)
|
|||||||
.then(json => {
|
.then(json => {
|
||||||
lJson = Object.entries(json);
|
lJson = Object.entries(json);
|
||||||
populatePalettes();
|
populatePalettes();
|
||||||
updateUI();
|
// updateUI();
|
||||||
if (callback) callback();
|
if (callback) callback();
|
||||||
})
|
})
|
||||||
.catch(function (error) {
|
.catch(function (error) {
|
||||||
@ -417,7 +419,7 @@ function loadFX(callback = null)
|
|||||||
.then(json => {
|
.then(json => {
|
||||||
eJson = Object.entries(json);
|
eJson = Object.entries(json);
|
||||||
populateEffects();
|
populateEffects();
|
||||||
updateUI();
|
// updateUI();
|
||||||
if (callback) callback();
|
if (callback) callback();
|
||||||
})
|
})
|
||||||
.catch(function (error) {
|
.catch(function (error) {
|
||||||
@ -448,7 +450,7 @@ function populateQL()
|
|||||||
|
|
||||||
cn += `<p class="labels">All presets</p>`;
|
cn += `<p class="labels">All presets</p>`;
|
||||||
}
|
}
|
||||||
d.getElementById('pql').innerHTML = cn;
|
gId('pql').innerHTML = cn;
|
||||||
}
|
}
|
||||||
|
|
||||||
function populatePresets(fromls)
|
function populatePresets(fromls)
|
||||||
@ -480,7 +482,7 @@ function populatePresets(fromls)
|
|||||||
added = true;
|
added = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
d.getElementById('pcont').innerHTML = cn;
|
gId('pcont').innerHTML = cn;
|
||||||
if (added) {
|
if (added) {
|
||||||
if (pmtLS != pmt && pmt != 0) {
|
if (pmtLS != pmt && pmt != 0) {
|
||||||
localStorage.setItem("wledPmt", pmt);
|
localStorage.setItem("wledPmt", pmt);
|
||||||
@ -510,7 +512,7 @@ function loadInfo(callback=null)
|
|||||||
.then(json => {
|
.then(json => {
|
||||||
lastinfo = json;
|
lastinfo = json;
|
||||||
var name = json.name;
|
var name = json.name;
|
||||||
d.getElementById('namelabel').innerHTML = name;
|
gId('namelabel').innerHTML = name;
|
||||||
if (name === "Dinnerbone") d.documentElement.style.transform = "rotate(180deg)";
|
if (name === "Dinnerbone") d.documentElement.style.transform = "rotate(180deg)";
|
||||||
if (json.live) name = "(Live) " + name;
|
if (json.live) name = "(Live) " + name;
|
||||||
if (loc) name = "(L) " + name;
|
if (loc) name = "(L) " + name;
|
||||||
@ -520,7 +522,7 @@ function loadInfo(callback=null)
|
|||||||
syncTglRecv = json.str;
|
syncTglRecv = json.str;
|
||||||
maxSeg = json.leds.maxseg;
|
maxSeg = json.leds.maxseg;
|
||||||
pmt = json.fs.pmt;
|
pmt = json.fs.pmt;
|
||||||
d.getElementById('buttonNodes').style.display = (json.ndc > 0 && window.innerWidth > 770) ? "block":"none";
|
gId('buttonNodes').style.display = (json.ndc > 0 && window.innerWidth > 770) ? "block":"none";
|
||||||
populateInfo(json);
|
populateInfo(json);
|
||||||
if (callback) callback();
|
if (callback) callback();
|
||||||
})
|
})
|
||||||
@ -565,7 +567,7 @@ ${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 + ")")}
|
||||||
</table>`;
|
</table>`;
|
||||||
d.getElementById('kv').innerHTML = cn;
|
gId('kv').innerHTML = cn;
|
||||||
}
|
}
|
||||||
|
|
||||||
function populateSegments(s)
|
function populateSegments(s)
|
||||||
@ -636,9 +638,9 @@ function populateSegments(s)
|
|||||||
</div><br>`;
|
</div><br>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
d.getElementById('segcont').innerHTML = cn;
|
gId('segcont').innerHTML = cn;
|
||||||
if (lowestUnused >= maxSeg) {
|
if (lowestUnused >= maxSeg) {
|
||||||
d.getElementById('segutil').innerHTML = '<span class="h">Maximum number of segments reached.</span>';
|
gId('segutil').innerHTML = '<span class="h">Maximum number of segments reached.</span>';
|
||||||
noNewSegs = true;
|
noNewSegs = true;
|
||||||
} else if (noNewSegs) {
|
} else if (noNewSegs) {
|
||||||
resetUtil();
|
resetUtil();
|
||||||
@ -646,10 +648,10 @@ function populateSegments(s)
|
|||||||
}
|
}
|
||||||
for (var i = 0; i <= lSeg; i++) {
|
for (var i = 0; i <= lSeg; i++) {
|
||||||
updateLen(i);
|
updateLen(i);
|
||||||
updateTrail(d.getElementById(`seg${i}bri`));
|
updateTrail(gId(`seg${i}bri`));
|
||||||
if (segCount < 2) d.getElementById(`segd${lSeg}`).style.display = "none";
|
if (segCount < 2) gId(`segd${lSeg}`).style.display = "none";
|
||||||
}
|
}
|
||||||
d.getElementById('rsbtn').style.display = (segCount > 1) ? "inline":"none";
|
gId('rsbtn').style.display = (segCount > 1) ? "inline":"none";
|
||||||
}
|
}
|
||||||
|
|
||||||
function btype(b)
|
function btype(b)
|
||||||
@ -691,7 +693,7 @@ function populateNodes(i,n)
|
|||||||
${urows}
|
${urows}
|
||||||
${inforow("Current instance:",i.name)}
|
${inforow("Current instance:",i.name)}
|
||||||
</table>`;
|
</table>`;
|
||||||
d.getElementById('kn').innerHTML = cn;
|
gId('kn').innerHTML = cn;
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadNodes()
|
function loadNodes()
|
||||||
@ -736,7 +738,7 @@ function populateEffects()
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
d.getElementById('fxlist').innerHTML=html;
|
gId('fxlist').innerHTML=html;
|
||||||
}
|
}
|
||||||
|
|
||||||
function populatePalettes()
|
function populatePalettes()
|
||||||
@ -768,7 +770,7 @@ function populatePalettes()
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
d.getElementById('selectPalette').innerHTML=paletteHtml;
|
gId('selectPalette').innerHTML=paletteHtml;
|
||||||
}
|
}
|
||||||
|
|
||||||
function redrawPalPrev()
|
function redrawPalPrev()
|
||||||
@ -884,9 +886,9 @@ function toggleBubble(e)
|
|||||||
|
|
||||||
function updateLen(s)
|
function updateLen(s)
|
||||||
{
|
{
|
||||||
if (!d.getElementById(`seg${s}s`)) return;
|
if (!gId(`seg${s}s`)) return;
|
||||||
var start = parseInt(d.getElementById(`seg${s}s`).value);
|
var start = parseInt(gId(`seg${s}s`).value);
|
||||||
var stop = parseInt(d.getElementById(`seg${s}e`).value);
|
var stop = parseInt(gId(`seg${s}e`).value);
|
||||||
var len = stop - (cfg.comp.seglen?0:start);
|
var len = stop - (cfg.comp.seglen?0:start);
|
||||||
var out = "(delete)";
|
var out = "(delete)";
|
||||||
if (len > 1) {
|
if (len > 1) {
|
||||||
@ -895,16 +897,16 @@ function updateLen(s)
|
|||||||
out = "1 LED";
|
out = "1 LED";
|
||||||
}
|
}
|
||||||
|
|
||||||
if (d.getElementById(`seg${s}grp`) != null)
|
if (gId(`seg${s}grp`) != null)
|
||||||
{
|
{
|
||||||
var grp = parseInt(d.getElementById(`seg${s}grp`).value);
|
var grp = parseInt(gId(`seg${s}grp`).value);
|
||||||
var spc = parseInt(d.getElementById(`seg${s}spc`).value);
|
var spc = parseInt(gId(`seg${s}spc`).value);
|
||||||
if (grp == 0) grp = 1;
|
if (grp == 0) grp = 1;
|
||||||
var virt = Math.ceil(len/(grp + spc));
|
var virt = Math.ceil(len/(grp + spc));
|
||||||
if (!isNaN(virt) && (grp > 1 || spc > 0)) out += ` (${virt} virtual)`;
|
if (!isNaN(virt) && (grp > 1 || spc > 0)) out += ` (${virt} virtual)`;
|
||||||
}
|
}
|
||||||
|
|
||||||
d.getElementById(`seg${s}len`).innerHTML = out;
|
gId(`seg${s}len`).innerHTML = out;
|
||||||
}
|
}
|
||||||
|
|
||||||
function updatePA(scrollto=false)
|
function updatePA(scrollto=false)
|
||||||
@ -918,7 +920,7 @@ function updatePA(scrollto=false)
|
|||||||
ps[i].style.backgroundColor = "var(--c-2)";
|
ps[i].style.backgroundColor = "var(--c-2)";
|
||||||
}
|
}
|
||||||
if (currentPreset > 0) {
|
if (currentPreset > 0) {
|
||||||
var acv = d.getElementById(`p${currentPreset}o`);
|
var acv = gId(`p${currentPreset}o`);
|
||||||
if (acv && !expanded[currentPreset+100]) {
|
if (acv && !expanded[currentPreset+100]) {
|
||||||
acv.style.background = "var(--c-6)";
|
acv.style.background = "var(--c-6)";
|
||||||
if (scrollto) {
|
if (scrollto) {
|
||||||
@ -929,28 +931,28 @@ function updatePA(scrollto=false)
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
acv = d.getElementById(`p${currentPreset}qlb`);
|
acv = gId(`p${currentPreset}qlb`);
|
||||||
if (acv) acv.style.background = "var(--c-6)";
|
if (acv) acv.style.background = "var(--c-6)";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateUI(scrollto=false)
|
function updateUI(scrollto=false)
|
||||||
{
|
{
|
||||||
noWS = (myWS.readyState === WebSocket.CLOSED);
|
noWS = (!myWS || myWS.readyState === WebSocket.CLOSED);
|
||||||
|
|
||||||
d.getElementById('buttonPower').className = (isOn) ? "active":"";
|
gId('buttonPower').className = (isOn) ? "active":"";
|
||||||
d.getElementById('buttonNl').className = (nlA) ? "active":"";
|
gId('buttonNl').className = (nlA) ? "active":"";
|
||||||
d.getElementById('buttonSync').className = (syncSend) ? "active":"";
|
gId('buttonSync').className = (syncSend) ? "active":"";
|
||||||
d.getElementById('buttonNodes').style.display = (lastinfo.ndc > 0 && window.innerWidth > 770) ? "block":"none";
|
gId('buttonNodes').style.display = (lastinfo.ndc > 0 && window.innerWidth > 770) ? "block":"none";
|
||||||
|
|
||||||
updateSelectedPalette(scrollto);
|
updateSelectedPalette(scrollto);
|
||||||
updateSelectedFx(scrollto);
|
updateSelectedFx(scrollto);
|
||||||
|
|
||||||
updateTrail(d.getElementById('sliderBri'));
|
updateTrail(gId('sliderBri'));
|
||||||
updateTrail(d.getElementById('sliderSpeed'));
|
updateTrail(gId('sliderSpeed'));
|
||||||
updateTrail(d.getElementById('sliderIntensity'));
|
updateTrail(gId('sliderIntensity'));
|
||||||
updateTrail(d.getElementById('sliderW'));
|
updateTrail(gId('sliderW'));
|
||||||
if (isRgbw) d.getElementById('wwrap').style.display = "block";
|
if (isRgbw) gId('wwrap').style.display = "block";
|
||||||
|
|
||||||
updatePA(scrollto);
|
updatePA(scrollto);
|
||||||
updateHex();
|
updateHex();
|
||||||
@ -959,7 +961,7 @@ function updateUI(scrollto=false)
|
|||||||
|
|
||||||
function updateSelectedPalette(scrollto=false)
|
function updateSelectedPalette(scrollto=false)
|
||||||
{
|
{
|
||||||
var parent = d.getElementById('selectPalette');
|
var parent = gId('selectPalette');
|
||||||
var selPaletteInput = parent.querySelector(`input[name="palette"][value="${selectedPal}"]`);
|
var selPaletteInput = parent.querySelector(`input[name="palette"][value="${selectedPal}"]`);
|
||||||
if (selPaletteInput) selPaletteInput.checked = true;
|
if (selPaletteInput) selPaletteInput.checked = true;
|
||||||
|
|
||||||
@ -981,7 +983,7 @@ function updateSelectedPalette(scrollto=false)
|
|||||||
|
|
||||||
function updateSelectedFx(scrollto=false)
|
function updateSelectedFx(scrollto=false)
|
||||||
{
|
{
|
||||||
var parent = d.getElementById('fxlist');
|
var parent = gId('fxlist');
|
||||||
|
|
||||||
var selEffectInput = parent.querySelector(`input[name="fx"][value="${selectedFx}"]`);
|
var selEffectInput = parent.querySelector(`input[name="fx"][value="${selectedFx}"]`);
|
||||||
if (selEffectInput) selEffectInput.checked = true;
|
if (selEffectInput) selEffectInput.checked = true;
|
||||||
@ -1003,10 +1005,10 @@ function updateSelectedFx(scrollto=false)
|
|||||||
|
|
||||||
function displayRover(i,s)
|
function displayRover(i,s)
|
||||||
{
|
{
|
||||||
d.getElementById('rover').style.transform = (i.live && s.lor == 0) ? "translateY(0px)":"translateY(100%)";
|
gId('rover').style.transform = (i.live && s.lor == 0) ? "translateY(0px)":"translateY(100%)";
|
||||||
var sour = i.lip ? i.lip:""; if (sour.length > 2) sour = " from " + sour;
|
var sour = i.lip ? i.lip:""; if (sour.length > 2) sour = " from " + sour;
|
||||||
d.getElementById('lv').innerHTML = `WLED is receiving live ${i.lm} data${sour}`;
|
gId('lv').innerHTML = `WLED is receiving live ${i.lm} data${sour}`;
|
||||||
d.getElementById('roverstar').style.display = (i.live && s.lor) ? "block":"none";
|
gId('roverstar').style.display = (i.live && s.lor) ? "block":"none";
|
||||||
}
|
}
|
||||||
|
|
||||||
function cmpP(a, b)
|
function cmpP(a, b)
|
||||||
@ -1020,18 +1022,18 @@ function handleJson(s)
|
|||||||
if (!s) return false;
|
if (!s) return false;
|
||||||
|
|
||||||
isOn = s.on;
|
isOn = s.on;
|
||||||
d.getElementById('sliderBri').value= s.bri;
|
gId('sliderBri').value= s.bri;
|
||||||
nlA = s.nl.on;
|
nlA = s.nl.on;
|
||||||
nlDur = s.nl.dur;
|
nlDur = s.nl.dur;
|
||||||
nlTar = s.nl.tbri;
|
nlTar = s.nl.tbri;
|
||||||
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);
|
gId('cyToggle').checked = (s.pl >= 0);
|
||||||
d.getElementById('cycs').value = s.ccnf.min;
|
gId('cycs').value = s.ccnf.min;
|
||||||
d.getElementById('cyce').value = s.ccnf.max;
|
gId('cyce').value = s.ccnf.max;
|
||||||
d.getElementById('cyct').value = s.ccnf.time/10;
|
gId('cyct').value = s.ccnf.time/10;
|
||||||
d.getElementById('cyctt').value = s.transition/10;
|
gId('cyctt').value = s.transition/10;
|
||||||
|
|
||||||
var selc=0; var ind=0;
|
var selc=0; var ind=0;
|
||||||
populateSegments(s);
|
populateSegments(s);
|
||||||
@ -1043,7 +1045,7 @@ function handleJson(s)
|
|||||||
if (!i) return false; // no segments!
|
if (!i) return false; // no segments!
|
||||||
|
|
||||||
selColors = i.col;
|
selColors = i.col;
|
||||||
var cd = d.getElementById('csl').children;
|
var cd = gId('csl').children;
|
||||||
for (let e = cd.length-1; e >= 0; e--)
|
for (let e = cd.length-1; e >= 0; e--)
|
||||||
{
|
{
|
||||||
var r,g,b,w;
|
var r,g,b,w;
|
||||||
@ -1062,15 +1064,16 @@ function handleJson(s)
|
|||||||
if (isRgbw) whites[e] = parseInt(w);
|
if (isRgbw) whites[e] = parseInt(w);
|
||||||
selectSlot(csel);
|
selectSlot(csel);
|
||||||
}
|
}
|
||||||
d.getElementById('sliderSpeed').value = whites[csel];
|
gId('sliderSpeed').value = whites[csel];
|
||||||
|
|
||||||
d.getElementById('sliderSpeed').value = i.sx;
|
gId('sliderSpeed').value = i.sx;
|
||||||
d.getElementById('sliderIntensity').value = i.ix;
|
gId('sliderIntensity').value = i.ix;
|
||||||
|
|
||||||
selectedPal = i.pal;
|
selectedPal = i.pal;
|
||||||
selectedFx = i.fx;
|
selectedFx = i.fx;
|
||||||
|
|
||||||
displayRover(lastinfo, s);
|
displayRover(lastinfo, s);
|
||||||
|
clearErrorToast();
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
@ -1078,12 +1081,12 @@ function handleJson(s)
|
|||||||
var jsonTimeout, refreshTimer;
|
var jsonTimeout, refreshTimer;
|
||||||
function requestJson(command, rinfo = true, verbose = true, callback = null)
|
function requestJson(command, rinfo = true, verbose = true, callback = null)
|
||||||
{
|
{
|
||||||
d.getElementById('connind').style.backgroundColor = "#a90";
|
gId('connind').style.backgroundColor = "#a90";
|
||||||
lastUpdate = new Date();
|
lastUpdate = new Date();
|
||||||
if (!jsonTimeout) jsonTimeout = setTimeout(showErrorToast, 3000);
|
if (!jsonTimeout) jsonTimeout = setTimeout(showErrorToast, 3000);
|
||||||
var req = null;
|
var req = null;
|
||||||
var e1 = d.getElementById('fxlist');
|
var e1 = gId('fxlist');
|
||||||
var e2 = d.getElementById('selectPalette');
|
var e2 = gId('selectPalette');
|
||||||
|
|
||||||
var url = (loc?`http://${locip}`:'') + (rinfo ? '/json/si': (command ? '/json/state':'/json/si'));
|
var url = (loc?`http://${locip}`:'') + (rinfo ? '/json/si': (command ? '/json/state':'/json/si'));
|
||||||
|
|
||||||
@ -1110,7 +1113,7 @@ function requestJson(command, rinfo = true, verbose = true, callback = null)
|
|||||||
clearTimeout(jsonTimeout);
|
clearTimeout(jsonTimeout);
|
||||||
jsonTimeout = null;
|
jsonTimeout = null;
|
||||||
clearErrorToast();
|
clearErrorToast();
|
||||||
d.getElementById('connind').style.backgroundColor = "#070";
|
gId('connind').style.backgroundColor = "#070";
|
||||||
if (!json) { showToast('Empty response', true); return; }
|
if (!json) { showToast('Empty response', true); return; }
|
||||||
if (json.error && json.error != 0) { showToast('Out of memory!', true); return; }
|
if (json.error && json.error != 0) { showToast('Out of memory!', true); return; }
|
||||||
if (json.success) {
|
if (json.success) {
|
||||||
@ -1127,7 +1130,7 @@ function requestJson(command, rinfo = true, verbose = true, callback = null)
|
|||||||
var info = json.info;
|
var info = json.info;
|
||||||
/*
|
/*
|
||||||
var name = info.name;
|
var name = info.name;
|
||||||
d.getElementById('namelabel').innerHTML = name;
|
gId('namelabel').innerHTML = name;
|
||||||
if (name === "Dinnerbone") d.documentElement.style.transform = "rotate(180deg)";
|
if (name === "Dinnerbone") d.documentElement.style.transform = "rotate(180deg)";
|
||||||
if (info.live) name = "(Live) " + name;
|
if (info.live) name = "(Live) " + name;
|
||||||
if (loc) name = "(L) " + name;
|
if (loc) name = "(L) " + name;
|
||||||
@ -1143,8 +1146,6 @@ function requestJson(command, rinfo = true, verbose = true, callback = null)
|
|||||||
pmtLast = pmt;
|
pmtLast = pmt;
|
||||||
lastinfo = info;
|
lastinfo = info;
|
||||||
if (isInfo) populateInfo(info);
|
if (isInfo) populateInfo(info);
|
||||||
displayRover(info, s);
|
|
||||||
|
|
||||||
if (!rinfo) loadPalettesData();
|
if (!rinfo) loadPalettesData();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1179,7 +1180,7 @@ 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(gId('cyctt').value*10);
|
||||||
requestJson(obj, false, noWS);
|
requestJson(obj, false, noWS);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1205,10 +1206,10 @@ function toggleSync()
|
|||||||
function toggleLiveview()
|
function toggleLiveview()
|
||||||
{
|
{
|
||||||
isLv = !isLv;
|
isLv = !isLv;
|
||||||
d.getElementById('liveview').style.display = (isLv) ? "block":"none";
|
gId('liveview').style.display = (isLv) ? "block":"none";
|
||||||
var url = (loc?`http://${locip}`:'') + "/liveview";
|
var url = (loc?`http://${locip}`:'') + "/liveview";
|
||||||
d.getElementById('liveview').src = (isLv) ? url:"about:blank";
|
gId('liveview').src = (isLv) ? url:"about:blank";
|
||||||
d.getElementById('buttonSr').className = (isLv) ? "active":"";
|
gId('buttonSr').className = (isLv) ? "active":"";
|
||||||
size();
|
size();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1217,8 +1218,8 @@ function toggleInfo()
|
|||||||
if (isNodes) toggleNodes();
|
if (isNodes) toggleNodes();
|
||||||
isInfo = !isInfo;
|
isInfo = !isInfo;
|
||||||
if (isInfo) loadInfo();
|
if (isInfo) loadInfo();
|
||||||
d.getElementById('info').style.transform = (isInfo) ? "translateY(0px)":"translateY(100%)";
|
gId('info').style.transform = (isInfo) ? "translateY(0px)":"translateY(100%)";
|
||||||
d.getElementById('buttonI').className = (isInfo) ? "active":"";
|
gId('buttonI').className = (isInfo) ? "active":"";
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleNodes()
|
function toggleNodes()
|
||||||
@ -1226,15 +1227,15 @@ function toggleNodes()
|
|||||||
if (isInfo) toggleInfo();
|
if (isInfo) toggleInfo();
|
||||||
isNodes = !isNodes;
|
isNodes = !isNodes;
|
||||||
if (isNodes) loadNodes();
|
if (isNodes) loadNodes();
|
||||||
d.getElementById('nodes').style.transform = (isNodes) ? "translateY(0px)":"translateY(100%)";
|
gId('nodes').style.transform = (isNodes) ? "translateY(0px)":"translateY(100%)";
|
||||||
d.getElementById('buttonNodes').className = (isNodes) ? "active":"";
|
gId('buttonNodes').className = (isNodes) ? "active":"";
|
||||||
}
|
}
|
||||||
|
|
||||||
function makeSeg()
|
function makeSeg()
|
||||||
{
|
{
|
||||||
var ns = 0;
|
var ns = 0;
|
||||||
if (lowestUnused > 0) {
|
if (lowestUnused > 0) {
|
||||||
var pend = parseInt(d.getElementById(`seg${lowestUnused -1}e`).value,10) + (cfg.comp.seglen?parseInt(d.getElementById(`seg${lowestUnused -1}s`).value,10):0);
|
var pend = parseInt(gId(`seg${lowestUnused -1}e`).value,10) + (cfg.comp.seglen?parseInt(gId(`seg${lowestUnused -1}s`).value,10):0);
|
||||||
if (pend < ledCount) ns = pend;
|
if (pend < ledCount) ns = pend;
|
||||||
}
|
}
|
||||||
var cn = `<div class="seg">
|
var cn = `<div class="seg">
|
||||||
@ -1253,17 +1254,16 @@ function makeSeg()
|
|||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
<div class="h" id="seg${lowestUnused}len">${ledCount - ns} LEDs</div>
|
<div class="h" id="seg${lowestUnused}len">${ledCount - ns} LEDs</div>
|
||||||
<i class="icons e-icon cnf cnf-s half" id="segc${lowestUnused}" onclick="setSeg(${lowestUnused}); resetUtil();"></i>
|
<i class="icons e-icon cnf cnf-s half" id="segc${lowestUnused}" onclick="setSeg(${lowestUnused});resetUtil();"></i>
|
||||||
<div class="c"><button class="btn" onclick="resetUtil()">Cancel</button></div>
|
<div class="c"><button class="btn btn-p" onclick="resetUtil()">Cancel</button></div>
|
||||||
</div>
|
</div>
|
||||||
</div>`;
|
</div>`;
|
||||||
d.getElementById('segutil').innerHTML = cn;
|
gId('segutil').innerHTML = cn;
|
||||||
}
|
}
|
||||||
|
|
||||||
function resetUtil()
|
function resetUtil()
|
||||||
{
|
{
|
||||||
var cn = `<button class="btn btn-s btn-i" onclick="makeSeg()"><i class="icons btn-icon"></i>Add segment</button><br>`;
|
gId('segutil').innerHTML = '<button class="btn btn-s btn-i" onclick="makeSeg()"><i class="icons btn-icon"></i>Add segment</button><br>';
|
||||||
d.getElementById('segutil').innerHTML = cn;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function makeP(i)
|
function makeP(i)
|
||||||
@ -1304,25 +1304,25 @@ ${(i>0)? ('<div class="h">ID ' +i+ '</div>'):""}`;
|
|||||||
|
|
||||||
function makePUtil()
|
function makePUtil()
|
||||||
{
|
{
|
||||||
d.getElementById('putil').innerHTML = `<div class="seg pres">
|
gId('putil').innerHTML = `<div class="seg pres">
|
||||||
<div class="segname newseg">
|
<div class="segname newseg">
|
||||||
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'));
|
updateTrail(gId('p0p'));
|
||||||
|
for (var i=0; i<expanded.length; i++) if (expanded[i]) expand(i);
|
||||||
}
|
}
|
||||||
|
|
||||||
function resetPUtil()
|
function resetPUtil()
|
||||||
{
|
{
|
||||||
var cn = `<button class="btn btn-s btn-i" onclick="makePUtil()"><i class="icons btn-icon"></i>Create preset</button><br>`;
|
gId('putil').innerHTML = `<button class="btn btn-s btn-i" onclick="makePUtil()"><i class="icons btn-icon"></i>Create preset</button><br>`;
|
||||||
d.getElementById('putil').innerHTML = cn;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function tglCs(i)
|
function tglCs(i)
|
||||||
{
|
{
|
||||||
var pss = d.getElementById(`p${i}cstgl`).checked;
|
var pss = gId(`p${i}cstgl`).checked;
|
||||||
d.getElementById(`p${i}o1`).style.display = pss? "block" : "none";
|
gId(`p${i}o1`).style.display = pss? "block" : "none";
|
||||||
d.getElementById(`p${i}o2`).style.display = !pss? "block" : "none";
|
gId(`p${i}o2`).style.display = !pss? "block" : "none";
|
||||||
}
|
}
|
||||||
|
|
||||||
function selSegEx(s)
|
function selSegEx(s)
|
||||||
@ -1334,21 +1334,21 @@ function selSegEx(s)
|
|||||||
|
|
||||||
function selSeg(s)
|
function selSeg(s)
|
||||||
{
|
{
|
||||||
var sel = d.getElementById(`seg${s}sel`).checked;
|
var sel = gId(`seg${s}sel`).checked;
|
||||||
var obj = {"seg": {"id": s, "sel": sel}};
|
var obj = {"seg": {"id": s, "sel": sel}};
|
||||||
requestJson(obj, false);
|
requestJson(obj, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setSeg(s)
|
function setSeg(s)
|
||||||
{
|
{
|
||||||
var start = parseInt(d.getElementById(`seg${s}s`).value);
|
var start = parseInt(gId(`seg${s}s`).value);
|
||||||
var stop = parseInt(d.getElementById(`seg${s}e`).value);
|
var stop = parseInt(gId(`seg${s}e`).value);
|
||||||
if (stop == 0) {delSeg(s); return;}
|
if (stop == 0) {delSeg(s); return;}
|
||||||
var obj = {"seg": {"id": s, "start": start, "stop": (cfg.comp.seglen?start:0)+stop}};
|
var obj = {"seg": {"id": s, "start": start, "stop": (cfg.comp.seglen?start:0)+stop}};
|
||||||
if (d.getElementById(`seg${s}grp`))
|
if (gId(`seg${s}grp`))
|
||||||
{
|
{
|
||||||
var grp = parseInt(d.getElementById(`seg${s}grp`).value);
|
var grp = parseInt(gId(`seg${s}grp`).value);
|
||||||
var spc = parseInt(d.getElementById(`seg${s}spc`).value);
|
var spc = parseInt(gId(`seg${s}spc`).value);
|
||||||
obj.seg.grp = grp;
|
obj.seg.grp = grp;
|
||||||
obj.seg.spc = spc;
|
obj.seg.spc = spc;
|
||||||
}
|
}
|
||||||
@ -1369,14 +1369,14 @@ function delSeg(s)
|
|||||||
|
|
||||||
function setRev(s)
|
function setRev(s)
|
||||||
{
|
{
|
||||||
var rev = d.getElementById(`seg${s}rev`).checked;
|
var rev = gId(`seg${s}rev`).checked;
|
||||||
var obj = {"seg": {"id": s, "rev": rev}};
|
var obj = {"seg": {"id": s, "rev": rev}};
|
||||||
requestJson(obj, false);
|
requestJson(obj, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setMi(s)
|
function setMi(s)
|
||||||
{
|
{
|
||||||
var mi = d.getElementById(`seg${s}mi`).checked;
|
var mi = gId(`seg${s}mi`).checked;
|
||||||
var obj = {"seg": {"id": s, "mi": mi}};
|
var obj = {"seg": {"id": s, "mi": mi}};
|
||||||
requestJson(obj, false);
|
requestJson(obj, false);
|
||||||
}
|
}
|
||||||
@ -1389,7 +1389,7 @@ function setSegPwr(s)
|
|||||||
|
|
||||||
function setSegBri(s)
|
function setSegBri(s)
|
||||||
{
|
{
|
||||||
var obj = {"seg": {"id": s, "bri": parseInt(d.getElementById(`seg${s}bri`).value)}};
|
var obj = {"seg": {"id": s, "bri": parseInt(gId(`seg${s}bri`).value)}};
|
||||||
requestJson(obj, false);
|
requestJson(obj, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1426,20 +1426,20 @@ function setPalette(paletteId = null)
|
|||||||
|
|
||||||
function setBri()
|
function setBri()
|
||||||
{
|
{
|
||||||
var obj = {"bri": parseInt(d.getElementById('sliderBri').value)};
|
var obj = {"bri": parseInt(gId('sliderBri').value)};
|
||||||
obj.transition = parseInt(d.getElementById('cyctt').value*10);
|
obj.transition = parseInt(gId('cyctt').value*10);
|
||||||
requestJson(obj, false, noWS);
|
requestJson(obj, false, noWS);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setSpeed()
|
function setSpeed()
|
||||||
{
|
{
|
||||||
var obj = {"seg": {"sx": parseInt(d.getElementById('sliderSpeed').value)}};
|
var obj = {"seg": {"sx": parseInt(gId('sliderSpeed').value)}};
|
||||||
requestJson(obj, false, noWS);
|
requestJson(obj, false, noWS);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setIntensity()
|
function setIntensity()
|
||||||
{
|
{
|
||||||
var obj = {"seg": {"ix": parseInt(d.getElementById('sliderIntensity').value)}};
|
var obj = {"seg": {"ix": parseInt(gId('sliderIntensity').value)}};
|
||||||
requestJson(obj, false, noWS);
|
requestJson(obj, false, noWS);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1452,10 +1452,10 @@ function setLor(i)
|
|||||||
function toggleCY()
|
function toggleCY()
|
||||||
{
|
{
|
||||||
var obj = {"pl" : -1};
|
var obj = {"pl" : -1};
|
||||||
if (d.getElementById('cyToggle').checked)
|
if (gId('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 = {"pl": 0, "ccnf": {"min": parseInt(gId('cycs').value), "max": parseInt(gId('cyce').value), "time": parseInt(gId('cyct').value*10)}};
|
||||||
obj.transition = parseInt(d.getElementById('cyctt').value*10);
|
obj.transition = parseInt(gId('cyctt').value*10);
|
||||||
}
|
}
|
||||||
|
|
||||||
requestJson(obj, false, noWS);
|
requestJson(obj, false, noWS);
|
||||||
@ -1470,35 +1470,35 @@ function setPreset(i)
|
|||||||
|
|
||||||
function saveP(i)
|
function saveP(i)
|
||||||
{
|
{
|
||||||
pI = parseInt(d.getElementById(`p${i}id`).value);
|
pI = parseInt(gId(`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 = gId(`p${i}txt`).value;
|
||||||
if (pN == "") pN = "Preset " + pI;
|
if (pN == "") pN = "Preset " + pI;
|
||||||
var obj = {};
|
var obj = {};
|
||||||
if (!d.getElementById(`p${i}cstgl`).checked) {
|
if (!gId(`p${i}cstgl`).checked) {
|
||||||
var raw = d.getElementById(`p${i}api`).value;
|
var raw = gId(`p${i}api`).value;
|
||||||
try {
|
try {
|
||||||
obj = JSON.parse(raw);
|
obj = JSON.parse(raw);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
obj.win = raw;
|
obj.win = raw;
|
||||||
if (raw.length < 2) {
|
if (raw.length < 2) {
|
||||||
d.getElementById(`p${i}warn`).innerHTML = "⚠ Please enter your API command first";
|
gId(`p${i}warn`).innerHTML = "⚠ Please enter your API command first";
|
||||||
return;
|
return;
|
||||||
} else if (raw.indexOf('{') > -1) {
|
} else if (raw.indexOf('{') > -1) {
|
||||||
d.getElementById(`p${i}warn`).innerHTML = "⚠ Syntax error in custom JSON API command";
|
gId(`p${i}warn`).innerHTML = "⚠ 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 = "⚠ Please refresh the page before modifying this preset";
|
gId(`p${i}warn`).innerHTML = "⚠ 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;
|
obj.ib = gId(`p${i}ibtgl`).checked;
|
||||||
obj.sb = d.getElementById(`p${i}sbtgl`).checked;
|
obj.sb = gId(`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 = gId(`p${i}ql`).value;
|
||||||
if (pQN.length > 0) obj.ql = pQN;
|
if (pQN.length > 0) obj.ql = pQN;
|
||||||
|
|
||||||
showToast("Saving " + pN +" (" + pI + ")");
|
showToast("Saving " + pN +" (" + pI + ")");
|
||||||
@ -1529,7 +1529,7 @@ function delP(i)
|
|||||||
function selectSlot(b)
|
function selectSlot(b)
|
||||||
{
|
{
|
||||||
csel = b;
|
csel = b;
|
||||||
var cd = d.getElementById('csl').children;
|
var cd = gId('csl').children;
|
||||||
for (let i = 0; i < cd.length; i++) {
|
for (let i = 0; i < cd.length; i++) {
|
||||||
cd[i].style.border="2px solid var(--c-e)";
|
cd[i].style.border="2px solid var(--c-e)";
|
||||||
cd[i].style.margin="5px";
|
cd[i].style.margin="5px";
|
||||||
@ -1539,8 +1539,8 @@ function selectSlot(b)
|
|||||||
cd[csel].style.margin="2px";
|
cd[csel].style.margin="2px";
|
||||||
cd[csel].style.width="50px";
|
cd[csel].style.width="50px";
|
||||||
cpick.color.set(cd[csel].style.backgroundColor);
|
cpick.color.set(cd[csel].style.backgroundColor);
|
||||||
d.getElementById('sliderW').value = whites[csel];
|
gId('sliderW').value = whites[csel];
|
||||||
updateTrail(d.getElementById('sliderW'));
|
updateTrail(gId('sliderW'));
|
||||||
updateHex();
|
updateHex();
|
||||||
updateRgb();
|
updateRgb();
|
||||||
redrawPalPrev();
|
redrawPalPrev();
|
||||||
@ -1564,11 +1564,11 @@ function pC(col)
|
|||||||
function updateRgb()
|
function updateRgb()
|
||||||
{
|
{
|
||||||
var col = cpick.color.rgb;
|
var col = cpick.color.rgb;
|
||||||
var s = d.getElementById('sliderR');
|
var s = gId('sliderR');
|
||||||
s.value = col.r; updateTrail(s,1);
|
s.value = col.r; updateTrail(s,1);
|
||||||
s = d.getElementById('sliderG');
|
s = gId('sliderG');
|
||||||
s.value = col.g; updateTrail(s,2);
|
s.value = col.g; updateTrail(s,2);
|
||||||
s = d.getElementById('sliderB');
|
s = gId('sliderB');
|
||||||
s.value = col.b; updateTrail(s,3);
|
s.value = col.b; updateTrail(s,3);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1578,19 +1578,19 @@ function updateHex()
|
|||||||
str = str.substring(1);
|
str = str.substring(1);
|
||||||
var w = whites[csel];
|
var w = whites[csel];
|
||||||
if (w > 0) str += w.toString(16);
|
if (w > 0) str += w.toString(16);
|
||||||
d.getElementById('hexc').value = str;
|
gId('hexc').value = str;
|
||||||
d.getElementById('hexcnf').style.backgroundColor = "var(--c-3)";
|
gId('hexcnf').style.backgroundColor = "var(--c-3)";
|
||||||
}
|
}
|
||||||
|
|
||||||
function hexEnter()
|
function hexEnter()
|
||||||
{
|
{
|
||||||
d.getElementById('hexcnf').style.backgroundColor = "var(--c-6)";
|
gId('hexcnf').style.backgroundColor = "var(--c-6)";
|
||||||
if(event.keyCode == 13) fromHex();
|
if(event.keyCode == 13) fromHex();
|
||||||
}
|
}
|
||||||
|
|
||||||
function fromHex()
|
function fromHex()
|
||||||
{
|
{
|
||||||
var str = d.getElementById('hexc').value;
|
var str = gId('hexc').value;
|
||||||
whites[csel] = parseInt(str.substring(6), 16);
|
whites[csel] = parseInt(str.substring(6), 16);
|
||||||
try {
|
try {
|
||||||
cpick.color.set("#" + str.substring(0,6));
|
cpick.color.set("#" + str.substring(0,6));
|
||||||
@ -1603,19 +1603,19 @@ function fromHex()
|
|||||||
|
|
||||||
function fromRgb()
|
function fromRgb()
|
||||||
{
|
{
|
||||||
var r = d.getElementById('sliderR').value;
|
var r = gId('sliderR').value;
|
||||||
var g = d.getElementById('sliderG').value;
|
var g = gId('sliderG').value;
|
||||||
var b = d.getElementById('sliderB').value;
|
var b = gId('sliderB').value;
|
||||||
cpick.color.set(`rgb(${r},${g},${b})`);
|
cpick.color.set(`rgb(${r},${g},${b})`);
|
||||||
setColor(0);
|
setColor(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setColor(sr)
|
function setColor(sr)
|
||||||
{
|
{
|
||||||
var cd = d.getElementById('csl').children;
|
var cd = gId('csl').children;
|
||||||
if (sr == 1 && cd[csel].style.backgroundColor == 'rgb(0, 0, 0)') cpick.color.setChannel('hsv', 'v', 100);
|
if (sr == 1 && cd[csel].style.backgroundColor == 'rgb(0, 0, 0)') cpick.color.setChannel('hsv', 'v', 100);
|
||||||
cd[csel].style.backgroundColor = cpick.color.rgbString;
|
cd[csel].style.backgroundColor = cpick.color.rgbString;
|
||||||
if (sr != 2) whites[csel] = d.getElementById('sliderW').value;
|
if (sr != 2) whites[csel] = gId('sliderW').value;
|
||||||
var col = cpick.color.rgb;
|
var col = cpick.color.rgb;
|
||||||
var obj = {"seg": {"col": [[col.r, col.g, col.b, whites[csel]],[],[]]}};
|
var obj = {"seg": {"col": [[col.r, col.g, col.b, whites[csel]],[],[]]}};
|
||||||
if (csel == 1) {
|
if (csel == 1) {
|
||||||
@ -1625,13 +1625,13 @@ function setColor(sr)
|
|||||||
}
|
}
|
||||||
updateHex();
|
updateHex();
|
||||||
updateRgb();
|
updateRgb();
|
||||||
obj.transition = parseInt(d.getElementById('cyctt').value*10);
|
obj.transition = parseInt(gId('cyctt').value*10);
|
||||||
requestJson(obj, false, noWS);
|
requestJson(obj, false, noWS);
|
||||||
}
|
}
|
||||||
|
|
||||||
var hc = 0;
|
var hc = 0;
|
||||||
setInterval(function(){if (!isInfo) return; hc+=18; if (hc>300) hc=0; if (hc>200)hc=306; if (hc==144) hc+=36; if (hc==108) hc+=18;
|
setInterval(function(){if (!isInfo) return; hc+=18; if (hc>300) hc=0; if (hc>200)hc=306; if (hc==144) hc+=36; if (hc==108) hc+=18;
|
||||||
d.getElementById('heart').style.color = `hsl(${hc}, 100%, 50%)`;}, 910);
|
gId('heart').style.color = `hsl(${hc}, 100%, 50%)`;}, 910);
|
||||||
|
|
||||||
function openGH() { window.open("https://github.com/Aircoookie/WLED/wiki"); }
|
function openGH() { window.open("https://github.com/Aircoookie/WLED/wiki"); }
|
||||||
|
|
||||||
@ -1639,7 +1639,7 @@ var cnfr = false;
|
|||||||
function cnfReset()
|
function cnfReset()
|
||||||
{
|
{
|
||||||
if (!cnfr) {
|
if (!cnfr) {
|
||||||
var bt = d.getElementById('resetbtn');
|
var bt = gId('resetbtn');
|
||||||
bt.style.color = "#f00";
|
bt.style.color = "#f00";
|
||||||
bt.innerHTML = "Confirm Reboot";
|
bt.innerHTML = "Confirm Reboot";
|
||||||
cnfr = true; return;
|
cnfr = true; return;
|
||||||
@ -1650,7 +1650,7 @@ function cnfReset()
|
|||||||
var cnfrS = false;
|
var cnfrS = false;
|
||||||
function rSegs()
|
function rSegs()
|
||||||
{
|
{
|
||||||
var bt = d.getElementById('rsbtn');
|
var bt = gId('rsbtn');
|
||||||
if (!cnfrS) {
|
if (!cnfrS) {
|
||||||
bt.style.color = "#f00";
|
bt.style.color = "#f00";
|
||||||
bt.innerHTML = "Confirm reset";
|
bt.innerHTML = "Confirm reset";
|
||||||
@ -1719,7 +1719,7 @@ function search(f,l=null)
|
|||||||
{
|
{
|
||||||
f.nextElementSibling.style.display=(f.value!=='')?'block':'none';
|
f.nextElementSibling.style.display=(f.value!=='')?'block':'none';
|
||||||
if (!l) return;
|
if (!l) return;
|
||||||
var el = d.getElementById(l).querySelectorAll('.lstI');
|
var el = gId(l).querySelectorAll('.lstI');
|
||||||
for (i = 0; i < el.length; i++) {
|
for (i = 0; i < el.length; i++) {
|
||||||
var it = el[i];
|
var it = el[i];
|
||||||
var itT = it.querySelector('.lstIname').innerText.toUpperCase();
|
var itT = it.querySelector('.lstIname').innerText.toUpperCase();
|
||||||
@ -1738,18 +1738,18 @@ function clean(c)
|
|||||||
|
|
||||||
function expand(i,a)
|
function expand(i,a)
|
||||||
{
|
{
|
||||||
var seg = d.getElementById('seg' +i);
|
var seg = gId('seg' +i);
|
||||||
if (!a) expanded[i] = !expanded[i];
|
if (!a) expanded[i] = !expanded[i];
|
||||||
seg.style.display = (expanded[i]) ? "block":"none";
|
seg.style.display = (expanded[i]) ? "block":"none";
|
||||||
d.getElementById('sege' +i).style.transform = (expanded[i]) ? "rotate(180deg)":"rotate(0deg)";
|
gId('sege' +i).style.transform = (expanded[i]) ? "rotate(180deg)":"rotate(0deg)";
|
||||||
if (i > 100) { //presets
|
if (i > 100) { //presets
|
||||||
var p = i-100;
|
var p = i-100;
|
||||||
d.getElementById(`p${p}o`).style.background = (expanded[i] || p != currentPreset)?"var(--c-2)":"var(--c-6)";
|
gId(`p${p}o`).style.background = (expanded[i] || p != currentPreset)?"var(--c-2)":"var(--c-6)";
|
||||||
if (seg.innerHTML == "") {
|
if (seg.innerHTML == "") {
|
||||||
seg.innerHTML = makeP(p);
|
seg.innerHTML = makeP(p);
|
||||||
var papi = papiVal(p);
|
var papi = papiVal(p);
|
||||||
d.getElementById(`p${p}api`).value = papi;
|
gId(`p${p}api`).value = papi;
|
||||||
if (papi.indexOf("Please") == 0) d.getElementById(`p${p}cstgl`).checked = true;
|
if (papi.indexOf("Please") == 0) gId(`p${p}cstgl`).checked = true;
|
||||||
tglCs(p);
|
tglCs(p);
|
||||||
}
|
}
|
||||||
seg = seg.parentElement;
|
seg = seg.parentElement;
|
||||||
@ -1762,9 +1762,9 @@ function expand(i,a)
|
|||||||
|
|
||||||
function unfocusSliders()
|
function unfocusSliders()
|
||||||
{
|
{
|
||||||
d.getElementById("sliderBri").blur();
|
gId("sliderBri").blur();
|
||||||
d.getElementById("sliderSpeed").blur();
|
gId("sliderSpeed").blur();
|
||||||
d.getElementById("sliderIntensity").blur();
|
gId("sliderIntensity").blur();
|
||||||
}
|
}
|
||||||
|
|
||||||
//sliding UI
|
//sliding UI
|
||||||
@ -1822,10 +1822,10 @@ function move(e)
|
|||||||
function size()
|
function size()
|
||||||
{
|
{
|
||||||
w = window.innerWidth;
|
w = window.innerWidth;
|
||||||
d.getElementById('buttonNodes').style.display = (lastinfo.ndc > 0 && w > 770) ? "block":"none";
|
gId('buttonNodes').style.display = (lastinfo.ndc > 0 && w > 770) ? "block":"none";
|
||||||
var h = d.getElementById('top').clientHeight;
|
var h = gId('top').clientHeight;
|
||||||
sCol('--th', h + "px");
|
sCol('--th', h + "px");
|
||||||
sCol('--bh', d.getElementById('bot').clientHeight + "px");
|
sCol('--bh', gId('bot').clientHeight + "px");
|
||||||
if (isLv) h -= 4;
|
if (isLv) h -= 4;
|
||||||
sCol('--tp', h + "px");
|
sCol('--tp', h + "px");
|
||||||
togglePcMode();
|
togglePcMode();
|
||||||
@ -1844,9 +1844,9 @@ function togglePcMode(fromB = false)
|
|||||||
if (w < 1250) {pcMode = false;}
|
if (w < 1250) {pcMode = false;}
|
||||||
else if (pcModeA && !fromB) pcMode = pcModeA;
|
else if (pcModeA && !fromB) pcMode = pcModeA;
|
||||||
updateTablinks(0);
|
updateTablinks(0);
|
||||||
d.getElementById('buttonPcm').className = (pcMode) ? "active":"";
|
gId('buttonPcm').className = (pcMode) ? "active":"";
|
||||||
d.getElementById('bot').style.height = (pcMode && !cfg.comp.pcmbot) ? "0":"auto";
|
gId('bot').style.height = (pcMode && !cfg.comp.pcmbot) ? "0":"auto";
|
||||||
sCol('--bh', d.getElementById('bot').clientHeight + "px");
|
sCol('--bh', gId('bot').clientHeight + "px");
|
||||||
_C.style.width = (pcMode)?'100%':'400%';
|
_C.style.width = (pcMode)?'100%':'400%';
|
||||||
lastw = w;
|
lastw = w;
|
||||||
}
|
}
|
||||||
|
3410
wled00/html_ui.h
3410
wled00/html_ui.h
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user