michael/P-Touch-Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show detected tape colors in UI

Browse Source
This commit is contained in:
Mikei386
2026-06-22 14:41:12 +02:00
parent e880260aa5
commit d00ce6fe90
8 changed files with 244 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1
View File
@@ -11,6 +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
- einfache Text-only Mobile-Webansicht unter `/mobile`
- Schnittmodi: normal, Kettendruck/Streifen, Schnittmarke und Streifen mit Schnittmarke
app/app.py
+85 -7
View File
@@ -375,7 +375,76 @@ def should_render_copies_as_strip(design: dict[str, Any], copies: int) -> bool:
return str(design.get("cutMode", "auto")) in {"chain", "cutmark-chain"}
def detect_tape_width() -> tuple[float | None, str]:
COLOR_HEX_BY_NAME = {
"white": "#ffffff",
"black": "#111111",
"red": "#d92d20",
"blue": "#2563eb",
"yellow": "#facc15",
"green": "#16a34a",
"clear": "#f8fafc",
"transparent": "#f8fafc",
"silver": "#c0c0c0",
"gold": "#d4af37",
"matte white": "#f5f5f0",
"matte black": "#1f1f1f",
}
COLOR_NAME_DE = {
"white": "Weiss",
"black": "Schwarz",
"red": "Rot",
"blue": "Blau",
"yellow": "Gelb",
"green": "Gruen",
"clear": "Transparent",
"transparent": "Transparent",
"silver": "Silber",
"gold": "Gold",
"matte white": "Matt weiss",
"matte black": "Matt schwarz",
}
MEDIA_TYPE_DE = {
"laminated tape": "Laminiertes Band",
"non-laminated tape": "Nicht laminiertes Band",
"fabric tape": "Textilband",
"heat shrink tube": "Schrumpfschlauch",
}
def color_info_from_line(output: str, key: str) -> dict[str, str] | None:
match = re.search(rf"^{re.escape(key)}\s*=\s*([0-9a-fA-F]+)(?:\s*\(([^)]+)\))?", output, re.MULTILINE)
if not match:
return None
code = match.group(1)
raw_name = (match.group(2) or f"Code {code}").strip()
normalized = raw_name.lower()
return {
"code": code,
"name": COLOR_NAME_DE.get(normalized, raw_name),
"rawName": raw_name,
"css": COLOR_HEX_BY_NAME.get(normalized, "#d1d5db"),
}
def media_type_from_output(output: str) -> dict[str, str] | None:
match = re.search(r"^media type\s*=\s*([0-9a-fA-F]+)(?:\s*\(([^)]+)\))?", output, re.MULTILINE)
if not match:
return None
code = match.group(1)
raw_name = (match.group(2) or f"Code {code}").strip()
normalized = raw_name.lower()
return {
"code": code,
"name": MEDIA_TYPE_DE.get(normalized, raw_name),
"rawName": raw_name,
}
def detect_tape_info() -> dict[str, Any]:
result = subprocess.run(
["ptouch-print", "--info"],
capture_output=True,
@@ -387,6 +456,7 @@ def detect_tape_width() -> tuple[float | None, str]:
if result.returncode != 0:
raise RuntimeError(format_print_error(result))
width = None
candidates: list[float] = []
for pattern in [
r"(?:tape|media|band|width|breite|size|groesse|printing)[^\n:=-]*[:=-]?\s*(\d+(?:[.,]\d+)?)\s*mm",
@@ -397,8 +467,16 @@ def detect_tape_width() -> tuple[float | None, str]:
for supported in TAPE_WIDTHS_MM:
if any(abs(candidate - supported) < 0.26 for candidate in candidates):
return supported, output
return None, output
width = supported
break
return {
"width": width,
"mediaType": media_type_from_output(output),
"tapeColor": color_info_from_line(output, "tape color"),
"textColor": color_info_from_line(output, "text color"),
"raw": output,
}
def format_print_error(result: subprocess.CompletedProcess[str]) -> str:
@@ -503,10 +581,10 @@ def api_print():
@app.get("/api/tape-info")
def api_tape_info():
try:
width, raw = detect_tape_width()
if width is None:
return jsonify({"ok": False, "error": "Bandbreite konnte nicht erkannt werden.", "raw": raw}), 400
return jsonify({"ok": True, "width": width, "raw": raw})
info = detect_tape_info()
if info["width"] is None:
return jsonify({"ok": False, "error": "Bandbreite konnte nicht erkannt werden.", **info}), 400
return jsonify({"ok": True, **info})
except Exception as exc:
return jsonify({"ok": False, "error": str(exc)}), 400
app/static/editor.js
+35 -6
View File
@@ -13,6 +13,7 @@ const state = {
zoom: 1.5,
selectedId: null,
dragging: null,
tapeInfo: null,
design: {
tapeWidthMm: 24,
lengthMm: 70,
@@ -36,6 +37,12 @@ const controls = {
marginMm: document.getElementById("marginMm"),
cutMode: document.getElementById("cutMode"),
copies: document.getElementById("copies"),
tapeInfo: document.getElementById("tapeInfo"),
tapeInfoType: document.getElementById("tapeInfoType"),
tapeBgSwatch: document.getElementById("tapeBgSwatch"),
tapeBgText: document.getElementById("tapeBgText"),
tapeTextSwatch: document.getElementById("tapeTextSwatch"),
tapeTextText: document.getElementById("tapeTextText"),
zoomLabel: document.getElementById("zoomLabel"),
previewImage: document.getElementById("previewImage"),
noSelection: document.getElementById("noSelection"),
@@ -82,6 +89,10 @@ function printablePxPerMm() {
return (PRINTABLE_TAPE_PX[tape] || (tape * 180) / 25.4) / tape;
}
function inkColor() {
return state.tapeInfo?.textColor?.css || "#000";
}
function clamp(value, min, max) {
return Math.min(max, Math.max(min, value));
}
@@ -106,6 +117,20 @@ function setMessage(text, type = "") {
message.className = `message-line ${type}`;
}
function updateTapeInfo(info) {
state.tapeInfo = info || null;
controls.tapeInfo.hidden = !info;
if (!info) return;
const media = info.mediaType?.name || "Unbekannt";
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.tapeBgText.textContent = `${bg.name}${bg.code ? ` (${bg.code})` : ""}`;
controls.tapeBgSwatch.style.background = bg.css;
controls.tapeTextText.textContent = `${text.name}${text.code ? ` (${text.code})` : ""}`;
controls.tapeTextSwatch.style.background = text.css;
}
function syncDesignControls() {
state.design.tapeWidthMm = Number(controls.tapeWidth.value);
state.design.lengthMm = Number(controls.lengthMm.value);
@@ -164,7 +189,7 @@ function drawTextObject(obj) {
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.clip();
ctx.fillStyle = "#000";
ctx.fillStyle = inkColor();
const fontPx = (obj.fontSizeMm || 5) * printablePxPerMm() * state.zoom;
ctx.font = `${obj.bold ? "700 " : ""}${fontPx}px DejaVu Sans, Arial, system-ui, sans-serif`;
ctx.textBaseline = "middle";
@@ -188,8 +213,8 @@ function drawObject(obj) {
const h = mmToPx(obj.h);
ctx.save();
ctx.lineWidth = Math.max(1, mmToPx(obj.lineMm || 0.25));
ctx.strokeStyle = "#000";
ctx.fillStyle = "#000";
ctx.strokeStyle = inkColor();
ctx.fillStyle = inkColor();
if (obj.type === "text" || obj.type === "symbol") {
drawTextObject(obj);
@@ -250,7 +275,8 @@ function draw() {
canvas.style.width = `${canvas.width}px`;
canvas.style.height = `${canvas.height}px`;
ctx.fillStyle = "#fff";
const tapeColor = state.tapeInfo?.tapeColor?.css || "#fff";
ctx.fillStyle = tapeColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
const margin = mmToPx(state.design.marginMm);
ctx.strokeStyle = "#b7b7b7";
@@ -261,7 +287,7 @@ function draw() {
for (const obj of state.design.objects) drawObject(obj);
if (state.design.cutMode === "cutmark" || state.design.cutMode === "cutmark-chain") {
ctx.strokeStyle = "#111";
ctx.strokeStyle = inkColor();
ctx.setLineDash([4, 4]);
const x = canvas.width - mmToPx(1.5);
ctx.beginPath();
@@ -477,8 +503,11 @@ document.getElementById("detectTape").addEventListener("click", async () => {
}
controls.tapeWidth.value = String(payload.width);
state.design.tapeWidthMm = Number(payload.width);
updateTapeInfo(payload);
draw();
setMessage(`Band erkannt: ${payload.width} mm`, "success");
const bg = payload.tapeColor?.name ? `, ${payload.tapeColor.name}` : "";
const text = payload.textColor?.name ? ` / ${payload.textColor.name}` : "";
setMessage(`Band erkannt: ${payload.width} mm${bg}${text}`, "success");
});
document.getElementById("saveLayout").addEventListener("click", () => {
app/static/mobile.css
+36
View File
@@ -174,6 +174,42 @@ button.primary {
line-height: 1.35;
}
.tape-info {
display: grid;
gap: 8px;
padding: 10px;
border: 1px solid #444;
border-radius: 7px;
background: #2f2f2f;
}
.tape-info div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.tape-info span {
color: #b7b7b7;
}
.tape-info strong {
display: inline-flex;
align-items: center;
gap: 7px;
color: #f2f2f2;
text-align: right;
}
.tape-info i {
width: 18px;
height: 18px;
border: 1px solid #777;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.bottom-actions {
position: fixed;
left: 0;
app/static/mobile.js
+23 -1
View File
@@ -7,6 +7,12 @@ const fields = {
align: document.getElementById("mobileAlign"),
bold: document.getElementById("mobileBold"),
frame: document.getElementById("mobileFrame"),
tapeInfo: document.getElementById("mobileTapeInfo"),
tapeInfoType: document.getElementById("mobileTapeInfoType"),
tapeBgSwatch: document.getElementById("mobileTapeBgSwatch"),
tapeBgText: document.getElementById("mobileTapeBgText"),
tapeTextSwatch: document.getElementById("mobileTapeTextSwatch"),
tapeTextText: document.getElementById("mobileTapeTextText"),
preview: document.getElementById("mobilePreview"),
message: document.getElementById("mobileMessage"),
};
@@ -23,6 +29,19 @@ function setMessage(text, type = "") {
fields.message.className = `message ${type}`;
}
function updateTapeInfo(info) {
fields.tapeInfo.hidden = !info;
if (!info) return;
const media = info.mediaType?.name || "Unbekannt";
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.tapeBgText.textContent = `${bg.name}${bg.code ? ` (${bg.code})` : ""}`;
fields.tapeBgSwatch.style.background = bg.css;
fields.tapeTextText.textContent = `${text.name}${text.code ? ` (${text.code})` : ""}`;
fields.tapeTextSwatch.style.background = text.css;
}
function mobileDesign() {
const tapeWidth = Number(fields.tape.value);
const margin = Number(fields.margin.value);
@@ -94,7 +113,10 @@ document.getElementById("mobileDetect").addEventListener("click", async () => {
return;
}
fields.tape.value = String(payload.width);
setMessage(`Band erkannt: ${payload.width} mm`, "success");
updateTapeInfo(payload);
const bg = payload.tapeColor?.name ? `, ${payload.tapeColor.name}` : "";
const text = payload.textColor?.name ? ` / ${payload.textColor.name}` : "";
setMessage(`Band erkannt: ${payload.width} mm${bg}${text}`, "success");
});
["text", "font", "margin", "frame", "bold", "align", "tape"].forEach((name) => {
app/static/style.css
+36
View File
@@ -163,6 +163,42 @@ textarea {
line-height: 1.35;
}
.tape-info {
display: grid;
gap: 8px;
padding: 10px;
border: 1px solid #444;
border-radius: 7px;
background: #2f2f2f;
}
.tape-info div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.tape-info span {
color: #b7b7b7;
}
.tape-info strong {
display: inline-flex;
align-items: center;
gap: 7px;
color: #f2f2f2;
text-align: right;
}
.tape-info i {
width: 18px;
height: 18px;
border: 1px solid #777;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.sidebar label {
display: grid;
gap: 6px;
app/templates/index.html
+14
View File
@@ -52,6 +52,20 @@
<button id="detectTape" type="button">Erkennen</button>
</div>
</label>
<div id="tapeInfo" class="tape-info" hidden>
<div>
<span>Band</span>
<strong id="tapeInfoType">-</strong>
</div>
<div>
<span>Hintergrund</span>
<strong><i id="tapeBgSwatch"></i><span id="tapeBgText">-</span></strong>
</div>
<div>
<span>Schrift</span>
<strong><i id="tapeTextSwatch"></i><span id="tapeTextText">-</span></strong>
</div>
</div>
<label>
Laenge
<input id="lengthMm" type="number" min="10" max="500" step="1" value="70">
app/templates/mobile.html
+14
View File
@@ -41,6 +41,20 @@
<input id="mobileCopies" type="number" min="1" max="20" step="1" value="1">
</label>
</div>
<div id="mobileTapeInfo" class="tape-info" hidden>
<div>
<span>Band</span>
<strong id="mobileTapeInfoType">-</strong>
</div>
<div>
<span>Hintergrund</span>
<strong><i id="mobileTapeBgSwatch"></i><span id="mobileTapeBgText">-</span></strong>
</div>
<div>
<span>Schrift</span>
<strong><i id="mobileTapeTextSwatch"></i><span id="mobileTapeTextText">-</span></strong>
</div>
</div>
<div class="grid-2">
<label>