Revert changes.

wled00/data/index.css

@@ -271,20 +271,6 @@ button {
 	transform: translate(-50%,-50%);
 }
 
-#pxm {
-    display: none;
-    width: 100%;
-    height: 100%;
-    border: 0;
-    position: absolute;
-}
-
-#ipxm {
-    width: 100%;
-    height: 100%;
-    position: relative;
-}
-
 .tab {
 	background-color: transparent;
 	color: var(--c-d);
@@ -479,7 +465,7 @@ button {
 }
 
 /* Tooltip text */
-.slider .tooltiptext, .option .tooltiptext, .btn .tooltiptext {
+.slider .tooltiptext, .option .tooltiptext {
 	visibility: hidden;
 	background-color: var(--c-5);
 	/*border: 2px solid var(--c-2);*/
@@ -495,7 +481,7 @@ button {
 	z-index: 1;
 	bottom: 80%;
 	left: 50%;
-    transform: translate(-50%, -50%);
+	margin-left: -92px;
 
 	/* Ensure tooltip goes away when mouse leaves control */
 	pointer-events: none;
@@ -504,28 +490,22 @@ button {
 	opacity: 0;
 	transition: opacity 0.75s;
 }
-
 .option .tooltiptext {
 	bottom: 120%;
 }
-
-/* Tooltip for buttons */
-.btn .tooltiptext {
-	bottom: 90%;
-}
-
 /* Tooltip arrow */
-.slider .tooltiptext::after, .option .tooltiptext::after, .btn .tooltiptext::after {
+.slider .tooltiptext::after, .option .tooltiptext::after {
 	content: "";
 	position: absolute;
-	top: calc(100% - 2px);
+	top: 100%;
-	left: calc(50% - 8px);
+	left: 50%;
-	border: 8px;
+	margin-left: -5px;
+	border-width: 5px;
 	border-style: solid;
 	border-color: var(--c-5) transparent transparent transparent;
 }
 /* Show the tooltip text when you mouse over the tooltip container */
-.slider:hover .tooltiptext, .option .check:hover .tooltiptext, .btn:hover .tooltiptext {
+.slider:hover .tooltiptext, .option .check:hover .tooltiptext {
 	visibility: visible;
 	opacity: 1;
 }
@@ -814,11 +794,10 @@ input[type=range]::-moz-range-thumb {
 	-webkit-transform:translate3d(0,0,0);
 	backface-visibility: hidden;
 	transform:translate3d(0,0,0);
-	/* overflow: hidden; */
+	overflow: hidden;
 	text-overflow: ellipsis;
 	border: 1px solid var(--c-3);
 	background-color: var(--c-3);
-    z-index: 9;
 }
 #segutil .btn-s:hover,
 #segutil2 .btn-s:hover,
@@ -1055,6 +1034,7 @@ textarea {
 	/*padding: 1px 0 1px 20px;*/
 	display: var(--sgp);
 	width: 100%;
+	position: relative;
 }
 
 .pname {

wled00/data/index.htm

@@ -180,13 +180,6 @@
 			<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 style="padding-block: 10px;">
-            <button class="btn btn-xs" type="button" onclick="togglePixelMagicTool()">
-                <i class="icons btn-icon">&#xe410;</i>
-            </button>
-            <button class="btn btn-xs" type="button" onclick="window.location.href=getURL('/cpal.htm')"><i class="icons btn-icon">&#xe18a;</i></button>
-            <button class="btn btn-xs" type="button" onclick="palettesData=null;localStorage.removeItem('wledPalx');requestJson({rmcpal:true});setTimeout(loadPalettes,250,loadPalettesData);"><i class="icons btn-icon">&#xe037;</i></button>
-        </div>
 		<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">
@@ -206,6 +199,11 @@
 				</div>
 			</div>
 		</div>
+		<div style="padding-block: 10px;">
+			<button class="btn btn-xs" type="button" onclick="togglePixelMagicTool()"><i class="icons btn-icon">&#xe410;</i></button>
+			<button class="btn btn-xs" type="button" onclick="window.location.href=getURL('/cpal.htm')"><i class="icons btn-icon">&#xe18a;</i></button>
+			<button class="btn btn-xs" type="button" onclick="palettesData=null;localStorage.removeItem('wledPalx');requestJson({rmcpal:true});setTimeout(loadPalettes,250,loadPalettesData);"><i class="icons btn-icon">&#xe037;</i></button>
+		</div>
 	</div>
 
 	<div id="Effects" class="tabcontent">
@@ -396,11 +394,6 @@
 	<span class="h">For best performance, it is recommended to turn off the streaming source when not in use.</span>
 </div>
 
-<div id="mpxm" class="modal">
-    <button class="btn btn-xs close" onclick="togglePixelMagicTool()"><i class="icons rot45">&#xe18a;</i></button>
-	<div id="ipxm">Loading...</div>
-</div>
-
 <i id="roverstar" class="icons huge" onclick="setLor(0)">&#xe410;</i><br>
 <script src="index.js"></script>
 </body>

wled00/data/index.js

@@ -1,6 +1,6 @@
 //page js
 var loc = false, locip, locproto = "http:";
-var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true, isPXM = false;
+var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true;
 var hasWhite = false, hasRGB = false, hasCCT = false;
 var nlDur = 60, nlTar = 0;
 var nlMode = false;
@@ -276,6 +276,7 @@ function onLoad()
 		});
 	});
 	resetUtil();
+
 	d.addEventListener("visibilitychange", handleVisibilityChange, false);
 	//size();
 	gId("cv").style.opacity=0;
@@ -456,6 +457,7 @@ function loadPresets(callback = null)
 	})
 	.then(res => {
 		if (res.status=="404") return {"0":{}};
+		//if (!res.ok) showErrorToast();
 		return res.json();
 	})
 	.then(json => {
@@ -1694,7 +1696,6 @@ function toggleLiveview()
 {
 	if (isInfo && isM) toggleInfo();
 	if (isNodes && isM) toggleNodes();
-	if (isPXM && isM) togglePixelMagicTool();
 	isLv = !isLv;
 	let wsOn = ws && ws.readyState === WebSocket.OPEN;
 
@@ -1715,7 +1716,6 @@ function toggleLiveview()
 function toggleInfo()
 {
 	if (isNodes) toggleNodes();
-	if (isPXM) togglePixelMagicTool();
 	if (isLv && isM) toggleLiveview();
 	isInfo = !isInfo;
 	if (isInfo) requestJson();
@@ -1726,7 +1726,6 @@ function toggleInfo()
 function toggleNodes()
 {
 	if (isInfo) toggleInfo();
-	if (isPXM) togglePixelMagicTool();
 	if (isLv && isM) toggleLiveview();
 	isNodes = !isNodes;
 	if (isNodes) loadNodes();
@@ -1734,31 +1733,6 @@ function toggleNodes()
 	gId('buttonNodes').className = (isNodes) ? "active":"";
 }
 
-function togglePixelMagicTool()
-{
-    if (isInfo) toggleInfo();
-    if (isNodes) toggleNodes();
-	if (isLv && isM) toggleLiveview();
-
-    isPXM = !isPXM;
-
-    var id = "pxm";
-
-    if (isPXM) gId('ipxm').innerHTML = `<iframe id="${id}" src="about:blank"></iframe>`;
-    gId('mpxm').style.transform = (isPXM) ? "translateY(0px)":"translateY(100%)";
-
-    var iframe = gId(id);
-    iframe.style.display = (isPXM) ? "block":"none";
-    iframe.src = (isPXM) ? getURL("/pxmagic.htm"):"about:blank";
-
-    iframe.onload = function () {
-        if(isPXM){
-            var iframeContent = this.contentDocument;
-            iframeContent.body.style.backgroundColor = "transparent";
-        }
-    }
-}
-
 function makeSeg()
 {
 	var ns = 0, ct = 0;
@@ -2906,16 +2880,6 @@ function size()
 	lastw = wW;
 }
 
-function listenMessage(e){
-    const { origin, data } = e;
-    if (origin === window.location.origin) {
-        if(data === 'loadPresets'){
-	        populatePresets();
-            setTimeout(()=>{pmtLast=0; loadPresets();}, 750); // force reloading of presets
-        }
-    }
-}
-
 function togglePcMode(fromB = false)
 {
 	if (fromB) {
@@ -2952,11 +2916,9 @@ function mergeDeep(target, ...sources)
 }
 
 size();
-
 _C.style.setProperty('--n', N);
 
 window.addEventListener('resize', size, true);
-window.addEventListener('message', listenMessage, true);
 
 _C.addEventListener('mousedown', lock, false);
 _C.addEventListener('touchstart', lock, false);