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",
"version": "1.0.0",
"version": "0.10.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

View File

@ -84,7 +84,14 @@ function writeHtmlGzipped(sourceFile, resultFile) {
console.info("Compressed " + result.length + " bytes");
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!!
const uint16_t PAGE_index_L = ${result.length};
const uint8_t PAGE_index[] PROGMEM = {
@ -153,7 +160,13 @@ ${result}
}
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) => {
try {
console.info("Reading " + srcDir + "/" + s.file + " as " + s.name);

View File

@ -86,57 +86,7 @@
}
</script>
<style>
:root {
--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;
}
@import url("style.css");
</style>
</head>
<body onload="S()">
@ -216,7 +166,7 @@
<option value="3">None (not recommended)</option>
</select><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>
</form>
</body>

View File

@ -23,51 +23,7 @@
}
</script>
<style>
:root {
--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;
}
@import url("style.css");
</style>
</head>
<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 GetV(){var d=document;}
</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()">
<form id="form_s" name="Sf" method="post">
<div class="helpB"><button type="button" onclick="H()">?</button></div>

View File

@ -77,64 +77,7 @@
}
</script>
<style>
:root {
--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;
}
@import url("style.css");
</style>
</head>
<body onload="S()">
@ -208,7 +151,8 @@
<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>
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>
Timed-Light-Over Macro: <input name="MN" type="number" min="0" max="16" required><br>
Time-Controlled Macros:<br>

View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=500">
<title>UI Settings</title>
<script>
@ -36,61 +37,7 @@
}
</script>
<style>
:root {
--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;
}
@import url("style.css");
</style>
</head>
<body onload="S()">

