Select/deselect all segments.

CSS optimisations & fixes.
2022-03-11 23:38:50 +01:00 · 2022-03-11 23:38:50 +01:00 · b3d691fff6
parent 8e5f2d91e8
commit b3d691fff6
6 changed files with 1775 additions and 1738 deletions
--- a/.gitignore
+++ b/.gitignore
@ -16,4 +16,5 @@ node_modules
 .direnv
 wled-update.sh
 esp01-update.sh
-/wled00/LittleFS
+/wled00/LittleFS
+replace_fs.py
--- a/wled00/data/index.css
+++ b/wled00/data/index.css
@ -148,12 +148,7 @@ button {
 	padding: 0;
 	vertical-align: middle;
 }
-/*
-.segt TD.h, .plentry TD.h {
-	font-size: 13px;
-	padding: 2px 0 0;
-}
-*/
+
 .keytd {
 	text-align: left;
 }
@ -312,27 +307,30 @@ button {

 #segutil, #segutil2, #segcont, #putil, #pcont, #pql {
 	width: 280px;
+	min-height: 42px;
+}
+
+#segutil, #segcont, #pcont, #pql {
 	margin: 10px auto 0;
 }

+#segutil2 {
+	margin: 0 auto;
+}
+
 #segutil .seg {
 	margin: 10px 0;
 }

-#pcont {
+#segcont, #pcont {
 	margin-bottom: 10px;
 }

 #putil {
-	padding: 0 0 10px;
+	/*padding: 0 0 10px;*/
 	margin: 0 auto;
 }

-#putil .btn-n, #putil .btn-s {
-	/*box-shadow: 0 0 0 5px var(--c-1);*/
-	margin-bottom: 10px;
-}
-
 .smooth { transition: transform	calc(var(--f, 1)*.5s) ease-out }

 .tab-label {
@ -362,7 +360,7 @@ button {
 	position: -webkit-sticky;
 	position: sticky;
 	top: 0;
-	z-index: 1;
+	z-index: 2;
    margin: 0 auto auto;
 }

@ -438,11 +436,11 @@ button {
 }

 #info, #nodes {
-	z-index: 3;
+	z-index: 4;
 }

 #rover {
-	z-index: 2;
+	z-index: 3;
 }

 #ndlt {
@ -473,7 +471,6 @@ button {
 }

 #kv, #kn {
-	/*max-width: 490px;*/
 	display: inline-block;
 }

