From 2fcf524e79db57e2e38c84f37e3da032f03d9918 Mon Sep 17 00:00:00 2001
From: eelfroth <jacob@eelfroth.com>
Date: Fri, 6 Jan 2017 04:38:24 +0100
Subject: [PATCH] added color selector

---
 scripts/dotgrid.js      |  3 +++
 template.interface.html | 21 ++++++++++++---------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/scripts/dotgrid.js b/scripts/dotgrid.js
index e6b5d9e..485d39f 100644
--- a/scripts/dotgrid.js
+++ b/scripts/dotgrid.js
@@ -237,6 +237,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
         break;
       case "strokeLinecap":
         vector_element.style.strokeLinecap = value;
+        break;
+      case "stroke":
+        vector_element.style.stroke = value;
     }
   }
 }
\ No newline at end of file
diff --git a/template.interface.html b/template.interface.html
index f5e61bf..82db721 100644
--- a/template.interface.html
+++ b/template.interface.html
@@ -33,6 +33,7 @@
         <option value="round">round</option>
         <option value="square">square</option>
       </select>
+      <b>COLOR</b> <input id="color" type="color" value="#000000" onchange="dotgrid.update_style('stroke', this.value);">
       
       
       <b>WIDTH</b> <input id="width" type="number" value="490" min="1" step="1">
@@ -43,15 +44,17 @@
     </pre>
     
     <script>
-      var new_grid = function() { return new Dotgrid(document.getElementById('width').value, 
-                            document.getElementById('height').value,
-                            Math.round( document.getElementById('width').value / document.getElementById('grid').value ),
-                            Math.round( document.getElementById('height').value / document.getElementById('grid').value ),
-                            document.getElementById('block').value,
-                            document.getElementById('block').value,
-                            document.getElementById('thickness').value, 
-                            document.getElementById('linecap').value,
-                            "#000000"); };
+      var new_grid = function() { 
+        return new Dotgrid(document.getElementById('width').value, 
+                           document.getElementById('height').value,
+                           Math.round( document.getElementById('width').value / document.getElementById('grid').value ),
+                           Math.round( document.getElementById('height').value / document.getElementById('grid').value ),
+                           document.getElementById('block').value,
+                           document.getElementById('block').value,
+                           document.getElementById('thickness').value, 
+                           document.getElementById('linecap').value,
+                           document.getElementById('color').value); 
+      };
       dotgrid = new_grid();
       dotgrid.install();
       var keyboard = new Keyboard();