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

Progress

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-11-05 13:59:11 +14:00
parent 910fba4432
commit 6a4dae83ae
16 changed files with 299 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
links/fonts.css
View File

@ -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;
}

22
links/main.css
View File

@ -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 .marker { width:2px; height:2px; background:#ccc; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;}
#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:#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_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_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 { 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;}
input { padding:2px 5px; border-radius:20px; margin:0px auto; display:none;}
.vector { position:relative; z-index:900;}
pre { font-family:courier; font-size:11px; color:#000; position:fixed; bottom:20px;}
.reference { left:0; }
.settings { right:20px; text-align:right; }
pre { font-size:11px; color:#000; position:fixed; bottom:20px; display: none}
.reference { left:0; display: none }
.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;}

BIN
media/fonts/din_regular.ttf Normal file
View File

Binary file not shown.

BIN
media/fonts/input_mono_medium.ttf Normal file
View File

Binary file not shown.

BIN
media/fonts/input_mono_regular.ttf Normal file
View File

Binary file not shown.

BIN
media/fonts/input_mono_thin.ttf Normal file
View File

Binary file not shown.

202
scripts/dotgrid.js
View File

@ -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 y = this.grid_y - 1; y >= 0; y--) {
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 block" : "marker"));
marker.style.left = parseInt(x * this.grid_width + (this.grid_width/2));
marker.style.top = parseInt(y * this.grid_height + (this.grid_height/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)) +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");
vector_element.setAttribute("class","vector");
vector_element.setAttribute("width",this.width+"px");
vector_element.setAttribute("height",this.height+"px");
vector_element.setAttribute("xmlns","http://www.w3.org/2000/svg");
vector_element.setAttribute("baseProfile","full");
vector_element.setAttribute("version","1.1");
vector_element.style.width = this.width;
vector_element.style.height = this.height;
vector_element.style.stroke = this.color;
vector_element.style.strokeWidth = this.thickness;
vector_element.style.fill = "none";
vector_element.style.strokeLinecap = this.linecap;
this.element.appendChild(vector_element);
this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
this.svg_el.setAttribute("class","vector");
this.svg_el.setAttribute("width",this.width+"px");
this.svg_el.setAttribute("height",this.height+"px");
this.svg_el.setAttribute("xmlns","http://www.w3.org/2000/svg");
this.svg_el.setAttribute("baseProfile","full");
this.svg_el.setAttribute("version","1.1");
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.strokeWidth = this.thickness;
this.svg_el.style.fill = "none";
this.svg_el.style.strokeLinecap = this.linecap;
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.top = pos[1];
cursor_from.style.left = -pos[0] + 10;
cursor_from.style.top = pos[1] + 10;
}
this.set_to = function(pos)
{
cursor_to.style.left = -pos[0];
cursor_to.style.top = pos[1];
cursor_to.style.left = -pos[0] + 10;
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');
s.setAttribute('x1', -from[0]);
s.setAttribute('y1', from[1]);
s.setAttribute('x2', -to[0]);
s.setAttribute('y2', to[1]);
vector_element.appendChild(s);
var end_point = end ? new Pos(end[0] * -1,end[1]) : null;
this.segments.push(new Path_Line(new Pos(from[0] * -1,from[1]),new Pos(to[0] * -1,to[1]),end_point));
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");
s.setAttribute("d","M"+(-from[0])+","+(from[1])+" A"+(to[0] - from[0])+","+(to[1] - from[1])+" 0 "+orientation+" "+(-to[0])+","+(to[1])+"");
vector_element.appendChild(s);
var end_point = end ? new Pos(end[0] * -1,end[1]) : null;
this.segments.push(new Path_Arc(new Pos(from[0] * -1,from[1]),new Pos(to[0] * -1,to[1]),orientation,end_point));
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; }
vector_element.removeChild(vector_element.lastChild);
this.segments.pop();
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);
y = parseInt(y/this.grid_height) * this.grid_height + (this.grid_height/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) +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;
}
}
}

18
scripts/keyboard.js
View File

@ -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();
}
}

32
scripts/path_arc.js Normal file
View File

@ -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
}
}

25
scripts/path_bezier.js Normal file
View File

@ -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+" "
}
}

31
scripts/path_line.js Normal file
View File

@ -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
}
}

15
scripts/pos.js Normal file
View File

@ -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)
}
}

31
template.glyph.html
View File

@ -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>

31
template.graphic.html
View File

@ -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>

8
template.icon.html
View File

@ -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); };

67
template.interface.html
View File

@ -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>