cdata.js and simple UI optimization.

tools/cdata.js

@@ -16,20 +16,31 @@
  */
 
 const fs = require("fs");
+const inliner = require("inliner");
+const zlib = require("zlib");
+const CleanCSS = require("clean-css");
+const MinifyHTML = require("html-minifier-terser").minify;
 const packageJson = require("../package.json");
 
 /**
  *
  */
-function hexdump(buffer) {
+function hexdump(buffer,isHex=false) {
   let lines = [];
 
-  for (let i = 0; i < buffer.length; i += 16) {
-    let block = buffer.slice(i, i + 16); // cut buffer into blocks of 16
+  for (let i = 0; i < buffer.length; i +=(isHex?32:16)) {
+    var block;
     let hexArray = [];
-
-    for (let value of block) {
-      hexArray.push("0x" + value.toString(16).padStart(2, "0"));
+    if (isHex) {
+      block = buffer.slice(i, i + 32)
+      for (let j = 0; j < block.length; j +=2 ) {
+        hexArray.push("0x" + block.slice(j,j+2))
+      }
+    } else {
+      block = buffer.slice(i, i + 16); // cut buffer into blocks of 16
+      for (let value of block) {
+        hexArray.push("0x" + value.toString(16).padStart(2, "0"));
+      }
     }
 
     let hexString = hexArray.join(", ");
@@ -40,9 +51,6 @@ function hexdump(buffer) {
   return lines.join(",\n");
 }
 
-const inliner = require("inliner");
-const zlib = require("zlib");
-
 function strReplace(str, search, replacement) {
   return str.split(search).join(replacement);
 }
@@ -56,20 +64,56 @@ function adoptVersionAndRepo(html) {
     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 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 == "js-minify") {
+    return MinifyHTML('<script>' + str + '</script>', {
+      collapseWhitespace: true,
+      minifyJS: true, 
+      continueOnParseError: false,
+      removeComments: true,
+    }).replace(/<[\/]*script>/g,'');
+  } else if (type == "html-minify") {
+    return MinifyHTML(str, {
+      collapseWhitespace: true,
+      maxLineLength: 80,
+      minifyCSS: true,
+      minifyJS: true, 
+      continueOnParseError: false,
+      removeComments: true,
+    });
+  } else if (type == "html-minify-ui") {
+    return MinifyHTML(str, {
+      collapseWhitespace: true,
+      conservativeCollapse: true,
+      maxLineLength: 80,
+      minifyCSS: true,
+      minifyJS: true, 
+      continueOnParseError: false,
+      removeComments: true,
+    });
+  } else {
+    console.warn("Unknown filter: " + type);
+    return str;
+  }
+}
+
 function writeHtmlGzipped(sourceFile, resultFile, page) {
   console.info("Reading " + sourceFile);
   new inliner(sourceFile, function (error, html) {
     console.info("Inlined " + html.length + " characters");
-    html = filter(html, "html-minify-ui");
+    html = filter(html.replace("</head>","<script src=\"iro.js\"></script><script src=\"rangetouch.js\"></script></head>"), "html-minify-ui");
     console.info("Minified to " + html.length + " characters");
 
     if (error) {
@@ -106,41 +150,6 @@ ${array}
   });
 }
 
-const CleanCSS = require("clean-css");
-const MinifyHTML = require("html-minifier-terser").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 if (type == "html-minify-ui") {
-    return MinifyHTML(str, {
-      collapseWhitespace: true,
-      conservativeCollapse: 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);
@@ -153,6 +162,20 @@ const char ${s.name}[] PROGMEM = R"${s.prepend || ""}${filter(str, s.filter)}${
 
 `;
     return s.mangle ? s.mangle(chunk) : chunk;
+  } else if (s.method == "gzip") {
+    const buf = fs.readFileSync(srcDir + "/" + s.file);
+    const str = buf.toString('utf-8');
+    const zip = zlib.gzipSync(filter(str, s.filter), { level: zlib.constants.Z_BEST_COMPRESSION });
+    const result = hexdump(zip.toString('hex'), true);
+    const chunk = `
+// Autogenerated from ${srcDir}/${s.file}, do not edit!!
+const uint16_t ${s.name}_length = ${zip.length};
+const uint8_t ${s.name}[] PROGMEM = {
+${result}
+};
+
+`;
+    return chunk;
   } else if (s.method == "binary") {
     const buf = fs.readFileSync(srcDir + "/" + s.file);
     const result = hexdump(buf);
@@ -164,7 +187,7 @@ ${result}
 };
 
 `;
-    return s.mangle ? s.mangle(chunk) : chunk;
+    return chunk;
   } else {
     console.warn("Unknown method: " + s.method);
     return undefined;
@@ -196,7 +219,32 @@ function writeChunks(srcDir, specs, resultFile) {
 
 writeHtmlGzipped("wled00/data/index.htm", "wled00/html_ui.h", 'index');
 writeHtmlGzipped("wled00/data/simple.htm", "wled00/html_simple.h", 'simple');
-
+/*
+writeChunks(
+  "wled00/data",
+  [
+    {
+      file: "simple.css",
+      name: "PAGE_simpleCss",
+      method: "gzip",
+      filter: "css-minify",
+    },
+    {
+      file: "simple.js",
+      name: "PAGE_simpleJs",
+      method: "gzip",
+      filter: "js-minify",
+    },
+    {
+      file: "simple.htm",
+      name: "PAGE_simple",
+      method: "gzip",
+      filter: "html-minify-ui",
+    }
+  ],
+  "wled00/html_simplex.h"
+);
+*/
 writeChunks(
   "wled00/data",
   [
@@ -436,6 +484,16 @@ const char PAGE_dmxmap[] PROGMEM = R"=====()=====";
       name: "favicon",
       method: "binary",
     },
+    {
+      file: "iro.js",
+      name: "iroJs",
+      method: "gzip"
+    },
+    {
+      file: "rangetouch.js",
+      name: "rangetouchJs",
+      method: "gzip"
+    }
   ],
   "wled00/html_other.h"
 );