Autodiscovery improvements

wled00/NodeStruct.cpp

@@ -1,16 +0,0 @@
-#include "NodeStruct.h"
-
-String getNodeTypeDisplayString(uint8_t nodeType) {
-  switch (nodeType)
-  {
-    case NODE_TYPE_ID_ESP8266:     return F("ESP8266");
-    case NODE_TYPE_ID_ESP32:       return F("ESP32");
-  }
-  return "Undefined";
-}
-
-NodeStruct::NodeStruct() :
-  age(0), nodeType(0), build(0)
-{
-  for (uint8_t i = 0; i < 4; ++i) { ip[i] = 0; }
-}

wled00/NodeStruct.h

@@ -1,5 +1,5 @@
-#ifndef DATASTRUCTS_NODESTRUCT_H
+#ifndef WLED_NODESTRUCT_H
-#define DATASTRUCTS_NODESTRUCT_H
+#define WLED_NODESTRUCT_H
 
 /*********************************************************************************************\
 * NodeStruct from the ESP Easy project (https://github.com/letscontrolit/ESPEasy)
@@ -8,27 +8,27 @@
 #include <map>
 #include <IPAddress.h>
 
-
 #define NODE_TYPE_ID_UNDEFINED          0
-#define NODE_TYPE_ID_ESP8266            1
+#define NODE_TYPE_ID_ESP8266         8266
-#define NODE_TYPE_ID_ESP32              2
+#define NODE_TYPE_ID_ESP32             32
-
-String getNodeTypeDisplayString(uint8_t nodeType);
 
 /*********************************************************************************************\
 * NodeStruct
 \*********************************************************************************************/
 struct NodeStruct
 {
-  NodeStruct();
-
   String    nodeName;
   IPAddress ip;
   uint8_t   unit;
   uint8_t   age;
   uint8_t   nodeType;
   uint32_t  build;
+
+  NodeStruct() : age(0), nodeType(0), build(0)
+  {
+    for (uint8_t i = 0; i < 4; ++i) { ip[i] = 0; }
+  }
 };
 typedef std::map<uint8_t, NodeStruct> NodesMap;
 
-#endif // DATASTRUCTS_NODESTRUCT_H
+#endif // WLED_NODESTRUCT_H

wled00/const.h

@@ -187,4 +187,11 @@
   #define JSON_BUFFER_SIZE 16384
 #endif
 
+// Maximum size of node map (list of other WLED instances)
+#ifdef ESP8266
+  #define WLED_MAX_NODES 15
+#else
+  #define WLED_MAX_NODES 150
+#endif
+
 #endif

wled00/data/index.css

@@ -90,9 +90,10 @@ button {
 
 #namelabel {
 	position: fixed;
-	bottom: calc(var(--bh) + 5px);
+	bottom: calc(var(--bh) + 6px);
 	right: 4px;
 	color: var(--c-6);
+  cursor: pointer;
 	writing-mode: vertical-rl;
 }
 
@@ -148,10 +149,6 @@ button {
 	padding-bottom: 8px;
 }
 
-.valtd i {
-	font-size: small;
-}
-
 .slider-icon
 {
 	transform: translate(6px,3px);
@@ -207,10 +204,6 @@ button {
 	background-color: var(--c-tb);
 }
 
-#btnNodes {
-	display: none;	
-}
-
 .tab button {
 	background-color: transparent;
 	float: left;
@@ -378,6 +371,14 @@ button {
 	z-index: 2;
 }
 
+#ndlt {
+  margin: 12px 0;
+}
+
+.valtd i {
+	font-size: 14px;
+}
+
 #roverstar {
 	position: fixed;
 	top: calc(var(--th) + 5px);
@@ -938,8 +939,14 @@ input[type=number]::-webkit-outer-spin-button {
 	}
 }
 
-@media all and (max-width: 1249px) {
+@media all and (max-width: 770px) {
-	#buttonPcm, #buttonNo {
+	#buttonNodes {
+	display: none;
+	}
+}
+
+@media all and (max-width: 1249px) {
+	#buttonPcm {
 	display: none;
 	}
 }

wled00/data/index.htm

@@ -24,9 +24,9 @@
 			<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="buttonI" onclick="toggleInfo()"><i class="icons">&#xe34b;</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></div>
 			<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>
@@ -67,17 +67,17 @@
 			</div>
 		</div>
 		<div id="qcs-w">