@ -529,10 +526,6 @@ img {
 	position: absolute;
 	top: 13px; left: 8px; right: 8px;
 	height: 4px;
-/*
-	top: 12.5px; bottom: 12.5px;
-	left: 13px; right: 13px;
-*/
 	background: var(--c-4);
 	border-radius: 16px;
 	pointer-events: none;
@ -656,6 +649,7 @@ input[type=range]::-moz-range-thumb {
 	width: 260px;
 }

+/* buttons */
 .btn {
 	padding: 8px;
 	margin: 10px 4px;
@ -675,8 +669,8 @@ input[type=range]::-moz-range-thumb {
 	background-color: var(--c-3);
 }
 .btn:hover {
-	border: 1px solid var(--c-5);
-	background-color: var(--c-5);
+	border: 1px solid var(--c-5) !important;
+	background-color: var(--c-5) !important;
 }
 .btn-s {
 	width: 100%;
@ -706,6 +700,15 @@ input[type=range]::-moz-range-thumb {
 	margin: 0;
 }

+#putil .btn-s {
+	width: 135px;
+}
+
+#segutil .btn-s, #segutil2 .btn-s, #putil .btn-s {
+	background-color: var(--c-3);
+	border: 1px solid var(--c-3);
+}
+
 .btn-pl-del, .btn-pl-add {
 	margin: 0;
 	white-space: nowrap;
@ -858,11 +861,11 @@ input[type=number]::-webkit-outer-spin-button {
 	top:0;
 }

+/* preset id number */
 .pid {
 	position: absolute;
 	top: 8px;
 	left: 12px;
-	/*padding: 10px 0 0 12px;*/
 	font-size: 16px;
 	text-align: center;
 	color: var(--c-b);
@ -917,6 +920,7 @@ input[type=number]::-webkit-outer-spin-button {
 	right: 8px;
 }

+/* radiobuttons and checkmarks */
 .check, .radio {
 	display: block;
 	position: relative;
@ -1009,10 +1013,11 @@ input[type=number]::-webkit-outer-spin-button {
 	margin-bottom: 5px;
 }

+/* segment & preset wrapper */
 .seg, .pres {
 	position: relative;
 	display: block;
-	padding: 10px 0;
+	padding: 8px 0;
 	margin: 0 0 10px;
 	background-color: var(--c-2);
 	color: var(--c-f);
@ -1037,10 +1042,11 @@ input[type=number]::-webkit-outer-spin-button {

 .seg .schkl {
 	position: absolute;
-	top: 8px;
-	left: 8px;
+	top: 7px;
+	left: 9px;
 }

+/* list wrapper */
 .list {
 	position: relative;
 	width: 280px;
@ -1050,8 +1056,8 @@ input[type=number]::-webkit-outer-spin-button {
 	line-height: 24px;
 }

+/* list item */
 .lstI {
-	/*display: flex;*/
 	align-items: center;
 	padding: 8px 10px;
    cursor: pointer;
@ -1063,6 +1069,7 @@ input[type=number]::-webkit-outer-spin-button {
 	min-height: 24px;
 }

+/* selected item/element */
 .selected { /* has to be after .lstI */
 	background: var(--c-4);
 }
@ -1079,6 +1086,7 @@ input[type=number]::-webkit-outer-spin-button {
 	background-color: var(--c-3);
 }

+/* selected list item */
 .lstI.selected {
 	top: 0;
 	bottom: 0;
@ -1089,42 +1097,38 @@ input[type=number]::-webkit-outer-spin-button {
 }

 #pcont .selected {
-	bottom: 114px;
+	bottom: 42px;
 	top: 40px;
 }
 /* calculated in index.js
 #fxlist .lstI.selected {
-	top: 142px;
+	top: 142px !important;
 }
 */
 #pallist .lstI.selected {
 	top: 82px;
 }
-/* must be after .selected */
 /* calculated in index.js
 #fxlist .lstI.sticky {
-	top: 99px;
+	top: 99px !important;
 }
 */
 #pallist .lstI.sticky {
 	top: 40px;
 }

+/* list item content */
 .lstIcontent {
-	/*width: 100%;
-	vertical-align: middle;*/
-	padding: 0; /*20px 0 5px;
-	text-align: left;
-	display: inline-block;*/
+	padding: 0;
 	position: relative;
-	/*left: 40px;*/
 }

+/* list item name (for sorting) */
 .lstIname {
 	white-space: nowrap;
 }

-/* palette preview */
+/* list item palette preview */
 .lstIprev {
 	width: 100%;
 	height: 7px;
@ -1134,11 +1138,10 @@ input[type=number]::-webkit-outer-spin-button {
 	z-index: -1;
 }

+/* find/search element */
 .fnd {
 	width: 280px;
 	margin: 0 auto;
-	/*border-radius: 25px;
-	box-shadow: 0 0 0 5px var(--c-1);*/
 }

 input[type="text"].fnd {
@ -1161,9 +1164,12 @@ input[type="text"].fnd:hover {
 	background-color: var(--c-3);
 }

+/* segment inner (expanded) content */
 .segin {
 	padding: 8px 8px 0;
 }
+
+/* preset inner/expanded content */
 .presin {
 	padding: 8px 0 0;
 }
@ -1177,7 +1183,7 @@ input[type="text"].fnd:hover {
 	background-color: var(--c-5);
 }

-/* must be after .expanded */
+/* hidden list items, must be after .expanded */
 .pres .lstIcontent, .segin {
 	display: none;
 }
--- a/wled00/data/index.htm
+++ b/wled00/data/index.htm
@ -182,8 +182,8 @@
 	</div>

 	<div id="Effects" class="tabcontent">
-		<div id="sliders">
-			<p class="labels" id="sliderLabel0">Effect speed</p>
+		<span id="sliders">
+			<p class="labels hd" id="sliderLabel0">Effect speed</p>
 			<div class="staytop" id="slider0">
 				<i class="icons slider-icon" style="cursor: pointer;" onclick="tglFreeze()">&#xe325;</i>
 				<div class="sliderwrap il">
@ -192,7 +192,7 @@
 				</div>
 				<output class="sliderbubble"></output>
 			</div>
-			<p class="labels" id="sliderLabel1">Effect intensity</p>
+			<p class="labels hd" id="sliderLabel1">Effect intensity</p>
 			<div class="staytop" id="slider1">
 				<i class="icons slider-icon" style="cursor: pointer;" onclick="tglLabels()">&#xe409;</i>
 				<div class="sliderwrap il">
@ -201,7 +201,7 @@
 				</div>
 				<output class="sliderbubble"></output>
 			</div>
-			<p class="labels" id="sliderLabel2">Custom 1</p>
+			<p class="labels hd" id="sliderLabel2">Custom 1</p>
 			<div class="staytop" id="slider2">
 				<i class="icons slider-icon">&#xe410;</i>
 				<div class="sliderwrap il">
@ -210,7 +210,7 @@
 				</div>
 				<output class="sliderbubble"></output>
 			</div>
-			<p class="labels" id="sliderLabel3">Custom 2</p>
+			<p class="labels hd" id="sliderLabel3">Custom 2</p>
 			<div class="staytop" id="slider3">
 				<i class="icons slider-icon">&#xe410;</i>
 				<div class="sliderwrap il">
@ -219,7 +219,7 @@
 				</div>
 				<output class="sliderbubble"></output>
 			</div>
-			<p class="labels" id="sliderLabel4">Custom 3</p>
+			<p class="labels hd" id="sliderLabel4">Custom 3</p>
 			<div class="staytop" id="slider4">
 				<i class="icons slider-icon">&#xe410;</i>
 				<div class="sliderwrap il">
@ -228,7 +228,7 @@
 				</div>
 				<output class="sliderbubble"></output>
 			</div>
-		</div>
+		</span>
 		<div class="il">
 			<p class="labels hd" id="modeLabel">Effect mode</p>
 			<div class="staytop fnd" id="fxFind">
@ -295,17 +295,12 @@
 	</div><br>
 	<div id="kv">Loading...</div><br>
 	<div>
-	<!--table>
-		<tr>
-			<td class="keytd"--><button class="btn" onclick="requestJson()">Refresh</button><!--/td>
-			<td class="valtd"--><button class="btn" onclick="toggleInfo()">Close Info</button><!--/td>
-		</tr>
-		<tr>
-			<td class="keytd"--><button class="btn" onclick="toggleNodes()">Instance List</button><!--/td>
-			<td class="valtd"--><button class="btn" id="resetbtn" onclick="cnfReset()">Reboot WLED</button><!--/td>
-		</tr>
-	</table-->
-	</div><br>
+		<button class="btn" onclick="requestJson()">Refresh</button>
+		<button class="btn" onclick="toggleInfo()">Close Info</button>
+		<button class="btn" onclick="toggleNodes()">Instance List</button>
+		<button class="btn" id="resetbtn" onclick="cnfReset()">Reboot WLED</button>
+	</div>
+	<br>
 	<span class="h">Made with <span id="heart">&#10084;&#xFE0E;</span> by Aircoookie and the <a href="https://wled.discourse.group/" target="_blank">WLED community</a></span>
 </div>

@ -313,13 +308,10 @@
 	<div id="ndlt">WLED instances</div>
 	<div id="kn">Loading...</div><br>
 	<div>
-	<!--table>
-		<tr>
-			<td class="keytd"--><button class="btn infobtn" onclick="loadNodes()">Refresh</button><!--/td>
-			<td class="valtd"--><button class="btn infobtn" onclick="toggleNodes()">Close list</button><!--/td>
-		</tr>
-	</table-->
-	</div><br>
+		<button class="btn infobtn" onclick="loadNodes()">Refresh</button>
+		<button class="btn infobtn" onclick="toggleNodes()">Close list</button>
+	</div>
+	<br>
 </div>

 <div id="rover" class="modal">
--- a/wled00/data/index.js
+++ b/wled00/data/index.js
@ -89,8 +89,8 @@ function applyCfg()
 	var l = cfg.comp.labels;
 	var e = d.querySelectorAll('.tab-label');
 	for (let i of e) i.style.display = l ? "block":"none";
-	e = d.querySelector('.hd');
-	e.style.display = l ? "block":"none";
+	//e = d.querySelector('.hd');
+	//e.style.display = l ? "block":"none";
 	sCol('--tbp',l ? "14px 14px 10px 14px":"10px 22px 4px 22px");
 	sCol('--bbp',l ? "9px 0 7px 0":"10px 0 4px 0");
 	sCol('--bhd',l ? "block":"none");
@ -1267,7 +1267,7 @@ function setSliderAndColorControl(idx, applyDef=false)
 		var label = gId("sliderLabel" + i);
 		// if (not controlDefined and for AC speed or intensity and for SR alle sliders) or slider has a value
 		if ((!controlDefined && i < ((idx<128)?2:nSliders)) || (slOnOff.length>i && slOnOff[i] != "")) {
-			label.style.display = "block";
+			//label.style.display = "block";
 			if (slOnOff.length>i && slOnOff[i].indexOf("=")>0) {
 				// embeded default values
 				var dPos = slOnOff[i].indexOf("=");
@ -1281,7 +1281,7 @@ function setSliderAndColorControl(idx, applyDef=false)
 			else if (i==0)                           label.innerHTML = "Effect speed";
 			else if (i==1)                           label.innerHTML = "Effect intensity";
 			else                                     label.innerHTML = "Custom" + (i-1);
-			label.style.top = "auto";
+			//label.style.top = "auto";
 			slider.style.display = "block";
 			slider.style.top = topPosition + "px";
 			topPosition += 28; // increase top position for the next control
@ -1289,7 +1289,7 @@ function setSliderAndColorControl(idx, applyDef=false)
 		} else {
 			// disable label and slider
 			slider.style.display = "none";
-			label.style.display = "none";
+			//label.style.display = "none";
 		}
 	}
 	if (topPosition>0) topPosition += 2;
@ -1530,7 +1530,10 @@ function makeSeg()

 function resetUtil()
 {
-	gId('segutil').innerHTML = '<button class="btn btn-s" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>Add segment</button>';
+//	gId('segutil').innerHTML = '<button class="btn btn-s" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>segment</button>';
+	gId('segutil').innerHTML = '<div class="seg btn btn-s" style="border-radius:24px;">'
+	+ '<label class="check schkl"><input type="checkbox" onchange="selSegAll(this)"><span class="checkmark schk"></span></label>'
+	+ '<div class="segname" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>segment</div></div>';
 }

 var plJson = {"0":{
@ -1701,7 +1704,14 @@ ${(i>0)? ('<div class="h">ID ' +i+ '</div>'):""}`;

 function makePUtil()
 {
-	gId('putil').innerHTML = `<div class="pres"><div class="segin expanded">${makeP(0)}</div></div>`;
+	let p = gId('putil');
+	p.classList.remove('staybot');
+	p.innerHTML = `<div class="pres"><div class="segin expanded">${makeP(0)}</div></div>`;
+	p.scrollIntoView({
+		behavior: 'smooth',
+		block: 'center'
+	});
+	gId('psFind').classList.remove('staytop');
 }

 function makePlEntry(p,i) {
@ -1736,14 +1746,23 @@ function makePlUtil()
 		showToast("You need at least 2 presets to make a playlist!"); //return;
 	}
 	if (plJson[0].transition[0] < 0) plJson[0].transition[0] = tr;
-	gId('putil').innerHTML = `<div class="pres"><div class="segin expanded" id="seg100">${makeP(0,true)}</div></div>`;
+	let p = gId('putil');
+	p.classList.remove('staybot');
+	p.innerHTML = `<div class="pres"><div class="segin expanded" id="seg100">${makeP(0,true)}</div></div>`;
 	refreshPlE(0);
+	p.scrollIntoView({
+		behavior: 'smooth',
+		block: 'center'
+	});
+	gId('psFind').classList.remove('staytop');
 }

 function resetPUtil()
 {
-	gId('putil').innerHTML = `<button class="btn btn-s" onclick="makePUtil()"><i class="icons btn-icon">&#xe18a;</i>New&nbsp;preset</button><br>`+
-	`<button class="btn btn-s" onclick="makePlUtil()"><i class="icons btn-icon">&#xe139;</i>New&nbsp;playlist</button>`;
+	gId('psFind').classList.add('staytop');
+	gId('putil').classList.add('staybot');
+	gId('putil').innerHTML = `<button class="btn btn-s" onclick="makePUtil()" style="float:left;"><i class="icons btn-icon">&#xe18a;</i>preset</button>`
+	+ `<button class="btn btn-s" onclick="makePlUtil()" style="float:right;"><i class="icons btn-icon">&#xe18a;<!--&#xe139;--></i>playlist</button>`;
 }

 function tglCs(i)
@ -1758,6 +1777,14 @@ function tglSegn(s)
 	d.gId(`seg${s}t`).style.display = (window.getComputedStyle(d.gId(`seg${s}t`)).display === "none") ? "inline":"none";
 }

+function selSegAll(o)
+{
+	//o.checked = true;
+	var obj = {"seg":[]};
+	for (let i=0; i<=lSeg; i++) obj.seg.push({"id":i,"sel":o.checked});
+	requestJson(obj);
+}
+
 function selSegEx(s)
 {
 	var obj = {"seg":[]};
--- a/wled00/html_ui.h
+++ b/wled00/html_ui.h
--- a/wled00/wled.h
+++ b/wled00/wled.h
@ -8,7 +8,7 @@
 */

 // version code in format yymmddb (b = daily build)
-#define VERSION 2203101
+#define VERSION 2203111

 //uncomment this if you have a "my_config.h" file you'd like to use
 //#define WLED_USE_MY_CONFIG