Support tablet PCMode, Peek -> GFX

index.css: remove #Colors (br instead), PCmode when size < 798

index.html: Change Peek to GFX, add div colorGFX, effectGFX, segGFX

index.js: 
- remove peekexp, segvexp, 
- add colorGFX, effectGFX, segGFX controls, 
- remove expandV/eandp
- improve segment view gfx
- refactor toggleLiveView
- togglePcMode: support smaller (tablet) screens

wled00/data/index.css

@@ -738,10 +738,10 @@ input[type=range]::-moz-range-thumb {
 	margin: 4px 0 0;
 }
 
-#Colors {
+/* #Colors {
 	padding-top: 18px;
 }
-
+ */
 /* Dynamically hide brightness slider label */
 .hd {
 	display: var(--bhd);
@@ -1517,7 +1517,7 @@ TD .checkmark, TD .radiomark {
 	}
 }
 
-@media all and (max-width: 1249px) {
+@media all and (max-width: 798px) {
 	#buttonPcm {
 		display: none;
 	}

wled00/data/index.htm

@@ -66,7 +66,7 @@
 			<button id="buttonPower" onclick="togglePower()" class="tgl"><i class="icons">&#xe08f;</i><p class="tab-label">Power</p></button>
 			<button id="buttonNl" onclick="toggleNl()"><i class="icons">&#xe2a2;</i><p class="tab-label">Timer</p></button>
 			<button id="buttonSync" onclick="toggleSync()"><i class="icons">&#xe116;</i><p class="tab-label">Sync</p></button>
-			<button id="buttonSr" onclick="toggleLiveview()"><i class="icons">&#xe410;</i><p class="tab-label">Peek</p></button>
+			<button id="buttonSr" onclick="toggleLiveview()"><i class="icons">&#xe410;</i><p class="tab-label">GFX ☾</p></button>
 			<button id="buttonI" onclick="toggleInfo()"><i class="icons">&#xe066;</i><p class="tab-label">Info</p></button>
 			<button id="buttonNodes" onclick="toggleNodes()"><i class="icons">&#xe22d;</i><p class="tab-label">Nodes</p></button>
 			<button onclick="window.location.href='/settings';"><i class="icons">&#xe0a2;</i><p class="tab-label">Config</p></button>
@@ -89,99 +89,102 @@
 
 <div class ="container">
 	<div id="Colors" class="tabcontent">
-		<div id="picker" class="noslide"></div>
-		<div id="hwrap" class="slider">
-			<div class="sliderwrap il">
-				<input id="sliderH" class="noslide" oninput="fromH()" onchange="setColor(0)" max="359" min="0" type="range" value="0" step="any">
-				<div class="sliderdisplay" style="background: linear-gradient(90deg, #f00 2%, #ff0 19%, #0f0 35%, #0ff 52%, #00f 68%, #f0f 85%, #f00)"></div>
-			</div>
-			<span class="tooltiptext">Hue</span>
-		</div>
-		<div id="swrap" class="slider">
-			<div class="sliderwrap il">
-				<input id="sliderS" class="noslide" oninput="fromS()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any">
-				<div class="sliderdisplay" style="background: linear-gradient(90deg, #aaa 0%, #f00)"></div>
-			</div>
-			<span class="tooltiptext">Saturation</span>
-		</div>
-		<div id="vwrap" class="slider">
-			<div class="sliderwrap il">
-				<input id="sliderV" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" />
-				<div class="sliderdisplay"></div>
-			</div>
-			<span class="tooltiptext">Value/Brightness</span>
-		</div>
-		<div id="kwrap" class="slider">
-			<div class="sliderwrap il">
-				<input id="sliderK" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" />
-				<div class="sliderdisplay"></div>
-			</div>
-			<span class="tooltiptext">Kelvin/Temperature</span>
-		</div>
-		<div id="rgbwrap">
-			<!--p class="labels hd">RGB color</p-->
-			<div id="rwrap" class="slider">
+		<div id="colorGFX"> <!--WLEDMM-->
+			<br> <!--WLEDMM: instead of padding-top:18 in css-->
+			<div id="picker" class="noslide"></div>
+			<div id="hwrap" class="slider">
 				<div class="sliderwrap il">
-					<input id="sliderR" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
+					<input id="sliderH" class="noslide" oninput="fromH()" onchange="setColor(0)" max="359" min="0" type="range" value="0" step="any">
+					<div class="sliderdisplay" style="background: linear-gradient(90deg, #f00 2%, #ff0 19%, #0f0 35%, #0ff 52%, #00f 68%, #f0f 85%, #f00)"></div>
+				</div>
+				<span class="tooltiptext">Hue</span>
+			</div>
+			<div id="swrap" class="slider">
+				<div class="sliderwrap il">
+					<input id="sliderS" class="noslide" oninput="fromS()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any">
+					<div class="sliderdisplay" style="background: linear-gradient(90deg, #aaa 0%, #f00)"></div>
+				</div>
+				<span class="tooltiptext">Saturation</span>
+			</div>
+			<div id="vwrap" class="slider">
+				<div class="sliderwrap il">
+					<input id="sliderV" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" />
 					<div class="sliderdisplay"></div>
 				</div>
-				<span class="tooltiptext">Red channel</span>
+				<span class="tooltiptext">Value/Brightness</span>
 			</div>
-			<div id="gwrap" class="slider">
+			<div id="kwrap" class="slider">
 				<div class="sliderwrap il">
-					<input id="sliderG" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
+					<input id="sliderK" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" />
 					<div class="sliderdisplay"></div>
 				</div>
-				<span class="tooltiptext">Green channel</span>
+				<span class="tooltiptext">Kelvin/Temperature</span>
 			</div>
-			<div id="bwrap" class="slider">
-				<div class="sliderwrap il">
-					<input id="sliderB" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
+			<div id="rgbwrap">
+				<!--p class="labels hd">RGB color</p-->
+				<div id="rwrap" class="slider">
+					<div class="sliderwrap il">
+						<input id="sliderR" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
+						<div class="sliderdisplay"></div>
+					</div>
+					<span class="tooltiptext">Red channel</span>
+				</div>
+				<div id="gwrap" class="slider">
+					<div class="sliderwrap il">
+						<input id="sliderG" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
+						<div class="sliderdisplay"></div>
+					</div>
+					<span class="tooltiptext">Green channel</span>
+				</div>
+				<div id="bwrap" class="slider">
+					<div class="sliderwrap il">
+						<input id="sliderB" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
+						<div class="sliderdisplay"></div>
+					</div>
+					<span class="tooltiptext">Blue channel</span>
+				</div>
+			</div>
+			<div id="wwrap" class="slider">
+				<!--p class="labels hd">White channel</p-->
+				<div id="whibri" class="sliderwrap il">
+					<input id="sliderW" class="noslide" oninput="fromW()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
 					<div class="sliderdisplay"></div>
 				</div>
-				<span class="tooltiptext">Blue channel</span>
+				<span class="tooltiptext">White channel</span>
 			</div>
-		</div>
-		<div id="wwrap" class="slider">
-			<!--p class="labels hd">White channel</p-->
-			<div id="whibri" class="sliderwrap il">
-				<input id="sliderW" class="noslide" oninput="fromW()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
-				<div class="sliderdisplay"></div>
+			<div id="wbal" class="slider">
+				<!--p class="labels hd">White balance</p-->
+				<div class="sliderwrap il">
+					<input id="sliderA" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
+					<div class="sliderdisplay"></div>
+				</div>
+				<span class="tooltiptext">White balance</span>
 			</div>
-			<span class="tooltiptext">White channel</span>
-		</div>
-		<div id="wbal" class="slider">
-			<!--p class="labels hd">White balance</p-->
-			<div class="sliderwrap il">
-				<input id="sliderA" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
-				<div class="sliderdisplay"></div>
+			<div id="qcs-w">
+				<div class="qcs" onclick="pC('#ff0000');" title="Red" style="background-color:#ff0000;"></div>
+				<div class="qcs" onclick="pC('#ffa000');" title="Orange" style="background-color:#ffa000;"></div>
+				<div class="qcs" onclick="pC('#ffc800');" title="Yellow" style="background-color:#ffc800;"></div>
+				<div class="qcs" onclick="pC('#ffe0a0');" title="Warm White" style="background-color:#ffe0a0;"></div>
+				<div class="qcs" onclick="pC('#ffffff');" title="White" style="background-color:#ffffff;"></div>
+				<div class="qcs qcsb" onclick="pC('#000000');" title="Black" style="background-color:#000000;"></div><br>
+				<div class="qcs" onclick="pC('#ff00ff');" title="Pink" style="background-color:#ff00ff;"></div>
+				<div class="qcs" onclick="pC('#0000ff');" title="Blue" style="background-color:#0000ff;"></div>
+				<div class="qcs" onclick="pC('#00ffc8');" title="Cyan" style="background-color:#00ffc8;"></div>
+				<div class="qcs" onclick="pC('#08ff00');" title="Green" style="background-color:#08ff00;"></div>
+				<div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
 			</div>
-			<span class="tooltiptext">White balance</span>
-		</div>
-		<div id="qcs-w">
-			<div class="qcs" onclick="pC('#ff0000');" title="Red" style="background-color:#ff0000;"></div>
-			<div class="qcs" onclick="pC('#ffa000');" title="Orange" style="background-color:#ffa000;"></div>
-			<div class="qcs" onclick="pC('#ffc800');" title="Yellow" style="background-color:#ffc800;"></div>
-			<div class="qcs" onclick="pC('#ffe0a0');" title="Warm White" style="background-color:#ffe0a0;"></div>
-			<div class="qcs" onclick="pC('#ffffff');" title="White" style="background-color:#ffffff;"></div>
-			<div class="qcs qcsb" onclick="pC('#000000');" title="Black" style="background-color:#000000;"></div><br>
-			<div class="qcs" onclick="pC('#ff00ff');" title="Pink" style="background-color:#ff00ff;"></div>
-			<div class="qcs" onclick="pC('#0000ff');" title="Blue" style="background-color:#0000ff;"></div>
-			<div class="qcs" onclick="pC('#00ffc8');" title="Cyan" style="background-color:#00ffc8;"></div>
-			<div class="qcs" onclick="pC('#08ff00');" title="Green" style="background-color:#08ff00;"></div>
-			<div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
-		</div>
-		<div id="csl">
-			<button id="csl0" class="btn xxs cl" onclick="selectSlot(0);" data-r="0" data-g="0" data-b="0" data-w="0">1</button>
-			<button id="csl1" class="btn xxs cl" onclick="selectSlot(1);" data-r="0" data-g="0" data-b="0" data-w="0">2</button>
-			<button id="csl2" class="btn xxs cl" onclick="selectSlot(2);" data-r="0" data-g="0" data-b="0" data-w="0">3</button>
-		</div>
-		<p class="labels h" id="cslLabel"></p>
-		<div id="hexw">
-			<i class="icons sel-icon" onclick="tglRgb()">&#xe22d;</i>
-			<input id="hexc" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" />
-			<button id="hexcnf" class="btn btn-xs" onclick="fromHex();"><i class="icons btn-icon">&#xe390;</i></button>
-		</div>
+			<div id="csl">
+				<button id="csl0" class="btn xxs cl" onclick="selectSlot(0);" data-r="0" data-g="0" data-b="0" data-w="0">1</button>
+				<button id="csl1" class="btn xxs cl" onclick="selectSlot(1);" data-r="0" data-g="0" data-b="0" data-w="0">2</button>
+				<button id="csl2" class="btn xxs cl" onclick="selectSlot(2);" data-r="0" data-g="0" data-b="0" data-w="0">3</button>
+			</div>
+			<p class="labels h" id="cslLabel"></p>
+			<div id="hexw">
+				<i class="icons sel-icon" onclick="tglRgb()">&#xe22d;</i>
+				<input id="hexc" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" />
+				<button id="hexcnf" class="btn btn-xs" onclick="fromHex();"><i class="icons btn-icon">&#xe390;</i></button>
+			</div>
+		</div> <!--colorGFX-->
 		<p class="labels" id="pall"><i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> Color palette</p>
 		<div id="palw" class="il">
 			<div class="staytop fnd">
@@ -204,6 +207,12 @@
 	</div>
 
 	<div id="Effects" class="tabcontent">
+		<div id="effectGFX"> <!--WLEDMM-->
+			<!-- <p class="labels hd">Peek ☾ <button class="btn infobtn btn-xs" onclick="eandp(this,gId('canvasPeek'));">v</button></p> -->
+			<br>
+			<canvas id="canvasPeek"></canvas><br>
+			<br>
+		</div>
 		<div id="fx">
 			<p class="labels hd" id="modeLabel">Effect mode</p>
 			<div class="staytop fnd" id="fxFind">
@@ -309,19 +318,16 @@
 	</div>
 
 	<div id="Segments" class="tabcontent">
-		<!--WLEDMM Views-->
-		<div id="segviews">
-			<p class="labels hd">Peek ☾ <button class="btn infobtn btn-xs" onclick="eandp(this,gId('canvasPeek'));">v</button></p>
-			<canvas id="canvasPeek"></canvas><br>
-			<p class="labels hd">Segment view ☾ <button class="btn infobtn btn-xs" onclick="expandV(this,gId('segvis'));">v</button></p>
-			<div id="segvis">
-				<canvas id="canvasSegments"></canvas><br>
-				<div class="labels hd" id="MD"></div> <!-- Matrix dimensions -->
-			</div>
+		<div id="segGFX"> <!--WLEDMM-->
+			<br>
+			<canvas id="canvasSegments"></canvas><br>
+			<br>
 		</div>
+		<p class="labels" id="modeLabel">Segments</p>
 		<div id="segcont">
 			Loading...
 		</div>
+		<div class="labels hd" id="MD"></div> <!-- WLEDMM Matrix dimensions -->
 		<div id="segutil" class="staybot">
 		</div>
 		<div id="segutil2">

wled00/data/index.js

@@ -1,6 +1,6 @@
 //page js
 var loc = false, locip;
-var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true;
+var isOn = false, nlA = false, isLv = true, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true;
 var hasWhite = false, hasRGB = false, hasCCT = false;
 var nlDur = 60, nlTar = 0;
 var nlMode = false;
@@ -26,7 +26,7 @@ var ws, cpick, ranges;
 var cfg = {
 	theme:{base:"dark", bg:{url:""}, alpha:{bg:0.6,tab:0.8}, color:{bg:""}},
 	comp :{colors:{picker: true, rgb: false, quick: true, hex: false},
-          labels:true, pcmbot:false, pid:true, seglen:false, segpwr:false, segexp:true, peekexp:true, segvexp: true, css:true, hdays:false} //WLEDMM segexp true as default, add peekexp and segvexp
+          labels:true, pcmbot:false, pid:true, seglen:false, segpwr:false, segexp:true, css:true, hdays:false} //WLEDMM segexp true as default
 };
 var hol = [
 	[0,11,24,4,"https://aircoookie.github.io/xmas.png"], // christmas
@@ -269,6 +269,8 @@ function onLoad()
 		sl.addEventListener('touchstart', toggleBubble);
 		sl.addEventListener('touchend', toggleBubble);
 	}