-			<div class="qcs" onclick="pC('#ff0000');" style="background-color:#ff0000;"></div>
+			<div class="qcs" onclick="pC('#ff0000');" title="Red" style="background-color:#ff0000;"></div>
-			<div class="qcs" onclick="pC('#ffa000');" style="background-color:#ffa000;"></div>
+			<div class="qcs" onclick="pC('#ffa000');" title="Orange" style="background-color:#ffa000;"></div>
-			<div class="qcs" onclick="pC('#ffc800');" style="background-color:#ffc800;"></div>
+			<div class="qcs" onclick="pC('#ffc800');" title="Yellow" style="background-color:#ffc800;"></div>
-			<div class="qcs" onclick="pC('#ffe0a0');" style="background-color:#ffe0a0;"></div>
+			<div class="qcs" onclick="pC('#ffe0a0');" title="Warm White" style="background-color:#ffe0a0;"></div>
-			<div class="qcs" onclick="pC('#ffffff');" style="background-color:#ffffff;"></div>
+			<div class="qcs" onclick="pC('#ffffff');" title="White" style="background-color:#ffffff;"></div>
-			<div class="qcs qcsb" onclick="pC('#000000');" style="background-color:#000000;"></div><br>
+			<div class="qcs qcsb" onclick="pC('#000000');" title="Black" style="background-color:#000000;"></div><br>
-			<div class="qcs" onclick="pC('#ff00ff');" style="background-color:#ff00ff;"></div>
+			<div class="qcs" onclick="pC('#ff00ff');" title="Pink" style="background-color:#ff00ff;"></div>
-			<div class="qcs" onclick="pC('#0000ff');" style="background-color:#0000ff;"></div>
+			<div class="qcs" onclick="pC('#0000ff');" title="Blue" style="background-color:#0000ff;"></div>
-			<div class="qcs" onclick="pC('#00ffc8');" style="background-color:#00ffc8;"></div>
+			<div class="qcs" onclick="pC('#00ffc8');" title="Cyan" style="background-color:#00ffc8;"></div>
-			<div class="qcs" onclick="pC('#08ff00');" style="background-color:#08ff00;"></div>
+			<div class="qcs" onclick="pC('#08ff00');" title="Green" style="background-color:#08ff00;"></div>
-			<div class="qcs" onclick="pC('rnd');" style="background-color:var(--c-3); padding: 4px 8px; transform: translateY(-10px);">R</div>
+			<div class="qcs" onclick="pC('rnd');" title="Random" style="background-color:var(--c-3); padding: 4px 8px; transform: translateY(-10px);">R</div>
 		</div>
 		<div id="csl">
 			<button class="xxs cl btn" onclick="selectSlot(0);">1</button>
@@ -166,12 +166,11 @@
 	<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>
 <div id="toast"></div>
-<div id="namelabel"></div>
+<div id="namelabel" onclick="toggleNodes()"></div>
 <div id="info" class="modal">
 	<div id="imgw">
 		<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAggAAACMCAYAAAAZQlGEAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKLSURBVHhe7dgxjtwwEADBpf//5zUDwklnpzFAnKoSTigNFTT0AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGDcOieX+G5nvNLaznil6f1Nv+/tz3c7+3tmen/Tpu/jbe877c85AQD+EQgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAACEQAAAQiAAACEQAIAQCABACAQAINY5+aHvdsYRazvjK9jfM7fvz/0+Y3+/2+336w8CABACAQAIgQAAhEAAAEIgAAAhEACAEAgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAADEOudrfLczXmltZ3yF6fuwv2em9+d+n5ne3zT3cZfp+/AHAQAIgQAAhEAAAEIgAAAhEACAEAgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAACEQAAAYp3zNb7bGUes7Yz8wO334fmeuf35bmd/z9y+v9ufzx8EACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAACEQAAAQiAAACEQAIAQCABACAQAIAQCABACAQCIdc4x3+2MV1rbGfmFpr+/6e/l9ue73fT+pt1+H2/bn+/lGX8QAIAQCABACAQAIAQCABACAQAIgQAAhEAAAEIgAAAhEACAEAgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgP/u8/kLYCqAxINTyZkAAAAASUVORK5CYII=">
@@ -179,15 +178,18 @@
 <div id="kv">Loading...</div><br>
 <button class="btn infobtn" onclick="requestJson(null)">Refresh</button>
 <button class="btn infobtn" onclick="toggleInfo()">Close Info</button><br>
-<button class="btn infobtn" onclick="openGH()">WLED Wiki</button>
+<button class="btn infobtn" onclick="toggleNodes()">Instance List</button>
 <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="ndlt">Other WLED instances on network</div>
   <div id="kn">Loading...</div><br>
-	<button class="btn infobtn" onclick="requestJson(null)">Refresh</button>
+  <button class="btn infobtn" onclick="loadNodes()">Refresh</button>
-	<button class="btn infobtn" onclick="toggleNodes()">Close</button><br>
+  <button class="btn infobtn" onclick="toggleNodes()">Close list</button><br>
 </div>
