Optimize liveview2D

Author: ewoudwijma

wled00/data/index.js

@@ -1937,40 +1937,30 @@ function toggleSync()
 function toggleLiveview()
 {
 	if (isM) {
+		//WLEDMM adding liveview2D support on main ui
 		isLv = !isLv;
 		gId("colorGFX").style.display = isLv? "inline":"none";
 		gId("effectGFX").style.display = isLv? "inline":"none";
 		gId("segGFX").style.display = isLv? "inline":"none";
 
 		canvasPeek = gId("canvasPeek");
-		peek(canvasPeek, !isLv); //set off if !isLv
-
-		gId('buttonSr').className = (isLv) ? "active":"";
-
+		if (isLv) peek(canvasPeek); //W
 	} else {
-		//WLEDMM adding liveview2D support
+		//WLEDMM remove liveview2D support here
 		if (isInfo && isM) toggleInfo();
 		if (isNodes && isM) toggleNodes();
 		isLv = !isLv;
 
 		var lvID = "liveview";
-		// if (isM) {   
-		// 	lvID = "liveview2D"
-		// 	if (isLv) {
-		// 	var cn = '<iframe id="liveview2D" src="about:blank"></iframe>';
-		// 	d.getElementById('kliveview2D').innerHTML = cn;
-		// 	}
-
-		// 	gId('mliveview2D').style.transform = (isLv) ? "translateY(0px)":"translateY(100%)";
-		// }
 
 		gId(lvID).style.display = (isLv) ? "block":"none";
 		var url = (loc?`http://${locip}`:'') + "/" + lvID;
 		gId(lvID).src = (isLv) ? url:"about:blank";
-		gId('buttonSr').className = (isLv) ? "active":"";
-		if (!isLv && ws && ws.readyState === WebSocket.OPEN) ws.send('{"lv":false}');
 		size();
 	}
+
+	gId('buttonSr').className = (isLv) ? "active":"";
+	if (ws && ws.readyState === WebSocket.OPEN) ws.send(`{"lv":${isLv}}`);
 }
 
 function toggleInfo()

wled00/data/peek.js

@@ -1,4 +1,4 @@
-function peek(c, setOff=false) {
+function peek(c) {
 	// Check for canvas support
 	var ctx = c.getContext('2d');
 	if (ctx) { // Access the rendering context
@@ -16,8 +16,8 @@ function peek(c, setOff=false) {
 			}
 		}
 		ws.binaryType = "arraybuffer";
-
-		function processWSData(e) {
+		ws.addEventListener('message',(e)=>{
+			// function processWSData(e) {
 			try {
 				if (toString.call(e.data) === '[object ArrayBuffer]') {
 					let leds = new Uint8Array(e.data);
@@ -33,21 +33,18 @@ function peek(c, setOff=false) {
 						return 25+225*color/255;
 					} //WLEDMM in range 55 - 205
 					for (y=0.5;y<mH;y++) for (x=0.5; x<mW; x++) {
-						ctx.fillStyle = `rgb(${colorAmp(leds[i])},${colorAmp(leds[i+1])},${colorAmp(leds[i+2])})`;
-						ctx.beginPath();
-						ctx.arc(x*pPL+lOf, y*pPL, pPL*0.4, 0, 2 * Math.PI);
-						ctx.fill();
+						if (leds[i]!= 0 || leds[i+1]!= 0 || leds[i+2]!= 0) { //WLEDMM: do not show blacks
+							ctx.fillStyle = `rgb(${colorAmp(leds[i])},${colorAmp(leds[i+1])},${colorAmp(leds[i+2])})`;
+							ctx.beginPath();
+							ctx.arc(x*pPL+lOf, y*pPL, pPL*0.4, 0, 2 * Math.PI);
+							ctx.fill();
+						}
 						i+=3;
 					}
 				}
 			} catch (err) {
 				console.error("Peek WS error:",err);
 			} 
-		}
-		
-		if (!setOff)
-			ws.addEventListener('message', processWSData);
-		else
-			ws.removeEventListener('message', processWSData);
+		});
 	}
 }

wled00/html_other.h

