Printerface

Design

Template.html

this page will is the interface for editing the parameters of a template some parameters aply for the whole template. but most of them are per textbox

features (in order of most to least important)
- jason export
- livePreview this is easy to impliment later and not really citical
- precise x,y in mm

textBox menus

To be able to add multiple menus with incremental IDs i use this example code

<div id="container">
<div class="textBox">
  key: <input type="text" name="key"><br>
  x: <input type="number" name="x"><br>
  y: <input type="number" name="y"><br>
  size: <input type="number" name="size"><br>
  encoding:
  <select name="encoding">
    <option>text</option>
    <option>QR code</option>
    <option>Barcode</option>
  </select>
  <hr>
</div>
</div>
<button id="new">New</button>
<script>
let count = 1;

document.getElementById("new").onclick = function () {
  const container = document.getElementById("container");
  const first = container.querySelector(".textBox");
  const clone = first.cloneNode(true);

  // assign incrementing IDs based on count
  clone.querySelectorAll("input, select").forEach(el => {
    el.id = el.name + "-" + count;
  });

  count++;
  container.appendChild(clone);
};
</script>