Merge pull request #1287 from huksley/html-es6

Use html-minifer-terser for ES6+ support

package-lock.json

@@ -239,6 +239,11 @@
         "fill-range": "^7.0.1"
       }
     },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+    },
     "cacheable-request": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz",
@@ -268,15 +273,6 @@
         }
       }
     },
-    "camel-case": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
-      "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=",
-      "requires": {
-        "no-case": "^2.2.0",
-        "upper-case": "^1.1.1"
-      }
-    },
     "camelcase": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
@@ -566,6 +562,34 @@
         "domelementtype": "1"
       }
     },
+    "dot-case": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.3.tgz",
+      "integrity": "sha512-7hwEmg6RiSQfm/GwPL4AAWXKy3YNNZA3oFv2Pdiey0mwkRCPZ9x6SZbkLcn8Ma5PYeVokzoD4Twv2n7LKp5WeA==",
+      "requires": {
+        "no-case": "^3.0.3",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "lower-case": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.1.tgz",
+          "integrity": "sha512-LiWgfDLLb1dwbFQZsSglpRj+1ctGnayXz3Uv0/WO8n558JycT5fg6zkNcnW0G68Nn0aEldTFeEfmjCfmqry/rQ==",
+          "requires": {
+            "tslib": "^1.10.0"
+          }
+        },
+        "no-case": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.3.tgz",
+          "integrity": "sha512-ehY/mVQCf9BL0gKfsJBvFJen+1V//U+0HQMPrWct40ixE4jnv0bfvxDbWtAHL9EcaPEOJHVVYKoQn1TlZUB8Tw==",
+          "requires": {
+            "lower-case": "^2.0.1",
+            "tslib": "^1.10.0"
+          }
+        }
+      }
+    },
     "dot-prop": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.2.0.tgz",
@@ -818,26 +842,41 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
-    "html-minifier": {
+    "html-minifier-terser": {
-      "version": "4.0.0",
+      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-4.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
-      "integrity": "sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==",
+      "integrity": "sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==",
       "requires": {
-        "camel-case": "^3.0.0",
+        "camel-case": "^4.1.1",
-        "clean-css": "^4.2.1",
+        "clean-css": "^4.2.3",
-        "commander": "^2.19.0",
+        "commander": "^4.1.1",
         "he": "^1.2.0",
-        "param-case": "^2.1.1",
+        "param-case": "^3.0.3",
         "relateurl": "^0.2.7",
-        "uglify-js": "^3.5.1"
+        "terser": "^4.6.3"
       },
       "dependencies": {
-        "uglify-js": {
+        "camel-case": {
-          "version": "3.9.3",
+          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.9.3.tgz",
+          "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.1.tgz",
-          "integrity": "sha512-r5ImcL6QyzQGVimQoov3aL2ZScywrOgBXGndbWrdehKoSvGe/RmiE5Jpw/v+GvxODt6l2tpBXwA7n+qZVlHBMA==",
+          "integrity": "sha512-7fa2WcG4fYFkclIvEmxBbTvmibwF2/agfEBc6q3lOpVu0A13ltLsA+Hr/8Hp6kp5f+G7hKi6t8lys6XxP+1K6Q==",
           "requires": {
-            "commander": "~2.20.3"
+            "pascal-case": "^3.1.1",
+            "tslib": "^1.10.0"
+          }
+        },
+        "commander": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+          "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="
+        },
+        "param-case": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.3.tgz",
+          "integrity": "sha512-VWBVyimc1+QrzappRs7waeN2YmoZFCGXWASRYX1/rGHtXqEcrGEIDm+jqIwFa2fRXNgQEwrxaYuIrX0WcAguTA==",
+          "requires": {
+            "dot-case": "^3.0.3",
+            "tslib": "^1.10.0"
           }
         }
       }
@@ -1248,11 +1287,6 @@
       "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
       "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc="
     },
-    "lower-case": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
-      "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw="
-    },
     "lowercase-keys": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
@@ -1330,14 +1364,6 @@
         "inherits": "~2.0.1"
       }
     },
-    "no-case": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
-      "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==",
-      "requires": {
-        "lower-case": "^1.1.1"
-      }
-    },
     "nodemon": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.4.tgz",
@@ -1609,12 +1635,32 @@
         "registry-url": "^3.0.0"
       }
     },
