Merge remote-tracking branch 'upstream/main' into mdev

2023-05-11 17:39:12 +02:00
parent eb6b890c6b bf6a18a414
commit fede3dd54c
33 changed files with 4706 additions and 3339 deletions
--- a/wled00/data/index.js
+++ b/wled00/data/index.js
@@ -217,6 +217,7 @@ function onLoad()

 	resetPUtil();

+	if (localStorage.getItem('pcm') == "true" || (!/Mobi/.test(navigator.userAgent) && localStorage.getItem('pcm') == null)) togglePcMode(true);
 	applyCfg();
 	if (cfg.comp.hdays) { //load custom holiday list
 		fetch((loc?`http://${locip}`:'.') + "/holidays.json", {	// may be loaded from external source
@@ -261,9 +262,8 @@ function onLoad()
 	resetUtil();

 	d.addEventListener("visibilitychange", handleVisibilityChange, false);
-	size();
+	//size();
 	gId("cv").style.opacity=0;
-	if (localStorage.getItem('pcm') == "true" || (!/Mobi/.test(navigator.userAgent) && localStorage.getItem('pcm') == null)) togglePcMode(true);
 	var sls = d.querySelectorAll('input[type="range"]');
 	for (var sl of sls) {
 		sl.addEventListener('touchstart', toggleBubble);
@@ -607,14 +607,19 @@ function parseInfo(i) {
 	syncTglRecv = i.str;
 	maxSeg      = i.leds.maxseg;
 	pmt         = i.fs.pmt;
+	gId('buttonNodes').style.display = lastinfo.ndc > 0 ? null:"none";
 	// do we have a matrix set-up
 	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) {
+		gId("filter0D").classList.remove('hide');
 		gId("filter1D").classList.add('hide');
-		//gId("filter2D").classList.add('hide');
-		hideModes("2D");
+		gId("filter2D").classList.add('hide');
+	} else {
+		gId("filter0D").classList.add('hide');
+		gId("filter1D").classList.remove('hide');
+		gId("filter2D").classList.remove('hide');
 	}
 //	if (i.noaudio) {
 //		gId("filterVol").classList.add("hide");
@@ -731,13 +736,13 @@ function populateSegments(s)

 		ledmapFileNames.push((inst.n?inst.n:"default") + ".json"); //WLEDMM

-		let segp = `<div id="segp${i}" class="sbs">
-		<i class="icons e-icon pwr ${inst.on ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})">&#xe08f;</i>
-		<div class="sliderwrap il">
-			<input id="seg${i}bri" class="noslide" onchange="setSegBri(${i})" oninput="updateTrail(this)" max="255" min="1" type="range" value="${inst.bri}" />
-			<div class="sliderdisplay"></div>
-		</div>
-	</div>`;
+		let segp = `<div id="segp${i}" class="sbs">`+
+						`<i class="icons slider-icon pwr ${inst.on ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})">&#xe08f;</i>`+
+						`<div class="sliderwrap il">`+
+							`<input id="seg${i}bri" class="noslide" onchange="setSegBri(${i})" oninput="updateTrail(this)" max="255" min="1" type="range" value="${inst.bri}" />`+
+							`<div class="sliderdisplay"></div>`+
+						`</div>`+
+					`</div>`;
 		let staX = inst.start;
 		let stoX = inst.stop;
 		let staY = inst.startY;
@@ -927,8 +932,21 @@ function populatePalettes()
 			`<div class="lstIprev" style="${genPalPrevCss(pa[0])}"></div>`
 		);
 	}
-
 	gId('pallist').innerHTML=html;
+	// append custom palettes (when loading for the 1st time)
+	if (!isEmpty(lastinfo) && lastinfo.cpalcount) {
+		for (let j = 0; j<lastinfo.cpalcount; j++) {
+			let div = d.createElement("div");
+			gId('pallist').appendChild(div);
+			div.outerHTML = generateListItemHtml(
+				'palette',
+				255-j,
+				'~ Custom '+j+' ~',
+				'setPalette',
+				`<div class="lstIprev" style="${genPalPrevCss(255-j)}"></div>`
+			);
+		}
+	}
 }

 function redrawPalPrev()
@@ -991,18 +1009,16 @@ function genPalPrevCss(id)

 function generateListItemHtml(listName, id, name, clickAction, extraHtml = '', effectPar = '')
 {
-	return `<div class="lstI${id==0?' sticky':''}" data-id="${id}" ${effectPar===''?'':'data-opt="'+effectPar+'"'}onClick="${clickAction}(${id})">
-	<label class="radio schkl" onclick="event.preventDefault()">
-		<input type="radio" value="${id}" name="${listName}">
-		<span class="radiomark"></span>
-		<div class="lstIcontent">
-			<span class="lstIname">
-				${name}
-			</span>
-		</div>
-	</label>
-	${extraHtml}
-</div>`;
+	return `<div class="lstI${id==0?' sticky':''}" data-id="${id}" ${effectPar===''?'':'data-opt="'+effectPar+'"'}onClick="${clickAction}(${id})">`+
+		`<label class="radio schkl" onclick="event.preventDefault()">`+
+			`<input type="radio" value="${id}" name="${listName}">`+
+			`<span class="radiomark"></span>`+
+			`<div class="lstIcontent">`+
+				`<span class="lstIname">${name}</span>`+
+			`</div>`+
+		`</label>`+
+		extraHtml +
+	`</div>`;
 }

 function btype(b)
@@ -1474,7 +1490,6 @@ function updateUI()
 	gId('buttonPower').className = (isOn) ? 'active':'';
 	gId('buttonNl').className = (nlA) ? 'active':'';
 	gId('buttonSync').className = (syncSend) ? 'active':'';
-	showNodes();

 	updateSelectedFx();
 	updateSelectedPalette(selectedPal); // must be after updateSelectedFx() to un-hide color slots for * palettes
@@ -1558,7 +1573,7 @@ function updateSelectedFx()
 			if (fx.dataset.id>0) {
 				if (segLmax==0) fx.classList.add('hide'); // none of the segments selected (hide all effects)
 				else {
-					if (segLmax==1 && (!opts[3] || opts[3].indexOf("0")<0)) fx.classList.add('hide');
+					if ((segLmax==1 && (!opts[3] || opts[3].indexOf("0")<0)) || (!isM && opts[3] && ((opts[3].indexOf("2")>=0 && opts[3].indexOf("1")<0)))) fx.classList.add('hide');
 					else fx.classList.remove('hide');
 				}
 			}
@@ -1611,7 +1626,6 @@ function makeWS() {
 		var i = json.info;
 		if (i) {
 			parseInfo(i);
-			showNodes();
 			if (isInfo) populateInfo(i);
 		} else
 			i = lastinfo;
@@ -1919,21 +1933,8 @@ function requestJson(command=null)
 		// console.log("requestJson url return", json); //WLEDMM Debug
 		if (json.info) {
 			let i = json.info;
-			// append custom palettes (when loading for the 1st time)
-			if (!command && isEmpty(lastinfo) && i.cpalcount) {
-				for (let j = 0; j<i.cpalcount; j++) {
-					let div = d.createElement("div");
-					gId('pallist').appendChild(div);
-					div.outerHTML = generateListItemHtml(
-						'palette',
-						255-j,
-						'~ Custom '+j+' ~',
-						'setPalette',
-						`<div class="lstIprev" style="${genPalPrevCss(255-j)}"></div>`
-					);
-				}
-			}
 			parseInfo(i);
+			populatePalettes(i);
 			if (isInfo) populateInfo(i);
 		}
 		var s = json.state ? json.state : json;
@@ -2077,29 +2078,29 @@ function makeSeg()
 		behavior: 'smooth',
 		block: 'start',
 	});
