From 8ed35652bcb874fd684acfcbc0a26623af1a6379 Mon Sep 17 00:00:00 2001
From: cschwinne <dev.aircoookie@gmail.com>
Date: Fri, 29 Jan 2021 02:34:03 +0100
Subject: [PATCH] LED memory usage indicator, better pin checker

---
 wled00/data/settings_leds.htm | 108 ++++++++++++++++++++++++----------
 wled00/html_settings.h        |  21 ++++---
 2 files changed, 88 insertions(+), 41 deletions(-)

diff --git a/wled00/data/settings_leds.htm b/wled00/data/settings_leds.htm
index 55e14f67b..30a6d0318 100644
--- a/wled00/data/settings_leds.htm
+++ b/wled00/data/settings_leds.htm
@@ -5,7 +5,7 @@
 	<meta name="viewport" content="width=500">
 	<title>LED Settings</title>
 	<script>
-    var d=document,laprev=55,maxST=1;
+    var d=document,laprev=55,maxST=1,bmax=5000,bquot=0; //maximum bytes for LED allocation: 5kB for 8266, 32kB for 32
 		function H()
 		{
 			window.open("https://github.com/Aircoookie/WLED/wiki/Settings#led-settings");
@@ -13,8 +13,29 @@
 		function B()
 		{
 			window.open("/settings","_self");
-		}
-		function S(){GetV();setABL();}
+    }
+    function trySubmit() {
+      var LCs = d.getElementsByTagName("input");
+      for (i=0; i<LCs.length; i++) {
+        var nm = LCs[i].name.substring(0,2);
+
+        //check for pin conflicts
+        if (nm=="L0" || nm=="L1" || nm=="RL" || nm=="BT" || nm=="IR" || nm=="AX")
+          if (LCs[i].value!="" && LCs[i].value!="-1") {
+            if (LCs[i].value > 5 && LCs[i].value < 12) {alert("Sorry, pins 6-11 can not be used.");LCs[i].focus();return;}
+            if (d.um_p && d.um_p.some((e)=>e==parseInt(LCs[i].value,10))) {alert("Usermod pin conflict!");LCs[i].focus();return;}
+            for (j=i+1; j<LCs.length; j++)
+            {
+              var n2 = LCs[j].name.substring(0,2);
+              if (n2=="L0" || n2=="L1" || n2=="RL" || n2=="BT" || n2=="IR" || n2=="AX")
+                if (LCs[j].value!="" && LCs[i].value==LCs[j].value) {alert("Pin conflict!");LCs[i].focus();return;}
+            }
+          }
+      }
+      if (bquot > 100) {var msg = "Too many LEDs for me to handle!"; if (bmax < 10000) msg += " Consider using an ESP32."; alert(msg); return;}
+      if (d.Sf.reportValidity()) d.Sf.submit();
+    }
+		function S(){GetV();setABL(); if (maxST>4) bmax=32000; d.getElementById('m1').innerHTML = bmax;}
     function enABL()
     {
       var en = d.getElementById('able').checked;
@@ -43,10 +64,29 @@
         default: d.getElementById('LAdis').style.display = 'inline';
       }
       UI();
+    }
+    //returns mem usage
+    function getMem(type, len, p0) {
+      //len = parseInt(len);
+      if (type < 32) {
+        if (bmax < 10000 && p0 ==3) { //8266 DMA uses 5x the mem
+          if (type > 29) return len*20; //RGBW
+          return len*15;
+        } else if (bmax > 10000) //ESP32 RMT uses double buffer?
+        {
+          if (type > 29) return len*8; //RGBW
+          return len*6;
+        }
+        if (type > 29) return len*4; //RGBW
+        return len*3;
+      }
+      if (type > 31 && type < 48) return 5;
+      if (type == 44 || type == 45) return len*4; //RGBW
+      return len*3;
     }
 		function UI()
 		{
-      var isRGBW = false;
+      var isRGBW = false, memu = 0;
       
       d.getElementById('ampwarning').style.display = (d.Sf.MA.value > 7200) ? 'inline':'none';
 	  
@@ -61,7 +101,9 @@
           d.getElementById("p0d"+n).innerHTML = (type > 49) ? "Data pin:" : (type >41) ? "Pins:" : "Pin:";
           d.getElementById("p1d"+n).innerHTML = (type > 49) ? "Clk:" : "";
           var LK = d.getElementsByName("L1"+n)[0];
-          //n=(n==""?0:parseInt(n,10));
+
+          memu += getMem(type, d.getElementsByName("LC"+n)[0].value, d.getElementsByName("L0"+n)[0].value);
+
           for (p=1; p<5; p++) {
             var LK = d.getElementsByName("L"+p+n)[0];
             if (!LK) continue;
@@ -76,6 +118,8 @@
             }
           }
           if (type == 30 || type == 31 || type == 44 || type == 45) isRGBW = true;