-    "param-case": {
+    "pascal-case": {
-      "version": "2.1.1",
+      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.1.tgz",
-      "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=",
+      "integrity": "sha512-XIeHKqIrsquVTQL2crjq3NfJUxmdLasn3TYOU0VBM+UX2a6ztAWBlJQBePLGY7VHW8+2dRadeIPK5+KImwTxQA==",
       "requires": {
-        "no-case": "^2.2.0"
+        "no-case": "^3.0.3",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "lower-case": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.1.tgz",
+          "integrity": "sha512-LiWgfDLLb1dwbFQZsSglpRj+1ctGnayXz3Uv0/WO8n558JycT5fg6zkNcnW0G68Nn0aEldTFeEfmjCfmqry/rQ==",
+          "requires": {
+            "tslib": "^1.10.0"
+          }
+        },
+        "no-case": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.3.tgz",
+          "integrity": "sha512-ehY/mVQCf9BL0gKfsJBvFJen+1V//U+0HQMPrWct40ixE4jnv0bfvxDbWtAHL9EcaPEOJHVVYKoQn1TlZUB8Tw==",
+          "requires": {
+            "lower-case": "^2.0.1",
+            "tslib": "^1.10.0"
+          }
+        }
       }
     },
     "performance-now": {
@@ -1893,6 +1939,22 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
     },
+    "source-map-support": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -2004,6 +2066,23 @@
       "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.0.tgz",
       "integrity": "sha512-a6sumDlzyHVJWb8+YofY4TW112G6p2FCPEAFk+59gIYHv3XHRhm9ltVQ9kli4hNWeQBwSpe8cRN25x0ROunMOw=="
     },
+    "terser": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
+      "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
+      "requires": {
+        "commander": "^2.20.0",
+        "source-map": "~0.6.1",
+        "source-map-support": "~0.5.12"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
     "then-fs": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/then-fs/-/then-fs-2.0.0.tgz",
@@ -2047,6 +2126,11 @@
         "punycode": "^2.1.1"
       }
     },
+    "tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -2119,11 +2203,6 @@
         "string-length": "^1.0.0"
       }
     },
-    "upper-case": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
-      "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg="
-    },
     "uri-js": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",

package.json

@@ -23,7 +23,7 @@
   "homepage": "https://github.com/Aircoookie/WLED#readme",
   "dependencies": {
     "clean-css": "^4.2.3",
-    "html-minifier": "^4.0.0",
+    "html-minifier-terser": "^5.1.1",
     "inliner": "^1.13.1",
     "nodemon": "^2.0.4",
     "zlib": "^1.0.5"

tools/cdata.js

@@ -105,7 +105,7 @@ ${array}
 }
 
 const CleanCSS = require("clean-css");
-const MinifyHTML = require("html-minifier").minify;
+const MinifyHTML = require("html-minifier-terser").minify;
 
 function filter(str, type) {
   str = adoptVersionAndRepo(str);
@@ -119,7 +119,7 @@ function filter(str, type) {
       collapseWhitespace: true,
       maxLineLength: 80,
       minifyCSS: true,
-      minifyJS: true,
+      minifyJS: true, 
       continueOnParseError: false,
       removeComments: true,
     });

wled00/html_other.h

@@ -71,44 +71,9 @@ 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();
+</style></head><body><div id="canv"><script>
-    
+update();var tmout=null;function update(){if(document.hidden)return clearTimeout(tmout),void(tmout=setTimeout(update,250));fetch("/json/live").then(t=>(t.ok||(clearTimeout(tmout),tmout=setTimeout(update,2500)),t.json())).then(t=>{var e="linear-gradient(90deg,",u=t.leds.length;for(i=0;i<u;i++){var o=t.leds[i];o.length>6&&(o=o.substring(2)),e+="#"+o,i<u-1&&(e+=",")}e+=")",document.getElementById("canv").style.background=e,clearTimeout(tmout),tmout=setTimeout(update,40)}).catch((function(t){clearTimeout(tmout),tmout=setTimeout(update,2500)}))}
-    var tmout = null;
+</script></body></html>)=====";
-    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!!

wled00/html_settings.h

