Display printable tape width

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`
-- Band-Erkennung mit Breite, Bandtyp, Hintergrundfarbe und Schriftfarbe
+- Band-Erkennung mit Breite, bedruckbarer Pixelbreite, Bandtyp, Hintergrundfarbe und Schriftfarbe
 - einfache Text-only Mobile-Webansicht unter `/mobile`
 - Schnittmodi: normal, Kettendruck/Streifen, Schnittmarke und Streifen mit Schnittmarke
 

app/app.py

@@ -444,6 +444,13 @@ def media_type_from_output(output: str) -> dict[str, str] | None:
     }
 
 
+def printable_width_from_output(output: str) -> int | None:
+    match = re.search(r"maximum printing width[^\n]*?(\d+)\s*px", output, re.IGNORECASE)
+    if not match:
+        return None
+    return int(match.group(1))
+
+
 def detect_tape_info() -> dict[str, Any]:
     result = subprocess.run(
         ["ptouch-print", "--info"],
@@ -472,6 +479,7 @@ def detect_tape_info() -> dict[str, Any]:
 
     return {
         "width": width,
+        "printableWidthPx": printable_width_from_output(output),
         "mediaType": media_type_from_output(output),
         "tapeColor": color_info_from_line(output, "tape color"),
         "textColor": color_info_from_line(output, "text color"),

app/static/editor.js

@@ -39,6 +39,7 @@ const controls = {
   copies: document.getElementById("copies"),
   tapeInfo: document.getElementById("tapeInfo"),
   tapeInfoType: document.getElementById("tapeInfoType"),
+  tapePrintableWidth: document.getElementById("tapePrintableWidth"),
   tapeBgSwatch: document.getElementById("tapeBgSwatch"),
   tapeBgText: document.getElementById("tapeBgText"),
   tapeTextSwatch: document.getElementById("tapeTextSwatch"),
@@ -125,6 +126,7 @@ function updateTapeInfo(info) {
   const bg = info.tapeColor || { name: "Unbekannt", css: "#d1d5db" };
   const text = info.textColor || { name: "Unbekannt", css: "#111111" };
   controls.tapeInfoType.textContent = `${info.width} mm · ${media}${info.mediaType?.code ? ` (${info.mediaType.code})` : ""}`;
+  controls.tapePrintableWidth.textContent = info.printableWidthPx ? `${info.printableWidthPx} px` : "-";
   controls.tapeBgText.textContent = `${bg.name}${bg.code ? ` (${bg.code})` : ""}`;
   controls.tapeBgSwatch.style.background = bg.css;
   controls.tapeTextText.textContent = `${text.name}${text.code ? ` (${text.code})` : ""}`;

app/static/mobile.js

@@ -9,6 +9,7 @@ const fields = {
   frame: document.getElementById("mobileFrame"),
   tapeInfo: document.getElementById("mobileTapeInfo"),
   tapeInfoType: document.getElementById("mobileTapeInfoType"),
+  tapePrintableWidth: document.getElementById("mobileTapePrintableWidth"),
   tapeBgSwatch: document.getElementById("mobileTapeBgSwatch"),
   tapeBgText: document.getElementById("mobileTapeBgText"),
   tapeTextSwatch: document.getElementById("mobileTapeTextSwatch"),
@@ -36,6 +37,7 @@ function updateTapeInfo(info) {
   const bg = info.tapeColor || { name: "Unbekannt", css: "#d1d5db" };
   const text = info.textColor || { name: "Unbekannt", css: "#111111" };
   fields.tapeInfoType.textContent = `${info.width} mm · ${media}${info.mediaType?.code ? ` (${info.mediaType.code})` : ""}`;
+  fields.tapePrintableWidth.textContent = info.printableWidthPx ? `${info.printableWidthPx} px` : "-";
   fields.tapeBgText.textContent = `${bg.name}${bg.code ? ` (${bg.code})` : ""}`;
   fields.tapeBgSwatch.style.background = bg.css;
   fields.tapeTextText.textContent = `${text.name}${text.code ? ` (${text.code})` : ""}`;

app/templates/index.html

@@ -57,6 +57,10 @@
               <span>Band</span>
               <strong id="tapeInfoType">-</strong>
             </div>
+            <div>
+              <span>Druckbreite</span>
+              <strong id="tapePrintableWidth">-</strong>
+            </div>
             <div>
               <span>Hintergrund</span>
               <strong><i id="tapeBgSwatch"></i><span id="tapeBgText">-</span></strong>

app/templates/mobile.html

@@ -46,6 +46,10 @@
             <span>Band</span>
             <strong id="mobileTapeInfoType">-</strong>
           </div>
+          <div>
+            <span>Druckbreite</span>
+            <strong id="mobileTapePrintableWidth">-</strong>
+          </div>
           <div>
             <span>Hintergrund</span>
             <strong><i id="mobileTapeBgSwatch"></i><span id="mobileTapeBgText">-</span></strong>