From 9bdcfc8a459ec98285e5259d8e70da85b6de58da Mon Sep 17 00:00:00 2001
From: cschwinne <dev.aircoookie@gmail.com>
Date: Tue, 26 Jan 2021 01:58:34 +0100
Subject: [PATCH] LED settings JS possibly complete (need to add saving logic
 to set.cpp)

---
 wled00/const.h                |   2 +-
 wled00/data/settings_leds.htm | 180 +++++++++++++++++-----------------
 wled00/html_settings.h        |  39 ++++----
 wled00/set.cpp                |   4 +-
 wled00/xml.cpp                |   4 +-
 5 files changed, 114 insertions(+), 115 deletions(-)

diff --git a/wled00/const.h b/wled00/const.h
index 069f2c6ea..afc235af1 100644
--- a/wled00/const.h
+++ b/wled00/const.h
@@ -95,8 +95,8 @@
 #define TYPE_WS2812_RGB          22
 #define TYPE_GS8608              23            //same driver as WS2812, but will require signal 2x per second (else displays test pattern)
 #define TYPE_WS2811_400KHZ       24            //half-speed WS2812 protocol, used by very old WS2811 units
-#define TYPE_TM1814              25
 #define TYPE_SK6812_RGBW         30
+#define TYPE_TM1814              31
 //"Analog" types (PWM) (32-47)
 #define TYPE_ONOFF               40            //binary output (relays etc.)
 #define TYPE_ANALOG_1CH          41            //single channel PWM. Uses value of brightest RGBW channel
diff --git a/wled00/data/settings_leds.htm b/wled00/data/settings_leds.htm
index 4e1291381..55e14f67b 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;
+    var d=document,laprev=55,maxST=1;
 		function H()
 		{
 			window.open("https://github.com/Aircoookie/WLED/wiki/Settings#led-settings");
@@ -46,12 +46,7 @@
     }
 		function UI()
 		{
-      var isRGBW = false; //TODO check all strips for rgbw (old d.getElementById('rgbw').checked)
-			var myC = d.querySelectorAll('.wc'),
-			l = myC.length;
-			for (i = 0; i < l; i++) {
-				myC[i].style.display = (isRGBW) ? 'inline':'none';
-			}
+      var isRGBW = false;
       
       d.getElementById('ampwarning').style.display = (d.Sf.MA.value > 7200) ? 'inline':'none';
 	  
@@ -62,35 +57,54 @@
       for (i=0; i<s.length; i++) {
         if (s[i].name.substring(0,2)=="LT") {
           n=s[i].name.substring(2);
-          var LK = d.getElementsByName("LK"+n)[0];
-          var o = d.getElementsByName("iLK");
-          n=(n==""?0:parseInt(n,10));
-          if (s[i].value>49 && s[i].value!=54) // TYPE_xxxx values from const.h
-          {
-              o[n].style.display = "inline";
+          var type = s[i].value;
+          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));
+          for (p=1; p<5; p++) {
+            var LK = d.getElementsByName("L"+p+n)[0];
+            if (!LK) continue;
+            if ((type>49 && p==1) || (type>41 && type < 50 && (p+40 < type))) // TYPE_xxxx values from const.h
+            {
+              LK.style.display = "inline";
               LK.required = true;
-          } else {
-              o[n].style.display = "none";
+            } else {
+              LK.style.display = "none";
               LK.required = false;
               LK.value="";
+            }
           }
+          if (type == 30 || type == 31 || type == 44 || type == 45) isRGBW = true;
         }
       }
 
+      var myC = d.querySelectorAll('.wc'),
+			l = myC.length;
+			for (i = 0; i < l; i++) {
+				myC[i].style.display = (isRGBW) ? 'inline':'none';
+			}
+
+      if (d.activeElement == d.getElementsByName("LC")[0]) {
+        var o = d.getElementsByClassName("iST");
+        var i = o.length;
+        if (i == 1) d.getElementsByName("LC0")[0].value = d.getElementsByName("LC")[0].value;
+      }
+
       var LCs = d.getElementsByTagName("input");
       var sLC = 0;
       for (i=0; i<LCs.length; i++) {
         var nm = LCs[i].name.substring(0,2);
-        if (nm=="LC") {sLC+=parseInt(LCs[i].value,10);continue;}
-        if (nm=="LP") {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=="LP" || nm=="LK" || nm=="RL" || nm=="BT" || nm=="IR" || nm=="AX")
+        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=="LP" || n2=="LK" || n2=="RL" || n2=="BT" || n2=="IR" || n2=="AX")
+              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;}
             }
           }