@@ -310,44 +310,44 @@ const uint8_t PAGE_liveviewws2D[] PROGMEM = {
 
 
 // Autogenerated from wled00/data/peek.js, do not edit!!
-const uint16_t PAGE_peekJs_length = 575;
+const uint16_t PAGE_peekJs_length = 572;
 const uint8_t PAGE_peekJs[] PROGMEM = {
-  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0x75, 0x52, 0xc9, 0x6e, 0xdb, 0x30,
-  0x10, 0xfd, 0x15, 0x85, 0x28, 0x12, 0xd2, 0x62, 0x69, 0x47, 0x89, 0xdb, 0x42, 0x0a, 0x6b, 0xb4,
-  0x41, 0x0e, 0x05, 0xba, 0x18, 0x75, 0x8b, 0x1c, 0x02, 0x03, 0xa1, 0xa5, 0x91, 0xc5, 0x86, 0x26,
-  0x0d, 0x6a, 0xbc, 0x08, 0x8a, 0xfe, 0xbd, 0x94, 0xb3, 0x1e, 0xda, 0xcb, 0x70, 0x96, 0x37, 0xcb,
-  0xe3, 0x4c, 0xb9, 0xb1, 0x39, 0x6a, 0x67, 0xa3, 0x35, 0xc0, 0x1d, 0x05, 0x8e, 0xf2, 0xe8, 0x94,
-  0xb5, 0x5b, 0xe5, 0x23, 0x2f, 0x41, 0x2c, 0x01, 0x2f, 0x9d, 0x45, 0xd8, 0x23, 0x25, 0x49, 0x41,
-  0x58, 0xa6, 0x4b, 0xea, 0x1f, 0xc2, 0x2e, 0x43, 0xdf, 0xb4, 0x4e, 0xa2, 0x5b, 0x8b, 0x9d, 0xb6,
-  0x85, 0xdb, 0x89, 0x5d, 0xdd, 0xe5, 0x0a, 0xf3, 0x8a, 0x02, 0x6b, 0xbb, 0xf2, 0xa9, 0xb0, 0xa5,
-  0xc8, 0xda, 0x1e, 0x1b, 0x72, 0xc9, 0x8d, 0x5b, 0xfc, 0x81, 0x1c, 0xa3, 0x4f, 0xde, 0xab, 0xe6,
-  0xf3, 0xa6, 0x2c, 0xc1, 0xcf, 0x89, 0x94, 0xa1, 0xca, 0x0c, 0xbd, 0xb6, 0x4b, 0x91, 0x2b, 0x63,
-  0x28, 0x8a, 0x42, 0xa1, 0x62, 0xac, 0x35, 0x80, 0x91, 0x92, 0x16, 0x76, 0xd1, 0x6f, 0x6d, 0xf1,
-  0xc3, 0x21, 0xeb, 0x29, 0xda, 0xcf, 0xf2, 0xfe, 0xdd, 0x91, 0x54, 0x37, 0xa3, 0xf9, 0xfd, 0x7d,
-  0xd2, 0x2b, 0xa7, 0x41, 0x39, 0xf2, 0xcc, 0x03, 0x6e, 0xbc, 0xcd, 0xfa, 0x64, 0x1d, 0xbc, 0xc9,
-  0x9c, 0xe7, 0xe1, 0x39, 0x9b, 0x73, 0x23, 0xbf, 0x29, 0xac, 0xc4, 0x4a, 0x5b, 0x0a, 0x61, 0xe8,
-  0x02, 0xab, 0xa1, 0xe6, 0x20, 0x2a, 0xd0, 0xcb, 0x0a, 0x87, 0x39, 0xe3, 0xf5, 0x03, 0xa0, 0x34,
-  0xce, 0x79, 0xfa, 0x84, 0x79, 0x6b, 0x06, 0x9a, 0x0d, 0x13, 0x96, 0x1d, 0x68, 0xcb, 0xf3, 0xec,
-  0x15, 0xb5, 0xc0, 0xf4, 0xa1, 0x5b, 0x34, 0x92, 0x12, 0x26, 0xa3, 0x34, 0x19, 0xc7, 0x49, 0x32,
-  0x1e, 0xc0, 0x30, 0x19, 0x8f, 0xbb, 0x32, 0x54, 0xf1, 0x22, 0x37, 0xa0, 0xfc, 0xcf, 0xc0, 0x9a,
-  0x8e, 0xf8, 0x88, 0x3f, 0x16, 0x7d, 0x6e, 0xcb, 0x78, 0x23, 0xc5, 0x38, 0x6b, 0x2e, 0xf2, 0xac,
-  0x89, 0x63, 0xd6, 0xa7, 0xec, 0x7b, 0xc7, 0xfe, 0x42, 0x67, 0xfb, 0xe0, 0xf0, 0xa2, 0xd4, 0xc6,
-  0xcc, 0xb0, 0x31, 0x20, 0x6f, 0xfd, 0x72, 0x41, 0xdf, 0xb4, 0x96, 0xaa, 0x1b, 0x37, 0x67, 0x1d,
-  0x7f, 0x54, 0xe3, 0xd3, 0xd7, 0x46, 0x12, 0x0c, 0x76, 0xcb, 0xbd, 0x58, 0xc0, 0x52, 0xdb, 0x69,
-  0xe0, 0x43, 0x59, 0xb0, 0x94, 0xcf, 0xe9, 0x7e, 0x60, 0xe2, 0x9a, 0x37, 0x03, 0xc3, 0xc5, 0x79,
-  0x10, 0x23, 0x9e, 0x0c, 0x0e, 0x7c, 0xa7, 0x5f, 0x7a, 0x44, 0xdf, 0x27, 0x40, 0x5d, 0x2c, 0xcf,
-  0xba, 0x97, 0x45, 0xe6, 0xce, 0xd6, 0xce, 0x80, 0x00, 0xef, 0xc3, 0x68, 0x64, 0x1a, 0xce, 0x24,
-  0xba, 0x9e, 0x45, 0x07, 0x33, 0x25, 0x1c, 0x58, 0xd7, 0xb9, 0xe3, 0x63, 0x27, 0x3c, 0xa8, 0xa2,
-  0x99, 0xa1, 0x42, 0x08, 0xeb, 0xbc, 0x86, 0xc5, 0xcc, 0xe5, 0x77, 0x80, 0xe2, 0xc7, 0xf4, 0xea,
-  0xfb, 0xc4, 0x89, 0x1a, 0x6c, 0x41, 0x49, 0x7b, 0x62, 0xb6, 0x27, 0x29, 0xfa, 0x0d, 0x74, 0x84,
-  0xa5, 0xd4, 0x1d, 0x36, 0xfb, 0x8c, 0xa5, 0x94, 0x54, 0x88, 0xeb, 0x3a, 0x0d, 0x07, 0xf1, 0x78,
-  0x51, 0xc6, 0x85, 0x39, 0xc2, 0x4f, 0x8b, 0xb5, 0x77, 0xe8, 0x72, 0x67, 0x26, 0x64, 0x57, 0xd7,
-  0x24, 0x0d, 0x92, 0xb0, 0x98, 0xa4, 0xc3, 0x21, 0x89, 0x0b, 0x97, 0x6f, 0x56, 0x60, 0xf1, 0x05,
-  0x5c, 0xb9, 0x1a, 0x63, 0x32, 0xec, 0x31, 0x4c, 0x38, 0xeb, 0xd6, 0x60, 0x25, 0x65, 0xf2, 0x63,
-  0xfb, 0xcf, 0x39, 0x3a, 0xee, 0xc4, 0x42, 0x5b, 0xe5, 0x9b, 0x5f, 0xcd, 0x1a, 0x24, 0x51, 0xfd,
-  0x91, 0x2d, 0x0e, 0xa7, 0x49, 0x38, 0x4e, 0x7a, 0x66, 0x2b, 0xb7, 0x85, 0xab, 0x6d, 0xe8, 0xf1,
-  0x55, 0xd7, 0x08, 0x16, 0xc2, 0x3f, 0xac, 0xa0, 0xae, 0xd5, 0x12, 0x08, 0xb7, 0x2c, 0x75, 0x42,
-  0x15, 0xc5, 0xff, 0xe3, 0x5d, 0xf7, 0x17, 0x51, 0xe6, 0x9d, 0x18, 0x65, 0x03, 0x00, 0x00
+  0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0x6d, 0x53, 0x5b, 0x6f, 0xd3, 0x30,
+  0x14, 0xfe, 0x2b, 0x99, 0x85, 0x3a, 0xbb, 0x09, 0x6e, 0x97, 0xad, 0x80, 0x92, 0x99, 0x09, 0xa6,
+  0x3d, 0x20, 0x71, 0xa9, 0x28, 0x68, 0x0f, 0x53, 0xa5, 0xb9, 0xc9, 0x49, 0x63, 0xe6, 0xd9, 0x95,
+  0x73, 0xba, 0x36, 0xea, 0xf2, 0xdf, 0x39, 0x69, 0x77, 0xe1, 0x01, 0x29, 0x72, 0xce, 0xed, 0xfb,
+  0xce, 0xcd, 0xae, 0xd6, 0xae, 0x40, 0xe3, 0x5d, 0xb4, 0x02, 0xb8, 0xe3, 0x28, 0x76, 0x0f, 0x3a,
+  0x44, 0xa0, 0x50, 0x2e, 0x01, 0x2f, 0xbd, 0x43, 0xd8, 0x22, 0x67, 0x69, 0xc9, 0x44, 0x6e, 0x2a,
+  0x0e, 0x07, 0x77, 0xc8, 0x31, 0xb4, 0xbb, 0xa0, 0xd0, 0xaf, 0xe4, 0xc6, 0xb8, 0xd2, 0x6f, 0xe4,
+  0xa6, 0xe9, 0x0a, 0x8d, 0x45, 0xdd, 0x33, 0x74, 0x61, 0x30, 0x08, 0x32, 0x80, 0x2e, 0xdb, 0x19,
+  0x6a, 0x04, 0xa5, 0xd4, 0x35, 0x2c, 0x66, 0xbe, 0xb8, 0x03, 0x94, 0x3f, 0xa6, 0x57, 0xdf, 0x2f,
+  0x82, 0x6c, 0xc0, 0x95, 0x9c, 0xed, 0x8e, 0xed, 0xc3, 0x71, 0x86, 0x61, 0x0d, 0x1d, 0x13, 0x19,
+  0x0f, 0xca, 0xc1, 0x26, 0x7a, 0x89, 0xe5, 0x9c, 0xd5, 0x88, 0xab, 0x26, 0x63, 0x4a, 0x3d, 0xa5,
+  0xb1, 0x9e, 0xb2, 0x50, 0xb5, 0x72, 0x15, 0x3c, 0xfa, 0xc2, 0xdb, 0x0b, 0xb6, 0x69, 0x1a, 0x96,
+  0xd1, 0xc9, 0x44, 0xcc, 0xb2, 0xd1, 0x88, 0xc5, 0xa5, 0x2f, 0xd6, 0xf7, 0xe0, 0xf0, 0x35, 0xb8,
+  0xf6, 0x0d, 0xc6, 0x6c, 0xd4, 0xc7, 0x08, 0xe9, 0x9d, 0x5f, 0x81, 0x53, 0x5c, 0xa8, 0x8f, 0xbb,
+  0xff, 0xd6, 0xd1, 0x25, 0x41, 0x2e, 0x8c, 0xd3, 0xa1, 0xfd, 0xd5, 0xae, 0x40, 0x31, 0x1d, 0x82,
+  0x6e, 0x17, 0xeb, 0xaa, 0x82, 0xc0, 0xc8, 0xa5, 0xcb, 0xf2, 0xea, 0x81, 0xe8, 0xbf, 0x9a, 0x06,
+  0xc1, 0x41, 0xe0, 0xec, 0x1e, 0x9a, 0x46, 0x2f, 0x81, 0x9c, 0x44, 0xd9, 0x4f, 0x86, 0x26, 0xc5,
+  0x6e, 0xfc, 0xe2, 0x0f, 0x14, 0x18, 0x7d, 0xea, 0xd1, 0x9f, 0xf7, 0xe8, 0x39, 0xf5, 0x41, 0x33,
+  0x9b, 0x61, 0x30, 0x6e, 0x29, 0x0b, 0x6d, 0x2d, 0x0f, 0xb2, 0xd4, 0xa8, 0x85, 0xd8, 0x59, 0xc0,
+  0xc8, 0xed, 0xdb, 0xff, 0x6d, 0x1c, 0x7e, 0xd8, 0xa3, 0x9e, 0xbd, 0xfd, 0xe4, 0xdf, 0xbf, 0x3b,
+  0x52, 0xee, 0x66, 0x3c, 0x7f, 0x7c, 0x4c, 0x7b, 0xe1, 0x84, 0x84, 0x23, 0x10, 0x01, 0x70, 0x1d,
+  0x5c, 0xde, 0x83, 0x0d, 0x59, 0xd3, 0x79, 0x52, 0xd0, 0xef, 0x74, 0x9e, 0x58, 0xf5, 0x4d, 0x63,
+  0x2d, 0xef, 0x8d, 0xe3, 0x48, 0x2b, 0x2a, 0xb1, 0x1e, 0x99, 0x04, 0x65, 0x0d, 0x66, 0x59, 0xe3,
+  0xa8, 0x10, 0x49, 0x7d, 0x08, 0xa8, 0xac, 0xf7, 0x81, 0x3f, 0xc7, 0xbc, 0xb5, 0x43, 0x23, 0x46,
+  0xa9, 0xc8, 0xfb, 0x25, 0x7b, 0x75, 0x96, 0x57, 0xcf, 0x97, 0x43, 0xf7, 0x7b, 0x3d, 0x64, 0x8b,
+  0xc6, 0xd4, 0xc4, 0xc5, 0x38, 0x4b, 0x27, 0x71, 0x9a, 0x4e, 0x86, 0x38, 0x4a, 0x27, 0x93, 0xae,
+  0x22, 0x16, 0x90, 0x85, 0x05, 0x1d, 0x7e, 0x52, 0xd7, 0x7c, 0x9c, 0x8c, 0x93, 0x27, 0xd2, 0x97,
+  0xb4, 0x22, 0x69, 0x95, 0x9c, 0xe4, 0xed, 0x79, 0x91, 0xb7, 0x71, 0x2c, 0x7a, 0xc8, 0xb6, 0x37,
+  0x6c, 0xcf, 0x4d, 0xbe, 0x25, 0x03, 0xf1, 0xba, 0x1b, 0x3f, 0x1f, 0x0c, 0x0e, 0x42, 0x7c, 0xf2,
+  0x2a, 0xa6, 0xd4, 0x2e, 0xf1, 0x57, 0xc6, 0xda, 0x19, 0xb6, 0x16, 0xd4, 0x6d, 0x58, 0x2e, 0xf8,
+  0x9b, 0x9d, 0xe6, 0x3d, 0x82, 0x36, 0xf6, 0x24, 0x12, 0xe6, 0x1f, 0x25, 0x25, 0x45, 0xdc, 0x26,
+  0x20, 0x17, 0xb0, 0x34, 0x6e, 0x4a, 0xfd, 0x72, 0x41, 0x9a, 0x0e, 0x05, 0xdf, 0x0e, 0x6d, 0x5c,
+  0x27, 0xed, 0xd0, 0x26, 0xf2, 0x8c, 0x8e, 0x71, 0x92, 0x0e, 0xf7, 0xf3, 0x98, 0x7e, 0xe9, 0x23,
+  0xfa, 0x3c, 0x5c, 0x88, 0xc4, 0xc7, 0xea, 0xb4, 0x7b, 0xbd, 0xd7, 0x85, 0x77, 0x8d, 0xb7, 0x20,
+  0x21, 0x04, 0xaa, 0x9d, 0x4d, 0xe9, 0xc1, 0x44, 0xd7, 0xb3, 0x68, 0xaf, 0x66, 0x2c, 0x41, 0xd1,
+  0x75, 0xf4, 0xfd, 0x05, 0xbf, 0xac, 0xd3, 0x8d, 0x51, 0x03, 0x00, 0x00
 };