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

Merge pull request #1 from eelfroth/master

Browse Source 
UI additions
This commit is contained in:
Лu Лinveгa 2017-01-05 21:10:02 -07:00 committed by GitHub
commit 2332f17934
3 changed files with 54 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
links/main.css
View File

@ -8,4 +8,8 @@ body { background:#fff; padding:50px;}
#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;}
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; position:fixed; left:0px; bottom:20px;}
pre { font-family:courier; font-size:11px; color:#000; position:fixed; bottom:20px;}
.reference { left:0; }
.settings { right:20px; text-align:right; }
.settings input { display:inline; background:#fff; width:4em; }
.settings select { display:inline; background:#fff; }

15
scripts/dotgrid.js
View File

@ -227,4 +227,19 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
y = parseInt(y/this.grid_height) * this.grid_height + (this.grid_height/2);
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;
}
}
}

37
template.interface.html
View File

@ -9,7 +9,7 @@
<title>Dotgrid(Interface)</title>
</head>
<body>
<pre>
<pre class="reference">
q <b>CLEAR</b>
w <b>DELETE LAST</b>
e <b>EXPORT</b>
@ -23,11 +23,42 @@
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>
dotgrid = new Dotgrid(320,568,31,61,6,6, 1,"square","#000000");
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(){ keyboard.listen(event); };
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);