Option to view grid as circles added.

flavio-fernandes · Apr 26, 2011 · 47c4f5c · 47c4f5c
1 parent 5855ec1
commit 47c4f5c
Showing 1 changed file with 20 additions and 3 deletions.
diff --git a/Utilities/Image drawing/LED_image_drawing_utility.html b/Utilities/Image drawing/LED_image_drawing_utility.html
@@ -25,7 +25,7 @@
 var sizeOfGutter = 2; // Size of gutter between LEDs
 var colorOff = "#000";
 var colorOn = "#F00";
-var colorGutter = "#CCC";
+var colorGutter = "#666";
 
 // Variables
 var canvasNode; // Main canvas node
@@ -35,9 +35,11 @@
 
 var width;
 var height;
+var renderCircle = false;
 
 function initialize(){
 	updateCanvasSize();
+	updateUseCircle();
 	$('changecanvas').addEventListener("click", updateCanvasSize, false);
 	$('loadimage').addEventListener("click", loadImage, false);
 }
@@ -140,7 +142,13 @@
 	for(var i=0; i<width; ++i)
 		for(var j=0; j<height; ++j)
 			if(map[i][j])
-				cx.fillRect(i*sizeOfLED, j*sizeOfLED, sizeOfLED-1, sizeOfLED-1);
+				if(renderCircle) {
+					cx.beginPath();
+					cx.arc((i+0.5)*sizeOfLED, (j+0.5)*sizeOfLED, 0.45*sizeOfLED, 0, Math.PI * 2, false);
+				    cx.closePath();
+					cx.fill();
+				} else
+					cx.fillRect(i*sizeOfLED, j*sizeOfLED, sizeOfLED-1, sizeOfLED-1);
 
 
 	cx.strokeStyle = colorGutter;
@@ -161,14 +169,23 @@
 	return document.getElementById(e);
 }
 
+function updateUseCircle() {	
+	if($("chkUseCircle").checked)
+		renderCircle = true;
+	else 
+		renderCircle = false;
+
+	canvasRender();
+}
+
 window.addEventListener("load", initialize, false);
 </script>
 </head>
 
 <body>
 <div id="main"></div><br />
 <div id="bin">
-Width: <input type="text" id="wid" value="8" /> Height: <input type="text" id="hei" value="8" /> <input type="button" value="Change" id="changecanvas" />  <input type="button" value="Load" id="loadimage" /><br /><br />
+Width: <input type="text" id="wid" value="8" /> Height: <input type="text" id="hei" value="8" /> <input type="button" value="Change" id="changecanvas" /> <input type="button" value="Load" id="loadimage" /> <input type="checkbox" id="chkUseCircle" onclick="updateUseCircle()" />Use Circle<br /><br />
 <textarea id="binary_out" style="width: 100%; height: 200px;"></textarea></div>
 </body>
 </html>