jeans/WLED
jeans/WLED
1
0
Fork 0
mirror of https://github.com/wled/WLED.git synced 2025-07-21 09:46:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3037 from Aircoookie/indentation

Browse Source 
Whitespace/indentation cleanup.
This commit is contained in:
Christian Schwinne 2023-02-01 16:07:30 +01:00 committed by GitHub
commit 6be9317fd7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 947 additions and 947 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
wled00/data/settings_2D.htm
View File

@ -7,7 +7,7 @@
<title>2D Set-up</title> <title>2D Set-up</title>
<script> <script>
var d=document; var d=document;
var loc = false, locip; var loc = false, locip;
var maxPanels=64; var maxPanels=64;
function H(){window.open("https://kno.wled.ge/features/2D");} function H(){window.open("https://kno.wled.ge/features/2D");}
function B(){window.open("/settings","_self");} function B(){window.open("/settings","_self");}
@ -33,15 +33,15 @@
}); });
} }
function S() { function S() {
if (window.location.protocol == "file:") { if (window.location.protocol == "file:") {
loc = true; loc = true;
locip = localStorage.getItem('locIp'); locip = localStorage.getItem('locIp');
if (!locip) { if (!locip) {
locip = prompt("File Mode. Please enter WLED IP!"); locip = prompt("File Mode. Please enter WLED IP!");
localStorage.setItem('locIp', locip); localStorage.setItem('locIp', locip);
} }
} }
var url = (loc?`http://${locip}`:'') + '/settings/s.js?p=10'; var url = (loc?`http://${locip}`:'') + '/settings/s.js?p=10';
loadJS(url, false); // If we set async false, file is loaded and executed, then next statement is processed loadJS(url, false); // If we set async false, file is loaded and executed, then next statement is processed
} }
@ -86,12 +86,12 @@ Y:<input id="P${i}Y" name="P${i}Y" type="number" min="0" max="256" value="0"><br
p.insertAdjacentHTML("beforeend", b); p.insertAdjacentHTML("beforeend", b);
} }
function remPanel() { function remPanel() {
let p = gId("panels").children; let p = gId("panels").children;
var i = p.length; var i = p.length;
if (i <= 1) return; if (i <= 1) return;
p[i-1].remove(); p[i-1].remove();
} }
function resetPanels() { function resetPanels() {
d.Sf.MPC.value = 1; d.Sf.MPC.value = 1;
@ -144,7 +144,7 @@ Y:<input id="P${i}Y" name="P${i}Y" type="number" min="0" max="256" value="0"><br
<button type="button" onclick="B()">Back</button><button type="submit">Save</button><hr> <button type="button" onclick="B()">Back</button><button type="submit">Save</button><hr>
</div> </div>
<h2>2D setup</h2> <h2>2D setup</h2>
Strip or panel: Strip or panel:
<select id="somp" name="SOMP" onchange="resetPanels();addPanels();UI();" > <select id="somp" name="SOMP" onchange="resetPanels();addPanels();UI();" >
<option value="0">1D Strip</option> <option value="0">1D Strip</option>
<option value="1">2D Matrix</option> <option value="1">2D Matrix</option>

130
wled00/data/settings_dmx.htm
View File

@ -1,72 +1,72 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta name="viewport" content="width=500"> <meta name="viewport" content="width=500">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<meta charset="utf-8"> <meta charset="utf-8">
<title>DMX Settings</title> <title>DMX Settings</title>
<script> <script>
var d=document; var d=document;
var loc = false, locip; var loc = false, locip;
function H(){window.open("https://github.com/Aircoookie/WLED/wiki/DMX");} function H(){window.open("https://github.com/Aircoookie/WLED/wiki/DMX");}
function B(){window.history.back();} function B(){window.history.back();}
function GCH(num) { function GCH(num) {
d.getElementById('dmxchannels').innerHTML += ""; d.getElementById('dmxchannels').innerHTML += "";
for (i=0;i<num;i++) { for (i=0;i<num;i++) {
d.getElementById('dmxchannels').innerHTML += "<span id=CH" + (i+1) + "s >Channel " + (i+1) + ": <select name=CH" + (i+1) + " id=\"CH" + (i+1) + "\"><option value=0>Set to 0</option><option value=1>Red</option><option value=2>Green</option><option value=3>Blue</option><option value=4>White</option><option value=5>Shutter (Brightness)</option><option value=6>Set to 255</option></select></span><br />\n"; d.getElementById('dmxchannels').innerHTML += "<span id=CH" + (i+1) + "s >Channel " + (i+1) + ": <select name=CH" + (i+1) + " id=\"CH" + (i+1) + "\"><option value=0>Set to 0</option><option value=1>Red</option><option value=2>Green</option><option value=3>Blue</option><option value=4>White</option><option value=5>Shutter (Brightness)</option><option value=6>Set to 255</option></select></span><br />\n";
} }
} }
function mMap(){ function mMap(){
numCh=document.Sf.CN.value; numCh=document.Sf.CN.value;
numGap=document.Sf.CG.value; numGap=document.Sf.CG.value;
if (parseInt(numCh)>parseInt(numGap)) { if (parseInt(numCh)>parseInt(numGap)) {
d.getElementById("gapwarning").style.display="block"; d.getElementById("gapwarning").style.display="block";
} else { } else {
d.getElementById("gapwarning").style.display="none"; d.getElementById("gapwarning").style.display="none";
} }
for (i=0;i<15;i++) { for (i=0;i<15;i++) {
if (i>=numCh) { if (i>=numCh) {
d.getElementById("CH"+(i+1) + "s").style.opacity = "0.5"; d.getElementById("CH"+(i+1) + "s").style.opacity = "0.5";
d.getElementById("CH"+(i+1)).disabled = true; d.getElementById("CH"+(i+1)).disabled = true;
} else { } else {
d.getElementById("CH"+(i+1) + "s").style.opacity = "1"; d.getElementById("CH"+(i+1) + "s").style.opacity = "1";
d.getElementById("CH"+(i+1)).disabled = false; d.getElementById("CH"+(i+1)).disabled = false;
} }
} }
} }
// https://www.educative.io/edpresso/how-to-dynamically-load-a-js-file-in-javascript // https://www.educative.io/edpresso/how-to-dynamically-load-a-js-file-in-javascript
function loadJS(FILE_URL, async = true) { function loadJS(FILE_URL, async = true) {
let scE = d.createElement("script"); let scE = d.createElement("script");
scE.setAttribute("src", FILE_URL); scE.setAttribute("src", FILE_URL);
scE.setAttribute("type", "text/javascript"); scE.setAttribute("type", "text/javascript");
scE.setAttribute("async", async); scE.setAttribute("async", async);
d.body.appendChild(scE); d.body.appendChild(scE);
// success event // success event
scE.addEventListener("load", () => { scE.addEventListener("load", () => {
//console.log("File loaded"); //console.log("File loaded");
GCH(15);GetV();mMap(); GCH(15);GetV();mMap();
}); });
// error event // error event
scE.addEventListener("error", (ev) => { scE.addEventListener("error", (ev) => {
console.log("Error on loading file", ev); console.log("Error on loading file", ev);
alert("Loading of configuration script failed.\nIncomplete page data!"); alert("Loading of configuration script failed.\nIncomplete page data!");
}); });
} }
function S(){ function S(){
if (window.location.protocol == "file:") { if (window.location.protocol == "file:") {
loc = true; loc = true;
locip = localStorage.getItem('locIp'); locip = localStorage.getItem('locIp');
if (!locip) { if (!locip) {
locip = prompt("File Mode. Please enter WLED IP!"); locip = prompt("File Mode. Please enter WLED IP!");
localStorage.setItem('locIp', locip); localStorage.setItem('locIp', locip);
} }
} }
var url = (loc?`http://${locip}`:'') + '/settings/s.js?p=7'; var url = (loc?`http://${locip}`:'') + '/settings/s.js?p=7';
loadJS(url, false); // If we set async false, file is loaded and executed, then next statement is processed loadJS(url, false); // If we set async false, file is loaded and executed, then next statement is processed
} }
</script> </script>
<style>@import url("style.css");</style> <style>@import url("style.css");</style>
</head> </head>
<body onload="S()"> <body onload="S()">
<form id="form_s" name="Sf" method="post"> <form id="form_s" name="Sf" method="post">

1098
wled00/data/settings_leds.htm
View File

File diff suppressed because it is too large Load Diff

2
wled00/data/settings_pin.htm
View File

@ -17,7 +17,7 @@
<form id="form_s" name="Sf" method="post"> <form id="form_s" name="Sf" method="post">
<h2>Please enter settings PIN code</h2> <h2>Please enter settings PIN code</h2>
<input type="password" name="PIN" size="4" maxlength="4" minlength="4" pattern="[0-9]*" inputmode="numeric" autofocus> <input type="password" name="PIN" size="4" maxlength="4" minlength="4" pattern="[0-9]*" inputmode="numeric" autofocus>
<hr> <hr>
<button type="button" onclick="B()">Back</button><button type="submit">Submit</button> <button type="button" onclick="B()">Back</button><button type="submit">Submit</button>
</form> </form>
</body> </body>

2
wled00/data/settings_sec.htm
View File

@ -53,7 +53,7 @@
req.send(formData); req.send(formData);
fO.value = ''; fO.value = '';
return false; return false;
} }
function checkNum(o) { function checkNum(o) {
const specialkeys = ["Backspace", "Tab", "Enter", "Shift", "Control", "Alt", "Pause", "CapsLock", "Escape", "Space", "PageUp", "PageDown", "End", "Home", "ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", "Insert", "Delete"]; const specialkeys = ["Backspace", "Tab", "Enter", "Shift", "Control", "Alt", "Pause", "CapsLock", "Escape", "Space", "PageUp", "PageDown", "End", "Home", "ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", "Insert", "Delete"];
// true if key is a number or a special key // true if key is a number or a special key

206
wled00/data/settings_sync.htm
View File

@ -1,74 +1,74 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta name="viewport" content="width=500"> <meta name="viewport" content="width=500">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Sync Settings</title> <title>Sync Settings</title>
<script>var d=document; <script>var d=document;
var loc = false, locip; var loc = false, locip;
function gId(s){return d.getElementById(s);} function gId(s){return d.getElementById(s);}
function toggle(el){gId(el).classList.toggle("hide"); gId('No'+el).classList.toggle("hide");} function toggle(el){gId(el).classList.toggle("hide"); gId('No'+el).classList.toggle("hide");}
function H(){window.open("https://kno.wled.ge/interfaces/udp-notifier/");} function H(){window.open("https://kno.wled.ge/interfaces/udp-notifier/");}
function B(){window.open("/settings","_self");} function B(){window.open("/settings","_self");}
function adj(){if (d.Sf.DI.value == 6454) {if (d.Sf.EU.value == 1) d.Sf.EU.value = 0;} function adj(){if (d.Sf.DI.value == 6454) {if (d.Sf.EU.value == 1) d.Sf.EU.value = 0;}
else if (d.Sf.DI.value == 5568) {if (d.Sf.DA.value == 0) d.Sf.DA.value = 1; if (d.Sf.EU.value == 0) d.Sf.EU.value = 1;} } else if (d.Sf.DI.value == 5568) {if (d.Sf.DA.value == 0) d.Sf.DA.value = 1; if (d.Sf.EU.value == 0) d.Sf.EU.value = 1;} }
// https://www.educative.io/edpresso/how-to-dynamically-load-a-js-file-in-javascript // https://www.educative.io/edpresso/how-to-dynamically-load-a-js-file-in-javascript
function loadJS(FILE_URL, async = true) { function loadJS(FILE_URL, async = true) {
let scE = d.createElement("script"); let scE = d.createElement("script");
scE.setAttribute("src", FILE_URL); scE.setAttribute("src", FILE_URL);
scE.setAttribute("type", "text/javascript"); scE.setAttribute("type", "text/javascript");
scE.setAttribute("async", async); scE.setAttribute("async", async);
d.body.appendChild(scE); d.body.appendChild(scE);
// success event // success event
scE.addEventListener("load", () => { scE.addEventListener("load", () => {
//console.log("File loaded"); //console.log("File loaded");
GetV();SetVal(); GetV();SetVal();
}); });
// error event // error event
scE.addEventListener("error", (ev) => { scE.addEventListener("error", (ev) => {
console.log("Error on loading file", ev); console.log("Error on loading file", ev);
alert("Loading of configuration script failed.\nIncomplete page data!"); alert("Loading of configuration script failed.\nIncomplete page data!");
}); });
} }
function FC() function FC()
{ {
for(j=0;j<8;j++) for(j=0;j<8;j++)
{ {
gId("G"+(j+1)).checked=gId("GS").value>>j&1; gId("G"+(j+1)).checked=gId("GS").value>>j&1;
gId("R"+(j+1)).checked=gId("GR").value>>j&1; gId("R"+(j+1)).checked=gId("GR").value>>j&1;
} }
} }
function GC() function GC()
{ {
var a=0, b=0; var a=0, b=0;
var m=1; var m=1;
for(j=0;j<8;j++) for(j=0;j<8;j++)
{ {
a+=gId("G"+(j+1)).checked*m; a+=gId("G"+(j+1)).checked*m;
b+=gId("R"+(j+1)).checked*m; b+=gId("R"+(j+1)).checked*m;
m*=2; m*=2;
} }
gId("GS").value=a; gId("GS").value=a;
gId("GR").value=b; gId("GR").value=b;
} }
function SP(){var p = d.Sf.DI.value; gId("xp").style.display = (p > 0)?"none":"block"; if (p > 0) d.Sf.EP.value = p;} function SP(){var p = d.Sf.DI.value; gId("xp").style.display = (p > 0)?"none":"block"; if (p > 0) d.Sf.EP.value = p;}
function SetVal(){switch(parseInt(d.Sf.EP.value)){case 5568: d.Sf.DI.value = 5568; break; case 6454: d.Sf.DI.value = 6454; break; case 4048: d.Sf.DI.value = 4048; break; }; SP();FC();} function SetVal(){switch(parseInt(d.Sf.EP.value)){case 5568: d.Sf.DI.value = 5568; break; case 6454: d.Sf.DI.value = 6454; break; case 4048: d.Sf.DI.value = 4048; break; }; SP();FC();}
function S(){ function S(){
if (window.location.protocol == "file:") { if (window.location.protocol == "file:") {
loc = true; loc = true;
locip = localStorage.getItem('locIp'); locip = localStorage.getItem('locIp');
if (!locip) { if (!locip) {
locip = prompt("File Mode. Please enter WLED IP!"); locip = prompt("File Mode. Please enter WLED IP!");
localStorage.setItem('locIp', locip); localStorage.setItem('locIp', locip);
}
} }
var url = (loc?`http://${locip}`:'') + '/settings/s.js?p=4'; }
loadJS(url, false); // If we set async false, file is loaded and executed, then next statement is processed var url = (loc?`http://${locip}`:'') + '/settings/s.js?p=4';
} loadJS(url, false); // If we set async false, file is loaded and executed, then next statement is processed
</script> }
<style>@import url("style.css");</style> </script>
<style>@import url("style.css");</style>
</head> </head>
<body onload="S()"> <body onload="S()">
<form id="form_s" name="Sf" method="post" onsubmit="GC()"> <form id="form_s" name="Sf" method="post" onsubmit="GC()">
@ -84,39 +84,39 @@ UDP Port: <input name="UP" type="number" min="1" max="65535" class="d5" required
<input name="GS" id="GS" type="number" style="display: none;"><!-- hidden inputs for bitwise group checkboxes --> <input name="GS" id="GS" type="number" style="display: none;"><!-- hidden inputs for bitwise group checkboxes -->
<input name="GR" id="GR" type="number" style="display: none;"> <input name="GR" id="GR" type="number" style="display: none;">
<table style="margin: 0 auto;"> <table style="margin: 0 auto;">
<tr> <tr>
<td></td> <td></td>
<td>1</td> <td>1</td>
<td>2</td> <td>2</td>
<td>3</td> <td>3</td>
<td>4</td> <td>4</td>
<td>5</td> <td>5</td>
<td>6</td> <td>6</td>
<td>7</td> <td>7</td>
<td>8</td> <td>8</td>
</tr> </tr>
<tr> <tr>
<td>Send:</td> <td>Send:</td>
<td><input type="checkbox" id="G1" name="G1"></td> <td><input type="checkbox" id="G1" name="G1"></td>
<td><input type="checkbox" id="G2" name="G2"></td> <td><input type="checkbox" id="G2" name="G2"></td>
<td><input type="checkbox" id="G3" name="G3"></td> <td><input type="checkbox" id="G3" name="G3"></td>
<td><input type="checkbox" id="G4" name="G4"></td> <td><input type="checkbox" id="G4" name="G4"></td>
<td><input type="checkbox" id="G5" name="G5"></td> <td><input type="checkbox" id="G5" name="G5"></td>
<td><input type="checkbox" id="G6" name="G6"></td> <td><input type="checkbox" id="G6" name="G6"></td>
<td><input type="checkbox" id="G7" name="G7"></td> <td><input type="checkbox" id="G7" name="G7"></td>
<td><input type="checkbox" id="G8" name="G8"></td> <td><input type="checkbox" id="G8" name="G8"></td>
</tr> </tr>
<tr> <tr>
<td>Receive:</td> <td>Receive:</td>
<td><input type="checkbox" id="R1" name="R1"></td> <td><input type="checkbox" id="R1" name="R1"></td>
<td><input type="checkbox" id="R2" name="R2"></td> <td><input type="checkbox" id="R2" name="R2"></td>
<td><input type="checkbox" id="R3" name="R3"></td> <td><input type="checkbox" id="R3" name="R3"></td>
<td><input type="checkbox" id="R4" name="R4"></td> <td><input type="checkbox" id="R4" name="R4"></td>
<td><input type="checkbox" id="R5" name="R5"></td> <td><input type="checkbox" id="R5" name="R5"></td>
<td><input type="checkbox" id="R6" name="R6"></td> <td><input type="checkbox" id="R6" name="R6"></td>
<td><input type="checkbox" id="R7" name="R7"></td> <td><input type="checkbox" id="R7" name="R7"></td>
<td><input type="checkbox" id="R8" name="R8"></td> <td><input type="checkbox" id="R8" name="R8"></td>
</tr> </tr>
</table><br> </table><br>
Receive: <nowrap><input type="checkbox" name="RB">Brightness,</nowrap> <nowrap><input type="checkbox" name="RC">Color,</nowrap> <nowrap>and <input type="checkbox" name="RX">Effects</nowrap><br> Receive: <nowrap><input type="checkbox" name="RB">Brightness,</nowrap> <nowrap><input type="checkbox" name="RC">Color,</nowrap> <nowrap>and <input type="checkbox" name="RX">Effects</nowrap><br>
<input type="checkbox" name="SO"> Segment options, <input type="checkbox" name="SG"> bounds<br> <input type="checkbox" name="SO"> Segment options, <input type="checkbox" name="SG"> bounds<br>
@ -171,7 +171,7 @@ Realtime LED offset: <input name="WO" type="number" min="-255" max="255" require
<hr class="sml"> <hr class="sml">
<h3>Alexa Voice Assistant</h3> <h3>Alexa Voice Assistant</h3>
<div id="NoAlexa" class="hide"> <div id="NoAlexa" class="hide">
<em style="color:#fa0;">This firmware build does not include Alexa support.<br></em><br> <em style="color:#fa0;">This firmware build does not include Alexa support.<br></em><br>
</div> </div>
<div id="Alexa"> <div id="Alexa">
Emulate Alexa device: <input type="checkbox" name="AL"><br> Emulate Alexa device: <input type="checkbox" name="AL"><br>
@ -187,7 +187,7 @@ For best results, only use one of these services at a time.<br>
<hr class="sml"> <hr class="sml">
<h3>Blynk</h3> <h3>Blynk</h3>
<div id="NoBlynk" class="hide"> <div id="NoBlynk" class="hide">
<em style="color:#fa0;">This firmware build does not include Blynk support.<br></em> <em style="color:#fa0;">This firmware build does not include Blynk support.<br></em>
</div> </div>
<div id="Blynk"> <div id="Blynk">
Host: <input type="text" name="BH" maxlength="32"> Host: <input type="text" name="BH" maxlength="32">
@ -197,7 +197,7 @@ Device Auth token: <input name="BK" maxlength="33"><br>
</div> </div>
<h3>MQTT</h3> <h3>MQTT</h3>
<div id="NoMQTT" class="hide"> <div id="NoMQTT" class="hide">
<em style="color:#fa0;">This firmware build does not include MQTT support.<br></em> <em style="color:#fa0;">This firmware build does not include MQTT support.<br></em>
</div> </div>
<div id="MQTT"> <div id="MQTT">
Enable MQTT: <input type="checkbox" name="MQ"><br> Enable MQTT: <input type="checkbox" name="MQ"><br>
@ -215,7 +215,7 @@ Publish on button press: <input type="checkbox" name="BM"><br>
</div> </div>
<h3>Philips Hue</h3> <h3>Philips Hue</h3>
<div id="NoHue" class="hide"> <div id="NoHue" class="hide">
<em style="color:#fa0;">This firmware build does not include Philips Hue support.<br></em> <em style="color:#fa0;">This firmware build does not include Philips Hue support.<br></em>
</div> </div>
<div id="Hue"> <div id="Hue">
<i>You can find the bridge IP and the light number in the 'About' section of the hue app.</i><br> <i>You can find the bridge IP and the light number in the 'About' section of the hue app.</i><br>

6
wled00/data/settings_time.htm
View File

@ -6,8 +6,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Time Settings</title> <title>Time Settings</title>
<script> <script>
var d=document; var d=document;
var loc = false, locip; var loc = false, locip;
var el=false; var el=false;
var ms=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; var ms=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
function H() { window.open("https://kno.wled.ge/features/settings/#time-settings"); } function H() { window.open("https://kno.wled.ge/features/settings/#time-settings"); }
@ -156,7 +156,7 @@
</div> </div>
<h2>Time setup</h2> <h2>Time setup</h2>
Get time from NTP server: <input type="checkbox" name="NT"><br> Get time from NTP server: <input type="checkbox" name="NT"><br>
<input type="text" name="NS" maxlength="32"><br> <input type="text" name="NS" maxlength="32"><br>
Use 24h format: <input type="checkbox" name="CF"><br> Use 24h format: <input type="checkbox" name="CF"><br>
Time zone: Time zone:
<select name="TZ"> <select name="TZ">

416
wled00/data/settings_ui.htm
View File

@ -6,234 +6,234 @@
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<title>UI Settings</title> <title>UI Settings</title>
<script> <script>
var d = document; var d = document;
var loc = false, locip; var loc = false, locip;
var initial_ds, initial_st, initial_su; var initial_ds, initial_st, initial_su;
var sett = null; var sett = null;
var l = { var l = {
"comp":{ "comp":{
"labels":"Show button labels", "labels":"Show button labels",
"colors":{ "colors":{
"LABEL":"Color selection methods", "LABEL":"Color selection methods",
"picker": "Color Wheel", "picker": "Color Wheel",
"rgb": "RGB sliders", "rgb": "RGB sliders",
"quick": "Quick color selectors", "quick": "Quick color selectors",
"hex": "HEX color input" "hex": "HEX color input"
}, },
"pcmbot": "Show bottom tab bar in PC mode", "pcmbot": "Show bottom tab bar in PC mode",
"pid": "Show preset IDs", "pid": "Show preset IDs",
"seglen": "Set segment length instead of stop LED", "seglen": "Set segment length instead of stop LED",
"segpwr": "Hide segment power &amp; brightness", "segpwr": "Hide segment power &amp; brightness",
"segexp" : "Always expand first segment", "segexp" : "Always expand first segment",
"css": "Enable custom CSS", "css": "Enable custom CSS",
"hdays": "Enable custom Holidays list" "hdays": "Enable custom Holidays list"
},
"theme":{
"alpha": {
"bg":"Background opacity",
"tab":"Button opacity"
}, },
"theme":{ "bg":{
"alpha": { "url":"BG image URL",
"bg":"Background opacity", "random":"Random BG image"
"tab":"Button opacity" },
}, "color":{
"bg":{ "bg":"BG HEX color"
"url":"BG image URL",
"random":"Random BG image"
},
"color":{
"bg":"BG HEX color"
}
} }
};
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; function gId(s) { return d.getElementById(s); }
var pList = path.split('_'); function toggle(el) { gId(el).classList.toggle("hide"); gId('No'+el).classList.toggle("hide"); }
var len = pList.length; function isObject(item) {
for(var i = 0; i < len-1; i++) { return (item && typeof item === 'object' && !Array.isArray(item));
var elem = pList[i]; }
if( !tar[elem] ) tar[elem] = {} function set(path, obj, val) {
tar = tar[elem]; var tar = obj;
} var pList = path.split('_');
tar[pList[len-1]] = val; var len = pList.length;
for(var i = 0; i < len-1; i++) {
var elem = pList[i];
if( !tar[elem] ) tar[elem] = {}
tar = tar[elem];
} }
var timeout; tar[pList[len-1]] = val;
function showToast(text, error = false) }
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)
{ {
var x = gId("toast"); var fk = path + (path?'_':'') + i;
x.innerHTML = text; if (isObject(s[i])) {
x.classList.add(error ? "error":"show"); if (label && label[i] && label[i]["LABEL"]) str += `<h3>${label[i]["LABEL"]}</h3>`;
clearTimeout(timeout); str += addRec(s[i], fk, label? label[i] : null);
x.style.animation = 'none'; } else {
timeout = setTimeout(function(){ x.classList.remove("show"); }, 2900); var lb = fk;
} if (label && label[i]) lb = label[i];
function addRec(s, path = "", label = null) else if (s[i+'LABEL']) lb = s[i+'LABEL'];
{ if (i.indexOf('LABEL') > 0) continue;
var str = ""; var t = typeof s[i];
for (i in s) if (gId(fk)) { //already exists
{ if(t === 'boolean')
var fk = path + (path?'_':'') + i; {
if (isObject(s[i])) { gId(fk).checked = 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 { } else {
if(t === 'boolean') gId(fk).value = s[i];
{ }
str += `${lb}: <input class="agi cb" type="checkbox" id=${fk} ${s[i]?"checked":""}><br>`; if (gId(fk).previousElementSibling.matches('.l')) {
} else if (t === 'number') gId(fk).previousElementSibling.innerHTML = lb;
{ }
str += `${lb}: <input class="agi" type="number" id=${fk} value=${s[i]}><br>`; } else {
} else if (t === 'string') if(t === 'boolean')
{ {
str += `${lb}:<br><input class="agi" id=${fk} value=${s[i]}><br>`; 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;
} }
return str;
}
function genForm(s) { function genForm(s) {
var str = ""; var str = "";
str = addRec(s,"",l); str = addRec(s,"",l);
gId('gen').innerHTML = str; gId('gen').innerHTML = str;
} }
function GetLS() function GetLS()
{ {
sett = localStorage.getItem('wledUiCfg'); sett = localStorage.getItem('wledUiCfg');
if (!sett) gId('lserr').style.display = "inline"; if (!sett) gId('lserr').style.display = "inline";
try { try {
sett = JSON.parse(sett); sett = JSON.parse(sett);
} catch (e) { } catch (e) {
sett = {}; sett = {};
gId('lserr').style.display = "inline"; gId('lserr').style.display = "inline";
gId('lserr').innerHTML = "&#9888; Settings JSON parsing failed. (" + e + ")"; gId('lserr').innerHTML = "&#9888; Settings JSON parsing failed. (" + e + ")";
}
genForm(sett);
gId('dm').checked = (gId('theme_base').value === 'light');
} }
genForm(sett);
gId('dm').checked = (gId('theme_base').value === 'light');
}
function SetLS() function SetLS()
{ {
var l = d.querySelectorAll('.agi'); var l = d.querySelectorAll('.agi');
for (var i = 0; i < l.length; i++) { for (var i = 0; i < l.length; i++) {
var e = l[i]; var e = l[i];
var val = e.classList.contains('cb') ? e.checked : e.value; var val = e.classList.contains('cb') ? e.checked : e.value;
set(e.id, sett, val); set(e.id, sett, val);
console.log(`${e.id} set to ${val}`); console.log(`${e.id} set to ${val}`);
} }
try { try {
localStorage.setItem('wledUiCfg', JSON.stringify(sett)); localStorage.setItem('wledUiCfg', JSON.stringify(sett));
gId('lssuc').style.display = "inline"; gId('lssuc').style.display = "inline";
} catch (e) { } catch (e) {
gId('lssuc').style.display = "none"; gId('lssuc').style.display = "none";
gId('lserr').style.display = "inline"; gId('lserr').style.display = "inline";
gId('lserr').innerHTML = "&#9888; Settings JSON saving failed. (" + e + ")"; gId('lserr').innerHTML = "&#9888; Settings JSON saving failed. (" + e + ")";
}
}
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!");
});
}
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);
} }
} }
var url = (loc?`http://${locip}`:'') + '/settings/s.js?p=3';
loadJS(url, false); // If we set async false, file is loaded and executed, then next statement is processed
}
function H() { window.open("https://kno.wled.ge/features/settings/#user-interface-settings"); }
function B() { window.open("/settings","_self"); }
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';
}
function cLS() // random BG image
{ function setRandomBg() {
localStorage.removeItem('wledP'); if (gId("theme_bg_random").checked) {
localStorage.removeItem('wledPmt'); gId("theme_bg_url").value = "https://picsum.photos/1920/1080";
localStorage.removeItem('wledPalx'); } else {
showToast("Cleared."); gId("theme_bg_url").value = "";
} }
function Save() { }
SetLS(); function checkRandomBg() {
if (d.Sf.DS.value != initial_ds || d.Sf.ST.checked != initial_st || d.Sf.SU.checked != initial_su) d.Sf.submit(); if (gId("theme_bg_url").value === "https://picsum.photos/1920/1080") {
} gId("theme_bg_random").checked = true;
} else {
// https://www.educative.io/edpresso/how-to-dynamically-load-a-js-file-in-javascript gId("theme_bg_random").checked = false;
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!");
});
}
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);
}
}
var url = (loc?`http://${locip}`:'') + '/settings/s.js?p=3';
loadJS(url, false); // If we set async false, file is loaded and executed, then next statement is processed
}
function H() { window.open("https://kno.wled.ge/features/settings/#user-interface-settings"); }
function B() { window.open("/settings","_self"); }
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 = "";
}
}
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;
}
}
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;
} }
}
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;
}
</script> </script>
<style>@import url("style.css");</style> <style>@import url("style.css");</style>
</head> </head>