+          d.getElementById("dig"+n).style.display = (type > 31 && type < 48) ? "none":"inline";
+          d.getElementById("psd"+n).innerHTML = (type > 31 && type < 48) ? "Index:":"Start:";
         }
       }
 
@@ -92,24 +136,20 @@
       }
 
       var LCs = d.getElementsByTagName("input");
-      var sLC = 0;
+      var sLC = 0, maxLC = 0;
       for (i=0; i<LCs.length; i++) {
         var nm = LCs[i].name.substring(0,2);
-        if (nm=="LC" && LCs[i].name != "LC") {var c = parseInt(LCs[i].value,10); if (c) sLC+=c; continue;}
-        if (nm=="L0") {var lc=d.getElementsByName("LC"+LCs[i].name.substring(2))[0]; if(LCs[i].value==3) lc.max=500; else lc.max=1500;}
-        if (nm=="L0" || nm=="L1" || nm=="RL" || nm=="BT" || nm=="IR" || nm=="AX")
-          if (LCs[i].value!="" && LCs[i].value!="-1") {
-            if (d.um_p && d.um_p.some((e)=>e==parseInt(LCs[i].value,10))) {alert("Usermod pin clash!");LCs[i].value="";LCs[i].focus();continue;}
-            for (j=0; j<LCs.length; j++)
-            {
-              if (i==j) continue;
-              var n2 = LCs[j].name.substring(0,2);
-              if (n2=="L0" || n2=="L1" || n2=="RL" || n2=="BT" || n2=="IR" || n2=="AX")
-                if (LCs[j].value!="" && LCs[i].value==LCs[j].value) {alert("Pin clash!");LCs[i].value="";LCs[i].focus();break;}
-            }
-          }
+        if (nm=="LC" && LCs[i].name != "LC") {var c = parseInt(LCs[i].value,10); if (c) {sLC+=c; if (c>maxLC) maxLC = c;} continue;}
       }
-      d.getElementById('ledwarning').style.display = (sLC > 1000) ? 'inline':'none';
+
+      d.getElementById('m0').innerHTML = memu;
+      bquot = memu / bmax * 100;
+      d.getElementById('dbar').style.background = `linear-gradient(90deg, ${bquot > 60 ? bquot > 90 ? "red":"orange":"#ccc"} 0 ${bquot}%, #444 ${bquot}% 100%)`;
+      d.getElementById('ledwarning').style.display = (maxLC > 800 || bquot > 80) ? 'inline':'none';
+      //TODO add warning "Recommended pins on ESP8266 are 1 and 2 (3 only with low LED count)"
+      //TODO add overmemory warning
+      //TODO block disallowed pins 6-11
+      d.getElementById('wreason').innerHTML = (bquot > 80) ? "than 60% of max. LED memory" : "800 LEDs per pin";
 
       //var val = Math.ceil((100 + d.Sf.LC.value * laprev)/500)/2;
       var val = Math.ceil((100 + sLC * laprev)/500)/2;
@@ -172,15 +212,16 @@
             <option value="4">BGR</option>
             <option value="5">GBR</option>
           </select><br>
-          <span id="p0d${i}">Pin:</span> <input type="number" name="L0${i}" min="0" max="40" required style="width:35px"/>
+          <span id="p0d${i}">Pin:</span> <input type="number" name="L0${i}" min="0" max="40" required style="width:35px" oninput="UI()"/>
           <span id="p1d${i}">Clock:</span> <input type="number" name="L1${i}" min="0" max="40" style="width:35px"/>
           <span id="p2d${i}"></span><input type="number" name="L2${i}" min="0" max="40" style="width:35px"/>
           <span id="p3d${i}"></span><input type="number" name="L3${i}" min="0" max="40" style="width:35px"/>
           <span id="p4d${i}"></span><input type="number" name="L4${i}" min="0" max="40" style="width:35px"/>
           <br>
