WLED/wled00/data/settings_ui.htm

205 lines
6.0 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=500">
<title>UI Settings</title>
<script>
2020-08-30 23:31:58 +02:00
var d = document;
var initial_ds, initial_st;
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-12-14 23:32:57 +01:00
"pcmbot": "Show bottom tab bar in PC mode",
"pid": "Show preset IDs"
2020-08-30 23:31:58 +02:00
},
"theme":{
"alpha": {
"bg":"Background opacity",
"tab":"Button opacity"
},
"bg":{
"url":"BG image URL"
},
"color":{
"bg":"BG HEX color"
}
}
};
function gId(s)
{
2020-08-30 23:31:58 +02:00
return d.getElementById(s);
}
function isObject(item) {
return (item && typeof item === 'object' && !Array.isArray(item));
}
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];
}
tar[pList[len-1]] = val;
}
function addRec(s, path = "", label = null)
{
var str = "";
for (i in s)
{
var fk = path + (path?'_':'') + i;
if (isObject(s[i])) {
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];
} else {
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>`;
}
}
}
}
return str;
}
function genForm(s) {
var str = "";
str = addRec(s,"",l);
gId('gen').innerHTML = str;
}
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 = "&#9888; Settings JSON parsing failed. (" + e + ")";
}
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}`);
}
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 = "&#9888; Settings JSON saving failed. (" + e + ")";
}
}
function Save() {
SetLS();
if (d.Sf.DS.value != initial_ds || d.Sf.ST.checked != initial_st) d.Sf.submit();
}
2020-08-30 23:31:58 +02:00
function S()
{
2020-08-30 23:31:58 +02:00
GetV();
initial_ds = d.Sf.DS.value;
initial_st = d.Sf.ST.checked;
GetLS();
}
function H()
{
window.open("https://github.com/Aircoookie/WLED/wiki/Settings#user-interface-settings");
}
function B()
{
window.open("/settings","_self");
}
2020-08-30 23:31:58 +02:00
function UI()
{
2020-08-30 23:31:58 +02:00
gId('idonthateyou').style.display = (gId('dm').checked) ? 'inline':'none';
var f = gId('theme_base');
if (f) f.value = (gId('dm').checked) ? 'light':'dark';
}
function GetV()
{
}
</script>
<style>
@import url("style.css");
</style>
</head>
<body onload="S()">
<form id="form_s" name="Sf" method="post">
2020-08-30 23:31:58 +02:00
<div style="position:sticky;top:0;background-color:#222;">
<div class="helpB"><button type="button" onclick="H()">?</button></div>
2020-08-30 23:31:58 +02:00
<button type="button" onclick="B()">Back</button><button type="button" onclick="Save()">Save</button><br>
<span id="lssuc" style="color:green; display:none">&#10004; Local UI settings saved!</span>
<span id="lserr" style="color:red; display:none">&#9888; Could not access local storage. Make sure it is enabled in your browser.</span><hr>
</div>
<h2>Web Setup</h2>
Server description: <input name="DS" maxlength="32"><br>
2020-08-30 23:31:58 +02:00
Sync button toggles both send and receive: <input type="checkbox" name="ST"><br>
<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>
2020-12-14 23:32:57 +01: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>
2020-08-30 23:31:58 +02:00
I hate dark mode: <input type="checkbox" id="dm" onchange="UI()"><br>
<span id="idonthateyou" style="display:none"><i>Why would you? </i>&#x1F97A;<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>
<span class="l"></span>: <input id="theme_color_bg" maxlength="9" class="agi"><br>
<span class="l">BG image URL</span>: <input id="theme_bg_url" class="agi">
<input id="theme_base" class="agi" style="display:none">
<hr><button type="button" onclick="B()">Back</button><button type="button" onclick="Save()">Save</button>
</form>
</body>
</html>