2019-11-27 21:28:13 +00:00
|
|
|
<!DOCTYPE html>
|
2023-10-04 19:42:15 +00:00
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
2021-04-01 15:12:45 +00:00
|
|
|
<meta charset="utf-8">
|
2023-10-04 19:37:10 +00:00
|
|
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
2019-11-27 21:28:13 +00:00
|
|
|
<title>UI Settings</title>
|
2024-09-17 14:26:11 +00:00
|
|
|
<script src="common.js" async type="text/javascript"></script>
|
2019-11-27 21:28:13 +00:00
|
|
|
<script>
|
2023-10-31 09:21:00 +00:00
|
|
|
var initial_ds, initial_st, initial_su, oldUrl;
|
2023-01-16 21:12:02 +00:00
|
|
|
var sett = null;
|
|
|
|
|
var l = {
|
|
|
|
|
"comp":{
|
|
|
|
|
"labels":"Show button labels",
|
|
|
|
|
"colors":{
|
|
|
|
|
"LABEL":"Color selection methods",
|
|
|
|
|
"picker": "Color Wheel",
|
|
|
|
|
"rgb": "RGB sliders",
|
|
|
|
|
"quick": "Quick color selectors",
|
|
|
|
|
"hex": "HEX color input"
|
2020-08-30 21:31:58 +00:00
|
|
|
},
|
2023-01-16 21:12:02 +00:00
|
|
|
"pcmbot": "Show bottom tab bar in PC mode",
|
|
|
|
|
"pid": "Show preset IDs",
|
|
|
|
|
"seglen": "Set segment length instead of stop LED",
|
|
|
|
|
"segpwr": "Hide segment power & brightness",
|
|
|
|
|
"segexp" : "Always expand first segment",
|
|
|
|
|
"css": "Enable custom CSS",
|
2023-06-16 08:24:56 +00:00
|
|
|
"hdays": "Enable custom Holidays list",
|
2023-10-19 16:54:54 +00:00
|
|
|
"fxdef": "Use effect default parameters",
|
|
|
|
|
"on": "Power button preset override for On",
|
2023-11-04 08:39:08 +00:00
|
|
|
"off": "Power button preset override for Off",
|
|
|
|
|
"idsort": "Sort presets by ID"
|
2023-01-16 21:12:02 +00:00
|
|
|
},
|
|
|
|
|
"theme":{
|
|
|
|
|
"alpha": {
|
|
|
|
|
"bg":"Background opacity",
|
|
|
|
|
"tab":"Button opacity"
|
|
|
|
|
},
|
|
|
|
|
"bg":{
|
|
|
|
|
"url":"BG image URL",
|
2023-10-31 09:21:00 +00:00
|
|
|
"rnd":"Random BG image",
|
|
|
|
|
"rndGrayscale":"Grayscale",
|
|
|
|
|
"rndBlur":"Blur"
|
2023-01-16 21:12:02 +00:00
|
|
|
},
|
|
|
|
|
"color":{
|
|
|
|
|
"bg":"BG HEX color"
|
2020-08-30 21:31:58 +00:00
|
|
|
}
|
|
|
|
|
}
|
2023-01-16 21:12:02 +00:00
|
|
|
};
|
|
|
|
|
function set(path, obj, val) {
|
|
|
|
|
var tar = obj;
|
|
|
|
|
var pList = path.split('_');
|
|
|
|
|
var len = pList.length;
|
|
|
|
|
for(var i = 0; i < len-1; i++) {
|
|
|
|
|
var elem = pList[i];
|
|
|
|
|
if( !tar[elem] ) tar[elem] = {}
|
|
|
|
|
tar = tar[elem];
|
2021-06-06 18:36:19 +00:00
|
|
|
}
|
2023-01-16 21:12:02 +00:00
|
|
|
tar[pList[len-1]] = val;
|
|
|
|
|
}
|
|
|
|
|
function addRec(s, path = "", label = null)
|
|
|
|
|
{
|
|
|
|
|
var str = "";
|
2023-10-31 09:21:00 +00:00
|
|
|
for (let i in s)
|
2020-08-30 21:31:58 +00:00
|
|
|
{
|
2023-01-16 21:12:02 +00:00
|
|
|
var fk = path + (path?'_':'') + i;
|
2024-09-17 14:26:11 +00:00
|
|
|
if (isO(s[i])) {
|
2023-01-16 21:12:02 +00:00
|
|
|
if (label && label[i] && label[i]["LABEL"]) str += `<h3>${label[i]["LABEL"]}</h3>`;
|
|
|
|
|
str += addRec(s[i], fk, label? label[i] : null);
|
|
|
|
|
} else {
|
|
|
|
|
var lb = fk;
|
|
|
|
|
if (label && label[i]) lb = label[i];
|
|
|
|
|
else if (s[i+'LABEL']) lb = s[i+'LABEL'];
|
|
|
|
|
if (i.indexOf('LABEL') > 0) continue;
|
|
|
|
|
var t = typeof s[i];
|
|
|
|
|
if (gId(fk)) { //already exists
|
|
|
|
|
if(t === 'boolean')
|
|
|
|
|
{
|
|
|
|
|
gId(fk).checked = s[i];
|
2020-08-30 21:31:58 +00:00
|
|
|
} else {
|
2023-01-16 21:12:02 +00:00
|
|
|
gId(fk).value = s[i];
|
|
|
|
|
}
|
|
|
|
|
if (gId(fk).previousElementSibling.matches('.l')) {
|
|
|
|
|
gId(fk).previousElementSibling.innerHTML = lb;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
if(t === 'boolean')
|
|
|
|
|
{
|
|
|
|
|
str += `${lb}: <input class="agi cb" type="checkbox" id=${fk} ${s[i]?"checked":""}><br>`;
|
|
|
|
|
} else if (t === 'number')
|
|
|
|
|
{
|
|
|
|
|
str += `${lb}: <input class="agi" type="number" id=${fk} value=${s[i]}><br>`;
|
|
|
|
|
} else if (t === 'string')
|
|
|
|
|
{
|
|
|
|
|
str += `${lb}:<br><input class="agi" id=${fk} value=${s[i]}><br>`;
|
2020-08-30 21:31:58 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-01-16 21:12:02 +00:00
|
|
|
return str;
|
|
|
|
|
}
|
2020-08-30 21:31:58 +00:00
|
|
|
|
2023-01-16 21:12:02 +00:00
|
|
|
function genForm(s) {
|
|
|
|
|
var str = "";
|
|
|
|
|
str = addRec(s,"",l);
|
2024-01-14 13:16:32 +00:00
|
|
|
oldUrl = "";
|
2020-08-30 21:31:58 +00:00
|
|
|
|
2023-01-16 21:12:02 +00:00
|
|
|
gId('gen').innerHTML = str;
|
2023-10-31 09:21:00 +00:00
|
|
|
if (gId('theme_bg_rnd').checked) {
|
|
|
|
|
toggle("Image");
|
2024-01-14 13:16:32 +00:00
|
|
|
} else if (gId('theme_bg_url').value.startsWith('data:')) {
|
|
|
|
|
gId("bg_url").classList.add("hide");
|
2023-10-31 09:21:00 +00:00
|
|
|
} else oldUrl = gId("theme_bg_url").value;
|
2023-01-16 21:12:02 +00:00
|
|
|
}
|
|
|
|
|
function GetLS()
|
|
|
|
|
{
|
|
|
|
|
sett = localStorage.getItem('wledUiCfg');
|
|
|
|
|
if (!sett) gId('lserr').style.display = "inline";
|
|
|
|
|
try {
|
|
|
|
|
sett = JSON.parse(sett);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
sett = {};
|
|
|
|
|
gId('lserr').style.display = "inline";
|
|
|
|
|
gId('lserr').innerHTML = "⚠ Settings JSON parsing failed. (" + e + ")";
|
2019-11-27 21:28:13 +00:00
|
|
|
}
|
2023-01-16 21:12:02 +00:00
|
|
|
genForm(sett);
|
|
|
|
|
gId('dm').checked = (gId('theme_base').value === 'light');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function SetLS()
|
|
|
|
|
{
|
|
|
|
|
var l = d.querySelectorAll('.agi');
|
|
|
|
|
for (var i = 0; i < l.length; i++) {
|
|
|
|
|
var e = l[i];
|
|
|
|
|
var val = e.classList.contains('cb') ? e.checked : e.value;
|
|
|
|
|
set(e.id, sett, val);
|
|
|
|
|
console.log(`${e.id} set to ${val}`);
|
2019-11-27 21:28:13 +00:00
|
|
|
}
|
2023-01-16 21:12:02 +00:00
|
|
|
try {
|
|
|
|
|
localStorage.setItem('wledUiCfg', JSON.stringify(sett));
|
|
|
|
|
gId('lssuc').style.display = "inline";
|
|
|
|
|
} catch (e) {
|
|
|
|
|
gId('lssuc').style.display = "none";
|
|
|
|
|
gId('lserr').style.display = "inline";
|
|
|
|
|
gId('lserr').innerHTML = "⚠ Settings JSON saving failed. (" + e + ")";
|
2019-11-27 21:28:13 +00:00
|
|
|
}
|
2023-01-16 21:12:02 +00:00
|
|
|
}
|
2020-12-21 20:12:07 +00:00
|
|
|
|
2023-01-16 21:12:02 +00:00
|
|
|
function cLS()
|
|
|
|
|
{
|
|
|
|
|
localStorage.removeItem('wledP');
|
|
|
|
|
localStorage.removeItem('wledPmt');
|
|
|
|
|
localStorage.removeItem('wledPalx');
|
|
|
|
|
showToast("Cleared.");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function Save() {
|
|
|
|
|
SetLS();
|
2023-09-12 21:44:18 +00:00
|
|
|
if (d.Sf.DS.value != initial_ds || /*d.Sf.ST.checked != initial_st ||*/ d.Sf.SU.checked != initial_su) d.Sf.submit();
|
2023-01-16 21:12:02 +00:00
|
|
|
}
|
|
|
|
|
|
2024-09-17 14:26:11 +00:00
|
|
|
function S() {
|
|
|
|
|
getLoc();
|
|
|
|
|
loadJS(getURL('/settings/s.js?p=3'), false, undefined, ()=>{
|
2023-01-16 21:12:02 +00:00
|
|
|
initial_ds = d.Sf.DS.value;
|
2023-09-12 21:44:18 +00:00
|
|
|
//initial_st = d.Sf.ST.checked;
|
2023-01-16 21:12:02 +00:00
|
|
|
initial_su = d.Sf.SU.checked;
|
|
|
|
|
GetLS();
|
2024-09-17 14:26:11 +00:00
|
|
|
}); // If we set async false, file is loaded and executed, then next statement is processed
|
2023-06-04 16:40:29 +00:00
|
|
|
if (loc) d.Sf.action = getURL('/settings/ui');
|
|
|
|
|
}
|
2023-01-16 21:12:02 +00:00
|
|
|
function UI()
|
|
|
|
|
{
|
|
|
|
|
gId('idonthateyou').style.display = (gId('dm').checked) ? 'inline':'none';
|
|
|
|
|
var f = gId('theme_base');
|
|
|
|
|
if (f) f.value = (gId('dm').checked) ? 'light':'dark';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// random BG image
|
2023-10-23 15:30:15 +00:00
|
|
|
function randomBg() {
|
2023-10-31 09:21:00 +00:00
|
|
|
let url = oldUrl;
|
|
|
|
|
let t = "theme_bg_rnd";
|
|
|
|
|
if (gId(t).checked) {
|
|
|
|
|
url = "https://picsum.photos/1920/1080";
|
|
|
|
|
if (gId(`${t}Grayscale`).checked) url += "?grayscale";
|
|
|
|
|
if (gId(`${t}Blur`).checked) url += (url.includes("?") ? "&" : "?") + "blur";
|
2024-01-14 13:16:32 +00:00
|
|
|
gId("theme_bg_img").value = "";
|
|
|
|
|
gId("bg_url").classList.remove("hide");
|
2022-03-14 19:22:20 +00:00
|
|
|
}
|
2023-10-31 09:21:00 +00:00
|
|
|
gId("theme_bg_url").value = url;
|
2023-01-16 21:12:02 +00:00
|
|
|
}
|
2024-01-14 13:16:32 +00:00
|
|
|
// own BG image
|
|
|
|
|
function ownBg(element) {
|
|
|
|
|
const file = element.files[0];
|
|
|
|
|
const reader = new FileReader();
|
|
|
|
|
reader.onload = () => {
|
|
|
|
|
gId("theme_bg_url").value = reader.result;
|
|
|
|
|
gId("bg_url").classList.add("hide");
|
|
|
|
|
if (gId("theme_bg_rnd").checked) toggle("Image");
|
|
|
|
|
gId("theme_bg_rnd").checked = false;
|
|
|
|
|
}
|
|
|
|
|
reader.readAsDataURL(file);
|
|
|
|
|
}
|
|
|
|
|
function removeBgImg() {
|
|
|
|
|
gId("theme_bg_url").value = "";
|
|
|
|
|
gId("theme_bg_img").value = "";
|
|
|
|
|
gId("bg_url").classList.remove("hide");
|
|
|
|
|
if (gId("theme_bg_rnd").checked) toggle("Image");
|
|
|
|
|
gId("theme_bg_rnd").checked = false;
|
|
|
|
|
}
|
2019-11-27 21:28:13 +00:00
|
|
|
</script>
|
2021-08-10 15:11:17 +00:00
|
|
|
<style>@import url("style.css");</style>
|
2019-11-27 21:28:13 +00:00
|
|
|
</head>
|
|
|
|
|
<body onload="S()">
|
|
|
|
|
<form id="form_s" name="Sf" method="post">
|
2021-03-05 08:50:59 +00:00
|
|
|
<div class="toprow">
|
2024-09-17 14:26:11 +00:00
|
|
|
<div class="helpB"><button type="button" onclick="H('features/settings/#user-interface-settings')">?</button></div>
|
2020-08-30 21:31:58 +00:00
|
|
|
<button type="button" onclick="B()">Back</button><button type="button" onclick="Save()">Save</button><br>
|
|
|
|
|
<span id="lssuc" style="color:green; display:none">✔ Local UI settings saved!</span>
|
|
|
|
|
<span id="lserr" style="color:red; display:none">⚠ Could not access local storage. Make sure it is enabled in your browser.</span><hr>
|
|
|
|
|
</div>
|
2019-11-27 21:28:13 +00:00
|
|
|
<h2>Web Setup</h2>
|
2021-12-08 21:05:51 +00:00
|
|
|
Server description: <input type="text" name="DS" maxlength="32"><br>
|
2023-09-10 16:52:14 +00:00
|
|
|
<!-- Sync button toggles both send and receive: <input type="checkbox" name="ST"><br> -->
|
2023-11-14 20:19:38 +00:00
|
|
|
Enable simplified UI: <input type="checkbox" name="SU"><br>
|
2020-08-30 21:31:58 +00:00
|
|
|
<i>The following UI customization settings are unique both to the WLED device and this browser.<br>
|
|
|
|
|
You will need to set them again if using a different browser, device or WLED IP address.<br>
|
|
|
|
|
Refresh the main UI to apply changes.</i><br>
|
|
|
|
|
|
|
|
|
|
<div id="gen">Loading settings...</div>
|
|
|
|
|
|
|
|
|
|
<h3>UI Appearance</h3>
|
|
|
|
|
<span class="l"></span>: <input type="checkbox" id="comp_labels" class="agi cb"><br>
|
2022-03-14 19:22:20 +00:00
|
|
|
<span class="l"></span>: <input type="checkbox" id="comp_pcmbot" class="agi cb"><br>
|
|
|
|
|
<span class="l"></span>: <input type="checkbox" id="comp_pid" class="agi cb"><br>
|
|
|
|
|
<span class="l"></span>: <input type="checkbox" id="comp_seglen" class="agi cb"><br>
|
|
|
|
|
<span class="l"></span>: <input type="checkbox" id="comp_segpwr" class="agi cb"><br>
|
2022-07-07 21:07:20 +00:00
|
|
|
<span class="l"></span>: <input type="checkbox" id="comp_segexp" class="agi cb"><br>
|
2023-11-04 08:39:08 +00:00
|
|
|
<span class="l"></span>: <input type="checkbox" id="comp_fxdef" class="agi cb"><br>
|
|
|
|
|
<span class="l"></span>: <input type="number" min=0 max=250 step=1 id="comp_on" class="agi"><br>
|
|
|
|
|
<span class="l"></span>: <input type="number" min=0 max=250 step=1 id="comp_off" class="agi"><br>
|
|
|
|
|
<span class="l"></span>: <input type="checkbox" id="comp_idsort" class="agi cb"><br>
|
2020-08-30 21:31:58 +00:00
|
|
|
I hate dark mode: <input type="checkbox" id="dm" onchange="UI()"><br>
|
|
|
|
|
<span id="idonthateyou" style="display:none"><i>Why would you? </i>🥺<br></span>
|
|
|
|
|
<span class="l"></span>: <input type="number" min=0.0 max=1.0 step=0.01 id="theme_alpha_tab" class="agi"><br>
|
|
|
|
|
<span class="l"></span>: <input type="number" min=0.0 max=1.0 step=0.01 id="theme_alpha_bg" class="agi"><br>
|
2021-12-08 21:05:51 +00:00
|
|
|
<span class="l"></span>: <input type="text" id="theme_color_bg" maxlength="9" class="agi"><br>
|
2024-01-14 13:16:32 +00:00
|
|
|
BG image: <input type="file" id="theme_bg_img" accept="image/*" onchange="ownBg(this)"> <input type="button" value="Remove" onclick="removeBgImg()"><br>
|
2023-10-31 09:21:00 +00:00
|
|
|
<span class="l"></span>: <input type="checkbox" id="theme_bg_rnd" class="agi cb" onchange="randomBg();toggle('Image');">
|
|
|
|
|
<div id="Image">
|
2024-01-14 13:16:32 +00:00
|
|
|
<div id="bg_url">
|
|
|
|
|
<span class="l"></span>: <input type="text" id="theme_bg_url" class="agi"><br>
|
|
|
|
|
</div>
|
2023-10-23 15:30:15 +00:00
|
|
|
</div>
|
2023-10-31 09:21:00 +00:00
|
|
|
<div id="NoImage" class="hide">
|
2023-10-23 15:30:15 +00:00
|
|
|
<h4>Random BG image settings</h4>
|
2023-10-31 09:21:00 +00:00
|
|
|
<span class="l"></span>: <input type="checkbox" id="theme_bg_rndGrayscale" class="agi cb" onchange="randomBg()"><br>
|
|
|
|
|
<span class="l"></span>: <input type="checkbox" id="theme_bg_rndBlur" class="agi cb" onchange="randomBg()"><br>
|
2023-10-23 15:30:15 +00:00
|
|
|
</div>
|
2020-08-30 21:31:58 +00:00
|
|
|
<input id="theme_base" class="agi" style="display:none">
|
2021-08-18 11:41:54 +00:00
|
|
|
<span class="l"></span>: <input type="checkbox" id="comp_css" class="agi cb"><br>
|
|
|
|
|
<div id="skin">Custom CSS: <input type="file" name="data" accept=".css"> <input type="button" value="Upload" onclick="uploadFile(d.Sf.data,'/skin.css');"><br></div>
|
|
|
|
|
<span class="l"></span>: <input type="checkbox" id="comp_hdays" class="agi cb"><br>
|
2021-07-14 21:10:19 +00:00
|
|
|
<div id="holidays">Holidays: <input type="file" name="data2" accept=".json"> <input type="button" value="Upload" onclick="uploadFile(d.Sf.data2,'/holidays.json');"><br></div>
|
2021-06-06 18:36:19 +00:00
|
|
|
<div id="toast"></div>
|
2021-08-20 17:38:24 +00:00
|
|
|
<hr><button type="button" onclick="cLS()">Clear local storage</button>
|
2020-08-30 21:31:58 +00:00
|
|
|
<hr><button type="button" onclick="B()">Back</button><button type="button" onclick="Save()">Save</button>
|
2019-11-27 21:28:13 +00:00
|
|
|
</form>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