-          Start: <input type="number" name="LS${i}" min="0" max="1500" required oninput="UI()" />&nbsp;
-          Count: <input type="number" name="LC${i}" min="0" max="1500" required oninput="UI()" /><br>
-          Reverse: <input type="checkbox" name="CV${i}"><br>
+          <span id="psd${i}">Start:</span> <input type="number" name="LS${i}" min="0" max="8191" value="0" required />&nbsp;
+          <div id="dig${i}" style="display:inline">
+          Count: <input type="number" name="LC${i}" min="0" max="2048" value="1" required oninput="UI()" /><br>
+          Reverse: <input type="checkbox" name="CV${i}"></div><br>
         </div>`;
         f.insertAdjacentHTML("beforeend", cn);
       }
@@ -196,6 +237,7 @@
 		function GetV()
 		{
       //values injected by server while sending HTML
+      //d.um_p=[];addLEDs(3);d.Sf.LC.value=250;addLEDs(1);d.Sf.L00.value=2;d.Sf.L10.value=0;d.Sf.LC0.value=250;d.Sf.LT0.value=22;d.Sf.CO0.value=0;d.Sf.LS0.value=0;d.Sf.LS0.checked=0;d.Sf.MA.value=5400;d.Sf.LA.value=55;d.getElementsByClassName("pow")[0].innerHTML="350mA";d.Sf.CA.value=40;d.Sf.AW.value=3;d.Sf.BO.checked=0;d.Sf.BP.value=3;d.Sf.GB.checked=0;d.Sf.GC.checked=1;d.Sf.TF.checked=1;d.Sf.TD.value=700;d.Sf.PF.checked=0;d.Sf.BF.value=64;d.Sf.TB.value=0;d.Sf.TL.value=60;d.Sf.TW.value=1;d.Sf.PB.selectedIndex=0;d.Sf.RV.checked=0;d.Sf.SL.checked=0;d.Sf.RL.value=12;d.Sf.RM.checked=0;d.Sf.BT.value=-1;d.Sf.IR.value=-1;d.Sf.AX.value=-1;
     }
 	</script>
 	<style>
@@ -205,13 +247,9 @@
 <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>
+		<button type="button" onclick="B()">Back</button><button type="button" onclick="trySubmit()">Save</button><hr>
     <h2>LED &amp; Hardware setup</h2>
-    Total LED count: <input name="LC" type="number" min="1" max="1500" oninput="UI()" required><br>
-    <div id="ledwarning" style="color: orange; display: none;">
-      &#9888; You might run into stability or lag issues.<br>
-      Use less than 1000 LEDs per ESP for the best experience!<br>
-  </div>
+    Total LED count: <input name="LC" type="number" min="1" max="8192" oninput="UI()" required><br>
   <i>Recommended power supply for brightest white:</i><br>
   <b><span id="psu">?</span></b><br>
   <span id="psu2"><br></span>
@@ -243,7 +281,13 @@
     <h3>Hardware setup</h3>
     <div id="mLC">LED outputs:</div>
     <button type="button" id="+" onclick="addLEDs(1)" style="display:none;border-radius:20px;height:36px;">+</button>
-    <button type="button" id="-" onclick="addLEDs(-1)" style="display:none;border-radius:20px;width:36px;height:36px;">-</button><br><br>
+    <button type="button" id="-" onclick="addLEDs(-1)" style="display:none;border-radius:20px;width:36px;height:36px;">-</button><br>
+    LED Memory Usage: <span id="m0">0</span> / <span id="m1">?</span> B<br>
+    <div id="dbar" style="display:inline-block; width: 100px; height: 10px; border-radius: 20px;"></div><br>
+    <div id="ledwarning" style="color: orange; display: none;">
+      &#9888; You might run into stability or lag issues.<br>
+      Use less than <span id="wreason">800 LEDs per pin</span> for the best experience!<br>
+    </div><br>
     Relay pin: <input type="number" min="-1" max="40" name="RL" onchange="UI()"> Active high <input type="checkbox" name="RM"><br>
     Button pin: <input type="number" min="-1" max="40" name="BT" onchange="UI()"><br>
     IR pin: <input type="number" min="-1" max="40" name="IR" onchange="UI()"><br>
@@ -291,7 +335,7 @@
         <option value=4>Legacy</option>
       </select>
     <br></span><hr>
-		<button type="button" onclick="B()">Back</button><button type="submit">Save</button>
+		<button type="button" onclick="B()">Back</button><button type="button" onclick="trySubmit()">Save</button>
 	</form>
 </body>
 </html>
diff --git a/wled00/html_settings.h b/wled00/html_settings.h
index c39c6b12d..a469b067d 100644
--- a/wled00/html_settings.h
+++ b/wled00/html_settings.h
@@ -71,16 +71,13 @@ Do not enable if WiFi is working correctly, increases power consumption.</i><div
 // Autogenerated from wled00/data/settings_leds.htm, do not edit!!
 const char PAGE_settings_leds[] PROGMEM = R"=====(<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta 
 name="viewport" content="width=500"><title>LED Settings</title><script>
-var d=document,laprev=55,maxST=1;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=!1;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 t=d.getElementsByTagName("select");for(s=0;s<t.length;s++)if("LT"==t[s].name.substring(0,2)){n=t[s].name.substring(2);var a=t[s].value;d.getElementById("p0d"+n).innerHTML=a>49?"Data pin:":a>41?"Pins:":"Pin:",d.getElementById("p1d"+n).innerHTML=a>49?"Clk:":"";var i=d.getElementsByName("L1"+n)[0];for(p=1;p<5;p++){(i=d.getElementsByName("L"+p+n)[0])&&(a>49&&1==p||a>41&&a<50&&p+40<a?(i.style.display="inline",i.required=!0):(i.style.display="none",i.required=!1,i.value=""))}30!=a&&31!=a&&44!=a&&45!=a||(e=!0)}var l=d.querySelectorAll(".wc"),o=l.length;for(s=0;s<o;s++)l[s].style.display=e?"inline":"none";if(d.activeElement==d.getElementsByName("LC")[0]){var s=d.getElementsByClassName("iST").length;1==s&&(d.getElementsByName("LC0")[0].value=d.getElementsByName("LC")[0].value)}var u=d.getElementsByTagName("input"),m=0;for(s=0;s<u.length;s++){var r=u[s].name.substring(0,2);if("LC"!=r||"LC"==u[s].name){if("L0"==r){var v=d.getElementsByName("LC"+u[s].name.substring(2))[0];3==u[s].value?v.max=500:v.max=1500}if(("L0"==r||"L1"==r||"RL"==r||"BT"==r||"IR"==r||"AX"==r)&&""!=u[s].value&&"-1"!=u[s].value){if(d.um_p&&d.um_p.some(e=>e==parseInt(u[s].value,10))){alert("Usermod pin clash!"),u[s].value="",u[s].focus();continue}for(j=0;j<u.length;j++)if(s!=j){var y=u[j].name.substring(0,2);if(("L0"==y||"L1"==y||"RL"==y||"BT"==y||"IR"==y||"AX"==y)&&""!=u[j].value&&u[s].value==u[j].value){alert("Pin clash!"),u[s].value="",u[s].focus();break}}}}else{var L=parseInt(u[s].value,10);L&&(m+=L)}}d.getElementById("ledwarning").style.display=m>1e3?"inline":"none";var c=Math.ceil((100+m*laprev)/500)/2;c=c>5?Math.ceil(c):c;t="";var f=30==d.Sf.LAsel.value,g=255==d.Sf.LAsel.value;c<1.02&&!f&&!g?t="ESP 5V pin with 1A USB supply":(t+=f?"12V ":g?"WS2815 12V ":"5V ",t+=c,t+="A supply connected to LEDs");var B=Math.ceil((100+m*laprev)/1500)/2,A="(for most effects, ~";A+=B=B>5?Math.ceil(B):B,A+="A is enough)<br>",d.getElementById("psu").innerHTML=t,d.getElementById("psu2").innerHTML=g?"":A}function addLEDs(e){if(e>1)return maxST=e,void(d.getElementById("+").style.display="inline");var n=d.getElementsByClassName("iST"),t=n.length;if(!(1==e&&t>=maxST||-1==e&&0==t)){var a=d.getElementById("mLC");if(1==e){var i=`<div class="iST">\n          ${t>0?'<hr style="width:260px">':""}\n          ${t+1}:\n          <select name="LT${t}" onchange="UI()">\n            <option value="22">WS281x</option>\n            <option value="30">SK6812 RGBW</option>\n            <option value="31">TM1814</option>\n            <option value="24">400kHz</option>\n            <option value="50">WS2801</option>\n            <option value="51">APA102</option>\n            <option value="52">LPD8806</option>\n            <option value="53">P9813</option>\n            <option value="41">PWM White</option>\n            <option value="42">PWM WWCW</option>\n            <option value="43">PWM RGB</option>\n            <option value="44">PWM RGBW</option>\n            <option value="45">PWM RGBWC</option>\n          </select>&nbsp;\n          Color Order:\n          <select name="CO${t}">\n            <option value="0">GRB</option>\n            <option value="1">RGB</option>\n            <option value="2">BRG</option>\n            <option value="3">RBG</option>\n            <option value="4">BGR</option>\n            <option value="5">GBR</option>\n          </select><br>\n          <span id="p0d${t}">Pin:</span> <input type="number" name="L0${t}" min="0" max="40" required style="width:35px"/>\n          <span id="p1d${t}">Clock:</span> <input type="number" name="L1${t}" min="0" max="40" style="width:35px"/>\n          <span id="p2d${t}"></span><input type="number" name="L2${t}" min="0" max="40" style="width:35px"/>\n          <span id="p3d${t}"></span><input type="number" name="L3${t}" min="0" max="40" style="width:35px"/>\n          <span id="p4d${t}"></span><input type="number" name="L4${t}" min="0" max="40" style="width:35px"/>\n          <br>\n          Start: <input type="number" name="LS${t}" min="0" max="1500" required oninput="UI()" />&nbsp;\n          Count: <input type="number" name="LC${t}" min="0" max="1500" required oninput="UI()" /><br>\n          Reverse: <input type="checkbox" name="CV${t}"><br>\n        </div>`;a.insertAdjacentHTML("beforeend",i)}-1==e&&(n[--t].remove(),--t),d.getElementById("+").style.display=t<maxST-1?"inline":"none",d.getElementById("-").style.display=t>0?"inline":"none",UI()}}function GetV() {var d=document;
+var d=document,laprev=55,maxST=1,bmax=5e3,bquot=0;function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#led-settings")}function B(){window.open("/settings","_self")}function trySubmit(){var e=d.getElementsByTagName("input");for(i=0;i<e.length;i++){var n=e[i].name.substring(0,2);if(("L0"==n||"L1"==n||"RL"==n||"BT"==n||"IR"==n||"AX"==n)&&""!=e[i].value&&"-1"!=e[i].value){if(e[i].value>5&&e[i].value<12)return alert("Sorry, pins 6-11 can not be used."),void e[i].focus();if(d.um_p&&d.um_p.some(n=>n==parseInt(e[i].value,10)))return alert("Usermod pin conflict!"),void e[i].focus();for(j=i+1;j<e.length;j++){var t=e[j].name.substring(0,2);if(("L0"==t||"L1"==t||"RL"==t||"BT"==t||"IR"==t||"AX"==t)&&""!=e[j].value&&e[i].value==e[j].value)return alert("Pin conflict!"),void e[i].focus()}}}if(bquot>100){var a="Too many LEDs for me to handle!";return bmax<1e4&&(a+=" Consider using an ESP32."),void alert(a)}d.Sf.reportValidity()&&d.Sf.submit()}function S(){GetV(),setABL(),maxST>4&&(bmax=32e3),d.getElementById("m1").innerHTML=bmax}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 getMem(e,n,t){return e<32?bmax<1e4&&3==t?e>29?20*n:15*n:bmax>1e4?e>29?8*n:6*n:e>29?4*n:3*n:e>31&&e<48?5:44==e||45==e?4*n:3*n}function UI(){var e=!1,t=0;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 i=d.getElementsByTagName("select");for(u=0;u<i.length;u++)if("LT"==i[u].name.substring(0,2)){n=i[u].name.substring(2);var a=i[u].value;d.getElementById("p0d"+n).innerHTML=a>49?"Data pin:":a>41?"Pins:":"Pin:",d.getElementById("p1d"+n).innerHTML=a>49?"Clk:":"";var l=d.getElementsByName("L1"+n)[0];for(t+=getMem(a,d.getElementsByName("LC"+n)[0].value,d.getElementsByName("L0"+n)[0].value),p=1;p<5;p++){(l=d.getElementsByName("L"+p+n)[0])&&(a>49&&1==p||a>41&&a<50&&p+40<a?(l.style.display="inline",l.required=!0):(l.style.display="none",l.required=!1,l.value=""))}30!=a&&31!=a&&44!=a&&45!=a||(e=!0),d.getElementById("dig"+n).style.display=a>31&&a<48?"none":"inline",d.getElementById("psd"+n).innerHTML=a>31&&a<48?"Index:":"Start:"}var o=d.querySelectorAll(".wc"),s=o.length;for(u=0;u<s;u++)o[u].style.display=e?"inline":"none";if(d.activeElement==d.getElementsByName("LC")[0]){var u=d.getElementsByClassName("iST").length;1==u&&(d.getElementsByName("LC0")[0].value=d.getElementsByName("LC")[0].value)}var r=d.getElementsByTagName("input"),m=0,v=0;for(u=0;u<r.length;u++){if("LC"!=r[u].name.substring(0,2)||"LC"==r[u].name);else{var y=parseInt(r[u].value,10);y&&(m+=y,y>v&&(v=y))}}d.getElementById("m0").innerHTML=t,bquot=t/bmax*100,d.getElementById("dbar").style.background=`linear-gradient(90deg, ${bquot>60?bquot>90?"red":"orange":"#ccc"} 0 ${bquot}%, #444 ${bquot}% 100%)`,d.getElementById("ledwarning").style.display=v>800||bquot>80?"inline":"none",d.getElementById("wreason").innerHTML=bquot>80?"than 60% of max. LED memory":"800 LEDs per pin";var g=Math.ceil((100+m*laprev)/500)/2;g=g>5?Math.ceil(g):g;i="";var L=30==d.Sf.LAsel.value,c=255==d.Sf.LAsel.value;g<1.02&&!L&&!c?i="ESP 5V pin with 1A USB supply":(i+=L?"12V ":c?"WS2815 12V ":"5V ",i+=g,i+="A supply connected to LEDs");var f=Math.ceil((100+m*laprev)/1500)/2,B="(for most effects, ~";B+=f=f>5?Math.ceil(f):f,B+="A is enough)<br>",d.getElementById("psu").innerHTML=i,d.getElementById("psu2").innerHTML=c?"":B}function addLEDs(e){if(e>1)return maxST=e,void(d.getElementById("+").style.display="inline");var n=d.getElementsByClassName("iST"),t=n.length;if(!(1==e&&t>=maxST||-1==e&&0==t)){var i=d.getElementById("mLC");if(1==e){var a=`<div class="iST">\n          ${t>0?'<hr style="width:260px">':""}\n          ${t+1}:\n          <select name="LT${t}" onchange="UI()">\n            <option value="22">WS281x</option>\n            <option value="30">SK6812 RGBW</option>\n            <option value="31">TM1814</option>\n            <option value="24">400kHz</option>\n            <option value="50">WS2801</option>\n            <option value="51">APA102</option>\n            <option value="52">LPD8806</option>\n            <option value="53">P9813</option>\n            <option value="41">PWM White</option>\n            <option value="42">PWM WWCW</option>\n            <option value="43">PWM RGB</option>\n            <option value="44">PWM RGBW</option>\n            <option value="45">PWM RGBWC</option>\n          </select>&nbsp;\n          Color Order:\n          <select name="CO${t}">\n            <option value="0">GRB</option>\n            <option value="1">RGB</option>\n            <option value="2">BRG</option>\n            <option value="3">RBG</option>\n            <option value="4">BGR</option>\n            <option value="5">GBR</option>\n          </select><br>\n          <span id="p0d${t}">Pin:</span> <input type="number" name="L0${t}" min="0" max="40" required style="width:35px" oninput="UI()"/>\n          <span id="p1d${t}">Clock:</span> <input type="number" name="L1${t}" min="0" max="40" style="width:35px"/>\n          <span id="p2d${t}"></span><input type="number" name="L2${t}" min="0" max="40" style="width:35px"/>\n          <span id="p3d${t}"></span><input type="number" name="L3${t}" min="0" max="40" style="width:35px"/>\n          <span id="p4d${t}"></span><input type="number" name="L4${t}" min="0" max="40" style="width:35px"/>\n          <br>\n          <span id="psd${t}">Start:</span> <input type="number" name="LS${t}" min="0" max="8191" value="0" required />&nbsp;\n          <div id="dig${t}" style="display:inline">\n          Count: <input type="number" name="LC${t}" min="0" max="2048" value="1" required oninput="UI()" /><br>\n          Reverse: <input type="checkbox" name="CV${t}"></div><br>\n        </div>`;i.insertAdjacentHTML("beforeend",a)}-1==e&&(n[--t].remove(),--t),d.getElementById("+").style.display=t<maxST-1?"inline":"none",d.getElementById("-").style.display=t>0?"inline":"none",UI()}}function GetV() {var d=document;
 %CSS%%SCSS%</head><body onload="S()"><form
  id="form_s" name="Sf" method="post"><div class="helpB"><button type="button" 
 onclick="H()">?</button></div><button type="button" onclick="B()">Back</button>
-<button type="submit">Save</button><hr><h2>LED &amp; Hardware setup</h2>
-Total LED count: <input name="LC" type="number" min="1" max="1500" 
-oninput="UI()" required><br><div id="ledwarning" 
-style="color:orange;display:none">
-&#9888; You might run into stability or lag issues.<br>
-Use less than 1000 LEDs per ESP for the best experience!<br></div><i>
+<button type="button" onclick="trySubmit()">Save</button><hr><h2>
+LED &amp; Hardware setup</h2>Total LED count: <input name="LC" type="number" 
+min="1" max="8192" oninput="UI()" required><br><i>
 Recommended power supply for brightest white:</i><br><b><span id="psu">?</span>
 </b><br><span id="psu2"><br></span><br>Enable automatic brightness limiter: 
 <input type="checkbox" name="ABen" onchange="enABL()" id="able"><br><div 
@@ -106,7 +103,13 @@ Hardware setup</h3><div id="mLC">LED outputs:</div><button type="button" id="+"
 onclick="addLEDs(1)" style="display:none;border-radius:20px;height:36px">+
 </button> <button type="button" id="-" onclick="addLEDs(-1)" 
 style="display:none;border-radius:20px;width:36px;height:36px">-</button><br>
-<br>Relay pin: <input type="number" min="-1" max="40" name="RL" onchange="UI()">
+LED Memory Usage: <span id="m0">0</span> / <span id="m1">?</span> B<br><div 
+id="dbar" 
+style="display:inline-block;width:100px;height:10px;border-radius:20px"></div>
+<br><div id="ledwarning" style="color:orange;display:none">
+&#9888; You might run into stability or lag issues.<br>Use less than <span 
+id="wreason">800 LEDs per pin</span> for the best experience!<br></div><br>
+Relay pin: <input type="number" min="-1" max="40" name="RL" onchange="UI()">
  Active high <input type="checkbox" name="RM"><br>Button pin: <input 
 type="number" min="-1" max="40" name="BT" onchange="UI()"><br>IR pin: <input 
 type="number" min="-1" max="40" name="IR" onchange="UI()"><br>AUX pin: <input 
@@ -137,7 +140,7 @@ Auto-calculate white channel from RGB:<br><select name="AW"><option value="0">
 None</option><option value="1">Brighter</option><option value="2">Accurate
 </option><option value="3">Dual</option><option value="4">Legacy</option>
 </select><br></span><hr><button type="button" onclick="B()">Back</button><button
- type="submit">Save</button></form></body></html>)=====";
+ type="button" onclick="trySubmit()">Save</button></form></body></html>)=====";
 
 
 #ifdef WLED_ENABLE_DMX