Move node discovery in separate page.

wled00/data/index.css

@@ -221,6 +221,10 @@ button {
 	width:25%;
 }
 
+#btnNodes {
+	display: none;	
+}
+
 .tab button:hover {
 	background-color: var(--c-tbh);
 	color: var(--c-e);
@@ -365,7 +369,7 @@ button {
 	z-index: 3;
 }
 
-#rover {
+#rover, #nodes {
 	z-index: 2;
 }
 
@@ -393,7 +397,7 @@ button {
 	display: inline-block;
 }
 
-#kv {
+#kv, #kn {
 	max-width: 490px;
 	display: inline-block;
 }
@@ -1033,7 +1037,7 @@ input[type="text"].fnd:not(:placeholder-shown) {
 }
 
 @media all and (max-width: 1249px) {
-	#buttonPcm {
+	#buttonPcm, #buttonNo {
 	display: none;
 	}
 }

wled00/data/index.htm

@@ -26,6 +26,7 @@
 			<button id="buttonI" onclick="toggleInfo()"><i class="icons">&#xe34b;</i><p class="tab-label">Info</p></button>
 			<button onclick="window.location.href = '/settings';"><i class="icons">&#xe0a2;</i><p class="tab-label">Config</p></button>
 			<button id="buttonPcm" onclick="togglePcMode(true)"><i class="icons">&#xe23d;</i><p class="tab-label">PC Mode</p></button>
+			<button id="buttonNo" onclick="toggleNodes()"><i class="icons">&#xe22d;</i><p class="tab-label">Nodes</p></button>
 		</div>
 		<div id="briwrap">
 			<p class="hd">Brightness</p>
@@ -202,6 +203,7 @@
 	<button class="tablinks" onclick="openTab(1)"><i class="icons">&#xe23d;</i><p class="tab-label">Effects</p></button>
 	<button class="tablinks" onclick="openTab(2)"><i class="icons">&#xe34b;</i><p class="tab-label">Segments</p></button>
 	<button class="tablinks" onclick="openTab(3)"><i class="icons">&#xe04c;</i><p class="tab-label">Favorites</p></button>
+	<button id="btnNodes" class="tablinks" onclick="toggleNodes()"><i class="icons">&#xe22d;</i><p class="tab-label">Nodes</p></button>
 </div>
 
 <div id="connind"></div>
@@ -218,7 +220,11 @@
 	<button class="btn infobtn" id="resetbtn" onclick="cnfReset()">Reboot WLED</button><br>
 	<span class="h">Made with <span id="heart">&#10084;&#xFE0E;</span> by Aircoookie and the WLED community</span>
 </div>
-
+<div id="nodes" class="modal">
+	<div id="kn">Loading...</div><br>
+	<button class="btn infobtn" onclick="requestJson(null)">Refresh</button>
+	<button class="btn infobtn" onclick="toggleNodes()">Close</button><br>
+</div>
 <div id="rover" class="modal">
 	<i class="icons huge">&#xe410;</i><br>
 	<div id="lv">?</div><br><br>

wled00/data/index.js

@@ -2,7 +2,7 @@
 const lsPalKey = "wledPalx";
 var loc = false, locip;
 var noNewSegs = false;
-var isOn = false, nlA = false, isLv = false, isInfo = false, syncSend = false, syncTglRecv = true, isRgbw = false;
+var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true, isRgbw = false;
 var whites = [0,0,0];
 var selColors;
 var expanded = [false];
@@ -533,6 +533,35 @@ function populatePresets(fromls)
 	populateQL();
 }
 
