Updating pxmagic and inserting it in the WLED UI with option to enable and disable.

Author: ajotanc

wled00/data/index.css

@@ -134,7 +134,7 @@ button {
 
 .off {
 	color: var(--c-6) !important;
-	cursor: default !important;
+	/* cursor: default !important; */
 }
 
 .top .icons, .bot .icons {
@@ -271,6 +271,20 @@ 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);
@@ -798,6 +812,7 @@ input[type=range]::-moz-range-thumb {
 	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,
@@ -1010,7 +1025,7 @@ textarea {
 	width: 50px !important;
 }
 
-.segname, .pname {
+.segname, .pname, .bname {
 	white-space: nowrap;
 	text-align: center;
 	overflow: hidden;
@@ -1020,6 +1035,9 @@ textarea {
 	max-width: 170px;
 	position: relative;
 }
+.bname {
+	padding: 0 24px;
+}
 
 .segname .flr, .pname .flr {
 	transform: rotate(0deg);

wled00/data/index.htm

@@ -65,6 +65,7 @@
 			<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="buttonPixelMagicTool" onclick="togglePixelMagicTool()"><i class="icons">&#xe2b3;</i><p class="tab-label">Pixel Magic</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=getURL('/settings');"><i class="icons">&#xe0a2;</i><p class="tab-label">Config</p></button>
@@ -379,8 +380,8 @@
 	</div>	
 </div>
 
-<div id="mliveview2D" class="modal">
-	<div id="kliveview2D" style="width:100%; height:100%">Loading...</div><br>
+<div id="mlv2D" class="modal">
+	<div id="klv2D" style="width:100%; height:100%">Loading...</div>
 </div>
 
 <div id="rover" class="modal">
@@ -392,6 +393,12 @@
 	<button class="btn" onclick="setLor(2)">Override until reboot</button><br>
 	<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>