chiark / gitweb /
webstead: input from an array of tickyboxes
authorBen Harris <bjh21@bjh21.me.uk>
Tue, 16 Sep 2025 20:07:01 +0000 (21:07 +0100)
committerBen Harris <bjh21@bjh21.me.uk>
Tue, 13 Jan 2026 21:42:18 +0000 (21:42 +0000)
webstead.xhtml

index 84c7dd0d04135a0ede2bde4831c134f061a7f2a2..8e7be672ca52b8715f11ae05ffa2aa723ffba994 100644 (file)
@@ -6,8 +6,19 @@
     <script type="module"><![CDATA[
     import Bedstead from './bedstead.js';
     function update_glyph() {
+        var args = [];
+        for (var row of document.getElementById("pixels").rows) {
+            var arg = 0;
+            for (var pixel of row.getElementsByTagName('input')) {
+                arg *= 2;
+                if (pixel.checked) {
+                    arg += 1
+                }
+            }
+            args.push(arg.toString())
+        }
         Bedstead({
-            arguments: document.getElementById("input").value.split(" "),
+            arguments: args,
             print: function(charstring) {
                 document.getElementById("output").textContent = charstring;
                 document.getElementById("rendered")
             }
         });
     }
-    document.getElementById("run").onclick = update_glyph;
+    for (var e of document.getElementsByTagName('input')) {
+        e.onchange = update_glyph;
+    }
 ]]>
     </script>
   </head>
   <body>
     <form>
-      <label for="input">Input</label>
-      <input type="text" id="input"/>
-      <input type="button" id="run" value="Run!"/>
+      <table id="pixels">
+        <tr>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+        </tr>
+        <tr>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+        </tr>
+        <tr>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+        </tr>
+        <tr>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+        </tr>
+        <tr>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+        </tr>
+        <tr>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+        </tr>
+        <tr>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+        </tr>
+        <tr>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+        </tr>
+        <tr>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+          <td><input type="checkbox"/></td>
+        </tr>
+      </table>
     </form>
     <p><code id="output"></code></p>
     <div>