Effect filter patterns.

wled00/data/index.css

@@ -1209,7 +1209,7 @@ TD .checkmark, TD .radiomark {
 .filter .fchkl {
 	display: inline-block;
 	min-width: 0.7em;
-	padding: 4px 4px 4px 32px;
+	padding: 1px 4px 4px 32px;
 	text-align: left;
 	line-height: 24px;
 	vertical-align: middle;

wled00/data/index.htm

@@ -46,9 +46,9 @@
 				}
 			}, 100);
 		});
-		setTimeout(()=>{h.appendChild(l)},50);
+		setTimeout(()=>{h.appendChild(l)},100);
 	});
-	setTimeout(()=>{h.appendChild(l)},50);
+	setTimeout(()=>{h.appendChild(l)},100);
 	</script>
 	<link rel="stylesheet" href="index.css">
 </head>
@@ -218,16 +218,16 @@
 		</div>
 		<div id="sliders">
 			<div id="filters" class="filter">
-				<label id="filterPal" class="check fchkl">&#127912;
+				<label id="filterPal" class="check fchkl">&#x1F3A8;
-					<input type="checkbox" data-flt="&#127912;" onchange="filterFx(this)">
+					<input type="checkbox" data-flt="&#x1F3A8;" onchange="filterFx(this)">
 					<span class="checkmark"></span>
 				</label>
-				<label id="filter1D" class="check fchkl">1D
+				<label id="filter1D" class="check fchkl">&#8942;
-					<input type="checkbox" data-flt="*" onchange="filterFx(this)">
+					<input type="checkbox" data-flt="&#8942;" onchange="filterFx(this)">
 					<span class="checkmark"></span>
 				</label>
-				<label id="filter2D" class="check fchkl">2D<!-- &#8862; -->
+				<label id="filter2D" class="check fchkl">&#9638;
-					<input type="checkbox" data-flt="2D" onchange="filterFx(this)">
+					<input type="checkbox" data-flt="&#9638;" onchange="filterFx(this)">
 					<span class="checkmark"></span>
 				</label>
 				<label id="filterVol" class="check fchkl">&#9834;

wled00/data/index.js

@@ -43,6 +43,7 @@ function gId(c) {return d.getElementById(c);}
 function gEBCN(c) {return d.getElementsByClassName(c);}
 function isEmpty(o) {return Object.keys(o).length === 0;}
 function isObj(i) {return (i && typeof i === 'object' && !Array.isArray(i));}
+function isNumeric(n) {return !isNaN(parseFloat(n)) && isFinite(n);}
 
 // returns true if dataset R, G & B values are 0
 function isRgbBlack(a) {return (parseInt(a.r) == 0 && parseInt(a.g) == 0 && parseInt(a.b) == 0);}
@@ -604,8 +605,15 @@ function parseInfo(i) {
 	mw = i.leds.matrix ? i.leds.matrix.w : 0;
 	mh = i.leds.matrix ? i.leds.matrix.h : 0;
 	isM = mw>0 && mh>0;
-	if (!isM) hideModes("2D ");
+	if (!isM) {
-	//if (!i.u || !i.u.AudioReactive) { /*hideModes(" ♪");*/ hideModes(" ♫"); }	// hide /*audio*/ frequency reactive effects
+		gId("filter1D").classList.add("hide");
+		gId("filter2D").classList.add("hide");
+		hideModes("2D");
+	}
+//	if (!i.u || !i.u.AudioReactive) {
+		//gId("filterVol").classList.add("hide"); hideModes(" ♪"); // hide volume reactive effects
+		//gId("filterFreq").classList.add("hide"); hideModes(" ♫"); // hide frequency reactive effects
+//	}
 }
 
 //https://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml
@@ -811,16 +819,22 @@ function populateEffects()
 	for (let ef of effects) {
 		// WLEDSR: add slider and color control to setX (used by requestjson)
 		let id = ef.id;
-		let nm = ef.name;
+		let nm = ef.name+" ";
 		let fd = "";
 		if (ef.name.indexOf("Reserved") < 0) {
 			if (Array.isArray(fxdata) && fxdata.length>id) {
-				fd = fxdata[id].substr(1);
+				if (fxdata[id].length==0) fd = ";;!;1d"
-				var eP = (fd == '')?[]:fd.split(";");
+				else fd = fxdata[id].substr(1);
-				var p = (eP.length<3 || eP[2]==='')?[]:eP[2].split(",");
+				let eP = (fd == '')?[]:fd.split(";"); // effect parameters
-				var m = (eP.length<4 || eP[3]==='')?[]:eP[3].split(",");
+				let p = (eP.length<3 || eP[2]==='')?[]:eP[2].split(","); // palette data
-				if (isM && m.length>0) for (let r of m) { if (r.substring(0,4)=="mp12") nm += " *"; } // 1D effects with defined mapping
+				if (p.length>0 && (p[0] !== "" && !isNumeric(p[0]))) nm += "&#x1F3A8;";	// effects using palette
-				if (p.length>0 && p[0].substring(0,1) === "!") nm += " 🎨";
+				let m = (eP.length<4 || eP[3]==='')?[]:eP[3].split(","); // metadata
+				if (m.length>0) for (let r of m) {
+					if (r.substring(0,2)=="1d") nm += "&#8942;"; // 1D effects
+					if (r.substring(0,2)=="2d") nm += "&#9638;"; // 2D effects
+					if (r.substring(0,2)=="vo") nm += "&#9834;"; // volume effects
+					if (r.substring(0,2)=="fr") nm += "&#9835;"; // frequency effects
+				}
 			}
 			html += generateListItemHtml('fx',id,nm,'setX','',fd);
 		}
@@ -2463,10 +2477,6 @@ function hideModes(txt)
 	for (let e of (gId('fxlist').querySelectorAll('.lstI')||[])) {
 		if (e.querySelector('.lstIname').innerText.indexOf(txt) >= 0) e.classList.add("hide"); //else e.classList.remove("hide");
 	}
-	if (txt==="2D ") {
-		gId("filter1D").classList.add("hide");
-		gId("filter2D").classList.add("hide");
-	}
 }
 
 function search(f,l=null)