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
This commit is contained in:
Ewoud
2023-05-11 17:08:33 +02:00
parent 8221b1b7f2
commit eb6b890c6b
5 changed files with 2337 additions and 2270 deletions

View File

@@ -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);
});

View File

@@ -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;

View File

@@ -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(() => {

File diff suppressed because it is too large Load Diff

View File

@@ -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