From 7233c55428eb3501135eb4f62c9f4a68a233f510 Mon Sep 17 00:00:00 2001
From: cschwinne <dev.aircoookie@gmail.com>
Date: Wed, 30 Jun 2021 00:45:36 +0200
Subject: [PATCH] Segment Offset

---
 wled00/FX.h                   |  7 ++++---
 wled00/FX_fcn.cpp             | 17 +++++++++++++++--
 wled00/data/settings_leds.htm |  3 ++-
 wled00/html_settings.h        |  2 +-
 wled00/json.cpp               |  3 +++
 wled00/wled.h                 |  5 ++---
 6 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/wled00/FX.h b/wled00/FX.h
index 98cb5131..61b64189 100644
--- a/wled00/FX.h
+++ b/wled00/FX.h
@@ -245,9 +245,10 @@ class WS2812FX {
   
   // segment parameters
   public:
-    typedef struct Segment { // 24 bytes
+    typedef struct Segment { // 25 (28 in memory?) bytes
       uint16_t start;
       uint16_t stop; //segment invalid if stop == 0
+      uint16_t offset;
       uint8_t speed;
       uint8_t intensity;
       uint8_t palette;
@@ -863,8 +864,8 @@ class WS2812FX {
     uint8_t _segment_index = 0;
     uint8_t _segment_index_palette_last = 99;
     segment _segments[MAX_NUM_SEGMENTS] = { // SRAM footprint: 24 bytes per element
-      // start, stop, speed, intensity, palette, mode, options, grouping, spacing, opacity (unused), color[]
-      { 0, 7, DEFAULT_SPEED, 128, 0, DEFAULT_MODE, NO_OPTIONS, 1, 0, 255, {DEFAULT_COLOR}}
+      // start, stop, offset, speed, intensity, palette, mode, options, grouping, spacing, opacity (unused), color[]
+      {0, 7, 0, DEFAULT_SPEED, 128, 0, DEFAULT_MODE, NO_OPTIONS, 1, 0, 255, {DEFAULT_COLOR}}
     };
     segment_runtime _segment_runtimes[MAX_NUM_SEGMENTS]; // SRAM footprint: 28 bytes per element
     friend class Segment_runtime;
diff --git a/wled00/FX_fcn.cpp b/wled00/FX_fcn.cpp
index 81f9f689..8a9d2cb3 100644
--- a/wled00/FX_fcn.cpp
+++ b/wled00/FX_fcn.cpp
@@ -237,15 +237,24 @@ void WS2812FX::setPixelColor(uint16_t i, byte r, byte g, byte b, byte w)
 
     bool reversed = IS_REVERSE;
     uint16_t realIndex = realPixelIndex(i);
+    uint16_t len = SEGMENT.length();
 
     for (uint16_t j = 0; j < SEGMENT.grouping; j++) {
       int indexSet = realIndex + (reversed ? -j : j);
       if (indexSet >= SEGMENT.start && indexSet < SEGMENT.stop) {
         if (IS_MIRROR) { //set the corresponding mirrored pixel
           uint16_t indexMir = SEGMENT.stop - indexSet + SEGMENT.start - 1;
+          /* offset/phase */
+          indexMir += SEGMENT.offset;
+          if (indexMir >= SEGMENT.stop) indexMir -= len;
+
           if (indexMir < customMappingSize) indexMir = customMappingTable[indexMir];
           busses.setPixelColor(indexMir, col);
         }
+        /* offset/phase */
+          indexSet += SEGMENT.offset;
+          if (indexSet >= SEGMENT.stop) indexSet -= len;
+
         if (indexSet < customMappingSize) indexSet = customMappingTable[indexSet];
         busses.setPixelColor(indexSet, col);
       }
@@ -525,11 +534,15 @@ uint32_t WS2812FX::getColor(void) {
 uint32_t WS2812FX::getPixelColor(uint16_t i)
 {
   i = realPixelIndex(i);
+
+  if (SEGLEN) {
+    /* offset/phase */
+    i += SEGMENT.offset;
+    if (i >= SEGMENT.stop) i -= SEGMENT.length();
+  }
   
   if (i < customMappingSize) i = customMappingTable[i];
   
-  if (i >= _length) return 0;
-  
   return busses.getPixelColor(i);
 }
 
diff --git a/wled00/data/settings_leds.htm b/wled00/data/settings_leds.htm
index 5c00c827..b24648fb 100644
--- a/wled00/data/settings_leds.htm
+++ b/wled00/data/settings_leds.htm
@@ -183,7 +183,6 @@
       gId('ledwarning').style.color = (sLC > maxPB || maxLC > maxPB || bquot > 100) ? 'red':'orange';
       gId('wreason').innerHTML = (bquot > 80) ? "80% of max. LED memory" +(bquot>100 ? ` (<b>WARNING: Using over ${maxM}B!</b>)` : "") : "800 LEDs per pin";
 
-      //var val = Math.ceil((100 + d.Sf.LC.value * laprev)/500)/2;
       var val = Math.ceil((100 + sLC * laprev)/500)/2;
 			val = (val > 5) ? Math.ceil(val) : val;
 			var s = "";
@@ -209,6 +208,8 @@
     function lastEnd(i) {
       if (i<1) return 0;
       v = parseInt(d.getElementsByName("LS"+(i-1))[0].value) + parseInt(d.getElementsByName("LC"+(i-1))[0].value);
+      var type = parseInt(d.getElementsByName("LT"+(i-1))[0].value);
+      if (type > 31 && type < 48) v = 1; //PWM busses
       if (isNaN(v)) return 0;
       return v;
     }
diff --git a/wled00/html_settings.h b/wled00/html_settings.h
index e1729af5..c982eda8 100644
--- a/wled00/html_settings.h
+++ b/wled00/html_settings.h
@@ -75,7 +75,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 d=document,laprev=55,maxB=1,maxM=5e3,maxPB=4096,bquot=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 bLimits(e,n,t){maxB=e,maxM=t,maxPB=n}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||"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;for(j=i+1;j<e.length;j++){var t=e[j].name.substring(0,2);if(("L0"==t||"L1"==t||"L2"==t||"L3"==t||"L4"==t||"RL"==t||"BT"==t||"IR"==t)&&""!=e[j].value&&e[i].value==e[j].value)return alert(`Pin conflict between ${n}/${t}!`),e[j].value="",e[j].focus(),!1}}}return!0}function trySubmit(e){if(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<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(u=0;u<a.length;u++)if("LT"==a[u].name.substring(0,2)){c=a[u].name.substring(2);var i=parseInt(a[u].value,10);gId("p0d"+c).innerHTML=i>49?"Data:":i>41?"Pins:":"Pin:",gId("p1d"+c).innerHTML=i>49?"Clk:":"";var l=d.getElementsByName("L1"+c)[0];for(t+=getMem(i,d.getElementsByName("LC"+c)[0].value,d.getElementsByName("L0"+c)[0].value),g=1;g<5;g++){(l=d.getElementsByName("L"+g+c)[0])&&(i>49&&1==g||i>41&&i<50&&g+40<i?(l.style.display="inline",l.required=!0):(l.style.display="none",l.required=!1,l.value=""))}(30==i||31==i||i>40&&i<46&&43!=i)&&(n=!0),gId("dig"+c).style.display=i>31&&i<48?"none":"inline",gId("psd"+c).innerHTML=i>31&&i<48?"Index:":"Start:"}var o=d.querySelectorAll(".wc"),s=o.length;for(u=0;u<s;u++)o[u].style.display=n?"inline":"none";if(d.activeElement==d.getElementsByName("LC")[0]){var u=d.getElementsByClassName("iST").length;1==u&&(d.getElementsByName("LC0")[0].value=d.getElementsByName("LC")[0].value)}var p=d.getElementsByTagName("input"),r=0,m=0;for(u=0;u<p.length;u++){var v=p[u].name.substring(0,2);if("LC"!=v||"LC"===p[u].name){if("L0"==v||"L1"==v)d.getElementsByName("LC"+p[u].name.substring(2))[0].max=maxPB;if(("L0"==v||"L1"==v||"L2"==v||"L3"==v||"L4"==v||"RL"==v||"BT"==v||"IR"==v)&&""!=p[u].value&&"-1"!=p[u].value){var g=[];if(d.um_p&&Array.isArray(d.um_p))for(k=0;k<d.um_p.length;k++)g.push(d.um_p[k]);for(j=0;j<p.length;j++)if(u!=j){var L=p[j].name.substring(0,2);"L0"!=L&&"L1"!=L&&"L2"!=L&&"L3"!=L&&"L4"!=L&&"RL"!=L&&"BT"!=L&&"IR"!=L||""!=p[j].value&&"-1"!=p[j].value&&g.push(parseInt(p[j].value,10))}g.some(e=>e==parseInt(p[u].value,10))?p[u].style.color="red":p[u].style.color="#fff"}}else{var c=p[u].name.substring(2),y=parseInt(p[u].value,10);gId("ls"+c).readOnly&&(gId("ls"+c).value=r),y&&(r+=y,y>m&&(m=y))}}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=r>maxPB||m>800||bquot>80?"inline":"none",gId("ledwarning").style.color=r>maxPB||m>maxPB||bquot>100?"red":"orange",gId("wreason").innerHTML=bquot>80?"80% of max. LED memory"+(bquot>100?` (<b>WARNING: Using over ${maxM}B!</b>)`:""):"800 LEDs per pin";var f=Math.ceil((100+r*laprev)/500)/2;f=f>5?Math.ceil(f):f;a="";var b=30==d.Sf.LAsel.value,B=255==d.Sf.LAsel.value;f<1.02&&!b&&!B?a="ESP 5V pin with 1A USB supply":(a+=b?"12V ":B?"WS2815 12V ":"5V ",a+=f,a+="A supply connected to LEDs");var I=Math.ceil((100+r*laprev)/1500)/2,h="(for most effects, ~";h+=I=I>5?Math.ceil(I):I,h+="A is enough)<br>",gId("psu").innerHTML=a,gId("psu2").innerHTML=B?"":h}function lastEnd(e){return e<1?0:(v=parseInt(d.getElementsByName("LS"+(e-1))[0].value)+parseInt(d.getElementsByName("LC"+(e-1))[0].value),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${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;\nColor 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" onchange="UI()"/>\n<span id="p1d${t}">Clock:</span> <input type="number" name="L1${t}" min="0" max="40" style="width:35px" onchange="UI()"/>\n<span id="p2d${t}"></span><input type="number" name="L2${t}" min="0" max="40" style="width:35px" onchange="UI()"/>\n<span id="p3d${t}"></span><input type="number" name="L3${t}" min="0" max="40" style="width:35px" onchange="UI()"/>\n<span id="p4d${t}"></span><input type="number" name="L4${t}" min="0" max="40" style="width:35px" onchange="UI()"/>\n<br>\n<span id="psd${t}">Start:</span> <input type="number" name="LS${t}" id="ls${t}" min="0" max="8191" value="${lastEnd(t)}" required />&nbsp;\n<div id="dig${t}" style="display:inline">\nCount: <input type="number" name="LC${t}" min="0" max="${maxPB}" value="1" required oninput="UI()" /><br>\nReverse (rotated 180°): <input type="checkbox" name="CV${t}">\n&nbsp;Skip 1<sup>st</sup> LED: <input id="sl${t}" type="checkbox" name="SL${t}"><br>\n</div>\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} pin: <input type="number" min="-1" max="40" name="${i}" onchange="UI()" style="width:35px" value="${n}">&nbsp;`,a+=`<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" ${4==t?"selected":""}>Switch inverted</option>`,a+=`<option value="6" ${6==t?"selected":""}>Touch</option>`,a+=`<option value="7" ${7==t?"selected":""}>Analog</option>`,a+="</select>",a+=`<span style="cursor: pointer;" onclick="off('${i}')">&nbsp;&#215;</span><br>`,gId("btns").innerHTML=a}function GetV() {var d=document;
+var d=document,laprev=55,maxB=1,maxM=5e3,maxPB=4096,bquot=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 bLimits(e,n,t){maxB=e,maxM=t,maxPB=n}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||"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;for(j=i+1;j<e.length;j++){var t=e[j].name.substring(0,2);if(("L0"==t||"L1"==t||"L2"==t||"L3"==t||"L4"==t||"RL"==t||"BT"==t||"IR"==t)&&""!=e[j].value&&e[i].value==e[j].value)return alert(`Pin conflict between ${n}/${t}!`),e[j].value="",e[j].focus(),!1}}}return!0}function trySubmit(e){if(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<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(u=0;u<a.length;u++)if("LT"==a[u].name.substring(0,2)){c=a[u].name.substring(2);var i=parseInt(a[u].value,10);gId("p0d"+c).innerHTML=i>49?"Data:":i>41?"Pins:":"Pin:",gId("p1d"+c).innerHTML=i>49?"Clk:":"";var l=d.getElementsByName("L1"+c)[0];for(t+=getMem(i,d.getElementsByName("LC"+c)[0].value,d.getElementsByName("L0"+c)[0].value),g=1;g<5;g++){(l=d.getElementsByName("L"+g+c)[0])&&(i>49&&1==g||i>41&&i<50&&g+40<i?(l.style.display="inline",l.required=!0):(l.style.display="none",l.required=!1,l.value=""))}(30==i||31==i||i>40&&i<46&&43!=i)&&(n=!0),gId("dig"+c).style.display=i>31&&i<48?"none":"inline",gId("psd"+c).innerHTML=i>31&&i<48?"Index:":"Start:"}var o=d.querySelectorAll(".wc"),s=o.length;for(u=0;u<s;u++)o[u].style.display=n?"inline":"none";if(d.activeElement==d.getElementsByName("LC")[0]){var u=d.getElementsByClassName("iST").length;1==u&&(d.getElementsByName("LC0")[0].value=d.getElementsByName("LC")[0].value)}var r=d.getElementsByTagName("input"),p=0,m=0;for(u=0;u<r.length;u++){var v=r[u].name.substring(0,2);if("LC"!=v||"LC"===r[u].name){if("L0"==v||"L1"==v)d.getElementsByName("LC"+r[u].name.substring(2))[0].max=maxPB;if(("L0"==v||"L1"==v||"L2"==v||"L3"==v||"L4"==v||"RL"==v||"BT"==v||"IR"==v)&&""!=r[u].value&&"-1"!=r[u].value){var g=[];if(d.um_p&&Array.isArray(d.um_p))for(k=0;k<d.um_p.length;k++)g.push(d.um_p[k]);for(j=0;j<r.length;j++)if(u!=j){var L=r[j].name.substring(0,2);"L0"!=L&&"L1"!=L&&"L2"!=L&&"L3"!=L&&"L4"!=L&&"RL"!=L&&"BT"!=L&&"IR"!=L||""!=r[j].value&&"-1"!=r[j].value&&g.push(parseInt(r[j].value,10))}g.some(e=>e==parseInt(r[u].value,10))?r[u].style.color="red":r[u].style.color="#fff"}}else{var c=r[u].name.substring(2),y=parseInt(r[u].value,10);gId("ls"+c).readOnly&&(gId("ls"+c).value=p),y&&(p+=y,y>m&&(m=y))}}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=p>maxPB||m>800||bquot>80?"inline":"none",gId("ledwarning").style.color=p>maxPB||m>maxPB||bquot>100?"red":"orange",gId("wreason").innerHTML=bquot>80?"80% of max. LED memory"+(bquot>100?` (<b>WARNING: Using over ${maxM}B!</b>)`:""):"800 LEDs per pin";var f=Math.ceil((100+p*laprev)/500)/2;f=f>5?Math.ceil(f):f;a="";var b=30==d.Sf.LAsel.value,B=255==d.Sf.LAsel.value;f<1.02&&!b&&!B?a="ESP 5V pin with 1A USB supply":(a+=b?"12V ":B?"WS2815 12V ":"5V ",a+=f,a+="A supply connected to LEDs");var I=Math.ceil((100+p*laprev)/1500)/2,h="(for most effects, ~";h+=I=I>5?Math.ceil(I):I,h+="A is enough)<br>",gId("psu").innerHTML=a,gId("psu2").innerHTML=B?"":h}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${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;\nColor 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" onchange="UI()"/>\n<span id="p1d${t}">Clock:</span> <input type="number" name="L1${t}" min="0" max="40" style="width:35px" onchange="UI()"/>\n<span id="p2d${t}"></span><input type="number" name="L2${t}" min="0" max="40" style="width:35px" onchange="UI()"/>\n<span id="p3d${t}"></span><input type="number" name="L3${t}" min="0" max="40" style="width:35px" onchange="UI()"/>\n<span id="p4d${t}"></span><input type="number" name="L4${t}" min="0" max="40" style="width:35px" onchange="UI()"/>\n<br>\n<span id="psd${t}">Start:</span> <input type="number" name="LS${t}" id="ls${t}" min="0" max="8191" value="${lastEnd(t)}" required />&nbsp;\n<div id="dig${t}" style="display:inline">\nCount: <input type="number" name="LC${t}" min="0" max="${maxPB}" value="1" required oninput="UI()" /><br>\nReverse (rotated 180°): <input type="checkbox" name="CV${t}">\n&nbsp;Skip 1<sup>st</sup> LED: <input id="sl${t}" type="checkbox" name="SL${t}"><br>\n</div>\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} pin: <input type="number" min="-1" max="40" name="${i}" onchange="UI()" style="width:35px" value="${n}">&nbsp;`,a+=`<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" ${4==t?"selected":""}>Switch inverted</option>`,a+=`<option value="6" ${6==t?"selected":""}>Touch</option>`,a+=`<option value="7" ${7==t?"selected":""}>Analog</option>`,a+="</select>",a+=`<span style="cursor: pointer;" onclick="off('${i}')">&nbsp;&#215;</span><br>`,gId("btns").innerHTML=a}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>
diff --git a/wled00/json.cpp b/wled00/json.cpp
index debe3efc..7d9c5896 100644
--- a/wled00/json.cpp
+++ b/wled00/json.cpp
@@ -22,6 +22,8 @@ void deserializeSegment(JsonObject elem, byte it, byte presetId)
     uint16_t grp = elem[F("grp")] | seg.grouping;
     uint16_t spc = elem[F("spc")] | seg.spacing;
     strip.setSegment(id, start, stop, grp, spc);
+    seg.offset = elem[F("of")] | seg.offset;
+    if (stop > start && seg.offset > stop - start -1) seg.offset = stop - start -1;
 
     int segbri = elem["bri"] | -1;
     if (segbri == 0) {
@@ -324,6 +326,7 @@ void serializeSegment(JsonObject& root, WS2812FX::Segment& seg, byte id, bool fo
 	if (!forPreset) root[F("len")] = seg.stop - seg.start;
   root[F("grp")] = seg.grouping;
   root[F("spc")] = seg.spacing;
+  root[F("of")] = seg.offset;
   root["on"] = seg.getOption(SEG_OPTION_ON);
   byte segbri = seg.opacity;
   root["bri"] = (segbri) ? segbri : 255;
diff --git a/wled00/wled.h b/wled00/wled.h
index 6c989a1d..fffaa2a2 100644
--- a/wled00/wled.h
+++ b/wled00/wled.h
@@ -8,7 +8,7 @@
  */
 
 // version code in format yymmddb (b = daily build)
-#define VERSION 2106250
+#define VERSION 2106290
 
 //uncomment this if you have a "my_config.h" file you'd like to use
 //#define WLED_USE_MY_CONFIG
@@ -206,8 +206,7 @@ WLED_GLOBAL char versionString[] _INIT(TOSTRING(WLED_VERSION));
 WLED_GLOBAL char apPass[65]  _INIT(DEFAULT_AP_PASS);
 WLED_GLOBAL char otaPass[33] _INIT(DEFAULT_OTA_PASS);
 
-// Hardware CONFIG (only changeble HERE, not at runtime)
-// LED strip pin, button pin and IR pin changeable in NpbWrapper.h!
+// Hardware and pin config
 #ifndef BTNPIN
 WLED_GLOBAL int8_t btnPin[WLED_MAX_BUTTONS] _INIT({0});
 #else