From fb19f1ecbc869b366fc10371bb5d6f56eb9cb1e3 Mon Sep 17 00:00:00 2001
From: Mike Ryan <justfalter@users.noreply.github.com>
Date: Tue, 25 Jan 2022 17:42:04 -0600
Subject: [PATCH 1/2] Allow overriding of color order by LED pixel range.
 (#2463)

* Overridable color order

- Use `ColorOrderMap` to hold optional color order overrides for ranges
  of LEDs.
- Serialization of config to/from filesystem is complete.
- Back-end configuration is complete.
- TODO: front-end changes to the LED settings page.

* Add Color order override settings

- Adds color order override section to settings page.

* PR Feedback

- Limit max number of color order overrides to 5 on ESP8266
- Only append color overrides if they were provided in the POST of LED
  settings.
---
 wled00/bus_manager.h          | 76 ++++++++++++++++++++++++++++++++---
 wled00/cfg.cpp                | 28 +++++++++++++
 wled00/const.h                |  7 ++++
 wled00/data/settings_leds.htm | 63 ++++++++++++++++++++++++++++-
 wled00/html_settings.h        | 36 ++++++++++-------
 wled00/set.cpp                | 14 +++++++
 wled00/xml.cpp                | 13 ++++++
 7 files changed, 216 insertions(+), 21 deletions(-)

diff --git a/wled00/bus_manager.h b/wled00/bus_manager.h
index 721183832..da5467b53 100644
--- a/wled00/bus_manager.h
+++ b/wled00/bus_manager.h
@@ -73,6 +73,62 @@ struct BusConfig {
   }
 };
 
