Implemented PNG export

sources/index.html

@@ -7,6 +7,8 @@
     <script type="text/javascript" src="scripts/path_close.js"></script>
     <script type="text/javascript" src="scripts/dotgrid.js"></script>
     <script type="text/javascript" src="scripts/keyboard.js"></script>
+    <script type="text/javascript" src="scripts/guide.js"></script>
+    <script type="text/javascript" src="scripts/render.js"></script>
     <script type="text/javascript" src="scripts/theme.js"></script>
     <link rel="stylesheet" type="text/css" href="links/reset.css"/>
     <link rel="stylesheet" type="text/css" href="links/fonts.css"/>

sources/links/main.css

@@ -1,18 +1,18 @@
 body { background:#fff; padding:30px; font-family: 'input_mono_regular'; -webkit-user-select: none;-webkit-app-region: drag; overflow: hidden;}
 
 #dotgrid { margin:0px auto; position:relative; overflow: hidden; padding:10px;-webkit-app-region: no-drag;}
-#dotgrid .marker { width:2px; height:2px; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;}
+#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 { width:8px; height:8px; margin-top:-5px; margin-left:-5px; position:absolute; z-index:25; border-radius:5px; border:1px solid black;}
+#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_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;}
+#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_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;}
+#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;}
-#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;}
-
 #interface { max-width: 295px;margin:0px auto;font-size: 11px;line-height: 30px; text-transform: uppercase; margin-top:20px;-webkit-app-region: no-drag;}
+#guide { position: absolute;top: 30px;left: calc(50vw - 160px);padding: 10px;     width: 300px;height: 300px;}
+#guide .marker { width:2px; height:2px; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;}
+#render { display: none }
 
 .icon { width:25px; height:25px; margin-left:-5px; margin-right:0px; opacity: 0.5}
 .icon.right { float:right;}
 .icon.inactive { opacity: 0.1 !important }
-
 .icon:hover { cursor: pointer; opacity: 1 }
 
 svg.vector { z-index: 1000;position: relative  }

sources/scripts/dotgrid.js

@@ -38,6 +38,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
   this.mirror = false;
   this.fill = false;
 
+  this.guide = new Guide();
+  this.render = new Render();
+
   this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
   this.segments = [];
   this.interface = document.createElement("div");
@@ -47,17 +50,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
   {
     document.body.appendChild(this.element);
     document.body.appendChild(this.interface);
-
+    document.body.appendChild(this.guide.el);
-    // Markers
+    document.body.appendChild(this.render.el);
-    for (var x = this.grid_x; x >= 0; x--) {
-      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 bm" : "marker bl"));
-        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)) +5;
-        this.element.appendChild(marker);
-      }
-    }
 
     // Cursors
     this.cursor = document.createElement("div");
@@ -104,6 +98,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     this.draw();
 
     this.theme.start();
+    this.guide.start();
   }
 
   // Cursor
@@ -254,6 +249,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
 
     this.offset_el.setAttribute("transform","translate("+(this.offset.x)+","+(this.offset.y)+")")
 
+    this.render.draw();
     this.update_interface();
   }
 
@@ -354,6 +350,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
       fs.writeFile(fileName+".svg", dotgrid.svg_el.outerHTML, (err) => {
         if(err){ alert("An error ocurred creating the file "+ err.message); return; }
       });
+      fs.writeFile(fileName+'.png', dotgrid.render.buffer());
     });
   }
 

sources/scripts/guide.js

@@ -0,0 +1,21 @@
+function Guide()
+{
+  this.el = document.createElement("div");
+
+  // Guide
+  this.el.id = "guide";
+
+  this.start = function()
+  {
+    // Markers
+    for (var x = dotgrid.grid_x; x >= 0; x--) {
+      for (var y = dotgrid.grid_y; y >= 0; y--) {
+        var marker = document.createElement("div");
+        marker.setAttribute("class",(x % dotgrid.block_x == 0 && y % dotgrid.block_y == 0 ? "marker bm" : "marker bl"));
+        marker.style.left = parseInt(x * dotgrid.grid_width + (dotgrid.grid_width/2)) +5;
+        marker.style.top = parseInt(y * dotgrid.grid_height + (dotgrid.grid_height/2)) +5;
+        this.el.appendChild(marker);
+      }
+    }
+  }
+}

sources/scripts/render.js

@@ -0,0 +1,27 @@
+function Render()
+{
+  this.el = document.createElement("canvas"); this.el.id = "render";
+  this.img = document.createElement("img");
+
+  this.el.width = 300; this.el.height = 300;
+
+  this.draw = function()
+  {
+    var xml = new XMLSerializer().serializeToString(dotgrid.svg_el);
+    var svg64 = btoa(xml);
+    var b64Start = 'data:image/svg+xml;base64,';
+    var image64 = b64Start + svg64;
+    this.img.src = image64;
+    this.el.getContext('2d').clearRect(0, 0, 300, 300);
+    this.el.getContext('2d').drawImage(this.img, 0, 0);
+  }
+
+  this.buffer = function()
+  {
+    var fs = require('fs');
+    var data = this.el.toDataURL('image/png').replace(/^data:image\/\w+;base64,/, "");
+    var buf = new Buffer(data, 'base64');
+
+    return buf
+  }
+}