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/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) => {