From 9e5d45d0de8bb7fa3b8760b50dc6d364d04b53c6 Mon Sep 17 00:00:00 2001
From: cschwinne <dev.aircoookie@gmail.com>
Date: Sun, 3 Oct 2021 20:48:08 +0200
Subject: [PATCH] Optional custom start indices

---
 wled00/data/settings_leds.htm | 34 +++++++++++++++++++++++++++-------
 wled00/data/style.css         |  3 +++
 wled00/html_settings.h        | 31 ++++++++++++++++---------------
 3 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/wled00/data/settings_leds.htm b/wled00/data/settings_leds.htm
index 232680f24..4a601a2a0 100644
--- a/wled00/data/settings_leds.htm
+++ b/wled00/data/settings_leds.htm
@@ -6,7 +6,8 @@
 	<title>LED Settings</title>
 	<script>
     var d=document,laprev=55,maxB=1,maxM=4000,maxPB=4096,maxL=1333,maxLbquot=0; //maximum bytes for LED allocation: 4kB for 8266, 32kB for 32
-		function H()
+		var customStarts=false,startsDirty=[];
+    function H()
 		{
 			window.open("https://github.com/Aircoookie/WLED/wiki/Settings#led-settings");
 		}
@@ -70,7 +71,7 @@
       if (bquot > 100) {var msg = "Too many LEDs for me to handle!"; if (maxM < 10000) msg += "\n\rConsider using an ESP32."; alert(msg);}
       if (d.Sf.checkValidity()) d.Sf.submit(); //https://stackoverflow.com/q/37323914
     }