+
+	gId('buttonSr').className = "active"; //WLEDMM: on after load
 }
 
 function updateTablinks(tabI)
@@ -557,7 +559,6 @@ function populatePresets(fromls)
 	delete pJson["0"];
 	var cn = "";
 	var arr = Object.entries(pJson);
-	console.log(arr);
 	arr.sort(cmpP);
 	pQL = [];
 	var is = [];
@@ -1163,21 +1164,8 @@ function updateLen(s, draw=true) //WLEDMM conditonally draw segment view
 	gId(`seg${s}len`).innerHTML = out;
 
 	if (draw && isM) drawSegmentView(); //WLEDMM draw new segmentview if something changes in a segment
-	gId("segviews").style.display = isM? "inline":"none";
-}
-
-//WLEDMM
-function eandp(o,i)
-{
-	expandV(o,i);
-	peek(i, i.style.display =="none");
-}
-
-//WLEDMM
-function expandV(o,i)
-{
-	i.style.display = i.style.display!=="none" ? "none" : "";
-	o.style.rotate = i.style.display==="none" ? "-90deg" : "none";
+	gId("effectGFX").style.display = isM? "inline":"none";
+	gId("segGFX").style.display = isM? "inline":"none";
 }
 
 //WLEDMM
@@ -1216,9 +1204,10 @@ function drawSegmentView() {
 		peek(canvasPeek);
 	}
 
