125 lines
4.7 KiB
HTML
125 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head lang="en">
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=500">
|
|
<title>UI Settings</title>
|
|
<script>
|
|
var d = document;
|
|
var umCfg = {};
|
|
var pins = [6,7,8,9,10,11];
|
|
var pinO = ["reserved","reserved","reserved","reserved","reserved","reserved"], owner;
|
|
var loc = false, locip;
|
|
function gId(s) { return d.getElementById(s); }
|
|
function isO(i) { return (i && typeof i === 'object' && !Array.isArray(i)); }
|
|
function H() { window.open("https://github.com/Aircoookie/WLED/wiki/Settings#usermod-settings"); }
|
|
function B() { window.open("/settings","_self"); }
|
|
function S() {
|
|
if (window.location.protocol == "file:") {
|
|
loc = true;
|
|
locip = localStorage.getItem('locIp');
|
|
if (!locip) {
|
|
locip = prompt("File Mode. Please enter WLED IP!");
|
|
localStorage.setItem('locIp', locip);
|
|
}
|
|
}
|
|
ldS();
|
|
}
|
|
function check(o,k) {
|
|
if (o.type=="number" && o.name.substr(-4)=="_pin") {
|
|
for (var i=0; i<pins.length; i++) {
|
|
if (k==pinO[i]) continue;
|
|
if (o.value==pins[i]) { o.style.color="red"; break; } else o.style.color="#fff";
|
|
}
|
|
}
|
|
}
|
|
function getPins(o) {
|
|
if (isO(o)) {
|
|
for (const [k,v] of Object.entries(o)) {
|
|
if (isO(v)) {
|
|
owner = k;
|
|
getPins(v);
|
|
continue;
|
|
}
|
|
if (k=="pin") {
|
|
if (Array.isArray(v)) {
|
|
for (var i=0; i<v.length; i++) if (v[i]>=0) { pins.push(v[i]); pinO.push(owner); }
|
|
} else {
|
|
if (v>=0) { pins.push(v); pinO.push(owner); }
|
|
}
|
|
} else if (Array.isArray(v)) {
|
|
for (var i=0; i<v.length; i++) getPins(v[i]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function ldS() {
|
|
var url = (loc?`http://${locip}`:'') + '/cfg.json';
|
|
fetch(url, {
|
|
method: 'get'
|
|
})
|
|
.then(res => {
|
|
if (!res.ok) gId('lserr').style.display = "inline";
|
|
return res.json();
|
|
})
|
|
.then(json => {
|
|
umCfg = json.um;
|
|
getPins(json);
|
|
var urows="";
|
|
if (isO(umCfg)) {
|
|
for (const [k,o] of Object.entries(umCfg)) {
|
|
urows += `<hr><h3>${k}</h3>`;
|
|
if (isO(o)) {
|
|
for (const [s,v] of Object.entries(o)) {
|
|
var t,c;
|
|
switch (typeof v) {
|
|
case "boolean":
|
|
t = "checkbox"; c = v ? `checked value="on"` : ""; break;
|
|
case "number":
|
|
t = "number"; c = `value="${parseInt(v,10)}"`; break;
|
|
case "string":
|
|
t = "text"; c = `value="${v}"`; break;
|
|
default:
|
|
t = "text"; c = `value="${v}"`; break;
|
|
}
|
|
// https://stackoverflow.com/questions/11657123/posting-both-checked-and-unchecked-checkboxes
|
|
if (t=="checkbox") urows += `<input type="hidden" name="${k}_${s}" value="off">`;
|
|
urows += `${s}: <input type="${t}" name="${k}_${s}" ${c} oninput="check(this,'${k}')"><br>`;
|
|
}
|
|
}
|
|
}
|
|
gId("um").innerHTML = urows;
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
gId('lserr').style.display = "inline"
|
|
console.log(error);
|
|
});
|
|
}
|
|
function svS(e) {
|
|
e.preventDefault();
|
|
console.log(d.Sf);
|
|
if (d.Sf.checkValidity()) d.Sf.submit(); //https://stackoverflow.com/q/37323914
|
|
}
|
|
function GetV() {}
|
|
</script>
|
|
<style>
|
|
@import url("style.css");
|
|
</style>
|
|
</head>
|
|
|
|
<body onload="S()">
|
|
<form id="form_s" name="Sf" method="post" onsubmit="svS(event)">
|
|
<div class="toprow">
|
|
<div class="helpB"><button type="button" onclick="H()">?</button></div>
|
|
<button type="button" onclick="B()">Back</button><button type="submit">Save</button><br>
|
|
<span id="lssuc" style="color:green; display:none">✔ Configuration saved!</span>
|
|
<span id="lserr" style="color:red; display:none">⚠ Could not load configuration.</span><hr>
|
|
</div>
|
|
<h2>Usermod Setup</h2>
|
|
<div id="um">Loading settings...</div>
|
|
<hr><button type="button" onclick="B()">Back</button><button type="submit">Save</button>
|
|
</form>
|
|
</body>
|
|
|
|
</html> |