-	var cn = `<div class="seg lstI expanded">
-	<div class="segin">
-		<input type="text" id="seg${lu}t" autocomplete="off" maxlength=32 value="" placeholder="New segment ${lu}"/>
-		<table class="segt">
-			<tr>
-				<td width="38%">${isM?'Start X':'Start LED'}</td>
-				<td width="38%">${isM?(cfg.comp.seglen?"Width":"Stop X"):(cfg.comp.seglen?"LED count":"Stop LED")}</td>
-			</tr>
-			<tr>
-				<td><input class="segn" id="seg${lu}s" type="number" min="0" max="${isM?mw-1:ledCount-1}" value="${ns}" oninput="updateLen(${lu})" onkeydown="segEnter(${lu})"></td>
-				<td><input class="segn" id="seg${lu}e" type="number" min="0" max="${ct}" value="${ct}" oninput="updateLen(${lu})" onkeydown="segEnter(${lu})"></td>
-				<td><button class="btn btn-xs" onclick="setSeg(${lu});"><i class="icons bth-icon" id="segc${lu}">&#xe390;</i></button></td>
-			</tr>
-			<tr id="mkSYH" class="${isM?"":"hide"}"><td>Start Y</td><td>${cfg.comp.seglen?'Height':'Stop Y'}</td></tr>
-			<tr id="mkSYD" class="${isM?"":"hide"}">
-				<td><input class="segn" id="seg${lu}sY" type="number" min="0" max="${mh-1}" value="0" oninput="updateLen(${lu})" onkeydown="segEnter(${lu})"></td>
-				<td><input class="segn" id="seg${lu}eY" type="number" min="0" max="${mh}" value="${isM?mh:1}" oninput="updateLen(${lu})" onkeydown="segEnter(${lu})"></td>
-			</tr>
-		</table>
-		<div class="h" id="seg${lu}len">${ledCount - ns} LEDs</div>
-		<div class="c"><button class="btn btn-p" onclick="resetUtil()">Cancel</button></div>
-	</div>
-</div>`;
+	var cn = `<div class="seg lstI expanded">`+
+		`<div class="segin">`+
+			`<input type="text" id="seg${lu}t" autocomplete="off" maxlength=32 value="" placeholder="New segment ${lu}"/>`+
+			`<table class="segt">`+
+				`<tr>`+
+					`<td width="38%">${isM?'Start X':'Start LED'}</td>`+
+					`<td width="38%">${isM?(cfg.comp.seglen?"Width":"Stop X"):(cfg.comp.seglen?"LED count":"Stop LED")}</td>`+
+				`</tr>`+
+				`<tr>`+
+					`<td><input class="segn" id="seg${lu}s" type="number" min="0" max="${isM?mw-1:ledCount-1}" value="${ns}" oninput="updateLen(${lu})" onkeydown="segEnter(${lu})"></td>`+
+					`<td><input class="segn" id="seg${lu}e" type="number" min="0" max="${ct}" value="${ct}" oninput="updateLen(${lu})" onkeydown="segEnter(${lu})"></td>`+
+					`<td><button class="btn btn-xs" onclick="setSeg(${lu});"><i class="icons bth-icon" id="segc${lu}">&#xe390;</i></button></td>`+
+				`</tr>`+
+				`<tr id="mkSYH" class="${isM?"":"hide"}"><td>Start Y</td><td>${cfg.comp.seglen?'Height':'Stop Y'}</td></tr>`+
+				`<tr id="mkSYD" class="${isM?"":"hide"}">`+
+					`<td><input class="segn" id="seg${lu}sY" type="number" min="0" max="${mh-1}" value="0" oninput="updateLen(${lu})" onkeydown="segEnter(${lu})"></td>`+
+					`<td><input class="segn" id="seg${lu}eY" type="number" min="0" max="${mh}" value="${isM?mh:1}" oninput="updateLen(${lu})" onkeydown="segEnter(${lu})"></td>`+
+				`</tr>`+
+			`</table>`+
+			`<div class="h" id="seg${lu}len">${ledCount - ns} LEDs</div>`+
+			`<div class="c"><button class="btn btn-p" onclick="resetUtil()">Cancel</button></div>`+
+		`</div>`+
+	`</div>`;
 	gId('segutil').innerHTML = cn;
 }

