added grid settings

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

View File

@ -8,7 +8,6 @@
<link rel="stylesheet" type="text/css" href="links/main.css"/> <link rel="stylesheet" type="text/css" href="links/main.css"/>
<title>Dotgrid(Interface)</title> <title>Dotgrid(Interface)</title>
</head> </head>
<body>
<body> <body>
<pre class="reference"> <pre class="reference">
q <b>CLEAR</b> q <b>CLEAR</b>
@ -26,18 +25,34 @@
</pre> </pre>
<pre class="settings"> <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);"> oninput="dotgrid.update_style('strokeWidth', this.value);">
<b>LINECAP</b> <select <b>LINECAP</b> <select id="linecap"
onchange="dotgrid.update_style('strokeLinecap', this.value);"> onchange="dotgrid.update_style('strokeLinecap', this.value);">
<option value="butt">butt</option> <option value="butt">butt</option>
<option value="round">round</option> <option value="round">round</option>
<option value="square">square</option> <option value="square">square</option>
</select> </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> </pre>
<script> <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(); dotgrid.install();
var keyboard = new Keyboard(); var keyboard = new Keyboard();
document.onkeyup = function myFunction(event){ keyboard.listen(event); }; document.onkeyup = function myFunction(event){ keyboard.listen(event); };