@@ -112,7 +126,7 @@
 				s += val;
 				s += "A supply connected to LEDs";
 			}
-      var val2 = Math.ceil((100 + d.Sf.LC.value * laprev)/1500)/2;
+      var val2 = Math.ceil((100 + sLC * laprev)/1500)/2;
       val2 = (val2 > 5) ? Math.ceil(val2) : val2;
       var s2 = "(for most effects, ~";
       s2 += val2;
@@ -122,72 +136,59 @@
     }
     function addLEDs(n)
     {
-      if (n>1) {d.maxST=n; d.getElementById("+").style.display="inline"; return;}
+      if (n>1) {maxST=n; d.getElementById("+").style.display="inline"; return;}
 
-      var o = d.getElementsByName("iST");
+      var o = d.getElementsByClassName("iST");
       var i = o.length;
 
-      if ((n==1 && i>=d.maxST) || (n==-1 && i==0)) return;
+      if ((n==1 && i>=maxST) || (n==-1 && i==0)) return;
 
       var f = d.getElementById("mLC");
       if (n==1) {
-        var s, t = d.createElement("div");
-        t.setAttribute("name","iST");
-
-        t.appendChild(d.createTextNode((i+1)+": "));
-
-        s = d.createElement("select");
-        s.setAttribute("name","LT"+i);
-        s.onchange = function(){UI()}
-        o = d.createElement("option"); o.text = "WS281x";  o.value = "22"; s.add(o);
-        o = d.createElement("option"); o.text = "SK6812 RGBW";  o.value = "30"; s.add(o);
-        o = d.createElement("option"); o.text = "WS2801";  o.value = "50"; s.add(o);
-        o = d.createElement("option"); o.text = "APA102";  o.value = "51"; s.add(o);
-        o = d.createElement("option"); o.text = "LPD8806"; o.value = "52"; s.add(o);
-        o = d.createElement("option"); o.text = "P9813";   o.value = "53"; s.add(o);
-        o = d.createElement("option"); o.text = "TM1814";  o.value = "54"; s.add(o);
-        t.appendChild(s);
-
-        t.appendChild(d.createTextNode(" CO: "));
-        s = d.createElement("select");
-        s.setAttribute("name","CO"+i);
-        o = d.createElement("option"); o.text = "GRB"; o.value = "0"; s.add(o);
-        o = d.createElement("option"); o.text = "RGB"; o.value = "1"; s.add(o);
-        o = d.createElement("option"); o.text = "BRG"; o.value = "2"; s.add(o);
-        o = d.createElement("option"); o.text = "RBG"; o.value = "3"; s.add(o);
-        o = d.createElement("option"); o.text = "BGR"; o.value = "4"; s.add(o);
-        o = d.createElement("option"); o.text = "GBR"; o.value = "5"; s.add(o);
-        t.appendChild(s);
-
-        t.appendChild(d.createElement("br"));
-
-        t.appendChild(d.createTextNode("Pin: "));
-        var e = d.createElement("input");
-        e.type = "number"; e.value = ""; e.name = "LP"+i; e.min=0; e.max=40; e.required=true; e.onchange=function(){UI()};
-        t.appendChild(e);
-
-        var b = d.createElement("div");
-        b.setAttribute("name","iLK");
-        b.appendChild(d.createTextNode(" Clk: "));
-        e = d.createElement("input");
-        e.type = "number"; e.value = ""; e.name = "LK"+i; e.min=0; e.max=40; e.onchange=function(){UI()};
-        //if (d.getElementsByName("LT"+i)[0].value>49) e.required = true;
-        b.appendChild(e);
-        t.appendChild(b);
-
-        t.appendChild(d.createTextNode(" Count: "));
-        e = d.createElement("input");
-        e.type = "number"; e.value = "0"; e.name = "LC"+i; e.min=0; e.max=1000; e.required=true; e.oninput = function(){UI()};
-        t.appendChild(e);
-
-        t.appendChild(d.createElement("br"));
-        f.appendChild(t);
+        var cn = `<div class="iST">
+          ${i>0?'<hr style="width:260px">':''}
+          ${i+1}:
+          <select name="LT${i}" onchange="UI()">
+            <option value="22">WS281x</option>
+            <option value="30">SK6812 RGBW</option>
+            <option value="31">TM1814</option>
+            <option value="24">400kHz</option>
+            <option value="50">WS2801</option>
+            <option value="51">APA102</option>
+            <option value="52">LPD8806</option>
+            <option value="53">P9813</option>
+            <option value="41">PWM White</option>
+            <option value="42">PWM WWCW</option>
+            <option value="43">PWM RGB</option>
+            <option value="44">PWM RGBW</option>
+            <option value="45">PWM RGBWC</option>
+          </select>&nbsp;
+          Color Order:
+          <select name="CO${i}">
+            <option value="0">GRB</option>
+            <option value="1">RGB</option>
+            <option value="2">BRG</option>
+            <option value="3">RBG</option>
+            <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="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>
+        </div>`;
+        f.insertAdjacentHTML("beforeend", cn);
       }
       if (n==-1) {
         o[--i].remove();--i;
       }
 
-      d.getElementById("+").style.display = (i<d.maxST-1) ? "inline":"none";
+      d.getElementById("+").style.display = (i<maxST-1) ? "inline":"none";
       d.getElementById("-").style.display = (i>0) ? "inline":"none";
 
       UI();
@@ -195,9 +196,6 @@
 		function GetV()
 		{
       //values injected by server while sending HTML
-      var d=document;
-      d.um_p=[];addLEDs(3);d.Sf.LC.max=1536;d.Sf.LC.value=120;addLEDs(1);d.Sf.LP0.value=2;d.Sf.LC0.value=120;d.Sf.LT0.value=22;d.Sf.CO0.value=0;d.Sf.MA.value=5400;d.Sf.LA.value=0;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=0;d.Sf.IR.value=-1;d.Sf.AX.value=-1;
-
     }
 	</script>
 	<style>
@@ -242,21 +240,11 @@
     <span id="LAdis" style="display: none;">Custom max. current per LED: <input name="LA" type="number" min="0" max="255" id="la" oninput="UI()" required> mA<br></span>
     <i>Keep at default if you are unsure about your type of LEDs.</i><br>
   </div>
-    <span class="wc">
-    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>
     <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>
-    Relay pin: <input type="number" min="-1" max="40" name="RL" onchange="UI()"> Active high? <input type="checkbox" name="RM"><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 type="number" min="-1" max="40" name="AX" onchange="UI()">
@@ -283,7 +271,7 @@
 			<option value="2">Fade Color</option>
 			<option value="3">Sunrise</option>
 		</select>
-		<h3>Advanced</h3>
+    <h3>Advanced</h3>
 		Palette blending:
 		<select name="PB">
 			<option value="0">Linear (wrap if moving)</option>
@@ -292,7 +280,17 @@
 			<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"><hr>
+    Skip first LED: <input type="checkbox" name="SL"><br>
+    <span class="wc">
+      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>
diff --git a/wled00/html_settings.h b/wled00/html_settings.h
index 4745ef6be..c39c6b12d 100644
--- a/wled00/html_settings.h
+++ b/wled00/html_settings.h
@@ -71,21 +71,14 @@ 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;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"),t=e.length;for(i=0;i<t;i++)e[i].style.display="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 a=d.getElementsByTagName("select");for(i=0;i<a.length;i++)if("LT"==a[i].name.substring(0,2)){n=a[i].name.substring(3),d.getElementsByName("EW"+n)[0].checked=30==parseInt(a[i].value)||54==parseInt(a[i].value);var l=d.getElementsByName("LK"+n)[0],r=d.getElementsByName("iLK");n=""==n?0:parseInt(n,10),a[i].value>49&&54!=a[i].value?(r[n].style="display:inline;",l.required=!0):(r[n].style="display:none;",l.required=!1,l.value="")}var s=d.getElementsByTagName("input"),u=0;for(i=0;i<s.length;i++){var p=s[i].name.substring(0,2);if("LC"!=p){if("LP"==p){var m=d.getElementsByName("LC"+s[i].name.substring(2))[0];3==s[i].value?m.max=500:m.max=1500}if(("LP"==p||"LK"==p||"RL"==p||"BT"==p||"IR"==p||"AX"==p)&&""!=s[i].value&&"-1"!=s[i].value){if(d.um_p&&d.um_p.some(e=>e==parseInt(s[i].value,10))){alert("Usermod pin clash!"),s[i].value="",s[i].focus();continue}for(j=0;j<s.length;j++)if(i!=j){var o=s[j].name.substring(0,2);if(("LP"==o||"LK"==o||"RL"==o||"BT"==o||"IR"==o||"AX"==o)&&""!=s[j].value&&s[i].value==s[j].value){alert("Pin clash!"),s[i].value="",s[i].focus();break}}}}else u+=parseInt(s[i].value,10)}d.getElementById("ledwarning").style.display=u>1e3?"inline":"none";var c=Math.ceil((100+u*laprev)/500)/2;c=c>5?Math.ceil(c):c;a="";var v=30==d.Sf.LAsel.value,y=255==d.Sf.LAsel.value;c<1.02&&!v&&!y?a="ESP 5V pin with 1A USB supply":(a+=v?"12V ":y?"WS2815 12V ":"5V ",a+=c,a+="A supply connected to LEDs");var f=Math.ceil((100+d.Sf.LC.value*laprev)/1500)/2,E="(for most effects, ~";E+=f=f>5?Math.ceil(f):f,E+="A is enough)<br>",d.getElementById("psu").innerHTML=a,d.getElementById("psu2").innerHTML=y?"":E}function addLEDs(e){if(e>1)return d.maxST=e,void(d.getElementById("+").style="display:inline;");var t=d.getElementsByName("iST"),n=t.length;if(!(1==e&&n>=d.maxST||-1==e&&0==n)){var a=d.getElementById("mLC");if(1==e){var l,i=d.createElement("div");i.setAttribute("name","iST"),i.appendChild(d.createTextNode(n+1+": ")),(l=d.createElement("select")).setAttribute("name","LT"+n),l.onchange=function(){UI()},(t=d.createElement("option")).text="WS281x",t.value="22",l.add(t),(t=d.createElement("option")).text="SK6812",t.value="30",l.add(t),(t=d.createElement("option")).text="WS2801",t.value="50",l.add(t),(t=d.createElement("option")).text="APA102",t.value="51",l.add(t),(t=d.createElement("option")).text="LPD8806",t.value="52",l.add(t),(t=d.createElement("option")).text="P9813",t.value="53",l.add(t),(t=d.createElement("option")).text="TM1814",t.value="54",l.add(t),i.appendChild(l),i.appendChild(d.createTextNode(" CO: ")),(l=d.createElement("select")).setAttribute("name","CO"+n),(t=d.createElement("option")).text="GRB",t.value="0",l.add(t),(t=d.createElement("option")).text="RGB",t.value="1",l.add(t),(t=d.createElement("option")).text="BRG",t.value="2",l.add(t),(t=d.createElement("option")).text="RBG",t.value="3",l.add(t),(t=d.createElement("option")).text="BGR",t.value="4",l.add(t),(t=d.createElement("option")).text="GBR",t.value="5",l.add(t),i.appendChild(l),i.appendChild(d.createTextNode(" RGBW: ")),(l=d.createElement("input")).type="checkbox",l.setAttribute("name","EW"+n),i.appendChild(l),i.appendChild(d.createElement("br")),i.appendChild(d.createTextNode("pin:"));var r=d.createElement("input");r.type="number",r.value="",r.name="LP"+n,r.min=0,r.max=40,r.required=!0,r.onchange=function(){UI()},i.appendChild(r);var s=d.createElement("div");s.setAttribute("name","iLK"),s.appendChild(d.createTextNode(" clk:")),(r=d.createElement("input")).type="number",r.value="",r.name="LK"+n,r.min=0,r.max=40,r.onchange=function(){UI()},s.appendChild(r),i.appendChild(s),i.appendChild(d.createTextNode(" count:")),(r=d.createElement("input")).type="number",r.value="0",r.name="LC"+n,r.min=0,r.max=1e3,r.required=!0,r.oninput=function(){UI()},i.appendChild(r),i.appendChild(d.createElement("br")),a.appendChild(i)}-1==e&&(t[--n].remove(),--n);var u=d.getElementById("+"),p=d.getElementById("-");n<d.maxST-1?u.style="display:inline":u.style="display:none",p.style=n>0?"display:inline":"display:none",UI()}}function GetV() {var d=document;
+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;
 %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; HW setup</h2>
+<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>LED strips <button type="button" id="+" 
-onclick="addLEDs(1)" style="display:none">+</button><button type="button" 
-id="-" onclick="addLEDs(-1)" style="display:none">-</button><br><div id="mLC">
-Loading...</div><hr>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 type="number" min="-1" max="40" name="AX" onchange="UI()"><hr><div 
-id="ledwarning" style="color:orange;display:none">
+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>
 Recommended power supply for brightest white:</i><br><b><span id="psu">?</span>
@@ -108,11 +101,16 @@ onchange="enLA()"><option value="55" selected="selected">5V default (55mA)
 Custom</option></select><br><span id="LAdis" style="display:none">
 Custom max. current per LED: <input name="LA" type="number" min="0" max="255" 
 id="la" oninput="UI()" required> mA<br></span><i>
-Keep at default if you are unsure about your type of LEDs.</i><br></div><br>
-<span class="wc">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><h3>Defaults</h3>
+Keep at default if you are unsure about your type of LEDs.</i><br></div><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>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 
+type="number" min="-1" max="40" name="AX" onchange="UI()"><h3>Defaults</h3>
 Turn LEDs on after power up/reset: <input type="checkbox" name="BO"><br>
 Default brightness: <input name="CA" type="number" min="0" max="255" required>
  (0-255)<br><br>Apply preset <input name="BP" type="number" min="0" max="250" 
@@ -134,9 +132,12 @@ name="PB"><option value="0">Linear (wrap if moving)</option><option value="1">
 Linear (always wrap)</option><option value="2">Linear (never wrap)</option>
 <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"><hr><button type="button" 
-onclick="B()">Back</button><button type="submit">Save</button></form></body>
-</html>)=====";
+Skip first LED: <input type="checkbox" name="SL"><br><span class="wc">
+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>)=====";
 
 
 #ifdef WLED_ENABLE_DMX
