Peek in segment tab

Move peek 2D functionality to peek.js FX_fcn.cpp: always erase customMappingTable if non existent ledmap wled_server.cpp: add peek.js index.js: - add canvasPeek - change resize of canvas
2023-02-15 12:41:15 +01:00
parent 515c872770
commit 6e187dd5aa
12 changed files with 2447 additions and 2377 deletions
--- a/wled00/data/index.htm
+++ b/wled00/data/index.htm
@@ -6,6 +6,7 @@
 	<meta name="theme-color" content="#222222">
 	<meta content="yes" name="apple-mobile-web-app-capable">
 	<link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEAGACGAAAAFgAAAIlQTkcNChoKAAAADUlIRFIAAAAQAAAAEAgGAAAAH/P/YQAAAE1JREFUOI1j/P//PwOxgNGeAUMxE9G6cQCKDWAhpADZ2f8PMjBS3QW08QK20KaZC2gfC9hCnqouoNgARgY7zMxAyNlUdQHlXiAlO2MDAD63EVqNHAe0AAAAAElFTkSuQmCC"/>
+	<script src="peek.js"></script> <!--WLEDMM-->
 	<title>WLED</title>
 	<script>
 	function feedback(){}
@@ -313,7 +314,9 @@
 		</div>
 		<!--WLEDMM Segment graphics-->
 		<br>
-		<canvas id="canvas" hidden=true></canvas><br>
+		<canvas id="canvasSegments" hidden=true></canvas><br>
+		<br>
+		<canvas id="canvasPeek"></canvas><br>
 		<div id="MD"></div> <!-- Matrix dimensions -->
 		<br>
 		<p>Transition: <input id="tt" class="noslide" type="number" min="0" max="65.5" step="0.1" value="0.7">&nbsp;s</p>
