show only ledmap pixels, show bus lengths in segment visualization

index.js: segment visualization:
- max width if no pc
- don't show nr if only one segment
- Ledmap nr color depending on bus output

FX_2Dfcn.cpp / FX_fcn.cpp
- don't show ledmap -1 pixels

json.cpp: add busses.length to outputs

ws.cpp: peek back to strip.gPC only

wled00/FX_2Dfcn.cpp

@@ -80,8 +80,10 @@ void WS2812FX::setUpMatrix(bool reset) {
       customMappingSize = Segment::maxWidth * Segment::maxHeight;
 
       uint16_t *customMappingTableCombi = nullptr; //WLEDMM: Idea @Troy#2642 
-      if (loadedLedmap >= 0) //WLEDMM: @Troy#2642 : include ledmap = 0 as default ledmap
+      if (loadedLedmap >= 0) { //WLEDMM: @Troy#2642 : include ledmap = 0 as default ledmap
         customMappingTableCombi = new uint16_t[customMappingSize];
+        for (int i=0; i<customMappingSize;i++) customMappingTableCombi[i] = (uint16_t)0xFFFFU; //WLEDMM: init with no show
+      }
 
       uint16_t x, y, pix=0; //pixel
       for (size_t pan = 0; pan < panel.size(); pan++) {
@@ -95,12 +97,8 @@ void WS2812FX::setUpMatrix(bool reset) {
             x = p.serpentine && j%2 ? h-x-1 : x;
             uint16_t index = (p.yOffset + (p.vertical?x:y)) * Segment::maxWidth + p.xOffset + (p.vertical?y:x);
             if (loadedLedmap >= 0) {  //WLEDMM: @Troy#2642 : include ledmap = 0 as default ledmap
-              if (index < customMappingSizeLedmap) {
+              if (index < customMappingSizeLedmap && customMappingTable[index] < customMappingSize)
-                if (customMappingTable[index] < customMappingSize)
                   customMappingTableCombi[customMappingTable[index]] = pix; //WLEDMM: allow for 2 transitions if reset = false (ledmap and logical to physical)
-              }
-              else
-                customMappingTableCombi[index] = pix;
             }
             else
               customMappingTable[index] = pix;

wled00/FX_fcn.cpp

@@ -2016,12 +2016,8 @@ void WS2812FX::deserializeMap(uint8_t n) {
 #endif
       customMappingSize  = map.size();
     customMappingTable = new uint16_t[customMappingSize];
-    for (uint16_t i=0; i<customMappingSize; i++) {
+    for (uint16_t i=0; i<MIN(customMappingSize, map.size()); i++) 
-      if (i<map.size())
+      customMappingTable[i] = (uint16_t) (map[i]<0 ? 0xFFFFU : map[i]);
-        customMappingTable[i] = (uint16_t) (map[i]<0 ? 0xFFFFU : map[i]);
-      else
-        customMappingTable[i] = (uint16_t) 0xFFFFU; //fill the map entirely
-    }
     loadedLedmap = n;
 
     #ifdef WLED_DEBUG

wled00/data/index.js

@@ -1164,7 +1164,7 @@ function drawSegments() {
 		canvas.hidden = false;
 		ctx = canvas.getContext('2d');
 	}
-	ctx.canvas.width  = ctx.canvas.parentElement.offsetWidth > 800?800:300; //Mobile and non pc mode gets 300, pc 800
+	ctx.canvas.width  = ctx.canvas.parentElement.offsetWidth > 800?window.innerWidth*0.98:300; //Mobile and non pc mode gets 300, pc 800
 
 	var px, py, pw, ph;
 	var topLeftX, topLeftY;
@@ -1293,10 +1293,13 @@ function drawSegments() {
 		for (let p=0; p<gId("segcont").children.length; p++) {
 			if (!initSegmentVars(p)) break;
 			
-			ctx.font = '40px Arial'; 
+			if (gId("segcont").children.length>1) { //only show number if more than one segment
-			ctx.fillStyle = "orange";
+				ctx.font = '40px Arial'; 
-			ctx.fillText(p, topLeftX + pw/2*ppL - 10, topLeftY + ph/2*ppL + 10);
+				ctx.fillStyle = "orange";
+				ctx.fillText(p, topLeftX + pw/2*ppL - 10, topLeftY + ph/2*ppL + 10);
+			}
 	
+			//show name of fx
 			ctx.font = '20px Arial'; 
 			ctx.fillStyle = "white";
 			var name = eJson.find((o)=>{return o.id==fx}).name;
@@ -1315,22 +1318,34 @@ function drawSegments() {
 		else
 			fileName = ledmapFileNames[ledmapNr-10];
 		fetchAndExecute((loc?`http://${locip}`:'.') + "/", fileName , function(text) {
-			var noMap = [];
 			var ledmapJson = JSON.parse(text);
 			var counter = 0;
+			var noMap = [];
+			for (let i=0;i<maxWidth * maxHeight;i++) noMap.push(i); //initially add all pixels in array
+			var colorArray = ["yellow",     "green",     "magenta",   "orange"];
 			for (let i=0;i<ledmapJson["map"].length;i++) {
 				let mapIndex = ledmapJson["map"][i];
 				if (mapIndex != -1) {
 					ctx.font = parseInt(ppL/3) + 'px Arial'; 
 					ctx.fillStyle = "white";
+					if (lastinfo.outputs!=null) {
+						var ledcount = 0;
+						for (let o=0; o<lastinfo.outputs.length;o++) {
+							ledcount+=lastinfo.outputs[o];
+							if (counter >= ledcount)
+								ctx.fillStyle = colorArray[o%colorArray.length];
+						}
+					}
 					x = mapIndex%maxWidth;
 					y = parseInt(mapIndex/maxWidth);
 					ctx.fillText(counter, topLeftX + ppL/2 + x*ppL-ppL*0.3, topLeftY + ppL/2 + y * ppL);
-					counter++;
+					//remove the found pixels from noMap
+					const index = noMap.indexOf(mapIndex);
+					if (index > -1) noMap.splice(index, 1); // 2nd parameter means remove one item only
 				}
-				else 
+				counter++;
-				noMap.push(i);
 			}
+			//WLEDMM: make pixels not in ledmap black
 			for (let i=0;i<noMap.length;i++) {
 				x = noMap[i]%maxWidth;
 				y = parseInt(noMap[i]/maxWidth);
@@ -3188,7 +3203,7 @@ function togglePcMode(fromB = false)
 
 	//WLEDMM resize segment visualization
 	if (isM) {
-		gId("canvas").width = gId("canvas").parentElement.offsetWidth > 800?800:300; //WLEDMM Mobile and non pc mode gets 300, pc 800
+		gId("canvas").width = gId("canvas").parentElement.offsetWidth > 800?window.innerWidth*0.98:300; //WLEDMM Mobile and non pc mode gets 300, pc 800
 		drawSegments();
 	}
 }

wled00/json.cpp

@@ -771,6 +771,12 @@ void serializeInfo(JsonObject root)
     if ((ledMaps>>i) & 0x0001) ledmaps.add(i);
   }
 
+  //WLEDMM: add busses.length to outputs
+  JsonArray outputs = root.createNestedArray(F("outputs"));
+  for (int8_t b = 0; b < busses.getNumBusses(); b++) {
+    outputs.add(busses.getBus(b)->getLength());
+  }
+
   JsonObject wifi_info = root.createNestedObject("wifi");
   wifi_info[F("bssid")] = WiFi.BSSIDstr();
   int qrssi = WiFi.RSSI();

wled00/ws.cpp

@@ -170,12 +170,7 @@ bool sendLiveLedsWs(uint32_t wsClient)
 
   for (uint16_t i = 0; pos < bufSize -2; i += n)
   {
-    //WLEDMM: include ledmap in peek if default panel
+    uint32_t c = strip.getPixelColor(i);
-    uint32_t c;
-    if (strip.panel.size()==1 && !strip.panel[0].vertical && !strip.panel[0].bottomStart && !strip.panel[0].rightStart && !strip.panel[0].serpentine) // one default panel
-      c = busses.getPixelColor(i);
-    else
-      c = strip.getPixelColor(i);
     buffer[pos++] = qadd8(W(c), R(c)); //R, add white channel to RGB channels as a simple RGBW -> RGB map
     buffer[pos++] = qadd8(W(c), G(c)); //G
     buffer[pos++] = qadd8(W(c), B(c)); //B