lba.gitea/WLED
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
0ccadb246f
WLED/wled00/data/settings_ui.htm

298 lines
10 KiB
HTML
Raw Normal View History

Converted UTF-16 files with UTF-8 and CR/LF to LF.
2019-11-27 22:28:13 +01:00
<!DOCTYPE html>
<html>
added lang attribute to the html start tag
2020-12-23 21:43:30 +01:00
<head lang="en">
Option to use segment length instead of stop.
2021-04-01 17:12:45 +02:00
<meta charset="utf-8">
Converted UTF-16 files with UTF-8 and CR/LF to LF.
2019-11-27 22:28:13 +01:00
<meta name="viewport" content="width=500">
Prevent autozoom on input fields.
2021-12-08 14:38:21 +01:00
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
Converted UTF-16 files with UTF-8 and CR/LF to LF.
2019-11-27 22:28:13 +01:00
<title>UI Settings</title>
<script>
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01:00
var d = document;
Reverse proxy support.
2023-06-04 18:40:29 +02:00
var loc = false, locip, locproto = "http:";
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01:00
var initial_ds, initial_st, initial_su;
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"
0.10.2-rc
2020-08-30 23:31:58 +02:00
},
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01: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 &amp; brightness",
"segexp" : "Always expand first segment",
"css": "Enable custom CSS",
Fix for #3251
2023-06-16 10:24:56 +02:00
"hdays": "Enable custom Holidays list",
"fxdef": "Use effect default parameters"
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01:00
},
"theme":{
"alpha": {
"bg":"Background opacity",
"tab":"Button opacity"
},
"bg":{
"url":"BG image URL",
"random":"Random BG image"
},
"color":{
"bg":"BG HEX color"
0.10.2-rc
2020-08-30 23:31:58 +02:00
}
}
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01:00
};
function gId(s) { return d.getElementById(s); }
function toggle(el) { gId(el).classList.toggle("hide"); gId('No'+el).classList.toggle("hide"); }
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];
Added skinning capability.
2021-06-06 20:36:19 +02:00
}
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01:00
tar[pList[len-1]] = val;
}
var timeout;
function showToast(text, error = false)
{
var x = gId("toast");
x.innerHTML = text;
x.classList.add(error ? "error":"show");
clearTimeout(timeout);
x.style.animation = 'none';
timeout = setTimeout(function(){ x.classList.remove("show"); }, 2900);
}
function addRec(s, path = "", label = null)
{
var str = "";
for (i in s)
0.10.2-rc
2020-08-30 23:31:58 +02:00
{
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01:00
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];
0.10.2-rc
2020-08-30 23:31:58 +02:00
} else {
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01: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>`;
0.10.2-rc
2020-08-30 23:31:58 +02:00
}
}
}
}
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01:00
return str;
}
0.10.2-rc
2020-08-30 23:31:58 +02:00
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01:00
function genForm(s) {
var str = "";
str = addRec(s,"",l);
0.10.2-rc
2020-08-30 23:31:58 +02:00
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01:00
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 + ")";
Converted UTF-16 files with UTF-8 and CR/LF to LF.
2019-11-27 22:28:13 +01:00
}
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01: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}`);
Converted UTF-16 files with UTF-8 and CR/LF to LF.
2019-11-27 22:28:13 +01:00
}
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01: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 = "&#9888; Settings JSON saving failed. (" + e + ")";
Converted UTF-16 files with UTF-8 and CR/LF to LF.
2019-11-27 22:28:13 +01:00
}
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01:00
}
random bg image
2020-12-21 21:12:07 +01:00
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01:00
function cLS()
{
localStorage.removeItem('wledP');
localStorage.removeItem('wledPmt');
localStorage.removeItem('wledPalx');
showToast("Cleared.");
}
function Save() {
SetLS();
if (d.Sf.DS.value != initial_ds || d.Sf.ST.checked != initial_st || d.Sf.SU.checked != initial_su) d.Sf.submit();
}
// https://www.educative.io/edpresso/how-to-dynamically-load-a-js-file-in-javascript
function loadJS(FILE_URL, async = true) {
let scE = d.createElement("script");
scE.setAttribute("src", FILE_URL);
scE.setAttribute("type", "text/javascript");
scE.setAttribute("async", async);
d.body.appendChild(scE);
// success event
scE.addEventListener("load", () => {
//console.log("File loaded");
GetV();
initial_ds = d.Sf.DS.value;
initial_st = d.Sf.ST.checked;
initial_su = d.Sf.SU.checked;
GetLS();
});
// error event
scE.addEventListener("error", (ev) => {
console.log("Error on loading file", ev);
alert("Loading of configuration script failed.\nIncomplete page data!");
});
}
Reverse proxy support.
2023-06-04 18:40:29 +02:00
function S() {
Bugfix reverse proxy path detection
2023-06-07 21:37:54 +02:00
let l = window.location;
if (l.protocol == "file:") {
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01:00
loc = true;
locip = localStorage.getItem('locIp');
if (!locip) {
locip = prompt("File Mode. Please enter WLED IP!");
localStorage.setItem('locIp', locip);
random bg image
2020-12-21 21:12:07 +01:00
}
Reverse proxy support.
2023-06-04 18:40:29 +02:00
} else {
// detect reverse proxy
Bugfix reverse proxy path detection
2023-06-07 21:37:54 +02:00
let path = l.pathname;
Reverse proxy support.
2023-06-04 18:40:29 +02:00
let paths = path.slice(1,path.endsWith('/')?-1:undefined).split("/");
if (paths.length > 2) {
Bugfix reverse proxy path detection
2023-06-07 21:37:54 +02:00
locproto = l.protocol;
Reverse proxy support.
2023-06-04 18:40:29 +02:00
loc = true;
Port bugfix.
2023-06-08 07:14:03 +02:00
locip = l.hostname + (l.port ? ":" + l.port : "") + "/" + paths[0];
Reverse proxy support.
2023-06-04 18:40:29 +02:00
}
random bg image
2020-12-21 21:12:07 +01:00
}
Reverse proxy support.
2023-06-04 18:40:29 +02:00
loadJS(getURL('/settings/s.js?p=3'), false); // If we set async false, file is loaded and executed, then next statement is processed
if (loc) d.Sf.action = getURL('/settings/ui');
}
function getURL(path) {
return (loc ? locproto + "//" + locip : "") + path;
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01:00
}
function H() { window.open("https://kno.wled.ge/features/settings/#user-interface-settings"); }
Reverse proxy support.
2023-06-04 18:40:29 +02:00
function B() { window.open(getURL("/settings"),"_self"); }
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01: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
function setRandomBg() {
if (gId("theme_bg_random").checked) {
gId("theme_bg_url").value = "https://picsum.photos/1920/1080";
} else {
gId("theme_bg_url").value = "";
random bg image
2020-12-21 21:12:07 +01:00
}
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01:00
}
function checkRandomBg() {
if (gId("theme_bg_url").value === "https://picsum.photos/1920/1080") {
gId("theme_bg_random").checked = true;
} else {
gId("theme_bg_random").checked = false;
UI updates. - optional show/hide segment power - skinnable sliders - changed some CSS to be more to @aircoookie's liking
2022-03-14 20:22:20 +01:00
}
Whitespace/indentation cleanup.
2023-01-16 22:12:02 +01:00
}
function uploadFile(fO,name) {
var req = new XMLHttpRequest();
req.addEventListener('load', function(){showToast(this.responseText,this.status >= 400)});
req.addEventListener('error', function(e){showToast(e.stack,true);});
req.open("POST", "/upload");
var formData = new FormData();
formData.append("data", fO.files[0], name);
req.send(formData);
fO.value = '';
return false;
}
Converted UTF-16 files with UTF-8 and CR/LF to LF.
2019-11-27 22:28:13 +01:00
</script>
Simplified UI and general UI polishing (CSS, HTML & JS). Boot transition fix. Local storage invalidation when uploading presets.json.
2021-08-10 17:11:17 +02:00
<style>@import url("style.css");</style>
Converted UTF-16 files with UTF-8 and CR/LF to LF.
2019-11-27 22:28:13 +01:00
</head>
<body onload="S()">
<form id="form_s" name="Sf" method="post">
Sticky save & back buttons.
2021-03-05 09:50:59 +01:00
<div class="toprow">
Converted UTF-16 files with UTF-8 and CR/LF to LF.
2019-11-27 22:28:13 +01:00
<div class="helpB"><button type="button" onclick="H()">?</button></div>
0.10.2-rc
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>
Converted UTF-16 files with UTF-8 and CR/LF to LF.
2019-11-27 22:28:13 +01:00
<h2>Web Setup</h2>
Cleanup. Bugfixes. Changed links to point to kno.wled.ge
2021-12-08 22:05:51 +01:00
Server description: <input type="text" name="DS" maxlength="32"><br>
UI updates. - optional show/hide segment power - skinnable sliders - changed some CSS to be more to @aircoookie's liking
2022-03-14 20:22:20 +01:00
Sync button toggles both send and receive: <input type="checkbox" name="ST"><br>
No simple UI detection.
2022-12-13 22:25:12 +01:00
<div id="NoSimple" class="hide">
Beta-3 changes - remove I2C init from usermods - PCF8574 (&co) port expander support - refactor PIR & Rotary encoder & 4LD - reboot race condition - optimisations
2023-05-30 19:36:14 +02:00
<i class="warn">This firmware build does not include simplified UI support.<br></i>
No simple UI detection.
2022-12-13 22:25:12 +01:00
</div>
<div id="Simple">Enable simplified UI: <input type="checkbox" name="SU"><br></div>
0.10.2-rc
2020-08-30 23:31:58 +02: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>
UI updates. - optional show/hide segment power - skinnable sliders - changed some CSS to be more to @aircoookie's liking
2022-03-14 20:22:20 +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>
<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>
Added global I2C & SPI HW pin defines Fixed default values fo custom sliders. Fix for color selector. Changed fading for 2D GEQ Audioreactive fix send/receive option
2022-07-07 23:07:20 +02:00
<span class="l"></span>: <input type="checkbox" id="comp_segexp" class="agi cb"><br>
0.10.2-rc
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>
Cleanup. Bugfixes. Changed links to point to kno.wled.ge
2021-12-08 22:05:51 +01:00
<span class="l"></span>: <input type="text" id="theme_color_bg" maxlength="9" class="agi"><br>
<span class="l">BG image URL</span>: <input type="text" id="theme_bg_url" class="agi" oninput="checkRandomBg()"><br>
random bg image
2020-12-21 21:12:07 +01:00
<span class="l">Random BG image</span>: <input type="checkbox" id="theme_bg_random" class="agi cb" onchange="setRandomBg()"><br>
0.10.2-rc
2020-08-30 23:31:58 +02:00
<input id="theme_base" class="agi" style="display:none">
Add option to load custom CSS and custom holidays.json
2021-08-18 13:41:54 +02: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>
Backup/restore presets & holiday array upload. Reduced number of segments on 8266.
2021-07-14 23:10:19 +02: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>
Added skinning capability.
2021-06-06 20:36:19 +02:00
<div id="toast"></div>
Clear local storage button. Removed skin.css from settings pages.
2021-08-20 19:38:24 +02:00
<hr><button type="button" onclick="cLS()">Clear local storage</button>
0.10.2-rc
2020-08-30 23:31:58 +02:00
<hr><button type="button" onclick="B()">Back</button><button type="button" onclick="Save()">Save</button>
Converted UTF-16 files with UTF-8 and CR/LF to LF.
2019-11-27 22:28:13 +01:00
</form>
</body>
</html>
Reference in New Issue Copy Permalink