Dotgrid Live!

desktop/sources/scripts/dotgrid.js

@@ -63,22 +63,30 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
   {
     if(dotgrid.tool.length() < 1){ console.log("Nothing to save"); return; }
 
-    dialog.showSaveDialog({
-      title:"Save to .grid",
-      filters: [{name: "Dotgrid", extensions: ["grid", "dot"]}]
-    },(fileName) => {
+    if(!dialog){ this.save_web(content); return; }
+
+    dialog.showSaveDialog({title:"Save to .grid",filters: [{name: "Dotgrid", extensions: ["grid", "dot"]}]},(fileName) => {
       if (fileName === undefined){ return; }
       fileName = fileName.substr(-5,5) != ".grid" ? fileName+".grid" : fileName;
       fs.writeFileSync(fileName, content);
-      this.guide.refresh()
+      dotgrid.guide.refresh()
     });
   }
 
+  this.save_web = function(content)
+  {
+    console.info("Web Save");
+    var win = window.open("", "Save", `toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=480,top=${screen.height-200},left=${screen.width-640}`);
+    win.document.body.innerHTML = `<p>Copy this content into a .grid file, and later drag it over this window to load it again.</p><pre>${content}</pre>`;
+  }
+
   this.render = function(content = this.renderer.to_png({width:dotgrid.tool.settings.size.width*2,height:dotgrid.tool.settings.size.height*2}), ready = null, size = null)
   {
     if(!ready){return; }
     if(dotgrid.tool.length() < 1){ console.log("Nothing to render"); return; }
 
+    if(!dialog){ dotgrid.render_web(content); return; }
+
     dialog.showSaveDialog({title:"Render to .png"},(fileName) => {
       if (fileName === undefined){ return; }
       fileName = fileName.substr(-4,4) != ".png" ? fileName+".png" : fileName;
@@ -87,10 +95,19 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
     });
   }
 
+  this.render_web = function(content,window)
+  {
+    console.info("Web Render");
+
+    // Handled in Renderer
+  }
+
   this.export = function(content = this.renderer.to_svg())
   {
     if(dotgrid.tool.length() < 1){ console.log("Nothing to export"); return; }
 
+    if(!dialog){ this.export_web(content); return; }
+
     dialog.showSaveDialog({title:"Export to .svg"},(fileName) => {
       if (fileName === undefined){ return; }
       fileName = fileName.substr(-4,4) != ".svg" ? fileName+".svg" : fileName;
@@ -99,6 +116,13 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
     });
   }
 
+  this.export_web = function(content)
+  {
+    console.info("Web Export");
+    var win = window.open("", "Save", `toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=480,top=${screen.height-200},left=${screen.width-640}`);
+    win.document.body.innerHTML = `${dotgrid.renderer.to_svg()}`;
+  }
+
   // Basics
 
   this.set_size = function(size = {width:300,height:300},interface = true,scale = 1)
@@ -174,6 +198,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
 
     dotgrid.interface.refresh();
     dotgrid.guide.refresh();
+    document.title = `Dotgrid — ${size.width}x${size.height}`
   }
 
   this.drag = function(e)

desktop/sources/scripts/renderer.js

@@ -50,6 +50,8 @@ function Renderer()
 
   this.to_png = function(size = dotgrid.tool.settings.size,callback = dotgrid.render)
   {
+    if(!dialog){ return this.to_png_web(size); }
+
     this.refresh();
 
     var xml = new XMLSerializer().serializeToString(this.svg_el);
@@ -78,6 +80,33 @@ function Renderer()
     callback(null,buffer,size)
   }
 
+  this.to_png_web = function(size)
+  {
+    console.log('Making!');
+
+    this.refresh();
+
+    var xml = new XMLSerializer().serializeToString(this.svg_el);
+    var svg64 = btoa(xml);
+    var b64Start = 'data:image/svg+xml;base64,';
+    var image64 = b64Start + svg64;
+
+    var canvas = document.createElement("canvas");
+    var ctx = canvas.getContext('2d');
+    
+    var win = window.open('about:blank','image from canvas');
+    var img = new Image;
+
+    canvas.width = size.width*2; 
+    canvas.height = size.height*2;
+
+    img.onload = function(){
+      ctx.drawImage(img, 0, 0, size.width*2, size.height*2);
+      win.document.write(`<img width='${size.width/2}' height='${size.height/2}' src='${canvas.toDataURL("image/png")}' alt='from canvas'/>`);
+    };
+    img.src = image64;
+  }
+
   this.to_svg = function()
   {
     this.refresh();