added UI for thickness and linecap settings

2017-01-06 02:06:34 +01:00
parent 21ebcbf88c
commit 4cfc67d416
3 changed files with 31 additions and 2 deletions
--- a/template.interface.html
+++ b/template.interface.html
@@ -9,7 +9,8 @@
    <title>Dotgrid(Interface)</title>
  </head>
  <body>
-    <pre>
+    <body>
+    <pre class="reference">
      q  <b>CLEAR</b>
      w  <b>DELETE LAST</b>
      e  <b>EXPORT</b>
@@ -23,6 +24,18 @@
      x  <b>CIRCLE</b>
      c  <b>--</b>
    </pre>
+    
+    <pre class="settings">
+      <b>THICKNESS</b> <input type="number" value=1 min="0" step="0.1" 
+        oninput="dotgrid.update_style('strokeWidth', this.value);">
+      <b>LINECAP</b> <select
+        onchange="dotgrid.update_style('strokeLinecap', this.value);">
+        <option value="butt">butt</option>
+        <option value="round">round</option>
+        <option value="square">square</option>
+      </select>
+    </pre>
+    
    <script>
      dotgrid = new Dotgrid(320,568,31,61,6,6, 1,"square","#000000");
      dotgrid.install();