diff --git a/wled00/set.cpp b/wled00/set.cpp
index 00aede788..514b5449f 100644
--- a/wled00/set.cpp
+++ b/wled00/set.cpp
@@ -90,8 +90,8 @@ void handleSettingsSet(AsyncWebServerRequest *request, byte subPage)
     uint8_t pins[2] = {255, 255};
 
     for (uint8_t s = 0; s < WLED_MAX_BUSSES; s++) {
-      char lp[4] = "LP"; lp[2] = 48+s; lp[3] = 0; //ascii 0-9 //strip data pin
-      char lk[4] = "LK"; lk[2] = 48+s; lk[3] = 0; //strip clock pin. 255 for none
+      char lp[4] = "L0"; lp[2] = 48+s; lp[3] = 0; //ascii 0-9 //strip data pin
+      char lk[4] = "L1"; lk[2] = 48+s; lk[3] = 0; //strip clock pin. 255 for none
       char lc[4] = "LC"; lc[2] = 48+s; lc[3] = 0; //strip length
       char co[4] = "CO"; co[2] = 48+s; co[3] = 0; //strip color order
       char lt[4] = "LT"; lt[2] = 48+s; lt[3] = 0; //strip type
diff --git a/wled00/xml.cpp b/wled00/xml.cpp
index 7ee6b1651..b76794b87 100644
--- a/wled00/xml.cpp
+++ b/wled00/xml.cpp
@@ -290,8 +290,8 @@ void getSettingsJS(byte subPage, char* dest)
 
     for (uint8_t s=0; s < busses.getNumBusses(); s++){
       Bus* bus = busses.getBus(s);
-      char lp[4] = "LP"; lp[2] = 48+s; lp[3] = 0; //ascii 0-9 //strip data pin
-      char lk[4] = "LK"; lk[2] = 48+s; lk[3] = 0; //strip clock pin. 255 for none
+      char lp[4] = "L0"; lp[2] = 48+s; lp[3] = 0; //ascii 0-9 //strip data pin
+      char lk[4] = "L1"; lk[2] = 48+s; lk[3] = 0; //strip clock pin. 255 for none
       char lc[4] = "LC"; lc[2] = 48+s; lc[3] = 0; //strip length
       char co[4] = "CO"; co[2] = 48+s; co[3] = 0; //strip color order
       char lt[4] = "LT"; lt[2] = 48+s; lt[3] = 0; //strip type