2017-01-04 12:48:08 -05:00
|
|
|
<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>
|
2017-01-05 20:06:34 -05:00
|
|
|
<pre class="reference">
|
2017-01-04 12:48:08 -05:00
|
|
|
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>
|
2017-01-05 20:06:34 -05:00
|
|
|
|
|
|
|
|
<pre class="settings">
|
2017-01-05 22:24:08 -05:00
|
|
|
<b>THICKNESS</b> <input id="thickness" type="number" value=5 min="0" step="0.1"
|
2017-01-05 20:06:34 -05:00
|
|
|
oninput="dotgrid.update_style('strokeWidth', this.value);">
|
2017-01-05 22:24:08 -05:00
|
|
|
<b>LINECAP</b> <select id="linecap"
|
2017-01-05 20:06:34 -05:00
|
|
|
onchange="dotgrid.update_style('strokeLinecap', this.value);">
|
|
|
|
|
<option value="butt">butt</option>
|
|
|
|
|
<option value="round">round</option>
|
|
|
|
|
<option value="square">square</option>
|
|
|
|
|
</select>
|
2017-01-05 22:38:24 -05:00
|
|
|
<b>COLOR</b> <input id="color" type="color" value="#000000" onchange="dotgrid.update_style('stroke', this.value);">
|
2017-01-05 22:24:08 -05:00
|
|
|
|
|
|
|
|
|
|
|
|
|
<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>
|
2017-01-05 20:06:34 -05:00
|
|
|
</pre>
|
|
|
|
|
|
2017-01-04 12:48:08 -05:00
|
|
|
<script>
|
2017-01-05 22:38:24 -05:00
|
|
|
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);
|
|
|
|
|
};
|
2017-01-05 22:24:08 -05:00
|
|
|
dotgrid = new_grid();
|
2017-01-04 12:48:08 -05:00
|
|
|
dotgrid.install();
|
|
|
|
|
var keyboard = new Keyboard();
|
2017-01-05 19:58:24 -05:00
|
|
|
document.onkeyup = function myFunction(event){ keyboard.listen(event); };
|
2017-01-04 12:48:08 -05:00
|
|
|
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>
|
