working web ui

web/index.html

@@ -14,7 +14,7 @@
     </tbody>
     <tfoot>
     <td>
-        <input type="button" value="Add" id="add"/>
+        <input type="button" value="Add Text" id="add"/>
     </td>
     </tfoot>
 </table>
@@ -29,6 +29,10 @@
 </p>
 <canvas id="preview" height="32" width="300"></canvas>
 
+<p>
+<input type="button" value="Print" id="print"/>
+</p>
+
 <script src="label.js"></script>
 </body>
 </html>

web/label.js

@@ -4,6 +4,8 @@ const preview = document.getElementById('preview');
 const renderCtx = preview.getContext("2d");
 const elementsTableBody = elementsTable.getElementsByTagName('tbody')[0];
 const addButton = document.getElementById('add');
+/** @type HTMLInputElement printButton */
+const printButton = document.getElementById('print');
 const widthInput = document.getElementById('canvas-width');
 const widthUnit = document.getElementById('canvas-width-unit');
 
@@ -128,7 +130,21 @@ const resize = () => {
     render()
 };
 
+const print = () => {
+    printButton.disabled = true;
+    preview.toBlob(blob => {
+        blob.arrayBuffer().then(png => fetch(apiRoot + '/print', {
+            method: 'PUT',
+            body: png,
+        }))
+            .then(() => {
+                printButton.disabled = false;
+            });
+    }, 'image/png');
+};
+
 addButton.addEventListener('click', addElement);
+printButton.addEventListener('click', print);
 widthInput.addEventListener('input', resize);
 
 widthUnit.addEventListener('change', () => {