lba.gitea/WLED
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #921 from huksley/codegen-html

Browse Source 
Automatic UI codegeneration
This commit is contained in:
Aircoookie 2020-06-10 18:24:17 +02:00 committed by GitHub
commit 60c7ec5aca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 5028 additions and 2534 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -9,3 +9,4 @@
.DS_Store .DS_Store
.gitignore .gitignore
.clang-format .clang-format
node_modules

BIN
.vs/wled00/v15/.suo
View File

Binary file not shown.

2233
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

31
package.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "wled",
"version": "0.10.0",
"description": "Tools for WLED project",
"main": "tools/cdata.js",
"directories": {
"lib": "lib",
"test": "test"
},
"scripts": {
"build": "node tools/cdata.js",
"dev": "nodemon -e js,html,htm,css,png,jpg,gif,ico,js -w tools/ -w wled00/data/ -x node tools/cdata.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Aircoookie/WLED.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/Aircoookie/WLED/issues"
},
"homepage": "https://github.com/Aircoookie/WLED#readme",
"dependencies": {
"clean-css": "^4.2.3",
"html-minifier": "^4.0.0",
"inliner": "^1.13.1",
"nodemon": "^2.0.4",
"zlib": "^1.0.5"
}
}

392
tools/cdata.js Normal file
View File

