Minor changes to auto UI code generation

Replace outdated CSS in HTML by style.css import Fix missing button double press in time settings FIx missing meta utf-8 in WiFi and UI settings Modify cdata.js to add an info header to the top of auto-generated files
shana · Jun 10, 2020 · 888eacb · 888eacb
1 parent ee6f25c
commit 888eacb
Show file tree

Hide file tree

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

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

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

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

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

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