Simplify file names

2018-12-21 17:23:43 +01:00 · 2018-12-21 17:23:43 +01:00 · a806fabf5c
commit a806fabf5c
parent b6909e4490
7 changed files with 163 additions and 49 deletions
--- a/webui/indexgl.html
+++ b/webui/indexgl.html
@ -0,0 +1,91 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>LJ</title>
+ </head>
+
+<body style="background-color:#222;">
+
+  <!-- mg : canvas to display point list as laser simulator -->
+  <div id = "mgcanvas" class="mgcanvas">
+    <canvas id="canvas" width="500" height="500"></canvas>
+  </div>
+
+<!-- Point list draw -->
+<script type="text/javascript">
+
+	// Store Reference To The Canvas & Set Context
+	var canvas = document.getElementById("canvas");
+	var ctx = canvas.getContext("2d");
+	var lastpoint = { x: 0, y: 0, color: 0};
+
+  // 2 different shapes, one blue one green.
+  var  LJ = "/plframe [(350, 330, 65280), (370, 270, 65280), (430, 270, 65280), (410, 330, 65280), (350, 330, 65280),(300, 300, 255), (350, 250, 255), (400, 250, 255), (400, 300, 255), (300, 300, 255)]";
+  var pl ="";
+  var pl2 = new Array();
+
+  pl = LJ.slice(9);
+  pl2 = eval(pl.replace(/[()]/g, ''));
+ 
+  // Todo : laser point will have black points to go from a polyline to another. Need to discard those black points.
+	function draw() {
+
+    	// Clear Canvas At The Start Of Every Frame
+    	ctx.clearRect(0,0,400,400);
+    	if (pl2.length > 0)
+    		{
+
+        // Begin a new path
+        // 0.7 reduces max coordinates in a more browser compatible resolution.
+    		ctx.beginPath();
+    		ctx.moveTo(pl2[0]*0.7, pl2[1]*0.7);
+        lastpoint.color = pl2[2];
+
+        // Draw n Lines
+        for (var i = 0; i < pl2.length/3; i++) 
+          {
+          
+          // New point has the same color -> add a new line to new point
+          if (pl2[2+(i*3)] === lastpoint.color)
+            {
+            ctx.lineTo(pl2[i*3]*0.7, pl2[1+(i*3)]*0.7);
+            }
+
+          // New point has different color -> stroke with previous color
+          if (pl2[2+(i*3)] != lastpoint.color) 
+            {
+            ctx.strokeStyle = "#"+(lastpoint.color + Math.pow(16, 6)).toString(16).slice(-6);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(pl2[i*3]*0.7, pl2[1+(i*3)]*0.7);
+            }
+
+          // Last point -> stroke with current color
+          if (i === (pl2.length/3)-1 ) 
+            {
+            ctx.moveTo(pl2[i*3]*0.7, pl2[1+(i*3)]*0.7);
+            ctx.strokeStyle = "#"+((pl2[2+(i*3)]) + Math.pow(16, 6)).toString(16).slice(-6);
+            ctx.stroke();
+            }
+
+          // store point for comparison
+          lastpoint.x = pl2[i*3];
+          lastpoint.y = pl2[1+(i*3)];
+          lastpoint.color = pl2[2+(i*3)];
+          }
+
+			} 
+    	// Call Draw Function Again To Create Animation
+    	window.requestAnimationFrame(draw);
+		}
+    	
+	// Initialize The Draw Function
+	draw();
+
+</script>
+</body>
+
+
+</html>