@ -0,0 +1,392 @@
/**
* Writes compressed C arrays of data files (web interface)
* How to use it?
*
* 1) Install Node 11+ and npm
* 2) npm install
* 3) npm run build
*
* If you change data folder often, you can run it in monitoring mode (it will recompile and update *.h on every file change)
*
* > npm run dev
*
* How it works?
*
* It uses NodeJS packages to inline, minify and GZIP files. See writeHtmlGzipped and writeChunks invocations at the bottom of the page.
*/
const fs = require("fs");
const packageJson = require("../package.json");
/**
*
*/
function hexdump(buffer) {
let lines = [];
for (let i = 0; i < buffer.length; i += 16) {
let block = buffer.slice(i, i + 16); // cut buffer into blocks of 16
let hexArray = [];
for (let value of block) {
hexArray.push("0x" + value.toString(16).padStart(2, "0"));
}
let hexString = hexArray.join(", ");
let line = ` ${hexString}`;
lines.push(line);
}
return lines.join(",\n");
}
const inliner = require("inliner");
const zlib = require("zlib");
function strReplace(str, search, replacement) {
return str.split(search).join(replacement);
}
function adoptVersionAndRepo(html) {
let repoUrl = packageJson.repository ? packageJson.repository.url : undefined;
if (repoUrl) {
repoUrl = repoUrl.replace(/^git\+/, "");
repoUrl = repoUrl.replace(/\.git$/, "");
// Replace we
html = strReplace(html, "https://github.com/atuline/WLED", repoUrl);
html = strReplace(html, "https://github.com/Aircoookie/WLED", repoUrl);
}
let version = packageJson.version;
if (version) {
html = strReplace(html, "##VERSION##", version);
}
return html;
}
function writeHtmlGzipped(sourceFile, resultFile) {
console.info("Reading " + sourceFile);
new inliner(sourceFile, function (error, html) {
console.info("Inlined " + html.length + " characters");
if (error) {
console.warn(error);
throw error;
}
html = adoptVersionAndRepo(html);
zlib.gzip(html, function (error, result) {
if (error) {
console.warn(error);
throw error;
}
console.info("Compressed " + result.length + " bytes");
const array = hexdump(result);
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 = {
${array}
};
`;
console.info("Writing " + resultFile);
fs.writeFileSync(resultFile, src);
});
});
}
const CleanCSS = require("clean-css");
const MinifyHTML = require("html-minifier").minify;
function filter(str, type) {
str = adoptVersionAndRepo(str);
if (type === undefined) {
return str;
} else if (type == "css-minify") {
return new CleanCSS({}).minify(str).styles;
} else if (type == "html-minify") {
return MinifyHTML(str, {
collapseWhitespace: true,
maxLineLength: 80,
minifyCSS: true,
minifyJS: true,
continueOnParseError: false,
removeComments: true,
});
} else {
console.warn("Unknown filter: " + type);
return str;
}
}
function specToChunk(srcDir, s) {
if (s.method == "plaintext") {
const buf = fs.readFileSync(srcDir + "/" + s.file);
const str = buf.toString("ascii");
const chunk = `
// Autogenerated from ${srcDir}/${s.file}, do not edit!!
const char ${s.name}[] PROGMEM = R"${s.prepend || ""}${filter(str, s.filter)}${
s.append || ""
}";
`;
return s.mangle ? s.mangle(chunk) : chunk;
} else if (s.method == "binary") {
const buf = fs.readFileSync(srcDir + "/" + s.file);
const result = hexdump(buf);
const chunk = `
// Autogenerated from ${srcDir}/${s.file}, do not edit!!
const uint16_t ${s.name}_length = ${result.length};
const uint8_t ${s.name}[] PROGMEM = {
${result}
};
`;
return s.mangle ? s.mangle(chunk) : chunk;
} else {
console.warn("Unknown method: " + s.method);
return undefined;
}
}
function writeChunks(srcDir, specs, resultFile) {
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);
src += specToChunk(srcDir, s);
} catch (e) {
console.warn(
"Failed " + s.name + " from " + srcDir + "/" + s.file,
e.message.length > 60 ? e.message.substring(0, 60) : e.message
);
}
});
console.info("Writing " + src.length + " characters into " + resultFile);
fs.writeFileSync(resultFile, src);
}
writeHtmlGzipped("wled00/data/index.htm", "wled00/html_ui.h");
writeChunks(
"wled00/data",
[
{
file: "style.css",
name: "PAGE_settingsCss",
prepend: "=====(<style>",
append: "</style>)=====",
method: "plaintext",
filter: "css-minify",
},
{
file: "settings.htm",
name: "PAGE_settings",
prepend: "=====(",
append: ")=====",
method: "plaintext",
filter: "html-minify",
},
{
file: "settings_wifi.htm",
name: "PAGE_settings_wifi",
prepend: "=====(",
append: ")=====",
method: "plaintext",
filter: "html-minify",
mangle: (str) =>
str
.replace(/\<link rel="stylesheet".*\>/gms, "")
.replace(/\<style\>.*\<\/style\>/gms, "%CSS%%SCSS%")
.replace(
/function GetV().*\<\/script\>/gms,
"function GetV() {var d=document;\n"
),
},
{
file: "settings_leds.htm",
name: "PAGE_settings_leds",
prepend: "=====(",
append: ")=====",
method: "plaintext",
filter: "html-minify",
mangle: (str) =>
str
.replace(/\<link rel="stylesheet".*\>/gms, "")
.replace(/\<style\>.*\<\/style\>/gms, "%CSS%%SCSS%")
.replace(
/function GetV().*\<\/script\>/gms,
"function GetV() {var d=document;\n"
),
},
{
file: "settings_dmx.htm",
name: "PAGE_settings_dmx",
prepend: "=====(",
append: ")=====",
method: "plaintext",
filter: "html-minify",
mangle: (str) => {
const nocss = str
.replace(/\<link rel="stylesheet".*\>/gms, "")
.replace(/\<style\>.*\<\/style\>/gms, "%CSS%%SCSS%")
.replace(
/function GetV().*\<\/script\>/gms,
"function GetV() {var d=document;\n"
);
return `
#ifdef WLED_ENABLE_DMX
${nocss}
#else
const char PAGE_settings_dmx[] PROGMEM = R"=====()=====";
#endif
`;
},
},
{
file: "settings_ui.htm",
name: "PAGE_settings_ui",
prepend: "=====(",
append: ")=====",
method: "plaintext",
filter: "html-minify",
mangle: (str) =>
str
.replace(/\<link rel="stylesheet".*\>/gms, "")
.replace(/\<style\>.*\<\/style\>/gms, "%CSS%%SCSS%")
.replace(
/function GetV().*\<\/script\>/gms,
"function GetV() {var d=document;\n"
),
},
{
file: "settings_sync.htm",
name: "PAGE_settings_sync",
prepend: "=====(",
append: ")=====",
method: "plaintext",
filter: "html-minify",
mangle: (str) =>
str
.replace(/\<link rel="stylesheet".*\>/gms, "")
.replace(/\<style\>.*\<\/style\>/gms, "%CSS%%SCSS%")
.replace(/function GetV().*\<\/script\>/gms, "function GetV() {\n"),
},
{
file: "settings_time.htm",
name: "PAGE_settings_time",
prepend: "=====(",
append: ")=====",
method: "plaintext",
filter: "html-minify",
mangle: (str) =>
str
.replace(/\<link rel="stylesheet".*\>/gms, "")
.replace(/\<style\>.*\<\/style\>/gms, "%CSS%%SCSS%")
.replace(/function GetV().*\<\/script\>/gms, "function GetV() {\n"),
},
{
file: "settings_sec.htm",
name: "PAGE_settings_sec",
prepend: "=====(",
append: ")=====",
method: "plaintext",
filter: "html-minify",
mangle: (str) =>
str
.replace(/\<link rel="stylesheet".*\>/gms, "")
.replace(/\<style\>.*\<\/style\>/gms, "%CSS%%SCSS%")
.replace(
/function GetV().*\<\/script\>/gms,
"function GetV() {var d=document;\n"
),
},
],
"wled00/html_settings.h"
);
writeChunks(
"wled00/data",
[
{
file: "usermod.htm",
name: "PAGE_usermod",
prepend: "=====(",
append: ")=====",
method: "plaintext",
filter: "html-minify",
mangle: (str) =>
str.replace(/fetch\("http\:\/\/.*\/win/gms, 'fetch("/win'),
},
{
file: "msg.htm",
name: "PAGE_msg",
prepend: "=====(",
append: ")=====",
method: "plaintext",
filter: "html-minify",
mangle: (str) => str.replace(/\<h2\>.*\<\/body\>/gms, "<h2>%MSG%</body>"),
},
{
file: "dmxmap.htm",
name: "PAGE_dmxmap",
prepend: "=====(",
append: ")=====",
method: "plaintext",
filter: "html-minify",
mangle: (str) => `
#ifdef WLED_ENABLE_DMX
${str.replace(/function FM\(\)[ ]?\{/gms, "function FM() {%DMXVARS%\n")}
#else
const char PAGE_dmxmap[] PROGMEM = R"=====()=====";
#endif
`,
},
{
file: "update.htm",
name: "PAGE_update",
prepend: "=====(",
append: ")=====",
method: "plaintext",
filter: "html-minify",
},
{
file: "welcome.htm",
name: "PAGE_welcome",
prepend: "=====(",
append: ")=====",
method: "plaintext",
filter: "html-minify",
},
{
file: "liveview.htm",
name: "PAGE_liveview",
prepend: "=====(",
append: ")=====",
method: "plaintext",
filter: "html-minify",
},
{
file: "favicon.ico",
name: "favicon",
method: "binary",
},
],
"wled00/html_other.h"
);

28
wled00/data/dmxmap.htm Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html><head><meta content='width=device-width' name='viewport'>
<title>DMX Map</title>
<script>function B(){window.history.back()};function RS(){window.location = "/settings";}function RP(){top.location.href="/";}function FM() {
var dmxlabels = ["SET 0","RED","GREEN","BLUE","WHITE","SHUTTER","SET 255", "DISABLED"];
var dmxchans = [];
for (i=0;i<512;i++) {
dmxchans.push(7); // set all to DISABLED
}
for (i=0;i<LC;i++) {
FS = CS + (CG * i);
for (j=0;j<CN;j++) {
DA=FS+j;
dmxchans[DA-1] = CH[j];
}
}
DMXMap = "";
for (i=0;i<512;i++) {
isstart = "";
if ((i+1) % 10 == 0) {
isstart="S"
}
DMXMap += "<div class=\"anytype " + isstart + " type" + dmxchans[i] + "\">" + String(i+1) + "<br />" + dmxlabels[dmxchans[i]] + "</div>";
}
document.getElementById("map").innerHTML = DMXMap;
}</script>
<style>.anytype{border: 1px solid white; margin: 1px; float: left; width: 100px; height: 100px;}.S { margin: 0px; border: 2px solid white;} .type7{color: #888; border: 1px dotted grey;}.type6{color: #FFF;}.type4{color: #FFF; font-weight: bold; }.type3{color: #00F; font-weight: bold; }.type2{color: #0F0; font-weight: bold; }.type1{color: #F00; font-weight: bold; } .bt{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.3ch solid #333;display:inline-block;font-size:20px;margin:8px;margin-top:12px}body{font-family:Verdana,sans-serif;text-align:center;background:#222;color:#fff;line-height:200%%;margin:0}</style></head>
<body onload="FM();"><div id="map">...</div></body></html>

62
wled00/data/msg.htm
View File

@ -1,56 +1,36 @@
<!DOCTYPE html> <!DOCTYPE html>
<html><head> <html>
<head>
<meta content='width=device-width' name='viewport'> <meta content='width=device-width' name='viewport'>
<title>WLED Message</title> <title>WLED Message</title>
<script> <script>function B() { window.history.back() }; function RS() { window.location = "/settings"; } function RP() { top.location.href = "/"; }</script>
function B() {
window.history.back();
}
function RS() {
window.location = "/settings";
}
function RP() {
top.location.href="/";
}
</script>
<style> <style>
:root {
--aCol: #D9B310;
--bCol: #0B3C5D;
--cCol: #1D2731;
--dCol: #328CC1;
--sCol: #000;
--tCol: #328CC1;
--cFn: Verdana;
}
.bt { .bt {
background: var(--bCol); background: #333;
color: var(--tCol); color: #fff;
border: 0.3ch solid var(--bCol); font-family: Verdana, sans-serif;
border: .3ch solid #333;
display: inline-block; display: inline-block;
filter: drop-shadow( -5px -5px 5px var(--sCol) );
font-family: var(--cFn), sans-serif;
font-size: 20px; font-size: 20px;
margin: 8px; margin: 8px;
margin-top: 12px; margin-top: 12px
}
input[type=file] {
font-size: 16px;
} }
body { body {
font-family: var(--cFn), sans-serif; font-family: Verdana, sans-serif;
text-align: center; text-align: center;
background: var(--cCol); background: #222;
color: var(--tCol); color: #fff;
line-height: 200%; line-height: 200%%;
margin: 0; margin: 0
background-attachment: fixed;
} }
</style> </style>
</head> </head>
<body>
<h2>Sample message.</h2>
Sample detail.
</body>
</html>
<body>
<h2>Sample Message.</h2>
Sample Detail.
</body>
</html>

27
wled00/data/settings.htm
View File

@ -3,34 +3,23 @@
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>WLED Settings</title> <title>WLED Settings</title>
<style> <style>
:root {
--aCol: #D9B310;
--bCol: #0B3C5D;
--cCol: #1D2731;
--dCol: #328CC1;
--sCol: #000;
--tCol: #328CC1;
--cFn: Verdana;
}
body { body {
text-align: center; text-align: center;
background: var(--cCol); background: #222;
height: 100%; height: 100;
margin: 0; margin: 0;
background-attachment: fixed;
} }
html { html {
--h:11.55vh; --h: 11.55vh;
} }
button { button {
background: var(--bCol); background: #333;
color: var(--tCol); color: #fff;
font-family: var(--cFn), Helvetica, sans-serif; font-family: Verdana, Helvetica, sans-serif;
border: 0.3ch solid var(--bCol); border: 0.3ch solid #333;
display: inline-block; display: inline-block;
filter: drop-shadow( -5px -5px 5px var(--sCol) );
font-size: 8vmin; font-size: 8vmin;
height:var(--h); height: var(--h);
width: 95%; width: 95%;
margin-top: 2.4vh; margin-top: 2.4vh;
} }

56
wled00/data/settings_dmx.htm Normal file
View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html><head><meta name="viewport" content="width=500"><meta charset="utf-8"><title>DMX Settings</title>
<script>
function GCH(num) {
d=document;
d.getElementById('dmxchannels').innerHTML += "";
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";
}
}
function mMap(){
d=document;
numCh=document.Sf.CN.value;
numGap=document.Sf.CG.value;
if (parseInt(numCh)>parseInt(numGap)) {
d.getElementById("gapwarning").style.display="block";
} else {
d.getElementById("gapwarning").style.display="none";
}
for (i=0;i<15;i++) {
if (i>=numCh) {
d.getElementById("CH"+(i+1) + "s").style.opacity = "0.5";
d.getElementById("CH"+(i+1)).disabled = true;
} else {
d.getElementById("CH"+(i+1) + "s").style.opacity = "1";
d.getElementById("CH"+(i+1)).disabled = false;
}
}
}
function S(){GCH(15);GetV();mMap();}function H(){window.open("https://github.com/Aircoookie/WLED/wiki/DMX");}function B(){window.history.back();}
function GetV(){}
</script>
</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>Imma firin ma lazer (if it has DMX support)</h2><!-- TODO: Change to something less-meme-related //-->
Proxy Universe <input name=PU type=number min=0 max=63999 required> from E1.31 to DMX (0=disabled)<br>
<i>This will disable the LED data output to DMX configurable below</i><br><br>
<i>Number of fixtures is taken from LED config page</i><br>
Channels per fixture (15 max): <input type="number" min="1" max="15" name="CN" maxlength="2" onchange="mMap();"><br />
Start channel: <input type="number" min="1" max="512" name="CS" maxlength="2"><br />
Spacing between start channels: <input type="number" min="1" max="512" name="CG" maxlength="2" onchange="mMap();"> [ <a href="javascript:alert('if set to 10, first fixture will start at 10,\nsecond will start at 20 etc.\nRegardless of the channel count.\nMakes memorizing channel numbers easier.');">info</a> ]<br>
<div id="gapwarning" style="color: orange; display: none;">WARNING: Channel gap is lower than channels per fixture.<br />This will cause overlap.</div>
<button type="button" onclick="location.href='/dmxmap';">DMX Map</button><br>
DMX fixtures start LED: <input type="number" min="0" max="1500" name="SL">
<h3>channel functions</h3>
<div id="dmxchannels"></div>
<hr><button type="button" onclick="B()">Back</button><button type="submit">Save</button>
</form>
</body>
</html>

BIN
wled00/data/settings_leds.htm
View File

Binary file not shown.

49
wled00/data/settings_sec.htm
View File

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<meta name="viewport" content="width=500"> <meta name="viewport" content="width=500">
<meta charset="utf-8">
<title>Misc Settings</title> <title>Misc Settings</title>
<script> <script>
function H() function H()
@ -22,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()">
@ -88,7 +45,7 @@
<button type="button" onclick="U()">Manual OTA Update</button><br> <button type="button" onclick="U()">Manual OTA Update</button><br>
Enable ArduinoOTA: <input type="checkbox" name="AO"><br> Enable ArduinoOTA: <input type="checkbox" name="AO"><br>
<h3>About</h3> <h3>About</h3>
<a href="https://github.com/Aircoookie/WLED" target="_blank">WLED</a> version 0.10.0<br><br> <a href="https://github.com/Aircoookie/WLED/" target="_blank">WLED</a> version ##VERSION##<!-- Autoreplaced from package.json --><br><br>
<a href="https://github.com/Aircoookie/WLED/wiki/Contributors-&-About" target="_blank">Contributors, dependencies and special thanks</a><br> <a href="https://github.com/Aircoookie/WLED/wiki/Contributors-&-About" target="_blank">Contributors, dependencies and special thanks</a><br>
A huge thank you to everyone who helped me create WLED!<br><br> A huge thank you to everyone who helped me create WLED!<br><br>
(c) 2016-2019 Christian Schwinne <br> (c) 2016-2019 Christian Schwinne <br>

8
wled00/data/settings_sync.htm
View File

@ -1,14 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html><head><meta name="viewport" content="width=500"><meta charset="utf-8"><title>Sync Settings</title> <html><head><meta name="viewport" content="width=500"><meta charset="utf-8"><title>Sync Settings</title>
<script>var d=document; <script>var d=document;
function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#sync-settings");}function B(){window.open("/settings","_self");}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(){if (d.Sf.DI.value == 6454) {if (d.Sf.DA.value == 1) d.Sf.DA.value = 0; if (d.Sf.EU.value == 1) d.Sf.EU.value = 0;} function adj(){if (d.Sf.DI.value == 6454) {if (d.Sf.DA.value == 1) d.Sf.DA.value = 0; 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;} }
function SP(){var p = d.Sf.DI.value; d.getElementById("xp").style.display = (p > 0)?"none":"block"; if (p > 0) d.Sf.EP.value = p;} function SP(){var p = d.Sf.DI.value; d.getElementById("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; }; SP();} function SetVal(){switch(parseInt(d.Sf.EP.value)){case 5568: d.Sf.DI.value = 5568; break; case 6454: d.Sf.DI.value = 6454; break; }; SP();}
function S(){GetV();SetVal();} function S(){GetV();SetVal();}
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>
@ -25,6 +26,7 @@ Infrared remote:
<option value=4>44-key RGB</option> <option value=4>44-key RGB</option>
<option value=5>21-key RGB</option> <option value=5>21-key RGB</option>
<option value=6>6-key black</option> <option value=6>6-key black</option>
<option value=7>9-key red</option>
</select><br> </select><br>
<a href="https://github.com/Aircoookie/WLED/wiki/Infrared-Control" target="_blank">IR info</a> <a href="https://github.com/Aircoookie/WLED/wiki/Infrared-Control" target="_blank">IR info</a>
<h3>WLED Broadcast</h3> <h3>WLED Broadcast</h3>
@ -98,7 +100,7 @@ Hue Bridge IP:<br>
<input name="H3" type="number" min="0" max="255" ><br> <input name="H3" type="number" min="0" max="255" ><br>
<b>Press the pushlink button on the bridge, after that save this page!</b><br> <b>Press the pushlink button on the bridge, after that save this page!</b><br>
(when first connecting)<br> (when first connecting)<br>
Hue status: <span class="hms"> Disabled in this build </span><hr> Hue status: <span class="sip"> Disabled in this build </span><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>

63
wled00/data/settings_time.htm
View File

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<meta name="viewport" content="width=500"> <meta name="viewport" content="width=500">
<meta charset="utf-8">
<title>Time Settings</title> <title>Time Settings</title>
<script> <script>
var d=document; var d=document;
@ -76,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()">
@ -207,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="ML" 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>

57
wled00/data/settings_ui.htm
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()">

58
wled00/data/settings_wifi.htm
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,8 +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>
<button type="button" onclick="B()">Back</button><button type="submit">Save & Reboot</button> <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 & Connect</button>
</form> </form>
</body> </body>
</html> </html>

47
wled00/data/style.css Normal file
View File

@ -0,0 +1,47 @@
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: 0.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: 0.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;
}

45
wled00/data/update.htm
View File

@ -1,4 +1,43 @@
<!DOCTYPE html> <!DOCTYPE html>
<html><head><meta content='width=device-width' name='viewport'><title>WLED Message</title><script>function B(){window.history.back()}</script> <html>
<style>:root{--aCol:#D9B310;--bCol:#0B3C5D;--cCol:#1D2731;--dCol:#328CC1;--sCol:#000;--tCol:#328CC1;--cFn:Verdana;}.bt{background:var(--bCol);color:var(--tCol);font-family:var(--cFn),sans-serif;border:.3ch solid var(--bCol);display:inline-block;filter:drop-shadow(-5px -5px 5px var(--sCol));font-size:20px;margin:8px;margin-top:12px}input[type=file]{font-size:16px}body{font-family:var(--cFn),sans-serif;text-align:center;background:var(--cCol);color:var(--tCol);line-height:200%}</style></head>
<body><h2>WLED Software Update</h2>Installed version: 0.8.5-dev<br>Download the latest binary: <a href="https://github.com/Aircoookie/WLED/releases"><img src="https://img.shields.io/github/release/Aircoookie/WLED.svg?style=flat-square"></a><br><form method='POST' action='/update' enctype='multipart/form-data'><input type='file' class="bt" name='update' required><br><input type='submit' class="bt" value='Update!'></form><button type="button" class="bt" onclick="B()">Back</button></body></html> <head>
<meta content='width=device-width' name='viewport'>
<title>WLED Update</title>
<script>function B() { window.history.back() }</script>
<style>
.bt {
background: #333;
color: #fff;
font-family: Verdana, sans-serif;
border: .3ch solid #333;
display: inline-block;
font-size: 20px;
margin: 8px;
margin-top: 12px
}
input[type=file] {
font-size: 16px
}
body {
font-family: Verdana, sans-serif;
text-align: center;
background: #222;
color: #fff;
line-height: 200%
}
</style>
</head>
<body>
<h2>WLED Software Update</h2>Installed version: 0.10.0<br>Download the latest binary: <a
href="https://github.com/Aircoookie/WLED/releases"><img
src="https://img.shields.io/github/release/Aircoookie/WLED.svg?style=flat-square"></a><br>
<form method='POST' action='/update' enctype='multipart/form-data'><input type='file' class="bt" name='update'
required><br><input type='submit' class="bt" value='Update!'></form><button type="button" class="bt"
onclick="B()">Back</button>
</body>
</html>

6
wled00/data/usermod.htm Normal file
View File

@ -0,0 +1,6 @@
<!DOCTYPE html>
<html>
<body>No usermod custom web page set.</body>
</html>

241
wled00/html_other.h
View File

@ -1,133 +1,138 @@
/* /*
* Various web pages * 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!
*/ */
//USER HTML HERE (/u subpage) // Autogenerated from wled00/data/usermod.htm, do not edit!!
const char PAGE_usermod[] PROGMEM = R"=====(<!DOCTYPE html> const char PAGE_usermod[] PROGMEM = R"=====(<!DOCTYPE html><html><body>No usermod custom web page set.</body></html>)=====";
<html><body>No usermod custom web page set.</body></html>)=====";
//server message // Autogenerated from wled00/data/msg.htm, do not edit!!
const char PAGE_msg[] PROGMEM = R"=====(<!DOCTYPE html> const char PAGE_msg[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta content="width=device-width" name="viewport">
<html><head><meta content='width=device-width' name='viewport'> <title>WLED Message</title><script>
<title>WLED Message</title> function B(){window.history.back()}function RS(){window.location="/settings"}function RP(){top.location.href="/"}
<script>function B(){window.history.back()};function RS(){window.location = "/settings";}function RP(){top.location.href="/";}</script> </script><style>
<style>.bt{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.3ch solid #333;display:inline-block;font-size:20px;margin:8px;margin-top:12px}body{font-family:Verdana,sans-serif;text-align:center;background:#222;color:#fff;line-height:200%%;margin:0}</style></head> .bt{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.3ch solid #333;display:inline-block;font-size:20px;margin:8px;margin-top:12px}body{font-family:Verdana,sans-serif;text-align:center;background:#222;color:#fff;line-height:200%%;margin:0}
<body><h2>%MSG%</body></html>)====="; </style></head><body><h2>%MSG%</body></html>)=====";
//DMX channel map
const char PAGE_dmxmap[] PROGMEM = R"=====(<!DOCTYPE html>
<html><head><meta content='width=device-width' name='viewport'>
<title>DMX Map</title>
<script>function B(){window.history.back()};function RS(){window.location = "/settings";}function RP(){top.location.href="/";}function FM() {%DMXVARS%
var dmxlabels = ["SET 0","RED","GREEN","BLUE","WHITE","SHUTTER","SET 255", "DISABLED"];
var dmxchans = [];
for (i=0;i<512;i++) {
dmxchans.push(7); // set all to DISABLED
}
for (i=0;i<LC;i++) {
FS = CS + (CG * i);
for (j=0;j<CN;j++) {
DA=FS+j;
dmxchans[DA-1] = CH[j];
}
}
DMXMap = "";
for (i=0;i<512;i++) {
isstart = "";
if ((i+1) % 10 == 0) {
isstart="S"
}
DMXMap += "<div class=\"anytype " + isstart + " type" + dmxchans[i] + "\">" + String(i+1) + "<br />" + dmxlabels[dmxchans[i]] + "</div>";
}
document.getElementById("map").innerHTML = DMXMap;
}</script>
<style>.anytype{border: 1px solid white; margin: 1px; float: left; width: 100px; height: 100px;}.S { margin: 0px; border: 2px solid white;} .type7{color: #888; border: 1px dotted grey;}.type6{color: #FFF;}.type4{color: #FFF; font-weight: bold; }.type3{color: #00F; font-weight: bold; }.type2{color: #0F0; font-weight: bold; }.type1{color: #F00; font-weight: bold; } .bt{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.3ch solid #333;display:inline-block;font-size:20px;margin:8px;margin-top:12px}body{font-family:Verdana,sans-serif;text-align:center;background:#222;color:#fff;line-height:200%%;margin:0}</style></head>
<body onload="FM();"><div id="map">...</div></body></html>)=====";
//firmware update page #ifdef WLED_ENABLE_DMX
const char PAGE_update[] PROGMEM = R"=====(<!DOCTYPE html>
<html><head><meta content='width=device-width' name='viewport'><title>WLED Update</title><script>function B(){window.history.back()}</script> // Autogenerated from wled00/data/dmxmap.htm, do not edit!!
<style>.bt{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.3ch solid #333;display:inline-block;font-size:20px;margin:8px;margin-top:12px}input[type=file]{font-size:16px}body{font-family:Verdana,sans-serif;text-align:center;background:#222;color:#fff;line-height:200%}</style></head> const char PAGE_dmxmap[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta content="width=device-width" name="viewport">
<body><h2>WLED Software Update</h2>Installed version: 0.10.0<br>Download the latest binary: <a href="https://github.com/Aircoookie/WLED/releases"><img src="https://img.shields.io/github/release/Aircoookie/WLED.svg?style=flat-square"></a><br><form method='POST' action='/update' enctype='multipart/form-data'><input type='file' class="bt" name='update' required><br><input type='submit' class="bt" value='Update!'></form><button type="button" class="bt" onclick="B()">Back</button></body></html>)====="; <title>DMX Map</title><script>
function B(){window.history.back()}function RS(){window.location="/settings"}function RP(){top.location.href="/"}function FM() {%DMXVARS%
var t=["SET 0","RED","GREEN","BLUE","WHITE","SHUTTER","SET 255","DISABLED"],n=[];for(i=0;i<512;i++)n.push(7);for(i=0;i<LC;i++)for(FS=CS+CG*i,j=0;j<CN;j++)DA=FS+j,n[DA-1]=CH[j];for(DMXMap="",i=0;i<512;i++)isstart="",(i+1)%10==0&&(isstart="S"),DMXMap+='<div class="anytype '+isstart+" type"+n[i]+'">'+String(i+1)+"<br />"+t[n[i]]+"</div>";document.getElementById("map").innerHTML=DMXMap}
</script><style>
.anytype{border:1px solid #fff;margin:1px;float:left;width:100px;height:100px}.S{margin:0;border:2px solid #fff}.type7{color:#888;border:1px dotted grey}.type6{color:#fff}.type4{color:#fff;font-weight:700}.type3{color:#00f;font-weight:700}.type2{color:#0f0;font-weight:700}.type1{color:red;font-weight:700}.bt{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.3ch solid #333;display:inline-block;font-size:20px;margin:8px;margin-top:12px}body{font-family:Verdana,sans-serif;text-align:center;background:#222;color:#fff;line-height:200%%;margin:0}
</style></head><body onload="FM()"><div id="map">...</div></body></html>)=====";
//new user welcome page #else
const char PAGE_welcome[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta charset=utf-8><meta content='width=device-width' name=viewport><meta name=theme-color content=#333333><title>WLED Setup</title> <style>body{font-family:Verdana,Helvetica,sans-serif;text-align:center;background-color:#333;margin:0;color:#fff}button{outline:0;cursor:pointer}.btn{padding:8px;margin:10px;width:230px;text-transform:uppercase;font-family:helvetica;font-size:19px;background-color:#222;color:white;border:0 solid white;border-radius:5px}svg{fill:#fff}</style></head> const char PAGE_dmxmap[] PROGMEM = R"=====()=====";
<body> <svg style=position:absolute;width:0;height:0;overflow:hidden version=1.1 xmlns=http://www.w3.org/2000/svg> <defs> <symbol id=lnr-smile viewBox="0 0 1024 1024"><path d="M486.4 1024c-129.922 0-252.067-50.594-343.936-142.464s-142.464-214.014-142.464-343.936c0-129.923 50.595-252.067 142.464-343.936s214.013-142.464 343.936-142.464c129.922 0 252.067 50.595 343.936 142.464s142.464 214.014 142.464 343.936-50.594 252.067-142.464 343.936c-91.869 91.87-214.014 142.464-343.936 142.464zM486.4 102.4c-239.97 0-435.2 195.23-435.2 435.2s195.23 435.2 435.2 435.2 435.2-195.23 435.2-435.2-195.23-435.2-435.2-435.2z"></path><path d="M332.8 409.6c-42.347 0-76.8-34.453-76.8-76.8s34.453-76.8 76.8-76.8 76.8 34.453 76.8 76.8-34.453 76.8-76.8 76.8zM332.8 307.2c-14.115 0-25.6 11.485-25.6 25.6s11.485 25.6 25.6 25.6 25.6-11.485 25.6-25.6-11.485-25.6-25.6-25.6z"></path><path d="M640 409.6c-42.349 0-76.8-34.453-76.8-76.8s34.451-76.8 76.8-76.8 76.8 34.453 76.8 76.8-34.451 76.8-76.8 76.8zM640 307.2c-14.115 0-25.6 11.485-25.6 25.6s11.485 25.6 25.6 25.6 25.6-11.485 25.6-25.6-11.485-25.6-25.6-25.6z"></path><path d="M486.4 870.4c-183.506 0-332.8-149.294-332.8-332.8 0-14.139 11.462-25.6 25.6-25.6s25.6 11.461 25.6 25.6c0 155.275 126.325 281.6 281.6 281.6s281.6-126.325 281.6-281.6c0-14.139 11.461-25.6 25.6-25.6s25.6 11.461 25.6 25.6c0 183.506-149.294 332.8-332.8 332.8z"></path></symbol> </defs></svg> <br><br> #endif
<svg><use xlink:href=#lnr-smile></use></svg><h1>Welcome to WLED!</h1><h3>Thank you for installing my application!</h3> If you encounter a bug or have a question/feature suggestion, feel free to open a GitHub issue!<br><br> <b>Next steps:</b><br><br> Connect the module to your local WiFi here!<br> <button class=btn onclick="window.location.href='/settings/wifi'">WiFi settings</button><br> <i>Just trying this out in AP mode?</i><br> <button class=btn onclick="window.location.href='/sliders'">To the controls!</button></body></html>)=====";
// Autogenerated from wled00/data/update.htm, do not edit!!
//liveview const char PAGE_update[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta content="width=device-width" name="viewport">
const char PAGE_liveview[] PROGMEM = R"=====(<!DOCTYPE html> <title>WLED Update</title><script>function B(){window.history.back()}</script>
<html><head>
<meta name=viewport content="width=device-width, initial-scale=1, minimum-scale=1">
<meta charset=utf-8>
<meta name=theme-color content=#222222>
<title>WLED Live Preview</title>
<style> <style>
body {margin: 0;} .bt{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.3ch solid #333;display:inline-block;font-size:20px;margin:8px;margin-top:12px}input[type=file]{font-size:16px}body{font-family:Verdana,sans-serif;text-align:center;background:#222;color:#fff;line-height:200%}
#canv {background: black;filter: brightness(175%);width: 100%;height: 100%;position: absolute;} </style></head><body><h2>WLED Software Update</h2>Installed version: 0.10.0<br>
</style></head> Download the latest binary: <a
<body> href="https://github.com/Aircoookie/WLED/releases"><img
<div id="canv" /> src="https://img.shields.io/github/release/Aircoookie/WLED.svg?style=flat-square">
<script> </a><br><form method="POST" action="/update" enctype="multipart/form-data">
update(); <input type="file" class="bt" name="update" required><br><input type="submit"
var tmout = null; class="bt" value="Update!"></form><button type="button" class="bt"
function update() onclick="B()">Back</button></body></html>)=====";
{
if (document.hidden) {
clearTimeout(tmout);
tmout = setTimeout(update, 250);
return;
}
fetch('/json/live')
.then(res => {
if (!res.ok) {
clearTimeout(tmout);
tmout = setTimeout(update, 2500);
}
return res.json();
})
.then(json => {
var str = "linear-gradient(90deg,";
var len = json.leds.length;
for (i = 0; i < len; i++) {
var leddata = json.leds[i];
if (leddata.length > 6) leddata = leddata.substring(2);
str += "#" + leddata;
if (i < len -1) str += ","
}
str += ")";
document.getElementById("canv").style.background = str;
clearTimeout(tmout);
tmout = setTimeout(update, 40);
})
.catch(function (error) {
clearTimeout(tmout);
tmout = setTimeout(update, 2500);
})
}
</script>
</body></html>)=====";
/* // Autogenerated from wled00/data/welcome.htm, do not edit!!
* favicon const char PAGE_welcome[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta charset="utf-8"><meta
*/ content="width=device-width" name="viewport"><meta name="theme-color"
content="#333333"><title>WLED Setup</title><style>
body{font-family:Verdana,Helvetica,sans-serif;text-align:center;background-color:#333;margin:0;color:#fff}button{outline:0;cursor:pointer;padding:8px;margin:10px;width:230px;text-transform:uppercase;font-family:helvetica;font-size:19px;background-color:#222;color:#fff;border:0 solid #fff;border-radius:5px}svg{fill:#fff}
</style></head><body><svg
style="position:absolute;width:0;height:0;overflow:hidden" version="1.1"
xmlns="http://www.w3.org/2000/svg"><defs><symbol id="lnr-smile"
viewBox="0 0 1024 1024"><path
d="M486.4 1024c-129.922 0-252.067-50.594-343.936-142.464s-142.464-214.014-142.464-343.936c0-129.923 50.595-252.067 142.464-343.936s214.013-142.464 343.936-142.464c129.922 0 252.067 50.595 343.936 142.464s142.464 214.014 142.464 343.936-50.594 252.067-142.464 343.936c-91.869 91.87-214.014 142.464-343.936 142.464zM486.4 102.4c-239.97 0-435.2 195.23-435.2 435.2s195.23 435.2 435.2 435.2 435.2-195.23 435.2-435.2-195.23-435.2-435.2-435.2z">
</path><path
d="M332.8 409.6c-42.347 0-76.8-34.453-76.8-76.8s34.453-76.8 76.8-76.8 76.8 34.453 76.8 76.8-34.453 76.8-76.8 76.8zM332.8 307.2c-14.115 0-25.6 11.485-25.6 25.6s11.485 25.6 25.6 25.6 25.6-11.485 25.6-25.6-11.485-25.6-25.6-25.6z">
</path><path
d="M640 409.6c-42.349 0-76.8-34.453-76.8-76.8s34.451-76.8 76.8-76.8 76.8 34.453 76.8 76.8-34.451 76.8-76.8 76.8zM640 307.2c-14.115 0-25.6 11.485-25.6 25.6s11.485 25.6 25.6 25.6 25.6-11.485 25.6-25.6-11.485-25.6-25.6-25.6z">
</path><path
d="M486.4 870.4c-183.506 0-332.8-149.294-332.8-332.8 0-14.139 11.462-25.6 25.6-25.6s25.6 11.461 25.6 25.6c0 155.275 126.325 281.6 281.6 281.6s281.6-126.325 281.6-281.6c0-14.139 11.461-25.6 25.6-25.6s25.6 11.461 25.6 25.6c0 183.506-149.294 332.8-332.8 332.8z">
</path></symbol></defs></svg><br><br><svg><use xlink:href="#lnr-smile"></use>
</svg><h1>Welcome to WLED!</h1><h3>Thank you for installing my application!</h3>
If you encounter a bug or have a question/feature suggestion, feel free to open a GitHub issue!
<br><br><b>Next steps:</b><br><br>Connect the module to your local WiFi here!
<br><button onclick='window.location.href="/settings/wifi"'>WiFi settings
</button><br><i>Just trying this out in AP mode?</i><br><button
onclick='window.location.href="/sliders"'>To the controls!</button></body>
</html>)=====";
// Autogenerated from wled00/data/liveview.htm, do not edit!!
const char PAGE_liveview[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1"><meta
charset="utf-8"><meta name="theme-color" content="#222222"><title>
WLED Live Preview</title><style>
body{margin:0}#canv{background:#000;filter:brightness(175%);width:100%;height:100%;position:absolute}
</style></head><body><div id="canv"><script>update();
var tmout = null;
function update()
{
if (document.hidden) {
clearTimeout(tmout);
tmout = setTimeout(update, 250);
return;
}
fetch('/json/live')
.then(res => {
if (!res.ok) {
clearTimeout(tmout);
tmout = setTimeout(update, 2500);
}
return res.json();
})
.then(json => {
var str = "linear-gradient(90deg,";
var len = json.leds.length;
for (i = 0; i < len; i++) {
var leddata = json.leds[i];
if (leddata.length > 6) leddata = leddata.substring(2);
str += "#" + leddata;
if (i < len -1) str += ","
}
str += ")";
document.getElementById("canv").style.background = str;
clearTimeout(tmout);
tmout = setTimeout(update, 40);
})
.catch(function (error) {
clearTimeout(tmout);
tmout = setTimeout(update, 2500);
})
}</script></body></html>)=====";
// Autogenerated from wled00/data/favicon.ico, do not edit!!
const uint16_t favicon_length = 954;
const uint8_t favicon[] PROGMEM = { const uint8_t favicon[] PROGMEM = {
0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x10, 0x10, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x10, 0x10, 0x00, 0x00, 0x01, 0x00, 0x18, 0x00, 0x86, 0x00,
0x18, 0x00, 0x86, 0x00, 0x00, 0x00, 0x16, 0x00, 0x00, 0x00, 0x89, 0x50, 0x00, 0x00, 0x16, 0x00, 0x00, 0x00, 0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00,
0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A, 0x00, 0x00, 0x00, 0x0D, 0x49, 0x48, 0x00, 0x0d, 0x49, 0x48, 0x44, 0x52, 0x00, 0x00, 0x00, 0x10, 0x00, 0x00, 0x00, 0x10, 0x08, 0x06,
0x44, 0x52, 0x00, 0x00, 0x00, 0x10, 0x00, 0x00, 0x00, 0x10, 0x08, 0x06, 0x00, 0x00, 0x00, 0x1f, 0xf3, 0xff, 0x61, 0x00, 0x00, 0x00, 0x4d, 0x49, 0x44, 0x41, 0x54, 0x38,
0x00, 0x00, 0x00, 0x1F, 0xF3, 0xFF, 0x61, 0x00, 0x00, 0x00, 0x4D, 0x49, 0x8d, 0x63, 0xfc, 0xff, 0xff, 0x3f, 0x03, 0xb1, 0x80, 0xd1, 0x9e, 0x01, 0x43, 0x31, 0x13, 0xd1,
0x44, 0x41, 0x54, 0x38, 0x8D, 0x63, 0xFC, 0xFF, 0xFF, 0x3F, 0x03, 0xB1, 0xba, 0x71, 0x00, 0x8a, 0x0d, 0x60, 0x21, 0xa4, 0x00, 0xd9, 0xd9, 0xff, 0x0f, 0x32, 0x30, 0x52,
0x80, 0xD1, 0x9E, 0x01, 0x43, 0x31, 0x13, 0xD1, 0xBA, 0x71, 0x00, 0x8A, 0xdd, 0x05, 0xb4, 0xf1, 0x02, 0xb6, 0xd0, 0xa6, 0x99, 0x0b, 0x68, 0x1f, 0x0b, 0xd8, 0x42, 0x9e,
0x0D, 0x60, 0x21, 0xA4, 0x00, 0xD9, 0xD9, 0xFF, 0x0F, 0x32, 0x30, 0x52, 0xaa, 0x2e, 0xa0, 0xd8, 0x00, 0x46, 0x06, 0x3b, 0xcc, 0xcc, 0x40, 0xc8, 0xd9, 0x54, 0x75, 0x01,
0xDD, 0x05, 0xB4, 0xF1, 0x02, 0xB6, 0xD0, 0xA6, 0x99, 0x0B, 0x68, 0x1F, 0xe5, 0x5e, 0x20, 0x25, 0x3b, 0x63, 0x03, 0x00, 0x3e, 0xb7, 0x11, 0x5a, 0x8d, 0x1c, 0x07, 0xb4,
0x0B, 0xD8, 0x42, 0x9E, 0xAA, 0x2E, 0xA0, 0xD8, 0x00, 0x46, 0x06, 0x3B, 0x00, 0x00, 0x00, 0x00, 0x49, 0x45, 0x4e, 0x44, 0xae, 0x42, 0x60, 0x82
0xCC, 0xCC, 0x40, 0xC8, 0xD9, 0x54, 0x75, 0x01, 0xE5, 0x5E, 0x20, 0x25,
0x3B, 0x63, 0x03, 0x00, 0x3E, 0xB7, 0x11, 0x5A, 0x8D, 0x1C, 0x07, 0xB4,
0x00, 0x00, 0x00, 0x00, 0x49, 0x45, 0x4E, 0x44, 0xAE, 0x42, 0x60, 0x82
}; };

757
wled00/html_settings.h
View File

@ -1,487 +1,346 @@
/* /*
* Settings html * 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!
*/ */
//common CSS of settings pages // 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:0.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>)=====";
//settings menu
const char PAGE_settings[] PROGMEM = R"=====(<!DOCTYPE html>
<html><head><title>WLED Settings</title><style>body{text-align:center;background:#222;height:100%%;margin:0}html{--h:11.55vh}button{background:#333;color:#fff;font-family:Verdana,Helvetica,sans-serif;border:.3ch solid #333;display:inline-block;font-size:8vmin;height:var(--h);width:95%%;margin-top:2.4vh}</style>
<script>function BB(){if(window.frameElement){document.getElementById("b").style.display="none";document.documentElement.style.setProperty("--h","13.86vh")}};</script></head>
<body onload=BB()>
<form action=/><button type=submit id=b>Back</button></form>
<form action=/settings/wifi><button type=submit>WiFi Setup</button></form>
<form action=/settings/leds><button type=submit>LED Preferences</button></form>
<form action=/settings/ui><button type=submit>User Interface</button></form>%DMXMENU%
<form action=/settings/sync><button type=submit>Sync Interfaces</button></form>
<form action=/settings/time><button type=submit>Time & Macros</button></form>
<form action=/settings/sec><button type=submit>Security & Updates</button></form>
// Autogenerated from wled00/data/settings.htm, do not edit!!
const char PAGE_settings[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta http-equiv="Content-Type"
content="text/html; charset=windows-1252"><title>WLED Settings</title><style>
body{text-align:center;background:#222;height:100;margin:0}html{--h:11.55vh}button{background:#333;color:#fff;font-family:Verdana,Helvetica,sans-serif;border:.3ch solid #333;display:inline-block;font-size:8vmin;height:var(--h);width:95%;margin-top:2.4vh}
</style><script>
function BB(){window.frameElement&&(document.getElementById("b").style.display="none",document.documentElement.style.setProperty("--h","13.86vh"))}
</script></head><body onload="BB()"><form action="/"><button type="submit"
id="b">Back</button></form><form action="/settings/wifi"><button type="submit">
WiFi Setup</button></form><form action="/settings/leds"><button type="submit">
LED Preferences</button></form><form action="/settings/ui"><button
type="submit">User Interface</button></form><form action="/settings/sync">
<button type="submit">Sync Interfaces</button></form><form
action="/settings/time"><button type="submit">Time & Macros</button></form><form
action="/settings/sec"><button type="submit">Security & Updates</button></form>
</body></html>)====="; </body></html>)=====";
//wifi settings // Autogenerated from wled00/data/settings_wifi.htm, do not edit!!
const char PAGE_settings_wifi[] PROGMEM = R"=====(<!DOCTYPE html> const char PAGE_settings_wifi[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport"
<html><head><meta name="viewport" content="width=500"><meta charset="utf-8"> content="width=500"><title>WiFi Settings</title><script>
<title>WiFi Settings</title><script>function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#wifi-settings");}function B(){window.history.back();}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()"> %CSS%%SCSS%</head><body onload="GetV()">
<form id="form_s" name="Sf" method="post"> <form id="form_s" name="Sf" method="post"><div class="helpB"><button
<div class="helpB"><button type="button" onclick="H()">?</button></div> type="button" onclick="H()">?</button></div><button type="button" onclick="B()">
<button type="button" onclick="B()">Back</button><button type="submit">Save & Connect</button><hr> Back</button><button type="submit">Save & Connect</button><hr><h2>WiFi setup
<h2>WiFi setup</h2> </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">
Network name (SSID, empty to not connect): <br><input name="CS" maxlength="32"><br> <br>Network password:<br><input type="password" name="CP" maxlength="63"><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> min="0" max="255" required> . <input name="I1" type="number" min="0" max="255"
<input name="I0" type="number" min="0" max="255" required> . required> . <input name="I2" type="number" min="0" max="255" required> . <input
<input name="I1" type="number" min="0" max="255" required> . name="I3" type="number" min="0" max="255" required><br>Static gateway:<br><input
<input name="I2" type="number" min="0" max="255" required> . name="G0" type="number" min="0" max="255" required> . <input name="G1"
<input name="I3" type="number" min="0" max="255" required><br> type="number" min="0" max="255" required> . <input name="G2" type="number"
Static gateway:<br> min="0" max="255" required> . <input name="G3" type="number" min="0" max="255"
<input name="G0" type="number" min="0" max="255" required> . required><br>Static subnet mask:<br><input name="S0" type="number" min="0"
<input name="G1" type="number" min="0" max="255" required> . max="255" required> . <input name="S1" type="number" min="0" max="255" required>
<input name="G2" type="number" min="0" max="255" required> . . <input name="S2" type="number" min="0" max="255" required> . <input
<input name="G3" type="number" min="0" max="255" required><br> name="S3" type="number" min="0" max="255" required><br>
Static subnet mask:<br> mDNS address (leave empty for no mDNS):<br>http:// <input name="CM"
<input name="S0" type="number" min="0" max="255" required> . maxlength="32"> .local<br>Client IP: <span class="sip">Not connected</span><br>
<input name="S1" type="number" min="0" max="255" required> . <h3>Configure Access Point</h3>AP SSID (leave empty for no AP):<br><input
<input name="S2" type="number" min="0" max="255" required> . name="AS" maxlength="32"><br>Hide AP name: <input type="checkbox" name="AH"><br>
<input name="S3" type="number" min="0" max="255" required><br> AP password (leave empty for open):<br><input type="password" name="AP"
mDNS address (leave empty for no mDNS):<br/> maxlength="63"><br>Access Point WiFi channel: <input name="AC" type="number"
http:// <input name="CM" maxlength="32"> .local<br> min="1" max="13" required><br>AP opens: <select name="AB"><option value="0">
Client IP: <span class="sip"> Not connected </span><br> No connection after boot</option><option value="1">Disconnected</option><option
<h3>Configure Access Point</h3> value="2">Always</option><option value="3">Never (not recommended)</option>
AP name (SSID):<br><input name="AS" maxlength="32"><br> </select><br>AP IP: <span class="sip">Not active</span><br><h3>Experimental</h3>
Hide AP name: <input type="checkbox" name="AH"><br> Disable WiFi sleep: <input type="checkbox" name="WS"><br><i>
AP password (leave empty for open):<br> <input type="password" name="AP" maxlength="63"><br> Can help with connectivity issues.<br>
Access Point WiFi channel: <input name="AC" type="number" min="1" max="13" required><br> Do not enable if WiFi is working correctly, increases power consumption.</i><hr>
AP opens: <button type="button" onclick="B()">Back</button><button type="submit">
<select name="AB"> Save & Connect</button></form></body></html>)=====";
<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><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 & Connect</button>
</form>
</body>
</html>)=====";
//LED settings // Autogenerated from wled00/data/settings_leds.htm, do not edit!!
const char PAGE_settings_leds[] PROGMEM = R"=====(<!DOCTYPE html> const char PAGE_settings_leds[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport"
<html><head> content="width=500"><title>LED Settings</title><script>
<meta charset=utf-8> 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;
<meta name=viewport content="width=500"> %CSS%%SCSS%</head><body onload="S()"><form
<title>LED Settings</title> id="form_s" name="Sf" method="post"><div class="helpB"><button type="button"
<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()} onclick="H()">?</button></div><button type="button" onclick="B()">Back</button>
function enABL(){var a=d.getElementById("able").checked;d.Sf.LA.value=(a)?laprev:0;d.getElementById("abl").style.display=(a)?"inline":"none";d.getElementById("psu2").style.display=(a)?"inline":"none";if(d.Sf.LA.value>0){setABL()}}function enLA(){var a=d.Sf.LAsel.value;d.Sf.LA.value=a;d.getElementById("LAdis").style.display=(a==50)?"inline":"none";UI()}function setABL(){d.getElementById("able").checked=true;d.Sf.LAsel.value=50;switch(parseInt(d.Sf.LA.value)){case 0:d.getElementById("able").checked=false;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 b=d.querySelectorAll(".wc"),a=b.length;for(i=0;i<a;i++){b[i].style.display=(d.getElementById("rgbw").checked)?"inline":"none"}d.getElementById("ledwarning").style.display=(d.Sf.LC.value>1000)?"inline":"none";d.getElementById("ampwarning").style.display=(d.Sf.MA.value>7200)?"inline":"none";if(d.Sf.LA.value==255){laprev=12} else if(d.Sf.LA.value>0){laprev=d.Sf.LA.value}var j=Math.ceil((100+d.Sf.LC.value*laprev)/500)/2;j=(j>5)?Math.ceil(j):j;var g="";var e=(d.Sf.LAsel.value==30);var i=(d.Sf.LAsel.value==255);if(j<1.02&&!e&&!i){g="ESP 5V pin with 1A USB supply"}else{g+=e?"12V ":i?"WS2815 12V ":"5V ";g+=j;g+="A supply connected to LEDs"}var h=Math.ceil((100+d.Sf.LC.value*laprev)/1500)/2;h=(h>5)?Math.ceil(h):h;var c="(for most effects, ~";c+=h;c+="A is enough)<br>";d.getElementById("psu").innerHTML=g;d.getElementById("psu2").innerHTML=i?"":c}function GetV(){var d=document; <button type="submit">Save</button><hr><h2>LED setup</h2>LED count: <input
%CSS%%SCSS%</head><body onload=S()> name="LC" type="number" min="1" max="1500" oninput="UI()" required><br><div
<form id=form_s name=Sf method=post> id="ledwarning" style="color:orange;display:none">
<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> &#9888; You might run into stability or lag issues.<br>
Use less than 1000 LEDs per ESP for the best experience!<br> Use less than 1000 LEDs per ESP for the best experience!<br></div><i>
</div> Recommended power supply for brightest white:</i><br><b><span id="psu">?</span>
<i>Recommended power supply for brightest white:</i><br> </b><br><span id="psu2"><br></span><br>Enable automatic brightness limiter:
<b><span id=psu>?</span></b><br> <input type="checkbox" name="ABen" onchange="enABL()" id="able"><br><div
<span id=psu2><br></span> id="abl">Maximum Current: <input name="MA" type="number" min="250" max="65000"
<br> oninput="UI()" required> mA<br><div id="ampwarning"
Enable automatic brightness limiter: <input type=checkbox name=ABen onchange=enABL() id=able><br> style="color:orange;display:none">
<div id=abl>
Maximum Current: <input name=MA type=number min=250 max=65000 oninput=UI() required> mA<br>
<div id=ampwarning style=color:orange;display:none>
&#9888; Your power supply provides high current.<br> &#9888; Your power supply provides high current.<br>
To improve the safety of your setup,<br> To improve the safety of your setup,<br>please use thick cables,<br>
please use thick cables,<br> multiple power injection points and a fuse!<br></div><i>
multiple power injection points and a fuse!<br> Automatically limits brightness to stay close to the limit.<br>
</div>
<i>Automatically limits brightness to stay close to the limit.<br>
Keep at &lt;1A if powering LEDs directly from the ESP 5V pin!<br> Keep at &lt;1A if powering LEDs directly from the ESP 5V pin!<br>
If you are using an external power supply, enter its rating.<br> If you are using an external power supply, enter its rating.<br>
(Current estimated usage: <span class=pow>unknown</span>)</i><br><br> (Current estimated usage: <span class="pow">unknown</span>)</i><br><br>
LED voltage (Max. current for a single LED):<br> LED voltage (Max. current for a single LED):<br><select name="LAsel"
<select name=LAsel onchange=enLA()> onchange="enLA()"><option value="55" selected="selected">5V default (55mA)
<option value=55 selected>5V default (55mA)</option> </option><option value="35">5V efficient (35mA)</option><option value="30">
<option value=35>5V efficient (35mA)</option> 12V (30mA)</option><option value="255">WS2815 (12mA)</option><option value="50">
<option value=30>12V (30mA)</option> Custom</option></select><br><span id="LAdis" style="display:none">
<option value=255>WS2815 (12mA)</option> Custom max. current per LED: <input name="LA" type="number" min="0" max="255"
<option value=50>Custom</option> id="la" oninput="UI()" required> mA<br></span><i>
</select><br> Keep at default if you are unsure about your type of LEDs.</i><br></div><br>
<span id=LAdis style=display:none>Custom max. current per LED: <input name=LA type=number min=0 max=255 id=la oninput=UI() required> mA<br></span> LEDs are 4-channel type (RGBW): <input type="checkbox" name="EW"
<i>Keep at default if you are unsure about your type of LEDs.</i><br> onchange="UI()" id="rgbw"><br><span class="wc">
</div> Auto-calculate white channel from RGB: <input type="checkbox" name="AW"><br>
<br> </span>Color order: <select name="CO"><option value="0">GRB</option><option
LEDs are 4-channel type (RGBW): <input type=checkbox name=EW onchange=UI() id=rgbw><br> value="1">RGB</option><option value="2">BRG</option><option value="3">RBG
<span class=wc> </option><option value="4">BGR</option><option value="5">GBR</option></select>
Auto-calculate white channel from RGB:<br> <h3>Defaults</h3>Turn LEDs on after power up/reset: <input type="checkbox"
<select name=AW> name="BO"><br>Default brightness: <input name="CA" type="number" min="0"
<option value=0>None</option> max="255" required> (0-255)<br><br>Apply preset <input name="BP" type="number"
<option value=1>Brighter</option> min="0" max="16" required> at boot (0 uses defaults)<br>- <i>or</i> -<br>
<option value=2>Accurate</option> Set current preset cycle setting as boot default: <input type="checkbox"
<option value=3>Dual</option> name="PC"><br><br>Use Gamma correction for color: <input type="checkbox"
<option value=4>Legacy</option> name="GC"> (strongly recommended)<br>Use Gamma correction for brightness: <input
</select> type="checkbox" name="GB"> (not recommended)<br><br>Brightness factor: <input
<br></span> name="BF" type="number" min="1" max="255" required> %<h3>Transitions</h3>
Color order: Crossfade: <input type="checkbox" name="TF"><br>Transition Time: <input
<select name=CO> name="TD" maxlength="5" size="2"> ms<br>Enable Palette transitions: <input
<option value=0>GRB</option> type="checkbox" name="PF"><h3>Timed light</h3>Default Duration: <input
<option value=1>RGB</option> name="TL" type="number" min="1" max="255" required> min<br>
<option value=2>BRG</option> Default Target brightness: <input name="TB" type="number" min="0" max="255"
<option value=3>RBG</option> required><br>Fade down: <input type="checkbox" name="TW"><br><h3>Advanced</h3>
<option value=4>BGR</option> Palette blending: <select name="PB"><option value="0">Linear (wrap if moving)
<option value=5>GBR</option> </option><option value="1">Linear (always wrap)</option><option value="2">
</select> Linear (never wrap)</option><option value="3">None (not recommended)</option>
<h3>Defaults</h3> </select><br>Reverse LED order (rotate 180): <input type="checkbox" name="RV">
Turn LEDs on after power up/reset: <input type=checkbox name=BO><br> <br>Skip first LED: <input type="checkbox" name="SL"><hr><button type="button"
Default brightness: <input name=CA type=number min=0 max=255 required> (0-255)<br><br> onclick="B()">Back</button><button type="submit">Save</button></form></body>
Apply preset <input name=BP type=number min=0 max=16 required> at boot (0 uses defaults) </html>)=====";
<br>- <i>or</i> -<br>
Set current preset cycle setting as boot default: <input type=checkbox name=PC><br><br>
Use Gamma correction for color: <input type=checkbox name=GC> (strongly recommended)<br>
Use Gamma correction for brightness: <input type=checkbox name=GB> (not recommended)<br><br>
Brightness factor: <input name=BF type=number min=1 max=255 required> %
<h3>Transitions</h3>
Crossfade: <input type=checkbox name=TF><br>
Transition Time: <input name=TD maxlength=5 size=2> ms<br>
Enable Palette transitions: <input type=checkbox name=PF>
<h3>Timed light</h3>
Default Duration: <input name=TL type=number min=1 max=255 required> min<br>
Default Target brightness: <input name=TB type=number min=0 max=255 required><br>
Fade down: <input type=checkbox name=TW><br>
<h3>Advanced</h3>
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><hr>
<button type=button onclick=B()>Back</button><button type=submit>Save</button>
</form></body></html>)=====";
#ifdef WLED_ENABLE_DMX #ifdef WLED_ENABLE_DMX
//DMX Output settings
const char PAGE_settings_dmx[] PROGMEM = R"=====(<!DOCTYPE html>
<html><head><meta name="viewport" content="width=500"><meta charset="utf-8"><title>DMX Settings</title><script>
function GCH(num) {
d=document;
d.getElementById('dmxchannels').innerHTML += ""; // Autogenerated from wled00/data/settings_dmx.htm, do not edit!!
for (i=0;i<num;i++) { const char PAGE_settings_dmx[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta name="viewport" content="width=500"><meta
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"; charset="utf-8"><title>DMX Settings</title><script>
} function GCH(n){for(d=document,d.getElementById("dmxchannels").innerHTML+="",i=0;i<n;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'}function mMap(){for(d=document,numCh=document.Sf.CN.value,numGap=document.Sf.CG.value,parseInt(numCh)>parseInt(numGap)?d.getElementById("gapwarning").style.display="block":d.getElementById("gapwarning").style.display="none",i=0;i<15;i++)i>=numCh?(d.getElementById("CH"+(i+1)+"s").style.opacity="0.5",d.getElementById("CH"+(i+1)).disabled=!0):(d.getElementById("CH"+(i+1)+"s").style.opacity="1",d.getElementById("CH"+(i+1)).disabled=!1)}function S(){GCH(15),GetV(),mMap()}function H(){window.open("https://github.com/Aircoookie/WLED/wiki/DMX")}function B(){window.history.back()}function GetV() {var d=document;
} </head><body onload="S()"><form id="form_s" name="Sf" method="post">
function mMap(){ <div class="helpB"><button type="button" onclick="H()">?</button></div><button
d=document; type="button" onclick="B()">Back</button><button type="submit">Save</button><hr>
numCh=document.Sf.CN.value; <h2>Imma firin ma lazer (if it has DMX support)</h2>Proxy Universe <input
numGap=document.Sf.CG.value; name="PU" type="number" min="0" max="63999" required>
if (parseInt(numCh)>parseInt(numGap)) { from E1.31 to DMX (0=disabled)<br><i>
d.getElementById("gapwarning").style.display="block"; This will disable the LED data output to DMX configurable below</i><br><br><i>
} else { Number of fixtures is taken from LED config page</i><br>
d.getElementById("gapwarning").style.display="none"; Channels per fixture (15 max): <input type="number" min="1" max="15" name="CN"
} maxlength="2" onchange="mMap()"><br>Start channel: <input type="number" min="1"
for (i=0;i<15;i++) { max="512" name="CS" maxlength="2"><br>Spacing between start channels: <input
if (i>=numCh) { type="number" min="1" max="512" name="CG" maxlength="2" onchange="mMap()"> [ <a
d.getElementById("CH"+(i+1) + "s").style.opacity = "0.5"; href="javascript:alert('if set to 10, first fixture will start at 10,\nsecond will start at 20 etc.\nRegardless of the channel count.\nMakes memorizing channel numbers easier.');">
d.getElementById("CH"+(i+1)).disabled = true; info</a> ]<br><div id="gapwarning" style="color:orange;display:none">
WARNING: Channel gap is lower than channels per fixture.<br>
This will cause overlap.</div><button type="button"
onclick='location.href="/dmxmap"'>DMX Map</button><br>DMX fixtures start LED:
<input type="number" min="0" max="1500" name="SL"><h3>channel functions</h3><div
id="dmxchannels"></div><hr><button type="button" onclick="B()">Back</button>
<button type="submit">Save</button></form></body></html>)=====";
} else {
d.getElementById("CH"+(i+1) + "s").style.opacity = "1";
d.getElementById("CH"+(i+1)).disabled = false;
}
}
}
function S(){GCH(15);GetV();mMap();}function H(){window.open("https://github.com/Aircoookie/WLED/wiki/DMX");}function B(){window.history.back();}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>Imma firin ma lazer (if it has DMX support)</h2><!-- TODO: Change to something less-meme-related //-->
Proxy Universe <input name=PU type=number min=0 max=63999 required> from E1.31 to DMX (0=disabled)<br>
<i>This will disable the LED data output to DMX configurable below</i><br><br>
<i>Number of fixtures is taken from LED config page</i><br>
Channels per fixture (15 max): <input type="number" min="1" max="15" name="CN" maxlength="2" onchange="mMap();"><br />
Start channel: <input type="number" min="1" max="512" name="CS" maxlength="2"><br />
Spacing between start channels: <input type="number" min="1" max="512" name="CG" maxlength="2" onchange="mMap();"> [ <a href="javascript:alert('if set to 10, first fixture will start at 10,\nsecond will start at 20 etc.\nRegardless of the channel count.\nMakes memorizing channel numbers easier.');">info</a> ]<br>
<div id="gapwarning" style="color: orange; display: none;">WARNING: Channel gap is lower than channels per fixture.<br />This will cause overlap.</div>
<button type="button" onclick="location.href='/dmxmap';">DMX Map</button><br>
DMX fixtures start LED: <input type="number" min="0" max="1500" name="SL">
<h3>channel functions</h3>
<div id="dmxchannels"></div>
<hr><button type="button" onclick="B()">Back</button><button type="submit">Save</button>
</form>
</body>
</html>)=====";
#else #else
const char PAGE_settings_dmx[] PROGMEM = R"=====()====="; const char PAGE_settings_dmx[] PROGMEM = R"=====()=====";
#endif #endif
//User Interface settings // Autogenerated from wled00/data/settings_ui.htm, do not edit!!
const char PAGE_settings_ui[] PROGMEM = R"=====(<!DOCTYPE html> const char PAGE_settings_ui[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport"
<html><head><meta name="viewport" content="width=500"><meta charset="utf-8"><title>UI Settings</title><script> content="width=500"><title>UI Settings</title><script>
function gId(s){return document.getElementById(s);}function S(){GetV();Ct();}function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#user-interface-settings");}function B(){window.history.back();}function Ct(){if (gId("co").selected){gId("cth").style.display="block";}else{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> %CSS%%SCSS%</head><body onload="S()"><form
<body onload="S()"> id="form_s" name="Sf" method="post"><div class="helpB"><button type="button"
<form id="form_s" name="Sf" method="post"> onclick="H()">?</button></div><button type="button" onclick="B()">Back</button>
<div class="helpB"><button type="button" onclick="H()">?</button></div> <button type="submit">Save</button><hr><h2>Web Setup</h2>Server description:
<button type="button" onclick="B()">Back</button><button type="submit">Save</button><hr> <input name="DS" maxlength="32"><br>Sync button toggles both send and receive:
<h2>Web Setup</h2> <input type="checkbox" name="ST"><br><br><hr><button type="button"
Server description: <input name="DS" maxlength="32"><br> onclick="B()">Back</button><button type="submit">Save</button></form></body>
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>)====="; </html>)=====";
// Autogenerated from wled00/data/settings_sync.htm, do not edit!!
//sync settings 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> charset="utf-8"><title>Sync Settings</title><script>
<html><head><meta name=viewport content="width=500"><meta charset=utf-8><title>Sync Settings</title> 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() {
<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(){if(d.Sf.DI.value==6454){if(d.Sf.DA.value==1){d.Sf.DA.value=0}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}}}}function SP(){var a=d.Sf.DI.value;d.getElementById("xp").style.display=(a>0)?"none":"block";if(a>0){d.Sf.EP.value=a}}function SetVal(){switch(parseInt(d.Sf.EP.value)){case 5568:d.Sf.DI.value=5568;break;case 6454:d.Sf.DI.value=6454;break}SP()}function S(){GetV();SetVal()};function GetV(){ %CSS%%SCSS%</head><body onload="S()"><form
%CSS%%SCSS%</head> id="form_s" name="Sf" method="post"><div class="helpB"><button type="button"
<body onload=S()> onclick="H()">?</button></div><button type="button" onclick="B()">Back</button>
<form id=form_s name=Sf method=post> <button type="submit">Save</button><hr><h2>Sync setup</h2><h3>Button setup</h3>
<div class=helpB><button type=button onclick=H()>?</button></div> On/Off button enabled: <input type="checkbox" name="BT"><br>Infrared remote:
<button type=button onclick=B()>Back</button><button type=submit>Save</button><hr> <select name="IR"><option value="0">Disabled</option><option value="1">
<h2>Sync setup</h2> 24-key RGB</option><option value="2">24-key with CT</option><option value="3">
<h3>Button setup</h3> 40-key blue</option><option value="4">44-key RGB</option><option value="5">
On/Off button enabled: <input type=checkbox name=BT><br> 21-key RGB</option><option value="6">6-key black</option><option value="7">
Infrared remote: 9-key red</option></select><br><a
<select name=IR> href="https://github.com/Aircoookie/WLED/wiki/Infrared-Control" target="_blank">
<option value=0>Disabled</option> IR info</a><h3>WLED Broadcast</h3>UDP Port: <input name="UP" type="number"
<option value=1>24-key RGB</option> min="1" max="65535" class="d5" required><br>Receive <input type="checkbox"
<option value=2>24-key with CT</option> name="RB">Brightness, <input type="checkbox" name="RC">Color, and <input
<option value=3>40-key blue</option> type="checkbox" name="RX">Effects<br>Send notifications on direct change: <input
<option value=4>44-key RGB</option> type="checkbox" name="SD"><br>Send notifications on button press: <input
<option value=5>21-key RGB</option> type="checkbox" name="SB"><br>Send Alexa notifications: <input type="checkbox"
<option value=6>6-key black</option> name="SA"><br>Send Philips Hue change notifications: <input type="checkbox"
<option value=7>9-key red</option> name="SH"><br>Send Macro notifications: <input type="checkbox" name="SM"><br>
</select><br> Send notifications twice: <input type="checkbox" name="S2"><h3>Realtime</h3>
<a href=https://github.com/Aircoookie/WLED/wiki/Infrared-Control target=_blank>IR info</a> Receive UDP realtime: <input type="checkbox" name="RD"><br><br><i>
<h3>WLED Broadcast</h3> Network DMX input</i><br>Type: <select name="DI" onchange="SP(),adj()"><option
UDP Port: <input name=UP type=number min=1 max=65535 class=d5 required><br> value="5568">E1.31 (sACN)</option><option value="6454">Art-Net</option><option
Receive <input type=checkbox name=RB>Brightness, <input type=checkbox name=RC>Color, and <input type=checkbox name=RX>Effects<br> value="0" selected="selected">Custom port</option></select><br><div id="xp">
Send notifications on direct change: <input type=checkbox name=SD><br> Port: <input name="EP" type="number" min="1" max="65535" value="5568"
Send notifications on button press: <input type=checkbox name=SB><br> class="d5" required><br></div>Multicast: <input type="checkbox" name="EM"><br>
Send Alexa notifications: <input type=checkbox name=SA><br> Start universe: <input name="EU" type="number" min="0" max="63999" required><br>
Send Philips Hue change notifications: <input type=checkbox name=SH><br> <i>Reboot required.</i> Check out <a href="https://github.com/ahodges9/LedFx"
Send Macro notifications: <input type=checkbox name=SM><br> target="_blank">LedFx</a>!<br>Skip out-of-sequence packets: <input
Send notifications twice: <input type=checkbox name=S2> type="checkbox" name="ES"><br>DMX start address: <input name="DA" type="number"
<h3>Realtime</h3> min="0" max="510" required><br>DMX mode: <select name="DM"><option value="0">
Receive UDP realtime: <input type=checkbox name=RD><br><br> Disabled</option><option value="1">Single RGB</option><option value="2">
<i>Network DMX input</i><br> Single DRGB</option><option value="3">Effect</option><option value="4">Multi RGB
Type: </option><option value="5">Multi DRGB</option></select><br><a
<select name=DI onchange=SP();adj()> href="https://github.com/Aircoookie/WLED/wiki/E1.31-DMX" target="_blank">
<option value=5568>E1.31 (sACN)</option> E1.31 info</a><br>Timeout: <input name="ET" type="number" min="1" max="65000"
<option value=6454>Art-Net</option> required> ms<br>Force max brightness: <input type="checkbox" name="FB"><br>
<option value=0 selected>Custom port</option> Disable realtime gamma correction: <input type="checkbox" name="RG"><br>
</select><br> Realtime LED offset: <input name="WO" type="number" min="-255" max="255"
<div id=xp>Port: <input name=EP type=number min=1 max=65535 value=5568 class=d5 required><br></div> required><h3>Alexa Voice Assistant</h3>Emulate Alexa device: <input
Multicast: <input type=checkbox name=EM><br> type="checkbox" name="AL"><br>Alexa invocation name: <input name="AI"
Start universe: <input name=EU type=number min=0 max=63999 required><br> maxlength="32"><h3>Blynk</h3><b>
<i>Reboot required.</i> Check out <a href=https://github.com/ahodges9/LedFx target=_blank>LedFx</a>!<br> Blynk, MQTT and Hue sync all connect to external hosts!<br>
Skip out-of-sequence packets: <input type=checkbox name=ES><br>
DMX start address: <input name=DA type=number min=0 max=510 required><br>
DMX mode:
<select name=DM>
<option value=0>Disabled</option>
<option value=1>Single RGB</option>
<option value=2>Single DRGB</option>
<option value=3>Effect</option>
<option value=4>Multi RGB</option>
<option value=5>Multi DRGB</option>
</select><br>
<a href=https://github.com/Aircoookie/WLED/wiki/E1.31-DMX target=_blank>E1.31 info</a><br>
Timeout: <input name=ET type=number min=1 max=65000 required> ms<br>
Force max brightness: <input type=checkbox name=FB><br>
Disable realtime gamma correction: <input type=checkbox name=RG><br>
Realtime LED offset: <input name=WO type=number min=-255 max=255 required>
<h3>Alexa Voice Assistant</h3>
Emulate Alexa device: <input type=checkbox name=AL><br>
Alexa invocation name: <input name=AI maxlength=32>
<h3>Blynk</h3>
<b>Blynk, MQTT and Hue sync all connect to external hosts!<br>
This may impact the responsiveness of the ESP8266.</b><br> This may impact the responsiveness of the ESP8266.</b><br>
For best results, only use one of these services at a time.<br> For best results, only use one of these services at a time.<br>
(alternatively, connect a second ESP to them and use the UDP sync)<br><br> (alternatively, connect a second ESP to them and use the UDP sync)<br><br>
Device Auth token: <input name=BK maxlength=33><br> Device Auth token: <input name="BK" maxlength="33"><br><i>
<i>Clear the token field to disable. </i><a href=https://github.com/Aircoookie/WLED/wiki/Blynk target=_blank>Setup info</a> Clear the token field to disable. </i><a
<h3>MQTT</h3> href="https://github.com/Aircoookie/WLED/wiki/Blynk" target="_blank">Setup info
Enable MQTT: <input type=checkbox name=MQ><br> </a><h3>MQTT</h3>Enable MQTT: <input type="checkbox" name="MQ"><br>Broker:
Broker: <input name=MS maxlength=32> <input name="MS" maxlength="32"> Port: <input name="MQPORT" type="number"
Port: <input name=MQPORT type=number min=1 max=65535 class=d5><br> min="1" max="65535" class="d5"><br><b>
<b>The MQTT credentials are sent over an unsecured connection.<br> The MQTT credentials are sent over an unsecured connection.<br>
Never use the MQTT password for another service!</b><br> Never use the MQTT password for another service!</b><br>Username: <input
Username: <input name=MQUSER maxlength=40><br> name="MQUSER" maxlength="40"><br>Password: <input type="password" input
Password: <input type=password input name=MQPASS maxlength=40><br> name="MQPASS" maxlength="40"><br>Client ID: <input name="MQCID" maxlength="40">
Client ID: <input name=MQCID maxlength=40><br> <br>Device Topic: <input name="MD" maxlength="32"><br>Group Topic: <input
Device Topic: <input name=MD maxlength=32><br> name="MG" maxlength="32"><br><i>Reboot required to apply changes. </i><a
Group Topic: <input name=MG maxlength=32><br> href="https://github.com/Aircoookie/WLED/wiki/MQTT" target="_blank">MQTT info
<i>Reboot required to apply changes. </i><a href=https://github.com/Aircoookie/WLED/wiki/MQTT target=_blank>MQTT info</a> </a><h3>Philips Hue</h3><i>
<h3>Philips Hue</h3> You can find the bridge IP and the light number in the 'About' section of the hue app.
<i>You can find the bridge IP and the light number in the 'About' section of the hue app.</i><br> </i><br>Poll Hue light <input name="HL" type="number" min="1" max="99"> every
Poll Hue light <input name=HL type=number min=1 max=99> every <input name=HI type=number min=100 max=65000> ms: <input type=checkbox name=HP><br> <input name="HI" type="number" min="100" max="65000"> ms: <input
Then, receive <input type=checkbox name=HO> On/Off, <input type=checkbox name=HB> Brightness, and <input type=checkbox name=HC> Color<br> type="checkbox" name="HP"><br>Then, receive <input type="checkbox" name="HO">
Hue Bridge IP:<br> On/Off, <input type="checkbox" name="HB"> Brightness, and <input
<input name=H0 type=number min=0 max=255> . type="checkbox" name="HC"> Color<br>Hue Bridge IP:<br><input name="H0"
<input name=H1 type=number min=0 max=255> . type="number" min="0" max="255"> . <input name="H1" type="number" min="0"
<input name=H2 type=number min=0 max=255> . max="255"> . <input name="H2" type="number" min="0" max="255"> . <input
<input name=H3 type=number min=0 max=255><br> name="H3" type="number" min="0" max="255"><br><b>
<b>Press the pushlink button on the bridge, after that save this page!</b><br> Press the pushlink button on the bridge, after that save this page!</b><br>
(when first connecting)<br> (when first connecting)<br>Hue status: <span class="sip">Disabled in this build
Hue status: <span class=sip> Disabled in this build </span><hr> </span><hr><button type="button" onclick="B()">Back</button><button
<button type=button onclick=B()>Back</button><button type=submit>Save</button> type="submit">Save</button></form></body></html>)=====";
</form>
</body></html>)=====";
//time and macro settings // Autogenerated from wled00/data/settings_time.htm, do not edit!!
const char PAGE_settings_time[] PROGMEM = R"=====(<!DOCTYPE html> const char PAGE_settings_time[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta name="viewport" content="width=500"><meta
<html><head><meta name="viewport" content="width=500"><meta charset="utf-8"><title>Time Settings</title> charset="utf-8"><title>Time Settings</title><script>
<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(s){return d.getElementById(s);}function Cs(){gId("cac").style.display="none";gId("coc").style.display="block";gId("ccc").style.display="none";if (gId("ca").selected){gId("cac").style.display="block";}if (gId("cc").selected){gId("coc").style.display="none";gId("ccc").style.display="block";}if (gId("cn").selected){gId("coc").style.display="none";}} 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() {
function BTa(){var ih="<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++){ih+="<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>";for (j=1;j<8;j++) ih+="<td><input id=\"W"+i+j+"\" type=\"checkbox\"></td>";}gId("TMT").innerHTML=ih;} %CSS%%SCSS%</head><body onload="S()"><form
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;}} id="form_s" name="Sf" method="post" onsubmit="Wd()"><div class="helpB"><button
function Wd(){a=[0,0,0,0,0,0,0,0];for(i=0;i<8;i++){m=1;for(j=0;j<8;j++){a[i]+=gId("W"+i+j).checked*m;m*=2;}gId("W"+i).value=a[i];}}function GetV(){ type="button" onclick="H()">?</button></div><button type="button" onclick="B()">
%CSS%%SCSS%</head> Back</button><button type="submit">Save</button><hr><h2>Time setup</h2>
<body onload="S()"> Get time from NTP server: <input type="checkbox" name="NT"><br><input name="NS"
<form id="form_s" name="Sf" method="post" onsubmit="Wd()"> maxlength="32"><br>Use 24h format: <input type="checkbox" name="CF"><br>
<div class="helpB"><button type="button" onclick="H()">?</button></div> Time zone: <select name="TZ"><option value="0" selected="selected">GMT(UTC)
<button type="button" onclick="B()">Back</button><button type="submit">Save</button><hr> </option><option value="1">GMT/BST</option><option value="2">CET/CEST</option>
<h2>Time setup</h2> <option value="3">EET/EEST</option><option value="4">US-EST/EDT</option><option
Get time from NTP server: <input type="checkbox" name="NT"><br> value="5">US-CST/CDT</option><option value="6">US-MST/MDT</option><option
<input name="NS" maxlength="32"><br> value="7">US-AZ</option><option value="8">US-PST/PDT</option><option value="9">
Use 24h format: <input type="checkbox" name="CF"><br> CST(AWST)</option><option value="10">JST(KST)</option><option value="11">
Time zone: AEST/AEDT</option><option value="12">NZST/NZDT</option><option value="13">
<select name="TZ"> North Korea</option></select><br>UTC offset: <input name="UO" type="number"
<option value="0" selected>GMT(UTC)</option> min="-65500" max="65500" required> seconds (max. 18 hours)<br>
<option value="1">GMT/BST</option> Current local time is <span class="times">unknown</span>.<h3>Clock</h3>
<option value="2">CET/CEST</option> Clock Overlay: <select name="OL" onchange="Cs()"><option value="0" id="cn"
<option value="3">EET/EEST</option> selected="selected">None</option><option value="1" id="ca">Analog Clock</option>
<option value="4">US-EST/EDT</option> <option value="2">Single Digit Clock</option><option value="3" id="cc">
<option value="5">US-CST/CDT</option> Cronixie Clock</option></select><br><div id="coc">First LED: <input name="O1"
<option value="6">US-MST/MDT</option> type="number" min="0" max="255" required> Last LED: <input name="O2"
<option value="7">US-AZ</option> type="number" min="0" max="255" required><br><div id="cac">12h LED: <input
<option value="8">US-PST/PDT</option> name="OM" type="number" min="0" max="255" required><br>Show 5min marks: <input
<option value="9">CST(AWST)</option> type="checkbox" name="O5"><br></div>Seconds (as trail): <input type="checkbox"
<option value="10">JST(KST)</option> name="OS"><br></div><div id="ccc">Cronixie Display: <input name="CX"
<option value="11">AEST/AEDT</option> maxlength="6"><br>Cronixie Backlight: <input type="checkbox" name="CB"><br>
<option value="12">NZST/NZDT</option> </div>Countdown Mode: <input type="checkbox" name="CE"><br>Countdown Goal:<br>
<option value="13">North Korea</option> Year: 20 <input name="CY" type="number" min="0" max="99" required> Month: <input
<option value="14">IST (India)</option> name="CI" type="number" min="1" max="12" required> Day: <input name="CD"
<option value="15">CA-Saskatchewan</option> type="number" min="1" max="31" required><br>Hour: <input name="CH"
<option value="16">ACST</option> type="number" min="0" max="23" required> Minute: <input name="CM" type="number"
<option value="17">ACST/ACDT</option> min="0" max="59" required> Second: <input name="CS" type="number" min="0"
</select><br> max="59" required><br><h3>Advanced Macros</h3>Define API macros here:<br>1:
UTC offset: <input name="UO" type="number" min="-65500" max="65500" required> seconds (max. 18 hours)<br> <input name="M1" maxlength="64"><br>2: <input name="M2" maxlength="64"><br>3:
Current local time is <span class="times">unknown</span>. <input name="M3" maxlength="64"><br>4: <input name="M4" maxlength="64"><br>5:
<h3>Clock</h3> <input name="M5" maxlength="64"><br>6: <input name="M6" maxlength="64"><br>7:
Clock Overlay: <input name="M7" maxlength="64"><br>8: <input name="M8" maxlength="64"><br>9:
<select name="OL" onchange="Cs()"> <input name="M9" maxlength="64"><br>10: <input name="M10" maxlength="64"><br>
<option value="0" id="cn" selected>None</option> 11: <input name="M11" maxlength="64"><br>12: <input name="M12" maxlength="64">
<option value="1" id="ca">Analog Clock</option> <br>13: <input name="M13" maxlength="64"><br>14: <input name="M14"
<option value="2" disabled>-</option> maxlength="64"><br>15: <input name="M15" maxlength="64"><br>16: <input
<option value="3" id="cc">Cronixie Clock</option> name="M16" maxlength="64"><br><br><i>
</select><br> Use 0 for the default action instead of a macro</i><br>Boot Macro: <input
<div id="coc"> name="MB" type="number" min="0" max="16" required><br>Alexa On/Off Macros:
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> <input name="A0" type="number" min="0" max="16" required> <input name="A1"
<div id="cac"> type="number" min="0" max="16" required><br>Button short press macro: Macro:
12h LED: <input name="OM" type="number" min="0" max="255" required><br> <input name="MP" type="number" min="0" max="16" required><br>Long Press: <input
Show 5min marks: <input type="checkbox" name="O5"><br></div> name="ML" type="number" min="0" max="16" required> Double press: <input
Seconds (as trail): <input type="checkbox" name="OS"><br> name="MD" type="number" min="0" max="16" required><br>Countdown-Over Macro:
</div> <input name="MC" type="number" min="0" max="16" required><br>
<div id="ccc"> Timed-Light-Over Macro: <input name="MN" type="number" min="0" max="16"
Cronixie Display: <input name="CX" maxlength="6"><br> required><br>Time-Controlled Macros:<br><div style="display:inline-block"><table
Cronixie Backlight: <input type="checkbox" name="CB"><br> id="TMT"></table></div><hr><button type="button" onclick="B()">Back</button>
</div> <button type="submit">Save</button></form></body></html>)=====";
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: <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>
<div style="display: inline-block">
<table id="TMT">
</table></div><hr>
<button type="button" onclick="B()">Back</button><button type="submit">Save</button>
</form>
</body>
</html>)=====";
//security settings and about // Autogenerated from wled00/data/settings_sec.htm, do not edit!!
const char PAGE_settings_sec[] PROGMEM = R"=====(<!DOCTYPE html> const char PAGE_settings_sec[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta name="viewport" content="width=500"><meta
<html><head><meta name="viewport" content="width=500"><meta charset="utf-8"> charset="utf-8"><title>Misc Settings</title><script>
<title>Misc Settings</title> 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;
<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()">
%CSS%%SCSS%</head> <form id="form_s" name="Sf" method="post"><div class="helpB"><button
<body onload="GetV()"> type="button" onclick="H()">?</button></div><button type="button" onclick="B()">
<form id="form_s" name="Sf" method="post"> Back</button><button type="submit">Save & Reboot</button><hr><h2>
<div class="helpB"><button type="button" onclick="H()">?</button></div> Security & Update setup</h2>Lock wireless (OTA) software update: <input
<button type="button" onclick="B()">Back</button><button type="submit">Save & Reboot</button><hr> type="checkbox" name="NO"><br>Passphrase: <input type="password" name="OP"
<h2>Security & Update setup</h2> maxlength="32"><br>
Lock wireless (OTA) software update: <input type="checkbox" name="NO"><br> To enable OTA, for security reasons you need to also enter the correct password!
Passphrase: <input type="password" name="OP" maxlength="32"><br> <br>The password should be changed when OTA is enabled.<br><b>
To enable OTA, for security reasons you need to also enter the correct password!<br> Disable OTA when not in use, otherwise an attacker can reflash device software!
The password should be changed when OTA is enabled.<br> </b><br><i>Settings on this page are only changable if OTA lock is disabled!</i>
<b>Disable OTA when not in use, otherwise an attacker can reflash device software!</b><br> <br>Deny access to WiFi settings if locked: <input type="checkbox" name="OW">
<i>Settings on this page are only changable if OTA lock is disabled!</i><br> <br><br>Factory reset: <input type="checkbox" name="RS"><br>
Deny access to WiFi settings if locked: <input type="checkbox" name="OW"><br><br>
Factory reset: <input type="checkbox" name="RS"><br>
All EEPROM content (settings) will be erased.<br><br> All EEPROM content (settings) will be erased.<br><br>
HTTP traffic is unencrypted. An attacker in the same network can intercept form data! HTTP traffic is unencrypted. An attacker in the same network can intercept form data!
<h3>Software Update</h3> <h3>Software Update</h3><button type="button" onclick="U()">Manual OTA Update
<button type="button" onclick="U()">Manual OTA Update</button><br> </button><br>Enable ArduinoOTA: <input type="checkbox" name="AO"><br><h3>About
Enable ArduinoOTA: <input type="checkbox" name="AO"><br> </h3><a href="https://github.com/Aircoookie/WLED/" target="_blank">WLED</a>
<h3>About</h3> version 0.10.0<br><br><a
<a href="https://github.com/Aircoookie/WLED" target="_blank">WLED</a> version 0.10.0<br><br> href="https://github.com/Aircoookie/WLED/wiki/Contributors-&-About"
<a href="https://github.com/Aircoookie/WLED/wiki/Contributors-&-About" target="_blank">Contributors, dependencies and special thanks</a><br> target="_blank">Contributors, dependencies and special thanks</a><br>
A huge thank you to everyone who helped me create WLED!<br><br> A huge thank you to everyone who helped me create WLED!<br><br>
(c) 2016-2020 Christian Schwinne <br> (c) 2016-2019 Christian Schwinne<br><i>Licensed under the MIT license</i><br>
<i>Licensed under the MIT license</i><br><br> <br>Server message: <span class="sip">Response error!</span><hr><button
Server message: <span class="sip"> Response error! </span><hr> type="button" onclick="B()">Back</button><button type="submit">Save & Reboot
<button type="button" onclick="B()">Back</button><button type="submit">Save & Reboot</button> </button></form></body></html>)=====";
</form>
</body>
</html>)=====";

3397
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff