Display printable tape width

2026-06-22 14:45:18 +02:00
parent d00ce6fe90
commit fb82c16233
6 changed files with 21 additions and 1 deletions
@@ -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

@@ -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"),
@@ -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})` : ""}`;
@@ -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})` : ""}`;
@@ -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>
@@ -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>