diff --git a/sources/index.html b/sources/index.html
index 0ce41a9..136a8ed 100644
--- a/sources/index.html
+++ b/sources/index.html
@@ -7,6 +7,8 @@
+
+
diff --git a/sources/links/main.css b/sources/links/main.css
index 3bec6b7..cbd351b 100644
--- a/sources/links/main.css
+++ b/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;}
-#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: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;}
-#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;}
-
+#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;}
+#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;}
#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 }
\ No newline at end of file
diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js
index 0d3bf3c..e324ec7 100644
--- a/sources/scripts/dotgrid.js
+++ b/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);
-
- // Markers
- 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);
- }
- }
+ document.body.appendChild(this.guide.el);
+ document.body.appendChild(this.render.el);
// 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());
});
}
diff --git a/sources/scripts/guide.js b/sources/scripts/guide.js
new file mode 100644
index 0000000..f30a162
--- /dev/null
+++ b/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);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/sources/scripts/render.js b/sources/scripts/render.js
new file mode 100644
index 0000000..cfc7b7f
--- /dev/null
+++ b/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
+ }
+}
\ No newline at end of file