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

Added shortcuts

Browse Source
This commit is contained in:
Devine Lu Linvega 2016-12-31 10:37:10 -07:00
parent 452bcd0d41
commit 2b964af3af
5 changed files with 90 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -1,6 +1,7 @@
<html> <html>
<head> <head>
<script type="text/javascript" src="scripts/dotgrid.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/reset.css"/>
<link rel="stylesheet" type="text/css" href="links/fonts.css"/> <link rel="stylesheet" type="text/css" href="links/fonts.css"/>
@ -11,6 +12,7 @@
<input id="line" type="button" value="line"/> <input id="line" type="button" value="line"/>
<input id="arc_c" type="button" value="arc_c"/> <input id="arc_c" type="button" value="arc_c"/>
<input id="arc_a" type="button" value="arc_a"/> <input id="arc_a" type="button" value="arc_a"/>
<input id="reseter" type="button" value="reseter"/>
<script type="text/javascript" src="scripts/init.js"></script> <script type="text/javascript" src="scripts/init.js"></script>
</body> </body>
</html> </html>

4
links/main.css
View File

@ -1,8 +1,8 @@
body { background:#eee; padding:50px;} body { background:#fff; padding:50px;}
#dotgrid { margin:0px auto; position:relative; border:0px solid white; background:white; overflow: hidden} #dotgrid { margin:0px auto; position:relative; border:0px solid white; background:white; overflow: hidden}
#dotgrid .marker { width:2px; height:2px; background:#999; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;} #dotgrid .marker { width:2px; height:2px; background:#999; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;}
#dotgrid #cursor { width:6px; height:6px; background:red; margin-top:-3px; margin-left:-3px; position:absolute; z-index:25; border-radius:10px;} #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:black; margin-top:-3px; margin-left:-3px; position:absolute; z-index:25; border-radius:10px;} #dotgrid #cursor_from { width:6px; height:6px; background:black; margin-top:-3px; margin-left:-3px; position:absolute; z-index:25; border-radius:10px;}
#dotgrid #cursor_to { width:6px; height:6px; background:black; margin-top:-3px; margin-left:-3px; position:absolute; z-index:25; border-radius:10px;} #dotgrid #cursor_to { width:6px; height:6px; background:black; margin-top:-3px; margin-left:-3px; position:absolute; z-index:25; border-radius:10px;}
input { padding:2px 5px; border-radius:20px; } input { padding:2px 5px; border-radius:20px; margin:0px auto; display:none;}

94
scripts/dotgrid.js
View File

@ -9,13 +9,14 @@ function Dotgrid(width,height,grid_x,grid_y)
this.grid_width = this.width/this.grid_x; this.grid_width = this.width/this.grid_x;
this.grid_height = this.height/this.grid_y; this.grid_height = this.height/this.grid_y;
this.cursor = null; var cursor = null;
this.cursor_from = null; var cursor_from = null;
this.cursor_to = null; var cursor_to = null;
this.button_line = null; this.button_line = null;
this.button_arc_c = null; this.button_arc_c = null;
this.button_arc_a = null; this.button_arc_a = null;
this.button_reseter = null;
var from = null; var from = null;
var to = null; var to = null;
@ -46,13 +47,13 @@ function Dotgrid(width,height,grid_x,grid_y)
this.cursor.id = "cursor"; this.cursor.id = "cursor";
this.element.appendChild(this.cursor); this.element.appendChild(this.cursor);
this.cursor_from = document.createElement("div"); cursor_from = document.createElement("div");
this.cursor_from.id = "cursor_from"; cursor_from.id = "cursor_from";
this.element.appendChild(this.cursor_from); this.element.appendChild(cursor_from);
this.cursor_to = document.createElement("div"); cursor_to = document.createElement("div");
this.cursor_to.id = "cursor_to"; cursor_to.id = "cursor_to";
this.element.appendChild(this.cursor_to); this.element.appendChild(cursor_to);
// Vector // Vector
vector_element = document.createElementNS("http://www.w3.org/2000/svg", "svg"); vector_element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@ -69,6 +70,7 @@ function Dotgrid(width,height,grid_x,grid_y)
this.button_arc_c = document.getElementById("arc_c") this.button_arc_c = document.getElementById("arc_c")
this.button_arc_a = document.getElementById("arc_a") this.button_arc_a = document.getElementById("arc_a")
this.button_reseter = document.getElementById("reseter")
if (this.button_line.addEventListener){ if (this.button_line.addEventListener){
this.button_line.addEventListener("click", draw_line, false); } this.button_line.addEventListener("click", draw_line, false); }
@ -83,9 +85,15 @@ function Dotgrid(width,height,grid_x,grid_y)
} }
if (this.button_arc_a.addEventListener){ if (this.button_arc_a.addEventListener){
this.button_arc_a.addEventListener("click", this.draw_arc_a, false); } this.button_arc_a.addEventListener("click", draw_arc_a, false); }
else if (this.button_arc_a.attachEvent){ else if (this.button_arc_a.attachEvent){
this.button_arc_a.attachEvent('onclick', this.draw_arc_a); this.button_arc_a.attachEvent('onclick', draw_arc_a);
}
if (this.button_reseter.addEventListener){
this.button_reseter.addEventListener("click", reset, false); }
else if (this.button_reseter.attachEvent){
this.button_reseter.attachEvent('onclick', reset);
} }
} }
@ -122,37 +130,46 @@ function Dotgrid(width,height,grid_x,grid_y)
{ {
from = pos; from = pos;
this.cursor_from.style.left = -pos[0]; cursor_from.style.left = -pos[0];
this.cursor_from.style.top = pos[1]; cursor_from.style.top = pos[1];
} }
this.set_to = function(pos) this.set_to = function(pos)
{ {
this.cursor_to.style.left = -pos[0]; cursor_to.style.left = -pos[0];
this.cursor_to.style.top = pos[1]; cursor_to.style.top = pos[1];
to = pos; to = pos;
} }
// Draw // Draw
this.draw_line = function()
{
draw_line();
}
function draw_line() function draw_line()
{ {
console.log("from: "+from); console.log("to: "+to); var s = document.createElementNS('http://www.w3.org/2000/svg', 'line');
var aLine = document.createElementNS('http://www.w3.org/2000/svg', 'line'); s.setAttribute('x1', -from[0]);
aLine.setAttribute('x1', -from[0]); s.setAttribute('y1', from[1]);
aLine.setAttribute('y1', from[1]); s.setAttribute('x2', -to[0]);
aLine.setAttribute('x2', -to[0]); s.setAttribute('y2', to[1]);
aLine.setAttribute('y2', to[1]); s.setAttribute('stroke', "#000000");
aLine.setAttribute('stroke', "#000000"); s.setAttribute('stroke-width', "5");
aLine.setAttribute('stroke-width', "5"); s.setAttribute('stroke-linecap', "square");
vector_element.appendChild(aLine); vector_element.appendChild(s);
reset(); reset();
} }
this.draw_arc_c = function()
{
draw_arc_c();
}
draw_arc_c = function() draw_arc_c = function()
{ {
var s = document.createElementNS("http://www.w3.org/2000/svg", "path"); var s = document.createElementNS("http://www.w3.org/2000/svg", "path");
@ -160,6 +177,7 @@ function Dotgrid(width,height,grid_x,grid_y)
s.setAttribute('stroke', "#000000"); s.setAttribute('stroke', "#000000");
s.setAttribute('stroke-width', "5"); s.setAttribute('stroke-width', "5");
s.setAttribute('fill', "none"); s.setAttribute('fill', "none");
s.setAttribute('stroke-linecap', "square");
vector_element.appendChild(s); vector_element.appendChild(s);
reset(); reset();
@ -167,18 +185,36 @@ function Dotgrid(width,height,grid_x,grid_y)
this.draw_arc_a = function() this.draw_arc_a = function()
{ {
draw_arc_a();
}
function draw_arc_a()
{
var s = document.createElementNS("http://www.w3.org/2000/svg", "path");
s.setAttribute("d","M"+(-from[0])+","+(from[1])+" A15,15 0 1,0 "+(-to[0])+","+(to[1])+"");
s.setAttribute('stroke', "#000000");
s.setAttribute('stroke-width', "5");
s.setAttribute('fill', "none");
s.setAttribute('stroke-linecap', "square");
vector_element.appendChild(s);
reset();
}
this.reset = function()
{
reset();
} }
function reset() function reset()
{ {
from = null; from = null;
to = null; to = null;
this.cursor_from.style.left = -100; cursor_from.style.left = -100;
this.cursor_from.style.top = -100; cursor_from.style.top = -100;
this.cursor_to.style.left = -100; cursor_to.style.left = -100;
this.cursor_to.style.top = -100; cursor_to.style.top = -100;
} }
// Normalizers // Normalizers

5
scripts/init.js
View File

@ -1,6 +1,9 @@
dotgrid = new Dotgrid(300,300,10,10); dotgrid = new Dotgrid(300,300,20,20);
dotgrid.install(); dotgrid.install();
var keyboard = new Keyboard();
document.onkeyup = function myFunction(){ keyboard.listen(event); };
document.addEventListener('mousedown', function(e){ dotgrid.mouse_down(e); }, false); document.addEventListener('mousedown', function(e){ dotgrid.mouse_down(e); }, false);
document.addEventListener('mousemove', function(e){ dotgrid.mouse_move(e); }, false); document.addEventListener('mousemove', function(e){ dotgrid.mouse_move(e); }, false);
document.addEventListener('mouseup', function(e){ dotgrid.mouse_up(e);}, false); document.addEventListener('mouseup', function(e){ dotgrid.mouse_up(e);}, false);

16
scripts/keyboard.js Normal file
View File

@ -0,0 +1,16 @@
function Keyboard()
{
this.listen = function(event)
{
console.log(dotgrid);
console.log(event.keyCode);
switch (event.key || event.keyCode) {
case 65 : dotgrid.draw_arc_a(); break;
case 83 : dotgrid.draw_arc_c(); break;
case 68 : dotgrid.draw_line(); break;
case 70 : dotgrid.reset(); break;
}
}
}