+// Defines an LED Strip and its color ordering.
+struct ColorOrderMapEntry {
+  uint16_t start;
+  uint16_t len;
+  uint8_t colorOrder;
+};
+
+struct ColorOrderMap {
+  void add(uint16_t start, uint16_t len, uint8_t colorOrder) {
+    if (_count >= WLED_MAX_COLOR_ORDER_MAPPINGS) {
+      return;
+    }
+    if (len == 0) {
+      return;
+    }
+    if (colorOrder > COL_ORDER_MAX) {
+      return;
+    }
+    _mappings[_count].start = start;
+    _mappings[_count].len = len;
+    _mappings[_count].colorOrder = colorOrder;
+    _count++;
+  }
+
+  uint8_t count() const {
+    return _count;
+  }
+
+  void reset() {
+    _count = 0;
+    memset(_mappings, 0, sizeof(_mappings));
+  }
+
+  const ColorOrderMapEntry* get(uint8_t n) const {
+    if (n > _count) {
+      return nullptr;
+    }
+    return &(_mappings[n]);
+  }
+
+  inline uint8_t getPixelColorOrder(uint16_t pix, uint8_t defaultColorOrder) const {
+    if (_count == 0) return defaultColorOrder;
+
+    for (uint8_t i = 0; i < _count; i++) {
+      if (pix >= _mappings[i].start && pix < (_mappings[i].start + _mappings[i].len)) {
+        return _mappings[i].colorOrder;
+      }
+    }
+    return defaultColorOrder;
+  }
+
+  private:
+  uint8_t _count;
+  ColorOrderMapEntry _mappings[WLED_MAX_COLOR_ORDER_MAPPINGS];
+};
+
 //parent class of BusDigital, BusPwm, and BusNetwork
 class Bus {
   public:
@@ -152,7 +208,7 @@ class Bus {
 
 class BusDigital : public Bus {
   public:
-  BusDigital(BusConfig &bc, uint8_t nr) : Bus(bc.type, bc.start) {
+  BusDigital(BusConfig &bc, uint8_t nr, const ColorOrderMap &com) : Bus(bc.type, bc.start), _colorOrderMap(com) {
     if (!IS_DIGITAL(bc.type) || !bc.count) return;
     if (!pinManager.allocatePin(bc.pins[0], true, PinOwner::BusDigital)) return;
     _pins[0] = bc.pins[0];
@@ -197,7 +253,7 @@ class BusDigital : public Bus {
 	//TODO only show if no new show due in the next 50ms
 	void setStatusPixel(uint32_t c) {
     if (_skip && canShow()) {
-      PolyBus::setPixelColor(_busPtr, _iType, 0, c, _colorOrder);
+      PolyBus::setPixelColor(_busPtr, _iType, 0, c, _colorOrderMap.getPixelColorOrder(_start, _colorOrder));
       PolyBus::show(_busPtr, _iType);
     }
   }
@@ -207,13 +263,13 @@ class BusDigital : public Bus {
     if (_cct >= 1900) c = colorBalanceFromKelvin(_cct, c); //color correction from CCT
     if (reversed) pix = _len - pix -1;
     else pix += _skip;
-    PolyBus::setPixelColor(_busPtr, _iType, pix, c, _colorOrder);
+    PolyBus::setPixelColor(_busPtr, _iType, pix, c, _colorOrderMap.getPixelColorOrder(pix+_start, _colorOrder));
   }
 
   uint32_t getPixelColor(uint16_t pix) {
     if (reversed) pix = _len - pix -1;
     else pix += _skip;
-    return PolyBus::getPixelColor(_busPtr, _iType, pix, _colorOrder);
+    return PolyBus::getPixelColor(_busPtr, _iType, pix, _colorOrderMap.getPixelColorOrder(pix+_start, _colorOrder));
   }
 
   inline uint8_t getColorOrder() {
@@ -263,6 +319,7 @@ class BusDigital : public Bus {
   uint8_t _iType = I_NONE;
   uint8_t _skip = 0;
   void * _busPtr = nullptr;
+  const ColorOrderMap &_colorOrderMap;
 };
 
 
@@ -555,7 +612,7 @@ class BusManager {
     if (bc.type >= TYPE_NET_DDP_RGB && bc.type < 96) {
       busses[numBusses] = new BusNetwork(bc);
     } else if (IS_DIGITAL(bc.type)) {
-      busses[numBusses] = new BusDigital(bc, numBusses);
+      busses[numBusses] = new BusDigital(bc, numBusses, colorOrderMap);
     } else {
       busses[numBusses] = new BusPwm(bc);
     }
@@ -640,8 +697,17 @@ class BusManager {
     return len;
   }
 
+  void updateColorOrderMap(const ColorOrderMap &com) {
+    memcpy(&colorOrderMap, &com, sizeof(ColorOrderMap));
+  }
+
+  const ColorOrderMap& getColorOrderMap() const {
+    return colorOrderMap;
+  }
+
   private:
   uint8_t numBusses = 0;
   Bus* busses[WLED_MAX_BUSSES];
+  ColorOrderMap colorOrderMap;
 };
 #endif
diff --git a/wled00/cfg.cpp b/wled00/cfg.cpp
index f16c69263..18d5d2a77 100644
--- a/wled00/cfg.cpp
+++ b/wled00/cfg.cpp
@@ -123,6 +123,22 @@ bool deserializeConfig(JsonObject doc, bool fromFS) {
   }
   if (hw_led["rev"]) busses.getBus(0)->reversed = true; //set 0.11 global reversed setting for first bus
 
+  // read color order map configuration
+  JsonArray hw_com = hw[F("com")];
+  if (!hw_com.isNull()) {
+    ColorOrderMap com = {};
+    uint8_t s = 0;
+    for (JsonObject entry : hw_com) {
+      if (s > WLED_MAX_COLOR_ORDER_MAPPINGS) break;
+      uint16_t start = entry[F("start")] | 0;
+      uint16_t len = entry[F("len")] | 0;
+      uint8_t colorOrder = (int)entry[F("order")];
+      com.add(start, len, colorOrder);
+      s++;
+    }
+    busses.updateColorOrderMap(com);
+  }
+
   // read multiple button configuration
   JsonObject btn_obj = hw["btn"];
   JsonArray hw_btn_ins = btn_obj[F("ins")];
@@ -574,6 +590,18 @@ void serializeConfig() {
     ins[F("rgbw")] = bus->isRgbw();
   }
 
+  JsonArray hw_com = hw.createNestedArray(F("com"));
+  const ColorOrderMap& com = busses.getColorOrderMap();
+  for (uint8_t s = 0; s < com.count(); s++) {
+    const ColorOrderMapEntry *entry = com.get(s);
+    if (!entry) break;
+
+    JsonObject co = hw_com.createNestedObject();
+    co[F("start")] = entry->start;
+    co[F("len")] = entry->len;
+    co[F("order")] = entry->colorOrder;
+  }
+
   // button(s)
   JsonObject hw_btn = hw.createNestedObject("btn");
   hw_btn["max"] = WLED_MAX_BUTTONS; // just information about max number of buttons (not actually used)
diff --git a/wled00/const.h b/wled00/const.h
index 3d3cf1cbc..aaeb7fc5e 100644
--- a/wled00/const.h
+++ b/wled00/const.h
@@ -39,6 +39,12 @@
   #endif
 #endif
 
+#ifdef ESP8266
+#define WLED_MAX_COLOR_ORDER_MAPPINGS 5
+#else
+#define WLED_MAX_COLOR_ORDER_MAPPINGS 10
+#endif
+
 //Usermod IDs
 #define USERMOD_ID_RESERVED               0     //Unused. Might indicate no usermod present
 #define USERMOD_ID_UNSPECIFIED            1     //Default value for a general user mod that does not specify a custom ID
@@ -170,6 +176,7 @@
 #define COL_ORDER_RBG             3
 #define COL_ORDER_BGR             4
 #define COL_ORDER_GBR             5
+#define COL_ORDER_MAX             5
 
 
 //Button type
diff --git a/wled00/data/settings_leds.htm b/wled00/data/settings_leds.htm
index 8dd81e446..24d2acff2 100644
--- a/wled00/data/settings_leds.htm
+++ b/wled00/data/settings_leds.htm
@@ -6,7 +6,7 @@
 	<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
-		var customStarts=false,startsDirty=[];
+		var customStarts=false,startsDirty=[],maxCOOverrides=5;
     function H()
 		{
 			window.open("https://kno.wled.ge/features/settings/#led-settings");
@@ -347,6 +347,53 @@ ${i+1}:
 
       if (!init) UI();
     }
+
+    function addCOM(start=0,len=1,co=0) {
+      var i = d.getElementsByClassName("com_entry").length;
+      if (i >= 10) return;
+
+      var b = `<div class="com_entry">
+<hr style="width:260px">
+${i+1}: Start: <input type="number" name="XS${i}" id="xs${i}" class="l starts" min="0" max="65535" value="${start}" oninput="UI();" required="">&nbsp;
+Length: <input type="number" name="XC${i}" id="xc${i}" class="l" min="1" max="65535" value="${len}" required="" oninput="UI()">
+<div style="display:inline">Color Order:
+<select id="xo${i}" name="XO${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>
+</div><br></div>`;
+      gId("com_entries").insertAdjacentHTML("beforeend", b);
+      gId("xo"+i).value = co;
+      btnCOM(i+1);
+    }
+
+    function remCOM() {
+      var entries = d.getElementsByClassName("com_entry");
+      var i = entries.length;
+      if (i === 0) return;
+      entries[i-1].remove();
+      btnCOM(i-1);
+    }
+
+    function resetCOM(_newMaxCOOverrides=undefined) {
+      if (_newMaxCOOverrides) {
+        maxCOOverrides = _newMaxCOOverrides;
+      }
+      for (let e of d.getElementsByClassName("com_entry")) {
+        e.remove();
+      }
+      btnCOM(0);
+    }
+
+    function btnCOM(i) {
+      gId("com_add").style.display = (i<maxCOOverrides) ? "inline":"none";
+      gId("com_rem").style.display = (i>0) ? "inline":"none";
+    }
+
     function addBtn(i,p,t) {
       var c = gId("btns").innerHTML;
       var bt = "BT" + String.fromCharCode((i<10?48:55)+i);;
@@ -431,6 +478,12 @@ ${i+1}:
               d.getElementsByName("CV"+i)[0].checked = v.rev;
             });
           }
+          if(c.hw.com) {
+            resetCOM();
+            c.hw.com.forEach(e => {
+              addCOM(e.start, e.len, e.order);
+            });
+          }
           if (c.hw.btn) {
             var b = c.hw.btn;
             if (Array.isArray(b.ins)) gId("btns").innerHTML = "";
@@ -510,6 +563,14 @@ ${i+1}:
     Make a segment for each output: <input type="checkbox" name="MS"> <br>
     Custom bus start indices: <input type="checkbox" onchange="tglSi(this.checked)" id="si"> <br>
     <hr style="width:260px">
+    <div id="color_order_mapping">
+      Color Order Override:
+      <div id="com_entries"></div>
+      <hr style="width:260px">
+      <button type="button" id="com_add" onclick="addCOM();UI()" style="display:none;border-radius:20px;height:36px;">+</button>
+      <button type="button" id="com_rem" onclick="remCOM();UI()" style="display:none;border-radius:20px;width:36px;height:36px;">-</button><br>
+    </div>
+    <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()">
diff --git a/wled00/html_settings.h b/wled00/html_settings.h
index 370c28288..9283f4c04 100644
--- a/wled00/html_settings.h
+++ b/wled00/html_settings.h
@@ -74,7 +74,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,customStarts=!1,startsDirty=[];function H(){window.open("https://kno.wled.ge/features/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)>=80)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)>=80)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<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>=80&&l<96?"IP address:":l>49?"Data GPIO:":l>41?"GPIOs:":"GPIO:",gId("p1d"+s).innerHTML=l>49&&l<64?"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),f=1;f<5;f++){(o=d.getElementsByName("L"+f+s)[0])&&(l>=80&&l<96&&f<4||l>49&&1==f||l>41&&l<50&&f+40<l?(o.style.display="inline",o.required=!0):(o.style.display="none",o.required=!1,o.value=""))}e&&(gId("rf"+s).checked=gId("rf"+s).checked||31==l,l>31&&l<48&&(d.getElementsByName("LC"+s)[0].value=1)),gId("rf"+s).onclick=31==l?function(){return!1}:function(){},n|=30==l||31==l||l>40&&l<46&&43!=l,gId("co"+s).style.display=l>=80&&l<96||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>=80&&l<96?"none":"inline",gId("dig"+s+"s").style.display=l>=80&&l<96||l>40&&l<48?"none":"inline",gId("dig"+s+"f").style.display=l>=16&&l<32||l>=50&&l<64?"inline":"none",gId("rev"+s).innerHTML=l>40&&l<48?"Inverted output":"Reversed (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))>=80){p[i].max=255,p[i].min=0,p[i].style.color="#fff";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 f=[];if(d.um_p&&Array.isArray(d.um_p))for(k=0;k<d.um_p.length;k++)f.push(d.um_p[k]);for(j=0;j<p.length;j++)if(i!=j){var y=p[j].name.substring(0,2);if("L0"==y||"L1"==y||"L2"==y||"L3"==y||"L4"==y||"RL"==y||"BT"==y||"IR"==y){if("L"===y.substring(0,1)){var L=p[j].name.substring(2);if(parseInt(d.getElementsByName("LT"+L)[0].value,10)>=80)continue}""!=p[j].value&&"-1"!=p[j].value&&f.push(parseInt(p[j].value,10))}}f.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))<80&&(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=c>Math.min(maxPB,800)||bquot>80?"inline":"none",gId("ledwarning").style.color=c>Math.max(maxPB,800)||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 h=Math.ceil((100+v*laprev)/500)/2;h=h>5?Math.ceil(h):h;a="";var B=30==d.Sf.LAsel.value,b=255==d.Sf.LAsel.value;h<1.02&&!B&&!b?a="ESP 5V pin with 1A USB supply":(a+=B?"12V ":b?"WS2815 12V ":"5V ",a+=h,a+="A supply connected to LEDs");var S=Math.ceil((100+v*laprev)/1500)/2,x="(for most effects, ~";x+=S=S>5?Math.ceil(S):S,x+="A is enough)<br>",gId("psu").innerHTML=a,gId("psu2").innerHTML=b?"":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,n=!0){var t=d.getElementsByClassName("iST"),a=t.length;if(!(1==e&&a>=maxB||-1==e&&0==a)){var i=gId("mLC");if(1==e){var s=`<div class="iST">\n<hr style="width:260px">\n${a+1}:\n<select name="LT${a}" 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 CCT</option>\n<option value="43">PWM RGB</option>\n<option value="44">PWM RGBW</option>\n<option value="45">PWM RGB+CCT</option>\n\x3c!--option value="46">PWM RGB+DCCT</option--\x3e\n<option value="80">DDP RGB (network)</option>\n\x3c!--option value="81">E1.31 RGB (network)</option--\x3e\n\x3c!--option value="82">ArtNet RGB (network)</option--\x3e\n</select>&nbsp;\n<div id="co${a}" style="display:inline">Color Order:\n<select name="CO${a}">\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${a}">Start:</span> <input type="number" name="LS${a}" id="ls${a}" class="l starts" min="0" max="8191" value="${lastEnd(a)}" oninput="startsDirty[${a}]=true;UI();" required />&nbsp;\n<div id="dig${a}c" style="display:inline">Length: <input type="number" name="LC${a}" class="l" min="1" max="${maxPB}" value="1" required oninput="UI()" /></div>\n<br>\n<span id="p0d${a}">GPIO:</span> <input type="number" name="L0${a}" min="0" max="33" required class="xs" onchange="UI()"/>\n<span id="p1d${a}"></span><input type="number" name="L1${a}" min="0" max="33" class="xs" onchange="UI()"/>\n<span id="p2d${a}"></span><input type="number" name="L2${a}" min="0" max="33" class="xs" onchange="UI()"/>\n<span id="p3d${a}"></span><input type="number" name="L3${a}" min="0" max="33" class="xs" onchange="UI()"/>\n<span id="p4d${a}"></span><input type="number" name="L4${a}" min="0" max="33" class="xs" onchange="UI()"/>\n<div id="dig${a}r" style="display:inline"><br><span id="rev${a}">Reversed</span>: <input type="checkbox" name="CV${a}"></div>\n<div id="dig${a}s" style="display:inline"><br>Skip 1<sup>st</sup> LED: <input id="sl${a}" type="checkbox" name="SL${a}"></div>\n<div id="dig${a}f" style="display:inline"><br>Off Refresh: <input id="rf${a}" type="checkbox" name="RF${a}"></div>\n</div>`;i.insertAdjacentHTML("beforeend",s)}-1==e&&(t[--a].remove(),--a),gId("+").style.display=a<maxB-1?"inline":"none",gId("-").style.display=a>0?"inline":"none",n||UI()}}function addBtn(e,n,t){var a=gId("btns").innerHTML,i="BT"+String.fromCharCode((e<10?48:55)+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"+String.fromCharCode((e<10?48:55)+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(e){(customStarts=e)||(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),gId("si").checked=e,tglSi(e)}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 loadCfg(e){var n,t;"function"==typeof window.FileReader?(e.files?e.files[0]?(n=e.files[0],(t=new FileReader).onload=function(e){let n=e.target.result;var t=JSON.parse(n);if(t.hw){if(t.hw.led){for(var a=0;a<10;a++)addLEDs(-1);t.hw.led.ins.forEach((e,n,t)=>{addLEDs(1);for(var a=0;a<e.pin.length;a++)d.getElementsByName(`L${a}${n}`)[0].value=e.pin[a];d.getElementsByName("LT"+n)[0].value=e.type,d.getElementsByName("LS"+n)[0].value=e.start,d.getElementsByName("LC"+n)[0].value=e.len,d.getElementsByName("CO"+n)[0].value=e.order,d.getElementsByName("SL"+n)[0].checked=e.skip,d.getElementsByName("RF"+n)[0].checked=e.ref,d.getElementsByName("CV"+n)[0].checked=e.rev})}if(t.hw.btn){var i=t.hw.btn;Array.isArray(i.ins)&&(gId("btns").innerHTML=""),i.ins.forEach((e,n,t)=>{addBtn(n,e.pin[0],e.type)}),d.getElementsByName("TT")[0].value=i.tt}t.hw.ir&&(d.getElementsByName("IR")[0].value=t.hw.ir.pin,d.getElementsByName("IT")[0].value=t.hw.ir.type),t.hw.relay&&(d.getElementsByName("RL")[0].value=t.hw.relay.pin,d.getElementsByName("RM")[0].checked=t.hw.relay.inv),UI()}},t.readAsText(n)):alert("Please select a JSON file first!"):alert("This browser doesn't support the `files` property of file inputs."),e.value=""):alert("The file API isn't supported on this browser yet.")}function GetV() {var d=document;
+var timeout,d=document,laprev=55,maxB=1,maxM=4e3,maxPB=4096,maxL=1333,maxLbquot=0,customStarts=!1,startsDirty=[],maxCOOverrides=5;function H(){window.open("https://kno.wled.ge/features/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)>=80)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)>=80)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<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>=80&&l<96?"IP address:":l>49?"Data GPIO:":l>41?"GPIOs:":"GPIO:",gId("p1d"+s).innerHTML=l>49&&l<64?"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),f=1;f<5;f++){(o=d.getElementsByName("L"+f+s)[0])&&(l>=80&&l<96&&f<4||l>49&&1==f||l>41&&l<50&&f+40<l?(o.style.display="inline",o.required=!0):(o.style.display="none",o.required=!1,o.value=""))}e&&(gId("rf"+s).checked=gId("rf"+s).checked||31==l,l>31&&l<48&&(d.getElementsByName("LC"+s)[0].value=1)),gId("rf"+s).onclick=31==l?function(){return!1}:function(){},n|=30==l||31==l||l>40&&l<46&&43!=l,gId("co"+s).style.display=l>=80&&l<96||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>=80&&l<96?"none":"inline",gId("dig"+s+"s").style.display=l>=80&&l<96||l>40&&l<48?"none":"inline",gId("dig"+s+"f").style.display=l>=16&&l<32||l>=50&&l<64?"inline":"none",gId("rev"+s).innerHTML=l>40&&l<48?"Inverted output":"Reversed (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))>=80){p[i].max=255,p[i].min=0,p[i].style.color="#fff";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 f=[];if(d.um_p&&Array.isArray(d.um_p))for(k=0;k<d.um_p.length;k++)f.push(d.um_p[k]);for(j=0;j<p.length;j++)if(i!=j){var y=p[j].name.substring(0,2);if("L0"==y||"L1"==y||"L2"==y||"L3"==y||"L4"==y||"RL"==y||"BT"==y||"IR"==y){if("L"===y.substring(0,1)){var L=p[j].name.substring(2);if(parseInt(d.getElementsByName("LT"+L)[0].value,10)>=80)continue}""!=p[j].value&&"-1"!=p[j].value&&f.push(parseInt(p[j].value,10))}}f.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))<80&&(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=c>Math.min(maxPB,800)||bquot>80?"inline":"none",gId("ledwarning").style.color=c>Math.max(maxPB,800)||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 h=Math.ceil((100+v*laprev)/500)/2;h=h>5?Math.ceil(h):h;a="";var B=30==d.Sf.LAsel.value,b=255==d.Sf.LAsel.value;h<1.02&&!B&&!b?a="ESP 5V pin with 1A USB supply":(a+=B?"12V ":b?"WS2815 12V ":"5V ",a+=h,a+="A supply connected to LEDs");var x=Math.ceil((100+v*laprev)/1500)/2,S="(for most effects, ~";S+=x=x>5?Math.ceil(x):x,S+="A is enough)<br>",gId("psu").innerHTML=a,gId("psu2").innerHTML=b?"":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,n=!0){var t=d.getElementsByClassName("iST"),a=t.length;if(!(1==e&&a>=maxB||-1==e&&0==a)){var i=gId("mLC");if(1==e){var s=`<div class="iST">\n<hr style="width:260px">\n${a+1}:\n<select name="LT${a}" 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 CCT</option>\n<option value="43">PWM RGB</option>\n<option value="44">PWM RGBW</option>\n<option value="45">PWM RGB+CCT</option>\n\x3c!--option value="46">PWM RGB+DCCT</option--\x3e\n<option value="80">DDP RGB (network)</option>\n\x3c!--option value="81">E1.31 RGB (network)</option--\x3e\n\x3c!--option value="82">ArtNet RGB (network)</option--\x3e\n</select>&nbsp;\n<div id="co${a}" style="display:inline">Color Order:\n<select name="CO${a}">\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${a}">Start:</span> <input type="number" name="LS${a}" id="ls${a}" class="l starts" min="0" max="8191" value="${lastEnd(a)}" oninput="startsDirty[${a}]=true;UI();" required />&nbsp;\n<div id="dig${a}c" style="display:inline">Length: <input type="number" name="LC${a}" class="l" min="1" max="${maxPB}" value="1" required oninput="UI()" /></div>\n<br>\n<span id="p0d${a}">GPIO:</span> <input type="number" name="L0${a}" min="0" max="33" required class="xs" onchange="UI()"/>\n<span id="p1d${a}"></span><input type="number" name="L1${a}" min="0" max="33" class="xs" onchange="UI()"/>\n<span id="p2d${a}"></span><input type="number" name="L2${a}" min="0" max="33" class="xs" onchange="UI()"/>\n<span id="p3d${a}"></span><input type="number" name="L3${a}" min="0" max="33" class="xs" onchange="UI()"/>\n<span id="p4d${a}"></span><input type="number" name="L4${a}" min="0" max="33" class="xs" onchange="UI()"/>\n<div id="dig${a}r" style="display:inline"><br><span id="rev${a}">Reversed</span>: <input type="checkbox" name="CV${a}"></div>\n<div id="dig${a}s" style="display:inline"><br>Skip 1<sup>st</sup> LED: <input id="sl${a}" type="checkbox" name="SL${a}"></div>\n<div id="dig${a}f" style="display:inline"><br>Off Refresh: <input id="rf${a}" type="checkbox" name="RF${a}"></div>\n</div>`;i.insertAdjacentHTML("beforeend",s)}-1==e&&(t[--a].remove(),--a),gId("+").style.display=a<maxB-1?"inline":"none",gId("-").style.display=a>0?"inline":"none",n||UI()}}function addCOM(e=0,n=1,t=0){var a=d.getElementsByClassName("com_entry").length;if(!(a>=10)){var i=`<div class="com_entry">\n<hr style="width:260px">\n${a+1}: Start: <input type="number" name="XS${a}" id="xs${a}" class="l starts" min="0" max="65535" value="${e}" oninput="UI();" required="">&nbsp;\nLength: <input type="number" name="XC${a}" id="xc${a}" class="l" min="1" max="65535" value="${n}" required="" oninput="UI()">\n<div style="display:inline">Color Order:\n<select id="xo${a}" name="XO${a}">\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>\n</div><br></div>`;gId("com_entries").insertAdjacentHTML("beforeend",i),gId("xo"+a).value=t,btnCOM(a+1)}}function remCOM(){var e=d.getElementsByClassName("com_entry"),n=e.length;0!==n&&(e[n-1].remove(),btnCOM(n-1))}function resetCOM(e){e&&(maxCOOverrides=e);for(let e of d.getElementsByClassName("com_entry"))e.remove();btnCOM(0)}function btnCOM(e){gId("com_add").style.display=e<maxCOOverrides?"inline":"none",gId("com_rem").style.display=e>0?"inline":"none"}function addBtn(e,n,t){var a=gId("btns").innerHTML,i="BT"+String.fromCharCode((e<10?48:55)+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"+String.fromCharCode((e<10?48:55)+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(e){(customStarts=e)||(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),gId("si").checked=e,tglSi(e)}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 loadCfg(e){var n,t;"function"==typeof window.FileReader?(e.files?e.files[0]?(n=e.files[0],(t=new FileReader).onload=function(e){let n=e.target.result;var t=JSON.parse(n);if(t.hw){if(t.hw.led){for(var a=0;a<10;a++)addLEDs(-1);t.hw.led.ins.forEach((e,n,t)=>{addLEDs(1);for(var a=0;a<e.pin.length;a++)d.getElementsByName(`L${a}${n}`)[0].value=e.pin[a];d.getElementsByName("LT"+n)[0].value=e.type,d.getElementsByName("LS"+n)[0].value=e.start,d.getElementsByName("LC"+n)[0].value=e.len,d.getElementsByName("CO"+n)[0].value=e.order,d.getElementsByName("SL"+n)[0].checked=e.skip,d.getElementsByName("RF"+n)[0].checked=e.ref,d.getElementsByName("CV"+n)[0].checked=e.rev})}if(t.hw.com&&(resetCOM(),t.hw.com.forEach(e=>{addCOM(e.start,e.len,e.order)})),t.hw.btn){var i=t.hw.btn;Array.isArray(i.ins)&&(gId("btns").innerHTML=""),i.ins.forEach((e,n,t)=>{addBtn(n,e.pin[0],e.type)}),d.getElementsByName("TT")[0].value=i.tt}t.hw.ir&&(d.getElementsByName("IR")[0].value=t.hw.ir.pin,d.getElementsByName("IT")[0].value=t.hw.ir.type),t.hw.relay&&(d.getElementsByName("RL")[0].value=t.hw.relay.pin,d.getElementsByName("RM")[0].checked=t.hw.relay.inv),UI()}},t.readAsText(n)):alert("Please select a JSON file first!"):alert("This browser doesn't support the `files` property of file inputs."),e.value=""):alert("The file API isn't supported on this browser yet.")}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>
@@ -115,20 +115,26 @@ 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(this.checked)" 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://kno.wled.ge/interfaces/infrared/" target="_blank">IR info</a>
-<br>Relay GPIO: <input type="number" min="-1" max="33" name="RL" 
-onchange="UI()" class="xs"> Invert <input type="checkbox" name="RM"><span 
+id="color_order_mapping">Color Order Override:<div id="com_entries"></div><hr 
+style="width:260px"><button type="button" id="com_add" onclick="addCOM(),UI()" 
+style="display:none;border-radius:20px;height:36px">+</button> <button 
+type="button" id="com_rem" onclick="remCOM(),UI()" 
+style="display:none;border-radius:20px;width:36px;height:36px">-</button><br>
+</div><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://kno.wled.ge/interfaces/infrared/" target="_blank">IR info</a><br>
+Relay GPIO: <input type="number" min="-1" max="33" name="RL" onchange="UI()" 
+class="xs"> Invert <input type="checkbox" name="RM"><span 
 style="cursor:pointer" onclick='off("RL")'>&nbsp;&#215;</span><br><hr 
 style="width:260px"><h3>Defaults</h3>Turn LEDs on after power up/reset: <input 
 type="checkbox" name="BO"><br>Default brightness: <input name="CA" 
diff --git a/wled00/set.cpp b/wled00/set.cpp
index 3f58a050d..0b74f8ab6 100644
--- a/wled00/set.cpp
+++ b/wled00/set.cpp
@@ -136,6 +136,20 @@ void handleSettingsSet(AsyncWebServerRequest *request, byte subPage)
       doInitBusses = true;
     }
 
+    ColorOrderMap com = {};
+    for (uint8_t s = 0; s < WLED_MAX_COLOR_ORDER_MAPPINGS; s++) {
+      char xs[4] = "XS"; xs[2] = 48+s; xs[3] = 0; //start LED
+      char xc[4] = "XC"; xc[2] = 48+s; xc[3] = 0; //strip length
+      char xo[4] = "XO"; xo[2] = 48+s; xo[3] = 0; //color order
+      if (request->hasArg(xs)) {
+        start = request->arg(xs).toInt();
+        length = request->arg(xc).toInt();
+        colorOrder = request->arg(xo).toInt();
+        com.add(start, length, colorOrder);
+      }
+    }
+    busses.updateColorOrderMap(com);
+
     // upate other pins
     int hw_ir_pin = request->arg(F("IR")).toInt();
     if (pinManager.allocatePin(hw_ir_pin,false, PinOwner::IR)) {
diff --git a/wled00/xml.cpp b/wled00/xml.cpp
index 3abf5bd79..21afab9b8 100644
--- a/wled00/xml.cpp
+++ b/wled00/xml.cpp
@@ -421,6 +421,19 @@ void getSettingsJS(byte subPage, char* dest)
       oappend(SET_F("mA\";"));
     }
 
+    oappend(SET_F("resetCOM("));
+    oappend(itoa(WLED_MAX_COLOR_ORDER_MAPPINGS,nS,10));
+    oappend(SET_F(");"));
+    const ColorOrderMap& com = busses.getColorOrderMap();
+    for (uint8_t s=0; s < com.count(); s++) {
+      const ColorOrderMapEntry* entry = com.get(s);
+      if (entry == nullptr) break;
+      oappend(SET_F("addCOM("));
+      oappend(itoa(entry->start,nS,10));  oappend(",");
+      oappend(itoa(entry->len,nS,10));  oappend(",");
+      oappend(itoa(entry->colorOrder,nS,10));  oappend(");");
+    }
+
     sappend('v',SET_F("CA"),briS);
 
     sappend('c',SET_F("BO"),turnOnAtBoot);

From 2c5eba335f74c13351efea3a6b9e20e6b995cd9c Mon Sep 17 00:00:00 2001
From: cschwinne <dev.aircoookie@gmail.com>
Date: Wed, 26 Jan 2022 13:26:57 +0100
Subject: [PATCH 2/2] Added white channel to Peek (closes #1716)

---
 CHANGELOG.md    | 7 +++++++
 wled00/json.cpp | 6 +++++-
 wled00/wled.h   | 2 +-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e2ef83e61..d83f625f0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 ### Builds after release 0.12.0
 
+#### Build 2201260
+
+-   Initial ESP32-C3 and ESP32-S2 support (PRs #2452, )
+-   Full segment sync (PR #2427)
+-   Allow overriding of color order by ranges (PR #2463) 
+-   Added white channel to Peek
+
 #### Build 2112080
 
 -		Version bump to 0.13.0-b6 "Toki"
diff --git a/wled00/json.cpp b/wled00/json.cpp
index 4dad36a08..06a526f6d 100644
--- a/wled00/json.cpp
+++ b/wled00/json.cpp
@@ -909,7 +909,11 @@ bool serveLiveLeds(AsyncWebServerRequest* request, uint32_t wsClient)
 
   for (uint16_t i= 0; i < used; i += n)
   {
-    olen += sprintf(obuf + olen, "\"%06X\",", strip.getPixelColor(i) & 0xFFFFFF);
+    uint32_t c = strip.getPixelColor(i);
+    uint8_t r = qadd8(W(c), R(c)); //add white channel to RGB channels as a simple RGBW -> RGB map
+    uint8_t g = qadd8(W(c), G(c));
+    uint8_t b = qadd8(W(c), B(c));
+    olen += sprintf(obuf + olen, "\"%06X\",", RGBW32(r,g,b,0));
   }
   olen -= 1;
   oappend((const char*)F("],\"n\":"));
diff --git a/wled00/wled.h b/wled00/wled.h
index f172cb0af..281562c44 100644
--- a/wled00/wled.h
+++ b/wled00/wled.h
@@ -8,7 +8,7 @@
  */
 
 // version code in format yymmddb (b = daily build)
-#define VERSION 2112080
+#define VERSION 2201260
 
 //uncomment this if you have a "my_config.h" file you'd like to use
 //#define WLED_USE_MY_CONFIG