-		function S(){GetV();setABL();}
+		function S(){GetV();checkSi();setABL();}
     function enABL()
     {
       var en = gId('able').checked;
@@ -186,12 +187,13 @@
         // do we have a led count field
         if (nm=="LC") {
           var c=parseInt(LCs[i].value,10);
-          //gId("ls"+n).value=sLC; // update led start field (TODO except if it has been manually changed)
+          if (!customStarts || !startsDirty[n]) gId("ls"+n).value=sLC;
+          gId("ls"+n).disabled = !customStarts;
           if(c){
             var s = parseInt(gId("ls"+n).value);
             if (s+c > sLC) sLC = s+c;
             if(c>maxLC)maxLC=c;
-            var t = parseInt(d.getElementsByName("LT"+n)[0].value, 10); // LED type SELECT
+            var t = parseInt(d.getElementsByName("LT"+n)[0].value); // LED type SELECT
             if (t>16) sPC+=c; //virtual out busses do not count towards physical LEDs
           } // increase led count
           continue;
@@ -203,7 +205,7 @@
         }
         // ignore IP address (stored in pins for virtual busses)
         if (nm=="L0" || nm=="L1" || nm=="L2" || nm=="L3") {
-          var t = parseInt(d.getElementsByName("LT"+n)[0].value, 10); // LED type SELECT
+          var t = parseInt(d.getElementsByName("LT"+n)[0].value); // LED type SELECT
           if (t<16) {
             LCs[i].max = 255;
             LCs[i].min = 0;
@@ -320,7 +322,7 @@ ${i+1}:
 <option value="5">GBR</option>
 </select></div>
 <br>
-<span id="psd${i}">Start:</span> <input type="number" name="LS${i}" id="ls${i}" class="l" min="0" max="8191" value="${lastEnd(i)}" onchange="UI()" required />&nbsp;
+<span id="psd${i}">Start:</span> <input type="number" name="LS${i}" id="ls${i}" class="l starts" min="0" max="8191" value="${lastEnd(i)}" oninput="UI();startsDirty[${i}]=true;" required />&nbsp;
 <div id="dig${i}c" style="display:inline">Length: <input type="number" name="LC${i}" class="l" min="1" max="${maxPB}" value="1" required oninput="UI()" /></div>
 <br>
 <span id="p0d${i}">GPIO:</span> <input type="number" name="L0${i}" min="0" max="33" required class="xs" onchange="UI()"/>
@@ -362,6 +364,23 @@ ${i+1}:
       c += `<span style="cursor: pointer;" onclick="off('${bt}')">&nbsp;&#215;</span><br>`;
       gId("btns").innerHTML = c;
     }
+    function tglSi() {
+      customStarts = !customStarts;
+      if (!customStarts) startsDirty = []; //set all starts to clean
+      UI();
+    }
+    function checkSi() { //on load, checks whether there are custom start fields
+      var cs = false;
+      for (var i=1; i < d.getElementsByClassName("iST").length; i++) {
+        var v = parseInt(gId("ls"+(i-1)).value) + parseInt(d.getElementsByName("LC"+(i-1))[0].value);
+        if (v != parseInt(gId("ls"+i).value)) {cs = true; startsDirty[i] = true;}
+      }
+      if (parseInt(gId("ls0").value) != 0) {cs = true; startsDirty[0] = true;}
+      if (cs) {
+        gId("si").checked = true;
+        tglSi();
+      }
+    }
     function uploadFile(name) {
       var req = new XMLHttpRequest();
       req.addEventListener('load', function(){showToast(this.responseText,this.status >= 400)});
@@ -428,8 +447,9 @@ ${i+1}:
       &#9888; You might run into stability or lag issues.<br>
       Use less than <span id="wreason">800 LEDs per output</span> for the best experience!<br>
     </div>
+    <hr style="width:260px">
     Make a segment for each output: <input type="checkbox" name="MS"> <br>
-    <!--Custom bus start indices: <input type="checkbox" id="cs"> <br>-->
+    Custom bus start indices: <input type="checkbox" onchange="tglSi()" id="si"> <br>
     <hr style="width:260px">
     <div id="btns"></div>
     Touch threshold: <input type="number" class="s" min="0" max="100" name="TT" required><br>
diff --git a/wled00/data/style.css b/wled00/data/style.css
index 7f633439c..06c2e8a39 100644
--- a/wled00/data/style.css
+++ b/wled00/data/style.css
@@ -35,6 +35,9 @@ input {
   font-family: Verdana, sans-serif;
   border: 0.5ch solid #333;
 }
+input:disabled {
+  color: #888;
+}
 input[type="number"] {
   width: 4em;
   margin: 2px;
diff --git a/wled00/html_settings.h b/wled00/html_settings.h
index 735b14719..4fe04c4bf 100644
--- a/wled00/html_settings.h
+++ b/wled00/html_settings.h
@@ -6,7 +6,7 @@
  */ 
 
 // 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}.btn,button{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.3ch solid #333;display:inline-block;font-size:20px;margin:12px 8px 8px;padding:1px 6px;cursor:pointer;text-decoration:none}.lnk{border:0}.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;margin:2px}input[type=number].xxl{width:100px}input[type=number].xl{width:85px}input[type=number].l{width:63px}input[type=number].m{width:56px}input[type=number].s{width:49px}input[type=number].xs{width:42px}input[type=checkbox]{transform:scale(1.5);margin-right:10px}select{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.5ch solid #333}td{padding:2px}.d5{width:4.5em!important}#toast{opacity:0;background-color:#444;border-radius:5px;bottom:64px;color:#fff;font-size:17px;padding:16px;pointer-events:none;position:fixed;text-align:center;z-index:5;transform:translateX(-50%%);max-width:90%%;left:50%%}#toast.show{opacity:1;background-color:#264;animation:fadein .5s,fadein .5s 2.5s reverse}#toast.error{opacity:1;background-color:#b21;animation:fadein .5s}</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}.btn,button{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.3ch solid #333;display:inline-block;font-size:20px;margin:12px 8px 8px;padding:1px 6px;cursor:pointer;text-decoration:none}.lnk{border:0}.helpB{text-align:left;position:absolute;width:60px}input{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.5ch solid #333}input:disabled{color:#888}input[type=number]{width:4em;margin:2px}input[type=number].xxl{width:100px}input[type=number].xl{width:85px}input[type=number].l{width:63px}input[type=number].m{width:56px}input[type=number].s{width:49px}input[type=number].xs{width:42px}input[type=checkbox]{transform:scale(1.5);margin-right:10px}select{background:#333;color:#fff;font-family:Verdana,sans-serif;border:.5ch solid #333}td{padding:2px}.d5{width:4.5em!important}#toast{opacity:0;background-color:#444;border-radius:5px;bottom:64px;color:#fff;font-size:17px;padding:16px;pointer-events:none;position:fixed;text-align:center;z-index:5;transform:translateX(-50%%);max-width:90%%;left:50%%}#toast.show{opacity:1;background-color:#264;animation:fadein .5s,fadein .5s 2.5s reverse}#toast.error{opacity:1;background-color:#b21;animation:fadein .5s}</style>)=====";
 
 
 // Autogenerated from wled00/data/settings.htm, do not edit!!
@@ -77,7 +77,7 @@ onclick="B()">Back</button><button type="submit">Save & Connect</button></form>
 // 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 timeout,d=document,laprev=55,maxB=1,maxM=4e3,maxPB=4096,maxL=1333,maxLbquot=0;function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#led-settings")}function B(){window.open("/settings","_self")}function gId(e){return d.getElementById(e)}function off(e){d.getElementsByName(e)[0].value=-1}function showToast(e,n=!1){var t=gId("toast");t.innerHTML=e,t.className=n?"error":"show",clearTimeout(timeout),t.style.animation="none",timeout=setTimeout((function(){t.className=t.className.replace("show","")}),2900)}function bLimits(e,n,t,i){maxB=e,maxM=t,maxPB=n,maxL=i}function pinsOK(){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||"L2"==n||"L3"==n){var t=e[i].name.substring(2);if(parseInt(d.getElementsByName("LT"+t)[0].value,10)<16)continue}if(("L0"==n||"L1"==n||"L2"==n||"L3"==n||"L4"==n||"RL"==n||"BT"==n||"IR"==n)&&""!=e[i].value&&"-1"!=e[i].value){if(d.um_p&&d.um_p.some(n=>n==parseInt(e[i].value,10)))return alert(`Sorry, pins ${JSON.stringify(d.um_p)} can't be used.`),e[i].value="",e[i].focus(),!1;if(e[i].value>5&&e[i].value<12)return alert("Sorry, pins 6-11 can not be used."),e[i].value="",e[i].focus(),!1;if("IR"!=n&&"BT"!=n&&e[i].value>33)return alert("Sorry, pins >33 are input only."),e[i].value="",e[i].focus(),!1;for(j=i+1;j<e.length;j++){var a=e[j].name.substring(0,2);if("L0"==a||"L1"==a||"L2"==a||"L3"==a||"L4"==a||"RL"==a||"BT"==a||"IR"==a){if("L"===a.substring(0,1)){var s=e[j].name.substring(2);if(parseInt(d.getElementsByName("LT"+s)[0].value,10)<16)continue}if(""!=e[j].value&&e[i].value==e[j].value)return alert(`Pin conflict between ${e[i].name}/${e[j].name}!`),e[j].value="",e[j].focus(),!1}}}}return!0}function trySubmit(e){if(d.Sf.data.value="",e.preventDefault(),!pinsOK())return e.stopPropagation(),!1;if(bquot>100){var n="Too many LEDs for me to handle!";maxM<1e4&&(n+="\n\rConsider using an ESP32."),alert(n)}d.Sf.checkValidity()&&d.Sf.submit()}function S(){GetV(),setABL()}function enABL(){var e=gId("able").checked;d.Sf.LA.value=e?laprev:0,gId("abl").style.display=e?"inline":"none",gId("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,gId("LAdis").style.display=50==e?"inline":"none",UI()}function setABL(){switch(gId("able").checked=!0,d.Sf.LAsel.value=50,parseInt(d.Sf.LA.value)){case 0:gId("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:gId("LAdis").style.display="inline"}gId("m1").innerHTML=maxM,d.getElementsByName("Sf")[0].addEventListener("submit",trySubmit),UI()}function getMem(e,n,t){return e>=10&&e<=12?6*n:e>15&&e<32?maxM<1e4&&3==t?e>29?20*n:15*n:maxM>=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(e=!1){var n=!1,t=0;gId("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 a=d.getElementsByTagName("select");for(i=0;i<a.length;i++)if("LT"==a[i].name.substring(0,2)){var s=a[i].name.substring(2),o=parseInt(a[i].value,10);gId("p0d"+s).innerHTML=o>=10&&o<=15?"IP address:":o>49?"Data GPIO:":o>41?"GPIOs:":"GPIO:",gId("p1d"+s).innerHTML=o>49?"Clk GPIO:":"";var l=d.getElementsByName("L1"+s)[0];for(t+=getMem(o,d.getElementsByName("LC"+s)[0].value,d.getElementsByName("L0"+s)[0].value),L=1;L<5;L++){(l=d.getElementsByName("L"+L+s)[0])&&(o>=10&&o<=15&&L<4||o>49&&1==L||o>41&&o<50&&L+40<o?(l.style.display="inline",l.required=!0):(l.style.display="none",l.required=!1,l.value=""))}e&&o>31&&o<48&&(d.getElementsByName("LC"+s)[0].value=1),n|=30==o||31==o||o>40&&o<46&&43!=o,gId("co"+s).style.display=o<16||41==o||42==o?"none":"inline",gId("dig"+s+"c").style.display=o>40&&o<48?"none":"inline",gId("dig"+s+"r").style.display=o<16?"none":"inline",gId("dig"+s+"s").style.display=o<16||o>40&&o<48?"none":"inline",gId("rev"+s).innerHTML=o>40&&o<48?"Inverted":"Reverse (rotated 180°)",gId("psd"+s).innerHTML=o>40&&o<48?"Index:":"Start:"}var r=d.querySelectorAll(".wc"),u=r.length;for(i=0;i<u;i++)r[i].style.display=n?"inline":"none";var p=d.getElementsByTagName("input"),m=0,v=0,c=0;for(i=0;i<p.length;i++){var g=p[i].name.substring(0,2);s=p[i].name.substring(2);if("LC"!=g){if("L0"==g||"L1"==g)d.getElementsByName("LC"+s)[0].max=maxPB;if("L0"==g||"L1"==g||"L2"==g||"L3"==g){if((o=parseInt(d.getElementsByName("LT"+s)[0].value,10))<16){p[i].max=255,p[i].min=0;continue}p[i].max=33,p[i].min=-1}if(("L0"==g||"L1"==g||"L2"==g||"L3"==g||"L4"==g||"RL"==g||"BT"==g||"IR"==g)&&""!=p[i].value&&"-1"!=p[i].value){var L=[];if(d.um_p&&Array.isArray(d.um_p))for(k=0;k<d.um_p.length;k++)L.push(d.um_p[k]);for(j=0;j<p.length;j++)if(i!=j){var f=p[j].name.substring(0,2);if("L0"==f||"L1"==f||"L2"==f||"L3"==f||"L4"==f||"RL"==f||"BT"==f||"IR"==f){if("L"===f.substring(0,1)){var y=p[j].name.substring(2);if(parseInt(d.getElementsByName("LT"+y)[0].value,10)<16)continue}""!=p[j].value&&"-1"!=p[j].value&&L.push(parseInt(p[j].value,10))}}L.some(e=>e==parseInt(p[i].value,10))?p[i].style.color="red":p[i].style.color=parseInt(p[i].value,10)>33?"orange":"#fff"}}else{var I=parseInt(p[i].value,10);I&&((a=parseInt(gId("ls"+s).value))+I>m&&(m=a+I),I>c&&(c=I),(o=parseInt(d.getElementsByName("LT"+s)[0].value,10))>16&&(v+=I))}}gId("lc").textContent=m,gId("pc").textContent=m==v?"":"("+v+" physical)",gId("m0").innerHTML=t,bquot=t/maxM*100,gId("dbar").style.background=`linear-gradient(90deg, ${bquot>60?bquot>90?"red":"orange":"#ccc"} 0 ${bquot}%%, #444 ${bquot}%% 100%%)`,gId("ledwarning").style.display=m>maxPB||c>800||bquot>80?"inline":"none",gId("ledwarning").style.color=m>maxPB||c>maxPB||bquot>100?"red":"orange",gId("wreason").innerHTML=bquot>80?"80% of max. LED memory"+(bquot>100?` (<b>ERROR: Using over ${maxM}B!</b>)`:""):"800 LEDs per output";var b=Math.ceil((100+v*laprev)/500)/2;b=b>5?Math.ceil(b):b;a="";var B=30==d.Sf.LAsel.value,x=255==d.Sf.LAsel.value;b<1.02&&!B&&!x?a="ESP 5V pin with 1A USB supply":(a+=B?"12V ":x?"WS2815 12V ":"5V ",a+=b,a+="A supply connected to LEDs");var h=Math.ceil((100+v*laprev)/1500)/2,S="(for most effects, ~";S+=h=h>5?Math.ceil(h):h,S+="A is enough)<br>",gId("psu").innerHTML=a,gId("psu2").innerHTML=x?"":S,gId("json").style.display=8==d.Sf.IT.value?"":"none"}function lastEnd(e){if(e<1)return 0;v=parseInt(d.getElementsByName("LS"+(e-1))[0].value)+parseInt(d.getElementsByName("LC"+(e-1))[0].value);var n=parseInt(d.getElementsByName("LT"+(e-1))[0].value);return n>31&&n<48&&(v=1),isNaN(v)?0:v}function addLEDs(e){if(e>1)return maxB=e,void(gId("+").style.display="inline");var n=d.getElementsByClassName("iST"),t=n.length;if(!(1==e&&t>=maxB||-1==e&&0==t)){var i=gId("mLC");if(1==e){var a=`<div class="iST">\n<hr style="width:260px">\n${t+1}:\n<select name="LT${t}" onchange="UI(true)">\n<option value="22" selected>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<option value="10">DDP RGB (network)</option>\n\x3c!--option value="11">E1.31 RGB (network)</option--\x3e\n\x3c!--option value="12">ArtNet RGB (network)</option--\x3e\n</select>&nbsp;\n<div id="co${t}" style="display:inline">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></div>\n<br>\n<span id="psd${t}">Start:</span> <input type="number" name="LS${t}" id="ls${t}" class="l" min="0" max="8191" value="${lastEnd(t)}" onchange="UI()" required />&nbsp;\n<div id="dig${t}c" style="display:inline">Length: <input type="number" name="LC${t}" class="l" min="1" max="${maxPB}" value="1" required oninput="UI()" /></div>\n<br>\n<span id="p0d${t}">GPIO:</span> <input type="number" name="L0${t}" min="0" max="33" required class="xs" onchange="UI()"/>\n<span id="p1d${t}"></span><input type="number" name="L1${t}" min="0" max="33" class="xs" onchange="UI()"/>\n<span id="p2d${t}"></span><input type="number" name="L2${t}" min="0" max="33" class="xs" onchange="UI()"/>\n<span id="p3d${t}"></span><input type="number" name="L3${t}" min="0" max="33" class="xs" onchange="UI()"/>\n<span id="p4d${t}"></span><input type="number" name="L4${t}" min="0" max="33" class="xs" onchange="UI()"/>\n<br>\n<div id="dig${t}r" style="display:inline"><span id="rev${t}">Reversed</span>: <input type="checkbox" name="CV${t}"></div>&nbsp;\n<div id="dig${t}s" style="display:inline">Skip 1<sup>st</sup> LED: <input id="sl${t}" type="checkbox" name="SL${t}"></div>\n<br>\n</div>`;i.insertAdjacentHTML("beforeend",a)}-1==e&&(n[--t].remove(),--t),gId("+").style.display=t<maxB-1?"inline":"none",gId("-").style.display=t>0?"inline":"none",UI()}}function addBtn(e,n,t){var i=gId("btns").innerHTML,a="BT"+e;i+=`Button ${e} GPIO: <input type="number" min="-1" max="40" name="${a}" onchange="UI()" class="xs" value="${n}">`,i+=`&nbsp;<select name="${"BE"+e}">`,i+=`<option value="0" ${0==t?"selected":""}>Disabled</option>`,i+=`<option value="2" ${2==t?"selected":""}>Pushbutton</option>`,i+=`<option value="3" ${3==t?"selected":""}>Push inverted</option>`,i+=`<option value="4" ${4==t?"selected":""}>Switch</option>`,i+=`<option value="5" ${5==t?"selected":""}>PIR sensor</option>`,i+=`<option value="6" ${6==t?"selected":""}>Touch</option>`,i+=`<option value="7" ${7==t?"selected":""}>Analog</option>`,i+=`<option value="8" ${8==t?"selected":""}>Analog inverted</option>`,i+="</select>",i+=`<span style="cursor: pointer;" onclick="off('${a}')">&nbsp;&#215;</span><br>`,gId("btns").innerHTML=i}function uploadFile(e){var n=new XMLHttpRequest;n.addEventListener("load",(function(){showToast(this.responseText,this.status>=400)})),n.addEventListener("error",(function(e){showToast(e.stack,!0)})),n.open("POST","/upload");var t=new FormData;return t.append("data",d.Sf.data.files[0],e),n.send(t),d.Sf.data.value="",!1}function GetV() {var d=document;
+var timeout,d=document,laprev=55,maxB=1,maxM=4e3,maxPB=4096,maxL=1333,maxLbquot=0,customStarts=!1,startsDirty=[];function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#led-settings")}function B(){window.open("/settings","_self")}function gId(e){return d.getElementById(e)}function off(e){d.getElementsByName(e)[0].value=-1}function showToast(e,n=!1){var t=gId("toast");t.innerHTML=e,t.className=n?"error":"show",clearTimeout(timeout),t.style.animation="none",timeout=setTimeout((function(){t.className=t.className.replace("show","")}),2900)}function bLimits(e,n,t,a){maxB=e,maxM=t,maxPB=n,maxL=a}function pinsOK(){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||"L2"==n||"L3"==n){var t=e[i].name.substring(2);if(parseInt(d.getElementsByName("LT"+t)[0].value,10)<16)continue}if(("L0"==n||"L1"==n||"L2"==n||"L3"==n||"L4"==n||"RL"==n||"BT"==n||"IR"==n)&&""!=e[i].value&&"-1"!=e[i].value){if(d.um_p&&d.um_p.some(n=>n==parseInt(e[i].value,10)))return alert(`Sorry, pins ${JSON.stringify(d.um_p)} can't be used.`),e[i].value="",e[i].focus(),!1;if(e[i].value>5&&e[i].value<12)return alert("Sorry, pins 6-11 can not be used."),e[i].value="",e[i].focus(),!1;if("IR"!=n&&"BT"!=n&&e[i].value>33)return alert("Sorry, pins >33 are input only."),e[i].value="",e[i].focus(),!1;for(j=i+1;j<e.length;j++){var a=e[j].name.substring(0,2);if("L0"==a||"L1"==a||"L2"==a||"L3"==a||"L4"==a||"RL"==a||"BT"==a||"IR"==a){if("L"===a.substring(0,1)){var s=e[j].name.substring(2);if(parseInt(d.getElementsByName("LT"+s)[0].value,10)<16)continue}if(""!=e[j].value&&e[i].value==e[j].value)return alert(`Pin conflict between ${e[i].name}/${e[j].name}!`),e[j].value="",e[j].focus(),!1}}}}return!0}function trySubmit(e){if(d.Sf.data.value="",e.preventDefault(),!pinsOK())return e.stopPropagation(),!1;if(bquot>100){var n="Too many LEDs for me to handle!";maxM<1e4&&(n+="\n\rConsider using an ESP32."),alert(n)}d.Sf.checkValidity()&&d.Sf.submit()}function S(){GetV(),checkSi(),setABL()}function enABL(){var e=gId("able").checked;d.Sf.LA.value=e?laprev:0,gId("abl").style.display=e?"inline":"none",gId("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,gId("LAdis").style.display=50==e?"inline":"none",UI()}function setABL(){switch(gId("able").checked=!0,d.Sf.LAsel.value=50,parseInt(d.Sf.LA.value)){case 0:gId("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:gId("LAdis").style.display="inline"}gId("m1").innerHTML=maxM,d.getElementsByName("Sf")[0].addEventListener("submit",trySubmit),UI()}function getMem(e,n,t){return e>=10&&e<=12?6*n:e>15&&e<32?maxM<1e4&&3==t?e>29?20*n:15*n:maxM>=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(e=!1){var n=!1,t=0;gId("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 a=d.getElementsByTagName("select");for(i=0;i<a.length;i++)if("LT"==a[i].name.substring(0,2)){var s=a[i].name.substring(2),l=parseInt(a[i].value,10);gId("p0d"+s).innerHTML=l>=10&&l<=15?"IP address:":l>49?"Data GPIO:":l>41?"GPIOs:":"GPIO:",gId("p1d"+s).innerHTML=l>49?"Clk GPIO:":"";var o=d.getElementsByName("L1"+s)[0];for(t+=getMem(l,d.getElementsByName("LC"+s)[0].value,d.getElementsByName("L0"+s)[0].value),L=1;L<5;L++){(o=d.getElementsByName("L"+L+s)[0])&&(l>=10&&l<=15&&L<4||l>49&&1==L||l>41&&l<50&&L+40<l?(o.style.display="inline",o.required=!0):(o.style.display="none",o.required=!1,o.value=""))}e&&l>31&&l<48&&(d.getElementsByName("LC"+s)[0].value=1),n|=30==l||31==l||l>40&&l<46&&43!=l,gId("co"+s).style.display=l<16||41==l||42==l?"none":"inline",gId("dig"+s+"c").style.display=l>40&&l<48?"none":"inline",gId("dig"+s+"r").style.display=l<16?"none":"inline",gId("dig"+s+"s").style.display=l<16||l>40&&l<48?"none":"inline",gId("rev"+s).innerHTML=l>40&&l<48?"Inverted":"Reverse (rotated 180°)",gId("psd"+s).innerHTML=l>40&&l<48?"Index:":"Start:"}var r=d.querySelectorAll(".wc"),u=r.length;for(i=0;i<u;i++)r[i].style.display=n?"inline":"none";var p=d.getElementsByTagName("input"),m=0,v=0,c=0;for(i=0;i<p.length;i++){var g=p[i].name.substring(0,2);s=p[i].name.substring(2);if("LC"!=g){if("L0"==g||"L1"==g)d.getElementsByName("LC"+s)[0].max=maxPB;if("L0"==g||"L1"==g||"L2"==g||"L3"==g){if((l=parseInt(d.getElementsByName("LT"+s)[0].value))<16){p[i].max=255,p[i].min=0;continue}p[i].max=33,p[i].min=-1}if(("L0"==g||"L1"==g||"L2"==g||"L3"==g||"L4"==g||"RL"==g||"BT"==g||"IR"==g)&&""!=p[i].value&&"-1"!=p[i].value){var L=[];if(d.um_p&&Array.isArray(d.um_p))for(k=0;k<d.um_p.length;k++)L.push(d.um_p[k]);for(j=0;j<p.length;j++)if(i!=j){var f=p[j].name.substring(0,2);if("L0"==f||"L1"==f||"L2"==f||"L3"==f||"L4"==f||"RL"==f||"BT"==f||"IR"==f){if("L"===f.substring(0,1)){var y=p[j].name.substring(2);if(parseInt(d.getElementsByName("LT"+y)[0].value,10)<16)continue}""!=p[j].value&&"-1"!=p[j].value&&L.push(parseInt(p[j].value,10))}}L.some(e=>e==parseInt(p[i].value,10))?p[i].style.color="red":p[i].style.color=parseInt(p[i].value,10)>33?"orange":"#fff"}}else{var I=parseInt(p[i].value,10);customStarts&&startsDirty[s]||(gId("ls"+s).value=m),gId("ls"+s).disabled=!customStarts,I&&((a=parseInt(gId("ls"+s).value))+I>m&&(m=a+I),I>c&&(c=I),(l=parseInt(d.getElementsByName("LT"+s)[0].value))>16&&(v+=I))}}gId("lc").textContent=m,gId("pc").textContent=m==v?"":"("+v+" physical)",gId("m0").innerHTML=t,bquot=t/maxM*100,gId("dbar").style.background=`linear-gradient(90deg, ${bquot>60?bquot>90?"red":"orange":"#ccc"} 0 ${bquot}%%, #444 ${bquot}%% 100%%)`,gId("ledwarning").style.display=m>maxPB||c>800||bquot>80?"inline":"none",gId("ledwarning").style.color=m>maxPB||c>maxPB||bquot>100?"red":"orange",gId("wreason").innerHTML=bquot>80?"80% of max. LED memory"+(bquot>100?` (<b>ERROR: Using over ${maxM}B!</b>)`:""):"800 LEDs per output";var b=Math.ceil((100+v*laprev)/500)/2;b=b>5?Math.ceil(b):b;a="";var B=30==d.Sf.LAsel.value,S=255==d.Sf.LAsel.value;b<1.02&&!B&&!S?a="ESP 5V pin with 1A USB supply":(a+=B?"12V ":S?"WS2815 12V ":"5V ",a+=b,a+="A supply connected to LEDs");var h=Math.ceil((100+v*laprev)/1500)/2,x="(for most effects, ~";x+=h=h>5?Math.ceil(h):h,x+="A is enough)<br>",gId("psu").innerHTML=a,gId("psu2").innerHTML=S?"":x,gId("json").style.display=8==d.Sf.IT.value?"":"none"}function lastEnd(e){if(e<1)return 0;v=parseInt(d.getElementsByName("LS"+(e-1))[0].value)+parseInt(d.getElementsByName("LC"+(e-1))[0].value);var n=parseInt(d.getElementsByName("LT"+(e-1))[0].value);return n>31&&n<48&&(v=1),isNaN(v)?0:v}function addLEDs(e){if(e>1)return maxB=e,void(gId("+").style.display="inline");var n=d.getElementsByClassName("iST"),t=n.length;if(!(1==e&&t>=maxB||-1==e&&0==t)){var a=gId("mLC");if(1==e){var i=`<div class="iST">\n<hr style="width:260px">\n${t+1}:\n<select name="LT${t}" onchange="UI(true)">\n<option value="22" selected>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<option value="10">DDP RGB (network)</option>\n\x3c!--option value="11">E1.31 RGB (network)</option--\x3e\n\x3c!--option value="12">ArtNet RGB (network)</option--\x3e\n</select>&nbsp;\n<div id="co${t}" style="display:inline">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></div>\n<br>\n<span id="psd${t}">Start:</span> <input type="number" name="LS${t}" id="ls${t}" class="l starts" min="0" max="8191" value="${lastEnd(t)}" oninput="UI();startsDirty[${t}]=true;" required />&nbsp;\n<div id="dig${t}c" style="display:inline">Length: <input type="number" name="LC${t}" class="l" min="1" max="${maxPB}" value="1" required oninput="UI()" /></div>\n<br>\n<span id="p0d${t}">GPIO:</span> <input type="number" name="L0${t}" min="0" max="33" required class="xs" onchange="UI()"/>\n<span id="p1d${t}"></span><input type="number" name="L1${t}" min="0" max="33" class="xs" onchange="UI()"/>\n<span id="p2d${t}"></span><input type="number" name="L2${t}" min="0" max="33" class="xs" onchange="UI()"/>\n<span id="p3d${t}"></span><input type="number" name="L3${t}" min="0" max="33" class="xs" onchange="UI()"/>\n<span id="p4d${t}"></span><input type="number" name="L4${t}" min="0" max="33" class="xs" onchange="UI()"/>\n<br>\n<div id="dig${t}r" style="display:inline"><span id="rev${t}">Reversed</span>: <input type="checkbox" name="CV${t}"></div>&nbsp;\n<div id="dig${t}s" style="display:inline">Skip 1<sup>st</sup> LED: <input id="sl${t}" type="checkbox" name="SL${t}"></div>\n<br>\n</div>`;a.insertAdjacentHTML("beforeend",i)}-1==e&&(n[--t].remove(),--t),gId("+").style.display=t<maxB-1?"inline":"none",gId("-").style.display=t>0?"inline":"none",UI()}}function addBtn(e,n,t){var a=gId("btns").innerHTML,i="BT"+e;a+=`Button ${e} GPIO: <input type="number" min="-1" max="40" name="${i}" onchange="UI()" class="xs" value="${n}">`,a+=`&nbsp;<select name="${"BE"+e}">`,a+=`<option value="0" ${0==t?"selected":""}>Disabled</option>`,a+=`<option value="2" ${2==t?"selected":""}>Pushbutton</option>`,a+=`<option value="3" ${3==t?"selected":""}>Push inverted</option>`,a+=`<option value="4" ${4==t?"selected":""}>Switch</option>`,a+=`<option value="5" ${5==t?"selected":""}>PIR sensor</option>`,a+=`<option value="6" ${6==t?"selected":""}>Touch</option>`,a+=`<option value="7" ${7==t?"selected":""}>Analog</option>`,a+=`<option value="8" ${8==t?"selected":""}>Analog inverted</option>`,a+="</select>",a+=`<span style="cursor: pointer;" onclick="off('${i}')">&nbsp;&#215;</span><br>`,gId("btns").innerHTML=a}function tglSi(){(customStarts=!customStarts)||(startsDirty=[]),UI()}function checkSi(){for(var e=!1,n=1;n<d.getElementsByClassName("iST").length;n++){parseInt(gId("ls"+(n-1)).value)+parseInt(d.getElementsByName("LC"+(n-1))[0].value)!=parseInt(gId("ls"+n).value)&&(e=!0,startsDirty[n]=!0)}0!=parseInt(gId("ls0").value)&&(e=!0,startsDirty[0]=!0),e&&(gId("si").checked=!0,tglSi())}function uploadFile(e){var n=new XMLHttpRequest;n.addEventListener("load",(function(){showToast(this.responseText,this.status>=400)})),n.addEventListener("error",(function(e){showToast(e.stack,!0)})),n.open("POST","/upload");var t=new FormData;return t.append("data",d.Sf.data.files[0],e),n.send(t),d.Sf.data.value="",!1}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>
@@ -114,19 +114,20 @@ 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 output</span> for the best experience!<br></div>
-Make a segment for each output: <input type="checkbox" name="MS"><br><hr 
-style="width:260px"><div id="btns"></div>Touch threshold: <input type="number" 
-class="s" min="0" max="100" name="TT" required><br>IR GPIO: <input 
-type="number" min="-1" max="40" name="IR" onchange="UI()" class="xs"><select 
-name="IT" onchange="UI()"><option value="0">Remote disabled</option><option 
-value="1">24-key RGB</option><option value="2">24-key with CT</option><option 
-value="3">40-key blue</option><option value="4">44-key RGB</option><option 
-value="5">21-key RGB</option><option value="6">6-key black</option><option 
-value="7">9-key red</option><option value="8">JSON remote</option></select><span
- style="cursor:pointer" onclick='off("IR")'>&nbsp;&#215;</span><br><div 
-id="json" style="display:none">JSON file: <input type="file" name="data" 
-accept=".json"> <input type="button" value="Upload" 
+id="wreason">800 LEDs per output</span> for the best experience!<br></div><hr 
+style="width:260px">Make a segment for each output: <input type="checkbox" 
+name="MS"><br>Custom bus start indices: <input type="checkbox" 
+onchange="tglSi()" id="si"><br><hr style="width:260px"><div id="btns"></div>
+Touch threshold: <input type="number" class="s" min="0" max="100" name="TT" 
+required><br>IR GPIO: <input type="number" min="-1" max="40" name="IR" 
+onchange="UI()" class="xs"><select name="IT" onchange="UI()"><option value="0">
+Remote disabled</option><option value="1">24-key RGB</option><option value="2">
+24-key with CT</option><option value="3">40-key blue</option><option value="4">
+44-key RGB</option><option value="5">21-key RGB</option><option value="6">
+6-key black</option><option value="7">9-key red</option><option value="8">
+JSON remote</option></select><span style="cursor:pointer" onclick='off("IR")'>
+&nbsp;&#215;</span><br><div id="json" style="display:none">JSON file: <input 
+type="file" name="data" accept=".json"> <input type="button" value="Upload" 
 onclick='uploadFile("/ir.json")'><br></div><div id="toast"></div><a 
 href="https://github.com/Aircoookie/WLED/wiki/Infrared-Control" target="_blank">
 IR info</a><br>Relay GPIO: <input type="number" min="-1" max="33" name="RL"