Nodes tab more info + on/off button (WIP)

index.js:
- add callNode
- populateNodes more info and button calling node

remove fetchAndExecute from artifx.js (use the one in index.js) and add parms parameter

index.css: make #nodes div 980px wide

usermods/artifx/artifx.js

@@ -9,33 +9,9 @@ function toggleCEEditor(name, segID) {
     d.getElementById('ceEditor').style.transform = (isCEEditor) ? "translateY(0px)":"translateY(100%)";
 }
 
-function fetchAndExecute(url, name, callback, callError)
-{
-  fetch
-  (url+name, {
-    method: 'get'
-  })
-  .then(res => {
-    if (!res.ok) {
-		callError("File " + name + " not found");
-    	return "";
-    }
-    return res.text();
-  })
-  .then(text => {
-    callback(text);
-  })
-  .catch(function (error) {
-    callError("Error getting " + name);
-  })
-  .finally(() => {
-    // if (callback) setTimeout(callback,99);
-  });
-}
-
 function loadLogFile(name, attempt) {
     var ceLogArea = d.getElementById("ceLogArea");
-    fetchAndExecute((loc?`http://${locip}`:'.') + "/", name , function(logtext)
+    fetchAndExecute((loc?`http://${locip}`:'.') + "/", name, null, function(parms,logtext)
     {
       if (logtext == "") {
         if (attempt < 10) {
@@ -50,7 +26,7 @@ function loadLogFile(name, attempt) {
       }
       else
         ceLogArea.value = logtext;
-    }, function(error){
+    }, function(parms,error){
       showToast(error);
       console.log(error);
     });
@@ -91,7 +67,7 @@ function saveCE(name, segID) {
 
 function populateCEEditor(name, segID)
 {
-  fetchAndExecute((loc?`http://${locip}`:'.') + "/", name + ".wled", function(text)
+  fetchAndExecute((loc?`http://${locip}`:'.') + "/", name + ".wled", null, function(parms,text)
   {
     var cn=`ARTI-FX Editor<br>
             <i>${name}.wled</i><br>
@@ -117,7 +93,7 @@ function populateCEEditor(name, segID)
     ceLogArea.value = ".";
     loadLogFile(name + ".log", 1);
 
-  }, function(error){
+  }, function(parms,error){
     showToast(error);
     console.log(error);
   });
@@ -129,7 +105,7 @@ function downloadGHFile(url, name, save=false, warn=false) { //Githubfile
     if (url == "HBE") url = "https://raw.githubusercontent.com/MoonModules/WLED-Effects/master/Presets/HB_PresetPack210808_32x32_16seg/Effects%20pack/";
     if (url == "LM") url = "https://raw.githubusercontent.com/MoonModules/WLED-Effects/master/Ledmaps/";
 
-    fetchAndExecute(url, name, function(text) {
+    fetchAndExecute(url, name, null, function(parms,text) {
         if (save) {
             if (warn && !confirm('Are you sure to download/overwrite ' + name + '?'))
               return;
@@ -140,7 +116,7 @@ function downloadGHFile(url, name, save=false, warn=false) { //Githubfile
           var ceProgramArea = d.getElementById("ceProgramArea");
           ceProgramArea.value = text;
         }
-    }, function(error){
+    }, function(parms,error){
       showToast(error);
       console.log(url + name,error);
     });

wled00/data/index.css

@@ -575,11 +575,17 @@ button {
 	width: 200px;
 }
 
-#info table, #nodes table {
+#info table {
 	table-layout: fixed;
 	width: 100%;
 }
 
+/*WLEDMM nodes table auto*/
+#nodes table {
+	table-layout: auto;
+	width: 100%;
+}
+
 #info td, #nodes td {
   padding-bottom: 8px;
 }
@@ -590,11 +596,17 @@ button {
 #info table .btn, #nodes table .btn {
 	margin: 0;
 }
-#info div, #nodes div {
+#info div {
 	max-width: 490px;
 	margin: 0 auto;
 }
 
+/*WLEDMM nodes div width must be bigger*/
+#nodes div {
+	max-width: 980px;
+	margin: 0 auto;
+}
+
 #info #imgw {
 	/*display: inline-block;*/
 	margin: 8px auto;

wled00/data/index.js

@@ -1023,17 +1023,76 @@ function bname(o)
 	return o.name;
 }
 
+//WLEDMM call a node with json api command
+function callNode(ip, json) {
+	console.log("callNode", ip, json);
+
+	fetch('http://'+ip+'/json/state', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+          //'Content-Type': 'text/html; charset=UTF-8'
+        },
+        body: JSON.stringify(json)
+    })
+	.then((res)=>{
+		console.log("then res", res);
+		loadNodes(); //reload nodes
+	})
+	.then((json)=>{
+		console.log("then json", json);
+	});
+}
+
 function populateNodes(i,n)
 {
+	//WLEDMM helper: add html to element
+	function addEl(element, html) {
+		let k  = d.createElement(element);
+		k.innerHTML = html;
+		return k;
+	}
+
 	var cn="";
 	var urows="";
 	var nnodes = 0;
 	if (n.nodes) {
+		//WLEDMM add this node to nodes
+		let thisNode = {};
+		thisNode["name"] = i.name;
+		thisNode["ip"] = i.ip;
+		n.nodes.push(thisNode);
+
 		n.nodes.sort((a,b) => (a.name).localeCompare(b.name));
+		// console.log("populateNodes",i,n, n.nodes);
+		//loop over nodes e.g. {name: "MM 32 L", type: 32, ip: "192.168.121.249", age: 1, vid: 2305080}
 		for (var o of n.nodes) {
 			if (o.name) {
 				var url = `<button class="btn" title="${o.ip}" 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>`);
+				// urows += inforow(url,`${btype(o.type)}<br><i id="node${nnodes}">${o.vid==0?"N/A":o.vid} ${o.mode}</i>`);
+
+				//WLEDMM fetch json from nodes and add in table rows
+				urows += `<tr id="node${nnodes}"><td class="keytd">${url}</td><td class="valtd">${btype(o.type)}<br><i>${o.vid==0?"N/A":o.vid}</i></td></tr>`;
+				// console.log("Node", o.name);
+				//fetch the rest of the nodes info
+				fetchAndExecute(`http://${o.ip}/`, "json", nnodes, function(nnodes,text) {
+					state = JSON.parse(text)["state"];
+					info = JSON.parse(text)["info"];
+					effects = JSON.parse(text)["effects"];
+					console.log(nnodes, state, info, effects);
+					//append to table row
+
+					// gId(`node${nnodes}`).appendChild(addEl('td', `<button class="btn btn-xs" onclick="callNode('${info["ip"]}');"><i class="icons on">&#xe08f;</i></button>`));
+					gId(`node${nnodes}`).appendChild(addEl('td', "<button class=\"btn btn-xs\" onclick=\"callNode('"+info["ip"]+"',{'on':"+(state["on"]?"false":"true")+"});\"><i class=\"icons "+(state["on"]?"on":"off")+"\">&#xe08f;</i></button>"));
+					// ${i.opt&0x100?inforow("Net Print ☾","<button class=\"btn btn-xs\" onclick=\"requestJson({'netDebug':"+(i.opt&0x0080?"false":"true")+"});\"><i class=\"icons "+(i.opt&0x0080?"on":"off")+"\">&#xe08f;</i></button>"):''}
+					gId(`node${nnodes}`).appendChild(addEl('td', info["ip"]));
+					gId(`node${nnodes}`).appendChild(addEl('td', info["rel"]));
+					gId(`node${nnodes}`).appendChild(addEl('td', info["ver"]));
+					gId(`node${nnodes}`).appendChild(addEl('td', info["leds"]["count"]));
+					gId(`node${nnodes}`).appendChild(addEl('td', effects[state["seg"][0]["fx"]]));
+					gId(`node${nnodes}`).appendChild(addEl('td', info["leds"]["matrix"]["w"] + "x" + info["leds"]["matrix"]["h"]));
+				});
+
 				nnodes++;
 			}
 		}
@@ -1041,10 +1100,10 @@ function populateNodes(i,n)
 	if (i.ndc < 0) cn += `Instance List is disabled.`;
 	else if (nnodes == 0) cn += `No other instances found.`;
 	cn += `<table>
-	${inforow("Current instance:",i.name)}
 	${urows}
 	</table>`;
 	gId('kn').innerHTML = cn;
+	// ${inforow("Current instance:",i.name)} //WLEDMM current instance is now also shown as node
 }
 
 function loadNodes()
@@ -1333,7 +1392,7 @@ function drawSegmentView() {
 		else
 			fileName = ledmapFileNames[ledmapNr-10];
 
-		fetchAndExecute((loc?`http://${locip}`:'.') + "/", fileName , function(text) {
+		fetchAndExecute((loc?`http://${locip}`:'.') + "/", fileName, null, function(parms,text) {
 			var ledmapJson = JSON.parse(text);
 			var counter = 0;
 			var noMap = [];
@@ -1377,7 +1436,7 @@ function drawSegmentView() {
 				ctx.fill();
 			}
 			post();
-		}, function(error) { //error handling
+		}, function(parms,error) { //error handling
 			console.log(error);
 			// downloadGHFile("LM", fileName, true, false); WLEDMM: remove as this has too much impact
 			post();
@@ -2954,7 +3013,7 @@ function genPresets()
 }
 
 //WLEDMM: utility function to load contents of file from FS (used in draw)
-function fetchAndExecute(url, name, callback, callError)
+function fetchAndExecute(url, name, parms, callback, callError = null)
 {
   fetch
   (url+name, {
@@ -2969,10 +3028,10 @@ function fetchAndExecute(url, name, callback, callError)
   })
   .then(text => {
 	console.log("text", text);
-    callback(text);
+    callback(parms, text);
   })
   .catch(function (error) {
-	callError("Error getting " + name);
+	if (callError) callError(parms, "Error getting " + name);
 	console.log(error);
   })
   .finally(() => {

wled00/wled.h

@@ -8,7 +8,7 @@
  */
 
 // version code in format yymmddb (b = daily build)
-#define VERSION 23050700
+#define VERSION 2305110
 
 //uncomment this if you have a "my_config.h" file you'd like to use
 //#define WLED_USE_MY_CONFIG