Request throttling
UI/UX improvements
This commit is contained in:
parent
f329a5950e
commit
a49b49aaa9
@ -48,7 +48,7 @@
|
|||||||
});
|
});
|
||||||
setTimeout(()=>{h.appendChild(l)},100);
|
setTimeout(()=>{h.appendChild(l)},100);
|
||||||
});
|
});
|
||||||
setTimeout(()=>{h.appendChild(l)},100);
|
setTimeout(()=>{h.appendChild(l)},200);
|
||||||
</script>
|
</script>
|
||||||
<link rel="stylesheet" href="index.css">
|
<link rel="stylesheet" href="index.css">
|
||||||
</head>
|
</head>
|
||||||
@ -88,7 +88,7 @@
|
|||||||
<div class ="container">
|
<div class ="container">
|
||||||
<div id="Colors" class="tabcontent">
|
<div id="Colors" class="tabcontent">
|
||||||
<div id="picker" class="noslide"></div>
|
<div id="picker" class="noslide"></div>
|
||||||
<div id="hwrap" class="slider" style="margin-top: 20px;">
|
<div id="hwrap" class="slider">
|
||||||
<div class="sliderwrap il">
|
<div class="sliderwrap il">
|
||||||
<input id="sliderH" class="noslide" oninput="fromH()" onchange="setColor(0)" max="359" min="0" type="range" value="0" step="any">
|
<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 class="sliderdisplay" style="background: linear-gradient(90deg, #f00 2%, #ff0 19%, #0f0 35%, #0ff 52%, #00f 68%, #f0f 85%, #f00)"></div>
|
||||||
@ -170,16 +170,21 @@
|
|||||||
<div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
|
<div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="csl">
|
<div id="csl">
|
||||||
<button id="csl0" class="btn xxs cl" onclick="selectSlot(0);" data-r="0" data-g="0" data-b="0" data-w="0">1</button>
|
<button id="csl0" title="Select slot" class="btn xxs cl" onclick="selectSlot(0);" data-r="0" data-g="0" data-b="0" data-w="0">1</button>
|
||||||
<button id="csl1" class="btn xxs cl" onclick="selectSlot(1);" data-r="0" data-g="0" data-b="0" data-w="0">2</button>
|
<button id="csl1" title="Select slot" class="btn xxs cl" onclick="selectSlot(1);" data-r="0" data-g="0" data-b="0" data-w="0">2</button>
|
||||||
<button id="csl2" class="btn xxs cl" onclick="selectSlot(2);" data-r="0" data-g="0" data-b="0" data-w="0">3</button>
|
<button id="csl2" title="Select slot" class="btn xxs cl" onclick="selectSlot(2);" data-r="0" data-g="0" data-b="0" data-w="0">3</button>
|
||||||
</div>
|
</div>
|
||||||
<p class="labels h" id="cslLabel"></p>
|
<p class="labels h" id="cslLabel"></p>
|
||||||
<div id="hexw">
|
<div id="hexw">
|
||||||
<i class="icons sel-icon" onclick="tglRgb()"></i>
|
<i class="icons sel-icon" onclick="tglRgb()"></i>
|
||||||
<input id="hexc" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" />
|
<input id="hexc" title="Hex RGB" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" />
|
||||||
<button id="hexcnf" class="btn btn-xs" onclick="fromHex();"><i class="icons btn-icon"></i></button>
|
<button id="hexcnf" class="btn btn-xs" onclick="fromHex();"><i class="icons btn-icon"></i></button>
|
||||||
</div>
|
</div>
|
||||||
|
<div style="padding: 8px 0;">
|
||||||
|
<button title="Pixel Magic Tool" class="btn btn-xs" type="button" onclick="window.location.href=getURL('/pxmagic.htm')"><i class="icons btn-icon"></i></button>
|
||||||
|
<button title="Add custom palette" class="btn btn-xs" type="button" onclick="window.location.href=getURL('/cpal.htm')"><i class="icons btn-icon"></i></button>
|
||||||
|
<button id="rmPal" title="Remove custom palette" class="btn btn-xs" type="button" onclick="palettesData=null;localStorage.removeItem('wledPalx');requestJson({rmcpal:true});setTimeout(loadPalettes,250,loadPalettesData);"><i class="icons btn-icon"></i></button>
|
||||||
|
</div>
|
||||||
<p class="labels" id="pall"><i class="icons sel-icon" onclick="tglHex()"></i> Color palette</p>
|
<p class="labels" id="pall"><i class="icons sel-icon" onclick="tglHex()"></i> Color palette</p>
|
||||||
<div id="palw" class="il">
|
<div id="palw" class="il">
|
||||||
<div class="staytop fnd">
|
<div class="staytop fnd">
|
||||||
@ -198,10 +203,6 @@
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="padding-bottom: 10px;">
|
|
||||||
<button class="btn btn-xs" type="button" onclick="window.location.href=getURL('/cpal.htm')"><i class="icons btn-icon"></i></button>
|
|
||||||
<button class="btn btn-xs" type="button" onclick="palettesData=null;localStorage.removeItem('wledPalx');requestJson({rmcpal:true});setTimeout(loadPalettes,250,loadPalettesData);"><i class="icons btn-icon"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -74,6 +74,7 @@ function setCSL(cs)
|
|||||||
function applyCfg()
|
function applyCfg()
|
||||||
{
|
{
|
||||||
cTheme(cfg.theme.base === "light");
|
cTheme(cfg.theme.base === "light");
|
||||||
|
gId("Colors").style.paddingTop = cfg.comp.colors.picker ? "0" : "20px";
|
||||||
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 l = cfg.comp.labels;
|
var l = cfg.comp.labels;
|
||||||
@ -109,6 +110,7 @@ function tglLabels()
|
|||||||
function tglRgb()
|
function tglRgb()
|
||||||
{
|
{
|
||||||
cfg.comp.colors.rgb = !cfg.comp.colors.rgb;
|
cfg.comp.colors.rgb = !cfg.comp.colors.rgb;
|
||||||
|
cfg.comp.colors.picker = !cfg.comp.colors.picker;
|
||||||
applyCfg();
|
applyCfg();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -255,7 +257,6 @@ function onLoad()
|
|||||||
});
|
});
|
||||||
} else
|
} else
|
||||||
loadBg(cfg.theme.bg.url);
|
loadBg(cfg.theme.bg.url);
|
||||||
if (cfg.comp.css) loadSkinCSS('skinCss');
|
|
||||||
|
|
||||||
selectSlot(0);
|
selectSlot(0);
|
||||||
updateTablinks(0);
|
updateTablinks(0);
|
||||||
@ -265,14 +266,17 @@ function onLoad()
|
|||||||
loadPalettes(()=>{
|
loadPalettes(()=>{
|
||||||
// fill effect extra data array
|
// fill effect extra data array
|
||||||
loadFXData(()=>{
|
loadFXData(()=>{
|
||||||
|
setTimeout(()=>{ // ESP8266 can't handle quick requests
|
||||||
// load and populate effects
|
// load and populate effects
|
||||||
loadFX(()=>{
|
loadFX(()=>{
|
||||||
setTimeout(()=>{ // ESP8266 can't handle quick requests
|
setTimeout(()=>{ // ESP8266 can't handle quick requests
|
||||||
loadPalettesData(()=>{
|
loadPalettesData(()=>{
|
||||||
requestJson();// will load presets and create WS
|
requestJson();// will load presets and create WS
|
||||||
|
if (cfg.comp.css) setTimeout(()=>{loadSkinCSS('skinCss')},100);
|
||||||
});
|
});
|
||||||
},100);
|
},100);
|
||||||
});
|
});
|
||||||
|
},100);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
resetUtil();
|
resetUtil();
|
||||||
@ -926,8 +930,9 @@ function populatePalettes()
|
|||||||
}
|
}
|
||||||
gId('pallist').innerHTML=html;
|
gId('pallist').innerHTML=html;
|
||||||
// append custom palettes (when loading for the 1st time)
|
// append custom palettes (when loading for the 1st time)
|
||||||
if (!isEmpty(lastinfo) && lastinfo.cpalcount) {
|
let li = lastinfo;
|
||||||
for (let j = 0; j<lastinfo.cpalcount; j++) {
|
if (!isEmpty(li) && li.cpalcount) {
|
||||||
|
for (let j = 0; j<li.cpalcount; j++) {
|
||||||
let div = d.createElement("div");
|
let div = d.createElement("div");
|
||||||
gId('pallist').appendChild(div);
|
gId('pallist').appendChild(div);
|
||||||
div.outerHTML = generateListItemHtml(
|
div.outerHTML = generateListItemHtml(
|
||||||
@ -939,6 +944,8 @@ function populatePalettes()
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if (li.cpalcount>0) gId("rmPal").classList.remove("hide");
|
||||||
|
else gId("rmPal").classList.add("hide");
|
||||||
}
|
}
|
||||||
|
|
||||||
function redrawPalPrev()
|
function redrawPalPrev()
|
||||||
@ -1566,10 +1573,14 @@ function setEffectParameters(idx)
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
gId("cslLabel").innerHTML = cslLabel;
|
gId("cslLabel").innerHTML = cslLabel;
|
||||||
|
if (cslLabel!=="") gId("cslLabel").classList.remove("hide");
|
||||||
|
else gId("cslLabel").classList.add("hide");
|
||||||
|
|
||||||
// set palette on/off
|
// set palette on/off
|
||||||
var palw = gId("palw"); // wrapper
|
var palw = gId("palw"); // wrapper
|
||||||
var pall = gId("pall"); // label
|
var pall = gId("pall"); // label
|
||||||
|
var icon = '<i class="icons sel-icon" onclick="tglHex()"></i> ';
|
||||||
|
var text = 'Color palette';
|
||||||
// if not controlDefined or palette has a value
|
// if not controlDefined or palette has a value
|
||||||
if (hasRGB && ((!controlDefined) || (paOnOff.length>0 && paOnOff[0]!="" && isNaN(paOnOff[0])))) {
|
if (hasRGB && ((!controlDefined) || (paOnOff.length>0 && paOnOff[0]!="" && isNaN(paOnOff[0])))) {
|
||||||
palw.style.display = "inline-block";
|
palw.style.display = "inline-block";
|
||||||
@ -1579,13 +1590,13 @@ function setEffectParameters(idx)
|
|||||||
var v = Math.max(0,Math.min(255,parseInt(paOnOff[0].substr(dPos+1))));
|
var v = Math.max(0,Math.min(255,parseInt(paOnOff[0].substr(dPos+1))));
|
||||||
paOnOff[0] = paOnOff[0].substring(0,dPos);
|
paOnOff[0] = paOnOff[0].substring(0,dPos);
|
||||||
}
|
}
|
||||||
if (paOnOff.length>0 && paOnOff[0] != "!") pall.innerHTML = paOnOff[0];
|
if (paOnOff.length>0 && paOnOff[0] != "!") text = paOnOff[0];
|
||||||
else pall.innerHTML = '<i class="icons sel-icon" onclick="tglHex()"></i> Color palette';
|
|
||||||
} else {
|
} else {
|
||||||
// disable palette list
|
// disable palette list
|
||||||
pall.innerHTML = '<i class="icons sel-icon" onclick="tglHex()"></i> Color palette not used';
|
text += ' not used';
|
||||||
palw.style.display = "none";
|
palw.style.display = "none";
|
||||||
}
|
}
|
||||||
|
pall.innerHTML = icon + text;
|
||||||
// not all color selectors shown, hide palettes created from color selectors
|
// not all color selectors shown, hide palettes created from color selectors
|
||||||
// NOTE: this will disallow user to select "* Color ..." palettes which may be undesirable in some cases or for some users
|
// NOTE: this will disallow user to select "* Color ..." palettes which may be undesirable in some cases or for some users
|
||||||
//for (let e of (gId('pallist').querySelectorAll('.lstI')||[])) {
|
//for (let e of (gId('pallist').querySelectorAll('.lstI')||[])) {
|
||||||
|
4034
wled00/html_ui.h
4034
wled00/html_ui.h
File diff suppressed because it is too large
Load Diff
@ -8,7 +8,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
// version code in format yymmddb (b = daily build)
|
// version code in format yymmddb (b = daily build)
|
||||||
#define VERSION 2310150
|
#define VERSION 2310160
|
||||||
|
|
||||||
//uncomment this if you have a "my_config.h" file you'd like to use
|
//uncomment this if you have a "my_config.h" file you'd like to use
|
||||||
//#define WLED_USE_MY_CONFIG
|
//#define WLED_USE_MY_CONFIG
|
||||||
|
Loading…
Reference in New Issue
Block a user