added grid settings

This commit is contained in:
eelfroth 2017-01-06 04:24:08 +01:00
parent 4cfc67d416
commit b63d6ce4f1

View File

@ -9,7 +9,6 @@
<title>Dotgrid(Interface)</title>
</head>
<body>
<body>
<pre class="reference">
q <b>CLEAR</b>
w <b>DELETE LAST</b>
@ -26,18 +25,34 @@
</pre>
<pre class="settings">
<b>THICKNESS</b> <input type="number" value=1 min="0" step="0.1"
<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
<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>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,
"#000000"); };
dotgrid = new_grid();
dotgrid.install();
var keyboard = new Keyboard();
document.onkeyup = function myFunction(event){ keyboard.listen(event); };