View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=500">
<title>WiFi Settings</title>
<script>
@ -18,57 +19,13 @@
}
</script>
<style>
:root {
--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;
}
@import url("style.css");
</style>
</head>
<body onload="GetV()">
<form id="form_s" name="Sf" method="post">
<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>
<h3>Connect to existing network</h3>
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="2">Always</option>
<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>
Disable WiFi sleep: <input type="checkbox" name="WS"><br>
<i>Can help with connectivity issues.<br>
Do not enable if WiFi is working correctly, increases power consumption.</i>
<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>
</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/usermod.htm, do not edit!!
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!!
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!!
const char PAGE_settings_wifi[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta name="viewport" content="width=500"><title>
WiFi Settings</title><script>
const char PAGE_settings_wifi[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport"
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;
%CSS%%SCSS%</head><body onload="GetV()"><form id="form_s" name="Sf" method="post">
<div class="helpB"><button type="button" onclick="H()">?</button></div><button
type="button" onclick="B()">Back</button><button type="submit">Save & Reboot
</button><hr><h2>WiFi setup</h2><h3>Connect to existing network</h3>
%CSS%%SCSS%</head><body onload="GetV()">
<form id="form_s" name="Sf" method="post"><div class="helpB"><button
type="button" onclick="H()">?</button></div><button type="button" onclick="B()">
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">
<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"
@ -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">
No connection after boot</option><option value="1">Disconnected</option><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>
Can help with connectivity issues.<br>
Do not enable if WiFi is working correctly, increases power consumption.</i><hr>
<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!!
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>
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
class="helpB"><button type="button" onclick="H()">?</button></div><button
type="button" onclick="B()">Back</button><button type="submit">Save</button><hr>
<h2>LED setup</h2>LED count: <input name="LC" type="number" min="1" max="1500"
oninput="UI()" required><br><div id="ledwarning"
style="color:orange;display:none">
%CSS%%SCSS%</head><body onload="S()"><form
id="form_s" name="Sf" method="post"><div class="helpB"><button type="button"
onclick="H()">?</button></div><button type="button" onclick="B()">Back</button>
<button type="submit">Save</button><hr><h2>LED setup</h2>LED count: <input
name="LC" type="number" min="1" max="1500" oninput="UI()" required><br><div
id="ledwarning" style="color:orange;display:none">
&#9888; You might run into stability or lag issues.<br>
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>
@ -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">
Linear (never wrap)</option><option value="3">None (not recommended)</option>
</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>
</html>)=====";
@ -154,41 +161,42 @@ const char PAGE_settings_dmx[] PROGMEM = R"=====()=====";
#endif
// 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>
UI Settings</title><script>
const char PAGE_settings_ui[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport"
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;
%CSS%%SCSS%</head><body onload="S()"><form id="form_s" name="Sf" method="post"><div
class="helpB"><button type="button" onclick="H()">?</button></div><button
type="button" onclick="B()">Back</button><button type="submit">Save</button><hr>
<h2>Web Setup</h2>Server description: <input name="DS" maxlength="32"><br>
Sync button toggles both send and receive: <input type="checkbox" name="ST"><br>
<br><hr><button type="button" onclick="B()">Back</button><button type="submit">
Save</button></form></body></html>)=====";
%CSS%%SCSS%</head><body onload="S()"><form
id="form_s" name="Sf" method="post"><div class="helpB"><button type="button"
onclick="H()">?</button></div><button type="button" onclick="B()">Back</button>
<button type="submit">Save</button><hr><h2>Web Setup</h2>Server description:
<input name="DS" maxlength="32"><br>Sync button toggles both send and receive:
<input type="checkbox" name="ST"><br><br><hr><button type="button"
onclick="B()">Back</button><button type="submit">Save</button></form></body>
</html>)=====";
// 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
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() {
%CSS%%SCSS%</head><body onload="S()"><form id="form_s" name="Sf" method="post"><div
class="helpB"><button type="button" onclick="H()">?</button></div><button
type="button" onclick="B()">Back</button><button type="submit">Save</button><hr>
<h2>Sync setup</h2><h3>Button setup</h3>On/Off button enabled: <input
type="checkbox" name="BT"><br>Infrared remote: <select name="IR"><option
value="0">Disabled</option><option value="1">24-key RGB</option><option
value="2">24-key with CT</option><option value="3">40-key blue</option><option
value="4">44-key RGB</option><option value="5">21-key RGB</option><option
value="6">6-key black</option><option value="7">9-key red</option></select><br>
<a href="https://github.com/Aircoookie/WLED/wiki/Infrared-Control"
target="_blank">IR info</a><h3>WLED Broadcast</h3>UDP Port: <input name="UP"
type="number" min="1" max="65535" class="d5" required><br>Receive <input
type="checkbox" name="RB">Brightness, <input type="checkbox" name="RC">
Color, and <input type="checkbox" name="RX">Effects<br>
Send notifications on direct change: <input type="checkbox" name="SD"><br>
Send notifications on button press: <input type="checkbox" name="SB"><br>
Send Alexa notifications: <input type="checkbox" name="SA"><br>
Send Philips Hue change notifications: <input type="checkbox" name="SH"><br>
Send Macro notifications: <input type="checkbox" name="SM"><br>
%CSS%%SCSS%</head><body onload="S()"><form
id="form_s" name="Sf" method="post"><div class="helpB"><button type="button"
onclick="H()">?</button></div><button type="button" onclick="B()">Back</button>
<button type="submit">Save</button><hr><h2>Sync setup</h2><h3>Button setup</h3>
On/Off button enabled: <input type="checkbox" name="BT"><br>Infrared remote:
<select name="IR"><option value="0">Disabled</option><option value="1">
24-key RGB</option><option value="2">24-key with CT</option><option value="3">
40-key blue</option><option value="4">44-key RGB</option><option value="5">
21-key RGB</option><option value="6">6-key black</option><option value="7">
9-key red</option></select><br><a
href="https://github.com/Aircoookie/WLED/wiki/Infrared-Control" target="_blank">
IR info</a><h3>WLED Broadcast</h3>UDP Port: <input name="UP" type="number"
min="1" max="65535" class="d5" required><br>Receive <input type="checkbox"
name="RB">Brightness, <input type="checkbox" name="RC">Color, and <input
type="checkbox" name="RX">Effects<br>Send notifications on direct change: <input
type="checkbox" name="SD"><br>Send notifications on button press: <input
type="checkbox" name="SB"><br>Send Alexa notifications: <input type="checkbox"
name="SA"><br>Send Philips Hue change notifications: <input type="checkbox"
name="SH"><br>Send Macro notifications: <input type="checkbox" name="SM"><br>
Send notifications twice: <input type="checkbox" name="S2"><h3>Realtime</h3>
Receive UDP realtime: <input type="checkbox" name="RD"><br><br><i>
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
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() {
%CSS%%SCSS%</head><body onload="S()"><form id="form_s" name="Sf" method="post"
onsubmit="Wd()"><div class="helpB"><button type="button" onclick="H()">?
</button></div><button type="button" onclick="B()">Back</button><button
type="submit">Save</button><hr><h2>Time setup</h2>Get time from NTP server:
<input type="checkbox" name="NT"><br><input name="NS" maxlength="32"><br>
Use 24h format: <input type="checkbox" name="CF"><br>Time zone: <select
name="TZ"><option value="0" selected="selected">GMT(UTC)</option><option
value="1">GMT/BST</option><option value="2">CET/CEST</option><option value="3">
EET/EEST</option><option value="4">US-EST/EDT</option><option value="5">
US-CST/CDT</option><option value="6">US-MST/MDT</option><option value="7">US-AZ
</option><option value="8">US-PST/PDT</option><option value="9">CST(AWST)
</option><option value="10">JST(KST)</option><option value="11">AEST/AEDT
</option><option value="12">NZST/NZDT</option><option value="13">North Korea
</option></select><br>UTC offset: <input name="UO" type="number" min="-65500"
max="65500" required> seconds (max. 18 hours)<br>Current local time is <span
class="times">unknown</span>.<h3>Clock</h3>Clock Overlay: <select name="OL"
onchange="Cs()"><option value="0" id="cn" selected="selected">None</option>
<option value="1" id="ca">Analog Clock</option><option value="2">
Single Digit Clock</option><option value="3" id="cc">Cronixie Clock</option>
</select><br><div id="coc">First LED: <input name="O1" type="number" min="0"
max="255" required> Last LED: <input name="O2" type="number" min="0" max="255"
required><br><div id="cac">12h LED: <input name="OM" type="number" min="0"
max="255" required><br>Show 5min marks: <input type="checkbox" name="O5"><br>
</div>Seconds (as trail): <input type="checkbox" name="OS"><br></div><div
id="ccc">Cronixie Display: <input name="CX" maxlength="6"><br>
Cronixie Backlight: <input type="checkbox" name="CB"><br></div>Countdown Mode:
<input type="checkbox" name="CE"><br>Countdown Goal:<br>Year: 20 <input
name="CY" type="number" min="0" max="99" required> Month: <input name="CI"
type="number" min="1" max="12" required> Day: <input name="CD" type="number"
min="1" max="31" required><br>Hour: <input name="CH" type="number" min="0"
max="23" required> Minute: <input name="CM" type="number" min="0" max="59"
required> Second: <input name="CS" type="number" min="0" max="59" required><br>
<h3>Advanced Macros</h3>Define API macros here:<br>1: <input name="M1"
maxlength="64"><br>2: <input name="M2" maxlength="64"><br>3: <input name="M3"
maxlength="64"><br>4: <input name="M4" maxlength="64"><br>5: <input name="M5"
maxlength="64"><br>6: <input name="M6" maxlength="64"><br>7: <input name="M7"
maxlength="64"><br>8: <input name="M8" maxlength="64"><br>9: <input name="M9"
maxlength="64"><br>10: <input name="M10" maxlength="64"><br>11: <input
name="M11" maxlength="64"><br>12: <input name="M12" maxlength="64"><br>13:
<input name="M13" maxlength="64"><br>14: <input name="M14" maxlength="64"><br>
15: <input name="M15" maxlength="64"><br>16: <input name="M16" maxlength="64">
<br><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>
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
%CSS%%SCSS%</head><body onload="S()"><form
id="form_s" name="Sf" method="post" onsubmit="Wd()"><div class="helpB"><button
type="button" onclick="H()">?</button></div><button type="button" onclick="B()">
Back</button><button type="submit">Save</button><hr><h2>Time setup</h2>
Get time from NTP server: <input type="checkbox" name="NT"><br><input name="NS"
maxlength="32"><br>Use 24h format: <input type="checkbox" name="CF"><br>
Time zone: <select name="TZ"><option value="0" selected="selected">GMT(UTC)
</option><option value="1">GMT/BST</option><option value="2">CET/CEST</option>
<option value="3">EET/EEST</option><option value="4">US-EST/EDT</option><option
value="5">US-CST/CDT</option><option value="6">US-MST/MDT</option><option
value="7">US-AZ</option><option value="8">US-PST/PDT</option><option value="9">
CST(AWST)</option><option value="10">JST(KST)</option><option value="11">
AEST/AEDT</option><option value="12">NZST/NZDT</option><option value="13">
North Korea</option></select><br>UTC offset: <input name="UO" type="number"
min="-65500" max="65500" required> seconds (max. 18 hours)<br>
Current local time is <span class="times">unknown</span>.<h3>Clock</h3>
Clock Overlay: <select name="OL" onchange="Cs()"><option value="0" id="cn"
selected="selected">None</option><option value="1" id="ca">Analog Clock</option>
<option value="2">Single Digit Clock</option><option value="3" id="cc">
Cronixie Clock</option></select><br><div id="coc">First LED: <input name="O1"
type="number" min="0" max="255" required> Last LED: <input name="O2"
type="number" min="0" max="255" required><br><div id="cac">12h LED: <input
name="OM" type="number" min="0" max="255" required><br>Show 5min marks: <input
type="checkbox" name="O5"><br></div>Seconds (as trail): <input type="checkbox"
name="OS"><br></div><div id="ccc">Cronixie Display: <input name="CX"
maxlength="6"><br>Cronixie Backlight: <input type="checkbox" name="CB"><br>
</div>Countdown Mode: <input type="checkbox" name="CE"><br>Countdown Goal:<br>
Year: 20 <input name="CY" type="number" min="0" max="99" required> Month: <input
name="CI" type="number" min="1" max="12" required> Day: <input name="CD"
type="number" min="1" max="31" required><br>Hour: <input name="CH"
type="number" min="0" max="23" required> Minute: <input name="CM" type="number"
min="0" max="59" required> Second: <input name="CS" type="number" min="0"
max="59" required><br><h3>Advanced Macros</h3>Define API macros here:<br>1:
<input name="M1" maxlength="64"><br>2: <input name="M2" maxlength="64"><br>3:
<input name="M3" maxlength="64"><br>4: <input name="M4" maxlength="64"><br>5:
<input name="M5" maxlength="64"><br>6: <input name="M6" maxlength="64"><br>7:
<input name="M7" maxlength="64"><br>8: <input name="M8" maxlength="64"><br>9:
<input name="M9" maxlength="64"><br>10: <input name="M10" maxlength="64"><br>
11: <input name="M11" maxlength="64"><br>12: <input name="M12" maxlength="64">
<br>13: <input name="M13" maxlength="64"><br>14: <input name="M14"
maxlength="64"><br>15: <input name="M15" maxlength="64"><br>16: <input
name="M16" maxlength="64"><br><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>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 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>
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
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;
%CSS%%SCSS%</head><body onload="GetV()"><form id="form_s" name="Sf" method="post">
<div class="helpB"><button type="button" onclick="H()">?</button></div><button
type="button" onclick="B()">Back</button><button type="submit">Save & Reboot
</button><hr><h2>Security & Update setup</h2>
Lock wireless (OTA) software update: <input type="checkbox" name="NO"><br>
Passphrase: <input type="password" name="OP" maxlength="32"><br>
%CSS%%SCSS%</head><body onload="GetV()">
<form id="form_s" name="Sf" method="post"><div class="helpB"><button
type="button" onclick="H()">?</button></div><button type="button" onclick="B()">
Back</button><button type="submit">Save & Reboot</button><hr><h2>
Security & Update setup</h2>Lock wireless (OTA) software update: <input
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!
<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!

File diff suppressed because it is too large Load Diff