More compact playlist entries

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ### Builds after release 0.12.0
 
+#### Build 2107040
+
+-   Playlist entries are now more compact
+-   Added the possibility to enter negative numbers for segment offset
+
 #### Build 2107021
 
 -   Added WebSockets support to UI

wled00/data/index.css

@@ -322,7 +322,7 @@ button {
 }
 
 .first {
-	margin-top: 18px !important;
+	margin-top: 10px;
 }
 
 #toast {
@@ -588,18 +588,13 @@ input[type=range]:active + .sliderbubble {
 }
 .btn-xs {
   width: 39px;
+	margin: 2px 0 0 0;
 }
 .btn-pl-add {
-  position: absolute;
-  bottom: -29px;
-  left: 94px;
-}
-.btn-pl-del {
-	position: absolute;
-	right: 2px;
-	bottom: -3px;
+	margin-left: 9px;
 }
 
+
 #qcs-w {
 	margin-top: 10px;
 }
@@ -623,8 +618,9 @@ input[type=range]:active + .sliderbubble {
 }
 
 .sel-pl {
-  width: 200px;
-  background-position: 176px 16px;
+  width: 192px;
+  background-position: 168px 16px;
+  margin: 8px 7px 0 0;
 }
 
 .sel-ple {
@@ -696,11 +692,6 @@ input[type=text] {
 	margin: 26px 0 6px 12px !important;
 }
 
-.plentry {
-  margin-top: 16px;
-  position: relative;
-}
-
 .stxt {
 	width: 50px !important;
 }
@@ -714,6 +705,23 @@ input[type=number]::-webkit-outer-spin-button {
 	-webkit-appearance: none;
 }
 
+.pln {
+	border-radius: 25px !important;
+	width: 67px !important;
+	margin: 0 2px 8px 0 !important;
+	text-align: center;
+}
+.plnl {
+	width: 86px;
+	margin: 0 2px 0 0;
+	display: inline-block;
+}
+.pli {
+	width: 38px;
+	margin: 0 0 0 29px;
+	display: inline-block;
+}
+
 .segn {
 	margin: 3px 0 6px 0 !important;
 }
@@ -1055,11 +1063,7 @@ input[type="text"].search:not(:placeholder-shown) {
 .hrz {
   width: auto;
   height: 2px;
-  background-color: var(--c-e);
-}
-.hrz-pl {
-  margin: 20px 0;
-	position: relative;
+  background-color: var(--c-b);
 }
 
 ::-webkit-scrollbar {

wled00/data/index.js

@@ -546,7 +546,7 @@ function populateSegments(s)
 					<tr>
 						<td class="segtd"><input class="noslide segn" id="seg${i}s" type="number" min="0" max="${ledCount-1}" value="${inst.start}" oninput="updateLen(${i})"></td>
 						<td class="segtd"><input class="noslide segn" id="seg${i}e" type="number" min="0" max="${ledCount}" value="${inst.stop}" oninput="updateLen(${i})"></td>
-						<td class="segtd"><input class="noslide segn" id="seg${i}of" type="number" min="0" max="${ledCount-1}" value="${inst.of}" oninput="updateLen(${i})"></td>
+						<td class="segtd"><input class="noslide segn" id="seg${i}of" type="number" value="${inst.of}" oninput="updateLen(${i})"></td>
 					</tr>
 				</table>
 				<table class="infot">
@@ -1315,6 +1315,7 @@ function makeP(i,pl) {
   if (pl) {
 		var rep = plJson[i].repeat ? plJson[i].repeat : 0;
 		content = `
+  <div class="first c">Playlist Entries</div>
   <div id="ple${i}"></div><label class="check revchkl">
     Shuffle
     <input type="checkbox" id="pl${i}rtgl" onchange="plR(${i})" ${plJson[i].r?"checked":""}>
@@ -1387,23 +1388,15 @@ function makePUtil() {
 function makePlEntry(p,i) {
   return `
   <div class="plentry">
-    ${i+1}:
     <select class="btn sel sel-pl" onchange="plePs(${p},${i},this)" data-val=${plJson[p].ps[i]} data-index=${i}>
 			${plSelContent}
     </select>
-		<table class="segt">
-			<tr>
-				<td class="segtd">Duration</td>
-				<td class="segtd">Transition</td>
-			</tr>
-			<tr>
-				<td class="segtd"><input class="noslide segn" type="number" max=6553.0 min=0.2 step=0.1 oninput="pleDur(${p},${i},this)" value=${plJson[p].dur[i]/10.0}></td>
-				<td class="segtd"><input class="noslide segn" type="number" max=65.0 min=0.0 step=0.1 oninput="pleTr(${p},${i},this)" value=${plJson[p].transition[i]/10.0}> s</td>
-			</tr>
-		</table>
-    <button class="btn btn-i btn-xs btn-pl-del" onclick="delPl(${p},${i})"><i class="icons btn-icon">&#xe037;</i></button></div>
-    <div class="hrz hrz-pl" />
-    <button class="btn btn-i btn-xs btn-pl-add" onclick="addPl(${p},${i})"><i class="icons btn-icon">&#xe18a;</i></button></div>
+		<button class="btn btn-i btn-xs btn-pl-del" onclick="delPl(${p},${i})"><i class="icons btn-icon">&#xe037;</i></button>
+		<div class="h plnl">Duration</div><div class="h plnl">Transition</div><div class="h pli">#${i+1}</div><br>
+		<input class="noslide pln" type="number" max=6553.0 min=0.2 step=0.1 oninput="pleDur(${p},${i},this)" value=${plJson[p].dur[i]/10.0}>
+		<input class="noslide pln" type="number" max=65.0 min=0.0 step=0.1 oninput="pleTr(${p},${i},this)" value=${plJson[p].transition[i]/10.0}> s
+		<button class="btn btn-i btn-xs btn-pl-add" onclick="addPl(${p},${i})"><i class="icons btn-icon">&#xe18a;</i></button>
+    <div class="hrz"></div>
   </div>`;
 }
 

wled00/json.cpp

@@ -25,8 +25,17 @@ 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;
+
+  uint16_t len = 1;
+  if (stop > start) len = stop - start;
+  int offset = elem[F("of")] | INT32_MAX;
+  if (offset != INT32_MAX) {
+    int offsetAbs = abs(offset);
+    if (offsetAbs > len - 1) offsetAbs %= len;
+    if (offset < 0) offsetAbs = len - offsetAbs;
+    seg.offset = offsetAbs;
+  }
+  if (stop > start && seg.offset > len -1) seg.offset = len -1;
 
   int segbri = elem["bri"] | -1;
   if (segbri == 0) {

wled00/wled.h

@@ -8,7 +8,7 @@
  */
 
 // version code in format yymmddb (b = daily build)
-#define VERSION 2107022
+#define VERSION 2107040
 
 //uncomment this if you have a "my_config.h" file you'd like to use
 //#define WLED_USE_MY_CONFIG