From b63d6ce4f196de74a647787626fbaeaea40f329c Mon Sep 17 00:00:00 2001
From: eelfroth <jacob@eelfroth.com>
Date: Fri, 6 Jan 2017 04:24:08 +0100
Subject: [PATCH] added grid settings

---
 template.interface.html | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)
diff --git a/template.interface.html b/template.interface.html
index 599499f..f5e61bf 100644
--- a/template.interface.html
+++ b/template.interface.html
@@ -9,7 +9,6 @@
     <title>Dotgrid(Interface)</title>
   </head>
   <body>
-    <body>
     <pre class="reference">
       q  <b>CLEAR</b>
       w  <b>DELETE LAST</b>
@@ -26,18 +25,34 @@
     </pre>
     
     <pre class="settings">
-      <b>THICKNESS</b> <input type="number" value=1 min="0" step="0.1" 
+      <b>THICKNESS</b> <input id="thickness" type="number" value=5 min="0" step="0.1" 
         oninput="dotgrid.update_style('strokeWidth', this.value);">
-      <b>LINECAP</b> <select
+      <b>LINECAP</b> <select id="linecap"
         onchange="dotgrid.update_style('strokeLinecap', this.value);">
         <option value="butt">butt</option>
         <option value="round">round</option>
         <option value="square">square</option>
       </select>
+      
+      
+      <b>WIDTH</b> <input id="width" type="number" value="490" min="1" step="1">
+      <b>HEIGHT</b> <input id="height" type="number" value="490" min="1" step="1">
+      <b>GRID</b> <input id="grid" type="number" value="10" min="5" step="1">
+      <b>BLOCK</b> <input id="block" type="number" value="6" min="0" step="1">
+      <button onclick="document.body.removeChild(document.getElementById('dotgrid')); dotgrid = new_grid(); dotgrid.install();">NEW GRID</button>
     </pre>
     
     <script>
-      dotgrid = new Dotgrid(320,568,31,61,6,6, 1,"square","#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,
+                            "#000000"); };
+      dotgrid = new_grid();
       dotgrid.install();
       var keyboard = new Keyboard();
       document.onkeyup = function myFunction(event){ keyboard.listen(event); };
