Nodes popup SuperSync ready for test

index.js
- cleanup code
- reordercolumns
- add warnings (orange) for version, bri scale and fps
- add led output length equal to panel dimensions
- master node order

wled00/data/index.js

@@ -41,7 +41,7 @@ var hol = [
 var ctx = null; // WLEDMM
 var ledmapNr = -1; //WLEDMM
 var ledmapFileNames = []; //WLEDMM
-let extendedNodes = []; //WLEDMM
+let nodesData = []; //WLEDMM
 
 function handleVisibilityChange() {if (!d.hidden && new Date () - lastUpdate > 3000) requestJson();}
 function sCol(na, col) {d.documentElement.style.setProperty(na, col);}
@@ -1074,28 +1074,12 @@ function callNode(ip, type, json) {
 	});
 }
 
-function SuperSync(nnodes) {
-	if (!confirm('Press Yes/OK if you know what you are doing!')) return;
-
-	for (i=0; i<nnodes; i++) {
-		let node = extendedNodes[i];
-		if (node.info.ip != lastinfo.ip) { //do not add to self
-			if (gId(`eql${i}`).innerText != "yes") {
-				console.log(node.info.ip, gId(`ip${i}`).innerText, gId(`pnlX${i}`).innerText, extendedNodes[i].led.matrix);
-				let len = extendedNodes[i].led.matrix.panels[0].h * extendedNodes[i].led.matrix.panels[0].w;
-				callNode(node.info.ip, "cfg", {"hw":{"led":{"matrix":extendedNodes[i].led.matrix}, "ins":[{"start": 0,"len": len}]}}); //self
-				callNode(node.info.ip, "state", {"rb":true}); //reboot
-			}
-		}
-	}
-}
-
 function ddpAll() {
 	if (!confirm('Press Yes/OK if you know what you are doing!')) return;
 	ins = [];
 	start = 0;
 	order = 0;
-	for (var node of extendedNodes) {
+	for (var node of nodesData) {
 		if (node.info.ip != lastinfo.ip) { //do not add to self
 			console.log(node);
 			output = {};
@@ -1120,52 +1104,94 @@ function ddpAll() {
 	callNode(lastinfo.ip, "cfg", {"hw":{"led":{"ins":ins}}}); //self
 }
 
+function SuperSync() {
+	if (!confirm('Press Yes/OK if you know what you are doing!')) return;
+
+	for (i=0; i<nodesData.length; i++) {
+		if (nodesData[i].info.ip != lastinfo.ip) { //do not add to self
+			if (gId(`ssu${i}`).innerText == "yes") { //only update if needed (see SSync column)
+				callNode(nodesData[i].info.ip, "cfg", {"hw":{"led":nodesData[i].cfg.hw.led}});
+				callNode(nodesData[i].info.ip, "cfg", {"light":{"scale-bri":nodesData[i].cfg.light["scale-bri"]}});
+				callNode(nodesData[i].info.ip, "state", {"rb":true}); //reboot
+			}
+		}
+	}
+}
+
 function populateNodes(i,n)
 {
+	var cn="";
 	var urows="";
 	var nnodes = 0;
-	var nnodesDone = 0;
-	var cn="";
-	extendedNodes = []; //WLEDMM reset nodes
+
+	//WLEDMM starts here
+	nodesData = []; //WLEDMM reset nodes
+	var nodesDone = 0;
 
 	function showPanel(panel) {
 		return "(" + panel.x + "," + panel.y + ") - " + panel.w + "x" + panel.h + " " + (panel.b?1:0) + (panel.r?1:0) + (panel.v?1:0) + (panel.s?1:0);
 	}
 
 	function checkNode(nodeNr) {
-		//if panel 0 the same and 1 or 2 panels (supersync always 1 or 2) and matrix size is this size then node is OK
-		if (gId(`pnl0${nodeNr}`).innerText != gId(`pnlX${nodeNr}`).innerText) 
-			gId(`eql${nodeNr}`).innerText = "pnl0 not pnlX";
-		else if (gId(`pnlC${nodeNr}`).innerText > 2)
-			gId(`eql${nodeNr}`).innerText = "nrOfP > 2";
-		else if (gId(`mrx${nodeNr}`).innerText != lastinfo.leds.matrix.w + "x" + lastinfo.leds.matrix.h)
-			gId(`eql${nodeNr}`).innerText = "mrx not " + lastinfo.leds.matrix.w + "x" + lastinfo.leds.matrix.h;
-		// else if (gId(`lpc${nodeNr}`).innerText != extendedNodes[nodeNr].info.leds.cloudsP)
-		// 	gId(`eql${nodeNr}`).innerText = "Leds P# not ...";
-		else
-			gId(`eql${nodeNr}`).innerText = "yes";
+		// console.log(nodeNr, nodesData[nodeNr]);
+		let errFound = false;
+
+		//warnings
+		if (gId(`vid${nodeNr}`).innerText != lastinfo.vid) {
+			gId(`vid${nodeNr}`).style.color = "orange";
+		}
+		if (gId(`ver${nodeNr}`).innerText != lastinfo.ver) {
+			gId(`ver${nodeNr}`).style.color = "orange";
+		}
+		if (gId(`scale-bri${nodeNr}`).innerText != nodesData[nodeNr].cfg.light["scale-bri"]) {
+			gId(`scale-bri${nodeNr}`).style.color = "orange";
+		}
+		if (gId(`fps${nodeNr}`).innerText != nodesData[nodeNr].cfg.light["fps"]) {
+			gId(`fps${nodeNr}`).style.color = "orange";
+		}
+
+		if (nodesData[nodeNr].cfg.hw.led.matrix) {
+			//if panel 0 the same and 1 or 2 panels (supersync always 1 or 2) and matrix size is this size then node is OK
+			if (nodesData[nodeNr].info.leds.countP != nodesData[nodeNr].cfg.hw.led.matrix.panels[0].w * nodesData[nodeNr].cfg.hw.led.matrix.panels[0].h) {
+				errFound = true;
+				gId(`lpc${nodeNr}`).style.color = "red";
+			}
+			if (gId(`mrx${nodeNr}`).innerText != lastinfo.leds.matrix.w + "x" + lastinfo.leds.matrix.h) {
+				errFound = true;
+				gId(`mrx${nodeNr}`).style.color = "red";
+			}
+			if (gId(`pnl0${nodeNr}`).innerText != gId(`pnlX${nodeNr}`).innerText)  {
+				errFound = true;
+				gId(`pnl0${nodeNr}`).style.color = "red";
+			}
+			if (gId(`pnlC${nodeNr}`).innerText > 2) {
+				errFound = true;
+				gId(`pnlC${nodeNr}`).style.color = "red";
+			}
+		}
+
+		//set the SuperSync Update needed column
+		gId(`ssu${nodeNr}`).innerText = errFound?"yes":"no";
+		if (errFound) {
+			gId(`ssu${nodeNr}`).style.color = "red";
+		}
 	}
 
+	//fetch both cfg.json and info from a node and store in nodesData array
 	function fetchInfoAndCfg(ip, nodeNr, parms, callback) {
 		//add td placeholders
 		urows += `<tr>`;
-		for (let nm of ["ins", "pwr", "type", "vid", "ip", "rel", "ver", "lpc", "lvc", "fx", "mrx", "pnl0", "pnlC", "pnlX", "eql"])
+		for (let nm of ["ins", "pwr", "ip", "type", "rel", "ver", "vid", "fx", "scale-bri", "fps", "lpc", "lvc", "mrx", "pnl0", "pnlC", "pnlX", "ssu"])
 			urows += `<td id="${nm}${nodeNr}"></td>`;
 		urows += `</tr>`;
 
-		// add key (name button), val (type and vid)
-		// urows += `<td class="keytd">${url}</td>`;//<td class="valtd">${btype(o.type)}<br><i>${o.vid==0?"N/A":o.vid}</i></td>`;
-		
-		//fetch the rest of the nodes info
+		//fetch info, state and effects
 		fetchAndExecute(`http://${ip}/`, "json", nodeNr, function(nodeNr, text) {
-			// console.log(text);
-			let state = JSON.parse(text)["state"];
 			let info = JSON.parse(text)["info"];
+			let state = JSON.parse(text)["state"];
 			let effects = JSON.parse(text)["effects"];
 
-			// console.log(nodeNr, state, info, effects);
-			
-			//add on/off button
+			//set values
 			gId(`pwr${nodeNr}`).innerHTML = "<button class=\"btn btn-xs\" onclick=\"callNode('"+info.ip+"','state',{'on':"+(state.on?"false":"true")+"});\"><i class=\"icons "+(state.on?"on":"off")+"\">&#xe08f;</i></button>";
 			gId(`type${nodeNr}`).innerText = info.arch;
 			gId(`vid${nodeNr}`).innerText = info.vid;
@@ -1175,69 +1201,86 @@ function populateNodes(i,n)
 			gId(`lvc${nodeNr}`).innerText = info.leds.count;
 			gId(`lpc${nodeNr}`).innerText = info.leds.countP;
 			gId(`fx${nodeNr}`).innerText = effects[state.seg[0].fx];
-			if (info.leds.matrix)
+
+			//store data
+			nodesData[nodeNr] = {};
+			nodesData[nodeNr].info = info;
+
+			//if the node has a matrix, show matrix info
+			if (info.leds.matrix) {
 				gId(`mrx${nodeNr}`).innerText = info.leds.matrix.w + "x" + info.leds.matrix.h;
+			}
 
-			//used by ddpAll and SuperSync
-			extendedNodes[nodeNr] = {};
-			extendedNodes[nodeNr].info = info;
-
+			//fetch cfg.json
 			fetchAndExecute(`http://${ip}/`, "cfg.json", nodeNr, function(nodeNr,text) {
 				let cfg = JSON.parse(text);
 
-				let color = ""
-				if (ip == lastinfo.ip) { //self
-					color = `style="background-color: red;"`;
-				}
-				let url = `<button class="btn" ${color} title="${ip}" onclick="location.assign('http://${ip}');">${cfg.id.name}</button>`;
+				//set values
+				let url = `<button class="btn" ${(ip == lastinfo.ip)?'style="background-color: red;"':''} title="${ip}" onclick="location.assign('http://${ip}');">${cfg.id.name}</button>`;
 				gId(`ins${nodeNr}`).innerHTML = url;
-	
-				let led = cfg.hw.led;
-				// let matrix = cfg.hw.led.matrix;
-				// var str = JSON.stringify(matrix, null, 2); // jsonpretty
-				if (led.matrix) {
-					// console.log(matrix);
-					gId(`pnl0${nodeNr}`).innerText = showPanel(led.matrix.panels[0]); //show the first panel
-					gId(`pnlC${nodeNr}`).innerText = led.matrix.panels.length; //show nr of panels
+				gId(`scale-bri${nodeNr}`).innerText = cfg.light["scale-bri"]; //show nr of panels
+				gId(`fps${nodeNr}`).innerText = cfg.hw.led["fps"]; //show nr of panels
+				
+				//store data
+				nodesData[nodeNr].cfg = cfg;
 
-					if (ip == lastinfo.ip) { //self
-						for (let i=0; i<nnodes; i++) {
-							if (led.matrix.panels[i]) {
-								gId(`pnlX${i}`).innerText = showPanel(led.matrix.panels[i]); //assign the desired panel
-								extendedNodes[i].led = structuredClone(led); //structuredClone: by value, not by reference
-								extendedNodes[i].led.matrix.ba = true; //advanced
-								//if the panel is b
-								let widthOK = extendedNodes[nodeNr].info.leds.matrix.w == led.matrix.panels[i].x + led.matrix.panels[i].w;
-								let heightOK = extendedNodes[nodeNr].info.leds.matrix.h == led.matrix.panels[i].y + led.matrix.panels[i].h;
+				//if the node has a matrix, show matrix info
+				if (cfg.hw.led.matrix) {
+					gId(`pnl0${nodeNr}`).innerText = showPanel(cfg.hw.led.matrix.panels[0]); //show the first panel
+					gId(`pnlC${nodeNr}`).innerText = cfg.hw.led.matrix.panels.length; //show nr of panels
+
+					//if self, assign it's matrix details to all others
+					if (ip == lastinfo.ip) {
+						let panelIndex = 0; //loop over panels
+						for (let i=0; i<nnodes; i++) { //loop over all nodes found
+							if (panelIndex < cfg.hw.led.matrix.panels.length && nodesData[i] && nodesData[i].info.ip != lastinfo.ip) { //loop over panels of self: assign each panel to a different node
+								//nodesData[i] does not exist if not all fetches done
+
+								let panelX = cfg.hw.led.matrix.panels[panelIndex];
+
+								gId(`pnlX${i}`).innerText = showPanel(panelX);
+
+								nodesData[i].cfg = structuredClone(cfg); //structuredClone: by value, not by reference so we can make changex
+
+								//now modify led setup for the specific node
+								nodesData[i].cfg.hw.led.matrix.ba = true; //advanced settings mode
+
+								//set the first and second panel of the node
+								let widthOK = nodesData[nodeNr].info.leds.matrix.w == panelX.x + panelX.w;
+								let heightOK = nodesData[nodeNr].info.leds.matrix.h == panelX.y + panelX.h;
 								if (widthOK && heightOK) {
-									extendedNodes[i].led.matrix.mpc = 1;
-									extendedNodes[i].led.matrix.mph = 1;
-									extendedNodes[i].led.matrix.mpv = 1;
-									extendedNodes[i].led.matrix.panels = [led.matrix.panels[i]];
+									nodesData[i].cfg.hw.led.matrix.mpc = 1;
+									nodesData[i].cfg.hw.led.matrix.mph = 1;
+									nodesData[i].cfg.hw.led.matrix.mpv = 1;
+									nodesData[i].cfg.hw.led.matrix.panels = [panelX];
 								} else {
 									let dummyPanel = {"b": false,"r": false,"v": false,"s": false,
-										"x": extendedNodes[nodeNr].info.leds.matrix.w - 1,
-										"y": extendedNodes[nodeNr].info.leds.matrix.h - 1,
+										"x": nodesData[nodeNr].info.leds.matrix.w - 1,
+										"y": nodesData[nodeNr].info.leds.matrix.h - 1,
 										"h": 1, "w": 1};
-									extendedNodes[i].led.matrix.mpc = 2;
-									extendedNodes[i].led.matrix.mph = 1;
-									extendedNodes[i].led.matrix.mpv = 2;
-									extendedNodes[i].led.matrix.panels = [led.matrix.panels[i], dummyPanel];
+									nodesData[i].cfg.hw.led.matrix.mpc = 2;
+									nodesData[i].cfg.hw.led.matrix.mph = 1;
+									nodesData[i].cfg.hw.led.matrix.mpv = 2;
+									nodesData[i].cfg.hw.led.matrix.panels = [panelX, dummyPanel];
 								}
+
+								//only one led output, same as first master led output, length equal as panelX dimensions
+								nodesData[i].cfg.hw.led.ins = [cfg.hw.led.ins[0]];
+								nodesData[i].cfg.hw.led.ins[0].start = 0;
+								nodesData[i].cfg.hw.led.ins[0].len = panelX.w * panelX.h;
+
+								panelIndex++;
 							}
 							else 
 								gId(`pnlX${i}`).innerText = "";
 						}
 					}
 				}
-				nnodesDone++;
+				nodesDone++;
 				callback(parms);
 			});
 		});
-
-	}
-
-	// console.log("info", i);
+	} //fetchInfoAndCfg
 
 	if (n.nodes) {
 		//WLEDMM add this node to nodes
@@ -1248,46 +1291,37 @@ function populateNodes(i,n)
 		
 		n.nodes.sort((a,b) => (a.name).localeCompare(b.name)); //alphabetic on name
 		// console.log("populateNodes",i,n);
-		
+
 		//set table header
 		urows += `<tr>`;
-		for (let nm of ["Instance", "Power", "Type", "Build", "IP", "Release", "Version", "#P Leds", "#V Leds", "Effect", "Matrix", "Panel0", "NrOfP", "PanelX", "Equal"])
-			urows += `<th>${nm}</th>`;
+		for (let nm of ["Instance", "Power", "IP", "Type", "Release", "Version", "Build", "Effect", "Bri%", "FPS", "LedsP#", "LedsV#", "Matrix", "Panel0", "Panels", "PanelX", "SSync"])
+			urows += `<th style="font-size:80%;">${nm}</th>`;
 		urows += `</tr>`;
 
-		//first show own node
-		// fetchInfoAndCfg(i.ip, 0, n, function(n) {
-
-			//show other nodes e.g. {name: "MM 32 L", type: 32, ip: "192.168.121.249", age: 1, vid: 2305080}
-			for (let o of n.nodes) {
-				if (o.name) {
-					//WLEDMM fetch json from nodes and add in table rows
-
-					if (o.ip) { //in ap mode no ip...
-
-						fetchInfoAndCfg(o.ip, nnodes, -1, function() {
-							//if all done
-							if (nnodesDone == nnodes ) {
-								for (let i=0; i<nnodes; i++) {
-									if (gId(`ip${i}`).innerText != lastinfo.ip) //not self
-										checkNode(i);
-								}
-								console.log("done", extendedNodes);
+		//show other nodes e.g. {name: "MM 32 L", type: 32, ip: "192.168.121.249", age: 1, vid: 2305080}
+		for (let o of n.nodes) {
+			if (o.name) {
+				if (o.ip) { //in ap mode no ip...
+					fetchInfoAndCfg(o.ip, nnodes, -1, function() {
+						//if all done
+						if (nodesDone == nnodes ) {
+							for (let i=0; i<nnodes; i++) {
+								if (gId(`ip${i}`).innerText != lastinfo.ip) //not self
+									checkNode(i);
 							}
-						});
-					}
-
+						}
+					});
 					nnodes++;
 				}
 			}
-		// });
+		}
 	} //if n.nodes
 
 	if (i.ndc < 0) cn += `Instance List is disabled.`;
 	else if (!n.nodes) cn += `No other instances found.`;
 	cn += `<table>${urows}</table>`;
 	cn += `<button class="btn" onclick="ddpAll();">DDP all</button>`;
-	cn += `<button class="btn" onclick="SuperSync(${nnodes});">SuperSync</button>`;
+	cn += `<button class="btn" onclick="SuperSync();">SuperSync</button>`;
 	gId('kn').innerHTML = cn;
 	// ${inforow("Current instance:",i.name)} //WLEDMM current instance is now also shown as node
 }

wled00/html_cpal.h

@@ -9,7 +9,7 @@
 // Autogenerated from wled00/data/cpal/cpal.htm, do not edit!!
 const uint16_t PAGE_cpal_L = 4721;
 const uint8_t PAGE_cpal[] PROGMEM = {
-  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0xbd, 0x3b, 0x7f, 0x73, 0xdb, 0xb6,
+  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xbd, 0x3b, 0x7f, 0x73, 0xdb, 0xb6,
   0x92, 0xff, 0xe7, 0x53, 0x20, 0x4c, 0x5f, 0x42, 0xd6, 0x14, 0x45, 0xd2, 0xb6, 0x64, 0x4b, 0xa2,
   0x3b, 0xa9, 0x93, 0x77, 0xce, 0x8d, 0xdd, 0x64, 0x5e, 0x7c, 0x6e, 0x7b, 0x3e, 0xbf, 0x31, 0x4d,
   0x42, 0x12, 0x1b, 0x8a, 0xe0, 0x03, 0x21, 0xd9, 0xae, 0xac, 0xef, 0x7e, 0xbb, 0x00, 0x48, 0x91,

wled00/html_settings.h

@@ -8,7 +8,7 @@
 // Autogenerated from wled00/data/style.css, do not edit!!
 const uint16_t PAGE_settingsCss_length = 847;
 const uint8_t PAGE_settingsCss[] PROGMEM = {
-  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0xad, 0x55, 0xc1, 0x8e, 0x9b, 0x30,
+  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xad, 0x55, 0xc1, 0x8e, 0x9b, 0x30,
   0x10, 0xfd, 0x15, 0xaa, 0x68, 0xa5, 0xad, 0x14, 0x10, 0x10, 0xc8, 0xa6, 0x46, 0x95, 0xaa, 0xde,
   0x7b, 0xab, 0xaa, 0x4a, 0xd5, 0x1e, 0x0c, 0x1e, 0x82, 0x15, 0x63, 0x23, 0xdb, 0x74, 0x49, 0x11,
   0xff, 0x5e, 0xdb, 0xc0, 0x42, 0xb2, 0x68, 0x7b, 0xa9, 0xa2, 0x44, 0xc4, 0x63, 0xc6, 0x6f, 0xde,
@@ -67,7 +67,7 @@ const uint8_t PAGE_settingsCss[] PROGMEM = {
 // Autogenerated from wled00/data/settings.htm, do not edit!!
 const uint16_t PAGE_settings_length = 1267;
 const uint8_t PAGE_settings[] PROGMEM = {
-  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0xad, 0x56, 0xe1, 0x6e, 0xdb, 0x36,
+  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xad, 0x56, 0xe1, 0x6e, 0xdb, 0x36,
   0x10, 0xfe, 0xef, 0xa7, 0x60, 0xd8, 0x2d, 0x91, 0x50, 0x59, 0x76, 0xdc, 0x61, 0xd8, 0x64, 0x4b,
   0x45, 0x9b, 0xa4, 0x6d, 0x86, 0x04, 0x09, 0x90, 0xa4, 0xdd, 0xb0, 0x0d, 0x28, 0x4d, 0x9e, 0x6c,
   0x36, 0x12, 0x29, 0x90, 0x94, 0x13, 0xcf, 0xf5, 0x7b, 0xec, 0x69, 0xf6, 0x30, 0x7b, 0x92, 0x1d,
@@ -153,7 +153,7 @@ const uint8_t PAGE_settings[] PROGMEM = {
 // Autogenerated from wled00/data/settings_wifi.htm, do not edit!!
 const uint16_t PAGE_settings_wifi_length = 2275;
 const uint8_t PAGE_settings_wifi[] PROGMEM = {
-  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0xad, 0x58, 0xff, 0x53, 0xdb, 0x3a,
+  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xad, 0x58, 0xff, 0x53, 0xdb, 0x3a,
   0x12, 0xff, 0xdd, 0x7f, 0x85, 0xd0, 0xbb, 0xe9, 0xd8, 0x83, 0xe3, 0x10, 0xd2, 0xf6, 0xf5, 0x20,
   0x4e, 0x0f, 0x42, 0x1e, 0x70, 0x8f, 0x42, 0xae, 0x61, 0xca, 0xdc, 0xf4, 0x3a, 0xef, 0x19, 0x5b,
   0x49, 0x54, 0x6c, 0xc9, 0x67, 0xc9, 0x09, 0x0c, 0xe4, 0x7f, 0x7f, 0xbb, 0x92, 0x13, 0xe2, 0x40,
@@ -302,7 +302,7 @@ const uint8_t PAGE_settings_wifi[] PROGMEM = {
 // Autogenerated from wled00/data/settings_leds.htm, do not edit!!
 const uint16_t PAGE_settings_leds_length = 7962;
 const uint8_t PAGE_settings_leds[] PROGMEM = {
-  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0xdd, 0x3c, 0x6b, 0x77, 0xe2, 0xc6,
+  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xdd, 0x3c, 0x6b, 0x77, 0xe2, 0xc6,
   0x92, 0xdf, 0xf9, 0x15, 0x6d, 0x25, 0x71, 0xa4, 0x20, 0x83, 0xc4, 0xc3, 0xc1, 0x80, 0xf0, 0x1a,
   0xcf, 0x23, 0xbe, 0xd7, 0x1e, 0xfb, 0x80, 0x27, 0x73, 0xf7, 0x24, 0x73, 0x32, 0x42, 0x6a, 0x40,
   0x63, 0x21, 0x71, 0x25, 0x61, 0x8f, 0xd7, 0xf6, 0xfe, 0xa6, 0xfd, 0x0d, 0xfb, 0xcb, 0xb6, 0xaa,
@@ -806,7 +806,7 @@ const uint8_t PAGE_settings_leds[] PROGMEM = {
 // Autogenerated from wled00/data/settings_dmx.htm, do not edit!!
 const uint16_t PAGE_settings_dmx_length = 1601;
 const uint8_t PAGE_settings_dmx[] PROGMEM = {
-  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0x95, 0x57, 0x6d, 0x57, 0xdb, 0x36,
+  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0x95, 0x57, 0x6d, 0x57, 0xdb, 0x36,
   0x14, 0xfe, 0x9e, 0x5f, 0xa1, 0xea, 0x43, 0xb1, 0x0f, 0xae, 0x9d, 0xc0, 0xe8, 0xd6, 0x60, 0x9b,
   0x8d, 0x94, 0x01, 0x3b, 0xc0, 0x38, 0x4d, 0xbb, 0x6e, 0x67, 0xdd, 0xd9, 0x51, 0xec, 0x9b, 0x58,
   0xc5, 0x96, 0x3c, 0x49, 0x4e, 0xa0, 0xb4, 0xff, 0x7d, 0x57, 0x72, 0xe2, 0x04, 0x0a, 0x7d, 0xf9,
@@ -913,7 +913,7 @@ const uint8_t PAGE_settings_dmx[] PROGMEM = {
 // Autogenerated from wled00/data/settings_ui.htm, do not edit!!
 const uint16_t PAGE_settings_ui_length = 3201;
 const uint8_t PAGE_settings_ui[] PROGMEM = {
-  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0xad, 0x59, 0x6b, 0x73, 0xdb, 0x36,
+  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xad, 0x59, 0x6b, 0x73, 0xdb, 0x36,
   0x16, 0xfd, 0xae, 0x5f, 0x81, 0x20, 0x19, 0x57, 0x1a, 0xb3, 0xb4, 0x9c, 0x74, 0x66, 0x13, 0x49,
   0x94, 0x37, 0x76, 0xdc, 0xc4, 0x1d, 0xa7, 0xc9, 0x46, 0xf6, 0xb6, 0x3b, 0x59, 0x8f, 0x4b, 0x91,
   0x90, 0x84, 0x98, 0x24, 0x58, 0x02, 0xf4, 0x63, 0x15, 0xfd, 0xf7, 0x3d, 0x17, 0x20, 0x25, 0x4a,
@@ -1120,7 +1120,7 @@ const uint8_t PAGE_settings_ui[] PROGMEM = {
 // Autogenerated from wled00/data/settings_sync.htm, do not edit!!
 const uint16_t PAGE_settings_sync_length = 3750;
 const uint8_t PAGE_settings_sync[] PROGMEM = {
-  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0xad, 0x5a, 0xeb, 0x72, 0xdb, 0x36,
+  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xad, 0x5a, 0xeb, 0x72, 0xdb, 0x36,
   0x16, 0xfe, 0xcf, 0xa7, 0x40, 0xd8, 0x99, 0x54, 0xaa, 0x65, 0xdd, 0x6c, 0x39, 0x8e, 0x2d, 0x32,
   0x2b, 0x5b, 0x8e, 0xad, 0xae, 0x2f, 0x8a, 0xe4, 0xb4, 0xe9, 0x74, 0x3b, 0x1d, 0x88, 0x84, 0x24,
   0xda, 0x24, 0xc1, 0x12, 0xa0, 0x2f, 0x93, 0xe6, 0x3d, 0xf6, 0x69, 0xf6, 0x61, 0xf6, 0x49, 0xf6,
@@ -1361,7 +1361,7 @@ const uint8_t PAGE_settings_sync[] PROGMEM = {
 // Autogenerated from wled00/data/settings_time.htm, do not edit!!
 const uint16_t PAGE_settings_time_length = 3305;
 const uint8_t PAGE_settings_time[] PROGMEM = {
-  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0xd5, 0x1a, 0x6b, 0x57, 0xdb, 0x38,
+  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xd5, 0x1a, 0x6b, 0x57, 0xdb, 0x38,
   0xf6, 0x7b, 0x7e, 0x85, 0x50, 0x7b, 0x98, 0x78, 0x70, 0x9e, 0x90, 0x16, 0x92, 0xd8, 0xdd, 0x10,
   0xd2, 0x42, 0x4b, 0x02, 0x67, 0x92, 0x0e, 0xbb, 0xd3, 0xf6, 0x4c, 0x15, 0x5b, 0x49, 0x0c, 0x8e,
   0xe4, 0xb5, 0x65, 0x02, 0x4b, 0xf9, 0xef, 0x7b, 0x25, 0x39, 0xce, 0xd3, 0xd0, 0x76, 0x66, 0x3f,
@@ -1574,7 +1574,7 @@ const uint8_t PAGE_settings_time[] PROGMEM = {
 // Autogenerated from wled00/data/settings_sec.htm, do not edit!!
 const uint16_t PAGE_settings_sec_length = 2483;
 const uint8_t PAGE_settings_sec[] PROGMEM = {
-  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0xad, 0x58, 0xff, 0x72, 0xd3, 0x48,
+  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xad, 0x58, 0xff, 0x72, 0xd3, 0x48,
   0x12, 0xfe, 0xdf, 0x4f, 0x31, 0x1e, 0xaa, 0x58, 0xeb, 0x50, 0xe4, 0x10, 0xa8, 0x3d, 0x08, 0x96,
   0xb9, 0x84, 0x84, 0x25, 0x57, 0x09, 0x49, 0x61, 0xb3, 0xdc, 0x15, 0x47, 0x51, 0x63, 0x69, 0x6c,
   0x0d, 0x96, 0x34, 0xda, 0x99, 0x51, 0x8c, 0x8f, 0xdd, 0xf7, 0xb8, 0xa7, 0xb9, 0x87, 0xb9, 0x27,
@@ -1736,7 +1736,7 @@ const uint8_t PAGE_settings_sec[] PROGMEM = {
 // Autogenerated from wled00/data/settings_um.htm, do not edit!!
 const uint16_t PAGE_settings_um_length = 3215;
 const uint8_t PAGE_settings_um[] PROGMEM = {
-  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0xcd, 0x59, 0xed, 0x72, 0xdb, 0xc6,
+  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xcd, 0x59, 0xed, 0x72, 0xdb, 0xc6,
   0x15, 0xfd, 0xaf, 0xa7, 0x80, 0x36, 0xae, 0x04, 0x0c, 0x21, 0x90, 0x8a, 0x93, 0x19, 0x9b, 0x20,
   0xa8, 0xda, 0xb2, 0x1d, 0xab, 0xb5, 0x23, 0x4d, 0x64, 0x27, 0xe9, 0xc8, 0xaa, 0x05, 0x12, 0x4b,
   0x12, 0x36, 0xb8, 0x8b, 0x00, 0x0b, 0x7d, 0x94, 0xd2, 0x5b, 0xf4, 0x7f, 0x3a, 0xed, 0x2b, 0xf4,
@@ -1943,7 +1943,7 @@ const uint8_t PAGE_settings_um[] PROGMEM = {
 // Autogenerated from wled00/data/settings_2D.htm, do not edit!!
 const uint16_t PAGE_settings_2D_length = 3766;
 const uint8_t PAGE_settings_2D[] PROGMEM = {
-  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0xc5, 0x5a, 0xeb, 0x76, 0xdb, 0x36,
+  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xc5, 0x5a, 0xeb, 0x76, 0xdb, 0x36,
   0x12, 0xfe, 0xaf, 0xa7, 0x80, 0xd9, 0xae, 0x4b, 0xda, 0xd4, 0xcd, 0x4d, 0x7b, 0x5a, 0x49, 0xa4,
   0xd6, 0x97, 0x34, 0xf6, 0x1e, 0x3b, 0xd1, 0xb1, 0x5c, 0x3b, 0x39, 0x6d, 0x4f, 0x43, 0x93, 0xa0,
   0x84, 0x84, 0x02, 0x58, 0x12, 0xf2, 0xa5, 0x8e, 0xdf, 0x63, 0x9f, 0x66, 0x1f, 0x66, 0x9f, 0x64,
@@ -2185,7 +2185,7 @@ const uint8_t PAGE_settings_2D[] PROGMEM = {
 // Autogenerated from wled00/data/settings_pin.htm, do not edit!!
 const uint16_t PAGE_settings_pin_length = 460;
 const uint8_t PAGE_settings_pin[] PROGMEM = {
-  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0x5d, 0x92, 0x4b, 0x6f, 0x13, 0x31,
+  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0x5d, 0x92, 0x4b, 0x6f, 0x13, 0x31,
   0x14, 0x85, 0xf7, 0xf3, 0x2b, 0xcc, 0xdd, 0x34, 0x41, 0x49, 0xa6, 0x54, 0x2c, 0x8a, 0x6a, 0x8f,
   0x50, 0xa0, 0x0b, 0x36, 0x25, 0x52, 0xd9, 0xa0, 0xaa, 0xaa, 0x1c, 0xfb, 0x4e, 0x62, 0xd5, 0x8f,
   0xc1, 0x8f, 0x84, 0x80, 0xfa, 0xdf, 0xb9, 0x9e, 0x69, 0x0b, 0x62, 0x33, 0xf6, 0xb9, 0xb6, 0xcf,