+function populateNodes(i)
+{
+	var cn="";
+	var urows="";
+	if (i.nodes) {
+		i.nodes.sort((a,b) => (a.name).localeCompare(b.name));
+		for (var x=0;x<i.nodes.length;x++) {
+			var o = i.nodes[x];
+			if (o.name) {
+				var url = `<button class="btn btna-icon tab" onclick="location.assign('http://${o.ip}');">${o.name}</button>`;
+				urows += inforow(url,o.type);
+			}
+		}
+		if (i.nodes.length>0) {
+			var botButtons = d.querySelectorAll('.bot button');
+			for (btn of botButtons) {
+				btn.style.width = '20%';
+			}
+			d.getElementById('btnNodes').style.display = "inline";
+		} else
+			d.getElementById('btnNodes').style.display = "none";
+	}
+	cn += `<table class="infot">
+${urows}
+${inforow("Current node:",i.name)}
+</table>`;
+	d.getElementById('kn').innerHTML = cn;
+}
+
 function populateInfo(i)
 {
 	var cn="";
@@ -543,17 +572,6 @@ function populateInfo(i)
 	if (pwr > 1000) {pwr /= 1000; pwr = pwr.toFixed((pwr > 10) ? 0 : 1); pwru = pwr + " A";}
 	else if (pwr > 0) {pwr = 50 * Math.round(pwr/50); pwru = pwr + " mA";}
   	var urows="";
-	if (i.nodes) {
-		i.nodes.sort((a,b) => (a.name).localeCompare(b.name));
-		for (var x=0;x<i.nodes.length;x++)
-		{
-			var o = i.nodes[x];
-			if (o.name) {
-				var url = `<button class="btn btna-icon tab" onclick="location.assign('http://${o.ip}');">${o.name}</button>`;
-				urows += inforow(url,o.type);
-			}
-		}
-	}
 	if (i.u) {
 		for (const [k, val] of Object.entries(i.u))
 		{
@@ -884,15 +902,9 @@ function updateUI(scrollto=false)
 	d.getElementById('buttonNl').className = (nlA) ? "active":"";
 	d.getElementById('buttonSync').className = (syncSend) ? "active":"";
 
-	updateSelectedPalette();
+	updateSelectedPalette(scrollto);
 	updateSelectedFx(scrollto);
 
-//	d.getElementById('fxb' + selectedFx).style.backgroundColor = "var(--c-6)";
-	//if (d.getElementById('fxb' + selectedFx))
-	//{
-	//	d.getElementById('fxb' + selectedFx).style.backgroundColor = "var(--c-6)";
-	//	if (scrollto) d.getElementById('Effects').scrollTop = d.getElementById('fxb' + selectedFx).offsetTop - d.getElementById('Effects').clientHeight/1.8;
-	//}
 	updateTrail(d.getElementById('sliderBri'));
 	updateTrail(d.getElementById('sliderSpeed'));
 	updateTrail(d.getElementById('sliderIntensity'));
@@ -904,7 +916,7 @@ function updateUI(scrollto=false)
 	updateRgb();
 }
 
-function updateSelectedPalette()
+function updateSelectedPalette(scrollto=false)
 {
 	var parent = d.getElementById('selectPalette');
 	var selectedPalette = parent.querySelector(`input[name="palette"][value="${selectedPal}"]`);
@@ -919,6 +931,14 @@ function updateSelectedPalette()
 	if (selectedPalette) {
 		parent.querySelector(`.lstI[data-id="${selectedPal}"]`).classList.add('selected');
 	}
+/*
+	if (scrollto && selectedPalette) {
+		selectedPalette.scrollIntoView({
+			behavior: 'smooth',
+			block: 'center',
+		});
+	}
+*/
 }
 
 function updateSelectedFx(scrollto=false)
@@ -1010,7 +1030,6 @@ function requestJson(command, rinfo = true, verbose = true, callback = null) {
 			return;
 		}
 		var s = json;
-		
 		if (!command || rinfo) {
 			if (!rinfo) {
 				pmt = json.info.fs.pmt;
@@ -1041,9 +1060,8 @@ function requestJson(command, rinfo = true, verbose = true, callback = null) {
 			}
 			pmtLast = pmt;
 			lastinfo = info;
-			if (isInfo) {
+			if (isInfo) populateInfo(info);
-				populateInfo(info);
+			populateNodes(info);
-			}
 			s = json.state;
 			displayRover(info, s);
 		}
@@ -1174,6 +1192,13 @@ function toggleInfo() {
 	d.getElementById('buttonI').className = (isInfo) ? "active":"";
 }
 
+function toggleNodes() {
+	isNodes = !isNodes;
+	if (isNodes) populateNodes(lastinfo);
+	d.getElementById('nodes').style.transform = (isNodes) ? "translateY(0px)":"translateY(100%)";
+	d.getElementById('buttonNo').className = (isNodes) ? "active":"";
+}
+
 function makeSeg() {
 	var ns = 0;
 	if (lowestUnused > 0) {
@@ -1792,6 +1817,7 @@ function togglePcMode(fromB = false)
 	d.getElementById('buttonPcm').className = (pcMode) ? "active":"";
 	d.getElementById('bot').style.height = (pcMode && !cfg.comp.pcmbot) ? "0":"auto";
 	sCol('--bh', d.getElementById('bot').clientHeight + "px");
+	d.getElementById('buttonNo').style.display = (pcMode) ? "":"none";
 	_C.style.width = (pcMode)?'100%':'400%';
 	lastw = w;
 }