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