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

Request throttling

Browse Source 
UI/UX improvements
This commit is contained in:
Blaz Kristan 2023-10-16 18:34:51 +02:00
parent f329a5950e
commit a49b49aaa9
4 changed files with 2058 additions and 2038 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
wled00/data/index.htm
View File

@ -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()">&#xe22d;</i> <i class="icons sel-icon" onclick="tglRgb()">&#xe22d;</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">&#xe390;</i></button> <button id="hexcnf" class="btn btn-xs" onclick="fromHex();"><i class="icons btn-icon">&#xe390;</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">&#xe410;</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">&#xe18a;</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">&#xe037;</i></button>
</div>
<p class="labels" id="pall"><i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> Color palette</p> <p class="labels" id="pall"><i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</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">&#xe18a;</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">&#xe037;</i></button>
</div>
</div> </div>
</div> </div>

39
wled00/data/index.js
View File

@ -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(()=>{
// load and populate effects setTimeout(()=>{ // ESP8266 can't handle quick requests
loadFX(()=>{ // load and populate effects
setTimeout(()=>{ // ESP8266 can't handle quick requests loadFX(()=>{
loadPalettesData(()=>{ setTimeout(()=>{ // ESP8266 can't handle quick requests
requestJson();// will load presets and create WS loadPalettesData(()=>{
}); requestJson();// will load presets and create WS
},100); if (cfg.comp.css) setTimeout(()=>{loadSkinCSS('skinCss')},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()">&#xe2b3;</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()">&#xe2b3;</i> Color palette';
} else { } else {
// disable palette list // disable palette list
pall.innerHTML = '<i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</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
View File

File diff suppressed because it is too large Load Diff

2
wled00/wled.h
View File

@ -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