--- a/wled00/data/index.js
+++ b/wled00/data/index.js
@@ -1158,18 +1158,9 @@ function updateLen(s, draw=true) //WLEDMM conditonally draw segment visualisatio
 //WLEDMM
 function drawSegments() {

-	if (!ctx) {
-		//WLEDMM: add canvas, initialize and set UI
-		var canvas = gId("canvas");
-		canvas.hidden = false;
-		ctx = canvas.getContext('2d');
-	}
-	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;

-	var space=0; // space between panels + margin
 	function initSegmentVars(p) {
 		px = parseInt(gId("seg"+p+"s").value); //first led x
 		if (!gId("seg"+p+"sY")) return false; //no draw for 1D segments (yet)
@@ -1177,8 +1168,8 @@ function drawSegments() {
 		pw = parseInt(gId("seg"+p+"e").value - gId("seg"+p+"s").value); //width
 		ph = parseInt(gId("seg"+p+"eY").value - gId("seg"+p+"sY").value); //height
 		// console.log("sergment", p, px, py, pw, ph);
-		topLeftX = px*ppL + space; //left margin
-		topLeftY = py*ppL + space; //top margin
+		topLeftX = px*ppL;
+		topLeftY = py*ppL;
 		// console.log("rect", p, topLeftX, topLeftY, pw*ppL, ph*ppL);
 		return true;
 	}
@@ -1192,14 +1183,28 @@ function drawSegments() {
 		maxHeight = Math.max(maxHeight, py + ph);
 	}

+	canvasPeek = gId("canvasPeek");
+	if (!ctx) {
+		//WLEDMM: add canvas, initialize and set UI
+		var canvas = gId("canvasSegments");
+		canvas.hidden = false;
+		ctx = canvas.getContext('2d');
+		peek(canvasPeek);
+	}
+
+	let windowWidth = Math.min(window.innerWidth*0.98, maxWidth*30);
+	ctx.canvas.width  = ctx.canvas.parentElement.offsetWidth > 800?windowWidth:300; //Mobile and non pc mode gets 300, pc 800
 	ctx.canvas.height = ctx.canvas.width / maxWidth * maxHeight;
+	canvasPeek.width = canvasPeek.parentElement.offsetWidth > 800?windowWidth:300;
+	canvasPeek.height = canvasPeek.width / maxWidth * maxHeight;
 	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-	var ppL = (ctx.canvas.width  - space * 2) / maxWidth; //pixels per led
+
+	var ppL = ctx.canvas.width / maxWidth; //pixels per led
 	// console.log("dim", ctx.canvas.width , maxWidth, ctx.canvas.height , maxHeight, ppL);

 	ctx.lineWidth = 1;
 	ctx.strokeStyle="yellow";
-	ctx.strokeRect(0, 0, ctx.canvas.width, ctx.canvas.height); // add space between panels
+	ctx.strokeRect(0, 0, ctx.canvas.width, ctx.canvas.height);

 	var colorArray = [[255,0,0], [0,255,0], [0,0,255], [255,0,255], [255,165,0], [255,255,0]];
 	//               ["red",     "green",   "blue",    "magenta",   "orange",    "yellow"];
@@ -1211,7 +1216,7 @@ function drawSegments() {

 		ctx.lineWidth = 3;
 		ctx.strokeStyle="white";
-		ctx.strokeRect(topLeftX, topLeftY, pw*ppL, ph*ppL); // add space between panels
+		ctx.strokeRect(topLeftX, topLeftY, pw*ppL, ph*ppL);

 		var fx = parseInt(gId("seg"+p+"fx").value);

@@ -3202,10 +3207,7 @@ function togglePcMode(fromB = false)
 	lastw = wW;

 	//WLEDMM resize segment visualization
-	if (isM) {
-		gId("canvas").width = gId("canvas").parentElement.offsetWidth > 800?window.innerWidth*0.98:300; //WLEDMM Mobile and non pc mode gets 300, pc 800
-		drawSegments();
-	}
+	if (isM) drawSegments();
 }

 function mergeDeep(target, ...sources)
--- a/wled00/data/liveviewws2D.htm
+++ b/wled00/data/liveviewws2D.htm
@@ -5,6 +5,7 @@
 	<meta charset="utf-8">
 	<meta name="theme-color" content="#222222">
 	<title>WLED Live Preview</title>
+	<script src="peek.js"></script> <!--WLEDMM-->
 	<style>
 	body {
 		margin: 0;
@@ -12,65 +13,16 @@
 	</style>
 </head>
 <body>
-	<canvas id="canv"></canvas>
+	<canvas id="canvasPeek"></canvas>
 	<script>
-		var c = document.getElementById('canv');
-		var leds = "";
+		var c = document.getElementById('canvasPeek');
 		var throttled = false;
 		function setCanvas() {
 			c.width  = window.innerWidth * 0.98; //remove scroll bars
 			c.height = window.innerHeight * 0.98; //remove scroll bars
 		}
 		setCanvas();
-		// Check for canvas support
-		var ctx = c.getContext('2d');
-		if (ctx) { // Access the rendering context
-			// use parent WS or open new
-			var ws;
-			try {
-				ws = top.window.ws;
-			} catch (e) {}
-			if (ws && ws.readyState === WebSocket.OPEN) {
-				ws.send("{'lv':true}");
-			} else {
-				ws = new WebSocket((window.location.protocol == "https:"?"wss":"ws")+"://"+document.location.host+"/ws");
-				ws.onopen = ()=>{
-					ws.send("{'lv':true}");
-				}
-			}
-			ws.binaryType = "arraybuffer";
-			ws.addEventListener('message',(e)=>{
-				try {
-					if (toString.call(e.data) === '[object ArrayBuffer]') {
-						let leds = new Uint8Array(event.data);
-						if (leds[0] != 76 || leds[1] != 2 || !ctx) return; //'L', set in ws.cpp
-						let mW = leds[2]; // matrix width
-						let mH = leds[3]; // matrix height
-						let pPL = Math.min(c.width / mW, (c.height-10) / mH); // pixels per LED (width of circle) WLEDMM -10 for prompts
-						let lOf = Math.floor((c.width - pPL*mW)/2); //left offeset (to center matrix)
-						var i = 6;
-						ctx.clearRect(0, 0, c.width, c.height); //WLEDMM
-						function colorAmp(color) {
-							if (color == 0) return 0;
-							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();
-							i+=3;
-						}
-						//WLEDMM show preset and playlist id
-						ctx.fillStyle = `rgb(255,255,255)`;
-						if (leds[4] != 0) ctx.fillText("preset " + leds[4].toString(), lOf, mH*pPL+10);
-						if (leds[5] != 255) ctx.fillText("playlist " + leds[5].toString(), lOf + 70, mH*pPL+10);
-					}
-				} catch (err) {
-					console.error("Peek WS error:",err);
-				} 
-			});
-		}
+		peek(c);
 		// window.resize event listener
 		window.addEventListener('resize', (e)=>{
 			if (!throttled) {     // only run if we're not throttled
--- a/wled00/data/peek.js
+++ b/wled00/data/peek.js
@@ -0,0 +1,51 @@
+function peek(c) {
+	// Check for canvas support
+	var ctx = c.getContext('2d');
+	if (ctx) { // Access the rendering context
+		// use parent WS or open new
+		var ws;
+		try {
+			ws = top.window.ws;
+		} catch (e) {}
+		if (ws && ws.readyState === WebSocket.OPEN) {
+			ws.send("{'lv':true}");
+		} else {
+			ws = new WebSocket((window.location.protocol == "https:"?"wss":"ws")+"://"+document.location.host+"/ws");
+			ws.onopen = ()=>{
+				ws.send("{'lv':true}");
+			}
+		}
+		ws.binaryType = "arraybuffer";
+		ws.addEventListener('message',(e)=>{
+			try {
+				if (toString.call(e.data) === '[object ArrayBuffer]') {
+					let leds = new Uint8Array(e.data);
+					if (leds[0] != 76 || leds[1] != 2 || !ctx) return; //'L', set in ws.cpp
+					let mW = leds[2]; // matrix width
+					let mH = leds[3]; // matrix height
+					let pPL = Math.min(c.width / mW, (c.height-10) / mH); // pixels per LED (width of circle) WLEDMM -10 for prompts
+					let lOf = Math.floor((c.width - pPL*mW)/2); //left offeset (to center matrix)
+					var i = 6;
+					ctx.clearRect(0, 0, c.width, c.height); //WLEDMM
+					function colorAmp(color) {
+						if (color == 0) return 0;
+						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();
+						i+=3;
+					}
+					//WLEDMM show preset and playlist id
+					ctx.fillStyle = `rgb(255,255,255)`;
+					if (leds[4] != 0) ctx.fillText("preset " + leds[4].toString(), lOf, mH*pPL+10);
+					if (leds[5] != 255) ctx.fillText("playlist " + leds[5].toString(), lOf + 70, mH*pPL+10);
+				}
+			} catch (err) {
+				console.error("Peek WS error:",err);
+			} 
+		});
+	}
+}
--- a/wled00/data/settings_2D.htm
+++ b/wled00/data/settings_2D.htm
@@ -187,7 +187,7 @@ Y:<input id="P${i}Y" name="P${i}Y" type="number" min="0" max="255" value="0" oni

 		if (!ctx) {
 			//WLEDMM: add canvas, initialize and set UI
-			var canvas = gId("canvas");
+			var canvas = gId("canvasPanels");
 			canvas.width  = window.innerWidth > 800?800:400; //Mobile gets 400, pc 800
 			canvas.height = canvas.width;
 			ctx = canvas.getContext('2d');
@@ -398,7 +398,7 @@ Y:<input id="P${i}Y" name="P${i}Y" type="number" min="0" max="255" value="0" oni
 		<br>
 		<hr class="sml">
 		☾<br>
-		<canvas id="canvas"></canvas><br> <!--WLEDMM panel visualization-->
+		<canvas id="canvasPanels"></canvas><br> <!--WLEDMM panel visualization-->
 		<div id="MD"></div> <!-- WLEDMM Matrix dimensions -->
 		<br>
 		<div id="advancedBlock">