Simplify mobile text label editor

README.md

@@ -11,7 +11,7 @@ Die Weboberflaeche bildet die wichtigsten P-touch-Editor-Funktionen nach:
 - QR-Code und Code128-Barcode
 - Layout speichern/laden im Browser
 - serverseitige Vorschau und Druck ueber `ptouch-print`
-- vereinfachte Mobile-Webansicht unter `/mobile`
+- einfache Text-only Mobile-Webansicht unter `/mobile`
 - Schnittmodi: normal, Kettendruck/Streifen, Schnittmarke und Streifen mit Schnittmarke
 
 ## Wichtig fuer den PT-P700

app/static/mobile.css

@@ -114,13 +114,13 @@ button.primary {
   gap: 8px;
 }
 
-.check-row {
+.toggle-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
 }
 
-.check-row label {
+.toggle-row label {
   display: flex;
   align-items: center;
   gap: 9px;
@@ -131,7 +131,7 @@ button.primary {
   background: #303030;
 }
 
-.check-row input {
+.toggle-row input {
   width: 20px;
   min-height: 20px;
 }

app/static/mobile.js

@@ -1,13 +1,10 @@
 const fields = {
   text: document.getElementById("mobileText"),
   tape: document.getElementById("mobileTape"),
-  length: document.getElementById("mobileLength"),
-  autoLength: document.getElementById("mobileAutoLength"),
   margin: document.getElementById("mobileMargin"),
   font: document.getElementById("mobileFont"),
   copies: document.getElementById("mobileCopies"),
   align: document.getElementById("mobileAlign"),
-  cutMode: document.getElementById("mobileCutMode"),
   bold: document.getElementById("mobileBold"),
   frame: document.getElementById("mobileFrame"),
   preview: document.getElementById("mobilePreview"),
@@ -31,12 +28,7 @@ function mobileDesign() {
   const margin = Number(fields.margin.value);
   const text = fields.text.value.trim() || " ";
   const fontSize = Number(fields.font.value);
-  const autoLength = fields.autoLength.checked;
+  const length = estimateTextLengthMm(text, fontSize, margin, fields.frame.checked);
-  const length = autoLength
-    ? estimateTextLengthMm(text, fontSize, margin, fields.frame.checked)
-    : Number(fields.length.value);
-  fields.length.value = String(length);
-  fields.length.disabled = autoLength;
   const objects = [];
   if (fields.frame.checked) {
     objects.push({
@@ -66,10 +58,10 @@ function mobileDesign() {
   return {
     tapeWidthMm: tapeWidth,
     lengthMm: length,
-    autoLength,
+    autoLength: true,
     marginMm: margin,
     orientation: "landscape",
-    cutMode: fields.cutMode.value,
+    cutMode: "auto",
     halfcut: "off",
     objects,
   };
@@ -105,9 +97,9 @@ document.getElementById("mobileDetect").addEventListener("click", async () => {
   setMessage(`Band erkannt: ${payload.width} mm`, "success");
 });
 
-["text", "font", "margin", "frame", "autoLength"].forEach((name) => {
+["text", "font", "margin", "frame", "bold", "align", "tape"].forEach((name) => {
   fields[name].addEventListener("input", () => {
-    if (name === "autoLength" || fields.autoLength.checked) mobileDesign();
+    mobileDesign();
   });
 });
 

app/templates/mobile.html

@@ -24,37 +24,17 @@
       </section>
 
       <section class="card settings">
-        <label>
-          Band
-          <div class="input-action">
-            <select id="mobileTape">
-              {% for width in tape_widths %}
-                <option value="{{ width }}" {% if width == 24 %}selected{% endif %}>{{ width }} mm</option>
-              {% endfor %}
-            </select>
-            <button id="mobileDetect" type="button">Erkennen</button>
-          </div>
-        </label>
-
         <div class="grid-2">
           <label>
-            Laenge
+            Band
-            <input id="mobileLength" type="number" min="20" max="300" step="1" value="70">
+            <div class="input-action">
-          </label>
+              <select id="mobileTape">
-          <label>
+                {% for width in tape_widths %}
-            Rand
+                  <option value="{{ width }}" {% if width == 24 %}selected{% endif %}>{{ width }} mm</option>
-            <input id="mobileMargin" type="number" min="0" max="20" step="0.5" value="2">
+                {% endfor %}
-          </label>
+              </select>
-        </div>
+              <button id="mobileDetect" type="button">Erkennen</button>
-        <label class="check-row">
+            </div>
-          <input id="mobileAutoLength" type="checkbox" checked>
-          Laenge automatisch begrenzen
-        </label>
-
-        <div class="grid-2">
-          <label>
-            Schrift
-            <input id="mobileFont" type="number" min="2" max="24" step="0.5" value="6">
           </label>
           <label>
             Kopien
@@ -62,6 +42,17 @@
           </label>
         </div>
 
+        <div class="grid-2">
+          <label>
+            Schriftgroesse
+            <input id="mobileFont" type="number" min="2" max="24" step="0.5" value="6">
+          </label>
+          <label>
+            Innenrand
+            <input id="mobileMargin" type="number" min="0" max="20" step="0.5" value="2">
+          </label>
+        </div>
+
         <label>
           Ausrichtung
           <select id="mobileAlign">
@@ -71,18 +62,7 @@
           </select>
         </label>
 
-        <label>
+        <div class="toggle-row">
-          Schnitt
-          <select id="mobileCutMode">
-            <option value="auto">Normal / einzeln</option>
-            <option value="chain">Kettendruck / Streifen</option>
-            <option value="cutmark">Schnittmarke</option>
-            <option value="cutmark-chain">Streifen + Marke</option>
-          </select>
-        </label>
-        <p class="field-note">PT-P700: kein Halbschnitt. Fuer zusammenhaengende Labels Kettendruck / Streifen nutzen.</p>
-
-        <div class="check-row">
           <label><input id="mobileBold" type="checkbox" checked> Fett</label>
           <label><input id="mobileFrame" type="checkbox"> Rahmen</label>
         </div>