@@ -68,7 +68,7 @@ Save & Connect</button></form></body></html>)=====";
 // Autogenerated from wled00/data/settings_leds.htm, do not edit!!
 const char PAGE_settings_leds[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" 
 content="width=500"><title>LED Settings</title><script>
-var d=document,laprev=55;function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#led-settings")}function B(){window.open("/settings","_self")}function S(){GetV(),setABL()}function enABL(){var e=d.getElementById("able").checked;d.Sf.LA.value=e?laprev:0,d.getElementById("abl").style.display=e?"inline":"none",d.getElementById("psu2").style.display=e?"inline":"none",0<d.Sf.LA.value&&setABL()}function enLA(){var e=d.Sf.LAsel.value;d.Sf.LA.value=e,d.getElementById("LAdis").style.display=50==e?"inline":"none",UI()}function setABL(){switch(d.getElementById("able").checked=!0,d.Sf.LAsel.value=50,parseInt(d.Sf.LA.value)){case 0:d.getElementById("able").checked=!1,enABL();break;case 30:d.Sf.LAsel.value=30;break;case 35:d.Sf.LAsel.value=35;break;case 55:d.Sf.LAsel.value=55;break;case 255:d.Sf.LAsel.value=255;break;default:d.getElementById("LAdis").style.display="inline"}UI()}function UI(){var e=d.querySelectorAll(".wc"),l=e.length;for(i=0;i<l;i++)e[i].style.display=d.getElementById("rgbw").checked?"inline":"none";d.getElementById("ledwarning").style.display=1e3<d.Sf.LC.value?"inline":"none",d.getElementById("ampwarning").style.display=7200<d.Sf.MA.value?"inline":"none",255==d.Sf.LA.value?laprev=12:0<d.Sf.LA.value&&(laprev=d.Sf.LA.value);var n=5<(n=Math.ceil((100+d.Sf.LC.value*laprev)/500)/2)?Math.ceil(n):n,t="",a=30==d.Sf.LAsel.value,s=255==d.Sf.LAsel.value;n<1.02&&!a&&!s?t="ESP 5V pin with 1A USB supply":(t+=a?"12V ":s?"WS2815 12V ":"5V ",t+=n,t+="A supply connected to LEDs");var u=Math.ceil((100+d.Sf.LC.value*laprev)/1500)/2,c="(for most effects, ~";c+=u=5<u?Math.ceil(u):u,c+="A is enough)<br>",d.getElementById("psu").innerHTML=t,d.getElementById("psu2").innerHTML=s?"":c}function GetV() {var d=document;
+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",d.Sf.LA.value>0&&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=d.Sf.LC.value>1e3?"inline":"none",d.getElementById("ampwarning").style.display=d.Sf.MA.value>7200?"inline":"none",255==d.Sf.LA.value?laprev=12:d.Sf.LA.value>0&&(laprev=d.Sf.LA.value);var n=Math.ceil((100+d.Sf.LC.value*laprev)/500)/2;n=n>5?Math.ceil(n):n;var 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=u>5?Math.ceil(u):u,c+="A is enough)<br>",d.getElementById("psu").innerHTML=t,d.getElementById("psu2").innerHTML=s?"":c}function GetV() {var d=document;
 %CSS%%SCSS%</head><body onload="S()"><form
  id="form_s" name="Sf" method="post"><div class="helpB"><button type="button" 
 onclick="H()">?</button></div><button type="button" onclick="B()">Back</button>
