Minor changes to auto UI code generation

Replace outdated CSS in HTML by style.css import
Fix missing button double press in time settings
FIx missing meta utf-8 in WiFi and UI settings
Modify cdata.js to add an info header to the top of auto-generated files
This commit is contained in:
cschwinne 2020-06-10 12:45:44 +02:00
parent ee6f25cc47
commit 888eacb574
11 changed files with 1173 additions and 1380 deletions

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "wled", "name": "wled",
"version": "1.0.0", "version": "0.10.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

View File

@ -84,7 +84,14 @@ function writeHtmlGzipped(sourceFile, resultFile) {
console.info("Compressed " + result.length + " bytes"); console.info("Compressed " + result.length + " bytes");
const array = hexdump(result); const array = hexdump(result);
const src = ` const src = `/*
* Binary array for the Web UI.
* gzip is used for smaller size and improved speeds.
*
* Please see https://github.com/Aircoookie/WLED/wiki/Add-own-functionality#web-ui
* to find out how to easily modify the web UI source!
*/
// Autogenerated from ${sourceFile}, do not edit!! // Autogenerated from ${sourceFile}, do not edit!!
const uint16_t PAGE_index_L = ${result.length}; const uint16_t PAGE_index_L = ${result.length};
const uint8_t PAGE_index[] PROGMEM = { const uint8_t PAGE_index[] PROGMEM = {
@ -153,7 +160,13 @@ ${result}
} }
function writeChunks(srcDir, specs, resultFile) { function writeChunks(srcDir, specs, resultFile) {
let src = ""; let src = `/*
* More web UI HTML source arrays.
* This file is auto generated, please don't make any changes manually.
* Instead, see https://github.com/Aircoookie/WLED/wiki/Add-own-functionality#web-ui
* to find out how to easily modify the web UI source!
*/
`;
specs.forEach((s) => { specs.forEach((s) => {
try { try {
console.info("Reading " + srcDir + "/" + s.file + " as " + s.name); console.info("Reading " + srcDir + "/" + s.file + " as " + s.name);

View File

@ -86,57 +86,7 @@
} }
</script> </script>
<style> <style>
:root { @import url("style.css");
--aCol: #fff;
--bCol: #333;
--cCol: #222;
--dCol: #fff;
--sCol: #0000;
}
body {
font-family: Verdana, Helvetica, sans-serif;
text-align: center;
background: var(--cCol);
color: var(--dCol);
line-height: 200%;
margin: 0;
background-attachment: fixed;
}
hr {
border-color: var(--dCol);
filter: drop-shadow( -5px -5px 5px var(--sCol) );
}
button {
background: var(--bCol);
color: var(--dCol);
border: 0.3ch solid var(--bCol);
display: inline-block;
filter: drop-shadow( -5px -5px 5px var(--sCol) );
font-size: 20px;
margin: 8px;
margin-top: 12px;
}
.helpB {
text-align: left;
position: absolute;
width:60px;
}
select {
background: var(--bCol);
color: var(--dCol);
border: 0.5ch solid var(--bCol);
font-family: var(--cFn), sans-serif;
filter: drop-shadow( -5px -5px 5px var(--sCol) );
}
input {
background: var(--bCol);
color: var(--dCol);
border: 0.5ch solid var(--bCol);
filter: drop-shadow( -5px -5px 5px var(--sCol) );
}
input[type=number] {
width: 4em;
}
</style> </style>
</head> </head>
<body onload="S()"> <body onload="S()">
@ -216,7 +166,7 @@
<option value="3">None (not recommended)</option> <option value="3">None (not recommended)</option>
</select><br> </select><br>
Reverse LED order (rotate 180): <input type="checkbox" name="RV"><br> Reverse LED order (rotate 180): <input type="checkbox" name="RV"><br>
Skip first LED: <input type="checkbox" name="SL"><br> Skip first LED: <input type="checkbox" name="SL"><hr>
<button type="button" onclick="B()">Back</button><button type="submit">Save</button> <button type="button" onclick="B()">Back</button><button type="submit">Save</button>
</form> </form>
</body> </body>

View File

@ -23,51 +23,7 @@
} }
</script> </script>
<style> <style>
:root { @import url("style.css");
--aCol: #D9B310;
--bCol: #0B3C5D;
--cCol: #1D2731;
--dCol: #328CC1;
--sCol: #000;
}
body {
font-family: Verdana, Helvetica, sans-serif;
text-align: center;
background: var(--cCol);
color: var(--dCol);
line-height: 2em;
font-size: 16px;
margin: 0;
background-attachment: fixed;
}
hr {
border-color: var(--dCol);
filter: drop-shadow( -5px -5px 5px var(--sCol) );
}
button {
background: var(--bCol);
color: var(--dCol);
border: 0.3ch solid var(--bCol);
display: inline-block;
filter: drop-shadow( -5px -5px 5px var(--sCol) );
font-size: 20px;
margin: 8px;
margin-top: 12px;
}
.helpB {
text-align: left;
position: absolute;
width:60px;
}
input {
background: var(--bCol);
color: var(--dCol);
border: 0.5ch solid var(--bCol);
filter: drop-shadow( -5px -5px 5px var(--sCol) );
}
input[type=number] {
width: 3em;
}
</style> </style>
</head> </head>
<body onload="GetV()"> <body onload="GetV()">

View File

@ -9,7 +9,7 @@ function SetVal(){switch(parseInt(d.Sf.EP.value)){case 5568: d.Sf.DI.value = 556
function S(){GetV();SetVal();} function S(){GetV();SetVal();}
function GetV(){var d=document;} function GetV(){var d=document;}
</script> </script>
<style>body{font-family:Verdana,sans-serif;text-align:center;background:#222;color:#fff;line-height:200%;margin:0}hr{border-color:#666}button{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.3ch solid #333;display:inline-block;font-size:20px;margin:8px;margin-top:12px}.helpB{text-align:left;position:absolute;width:60px}input{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.5ch solid #333}input[type=number]{width:4em}select{background:#333;color:#fff;font-family:Verdana,sans-serif;border:0.5ch solid #333}td{padding:2px;}.d5{width:4.5em !important;}</style></head> <style>@import url("style.css");</style></head>
<body onload="S()"> <body onload="S()">
<form id="form_s" name="Sf" method="post"> <form id="form_s" name="Sf" method="post">
<div class="helpB"><button type="button" onclick="H()">?</button></div> <div class="helpB"><button type="button" onclick="H()">?</button></div>

View File

@ -77,64 +77,7 @@
} }
</script> </script>
<style> <style>
:root { @import url("style.css");
--aCol: #D9B310;
--bCol: #0B3C5D;
--cCol: #1D2731;
--dCol: #328CC1;
--sCol: #000;
--tCol: #328CC1;
--cFn: Verdana;
}
body {
font-family: var(--cFn), sans-serif;
text-align: center;
background: var(--cCol);
color: var(--dCol);
line-height: 200%;
margin: 0;
background-attachment: fixed;
}
hr {
border-color: var(--dCol);
filter: drop-shadow( -5px -5px 5px var(--sCol) );
}
button {
background: var(--bCol);
color: var(--dCol);
border: 0.3ch solid var(--bCol);
font-family: var(--cFn), sans-serif;
display: inline-block;
filter: drop-shadow( -5px -5px 5px var(--sCol) );
font-size: 20px;
margin: 8px;
margin-top: 12px;
}
.helpB {
text-align: left;
position: absolute;
width:60px;
}
input {
background: var(--bCol);
color: var(--dCol);
font-family: var(--cFn), sans-serif;
border: 0.5ch solid var(--bCol);
filter: drop-shadow( -5px -5px 5px var(--sCol) );
}
select {
background: var(--bCol);
color: var(--dCol);
border: 0.5ch solid var(--bCol);
font-family: var(--cFn), sans-serif;
filter: drop-shadow( -5px -5px 5px var(--sCol) );
}
td {
padding:2px;
}
input[type=number] {
width: 4em;
}
</style> </style>
</head> </head>
<body onload="S()"> <body onload="S()">
@ -208,7 +151,8 @@
<i>Use 0 for the default action instead of a macro</i><br> <i>Use 0 for the default action instead of a macro</i><br>
Boot Macro: <input name="MB" type="number" min="0" max="16" required><br> Boot Macro: <input name="MB" type="number" min="0" max="16" required><br>
Alexa On/Off Macros: <input name="A0" type="number" min="0" max="16" required> <input name="A1" type="number" min="0" max="16" required><br> Alexa On/Off Macros: <input name="A0" type="number" min="0" max="16" required> <input name="A1" type="number" min="0" max="16" required><br>
Button Macro: <input name="MP" type="number" min="0" max="16" required> Long Press: <input name="MD" type="number" min="0" max="16" required><br> Button short press macro: Macro: <input name="MP" type="number" min="0" max="16" required><br>
Long Press: <input name="ML" type="number" min="0" max="16" required> Double press: <input name="MD" type="number" min="0" max="16" required><br>
Countdown-Over Macro: <input name="MC" type="number" min="0" max="16" required><br> Countdown-Over Macro: <input name="MC" type="number" min="0" max="16" required><br>
Timed-Light-Over Macro: <input name="MN" type="number" min="0" max="16" required><br> Timed-Light-Over Macro: <input name="MN" type="number" min="0" max="16" required><br>
Time-Controlled Macros:<br> Time-Controlled Macros:<br>

View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=500"> <meta name="viewport" content="width=500">
<title>UI Settings</title> <title>UI Settings</title>
<script> <script>
@ -36,61 +37,7 @@
} }
</script> </script>
<style> <style>
:root { @import url("style.css");
--aCol: #666;
--bCol: #333;
--cCol: #222;
--dCol: #666;
--tCol: #fff;
--sCol: #0000;
--cFn: Verdana;
}
body {
font-family: var(--cFn), Helvetica, sans-serif;
text-align: center;
background: var(--cCol);
color: var(--tCol);
line-height: 200%;
margin: 0;
background-attachment: fixed;
}
hr {
border-color: var(--dCol);
filter: drop-shadow( -5px -5px 5px var(--sCol) );
}
button {
background: var(--bCol);
color: var(--tCol);
border: 0.3ch solid var(--bCol);
display: inline-block;
font-family: var(--cFn), Helvetica, sans-serif;
filter: drop-shadow( -5px -5px 5px var(--sCol) );
font-size: 20px;
margin: 8px;
margin-top: 12px;
}
.helpB {
text-align: left;
position: absolute;
width:60px;
}
input {
background: var(--bCol);
color: var(--dCol);
border: 0.5ch solid var(--bCol);
filter: drop-shadow( -5px -5px 5px var(--sCol) );
font-family: var(--cFn), Helvetica, sans-serif;
}
select {
background: var(--bCol);
color: var(-tCol);
border: 0.5ch solid var(--bCol);
filter: drop-shadow( -5px -5px 5px var(--sCol) );
font-family: var(--cFn), Helvetica, sans-serif;
}
input[type=number] {
width: 3em;
}
</style> </style>
</head> </head>
<body onload="S()"> <body onload="S()">

View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=500"> <meta name="viewport" content="width=500">
<title>WiFi Settings</title> <title>WiFi Settings</title>
<script> <script>
@ -18,57 +19,13 @@
} }
</script> </script>
<style> <style>
:root { @import url("style.css");
--aCol: #D9B310;
--bCol: #0B3C5D;
--cCol: #1D2731;
--dCol: #328CC1;
--sCol: #000;
--cFn: Verdana;
}
body {
font-family: Verdana, Helvetica, sans-serif;
text-align: center;
background: var(--cCol);
color: var(--dCol);
line-height: 200%;
margin: 0;
background-attachment: fixed;
}
hr {
border-color: var(--dCol);
filter: drop-shadow( -5px -5px 5px var(--sCol) );
}
button {
background: var(--bCol);
color: var(--dCol);
border: 0.3ch solid var(--bCol);
display: inline-block;
filter: drop-shadow( -5px -5px 5px var(--sCol) );
font-size: 20px;
margin: 8px;
margin-top: 12px;
}
.helpB {
text-align: left;
position: absolute;
width:60px;
}
input {
background: var(--bCol);
color: var(--dCol);
border: 0.5ch solid var(--bCol);
filter: drop-shadow( -5px -5px 5px var(--sCol) );
}
input[type=number] {
width: 3em;
}
</style> </style>
</head> </head>
<body onload="GetV()"> <body onload="GetV()">
<form id="form_s" name="Sf" method="post"> <form id="form_s" name="Sf" method="post">
<div class="helpB"><button type="button" onclick="H()">?</button></div> <div class="helpB"><button type="button" onclick="H()">?</button></div>
<button type="button" onclick="B()">Back</button><button type="submit">Save & Reboot</button><hr> <button type="button" onclick="B()">Back</button><button type="submit">Save & Connect</button><hr>
<h2>WiFi setup</h2> <h2>WiFi setup</h2>
<h3>Connect to existing network</h3> <h3>Connect to existing network</h3>
Network name (SSID, empty to not connect): <br><input name="CS" maxlength="32"><br> Network name (SSID, empty to not connect): <br><input name="CS" maxlength="32"><br>
@ -102,13 +59,13 @@
<option value="1">Disconnected</option> <option value="1">Disconnected</option>
<option value="2">Always</option> <option value="2">Always</option>
<option value="3">Never (not recommended)</option></select><br> <option value="3">Never (not recommended)</option></select><br>
AP IP: <span class="sip"> Not active </span><hr> AP IP: <span class="sip"> Not active </span><br>
<h3>Experimental</h3> <h3>Experimental</h3>
Disable WiFi sleep: <input type="checkbox" name="WS"><br> Disable WiFi sleep: <input type="checkbox" name="WS"><br>
<i>Can help with connectivity issues.<br> <i>Can help with connectivity issues.<br>
Do not enable if WiFi is working correctly, increases power consumption.</i> Do not enable if WiFi is working correctly, increases power consumption.</i>
<hr> <hr>
<button type="button" onclick="B()">Back</button><button type="submit">Save & Reboot</button> <button type="button" onclick="B()">Back</button><button type="submit">Save & Connect</button>
</form> </form>
</body> </body>
</html> </html>

View File

@ -1,3 +1,9 @@
/*
* More web UI HTML source arrays.
* This file is auto generated, please don't make any changes manually.
* Instead, see https://github.com/Aircoookie/WLED/wiki/Add-own-functionality#web-ui
* to find out how to easily modify the web UI source!
*/
// Autogenerated from wled00/data/usermod.htm, do not edit!! // Autogenerated from wled00/data/usermod.htm, do not edit!!
const char PAGE_usermod[] PROGMEM = R"=====(<!DOCTYPE html><html><body>No usermod custom web page set.</body></html>)====="; const char PAGE_usermod[] PROGMEM = R"=====(<!DOCTYPE html><html><body>No usermod custom web page set.</body></html>)=====";

View File

@ -1,3 +1,9 @@
/*
* More web UI HTML source arrays.
* This file is auto generated, please don't make any changes manually.
* Instead, see https://github.com/Aircoookie/WLED/wiki/Add-own-functionality#web-ui
* to find out how to easily modify the web UI source!
*/
// Autogenerated from wled00/data/style.css, do not edit!! // Autogenerated from wled00/data/style.css, do not edit!!
const char PAGE_settingsCss[] PROGMEM = R"=====(<style>body{font-family:Verdana,sans-serif;text-align:center;background:#222;color:#fff;line-height:200%;margin:0}hr{border-color:#666}button{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.3ch solid #333;display:inline-block;font-size:20px;margin:8px;margin-top:12px}.helpB{text-align:left;position:absolute;width:60px}input{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.5ch solid #333}input[type=number]{width:4em}select{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.5ch solid #333}td{padding:2px}.d5{width:4.5em!important}</style>)====="; const char PAGE_settingsCss[] PROGMEM = R"=====(<style>body{font-family:Verdana,sans-serif;text-align:center;background:#222;color:#fff;line-height:200%;margin:0}hr{border-color:#666}button{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.3ch solid #333;display:inline-block;font-size:20px;margin:8px;margin-top:12px}.helpB{text-align:left;position:absolute;width:60px}input{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.5ch solid #333}input[type=number]{width:4em}select{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.5ch solid #333}td{padding:2px}.d5{width:4.5em!important}</style>)=====";
@ -21,13 +27,14 @@ action="/settings/time"><button type="submit">Time & Macros</button></form><form
// Autogenerated from wled00/data/settings_wifi.htm, do not edit!! // Autogenerated from wled00/data/settings_wifi.htm, do not edit!!
const char PAGE_settings_wifi[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta name="viewport" content="width=500"><title> const char PAGE_settings_wifi[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport"
WiFi Settings</title><script> content="width=500"><title>WiFi Settings</title><script>
function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#wifi-settings")}function B(){window.open("/settings","_self")}function GetV() {var d=document; function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#wifi-settings")}function B(){window.open("/settings","_self")}function GetV() {var d=document;
%CSS%%SCSS%</head><body onload="GetV()"><form id="form_s" name="Sf" method="post"> %CSS%%SCSS%</head><body onload="GetV()">
<div class="helpB"><button type="button" onclick="H()">?</button></div><button <form id="form_s" name="Sf" method="post"><div class="helpB"><button
type="button" onclick="B()">Back</button><button type="submit">Save & Reboot type="button" onclick="H()">?</button></div><button type="button" onclick="B()">
</button><hr><h2>WiFi setup</h2><h3>Connect to existing network</h3> Back</button><button type="submit">Save & Connect</button><hr><h2>WiFi setup
</h2><h3>Connect to existing network</h3>
Network name (SSID, empty to not connect):<br><input name="CS" maxlength="32"> Network name (SSID, empty to not connect):<br><input name="CS" maxlength="32">
<br>Network password:<br><input type="password" name="CP" maxlength="63"><br> <br>Network password:<br><input type="password" name="CP" maxlength="63"><br>
Static IP (leave at 0.0.0.0 for DHCP):<br><input name="I0" type="number" Static IP (leave at 0.0.0.0 for DHCP):<br><input name="I0" type="number"
@ -50,24 +57,24 @@ maxlength="63"><br>Access Point WiFi channel: <input name="AC" type="number"
min="1" max="13" required><br>AP opens: <select name="AB"><option value="0"> min="1" max="13" required><br>AP opens: <select name="AB"><option value="0">
No connection after boot</option><option value="1">Disconnected</option><option No connection after boot</option><option value="1">Disconnected</option><option
value="2">Always</option><option value="3">Never (not recommended)</option> value="2">Always</option><option value="3">Never (not recommended)</option>
</select><br>AP IP: <span class="sip">Not active</span><hr><h3>Experimental</h3> </select><br>AP IP: <span class="sip">Not active</span><br><h3>Experimental</h3>
Disable WiFi sleep: <input type="checkbox" name="WS"><br><i> Disable WiFi sleep: <input type="checkbox" name="WS"><br><i>
Can help with connectivity issues.<br> Can help with connectivity issues.<br>
Do not enable if WiFi is working correctly, increases power consumption.</i><hr> Do not enable if WiFi is working correctly, increases power consumption.</i><hr>
<button type="button" onclick="B()">Back</button><button type="submit"> <button type="button" onclick="B()">Back</button><button type="submit">
Save & Reboot</button></form></body></html>)====="; Save & Connect</button></form></body></html>)=====";
// Autogenerated from wled00/data/settings_leds.htm, do not edit!! // Autogenerated from wled00/data/settings_leds.htm, do not edit!!
const char PAGE_settings_leds[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" const char PAGE_settings_leds[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport"
content="width=500"><title>LED Settings</title><script> content="width=500"><title>LED Settings</title><script>
var d=document,laprev=55;function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#led-settings")}function B(){window.open("/settings","_self")}function S(){GetV(),setABL()}function enABL(){var e=d.getElementById("able").checked;d.Sf.LA.value=e?laprev:0,d.getElementById("abl").style.display=e?"inline":"none",d.getElementById("psu2").style.display=e?"inline":"none",0<d.Sf.LA.value&&setABL()}function enLA(){var e=d.Sf.LAsel.value;d.Sf.LA.value=e,d.getElementById("LAdis").style.display=50==e?"inline":"none",UI()}function setABL(){switch(d.getElementById("able").checked=!0,d.Sf.LAsel.value=50,parseInt(d.Sf.LA.value)){case 0:d.getElementById("able").checked=!1,enABL();break;case 30:d.Sf.LAsel.value=30;break;case 35:d.Sf.LAsel.value=35;break;case 55:d.Sf.LAsel.value=55;break;case 255:d.Sf.LAsel.value=255;break;default:d.getElementById("LAdis").style.display="inline"}UI()}function UI(){var e=d.querySelectorAll(".wc"),l=e.length;for(i=0;i<l;i++)e[i].style.display=d.getElementById("rgbw").checked?"inline":"none";d.getElementById("ledwarning").style.display=1e3<d.Sf.LC.value?"inline":"none",d.getElementById("ampwarning").style.display=7200<d.Sf.MA.value?"inline":"none",255==d.Sf.LA.value?laprev=12:0<d.Sf.LA.value&&(laprev=d.Sf.LA.value);var n=5<(n=Math.ceil((100+d.Sf.LC.value*laprev)/500)/2)?Math.ceil(n):n,t="",a=30==d.Sf.LAsel.value,s=255==d.Sf.LAsel.value;n<1.02&&!a&&!s?t="ESP 5V pin with 1A USB supply":(t+=a?"12V ":s?"WS2815 12V ":"5V ",t+=n,t+="A supply connected to LEDs");var u=Math.ceil((100+d.Sf.LC.value*laprev)/1500)/2,c="(for most effects, ~";c+=u=5<u?Math.ceil(u):u,c+="A is enough)<br>",d.getElementById("psu").innerHTML=t,d.getElementById("psu2").innerHTML=s?"":c}function GetV() {var d=document; var d=document,laprev=55;function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#led-settings")}function B(){window.open("/settings","_self")}function S(){GetV(),setABL()}function enABL(){var e=d.getElementById("able").checked;d.Sf.LA.value=e?laprev:0,d.getElementById("abl").style.display=e?"inline":"none",d.getElementById("psu2").style.display=e?"inline":"none",0<d.Sf.LA.value&&setABL()}function enLA(){var e=d.Sf.LAsel.value;d.Sf.LA.value=e,d.getElementById("LAdis").style.display=50==e?"inline":"none",UI()}function setABL(){switch(d.getElementById("able").checked=!0,d.Sf.LAsel.value=50,parseInt(d.Sf.LA.value)){case 0:d.getElementById("able").checked=!1,enABL();break;case 30:d.Sf.LAsel.value=30;break;case 35:d.Sf.LAsel.value=35;break;case 55:d.Sf.LAsel.value=55;break;case 255:d.Sf.LAsel.value=255;break;default:d.getElementById("LAdis").style.display="inline"}UI()}function UI(){var e=d.querySelectorAll(".wc"),l=e.length;for(i=0;i<l;i++)e[i].style.display=d.getElementById("rgbw").checked?"inline":"none";d.getElementById("ledwarning").style.display=1e3<d.Sf.LC.value?"inline":"none",d.getElementById("ampwarning").style.display=7200<d.Sf.MA.value?"inline":"none",255==d.Sf.LA.value?laprev=12:0<d.Sf.LA.value&&(laprev=d.Sf.LA.value);var n=5<(n=Math.ceil((100+d.Sf.LC.value*laprev)/500)/2)?Math.ceil(n):n,t="",a=30==d.Sf.LAsel.value,s=255==d.Sf.LAsel.value;n<1.02&&!a&&!s?t="ESP 5V pin with 1A USB supply":(t+=a?"12V ":s?"WS2815 12V ":"5V ",t+=n,t+="A supply connected to LEDs");var u=Math.ceil((100+d.Sf.LC.value*laprev)/1500)/2,c="(for most effects, ~";c+=u=5<u?Math.ceil(u):u,c+="A is enough)<br>",d.getElementById("psu").innerHTML=t,d.getElementById("psu2").innerHTML=s?"":c}function GetV() {var d=document;
%CSS%%SCSS%</head><body onload="S()"><form id="form_s" name="Sf" method="post"><div %CSS%%SCSS%</head><body onload="S()"><form
class="helpB"><button type="button" onclick="H()">?</button></div><button id="form_s" name="Sf" method="post"><div class="helpB"><button type="button"
type="button" onclick="B()">Back</button><button type="submit">Save</button><hr> onclick="H()">?</button></div><button type="button" onclick="B()">Back</button>
<h2>LED setup</h2>LED count: <input name="LC" type="number" min="1" max="1500" <button type="submit">Save</button><hr><h2>LED setup</h2>LED count: <input
oninput="UI()" required><br><div id="ledwarning" name="LC" type="number" min="1" max="1500" oninput="UI()" required><br><div
style="color:orange;display:none"> id="ledwarning" style="color:orange;display:none">
&#9888; You might run into stability or lag issues.<br> &#9888; You might run into stability or lag issues.<br>
Use less than 1000 LEDs per ESP for the best experience!<br></div><i> Use less than 1000 LEDs per ESP for the best experience!<br></div><i>
Recommended power supply for brightest white:</i><br><b><span id="psu">?</span> Recommended power supply for brightest white:</i><br><b><span id="psu">?</span>
@ -116,7 +123,7 @@ Palette blending: <select name="PB"><option value="0">Linear (wrap if moving)
</option><option value="1">Linear (always wrap)</option><option value="2"> </option><option value="1">Linear (always wrap)</option><option value="2">
Linear (never wrap)</option><option value="3">None (not recommended)</option> Linear (never wrap)</option><option value="3">None (not recommended)</option>
</select><br>Reverse LED order (rotate 180): <input type="checkbox" name="RV"> </select><br>Reverse LED order (rotate 180): <input type="checkbox" name="RV">
<br>Skip first LED: <input type="checkbox" name="SL"><br><button type="button" <br>Skip first LED: <input type="checkbox" name="SL"><hr><button type="button"
onclick="B()">Back</button><button type="submit">Save</button></form></body> onclick="B()">Back</button><button type="submit">Save</button></form></body>
</html>)====="; </html>)=====";
@ -154,41 +161,42 @@ const char PAGE_settings_dmx[] PROGMEM = R"=====()=====";
#endif #endif
// Autogenerated from wled00/data/settings_ui.htm, do not edit!! // Autogenerated from wled00/data/settings_ui.htm, do not edit!!
const char PAGE_settings_ui[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta name="viewport" content="width=500"><title> const char PAGE_settings_ui[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport"
UI Settings</title><script> content="width=500"><title>UI Settings</title><script>
function gId(t){return document.getElementById(t)}function S(){GetV(),Ct()}function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#user-interface-settings")}function B(){window.open("/settings","_self")}function Ct(){gId("co").selected?gId("cth").style.display="block":gId("cth").style.display="none"}function GetV() {var d=document; function gId(t){return document.getElementById(t)}function S(){GetV(),Ct()}function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#user-interface-settings")}function B(){window.open("/settings","_self")}function Ct(){gId("co").selected?gId("cth").style.display="block":gId("cth").style.display="none"}function GetV() {var d=document;
%CSS%%SCSS%</head><body onload="S()"><form id="form_s" name="Sf" method="post"><div %CSS%%SCSS%</head><body onload="S()"><form
class="helpB"><button type="button" onclick="H()">?</button></div><button id="form_s" name="Sf" method="post"><div class="helpB"><button type="button"
type="button" onclick="B()">Back</button><button type="submit">Save</button><hr> onclick="H()">?</button></div><button type="button" onclick="B()">Back</button>
<h2>Web Setup</h2>Server description: <input name="DS" maxlength="32"><br> <button type="submit">Save</button><hr><h2>Web Setup</h2>Server description:
Sync button toggles both send and receive: <input type="checkbox" name="ST"><br> <input name="DS" maxlength="32"><br>Sync button toggles both send and receive:
<br><hr><button type="button" onclick="B()">Back</button><button type="submit"> <input type="checkbox" name="ST"><br><br><hr><button type="button"
Save</button></form></body></html>)====="; onclick="B()">Back</button><button type="submit">Save</button></form></body>
</html>)=====";
// Autogenerated from wled00/data/settings_sync.htm, do not edit!! // Autogenerated from wled00/data/settings_sync.htm, do not edit!!
const char PAGE_settings_sync[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta name="viewport" content="width=500"><meta const char PAGE_settings_sync[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta name="viewport" content="width=500"><meta
charset="utf-8"><title>Sync Settings</title><script> charset="utf-8"><title>Sync Settings</title><script>
var d=document;function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#sync-settings")}function B(){window.open("/settings","_self")}function adj(){6454==d.Sf.DI.value?(1==d.Sf.DA.value&&(d.Sf.DA.value=0),1==d.Sf.EU.value&&(d.Sf.EU.value=0)):5568==d.Sf.DI.value&&(0==d.Sf.DA.value&&(d.Sf.DA.value=1),0==d.Sf.EU.value&&(d.Sf.EU.value=1))}function SP(){var e=d.Sf.DI.value;d.getElementById("xp").style.display=0<e?"none":"block",0<e&&(d.Sf.EP.value=e)}function SetVal(){switch(parseInt(d.Sf.EP.value)){case 5568:d.Sf.DI.value=5568;break;case 6454:d.Sf.DI.value=6454}SP()}function S(){GetV(),SetVal()}function GetV() { var d=document;function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#sync-settings")}function B(){window.open("/settings","_self")}function adj(){6454==d.Sf.DI.value?(1==d.Sf.DA.value&&(d.Sf.DA.value=0),1==d.Sf.EU.value&&(d.Sf.EU.value=0)):5568==d.Sf.DI.value&&(0==d.Sf.DA.value&&(d.Sf.DA.value=1),0==d.Sf.EU.value&&(d.Sf.EU.value=1))}function SP(){var e=d.Sf.DI.value;d.getElementById("xp").style.display=0<e?"none":"block",0<e&&(d.Sf.EP.value=e)}function SetVal(){switch(parseInt(d.Sf.EP.value)){case 5568:d.Sf.DI.value=5568;break;case 6454:d.Sf.DI.value=6454}SP()}function S(){GetV(),SetVal()}function GetV() {
%CSS%%SCSS%</head><body onload="S()"><form id="form_s" name="Sf" method="post"><div %CSS%%SCSS%</head><body onload="S()"><form
class="helpB"><button type="button" onclick="H()">?</button></div><button id="form_s" name="Sf" method="post"><div class="helpB"><button type="button"
type="button" onclick="B()">Back</button><button type="submit">Save</button><hr> onclick="H()">?</button></div><button type="button" onclick="B()">Back</button>
<h2>Sync setup</h2><h3>Button setup</h3>On/Off button enabled: <input <button type="submit">Save</button><hr><h2>Sync setup</h2><h3>Button setup</h3>
type="checkbox" name="BT"><br>Infrared remote: <select name="IR"><option On/Off button enabled: <input type="checkbox" name="BT"><br>Infrared remote:
value="0">Disabled</option><option value="1">24-key RGB</option><option <select name="IR"><option value="0">Disabled</option><option value="1">
value="2">24-key with CT</option><option value="3">40-key blue</option><option 24-key RGB</option><option value="2">24-key with CT</option><option value="3">
value="4">44-key RGB</option><option value="5">21-key RGB</option><option 40-key blue</option><option value="4">44-key RGB</option><option value="5">
value="6">6-key black</option><option value="7">9-key red</option></select><br> 21-key RGB</option><option value="6">6-key black</option><option value="7">
<a href="https://github.com/Aircoookie/WLED/wiki/Infrared-Control" 9-key red</option></select><br><a
target="_blank">IR info</a><h3>WLED Broadcast</h3>UDP Port: <input name="UP" href="https://github.com/Aircoookie/WLED/wiki/Infrared-Control" target="_blank">
type="number" min="1" max="65535" class="d5" required><br>Receive <input IR info</a><h3>WLED Broadcast</h3>UDP Port: <input name="UP" type="number"
type="checkbox" name="RB">Brightness, <input type="checkbox" name="RC"> min="1" max="65535" class="d5" required><br>Receive <input type="checkbox"
Color, and <input type="checkbox" name="RX">Effects<br> name="RB">Brightness, <input type="checkbox" name="RC">Color, and <input
Send notifications on direct change: <input type="checkbox" name="SD"><br> type="checkbox" name="RX">Effects<br>Send notifications on direct change: <input
Send notifications on button press: <input type="checkbox" name="SB"><br> type="checkbox" name="SD"><br>Send notifications on button press: <input
Send Alexa notifications: <input type="checkbox" name="SA"><br> type="checkbox" name="SB"><br>Send Alexa notifications: <input type="checkbox"
Send Philips Hue change notifications: <input type="checkbox" name="SH"><br> name="SA"><br>Send Philips Hue change notifications: <input type="checkbox"
Send Macro notifications: <input type="checkbox" name="SM"><br> name="SH"><br>Send Macro notifications: <input type="checkbox" name="SM"><br>
Send notifications twice: <input type="checkbox" name="S2"><h3>Realtime</h3> Send notifications twice: <input type="checkbox" name="S2"><h3>Realtime</h3>
Receive UDP realtime: <input type="checkbox" name="RD"><br><br><i> Receive UDP realtime: <input type="checkbox" name="RD"><br><br><i>
Network DMX input</i><br>Type: <select name="DI" onchange="SP(),adj()"><option Network DMX input</i><br>Type: <select name="DI" onchange="SP(),adj()"><option
@ -249,52 +257,54 @@ type="submit">Save</button></form></body></html>)=====";
const char PAGE_settings_time[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta name="viewport" content="width=500"><meta const char PAGE_settings_time[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta name="viewport" content="width=500"><meta
charset="utf-8"><title>Time Settings</title><script> charset="utf-8"><title>Time Settings</title><script>
var d=document;function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#time-settings")}function B(){window.open("/settings","_self")}function S(){BTa(),GetV(),Cs(),FC()}function gId(t){return d.getElementById(t)}function Cs(){gId("cac").style.display="none",gId("coc").style.display="block",gId("ccc").style.display="none",gId("ca").selected&&(gId("cac").style.display="block"),gId("cc").selected&&(gId("coc").style.display="none",gId("ccc").style.display="block"),gId("cn").selected&&(gId("coc").style.display="none")}function BTa(){var t="<tr><th>Active</th><th>Hour</th><th>Minute</th><th>Macro</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th><th>S</th></tr>";for(i=0;i<8;i++)for(t+='<tr><td><input name="W'+i+'" id="W'+i+'" type="number" style="display:none"><input id="W'+i+'0" type="checkbox"></td><td><input name="H'+i+'" type="number" min="0" max="24"></td><td><input name="N'+i+'" type="number" min="0" max="59"></td><td><input name="T'+i+'" type="number" min="0" max="16"></td>',j=1;j<8;j++)t+='<td><input id="W'+i+j+'" type="checkbox"></td>';gId("TMT").innerHTML=t}function FC(){for(j=0;j<8;j++)for(i=0;i<8;i++)gId("W"+i+j).checked=gId("W"+i).value>>j&1}function Wd(){for(a=[0,0,0,0,0,0,0,0],i=0;i<8;i++){for(m=1,j=0;j<8;j++)a[i]+=gId("W"+i+j).checked*m,m*=2;gId("W"+i).value=a[i]}}function GetV() { var d=document;function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#time-settings")}function B(){window.open("/settings","_self")}function S(){BTa(),GetV(),Cs(),FC()}function gId(t){return d.getElementById(t)}function Cs(){gId("cac").style.display="none",gId("coc").style.display="block",gId("ccc").style.display="none",gId("ca").selected&&(gId("cac").style.display="block"),gId("cc").selected&&(gId("coc").style.display="none",gId("ccc").style.display="block"),gId("cn").selected&&(gId("coc").style.display="none")}function BTa(){var t="<tr><th>Active</th><th>Hour</th><th>Minute</th><th>Macro</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th><th>S</th></tr>";for(i=0;i<8;i++)for(t+='<tr><td><input name="W'+i+'" id="W'+i+'" type="number" style="display:none"><input id="W'+i+'0" type="checkbox"></td><td><input name="H'+i+'" type="number" min="0" max="24"></td><td><input name="N'+i+'" type="number" min="0" max="59"></td><td><input name="T'+i+'" type="number" min="0" max="16"></td>',j=1;j<8;j++)t+='<td><input id="W'+i+j+'" type="checkbox"></td>';gId("TMT").innerHTML=t}function FC(){for(j=0;j<8;j++)for(i=0;i<8;i++)gId("W"+i+j).checked=gId("W"+i).value>>j&1}function Wd(){for(a=[0,0,0,0,0,0,0,0],i=0;i<8;i++){for(m=1,j=0;j<8;j++)a[i]+=gId("W"+i+j).checked*m,m*=2;gId("W"+i).value=a[i]}}function GetV() {
%CSS%%SCSS%</head><body onload="S()"><form id="form_s" name="Sf" method="post" %CSS%%SCSS%</head><body onload="S()"><form
onsubmit="Wd()"><div class="helpB"><button type="button" onclick="H()">? id="form_s" name="Sf" method="post" onsubmit="Wd()"><div class="helpB"><button
</button></div><button type="button" onclick="B()">Back</button><button type="button" onclick="H()">?</button></div><button type="button" onclick="B()">
type="submit">Save</button><hr><h2>Time setup</h2>Get time from NTP server: Back</button><button type="submit">Save</button><hr><h2>Time setup</h2>
<input type="checkbox" name="NT"><br><input name="NS" maxlength="32"><br> Get time from NTP server: <input type="checkbox" name="NT"><br><input name="NS"
Use 24h format: <input type="checkbox" name="CF"><br>Time zone: <select maxlength="32"><br>Use 24h format: <input type="checkbox" name="CF"><br>
name="TZ"><option value="0" selected="selected">GMT(UTC)</option><option Time zone: <select name="TZ"><option value="0" selected="selected">GMT(UTC)
value="1">GMT/BST</option><option value="2">CET/CEST</option><option value="3"> </option><option value="1">GMT/BST</option><option value="2">CET/CEST</option>
EET/EEST</option><option value="4">US-EST/EDT</option><option value="5"> <option value="3">EET/EEST</option><option value="4">US-EST/EDT</option><option
US-CST/CDT</option><option value="6">US-MST/MDT</option><option value="7">US-AZ value="5">US-CST/CDT</option><option value="6">US-MST/MDT</option><option
</option><option value="8">US-PST/PDT</option><option value="9">CST(AWST) value="7">US-AZ</option><option value="8">US-PST/PDT</option><option value="9">
</option><option value="10">JST(KST)</option><option value="11">AEST/AEDT CST(AWST)</option><option value="10">JST(KST)</option><option value="11">
</option><option value="12">NZST/NZDT</option><option value="13">North Korea AEST/AEDT</option><option value="12">NZST/NZDT</option><option value="13">
</option></select><br>UTC offset: <input name="UO" type="number" min="-65500" North Korea</option></select><br>UTC offset: <input name="UO" type="number"
max="65500" required> seconds (max. 18 hours)<br>Current local time is <span min="-65500" max="65500" required> seconds (max. 18 hours)<br>
class="times">unknown</span>.<h3>Clock</h3>Clock Overlay: <select name="OL" Current local time is <span class="times">unknown</span>.<h3>Clock</h3>
onchange="Cs()"><option value="0" id="cn" selected="selected">None</option> Clock Overlay: <select name="OL" onchange="Cs()"><option value="0" id="cn"
<option value="1" id="ca">Analog Clock</option><option value="2"> selected="selected">None</option><option value="1" id="ca">Analog Clock</option>
Single Digit Clock</option><option value="3" id="cc">Cronixie Clock</option> <option value="2">Single Digit Clock</option><option value="3" id="cc">
</select><br><div id="coc">First LED: <input name="O1" type="number" min="0" Cronixie Clock</option></select><br><div id="coc">First LED: <input name="O1"
max="255" required> Last LED: <input name="O2" type="number" min="0" max="255" type="number" min="0" max="255" required> Last LED: <input name="O2"
required><br><div id="cac">12h LED: <input name="OM" type="number" min="0" type="number" min="0" max="255" required><br><div id="cac">12h LED: <input
max="255" required><br>Show 5min marks: <input type="checkbox" name="O5"><br> name="OM" type="number" min="0" max="255" required><br>Show 5min marks: <input
</div>Seconds (as trail): <input type="checkbox" name="OS"><br></div><div type="checkbox" name="O5"><br></div>Seconds (as trail): <input type="checkbox"
id="ccc">Cronixie Display: <input name="CX" maxlength="6"><br> name="OS"><br></div><div id="ccc">Cronixie Display: <input name="CX"
Cronixie Backlight: <input type="checkbox" name="CB"><br></div>Countdown Mode: maxlength="6"><br>Cronixie Backlight: <input type="checkbox" name="CB"><br>
<input type="checkbox" name="CE"><br>Countdown Goal:<br>Year: 20 <input </div>Countdown Mode: <input type="checkbox" name="CE"><br>Countdown Goal:<br>
name="CY" type="number" min="0" max="99" required> Month: <input name="CI" Year: 20 <input name="CY" type="number" min="0" max="99" required> Month: <input
type="number" min="1" max="12" required> Day: <input name="CD" type="number" name="CI" type="number" min="1" max="12" required> Day: <input name="CD"
min="1" max="31" required><br>Hour: <input name="CH" type="number" min="0" type="number" min="1" max="31" required><br>Hour: <input name="CH"
max="23" required> Minute: <input name="CM" type="number" min="0" max="59" type="number" min="0" max="23" required> Minute: <input name="CM" type="number"
required> Second: <input name="CS" type="number" min="0" max="59" required><br> min="0" max="59" required> Second: <input name="CS" type="number" min="0"
<h3>Advanced Macros</h3>Define API macros here:<br>1: <input name="M1" max="59" required><br><h3>Advanced Macros</h3>Define API macros here:<br>1:
maxlength="64"><br>2: <input name="M2" maxlength="64"><br>3: <input name="M3" <input name="M1" maxlength="64"><br>2: <input name="M2" maxlength="64"><br>3:
maxlength="64"><br>4: <input name="M4" maxlength="64"><br>5: <input name="M5" <input name="M3" maxlength="64"><br>4: <input name="M4" maxlength="64"><br>5:
maxlength="64"><br>6: <input name="M6" maxlength="64"><br>7: <input name="M7" <input name="M5" maxlength="64"><br>6: <input name="M6" maxlength="64"><br>7:
maxlength="64"><br>8: <input name="M8" maxlength="64"><br>9: <input name="M9" <input name="M7" maxlength="64"><br>8: <input name="M8" maxlength="64"><br>9:
maxlength="64"><br>10: <input name="M10" maxlength="64"><br>11: <input <input name="M9" maxlength="64"><br>10: <input name="M10" maxlength="64"><br>
name="M11" maxlength="64"><br>12: <input name="M12" maxlength="64"><br>13: 11: <input name="M11" maxlength="64"><br>12: <input name="M12" maxlength="64">
<input name="M13" maxlength="64"><br>14: <input name="M14" maxlength="64"><br> <br>13: <input name="M13" maxlength="64"><br>14: <input name="M14"
15: <input name="M15" maxlength="64"><br>16: <input name="M16" maxlength="64"> maxlength="64"><br>15: <input name="M15" maxlength="64"><br>16: <input
<br><br><i>Use 0 for the default action instead of a macro</i><br>Boot Macro: name="M16" maxlength="64"><br><br><i>
<input name="MB" type="number" min="0" max="16" required><br> Use 0 for the default action instead of a macro</i><br>Boot Macro: <input
Alexa On/Off Macros: <input name="A0" type="number" min="0" max="16" required> name="MB" type="number" min="0" max="16" required><br>Alexa On/Off Macros:
<input name="A1" type="number" min="0" max="16" required><br>Button Macro: <input name="A0" type="number" min="0" max="16" required> <input name="A1"
<input name="MP" type="number" min="0" max="16" required> Long Press: <input type="number" min="0" max="16" required><br>Button short press macro: Macro:
<input name="MP" type="number" min="0" max="16" required><br>Long Press: <input
name="ML" type="number" min="0" max="16" required> Double press: <input
name="MD" type="number" min="0" max="16" required><br>Countdown-Over Macro: name="MD" type="number" min="0" max="16" required><br>Countdown-Over Macro:
<input name="MC" type="number" min="0" max="16" required><br> <input name="MC" type="number" min="0" max="16" required><br>
Timed-Light-Over Macro: <input name="MN" type="number" min="0" max="16" Timed-Light-Over Macro: <input name="MN" type="number" min="0" max="16"
@ -307,12 +317,13 @@ required><br>Time-Controlled Macros:<br><div style="display:inline-block"><table
const char PAGE_settings_sec[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta name="viewport" content="width=500"><meta const char PAGE_settings_sec[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta name="viewport" content="width=500"><meta
charset="utf-8"><title>Misc Settings</title><script> charset="utf-8"><title>Misc Settings</title><script>
function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#security-settings")}function B(){window.open("/settings","_self")}function U(){window.open("/update","_self")}function GetV() {var d=document; function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#security-settings")}function B(){window.open("/settings","_self")}function U(){window.open("/update","_self")}function GetV() {var d=document;
%CSS%%SCSS%</head><body onload="GetV()"><form id="form_s" name="Sf" method="post"> %CSS%%SCSS%</head><body onload="GetV()">
<div class="helpB"><button type="button" onclick="H()">?</button></div><button <form id="form_s" name="Sf" method="post"><div class="helpB"><button
type="button" onclick="B()">Back</button><button type="submit">Save & Reboot type="button" onclick="H()">?</button></div><button type="button" onclick="B()">
</button><hr><h2>Security & Update setup</h2> Back</button><button type="submit">Save & Reboot</button><hr><h2>
Lock wireless (OTA) software update: <input type="checkbox" name="NO"><br> Security & Update setup</h2>Lock wireless (OTA) software update: <input
Passphrase: <input type="password" name="OP" maxlength="32"><br> type="checkbox" name="NO"><br>Passphrase: <input type="password" name="OP"
maxlength="32"><br>
To enable OTA, for security reasons you need to also enter the correct password! To enable OTA, for security reasons you need to also enter the correct password!
<br>The password should be changed when OTA is enabled.<br><b> <br>The password should be changed when OTA is enabled.<br><b>
Disable OTA when not in use, otherwise an attacker can reflash device software! Disable OTA when not in use, otherwise an attacker can reflash device software!

File diff suppressed because it is too large Load Diff