Atlas48/pointvec
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Dotgrid Live!

Browse Source
This commit is contained in:
Devine Lu Linvega 2018-08-18 09:34:24 +12:00
parent 2b55e0ff62
commit 3c218a8a58
5 changed files with 106 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
desktop/sources/index.html
View File

@ -1,5 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<html> <html>
<head> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="scripts/lib/theme.js"></script> <script type="text/javascript" src="scripts/lib/theme.js"></script>
<script type="text/javascript" src="scripts/lib/controller.js"></script> <script type="text/javascript" src="scripts/lib/controller.js"></script>
<script type="text/javascript" src="scripts/lib/history.js"></script> <script type="text/javascript" src="scripts/lib/history.js"></script>

35
desktop/sources/scripts/dotgrid.js
View File

@ -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; } if(dotgrid.tool.length() < 1){ console.log("Nothing to save"); return; }
dialog.showSaveDialog({ if(!dialog){ this.save_web(content); return; }
title:"Save to .grid",
filters: [{name: "Dotgrid", extensions: ["grid", "dot"]}] dialog.showSaveDialog({title:"Save to .grid",filters: [{name: "Dotgrid", extensions: ["grid", "dot"]}]},(fileName) => {
},(fileName) => {
if (fileName === undefined){ return; } if (fileName === undefined){ return; }
fileName = fileName.substr(-5,5) != ".grid" ? fileName+".grid" : fileName; fileName = fileName.substr(-5,5) != ".grid" ? fileName+".grid" : fileName;
fs.writeFileSync(fileName, content); 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) 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(!ready){return; }
if(dotgrid.tool.length() < 1){ console.log("Nothing to render"); 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) => { dialog.showSaveDialog({title:"Render to .png"},(fileName) => {
if (fileName === undefined){ return; } if (fileName === undefined){ return; }
fileName = fileName.substr(-4,4) != ".png" ? fileName+".png" : fileName; 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()) this.export = function(content = this.renderer.to_svg())
{ {
if(dotgrid.tool.length() < 1){ console.log("Nothing to export"); return; } 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) => { dialog.showSaveDialog({title:"Export to .svg"},(fileName) => {
if (fileName === undefined){ return; } if (fileName === undefined){ return; }
fileName = fileName.substr(-4,4) != ".svg" ? fileName+".svg" : fileName; 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 // Basics
this.set_size = function(size = {width:300,height:300},interface = true,scale = 1) 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.interface.refresh();
dotgrid.guide.refresh(); dotgrid.guide.refresh();
document.title = `Dotgrid — ${size.width}x${size.height}`
} }
this.drag = function(e) this.drag = function(e)

29
desktop/sources/scripts/renderer.js
View File

@ -50,6 +50,8 @@ function Renderer()
this.to_png = function(size = dotgrid.tool.settings.size,callback = dotgrid.render) this.to_png = function(size = dotgrid.tool.settings.size,callback = dotgrid.render)
{ {
if(!dialog){ return this.to_png_web(size); }
this.refresh(); this.refresh();
var xml = new XMLSerializer().serializeToString(this.svg_el); var xml = new XMLSerializer().serializeToString(this.svg_el);
@ -78,6 +80,33 @@ function Renderer()
callback(null,buffer,size) 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.to_svg = function()
{ {
this.refresh(); this.refresh();

10
index.html
View File

@ -1,5 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<html> <html>
<head> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="desktop/sources/scripts/lib/theme.js"></script> <script type="text/javascript" src="desktop/sources/scripts/lib/theme.js"></script>
<script type="text/javascript" src="desktop/sources/scripts/lib/history.js"></script> <script type="text/javascript" src="desktop/sources/scripts/lib/history.js"></script>
@ -13,6 +18,8 @@
<script type="text/javascript" src="desktop/sources/scripts/picker.js"></script> <script type="text/javascript" src="desktop/sources/scripts/picker.js"></script>
<script type="text/javascript" src="web/events.js"></script>
<link rel="stylesheet" type="text/css" href="desktop/sources/links/reset.css"/> <link rel="stylesheet" type="text/css" href="desktop/sources/links/reset.css"/>
<link rel="stylesheet" type="text/css" href="desktop/sources/links/fonts.css"/> <link rel="stylesheet" type="text/css" href="desktop/sources/links/fonts.css"/>
<link rel="stylesheet" type="text/css" href="desktop/sources/links/main.css"/> <link rel="stylesheet" type="text/css" href="desktop/sources/links/main.css"/>
@ -20,7 +27,8 @@
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<script> <script>
var dialog = null;
dotgrid = new Dotgrid(300,300,20,20,4,4); dotgrid = new Dotgrid(300,300,20,20,4,4);
dotgrid.install(); dotgrid.install();
</script> </script>

34
web/events.js Normal file
View File

@ -0,0 +1,34 @@
document.onkeydown = function key_down(e)
{
};
document.onkeyup = (e) =>
{
var ch = e.key.toLowerCase();
console.log(ch);
if(ch == "1"){ dotgrid.tool.select_layer(0); }
if(ch == "2"){ dotgrid.tool.select_layer(1); }
if(ch == "3"){ dotgrid.tool.select_layer(2); }
if(ch == "u"){ dotgrid.interface.toggle(); }
if(ch == "h"){ dotgrid.guide.toggle(); }
if(ch == "a"){ dotgrid.tool.cast("line"); }
if(ch == "s"){ dotgrid.tool.cast("arc_c"); }
if(ch == "d"){ dotgrid.tool.cast("arc_r"); }
if(ch == "f"){ dotgrid.tool.cast("bezier"); }
if(ch == "z"){ dotgrid.tool.cast("close"); }
if(ch == "q"){ dotgrid.tool.toggle("linecap"); }
if(ch == "w"){ dotgrid.tool.toggle("linejoin"); }
if(ch == "e"){ dotgrid.tool.toggle("mirror"); }
if(ch == "r"){ dotgrid.tool.toggle("fill"); }
if(ch == "g"){ dotgrid.picker.start(); }
if(ch == "}"){ dotgrid.tool.toggle("thickness",1); }
if(ch == "{"){ dotgrid.tool.toggle("thickness",-1); }
if(ch == "]"){ dotgrid.tool.toggle("thickness",5); }
if(ch == "["){ dotgrid.tool.toggle("thickness",-5); }
}