@@ -166,166 +166,10 @@ const char PAGE_settings_dmx[] PROGMEM = R"=====()=====";
 
 // Autogenerated from wled00/data/settings_ui.htm, do not edit!!
 const char PAGE_settings_ui[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" 
-content="width=500"><title>UI Settings</title><script>var d = document;
+content="width=500"><title>UI Settings</title><script>
-var initial_ds, initial_st;
+var initial_ds,initial_st,d=document,sett=null,l={comp:{labels:"Show button labels",colors:{LABEL:"Color selection methods",picker:"Color Wheel",rgb:"RGB sliders",quick:"Quick color selectors",hex:"HEX color input"},pcmbot:"Show bottom tab bar in PC mode"},theme:{alpha:{bg:"Background opacity",tab:"Button opacity"},bg:{url:"BG image URL"},color:{bg:"BG HEX color"}}};function gId(e){return d.getElementById(e)}function isObject(e){return e&&"object"==typeof e&&!Array.isArray(e)}function set(e,i,t){for(var n=i,l=e.split("_"),s=l.length,o=0;o<s-1;o++){var a=l[o];n[a]||(n[a]={}),n=n[a]}n[l[s-1]]=t}function addRec(e,t="",n=null){var l="";for(i in e){var s=t+(t?"_":"")+i;if(isObject(e[i]))n&&n[i]&&n[i].LABEL&&(l+=`<h3>${n[i].LABEL}</h3>`),l+=addRec(e[i],s,n?n[i]:null);else{var o=s;if(n&&n[i]?o=n[i]:e[i+"LABEL"]&&(o=e[i+"LABEL"]),i.indexOf("LABEL")>0)continue;var a=typeof e[i];gId(s)?("boolean"===a?gId(s).checked=e[i]:gId(s).value=e[i],gId(s).previousElementSibling.matches(".l")&&(gId(s).previousElementSibling.innerHTML=o)):"boolean"===a?l+=`${o}: <input class="agi cb" type="checkbox" id=${s} ${e[i]?"checked":""}><br>`:"number"===a?l+=`${o}: <input class="agi" type="number" id=${s} value=${e[i]}><br>`:"string"===a&&(l+=`${o}:<br><input class="agi" id=${s} value=${e[i]}><br>`)}}return l}function genForm(e){var i;i=addRec(e,"",l),gId("gen").innerHTML=i}function GetLS(){(sett=localStorage.getItem("wledUiCfg"))||(gId("lserr").style.display="inline");try{sett=JSON.parse(sett)}catch(e){sett={},gId("lserr").style.display="inline",gId("lserr").innerHTML="&#9888; Settings JSON parsing failed. ("+e+")"}genForm(sett),gId("dm").checked="light"===gId("theme_base").value}function SetLS(){for(var e=d.querySelectorAll(".agi"),i=0;i<e.length;i++){var t=e[i],n=t.classList.contains("cb")?t.checked:t.value;set(t.id,sett,n),console.log(`${t.id} set to ${n}`)}try{localStorage.setItem("wledUiCfg",JSON.stringify(sett)),gId("lssuc").style.display="inline"}catch(t){gId("lssuc").style.display="none",gId("lserr").style.display="inline",gId("lserr").innerHTML="&#9888; Settings JSON saving failed. ("+t+")"}}function Save(){SetLS(),d.Sf.DS.value==initial_ds&&d.Sf.ST.checked==initial_st||d.Sf.submit()}function S(){GetV(),initial_ds=d.Sf.DS.value,initial_st=d.Sf.ST.checked,GetLS()}function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#user-interface-settings")}function B(){window.open("/settings","_self")}function UI(){gId("idonthateyou").style.display=gId("dm").checked?"inline":"none";var e=gId("theme_base");e&&(e.value=gId("dm").checked?"light":"dark")}function GetV() {var d=document;
-var sett = null;
+%CSS%%SCSS%</head><body onload="S()"><form
-var l = {
+ id="form_s" name="Sf" method="post"><div 
-"comp":{
-"labels":"Show button labels",
-"colors":{
-"LABEL":"Color selection methods",
-"picker": "Color Wheel",
-"rgb": "RGB sliders",
-"quick": "Quick color selectors",
-"hex": "HEX color input"
-},
-"pcmbot": "Show bottom tab bar in PC mode"
-},
-"theme":{
-"alpha": {
-"bg":"Background opacity",
-"tab":"Button opacity"
-},
-"bg":{
-"url":"BG image URL"
-},
-"color":{
-"bg":"BG HEX color"
-}
-}
-
-};
-function gId(s)
-{
-return d.getElementById(s);
-}
-function isObject(item) {
-return (item && typeof item === 'object' && !Array.isArray(item));
-}
-function set(path, obj, val) {
-var tar = obj;
-var pList = path.split('_');
-var len = pList.length;
-for(var i = 0; i < len-1; i++) {
-var elem = pList[i];
-if( !tar[elem] ) tar[elem] = {}
-tar = tar[elem];
-}
-
-tar[pList[len-1]] = val;
-}
-
-function addRec(s, path = "", label = null)
-{
-var str = "";
-for (i in s)
-{
-var fk = path + (path?'_':'') + i;
-if (isObject(s[i])) {
-if (label && label[i] && label[i]["LABEL"]) str += `<h3>${label[i]["LABEL"]}</h3>`;
-str += addRec(s[i], fk, label? label[i] : null);
-} else {
-var lb = fk;
-if (label && label[i]) lb = label[i];
-else if (s[i+'LABEL']) lb = s[i+'LABEL'];
-if (i.indexOf('LABEL') > 0) continue;
-var t = typeof s[i];
-if (gId(fk)) { //already exists
-if(t === 'boolean')
-{
-gId(fk).checked = s[i];
-} else {
-gId(fk).value = s[i];
-}
-if (gId(fk).previousElementSibling.matches('.l')) {
-gId(fk).previousElementSibling.innerHTML = lb;
-}
-} else {
-if(t === 'boolean')
-{
-str += `${lb}: <input class="agi cb" type="checkbox" id=${fk} ${s[i]?"checked":""}><br>`;
-} else if (t === 'number')
-{
-str += `${lb}: <input class="agi" type="number" id=${fk} value=${s[i]}><br>`;
-} else if (t === 'string')
-{
-str += `${lb}:<br><input class="agi" id=${fk} value=${s[i]}><br>`;
-}
-}
-}
-}
-return str;
-}
-
-function genForm(s) {
-var str = "";
-str = addRec(s,"",l);
-
-gId('gen').innerHTML = str;
-}
-function GetLS()
-{
-sett = localStorage.getItem('wledUiCfg');
-if (!sett) gId('lserr').style.display = "inline";
-try {
-sett = JSON.parse(sett);
-} catch (e) {
-sett = {};
-gId('lserr').style.display = "inline";
-gId('lserr').innerHTML = "&#9888; Settings JSON parsing failed. (" + e + ")";
-}
-genForm(sett);
-gId('dm').checked = (gId('theme_base').value === 'light');
-}
-
-function SetLS()
-{
-var l = d.querySelectorAll('.agi');
-for (var i = 0; i < l.length; i++) {
-var e = l[i];
-var val = e.classList.contains('cb') ? e.checked : e.value;
-set(e.id, sett, val);
-console.log(`${e.id} set to ${val}`);
-}
-try {
-localStorage.setItem('wledUiCfg', JSON.stringify(sett));
-gId('lssuc').style.display = "inline";
-} catch (e) {
-gId('lssuc').style.display = "none";
-gId('lserr').style.display = "inline";
-gId('lserr').innerHTML = "&#9888; Settings JSON saving failed. (" + e + ")";
-}
-}
-
-function Save() {
-SetLS();
-if (d.Sf.DS.value != initial_ds || d.Sf.ST.checked != initial_st) d.Sf.submit();
-}
-
-function S()
-{
-GetV(); 
-initial_ds = d.Sf.DS.value;
-initial_st = d.Sf.ST.checked;
-GetLS();
-}
-function H()
-{
-window.open("https://github.com/Aircoookie/WLED/wiki/Settings#user-interface-settings");
-}
-function B()
-{
-window.open("/settings","_self");
-}
-function UI()
-{
-gId('idonthateyou').style.display = (gId('dm').checked) ? 'inline':'none';
-var f = gId('theme_base');
-if (f) f.value = (gId('dm').checked) ? 'light':'dark';
-}
-function GetV() {var d=document;
-%CSS%%SCSS%</head><body onload="S()">
-<form id="form_s" name="Sf" method="post"><div 
 style="position:sticky;top:0;background-color:#222"><div class="helpB"><button 
 type="button" onclick="H()">?</button></div><button type="button" onclick="B()">
 Back</button><button type="button" onclick="Save()">Save</button><br><span 
@@ -357,7 +201,7 @@ onclick="Save()">Save</button></form></body></html>)=====";
 // Autogenerated from wled00/data/settings_sync.htm, do not edit!!
 const char PAGE_settings_sync[] PROGMEM = R"=====(<!DOCTYPE html><html><head><meta name="viewport" content="width=500"><meta 
 charset="utf-8"><title>Sync Settings</title><script>
-var d=document;function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#sync-settings")}function B(){window.open("/settings","_self")}function adj(){6454==d.Sf.DI.value?(1==d.Sf.DA.value&&(d.Sf.DA.value=0),1==d.Sf.EU.value&&(d.Sf.EU.value=0)):5568==d.Sf.DI.value&&(0==d.Sf.DA.value&&(d.Sf.DA.value=1),0==d.Sf.EU.value&&(d.Sf.EU.value=1))}function SP(){var e=d.Sf.DI.value;d.getElementById("xp").style.display=0<e?"none":"block",0<e&&(d.Sf.EP.value=e)}function SetVal(){switch(parseInt(d.Sf.EP.value)){case 5568:d.Sf.DI.value=5568;break;case 6454:d.Sf.DI.value=6454;break;case 4048:d.Sf.DI.value=4048}SP()}function S(){GetV(),SetVal()}function GetV() {
+var d=document;function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#sync-settings")}function B(){window.open("/settings","_self")}function adj(){6454==d.Sf.DI.value?(1==d.Sf.DA.value&&(d.Sf.DA.value=0),1==d.Sf.EU.value&&(d.Sf.EU.value=0)):5568==d.Sf.DI.value&&(0==d.Sf.DA.value&&(d.Sf.DA.value=1),0==d.Sf.EU.value&&(d.Sf.EU.value=1))}function SP(){var e=d.Sf.DI.value;d.getElementById("xp").style.display=e>0?"none":"block",e>0&&(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;break;case 4048:d.Sf.DI.value=4048}SP()}function S(){GetV(),SetVal()}function GetV() {
 %CSS%%SCSS%</head><body onload="S()"><form
  id="form_s" name="Sf" method="post"><div class="helpB"><button type="button" 
 onclick="H()">?</button></div><button type="button" onclick="B()">Back</button>