+	let segments = gId("Segments");
 	let windowWidth = Math.min(window.innerWidth*0.98, maxWidth*30);
 	let windowWidthFactor = maxWidth > maxHeight?1:maxWidth/maxHeight;
-	ctx.canvas.width = (ctx.canvas.parentElement.offsetWidth > 800?windowWidth:300) * windowWidthFactor; //Mobile and non pc mode gets 300, pc 800
+	ctx.canvas.width = (segments.offsetWidth > 800?windowWidth:300) * windowWidthFactor; //Mobile and non pc mode gets 300, pc 800
 	ctx.canvas.height = ctx.canvas.width / maxWidth * maxHeight;
 	canvasPeek.width = ctx.canvas.width;
 	canvasPeek.height = ctx.canvas.height;
@@ -1227,10 +1216,6 @@ function drawSegmentView() {
 	var ppL = ctx.canvas.width / maxWidth; //pixels per led
 	// console.log("dim", ctx.canvas.width , maxWidth, ctx.canvas.height , maxHeight, ppL);
 
-	ctx.lineWidth = 1;
-	ctx.strokeStyle="yellow";
-	ctx.strokeRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-
 	var colorArray = [[255,0,0], [0,255,0], [0,0,255], [255,0,255], [255,165,0], [255,255,0]];
 	//               ["red",     "green",   "blue",    "magenta",   "orange",    "yellow"];
 
@@ -1239,9 +1224,11 @@ function drawSegmentView() {
 
 		if (!initSegmentVars(p)) break;
 
-		ctx.lineWidth = 3;
-		ctx.strokeStyle="white";
-		ctx.strokeRect(topLeftX, topLeftY, pw*ppL, ph*ppL);
+		if (gId("segcont").children.length > 1) { //Estetic: Don't draw surrounding box if only one segment
+			ctx.lineWidth = 3;
+			ctx.strokeStyle="white";
+			ctx.strokeRect(topLeftX, topLeftY, pw*ppL, ph*ppL);
+		}
 
 		var fx = parseInt(gId("seg"+p+"fx").value);
 
@@ -1317,7 +1304,10 @@ function drawSegmentView() {
 
 	} // for each segment
 
-	gId("MD").innerHTML = "W*H=LC: " + maxWidth + " x " + maxHeight + " = " + maxWidth * maxHeight;
+	if (gId("segcont").children.length > 0) { //Only show this if more then one segment
+		gId("MD").innerHTML = "total W*H=LC: " + maxWidth + " x " + maxHeight + " = " + maxWidth * maxHeight;
+	}
+	gId("MD").style.display = gId("segcont").children.length > 0?"inline":"none"
 
 	function post() {
 		for (let p=0; p<gId("segcont").children.length; p++) {
@@ -1333,7 +1323,7 @@ function drawSegmentView() {
 			ctx.font = '20px Arial'; 
 			ctx.fillStyle = "white";
 			var name = eJson.find((o)=>{return o.id==fx}).name;
-			ctx.fillText(name, topLeftX + ppL, topLeftY + ph*ppL - 10);
+			ctx.fillText(name, topLeftX+10, topLeftY + ph*ppL - 10);
 		}	
 	}
 
@@ -1944,34 +1934,47 @@ function toggleSync()
 
 function toggleLiveview()
 {
-	//WLEDMM adding liveview2D support
-	if (isInfo && isM) toggleInfo();
-	if (isNodes && isM) toggleNodes();
-	isLv = !isLv;
+	if (isM) {
+		isLv = !isLv;
+		gId("colorGFX").style.display = isLv? "inline":"none";
+		gId("effectGFX").style.display = isLv? "inline":"none";
+		gId("segGFX").style.display = isLv? "inline":"none";
 
-	var lvID = "liveview";
-	if (isM) {   
-		lvID = "liveview2D"
-		if (isLv) {
-		var cn = '<iframe id="liveview2D" src="about:blank"></iframe>';
-		d.getElementById('kliveview2D').innerHTML = cn;
-		}
+		canvasPeek = gId("canvasPeek");
+		peek(canvasPeek, !isLv); //set off if !isLv
 
-		gId('mliveview2D').style.transform = (isLv) ? "translateY(0px)":"translateY(100%)";
+		gId('buttonSr').className = (isLv) ? "active":"";
+
+	} else {
+		//WLEDMM adding liveview2D support
+		if (isInfo && isM) toggleInfo();
+		if (isNodes && isM) toggleNodes();
+		isLv = !isLv;
+
+		var lvID = "liveview";
+		// if (isM) {   
+		// 	lvID = "liveview2D"
+		// 	if (isLv) {
+		// 	var cn = '<iframe id="liveview2D" src="about:blank"></iframe>';
+		// 	d.getElementById('kliveview2D').innerHTML = cn;
+		// 	}
+
+		// 	gId('mliveview2D').style.transform = (isLv) ? "translateY(0px)":"translateY(100%)";
+		// }
+
+		gId(lvID).style.display = (isLv) ? "block":"none";
+		var url = (loc?`http://${locip}`:'') + "/" + lvID;
+		gId(lvID).src = (isLv) ? url:"about:blank";
+		gId('buttonSr').className = (isLv) ? "active":"";
+		if (!isLv && ws && ws.readyState === WebSocket.OPEN) ws.send('{"lv":false}');
+		size();
 	}
-
-	gId(lvID).style.display = (isLv) ? "block":"none";
-	var url = (loc?`http://${locip}`:'') + "/" + lvID;
-	gId(lvID).src = (isLv) ? url:"about:blank";
-	gId('buttonSr').className = (isLv) ? "active":"";
-	if (!isLv && ws && ws.readyState === WebSocket.OPEN) ws.send('{"lv":false}');
-	size();
 }
 
 function toggleInfo()
 {
 	if (isNodes) toggleNodes();
-	if (isLv && isM) toggleLiveview();
+	// if (isLv && isM) toggleLiveview(); //WLEDMM: not for GFX
 	isInfo = !isInfo;
 	if (isInfo) requestJson();
 	gId('info').style.transform = (isInfo) ? "translateY(0px)":"translateY(100%)";
@@ -1981,7 +1984,7 @@ function toggleInfo()
 function toggleNodes()
 {
 	if (isInfo) toggleInfo();
-	if (isLv && isM) toggleLiveview();
+	// if (isLv && isM) toggleLiveview(); //WLEDMM: not for GFX
 	isNodes = !isNodes;
 	if (isNodes) loadNodes();
 	gId('nodes').style.transform = (isNodes) ? "translateY(0px)":"translateY(100%)";
@@ -3242,10 +3245,10 @@ function togglePcMode(fromB = false)
 		localStorage.setItem('pcm', pcModeA);
 		pcMode = pcModeA;
 	}
-	if (wW < 1250 && !pcMode) return;
-	if (!fromB && ((wW < 1250 && lastw < 1250) || (wW >= 1250 && lastw >= 1250))) return;
+	if (wW < 798 && !pcMode) return;
+	if (!fromB && ((wW <= 798 && lastw <= 798) || (wW > 798 && lastw > 798))) return;
 	openTab(0, true);
-	if (wW < 1250) {pcMode = false;}
+	if (wW <= 798) {pcMode = false;}
 	else if (pcModeA && !fromB) pcMode = pcModeA;
 	updateTablinks(0);
 	gId('buttonPcm').className = (pcMode) ? "active":"";

wled00/data/settings_ui.htm

@@ -25,8 +25,6 @@
 			"seglen": "Set segment length instead of stop LED",
 			"segpwr": "Hide segment power & brightness",
 			"segexp" : "Always expand first segment",
-			"peekexp" : "Expand peek ☾",
-			"segvexp" : "Expand segment visualization ☾",
 			"css": "Enable custom CSS",
 			"hdays": "Enable custom Holidays list"
 		},
@@ -267,8 +265,6 @@
 		<span class="l"></span>: <input type="checkbox" id="comp_seglen" class="agi cb"><br>
 		<span class="l"></span>: <input type="checkbox" id="comp_segpwr" class="agi cb"><br>
 		<span class="l"></span>: <input type="checkbox" id="comp_segexp" class="agi cb"><br>
-		<span class="l"></span>: <input type="checkbox" id="comp_peekexp" class="agi cb"><br>
-		<span class="l"></span>: <input type="checkbox" id="comp_segvexp" class="agi cb"><br>
 		I hate dark mode: <input type="checkbox" id="dm" onchange="UI()"><br>
 		<span id="idonthateyou" style="display:none"><i>Why would you? </i>&#x1F97A;<br></span>
 		<span class="l"></span>: <input type="number" min=0.0 max=1.0 step=0.01 id="theme_alpha_tab" class="agi"><br>