Initial P-Touch web editor

2026-06-21 23:07:20 +02:00
commit 7029ee9519
16 changed files with 1983 additions and 0 deletions
@@ -0,0 +1,88 @@
+const fields = {
+  text: document.getElementById("mobileText"),
+  tape: document.getElementById("mobileTape"),
+  length: document.getElementById("mobileLength"),
+  margin: document.getElementById("mobileMargin"),
+  font: document.getElementById("mobileFont"),
+  copies: document.getElementById("mobileCopies"),
+  align: document.getElementById("mobileAlign"),
+  bold: document.getElementById("mobileBold"),
+  frame: document.getElementById("mobileFrame"),
+  preview: document.getElementById("mobilePreview"),
+  message: document.getElementById("mobileMessage"),
+};
+
+function setMessage(text, type = "") {
+  fields.message.textContent = text;
+  fields.message.className = `message ${type}`;
+}
+
+function mobileDesign() {
+  const tapeWidth = Number(fields.tape.value);
+  const length = Number(fields.length.value);
+  const margin = Number(fields.margin.value);
+  const text = fields.text.value.trim() || " ";
+  const objects = [];
+  if (fields.frame.checked) {
+    objects.push({
+      id: "frame",
+      type: "shape",
+      x: margin,
+      y: margin,
+      w: Math.max(2, length - margin * 2),
+      h: Math.max(2, tapeWidth - margin * 2),
+      lineMm: 0.25,
+      fill: false,
+    });
+  }
+  objects.push({
+    id: "text",
+    type: "text",
+    x: margin + (fields.frame.checked ? 1 : 0),
+    y: margin,
+    w: Math.max(2, length - margin * 2 - (fields.frame.checked ? 2 : 0)),
+    h: Math.max(2, tapeWidth - margin * 2),
+    text,
+    fontSizeMm: Number(fields.font.value),
+    bold: fields.bold.checked,
+    align: fields.align.value,
+    valign: "middle",
+  });
+  return {
+    tapeWidthMm: tapeWidth,
+    lengthMm: length,
+    marginMm: margin,
+    orientation: "landscape",
+    objects,
+  };
+}
+
+async function send(url) {
+  setMessage("Rendere Etikett...");
+  const response = await fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ design: mobileDesign(), copies: Number(fields.copies.value) || 1 }),
+  });
+  const payload = await response.json();
+  if (!payload.ok) {
+    setMessage(payload.error || "Fehler", "error");
+    return;
+  }
+  fields.preview.src = `${payload.image}?t=${Date.now()}`;
+  setMessage(payload.message || "Vorschau erstellt.", "success");
+}
+
+document.getElementById("mobilePreviewBtn").addEventListener("click", () => send("/api/preview"));
+document.getElementById("mobilePrintBtn").addEventListener("click", () => send("/api/print"));
+document.getElementById("mobileDetect").addEventListener("click", async () => {
+  setMessage("Erkenne Band...");
+  const response = await fetch("/api/tape-info");
+  const payload = await response.json();
+  if (!payload.ok) {
+    setMessage(payload.error || "Band konnte nicht erkannt werden.", "error");
+    return;
+  }
+  fields.tape.value = String(payload.width);
+  setMessage(`Band erkannt: ${payload.width} mm`, "success");
+});