@@ -3113,7 +3114,7 @@ function getPalettesData(page, callback)
 		showToast(error, true);
 	});
 }
-
+/*
 function hideModes(txt)
 {
 	for (let e of (gId('fxlist').querySelectorAll('.lstI')||[])) {
@@ -3124,7 +3125,7 @@ function hideModes(txt)
 		if (f) e.classList.add('hide'); //else e.classList.remove('hide');
 	}
 }
-
+*/
 function search(f,l=null)
 {
 	f.nextElementSibling.style.display=(f.value!=='')?'block':'none';
@@ -3289,20 +3290,16 @@ function move(e)
 	x0 = null;
 }

-function showNodes() {
-	gId('buttonNodes').style.display = (lastinfo.ndc > 0 && (wW > 797 || (wW > 539 && wW < 720))) ? "block":"none";
-}
-
 function size()
 {
 	wW = window.innerWidth;
-	showNodes();
 	var h = gId('top').clientHeight;
 	sCol('--th', h + "px");
 	sCol('--bh', gId('bot').clientHeight + "px");
 	if (isLv && !isM) h -= 4; //WLEDMM: no for matrices
 	sCol('--tp', h + "px");
 	togglePcMode();
+	lastw = wW;
 }

 function togglePcMode(fromB = false)
@@ -3310,20 +3307,16 @@ function togglePcMode(fromB = false)
 	if (fromB) {
 		pcModeA = !pcModeA;
 		localStorage.setItem('pcm', pcModeA);
-		pcMode = pcModeA;
 	}
-	if (wW <= 1024 && !pcMode) return;
-	if (!fromB && ((wW <= 1024 && lastw <= 1024) || (wW > 1024 && lastw > 1024))) return;
+	pcMode = (wW >= 1024) && pcModeA;
+	if (cpick) cpick.resize(pcMode && wW>1023 && wW<1250 ? 230 : 260); // for tablet in landscape
+	if (!fromB && ((wW < 1024 && lastw < 1024) || (wW >= 1024 && lastw >= 1024))) return; // no change in size and called from size()
 	openTab(0, true);
-	if (wW <= 1024) {pcMode = false;}
-	else if (pcModeA && !fromB) pcMode = pcModeA;
 	updateTablinks(0);
 	gId('buttonPcm').className = (pcMode) ? "active":"";
 	gId('bot').style.height = (pcMode && !cfg.comp.pcmbot) ? "0":"auto";
 	sCol('--bh', gId('bot').clientHeight + "px");
 	_C.style.width = (pcMode)?'100%':'400%';
-	lastw = wW;
-
 	//WLEDMM resize segmentview
 	if (isM) drawSegmentView();
 }
@@ -3349,7 +3342,7 @@ function mergeDeep(target, ...sources)
 size();
 _C.style.setProperty('--n', N);

-window.addEventListener('resize', size, false);
+window.addEventListener('resize', size, true);

 _C.addEventListener('mousedown', lock, false);
 _C.addEventListener('touchstart', lock, false);