Progress

links/fonts.css

@@ -0,0 +1,20 @@
+@font-face {
+    font-family: 'input_mono_regular';
+    src: url('../media/fonts/input_mono_regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'input_mono_medium';
+    src: url('../media/fonts/input_mono_medium.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'input_mono_thin';
+    src: url('../media/fonts/input_mono_thin.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}

links/main.css

@@ -1,15 +1,19 @@
-body { background:#fff; padding:50px;}
+body { background:#fff; padding:50px; font-family: 'input_mono_regular'}
 
-#dotgrid { margin:0px auto; position:relative; border:0px solid white; background:white; overflow: hidden}
+#dotgrid { margin:0px auto; position:relative; border:0px solid white; background:white; overflow: hidden; cursor: none; padding:10px;}
-#dotgrid .marker { width:2px; height:2px; background:#ccc; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;}
+#dotgrid .marker { width:2px; height:2px; background:#ddd; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;}
 #dotgrid .marker.block { background:black; }
-#dotgrid #cursor { width:6px; height:6px; background:red; margin-top:-3px; margin-left:-3px; position:absolute; z-index:25; border-radius:10px;}
+#dotgrid #cursor { width:8px; height:8px; margin-top:-5px; margin-left:-5px; position:absolute; z-index:25; border-radius:5px; border:1px solid black;}
-#dotgrid #cursor_from { width:6px; height:6px; background:white; margin-top:-5px; margin-left:-5px; position:absolute; z-index:25; border-radius:10px; left:-100px;border:2px solid black;}
+#dotgrid #cursor_from { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px;border:1px solid black;}
-#dotgrid #cursor_to { width:6px; height:6px; background:white; margin-top:-5px; margin-left:-5px; position:absolute; z-index:25; border-radius:10px; left:-100px; border:2px solid black;}
+#dotgrid #cursor_to { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;}
+#dotgrid #cursor_end { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;}
+
 input { padding:2px 5px; border-radius:20px; margin:0px auto; display:none;}
-.vector { position:relative; z-index:900; }
+.vector { position:relative; z-index:900;}
-pre { font-family:courier; font-size:11px; color:#000; position:fixed; bottom:20px;}
+pre { font-size:11px; color:#000; position:fixed; bottom:20px; display: none}
-.reference { left:0; }
+.reference { left:0; display: none }
-.settings { right:20px; text-align:right; }
+.settings { right:20px; text-align:right; display: none}
 .settings input { display:inline; background:#fff; width:4em; }
 .settings select { display:inline; background:#fff; }
+
+#interface { max-width: 295px;margin:0px auto;font-size: 11px;line-height: 30px; text-transform: uppercase;}

scripts/dotgrid.js

@@ -19,10 +19,18 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
   var cursor = null;
   var cursor_from = null;
   var cursor_to = null;
+  var cursor_end = null;
 
   var from = null;
   var to = null;
-  var vector_element = null;
+  var end = null;
+
+  this.svg_el = null;
+
+  this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  this.segments = [];
+  this.interface = document.createElement("div");
+  this.interface.id = "interface";
 
   this.install = function()
   {
@@ -32,14 +40,15 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     this.element.style.width = this.width;
     this.element.style.height = this.height;
     document.body.appendChild(this.element);
+    document.body.appendChild(this.interface);
 
     // Markers
-    for (var x = this.grid_x - 1; x >= 0; x--) {
+    for (var x = this.grid_x; x >= 0; x--) {
-      for (var y = this.grid_y - 1; y >= 0; y--) {
+      for (var y = this.grid_y; y >= 0; y--) {
         var marker = document.createElement("div");
         marker.setAttribute("class",(x % this.block_x == 0 && y % this.block_y == 0 ? "marker block" : "marker"));
-        marker.style.left = parseInt(x * this.grid_width + (this.grid_width/2));
+        marker.style.left = parseInt(x * this.grid_width + (this.grid_width/2)) +5;
-        marker.style.top = parseInt(y * this.grid_height + (this.grid_height/2));
+        marker.style.top = parseInt(y * this.grid_height + (this.grid_height/2)) +5;
         this.element.appendChild(marker);
       }
     }
@@ -57,26 +66,31 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     cursor_to.id = "cursor_to";
     this.element.appendChild(cursor_to);
 
+    cursor_end = document.createElement("div");
+    cursor_end.id = "cursor_end";
+    this.element.appendChild(cursor_end);
+
     // Vector
-    vector_element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    vector_element.setAttribute("class","vector");
+    this.svg_el.setAttribute("class","vector");
-    vector_element.setAttribute("width",this.width+"px");
+    this.svg_el.setAttribute("width",this.width+"px");
-    vector_element.setAttribute("height",this.height+"px");
+    this.svg_el.setAttribute("height",this.height+"px");
-    vector_element.setAttribute("xmlns","http://www.w3.org/2000/svg");
+    this.svg_el.setAttribute("xmlns","http://www.w3.org/2000/svg");
-    vector_element.setAttribute("baseProfile","full");
+    this.svg_el.setAttribute("baseProfile","full");
-    vector_element.setAttribute("version","1.1");
+    this.svg_el.setAttribute("version","1.1");
-    vector_element.style.width = this.width;
+    this.svg_el.style.width = this.width;
-    vector_element.style.height = this.height;
+    this.svg_el.style.height = this.height;
-    vector_element.style.stroke = this.color;
+    this.svg_el.style.stroke = this.color;
-    vector_element.style.strokeWidth = this.thickness;
+    this.svg_el.style.strokeWidth = this.thickness;
-    vector_element.style.fill = "none";
+    this.svg_el.style.fill = "none";
-    vector_element.style.strokeLinecap = this.linecap;
+    this.svg_el.style.strokeLinecap = this.linecap;
-    this.element.appendChild(vector_element);
+    this.element.appendChild(this.svg_el);
+
+    this.svg_el.appendChild(this.path);    
   }
 
   // Cursor
 
-
   this.mouse_down = function(e)
   {
   }
@@ -95,10 +109,12 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     var pos = this.position_in_grid(e.clientX,e.clientY);
     pos = this.position_on_grid(pos[0],pos[1]);
 
+    pos = [pos[0]+10,pos[1]-10]
+    
     if(from === null){ this.set_from(pos); }
     else if(to === null){ this.set_to(pos); }
-    else{  }
+    else{ this.set_end(pos); }
-    
+    this.draw();
   }
 
   // Setters
@@ -107,31 +123,80 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
   {
     from = pos;
 
-    cursor_from.style.left = -pos[0];
+    cursor_from.style.left = -pos[0] + 10;
-    cursor_from.style.top = pos[1];
+    cursor_from.style.top = pos[1] + 10;
   }
 
   this.set_to = function(pos)
   {
-    cursor_to.style.left = -pos[0];
+    cursor_to.style.left = -pos[0] + 10;
-    cursor_to.style.top = pos[1];
+    cursor_to.style.top = pos[1] + 10;
 
     to = pos;
   }
 
+  this.set_end = function(pos)
+  {
+    cursor_end.style.left = -pos[0] + 10;
+    cursor_end.style.top = pos[1] + 10;
+
+    end = pos;
+  }
+
+  this.mod_thickness = function(mod)
+  {
+    this.thickness += mod;
+    this.draw();
+  }
+
+  this.mod_linecap_index = 1;
+
+  this.mod_linecap = function(mod)
+  {
+    var a = ["butt","square","round"];
+    this.mod_linecap_index += 1;
+    this.linecap = a[this.mod_linecap_index % a.length];
+    this.draw();
+  }
+
+  this.mod_move = function(x,y)
+  {
+    if(!to && !end){
+      this.set_from([from[0]+(x*10),from[1]+(y*10)])
+    }
+    this.draw();
+  }
+
+  this.draw = function()
+  {
+    var d = "";
+    var prev = "";
+    for(id in this.segments){
+      var segment = this.segments[id];
+      d += segment.to_segment(prev)+" ";
+      prev = segment;
+    }
+
+    this.path.setAttribute("d",d);
+
+    this.svg_el.style.width = this.width;
+    this.svg_el.style.height = this.height;
+    this.svg_el.style.stroke = this.color;
+    this.svg_el.style.strokeLinecap = this.linecap;
+    this.svg_el.style.strokeWidth = this.thickness;
+
+    this.update_interface();
+  }
+
   // Draw
-  this.draw_line = function()
+  this.add_line = function()
   {
     if(from === null || to === null){ return; }
 
-    var s = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    var end_point = end ? new Pos(end[0] * -1,end[1]) : null;
-    s.setAttribute('x1', -from[0]);
+    this.segments.push(new Path_Line(new Pos(from[0] * -1,from[1]),new Pos(to[0] * -1,to[1]),end_point));
-    s.setAttribute('y1', from[1]);
-    s.setAttribute('x2', -to[0]);
-    s.setAttribute('y2', to[1]);
-
-    vector_element.appendChild(s);
 
+    this.draw();
     reset();
   }
 
@@ -139,10 +204,20 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
   {
     if(from === null || to === null){ return; }
 
-    var s = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    var end_point = end ? new Pos(end[0] * -1,end[1]) : null;
-    s.setAttribute("d","M"+(-from[0])+","+(from[1])+" A"+(to[0] - from[0])+","+(to[1] - from[1])+" 0 "+orientation+" "+(-to[0])+","+(to[1])+"");
+    this.segments.push(new Path_Arc(new Pos(from[0] * -1,from[1]),new Pos(to[0] * -1,to[1]),orientation,end_point));
-    vector_element.appendChild(s);
 
+    this.draw();
+    reset();
+  }
+
+  this.draw_bezier = function()
+  {
+    if(from === null || to === null){ return; }  
+
+    this.segments.push(new Path_Bezier(new Pos(from[0] * -1,from[1]),new Pos(to[0] * -1,to[1]),new Pos(end[0] * -1,end[1])));
+
+    this.draw();
     reset();
   }
 
@@ -153,7 +228,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     s.setAttribute("cy",from[1]);
     s.setAttribute("r","2");
     s.setAttribute("fill","black");
-    vector_element.appendChild(s);
+    this.svg_el.appendChild(s);
 
     reset();
   }
@@ -166,7 +241,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     s.setAttribute("cx",-from[0]);
     s.setAttribute("cy",from[1]);
     s.setAttribute("r",(from[0] - to[0]));
-    vector_element.appendChild(s);
+    this.svg_el.appendChild(s);
 
     reset();
   }
@@ -180,7 +255,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     s.setAttribute("y",from[1]);
     s.setAttribute("width",Math.abs(to[0]) - Math.abs(from[0]));
     s.setAttribute("height",Math.abs(to[1]) - Math.abs(from[1]));
-    vector_element.appendChild(s);
+    this.svg_el.appendChild(s);
 
     reset();
   }
@@ -194,17 +269,20 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
   {
     from = null;
     to = null;
+    end = null;
     cursor_from.style.left = -100;
     cursor_from.style.top = -100;
     cursor_to.style.left = -100;
     cursor_to.style.top = -100;
+    cursor_end.style.left = -100;
+    cursor_end.style.top = -100;
   }
 
   this.erase = function()
   {
     this.reset();
-    if(vector_element.lastChild === null){ return; }
+    this.segments.pop();
-    vector_element.removeChild(vector_element.lastChild);
+    this.draw();
   }
 
   this.export = function()
@@ -212,7 +290,26 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     var w = window.open('about:blank');
     w.document.write("<title>Export</title>");
     w.document.write("<body></body>");
-    w.document.body.innerText += vector_element.outerHTML;
+    w.document.body.innerText += this.svg_el.outerHTML;
+  }
+
+  this.update_interface = function()
+  {
+    var html = "";
+
+    html += "~"+this.thickness+" ";
+    html += "/"+this.linecap+" ";
+
+    if(from){ html += ">" }
+    if(to){ html += ">" }
+    if(end){ html += ">" }
+
+    html += " "
+
+    if(to){ html += "aA sS d f" }
+    if(end){ html += ">" }
+
+    this.interface.innerHTML = html;
   }
 
   // Normalizers
@@ -224,23 +321,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
 
   this.position_on_grid = function(x,y)
   {
-    x = parseInt(x/this.grid_width) * this.grid_width - (this.grid_width/2);
+    x = parseInt(x/this.grid_width) * this.grid_width - (this.grid_width/2) + 5;
-    y = parseInt(y/this.grid_height) * this.grid_height + (this.grid_height/2);
+    y = parseInt(y/this.grid_height) * this.grid_height + (this.grid_height/2) +5;
     return [parseInt(x),parseInt(y)];
   }
-  
-  // Settings
-  
-  this.update_style = function(attribute, value) {
-    switch(attribute) {
-      case "strokeWidth":
-        vector_element.style.strokeWidth = value;
-        break;
-      case "strokeLinecap":
-        vector_element.style.strokeLinecap = value;
-        break;
-      case "stroke":
-        vector_element.style.stroke = value;
-    }
-  }
 }

scripts/keyboard.js

@@ -2,19 +2,31 @@ function Keyboard()
 {
   this.listen = function(event)
   { 
-    console.log(event.keyCode);
+    console.log(event.keyCode)
     switch (event.keyCode) {
       case 65 : dotgrid.draw_arc(event.shiftKey ? "1,1" : "0,1"); break;
       case 83 : dotgrid.draw_arc(event.shiftKey ? "1,0" : "0,0"); break;
-      case 68 : dotgrid.draw_line(); break;
+      case 68 : dotgrid.add_line(); break;
+      case 70 : dotgrid.draw_bezier(); break;
+      case 187 : dotgrid.mod_thickness(1); break;
+      case 189 : dotgrid.mod_thickness(-1); break;
+      case 191 : dotgrid.mod_linecap(1); break;
 
       case 81 : dotgrid.reset(); break;
+      case 27 : dotgrid.reset(); break;
       case 87 : dotgrid.erase(); break;
+      case 8 : dotgrid.erase(); break;
       case 69 : dotgrid.export(); break;
 
       case 90 : dotgrid.draw_dot(); break;
       case 88 : dotgrid.draw_circle(); break;
       case 67 : dotgrid.draw_rect(); break;
+
+      case 38 : dotgrid.mod_move(0,-1); break;
+      case 40 : dotgrid.mod_move(0,1); break;
+      case 37 : dotgrid.mod_move(1,0); break;
+      case 39 : dotgrid.mod_move(-1,0); break;
     }
+    dotgrid.draw();
   }
 }

scripts/path_arc.js

@@ -0,0 +1,32 @@
+function Path_Arc(from,to,orientation,end)
+{
+  this.from = from;
+  this.to = to;
+  this.orientation = orientation;
+  this.end = end;
+
+  this.to_segment = function(prev)
+  {
+    var html = ""
+
+    if(!prev){
+      html += "M"+this.from+" ";  
+    }
+    else if(prev){
+      if(prev.to.x != this.from.x && prev.to.y != this.from.y && !prev.end){
+        html += "M"+this.from+" ";  
+      }
+      else if(prev.end && prev.end.x != this.from.x && prev.end.y != this.from.y){
+        html += "M"+this.from+" ";  
+      }
+    }
+
+    html += "A"+this.to.sub(this.from)+" 0 "+orientation+" "+this.to+" ";
+
+    if(this.end){
+      html += "A"+this.end.sub(this.to)+" 0 "+orientation+" "+this.end+" ";
+    }
+
+    return html 
+  }
+}

scripts/path_bezier.js

@@ -0,0 +1,25 @@
+function Path_Bezier(from,to,end)
+{
+  this.from = from;
+  this.to = to;
+  this.end = end;
+
+  this.to_segment = function(prev)
+  {
+    var html = ""
+
+    if(!prev){
+      html += "M"+this.from+" ";  
+    }
+    else if(prev){
+      if(prev.to.x != this.from.x && prev.to.y != this.from.y && !prev.end){
+        html += "M"+this.from+" ";  
+      }
+      else if(prev.end && prev.end.x != this.from.x && prev.end.y != this.from.y){
+        html += "M"+this.from+" ";  
+      }
+    }
+
+    return html += "Q"+this.to+" "+this.end+" "
+  }
+}

scripts/path_line.js

@@ -0,0 +1,31 @@
+function Path_Line(from,to,end = null)
+{
+  this.from = from;
+  this.to = to;
+  this.end = end;
+
+  this.to_segment = function(prev)
+  {
+    var html = ""
+
+    if(!prev){
+      html += "M"+this.from+" ";  
+    }
+    else if(prev){
+      if(prev.to.x != this.from.x && prev.to.y != this.from.y && !prev.end){
+        html += "M"+this.from+" ";  
+      }
+      else if(prev.end && prev.end.x != this.from.x && prev.end.y != this.from.y){
+        html += "M"+this.from+" ";  
+      }
+    }
+
+    html += "L"+this.to+" "
+
+    if(this.end){
+      html += "L"+this.end+" "
+    }
+
+    return html
+  }
+}

scripts/pos.js

@@ -0,0 +1,15 @@
+function Pos(x,y)
+{
+  this.x = x;
+  this.y = y;
+
+  this.toString = function()
+  {
+    return x+","+y;
+  }
+
+  this.sub = function(pos2)
+  {
+    return new Pos(this.x - pos2.x,this.y - pos2.y)
+  }
+}

template.glyph.html

@@ -1,31 +0,0 @@
-<html>
-  <head>
-    <script type="text/javascript" src="scripts/dotgrid.js"></script>
-    <script type="text/javascript" src="scripts/keyboard.js"></script>
-    
-    <link rel="stylesheet" type="text/css" href="links/reset.css"/>
-    <link rel="stylesheet" type="text/css" href="links/fonts.css"/>
-    <link rel="stylesheet" type="text/css" href="links/main.css"/>
-    <title>Dotgrid(Icon)</title>
-  </head>
-  <body>
-    <pre>
-      q  <b>CLEAR</b>
-      w  <b>DELETE LAST</b>
-      e  <b>EXPORT</b>
-
-      aA <b>CLOCKWISE</b>
-      sS <b>COUNTERWISE</b>
-      d  <b>LINE</b>
-    </pre>
-    <script>
-      dotgrid = new Dotgrid(200,200,25,25,4,4, 2,"square","#000000");
-      dotgrid.install();
-      var keyboard = new Keyboard();
-      document.onkeyup = function myFunction(event){ keyboard.listen(event); };
-      document.addEventListener('mousedown', function(e){ dotgrid.mouse_down(e); }, false);
-      document.addEventListener('mousemove', function(e){ dotgrid.mouse_move(e); }, false);
-      document.addEventListener('mouseup', function(e){ dotgrid.mouse_up(e);}, false);
-    </script>
-  </body>
-</html>

template.graphic.html

@@ -1,31 +0,0 @@
-<html>
-  <head>
-    <script type="text/javascript" src="scripts/dotgrid.js"></script>
-    <script type="text/javascript" src="scripts/keyboard.js"></script>
-    
-    <link rel="stylesheet" type="text/css" href="links/reset.css"/>
-    <link rel="stylesheet" type="text/css" href="links/fonts.css"/>
-    <link rel="stylesheet" type="text/css" href="links/main.css"/>
-    <title>Dotgrid(Icon)</title>
-  </head>
-  <body>
-    <pre>
-      q  <b>CLEAR</b>
-      w  <b>DELETE LAST</b>
-      e  <b>EXPORT</b>
-
-      aA <b>CLOCKWISE</b>
-      sS <b>COUNTERWISE</b>
-      d  <b>LINE</b>
-    </pre>
-    <script>
-      dotgrid = new Dotgrid(200,200,25,25,4,4,5,"square","#000000");
-      dotgrid.install();
-      var keyboard = new Keyboard();
-      document.onkeyup = function myFunction(event){ keyboard.listen(event); };
-      document.addEventListener('mousedown', function(e){ dotgrid.mouse_down(e); }, false);
-      document.addEventListener('mousemove', function(e){ dotgrid.mouse_move(e); }, false);
-      document.addEventListener('mouseup', function(e){ dotgrid.mouse_up(e);}, false);
-    </script>
-  </body>
-</html>

template.icon.html

@@ -1,8 +1,11 @@
 <html>
   <head>
+    <script type="text/javascript" src="scripts/pos.js"></script>
+    <script type="text/javascript" src="scripts/path_line.js"></script>
+    <script type="text/javascript" src="scripts/path_arc.js"></script>
+    <script type="text/javascript" src="scripts/path_bezier.js"></script>
     <script type="text/javascript" src="scripts/dotgrid.js"></script>
     <script type="text/javascript" src="scripts/keyboard.js"></script>
-    
     <link rel="stylesheet" type="text/css" href="links/reset.css"/>
     <link rel="stylesheet" type="text/css" href="links/fonts.css"/>
     <link rel="stylesheet" type="text/css" href="links/main.css"/>
@@ -13,13 +16,12 @@
       q  <b>CLEAR</b>
       w  <b>DELETE LAST</b>
       e  <b>EXPORT</b>
-
       aA <b>CLOCKWISE</b>
       sS <b>COUNTERWISE</b>
       d  <b>LINE</b>
     </pre>
     <script>
-      dotgrid = new Dotgrid(300,300,31,31,5,5, 10,"square","#000000");
+      dotgrid = new Dotgrid(300,300,30,30,5,5, 10,"square","#000000");
       dotgrid.install();
       var keyboard = new Keyboard();
       document.onkeyup = function myFunction(event){ keyboard.listen(event); };

template.interface.html

@@ -1,67 +0,0 @@
-<html>
-  <head>
-    <script type="text/javascript" src="scripts/dotgrid.js"></script>
-    <script type="text/javascript" src="scripts/keyboard.js"></script>
-    
-    <link rel="stylesheet" type="text/css" href="links/reset.css"/>
-    <link rel="stylesheet" type="text/css" href="links/fonts.css"/>
-    <link rel="stylesheet" type="text/css" href="links/main.css"/>
-    <title>Dotgrid(Interface)</title>
-  </head>
-  <body>
-    <pre class="reference">
-      q  <b>CLEAR</b>
-      w  <b>DELETE LAST</b>
-      e  <b>EXPORT</b>
-
-      aA <b>CLOCKWISE</b>
-      sS <b>COUNTERWISE</b>
-      d  <b>LINE</b>
-
-
-      z  <b>DOT</b>
-      x  <b>CIRCLE</b>
-      c  <b>--</b>
-    </pre>
-    
-    <pre class="settings">
-      <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 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>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">
-      <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>
-      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();
-      document.onkeyup = function myFunction(event){ keyboard.listen(event); };
-      document.addEventListener('mousedown', function(e){ dotgrid.mouse_down(e); }, false);
-      document.addEventListener('mousemove', function(e){ dotgrid.mouse_move(e); }, false);
-      document.addEventListener('mouseup', function(e){ dotgrid.mouse_up(e);}, false);
-    </script>
-  </body>
-</html>