+
 <div id="rover" class="modal">
 	<i class="icons huge">&#xe410;</i><br>
 	<div id="lv">?</div><br><br>
@@ -197,6 +199,7 @@
 	<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>
+
 <i id="roverstar" class="icons huge" onclick="setLor(0)">&#xe410;</i><br>
 <script src="iro.js"></script>
 <script src="rangetouch.js"></script>

wled00/data/index.js

@@ -443,35 +443,6 @@ 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}<br><i>${o.build==0?"N/A":o.build}</i>`);
-			}
-		}
-		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="";
@@ -492,16 +463,7 @@ function populateInfo(i)
       }
     }
   }
-	if (i.nodes) {
+
-		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);
-			}
-		}
-	}
 	var vcn = "Kuuhaku";
 	if (i.ver.startsWith("0.11.")) vcn = "Mirai";
 	if (i.cn) vcn = i.cn;
@@ -604,6 +566,69 @@ function populateSegments(s)
 	d.getElementById('rsbtn').style.display = (segCount > 1) ? "inline":"none";
 }
 
+function btype(b){
+  switch (b) {
+    case 1: return "ESP8266";
+    case 32: return "ESP32";
+    case 8266: return "ESP8266";
+  }
+  return "?";
+}
+function bname(o){
+  if (o.name=="WLED") return o.ip;
+  return o.name;
+}
+
+function populateNodes(i,n)
+{
+	var cn="";
+	var urows="";
+  var nnodes = 0;
+	if (n.nodes) {
+		n.nodes.sort((a,b) => (a.name).localeCompare(b.name));
+		for (var x=0;x<n.nodes.length;x++) {
+			var o = n.nodes[x];
+			if (o.name) {
+				var url = `<button class="btn btna-icon tab" onclick="location.assign('http://${o.ip}');">${bname(o)}</button>`;
+				urows += inforow(url,`${btype(o.type)}<br><i>${o.vid==0?"N/A":o.vid}</i>`);
+        nnodes++;
+			}
+		}
+	}
+  if (nnodes == 0) cn += `No other instances found.`;
+	cn += `<table class="infot">
+    ${urows}
+    ${inforow("Current node:",i.name)}
+  </table>`;
+	d.getElementById('kn').innerHTML = cn;
+}
+
+function loadNodes()
+{
+	var url = '/json/nodes';
+	if (loc) {
+		url = `http://${locip}/json/nodes`;
+	}
+	
+	fetch
+	(url, {
+		method: 'get'
+	})
+	.then(res => {
+		if (!res.ok) {
+			showToast('Could not load Node list!', true);
+		}
+		return res.json();
+	})
+	.then(json => {
+		populateNodes(lastinfo, json);
+	})
+	.catch(function (error) {
+		showToast(error, true);
+		console.log(error);
+	});
+}
+
 function updateTrail(e, slidercol)
 {
 	if (e==null) return;
@@ -804,7 +829,6 @@ function requestJson(command, rinfo = true, verbose = true) {
 			s = json.state;
 			displayRover(info, s);
 		}
-		populateNodes(info);
 		isOn = s.on;
 		d.getElementById('sliderBri').value= s.bri;
 		nlA = s.nl.on;
@@ -908,6 +932,7 @@ function toggleLiveview() {
 }
 
 function toggleInfo() {
+  if (isNodes) toggleNodes();
 	isInfo = !isInfo;
 	if (isInfo) populateInfo(lastinfo);
 	d.getElementById('info').style.transform = (isInfo) ? "translateY(0px)":"translateY(100%)";
@@ -915,10 +940,11 @@ function toggleInfo() {
 }
 
 function toggleNodes() {
+  if (isInfo) toggleInfo();
 	isNodes = !isNodes;
-	if (isNodes) populateNodes(lastinfo);
 	d.getElementById('nodes').style.transform = (isNodes) ? "translateY(0px)":"translateY(100%)";
-	d.getElementById('buttonNo').className = (isNodes) ? "active":"";
+  d.getElementById('buttonNodes').className = (isNodes) ? "active":"";
+  if (isNodes) loadNodes();
 }
 
 function makeSeg() {

wled00/json.cpp

@@ -474,6 +474,8 @@ void serializeInfo(JsonObject root)
   fs_info["t"] = fsBytesTotal / 1000;
   fs_info[F("pmt")] = presetsModifiedTime;
 
+  root[F("ndc")] = Nodes.size();
+  
   #ifdef ARDUINO_ARCH_ESP32
   #ifdef WLED_DEBUG
     wifi_info[F("txPower")] = (int) WiFi.getTxPower();
@@ -533,23 +535,22 @@ void serializeInfo(JsonObject root)
   root[F("brand")] = "WLED";
   root[F("product")] = F("FOSS");
   root["mac"] = escapedMac;
+}
 
+void serializeNodes(JsonObject root)
+{
   JsonArray nodes = root.createNestedArray("nodes");
   IPAddress ip = WiFi.localIP();
   for (NodesMap::iterator it = Nodes.begin(); it != Nodes.end(); ++it)
   {
     if (it->second.ip[0] != 0)
     {
-      bool isThisUnit = it->first == ip[3];
-
-      if (isThisUnit) continue;
-
       JsonObject node = nodes.createNestedObject();
       node[F("name")] = it->second.nodeName;
-      node[F("type")] = getNodeTypeDisplayString(it->second.nodeType);
+      node[F("type")] = it->second.nodeType;
       node[F("ip")]   = it->second.ip.toString();
       node[F("age")]  = it->second.age;
-      node[F("build")] = it->second.build;
+      node[F("vid")] = it->second.build;
     }
   }
 }
@@ -561,6 +562,7 @@ void serveJson(AsyncWebServerRequest* request)
   if      (url.indexOf("state") > 0) subJson = 1;
   else if (url.indexOf("info")  > 0) subJson = 2;
   else if (url.indexOf("si") > 0) subJson = 3;
+  else if (url.indexOf("nodes") > 0) subJson = 4;
   else if (url.indexOf("live")  > 0) {
     serveLiveLeds(request);
     return;
@@ -587,6 +589,8 @@ void serveJson(AsyncWebServerRequest* request)
       serializeState(doc); break;
     case 2: //info
       serializeInfo(doc); break;
+    case 4: //node list
+      serializeNodes(doc); break;
     default: //all
       JsonObject state = doc.createNestedObject("state");
       serializeState(state);

wled00/udp.cpp

@@ -169,11 +169,14 @@ void handleNotifications()
 
   // WLED nodes info notifications
   if (isSupp && udpIn[0] == 255 && udpIn[1] == 1 && len >= 40) {
-//    IPAddress remoteIP = notifier2Udp.remoteIP();
+    if (notifier2Udp.remoteIP() == Network.localIP()) return;
 
     uint8_t unit = udpIn[39];
-    Nodes[unit].age = 0; // Create a new element when not present
     NodesMap::iterator it = Nodes.find(unit);
+    if (it == Nodes.end() && Nodes.size() < WLED_MAX_NODES) { // Create a new element when not present
+      Nodes[unit].age = 0;
+      it = Nodes.find(unit);
+    }
 
     if (it != Nodes.end()) {
       for (byte x = 0; x < 4; x++) {
@@ -410,7 +413,7 @@ void sendSysInfoUDP(uint8_t repeats)
     return;
   }
 
-  IPAddress ip = WiFi.localIP();
+  IPAddress ip = Network.localIP();
 
   // TODO: make a nice struct of it and clean up
   //  0: 1 byte 'binary token 255'
@@ -423,12 +426,6 @@ void sendSysInfoUDP(uint8_t repeats)
   // 44 bytes total
 
   // send my info to the world...
-  for (;repeats--;)
-  {
-    /*
-    escapedMac  // mac address
-    */
-
   uint8_t data[44] = {0};
   data[0] = 255;
   data[1] = 1;
@@ -454,29 +451,4 @@ void sendSysInfoUDP(uint8_t repeats)
   notifier2Udp.beginPacket(broadcastIP, udpPort2);
   notifier2Udp.write(data, sizeof(data));
   notifier2Udp.endPacket();
-
-    if (repeats) delay(500);
-  }
-
-  Nodes[ip[3]].age = 0; // Create new node when not already present.
-  // store my own info also in the list
-  NodesMap::iterator it = Nodes.find(ip[3]);
-
-  if (it != Nodes.end())
-  {
-    for (byte x = 0; x < 4; x++) {
-      it->second.ip[x] = ip[x];
-    }
-    it->second.age      = 0;
-    it->second.nodeName = serverDescription;
-    #ifdef ESP8266
-    it->second.nodeType = NODE_TYPE_ID_ESP8266;
-    #elif defined(ARDUINO_ARCH_ESP32)
-    it->second.nodeType = NODE_TYPE_ID_ESP32;
-    #else
-    it->second.nodeType = NODE_TYPE_ID_UNDEFINED;
-    #endif
-    it->second.unit     = ip[3];
-    it->second.build    = VERSION; 
-  }
 }