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
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", () => {