`;
- b.querySelector("b").textContent = g.title;
- b.addEventListener("click", () => {
- $("gallery").close();
- chooseDesign(g.title);
- });
- designs.append(b);
- }
- const menu = $("designsmenu");
- for (const g of C.gallery) {
- const b = document.createElement("button");
- b.textContent = g.title;
- b.title = g.about;
- b.addEventListener("click", () => {
- closeMenus();
- chooseDesign(g.title);
- });
- menu.append(b);
- }
-}
-
-function chooseDesign(title) {
- return withBusy("Getting it ready…", async () =>
- replace(JSON.parse(await helper.call("design_of", title, JSON.stringify(params)))));
-}
-
-function openHelp(which) {
- const titles = { printing: "Printing it watertight", function: "Your own function", drawing: "Drawing a cross-section",
- about: `About Vaseinator ${C.version}` };
- $("helptitle").textContent = titles[which];
- $("helptext").innerHTML = C.help[which];
- $("helpexamples").hidden = which !== "function";
- $("help").showModal();
-}
-
-async function withBusy(text, work) {
- showBusy(text);
- try {
- await work();
- } catch (err) {
- showProblem(err.message);
- throw err;
- } finally {
- if (!busy) showBusy(null);
- }
-}
-
-function download(data, name, type) {
- const url = URL.createObjectURL(data instanceof Blob ? data : new Blob([data], { type }));
- const a = document.createElement("a");
- a.href = url;
- a.download = name;
- document.body.append(a);
- a.click();
- a.remove();
- setTimeout(() => URL.revokeObjectURL(url), 10000);
-}
-
-function offer(data, name, type, title, steps = "") {
- // a file that took a while to make: a browser only lets a click save a file straight away, so the file is
- // offered with a button of its own to click
- const link = $("stepsfile");
- if (link.href) URL.revokeObjectURL(link.href);
- link.href = URL.createObjectURL(new Blob([data], { type }));
- link.download = name;
- link.textContent = `Save ${name}`;
- $("stepstitle").textContent = title;
- $("steplist").innerHTML = steps;
- $("steps").showModal();
- link.focus();
-}
-
-function fileName() {
- return (params.name || "vase").replace(/[^\w\- ]/g, "_").trim() || "vase";
-}
-
-// ================================================================== the menus and buttons
-let currentView = 0;
-
-function setView(n) {
- currentView = n;
- view.setMode(n);
- document.querySelectorAll(".views button").forEach((b) => b.setAttribute("aria-pressed", String(Number(b.dataset.view) === n)));
-}
-
-function toggle(id, on) {
- $(id).setAttribute("aria-pressed", String(on));
-}
-
-function effectiveLight() {
- const t = document.documentElement.dataset.theme;
- return t ? t === "light" : window.matchMedia("(prefers-color-scheme: light)").matches;
-}
-
-const actions = {
- new: () => replace({ ...C.defaults, ...Object.fromEntries(C.printer_keys.map((k) => [k, params[k]])) }),
- plain: () => chooseDesign("Plain cylinder"),
- open: () => $("openfile").click(),
- savevase: async () => download(await helper.call("save_vase", JSON.stringify(params)), fileName() + ".vase", "application/json"),
- print: () => withBusy("Making the file for your slicer…", async () => {
- const { data, steps } = await builder.call("export_3mf", JSON.stringify(params));
- offer(data, fileName() + ".3mf", "model/3mf", "How to print it", steps);
- }).catch(() => {}),
- lid: () => withBusy("Making the lid…", async () => {
- const { data, steps } = await builder.call("export_lid", JSON.stringify(params));
- offer(data, fileName() + " lid.3mf", "model/3mf", "How to print the lid", steps);
- }).catch(() => {}),
- stl: () => withBusy("Making the STL…", async () =>
- offer(await builder.call("export_stl", JSON.stringify(params)), fileName() + ".stl", "model/stl",
- "Your STL is ready")).catch(() => {}),
- "3mf": () => withBusy("Making the 3MF…", async () => {
- const { data } = await builder.call("export_3mf", JSON.stringify(params));
- offer(data, fileName() + ".3mf", "model/3mf", "Your 3MF is ready",
- "In your slicer, open it with File ▸ Import.
"); - }).catch(() => {}), - picture: async () => download(await view.picture(), fileName() + "_3d.png", "image/png"), - undo: () => step(undoStack, redoStack), - redo: () => step(redoStack, undoStack), - surprise: () => withBusy("Thinking of something…", async () => - replace(JSON.parse(await helper.call("surprise_me", JSON.stringify(params), Math.floor(Math.random() * 1e6))))).catch(() => {}), - plan: async () => { - if (!meta) return; - try { - await navigator.clipboard.writeText(meta.plan); - status("Colour changes copied to the clipboard"); - } catch { - status("The browser didn't allow copying: the colour changes are in the panel"); - } - }, - gallery: () => $("gallery").showModal(), - view0: () => setView(0), - view1: () => setView(1), - view2: () => setView(2), - view3: () => setView(3), - spin: () => { - const on = $("spin").getAttribute("aria-pressed") !== "true"; - view.setSpin(on); - toggle("spin", on); - }, - printing: () => { - const on = $("printing").getAttribute("aria-pressed") !== "true"; - view.setPrinting(on); - toggle("printing", on); - }, - reset: () => view.reset(), - bigger: () => { - const on = $("bigger").getAttribute("aria-pressed") !== "true"; - document.documentElement.style.setProperty("--scale", on ? "1.25" : "1"); - toggle("bigger", on); - store.set("bigger", on); - }, - theme: () => { - const light = !effectiveLight(); - document.documentElement.dataset.theme = light ? "light" : "dark"; - store.set("theme", light ? "light" : "dark"); - drawPlots(); - Object.values(editors).forEach((e) => e.draw()); - for (const w of widgets.values()) if (w.set) w.set(params); - }, - "help-printing": () => openHelp("printing"), - "help-function": () => openHelp("function"), - "help-drawing": () => openHelp("drawing"), - "help-about": () => openHelp("about"), -}; - -function closeMenus(except) { - document.querySelectorAll(".menu[open]").forEach((m) => { if (m !== except) m.open = false; }); -} - -function wire() { - document.addEventListener("click", (e) => { - const b = e.target.closest("[data-do]"); - if (b) { - closeMenus(); - if (C && actions[b.dataset.do]) actions[b.dataset.do](); - return; - } - if (!e.target.closest(".menu")) closeMenus(); - }); - document.querySelectorAll(".menu").forEach((m) => m.addEventListener("toggle", () => { if (m.open) closeMenus(m); })); - document.querySelectorAll(".views button").forEach((b) => b.addEventListener("click", () => setView(Number(b.dataset.view)))); - $("simplebtn").addEventListener("click", () => setMode(false)); - $("advancedbtn").addEventListener("click", () => setMode(true)); - $("openfile").addEventListener("change", async (e) => { - const file = e.target.files[0]; - e.target.value = ""; - if (!file) return; - await withBusy("Opening it…", async () => replace(JSON.parse(await helper.call("open_vase", await file.text())))).catch(() => {}); - }); - $("picturefile").addEventListener("change", (e) => { - const file = e.target.files[0]; - e.target.value = ""; - if (file) traceFile(file); - }); - $("useexample").addEventListener("click", () => { - setFormula($("examplepick").value); - $("help").close(); - }); - document.addEventListener("keydown", (e) => { - if (!C) return; - const typing = e.target.matches("input, textarea, select"); - if (e.ctrlKey || e.metaKey) { - const key = e.key.toLowerCase(); - const act = { z: e.shiftKey ? "redo" : "undo", y: "redo", s: "savevase", o: "open", g: "gallery" }[key]; - if (!act || (typing && (key === "z" || key === "y"))) return; - e.preventDefault(); - actions[act](); - } else if (!typing && !e.target.matches("canvas") && (e.key === "s" || e.key === "S")) { - actions.spin(); - } - }); - const theme = store.get("theme"); - if (theme) document.documentElement.dataset.theme = theme; - if (store.get("bigger")) actions.bigger(); -} - -// ================================================================== starting up -function failed(text) { - $("loading").hidden = false; - $("loading").classList.add("failed"); - $("loadingtext").textContent = `Vaseinator couldn't start: ${text}. Check the internet connection, then reload ` + - "the page."; -} - -async function boot() { - wire(); - try { - const [choices] = await Promise.all([helper.call("start"), builder.call("start")]); - C = JSON.parse(choices); - } catch (err) { - failed(err.message); - return; - } - K = C.constants; - $("examplepick").append(...C.examples.map(([n, f]) => new Option(`${n}: ${f}`, f))); - buildSimple(); - buildAdvanced(); - buildOutlineWindow(); - buildGallery(); - const printer = store.get("printer") || {}; - params = { ...C.defaults, ...(store.get("design") || {}), ...printer }; - $("loading").hidden = true; - undoButtons(); - setMode(Boolean(store.get("advanced"))); - settled({ refit: true }); -} - -boot(); +// Vaseinator on the web: the desktop app, Simple and Advanced. The vase is built by the app's own Python (in +// worker.js, with Pyodide) - the settings, the rules for which are shown and what each change brings with it, +// and the report beside the view are the desktop app's own - and drawn here with three.js. + +import { CurveEditor } from "./curves.js"; +import { OutlineEditor } from "./outline.js"; +import { drawSide, drawTop } from "./plots.js"; +import { View } from "./view.js"; +import { libraryDialog } from "./library.js"; + +const $ = (id) => document.getElementById(id); + +// what this browser remembers: the design, the printer, the mode and the look - if it may +const store = { + get(key) { + try { return JSON.parse(localStorage.getItem("vaseinator." + key)); } catch { return null; } + }, + set(key, value) { + try { localStorage.setItem("vaseinator." + key, JSON.stringify(value)); } catch { /* private window */ } + }, +}; + +// ================================================================== Python, in two workers +// one builds the vase (which can take a few seconds); the other answers everything else straight away +class Python { + constructor() { + this.worker = new Worker("worker.js"); + this.waiting = new Map(); + this.next = 1; + this.worker.onmessage = (event) => { + const { id, ok, result, error } = event.data; + const w = this.waiting.get(id); + this.waiting.delete(id); + if (ok) w.resolve(result); + else w.reject(new Error(lastLine(error))); + }; + this.worker.onerror = (event) => { + for (const w of this.waiting.values()) w.reject(new Error(event.message || "Python stopped")); + this.waiting.clear(); + failed(event.message || "Python stopped"); + }; + } + + call(name, ...args) { + return new Promise((resolve, reject) => { + const id = this.next++; + this.waiting.set(id, { resolve, reject }); + this.worker.postMessage({ id, call: name, args }); + }); + } +} + +function lastLine(text) { + // a Python error comes with its whole traceback: its last line says what went wrong + const lines = String(text).trim().split("\n"); + return lines[lines.length - 1].replace(/^\w*Error: /, ""); +} + +const builder = new Python(); +const helper = new Python(); + +// ================================================================== the design +let C = null; // the settings, choices, constants and help, from Python +let K = null; // C.constants +let params = null; // the design's settings +let libraryState = store.get("library"); +let recoveryTimer = 0; +let meta = null; // what the last build says about it +let shown = new Set(); // the Advanced settings shown for it +const undoStack = []; +const redoStack = []; +let liveFrom = null; // the settings before a drag began, for Undo +let queue = Promise.resolve(); +let pendingText = null; +function flushText() { + if (pendingText) pendingText(); +} +function enqueue(work) { + const result = queue.then(work); + queue = result.catch((err) => showProblem(err.message)); + return queue; +} + +function pushUndo(snapshot) { + undoStack.push(snapshot); + if (undoStack.length > 100) undoStack.shift(); + redoStack.length = 0; + undoButtons(); +} + +function undoButtons() { + $("undo").disabled = !undoStack.length; + $("redo").disabled = !redoStack.length; +} + +function status(text) { + $("status").textContent = text || ""; +} + +function needsNormal(p) { + // holes, a face, an open bottom or a wall part way round: spiral vase mode prints one closed line a layer + return p.holes !== 0 || p.open_bottom || p.around < 360 || p.eyes !== 0 || p.mouth !== 0 || p.straps || p.box; +} + +function change(updates) { return enqueue(() => changeNow(updates)); } +function changeNow(updates) { + // several settings at once, as a picture in Simple mode sets them + if (!C) return; + pushUndo(JSON.stringify(params)); + Object.assign(params, typeof updates === "function" ? updates(params) : updates); + if (params.vase_mode === K.REAL_VASE && needsNormal(params)) params.vase_mode = K.FAKE_VASE; + settled({}); +} + +function commit(key, value, live = false) { return enqueue(() => commitNow(key, value, live)); } +async function commitNow(key, value, live = false) { + // one setting, as the desktop app's panel changes it: Python applies the app's own rules + if (!C) return Promise.resolve(); + if (live) { + if (liveFrom === null) liveFrom = JSON.stringify(params); + params[key] = value; + if (key === "silhouette") params.profile = K.OWN_PROFILE; + rebuild({ live: true }); + return Promise.resolve(); + } + { + const before = liveFrom !== null ? liveFrom : JSON.stringify(params); + liveFrom = null; + try { + const r = JSON.parse(await helper.call("apply", JSON.stringify(params), key, JSON.stringify(value))); + pushUndo(before); + params = r.params; + shown = new Set(r.shown); + status(r.message); + settled({ known: true }); + } catch (err) { + showProblem(err.message); + } + } +} + +function settled({ refit = false, known = false }) { + store.set("design", params); + rememberPrinter(); + clearTimeout(recoveryTimer); + const snapshot = JSON.stringify(params); + recoveryTimer = setTimeout(() => enqueue(() => libraryWork("recover", {}, snapshot)), 1500); + refreshSimple(); + refreshAdvanced(); + if (!known) { + const snapshot = JSON.stringify(params); + helper.call("shown", snapshot).then((keys) => { + if (JSON.stringify(params) !== snapshot) return; + shown = new Set(JSON.parse(keys)); + refreshAdvanced(); + }).catch(() => {}); + } + rebuild({ refit }); +} + +function replace(next, refit = true) { return enqueue(() => replaceNow(next, refit)); } +function replaceNow(next, refit = true) { + pushUndo(JSON.stringify(params)); + params = next; + settled({ refit }); +} + +function step(from, to) { return enqueue(() => stepNow(from, to)); } +function stepNow(from, to) { + if (!from.length) return; + to.push(JSON.stringify(params)); + params = JSON.parse(from.pop()); + undoButtons(); + settled({}); +} + +// ================================================================== building it +let seq = 0; // the newest design asked for +let wanted = null; // the next build to do +let busy = false; +let refit = true; +let refineTimer = 0; + +function rebuild({ refit: fit = false, live = false } = {}) { + seq += 1; + refit = refit || fit; + clearTimeout(refineTimer); + wanted = { seq, draft: true, live, text: JSON.stringify(params) }; + pump(); +} + +async function pump() { + if (busy || !wanted) return; + const job = wanted; + wanted = null; + busy = true; + showBusy(job.draft ? "Building…" : "Adding the fine detail…"); + let result = null; + try { + result = await builder.call("build", job.text, job.draft); + } catch (err) { + showProblem(err.message); + } + busy = false; + if (result && job.seq === seq) { + show(result); + if (job.draft && !job.live) { + // a quick draft first; then, if nothing changes for a moment, the vase in full detail + refineTimer = setTimeout(() => { + if (job.seq === seq) { + wanted = { seq: job.seq, draft: false, text: job.text }; + pump(); + } + }, 600); + } + } + if (wanted) pump(); + else showBusy(null); +} + +function showBusy(text) { + $("busy").hidden = !text; + if (text) $("busytext").textContent = text; +} + +// ================================================================== the view, the pictures, the report +const view = new View($("canvas"), $("viewer"), (text) => { $("hint").textContent = text; }); +window.vaseinator = { view, get params() { return params; }, get meta() { return meta; } }; // for checking it + +function show(result) { + const m = JSON.parse(result.meta); + if (m.errors && m.errors.length) { + $("report").innerHTML = m.report; + flagCrossing(m.errors); + return; + } + flagCrossing([]); + meta = m; + view.show(result, m, refit); + refit = false; + setNumber($("head"), m.head); + setNumber(widgetInput("head"), m.head); + lightTile($("pattern"), m.pattern); + $("report").innerHTML = m.report; + drawPlots(); +} + +function drawPlots() { + if (!meta) return; + drawSide($("sideplot"), meta.plots); + drawTop($("topplot"), meta.plots); +} +new ResizeObserver(drawPlots).observe($("plots")); + +function showProblem(text) { + const p = document.createElement("p"); + p.className = "e"; + p.textContent = `✗ ${text}`; + $("report").prepend(p); +} + +function flagCrossing(errors) { + // a drawn outline that crosses itself: the build says so; the editors show it red themselves + const crossing = errors.some((e) => e.includes("crosses itself")); + document.body.classList.toggle("crossing", crossing); +} + +// ================================================================== Simple: the pictures +const ACCENT = "#F0A356"; +const EDGE = "#966636"; +const DEEP = "#82582E"; +const svg = (body, size = 52) => ``; + +function aboveIcon(outline) { + const pts = outline.map(([x, y]) => `${(26 + 22.9 * x).toFixed(1)},${(26 - 22.9 * y).toFixed(1)}`).join(" "); + return svg(``;
+ b.querySelector("b").textContent = g.title;
+ b.addEventListener("click", () => {
+ $("gallery").close();
+ chooseDesign(g.title);
+ });
+ designs.append(b);
+ }
+ const menu = $("designsmenu");
+ for (const g of C.gallery) {
+ const b = document.createElement("button");
+ b.textContent = g.title;
+ b.title = g.about;
+ b.addEventListener("click", () => {
+ closeMenus();
+ chooseDesign(g.title);
+ });
+ menu.append(b);
+ }
+}
+
+function chooseDesign(title) {
+ return enqueue(() => withBusy("Getting it ready…", async () =>
+ replaceNow(JSON.parse(await helper.call("design_of", title, JSON.stringify(params))))));
+}
+
+function openHelp(which) {
+ const titles = { printing: "Printing it watertight", function: "Your own function", drawing: "Drawing a cross-section",
+ about: `About Vaseinator ${C.version}` };
+ $("helptitle").textContent = titles[which];
+ $("helptext").innerHTML = C.help[which];
+ $("helpexamples").hidden = which !== "function";
+ $("help").showModal();
+}
+
+async function withBusy(text, work) {
+ showBusy(text);
+ try {
+ await work();
+ } catch (err) {
+ showProblem(err.message);
+ throw err;
+ } finally {
+ if (!busy) showBusy(null);
+ }
+}
+
+function download(data, name, type) {
+ const url = URL.createObjectURL(data instanceof Blob ? data : new Blob([data], { type }));
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = name;
+ document.body.append(a);
+ a.click();
+ a.remove();
+ setTimeout(() => URL.revokeObjectURL(url), 10000);
+}
+
+function offer(data, name, type, title, steps = "") {
+ // a file that took a while to make: a browser only lets a click save a file straight away, so the file is
+ // offered with a button of its own to click
+ const link = $("stepsfile");
+ if (link.href) URL.revokeObjectURL(link.href);
+ link.href = URL.createObjectURL(new Blob([data], { type }));
+ link.download = name;
+ link.textContent = `Save ${name}`;
+ $("stepstitle").textContent = title;
+ $("steplist").innerHTML = steps;
+ $("steps").showModal();
+ link.focus();
+}
+
+function fileName() {
+ return (params.name || "vase").replace(/[^\w\- ]/g, "_").trim() || "vase";
+}
+
+// ================================================================== the menus and buttons
+let currentView = 0;
+
+function setView(n) {
+ currentView = n;
+ view.setMode(n);
+ document.querySelectorAll(".views button").forEach((b) => b.setAttribute("aria-pressed", String(Number(b.dataset.view) === n)));
+}
+
+function toggle(id, on) {
+ $(id).setAttribute("aria-pressed", String(on));
+}
+
+function effectiveLight() {
+ const t = document.documentElement.dataset.theme;
+ return t ? t === "light" : window.matchMedia("(prefers-color-scheme: light)").matches;
+}
+
+async function libraryWork(op, payload = {}, text = JSON.stringify(params)) {
+ const result = JSON.parse(await helper.call("workspace_action", libraryState ? JSON.stringify(libraryState) : "", text, op, JSON.stringify(payload)));
+ libraryState = result.workspace;
+ // Unlike optional preferences, library failures must be visible to avoid silent data loss.
+ try { localStorage.setItem("vaseinator.library", JSON.stringify(libraryState)); }
+ catch { showProblem("The library could not be saved in this browser. Export a backup before closing the page."); }
+ if (result.params) replaceNow(result.params);
+ return result;
+}
+
+function openLibrary() {
+ libraryDialog({
+ current: () => params,
+ read: () => enqueue(() => libraryWork("read")),
+ command: (op, data) => { flushText(); return enqueue(() => libraryWork(op, data)); },
+ exportFile: () => enqueue(() => download(JSON.stringify(libraryState, null, 2), "vaseinator-library.json", "application/json")),
+ importFile: (refresh) => {
+ const input = document.createElement("input"); input.type = "file"; input.accept = ".json";
+ input.onchange = async () => { if (input.files[0]) { await enqueue(async () => libraryWork("import", JSON.parse(await input.files[0].text()))); refresh(); } };
+ input.click();
+ },
+ });
+}
+
+const actions = {
+ library: openLibrary,
+ compare: () => enqueue(() => withBusy("Comparing the surfaces…", async () => {
+ const data = JSON.parse(await builder.call("compare_design", JSON.stringify(params)));
+ $("helptitle").textContent = "Original and softened";
+ $("helptext").replaceChildren();
+ const text = document.createElement("p"); text.textContent = data.text;
+ const image = document.createElement("img"); image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(data.svg); image.alt = data.text; image.style.width = "100%";
+ $("helptext").append(text, image); $("helpexamples").hidden = true; $("help").showModal();
+ })),
+ calibration: () => enqueue(() => withBusy("Making clearance samples…", async () => {
+ const {data, steps} = await builder.call("export_calibration", JSON.stringify(params));
+ offer(data, "clearance_samples.3mf", "model/3mf", "How to use the samples", steps);
+ })),
+ new: () => enqueue(() => replaceNow({ ...C.defaults, ...Object.fromEntries(C.printer_keys.map((k) => [k, params[k]])) })),
+ plain: () => chooseDesign("Plain cylinder"),
+ open: () => $("openfile").click(),
+ savevase: async () => download(await helper.call("save_vase", JSON.stringify(params)), fileName() + ".vase", "application/json"),
+ print: () => withBusy("Making the file for your slicer…", async () => {
+ const { data, steps } = await builder.call("export_3mf", JSON.stringify(params));
+ offer(data, fileName() + ".3mf", "model/3mf", "How to print it", steps);
+ }).catch(() => {}),
+ lid: () => withBusy("Making the lid…", async () => {
+ const { data, steps } = await builder.call("export_lid", JSON.stringify(params));
+ offer(data, fileName() + " lid.3mf", "model/3mf", "How to print the lid", steps);
+ }).catch(() => {}),
+ stl: () => withBusy("Making the STL…", async () =>
+ offer(await builder.call("export_stl", JSON.stringify(params)), fileName() + ".stl", "model/stl",
+ "Your STL is ready")).catch(() => {}),
+ "3mf": () => withBusy("Making the 3MF…", async () => {
+ const { data } = await builder.call("export_3mf", JSON.stringify(params));
+ offer(data, fileName() + ".3mf", "model/3mf", "Your 3MF is ready",
+ "In your slicer, open it with File ▸ Import.
"); + }).catch(() => {}), + picture: async () => download(await view.picture(), fileName() + "_3d.png", "image/png"), + undo: () => step(undoStack, redoStack), + redo: () => step(redoStack, undoStack), + surprise: () => enqueue(() => withBusy("Thinking of something…", async () => + replaceNow(JSON.parse(await helper.call("surprise_me", JSON.stringify(params), Math.floor(Math.random() * 1e6), JSON.stringify(libraryState?.locks || []))))).catch(() => {})), + plan: async () => { + if (!meta) return; + try { + await navigator.clipboard.writeText(meta.plan); + status("Colour changes copied to the clipboard"); + } catch { + status("The browser didn't allow copying: the colour changes are in the panel"); + } + }, + gallery: () => $("gallery").showModal(), + view0: () => setView(0), + view1: () => setView(1), + view2: () => setView(2), + view3: () => setView(3), + spin: () => { + const on = $("spin").getAttribute("aria-pressed") !== "true"; + view.setSpin(on); + toggle("spin", on); + }, + printing: () => { + const on = $("printing").getAttribute("aria-pressed") !== "true"; + view.setPrinting(on); + toggle("printing", on); + }, + reset: () => view.reset(), + bigger: () => { + const on = $("bigger").getAttribute("aria-pressed") !== "true"; + document.documentElement.style.setProperty("--scale", on ? "1.25" : "1"); + toggle("bigger", on); + store.set("bigger", on); + }, + theme: () => { + const light = !effectiveLight(); + document.documentElement.dataset.theme = light ? "light" : "dark"; + store.set("theme", light ? "light" : "dark"); + drawPlots(); + Object.values(editors).forEach((e) => e.draw()); + for (const w of widgets.values()) if (w.set) w.set(params); + }, + "help-printing": () => openHelp("printing"), + "help-function": () => openHelp("function"), + "help-drawing": () => openHelp("drawing"), + "help-about": () => openHelp("about"), +}; + +for (const key of ["savevase", "print", "lid", "stl", "3mf", "picture", "plan"]) { + const action = actions[key]; + actions[key] = () => enqueue(action); +} +for (const key of Object.keys(actions)) { + const action = actions[key]; + actions[key] = () => { flushText(); return action(); }; +} + +function closeMenus(except) { + document.querySelectorAll(".menu[open]").forEach((m) => { if (m !== except) m.open = false; }); +} + +function wire() { + document.addEventListener("click", (e) => { + const b = e.target.closest("[data-do]"); + if (b) { + closeMenus(); + if (C && actions[b.dataset.do]) actions[b.dataset.do](); + return; + } + if (!e.target.closest(".menu")) closeMenus(); + }); + document.querySelectorAll(".menu").forEach((m) => m.addEventListener("toggle", () => { if (m.open) closeMenus(m); })); + document.querySelectorAll(".views button").forEach((b) => b.addEventListener("click", () => setView(Number(b.dataset.view)))); + $("simplebtn").addEventListener("click", () => setMode(false)); + $("advancedbtn").addEventListener("click", () => setMode(true)); + $("openfile").addEventListener("change", async (e) => { + const file = e.target.files[0]; + e.target.value = ""; + if (!file) return; + await enqueue(() => withBusy("Opening it…", async () => replaceNow(JSON.parse(await helper.call("open_vase", await file.text()))))); + }); + $("picturefile").addEventListener("change", (e) => { + const file = e.target.files[0]; + e.target.value = ""; + if (file) traceFile(file); + }); + $("useexample").addEventListener("click", () => { + setFormula($("examplepick").value); + $("help").close(); + }); + document.addEventListener("keydown", (e) => { + if (!C) return; + const typing = e.target.matches("input, textarea, select"); + if (e.ctrlKey || e.metaKey) { + const key = e.key.toLowerCase(); + const act = { z: e.shiftKey ? "redo" : "undo", y: "redo", s: "savevase", o: "open", g: "gallery" }[key]; + if (!act || (typing && (key === "z" || key === "y"))) return; + e.preventDefault(); + actions[act](); + } else if (!typing && !e.target.matches("canvas") && (e.key === "s" || e.key === "S")) { + actions.spin(); + } + }); + const theme = store.get("theme"); + if (theme) document.documentElement.dataset.theme = theme; + if (store.get("bigger")) actions.bigger(); +} + +// ================================================================== starting up +function failed(text) { + $("loading").hidden = false; + $("loading").classList.add("failed"); + $("loadingtext").textContent = `Vaseinator couldn't start: ${text}. Check the internet connection, then reload ` + + "the page."; +} + +async function boot() { + wire(); + try { + const [choices] = await Promise.all([helper.call("start"), builder.call("start")]); + C = JSON.parse(choices); + } catch (err) { + failed(err.message); + return; + } + K = C.constants; + $("examplepick").append(...C.examples.map(([n, f]) => new Option(`${n}: ${f}`, f))); + buildSimple(); + buildAdvanced(); + buildOutlineWindow(); + buildGallery(); + const printer = store.get("printer") || {}; + params = { ...C.defaults, ...printer, ...(store.get("design") || {}) }; + $("loading").hidden = true; + undoButtons(); + setMode(Boolean(store.get("advanced"))); + settled({ refit: true }); +} + +boot(); diff --git a/web/bridge.py b/web/bridge.py index 07a9c84..28bcd5d 100644 --- a/web/bridge.py +++ b/web/bridge.py @@ -1,294 +1,307 @@ -"""The web page's Python: the same vaseinator package as the desktop app, run in the browser by Pyodide. - -The page's workers call these functions with settings as JSON text and get JSON text back - and, for a -built vase, its mesh as raw bytes the page draws with three.js. The settings, the rules for which are shown -and what a change brings with it, the panel's report and the help are the desktop app's own. -""" - -from __future__ import annotations - -import base64 -import io -import json -import math -import os -import re -import tempfile - -import numpy as np - -from vaseinator import __version__, sections -from vaseinator.choices import (COLOURS, MANY_COLOURS, NO_PATTERN, PATTERNS, SHAPES_FROM_ABOVE, TISSUE_HOLES, pattern_of, - twist_words) -from vaseinator.expr import EXAMPLES -from vaseinator.geometry import TOLERANCE, VaseDesign, fit_head -from vaseinator.lid import Lid -from vaseinator.params import (CIRCLE, DRAWN, EVENLY, FAKE_VASE, FILE_FORMAT, FILE_VERSION, ONE_COLOUR, OWN, - OWN_PROFILE, POLYGON, REAL_VASE, SAME, TISSUE_OVAL, TISSUE_ROUND, VaseParams) -from vaseinator.presets import GALLERY, PRINTER_KEYS, gallery_design, plain_design, slug, surprise -from vaseinator.report import ABOUT, DRAWING_HELP, PRINTING_HELP, function_help, info_html, lid_steps, print_steps -from vaseinator.settings import COLOUR_STYLES, LIVE_KEYS, REAL_COLOUR_STYLES, SPEC, TEXT_KEYS, change, wanted -from vaseinator.shapes import PALETTES, PROFILES, SHAPE_LABELS, pchip, shape_table -from vaseinator.stl import write_stl -from vaseinator.threemf import write_3mf - -SLICES = 14 # layers drawn in the from-above picture, as the desktop app draws them - - -def _report(d, errors, warnings) -> str: - """The desktop app's report, without its own style sheet: the page styles it.""" - return re.sub(r"^", "", info_html(d, errors, warnings), flags=re.S) - - -def _params(text: str) -> VaseParams: - return VaseParams.from_dict(json.loads(text)) - - -def _dump(p: VaseParams) -> str: - return json.dumps(p.to_dict()) - - -def _shown(p: VaseParams) -> list: - return [row[0] for _, rows in SPEC for row in rows if wanted(p, row[0])] - - -# ------------------------------------------------------------------ the choices -def _spec(): - """Every setting, by group, as the Advanced panel lists them.""" - groups = [] - for title, items in SPEC: - rows = [] - for key, label, kind, lo, hi, step, extra, tip in items: - row = dict(key=key, label=label, kind=kind, tip=tip, extra=extra) - if kind == "choice": - row["choices"] = [[v, t] for v, t in lo] - elif kind == "curve": - row["curve"] = lo - else: - row.update(lo=lo, hi=hi, step=step) - rows.append(row) - groups.append(dict(title=title, rows=rows)) - return groups - - -def start() -> str: - """Everything the page needs: the gallery, the choices and pictures, every setting, the help.""" - def above(settings): - r = shape_table(settings.get("shape1", CIRCLE), settings.get("count1", 5), settings.get("depth1", 0.0), - settings.get("sharp1", 0.5)) - a = np.arange(len(r)) * (2 * math.pi / len(r)) + math.radians(settings.get("turn1", 0.0)) - step = max(len(r) // 160, 1) - return [[round(float(rr * math.cos(t)), 4), round(float(rr * math.sin(t)), 4)] - for rr, t in zip(r[::step], a[::step])] - - def side(points): - pts = np.asarray(points, dtype=float) - hs = np.linspace(0.0, 1.0, 40) - d = np.clip(pchip(pts[:, 0], pts[:, 1], hs), 0.05, None) - return [round(float(v), 4) for v in d / d.max()] - - palettes = dict(PALETTES) - return json.dumps(dict( - version=__version__, - gallery=[dict(title=t, about=about, slug=slug(t), worn=bool(ch.get("worn", False))) - for t, about, ch in GALLERY], - shapes=[dict(name=n, settings=s, outline=above(s)) for n, s in SHAPES_FROM_ABOVE], - profiles=[dict(name=full.split(" (")[0], full=full, widths=side(pts), points=[list(q) for q in pts]) - for full, pts in PROFILES], - patterns=[dict(name=n, settings=s) for n, s in PATTERNS], - tissue_holes=[dict(name=n, value=v) for n, v in TISSUE_HOLES], - no_pattern=NO_PATTERN, - colours=[dict(name=n, colour=c) for n, c in COLOURS], - many_colours=[dict(name=n, palette=pal, settings=s, colours=list(palettes[pal])) - for n, pal, s in MANY_COLOURS], - palettes=[dict(name=n, colours=list(c)) for n, c in PALETTES], - printer_keys=list(PRINTER_KEYS), - spec=_spec(), live_keys=sorted(LIVE_KEYS), text_keys=sorted(TEXT_KEYS), - colour_styles=[[v, t] for v, t in COLOUR_STYLES], - real_colour_styles=[[v, t] for v, t in REAL_COLOUR_STYLES], - outlines=[dict(name=n, points=[list(q) for q in pts], repeat=r) for n, pts, r in sections.OUTLINES], - examples=[[n, f] for n, f in EXAMPLES], - shape_labels={str(k): list(v) for k, v in SHAPE_LABELS.items()}, - help=dict(printing=PRINTING_HELP, drawing=DRAWING_HELP, about=ABOUT, function=function_help()), - constants=dict(SAME=SAME, CIRCLE=CIRCLE, POLYGON=POLYGON, DRAWN=DRAWN, OWN=OWN, OWN_PROFILE=OWN_PROFILE, - EVENLY=EVENLY, REAL_VASE=REAL_VASE, FAKE_VASE=FAKE_VASE, ONE_COLOUR=ONE_COLOUR, - TISSUE_OVAL=TISSUE_OVAL, TISSUE_ROUND=TISSUE_ROUND), - defaults=VaseParams().to_dict(), - plain=plain_design().to_dict(), - )) - - -def shown(text: str) -> str: - """Which settings the Advanced panel shows for this design.""" - return json.dumps(_shown(_params(text))) - - -def apply(text: str, key: str, value: str) -> str: - """One change, as the panel makes it, with what follows from it (the desktop app's own rules).""" - p = _params(text) - touched, message = change(p, key, json.loads(value)) - p = VaseParams.from_dict(p.to_dict()) - return json.dumps(dict(params=p.to_dict(), touched=touched, message=message, shown=_shown(p))) - - -def design_of(title: str, keep: str) -> str: - """A ready-made design (or the plain cylinder), with the printer settings of ``keep``.""" - k = _params(keep) - return _dump(plain_design(k) if title == "Plain cylinder" else gallery_design(title, keep=k)) - - -def surprise_me(keep: str, seed: int) -> str: - return _dump(surprise(_params(keep), int(seed))) - - -def fit(text: str, head_mm: float) -> str: - """The design scaled to fit a head this many mm round.""" - return _dump(fit_head(_params(text), float(head_mm))) - - -def trace(pixels: str, width: int, height: int) -> str: - """Control points tracing the outline drawn in a picture: its RGBA pixels, base64.""" - rgba = np.frombuffer(base64.b64decode(pixels), dtype=np.uint8).reshape(int(height), int(width), 4) - return json.dumps(sections.trace_rgba(rgba)) - - -# ------------------------------------------------------------------ building it -def _gradient(colours, phase): - """The blend the 3D view uses for a gradient spool, for each phase.""" - ring = np.asarray(colours, dtype=float) - n = len(ring) - ph = np.mod(phase, 1.0) * n - k = np.floor(ph).astype(int) % n - t = ph - np.floor(ph) - t = t * t * (3.0 - 2.0 * t) - return ring[k] * (1.0 - t)[:, None] + ring[(k + 1) % n] * t[:, None] - - -def _colours(d: VaseDesign, z: np.ndarray) -> np.ndarray: - """The colour of each height, as the desktop app's 3D view shows it: bands, or a gradient spool.""" - cols = d.p.colors() - if d.gradient: - return _gradient([cols[k] for k in d.gradient_fils], d.colour_phase(z)) - starts = np.array([b[0] for b in d.bands]) - band_cols = np.array([cols[f] for _, f in d.bands], dtype=float) - idx = np.clip(np.searchsorted(starts, z, side="right") - 1, 0, len(starts) - 1) - return band_cols[idx] - - -def _plots(d: VaseDesign) -> dict: - """What the side and from-above pictures under the 3D view draw, as the desktop app draws them.""" - z = np.asarray(d.profile_z, dtype=float) - step = max(1, len(z) // 400) - keep = np.unique(np.concatenate([np.arange(0, len(z), step), [len(z) - 1]])) - lim = d.p.max_overhang + TOLERANCE - bad = np.nonzero(d.band_lean > lim)[0] - bad_z = (z[np.minimum(bad, len(z) - 1)] if d.rows is None - else np.array([d.rows[min(b, len(d.rows) - 1)][0] for b in bad])) - moved = z[d.row_moved > 0.05] if d.softened > 0.05 and d.row_moved is not None else np.zeros(0) - heights = [min(max(d.H * k / SLICES, 0.02), d.H - 0.02) for k in range(SLICES + 1)] - slices = [np.round(d.contour(zc)[:, :, :2], 2).reshape(-1).tolist() for zc in heights] - return dict(z=np.round(z[keep], 3).tolist(), rmax=np.round(d.profile_max[keep], 3).tolist(), - rmin=np.round(d.profile_min[keep], 3).tolist(), colours=np.round(_colours(d, z[keep]), 4).tolist(), - zb=float(d.zb), bad=np.round(bad_z, 2).tolist(), moved=np.round(moved[::step], 2).tolist(), - slices=slices, slice_colours=np.round(_colours(d, np.array(heights)), 4).tolist(), - half=0.5 * float(max(d.size[0], d.size[1], 1.0)), height=float(d.H), widest=float(d.widest)) - - -def build(text: str, draft: bool): - """Build the vase. Returns (what the page shows about it, as JSON; positions; triangles; colours; each - corner's steepest lean) - the last four as raw float32 / uint32 bytes.""" - p = _params(text) - d = VaseDesign(p, draft=bool(draft)) - meta = dict(errors=d.errors, warnings=d.warnings) - if d.errors: - meta["report"] = _report(None, d.errors, d.warnings) - return json.dumps(meta), b"", b"", b"", b"" - verts = np.asarray(d.shell_verts, dtype=np.float64) - faces = np.asarray(d.shell_faces, dtype=np.int64) - lean = np.full(len(verts), -1.0) - np.maximum.at(lean, faces.ravel(), np.repeat(np.asarray(d.shell_lean, dtype=float), 3)) - fz, fa = np.asarray(d.filament_z, dtype=float), np.asarray(d.filament_at, dtype=float) - pick = np.unique(np.linspace(0, len(fz) - 1, min(len(fz), 300)).astype(int)) - meta.update( - info=d.info(), notes=d.notes, draft=bool(draft), height=float(d.H), size=[float(s) for s in d.size], - widest=float(max(v for _, v in p.silhouette)), head=round(float(d.head_fit) / 10.0, 1), - worn=bool(d.p.worn), pattern=pattern_of(d.p), - twist_words=twist_words(d.p.twist) if d.p.twist_style != OWN else "Your own curve", - ok=bool(d.worst <= d.p.max_overhang + TOLERANCE), look=int(d.p.look), normal=bool(d.normal), - triangles=int(len(faces)), bed=[float(d.p.bed_x), float(d.p.bed_y), float(d.p.printer_height)], - limit=float(d.p.max_overhang), report=_report(d, [], d.warnings), plan=d.colour_plan(), plots=_plots(d), - printing=dict(z=np.round(fz[pick], 3).tolist(), at=np.round(fa[pick], 2).tolist(), layers=int(d.layers), - seconds=float(d.seconds), grams=float(d.grams))) - colours = _colours(d, verts[:, 2]).astype(np.float32) - return (json.dumps(meta), verts.astype(np.float32).tobytes(), faces.astype(np.uint32).tobytes(), - colours.tobytes(), lean.astype(np.float32).tobytes()) - - -# ------------------------------------------------------------------ files -def _name(p: VaseParams) -> str: - name = "".join(ch if ch.isalnum() or ch in "-_ " else "_" for ch in p.name).strip() - return name or "vase" - - -def export_3mf(text: str): - """The vase for the slicer, as the desktop app's Save for printing makes it: a part per band of colour. - Returns (the file, the steps to print it, as HTML).""" - p = _params(text) - d = VaseDesign(p) - if d.errors: - raise ValueError("; ".join(d.errors)) - colors = d.p.colors() - parts = d.export_parts() - base = _name(p) - many = len(parts) > 1 - named = [(f"{base} band {k + 1}" if many else base, v, f, fil, colors[fil]) for k, (fil, v, f) in enumerate(parts)] - path = os.path.join(tempfile.gettempdir(), "vase.3mf") - write_3mf(path, base, named, (p.bed_x / 2.0, p.bed_y / 2.0, 0.0)) - with open(path, "rb") as fh: - data = fh.read() - steps = print_steps(d, f"{base}.3mf", len(parts)) - steps = re.sub(r"^Saved .*?
", "", steps, flags=re.S) # saved by the button above the steps - return data, steps.replace(" (the button below, or File ▸ Import)", " (File ▸ Import)") - - -def export_lid(text: str): - """A tissue box cover's lid, made to fit it, as the desktop app's Save the lid for printing makes it. - Returns (the file, the steps to print it and put it on, as HTML).""" - p = _params(text) - d = VaseDesign(p) - if d.errors: - raise ValueError("; ".join(d.errors)) - lid = Lid(d) - if lid.errors: - raise ValueError(" ".join(lid.errors)) - base = _name(p) + " lid" - path = os.path.join(tempfile.gettempdir(), "lid.3mf") - write_3mf(path, base, [(base, lid.verts, lid.faces, 1, d.p.colors()[1])], (p.bed_x / 2.0, p.bed_y / 2.0, 0.0)) - with open(path, "rb") as fh: - data = fh.read() - steps = re.sub(r"^Saved .*?
", "", lid_steps(lid, f"{base}.3mf"), flags=re.S) - return data, steps.replace(" (the button below, or File ▸ Import)", " (File ▸ Import)") - - -def export_stl(text: str) -> bytes: - p = _params(text) - d = VaseDesign(p) - if d.errors: - raise ValueError("; ".join(d.errors)) - path = os.path.join(tempfile.gettempdir(), "vase.stl") - write_stl(path, *d.export_mesh(), _name(p)) - with open(path, "rb") as fh: - return fh.read() - - -def save_vase(text: str) -> str: - """A .vase design file, the same as the desktop app saves.""" - return json.dumps({"format": FILE_FORMAT, "version": FILE_VERSION, "params": _params(text).to_dict()}, indent=2) - - -def open_vase(text: str) -> str: - """The settings from a .vase design file, made safe.""" - data = json.load(io.StringIO(text)) - if data.get("format") != FILE_FORMAT: - raise ValueError("That is not a Vaseinator design file.") - return _dump(VaseParams.from_dict(data.get("params", {}))) +"""The web page's Python: the same vaseinator package as the desktop app, run in the browser by Pyodide. + +The page's workers call these functions with settings as JSON text and get JSON text back - and, for a +built vase, its mesh as raw bytes the page draws with three.js. The settings, the rules for which are shown +and what a change brings with it, the panel's report and the help are the desktop app's own. +""" + +from __future__ import annotations + +import base64 +import io +import json +import math +import os +import re +import tempfile + +import numpy as np + +from vaseinator import __version__, sections +from vaseinator.choices import (COLOURS, MANY_COLOURS, NO_PATTERN, PATTERNS, SHAPES_FROM_ABOVE, TISSUE_HOLES, pattern_of, + twist_words) +from vaseinator.expr import EXAMPLES +from vaseinator.geometry import TOLERANCE, VaseDesign, fit_head, require_exportable +from vaseinator.lid import Lid +from vaseinator.params import (CIRCLE, DRAWN, EVENLY, FAKE_VASE, FILE_FORMAT, FILE_VERSION, ONE_COLOUR, OWN, + OWN_PROFILE, POLYGON, REAL_VASE, SAME, TISSUE_OVAL, TISSUE_ROUND, VaseParams) +from vaseinator.presets import GALLERY, PRINTER_KEYS, gallery_design, plain_design, slug, surprise +from vaseinator.report import ABOUT, DRAWING_HELP, PRINTING_HELP, function_help, info_html, lid_steps, print_steps +from vaseinator.settings import COLOUR_STYLES, LIVE_KEYS, REAL_COLOUR_STYLES, SPEC, TEXT_KEYS, change, wanted +from vaseinator.shapes import PALETTES, PROFILES, SHAPE_LABELS, pchip, shape_table +from vaseinator.workspace import Workspace, locked_surprise, comparison, calibration_parts, CALIBRATION_HELP +from vaseinator.stl import write_stl +from vaseinator.threemf import write_3mf + +SLICES = 14 # layers drawn in the from-above picture, as the desktop app draws them + + +def _report(d, errors, warnings) -> str: + """The desktop app's report, without its own style sheet: the page styles it.""" + return re.sub(r"^", "", info_html(d, errors, warnings), flags=re.S) + + +def _params(text: str) -> VaseParams: + return VaseParams.from_dict(json.loads(text)) + + +def _dump(p: VaseParams) -> str: + return json.dumps(p.to_dict()) + + +def _shown(p: VaseParams) -> list: + return [row[0] for _, rows in SPEC for row in rows if wanted(p, row[0])] + + +# ------------------------------------------------------------------ the choices +def _spec(): + """Every setting, by group, as the Advanced panel lists them.""" + groups = [] + for title, items in SPEC: + rows = [] + for key, label, kind, lo, hi, step, extra, tip in items: + row = dict(key=key, label=label, kind=kind, tip=tip, extra=extra) + if kind == "choice": + row["choices"] = [[v, t] for v, t in lo] + elif kind == "curve": + row["curve"] = lo + else: + row.update(lo=lo, hi=hi, step=step) + rows.append(row) + groups.append(dict(title=title, rows=rows)) + return groups + + +def start() -> str: + """Everything the page needs: the gallery, the choices and pictures, every setting, the help.""" + def above(settings): + r = shape_table(settings.get("shape1", CIRCLE), settings.get("count1", 5), settings.get("depth1", 0.0), + settings.get("sharp1", 0.5)) + a = np.arange(len(r)) * (2 * math.pi / len(r)) + math.radians(settings.get("turn1", 0.0)) + step = max(len(r) // 160, 1) + return [[round(float(rr * math.cos(t)), 4), round(float(rr * math.sin(t)), 4)] + for rr, t in zip(r[::step], a[::step])] + + def side(points): + pts = np.asarray(points, dtype=float) + hs = np.linspace(0.0, 1.0, 40) + d = np.clip(pchip(pts[:, 0], pts[:, 1], hs), 0.05, None) + return [round(float(v), 4) for v in d / d.max()] + + palettes = dict(PALETTES) + return json.dumps(dict( + version=__version__, + gallery=[dict(title=t, about=about, slug=slug(t), worn=bool(ch.get("worn", False))) + for t, about, ch in GALLERY], + shapes=[dict(name=n, settings=s, outline=above(s)) for n, s in SHAPES_FROM_ABOVE], + profiles=[dict(name=full.split(" (")[0], full=full, widths=side(pts), points=[list(q) for q in pts]) + for full, pts in PROFILES], + patterns=[dict(name=n, settings=s) for n, s in PATTERNS], + tissue_holes=[dict(name=n, value=v) for n, v in TISSUE_HOLES], + no_pattern=NO_PATTERN, + colours=[dict(name=n, colour=c) for n, c in COLOURS], + many_colours=[dict(name=n, palette=pal, settings=s, colours=list(palettes[pal])) + for n, pal, s in MANY_COLOURS], + palettes=[dict(name=n, colours=list(c)) for n, c in PALETTES], + printer_keys=list(PRINTER_KEYS), + spec=_spec(), live_keys=sorted(LIVE_KEYS), text_keys=sorted(TEXT_KEYS), + colour_styles=[[v, t] for v, t in COLOUR_STYLES], + real_colour_styles=[[v, t] for v, t in REAL_COLOUR_STYLES], + outlines=[dict(name=n, points=[list(q) for q in pts], repeat=r) for n, pts, r in sections.OUTLINES], + examples=[[n, f] for n, f in EXAMPLES], + shape_labels={str(k): list(v) for k, v in SHAPE_LABELS.items()}, + help=dict(printing=PRINTING_HELP, drawing=DRAWING_HELP, about=ABOUT, function=function_help()), + constants=dict(SAME=SAME, CIRCLE=CIRCLE, POLYGON=POLYGON, DRAWN=DRAWN, OWN=OWN, OWN_PROFILE=OWN_PROFILE, + EVENLY=EVENLY, REAL_VASE=REAL_VASE, FAKE_VASE=FAKE_VASE, ONE_COLOUR=ONE_COLOUR, + TISSUE_OVAL=TISSUE_OVAL, TISSUE_ROUND=TISSUE_ROUND), + defaults=VaseParams().to_dict(), + plain=plain_design().to_dict(), + )) + + +def shown(text: str) -> str: + """Which settings the Advanced panel shows for this design.""" + return json.dumps(_shown(_params(text))) + + +def apply(text: str, key: str, value: str) -> str: + """One change, as the panel makes it, with what follows from it (the desktop app's own rules).""" + p = _params(text) + touched, message = change(p, key, json.loads(value)) + p = VaseParams.from_dict(p.to_dict()) + return json.dumps(dict(params=p.to_dict(), touched=touched, message=message, shown=_shown(p))) + + +def design_of(title: str, keep: str) -> str: + """A ready-made design (or the plain cylinder), with the printer settings of ``keep``.""" + k = _params(keep) + return _dump(plain_design(k) if title == "Plain cylinder" else gallery_design(title, keep=k)) + + +def surprise_me(keep: str, seed: int, locks: str = "[]") -> str: + return _dump(locked_surprise(_params(keep), int(seed), json.loads(locks))) + + +def fit(text: str, head_mm: float) -> str: + """The design scaled to fit a head this many mm round.""" + return _dump(fit_head(_params(text), float(head_mm))) + + +def trace(pixels: str, width: int, height: int) -> str: + """Control points tracing the outline drawn in a picture: its RGBA pixels, base64.""" + rgba = np.frombuffer(base64.b64decode(pixels), dtype=np.uint8).reshape(int(height), int(width), 4) + return json.dumps(sections.trace_rgba(rgba)) + + +# ------------------------------------------------------------------ building it +def _gradient(colours, phase): + """The blend the 3D view uses for a gradient spool, for each phase.""" + ring = np.asarray(colours, dtype=float) + n = len(ring) + ph = np.mod(phase, 1.0) * n + k = np.floor(ph).astype(int) % n + t = ph - np.floor(ph) + t = t * t * (3.0 - 2.0 * t) + return ring[k] * (1.0 - t)[:, None] + ring[(k + 1) % n] * t[:, None] + + +def _colours(d: VaseDesign, z: np.ndarray) -> np.ndarray: + """The colour of each height, as the desktop app's 3D view shows it: bands, or a gradient spool.""" + cols = d.p.colors() + if d.gradient: + return _gradient([cols[k] for k in d.gradient_fils], d.colour_phase(z)) + starts = np.array([b[0] for b in d.bands]) + band_cols = np.array([cols[f] for _, f in d.bands], dtype=float) + idx = np.clip(np.searchsorted(starts, z, side="right") - 1, 0, len(starts) - 1) + return band_cols[idx] + + +def _plots(d: VaseDesign) -> dict: + """What the side and from-above pictures under the 3D view draw, as the desktop app draws them.""" + z = np.asarray(d.profile_z, dtype=float) + step = max(1, len(z) // 400) + keep = np.unique(np.concatenate([np.arange(0, len(z), step), [len(z) - 1]])) + lim = d.p.max_overhang + TOLERANCE + bad = np.nonzero(d.band_lean > lim)[0] + bad_z = (z[np.minimum(bad, len(z) - 1)] if d.rows is None + else np.array([d.rows[min(b, len(d.rows) - 1)][0] for b in bad])) + moved = z[d.row_moved > 0.05] if d.softened > 0.05 and d.row_moved is not None else np.zeros(0) + heights = [min(max(d.H * k / SLICES, 0.02), d.H - 0.02) for k in range(SLICES + 1)] + slices = [np.round(d.contour(zc)[:, :, :2], 2).reshape(-1).tolist() for zc in heights] + return dict(z=np.round(z[keep], 3).tolist(), rmax=np.round(d.profile_max[keep], 3).tolist(), + rmin=np.round(d.profile_min[keep], 3).tolist(), colours=np.round(_colours(d, z[keep]), 4).tolist(), + zb=float(d.zb), bad=np.round(bad_z, 2).tolist(), moved=np.round(moved[::step], 2).tolist(), + slices=slices, slice_colours=np.round(_colours(d, np.array(heights)), 4).tolist(), + half=0.5 * float(max(d.size[0], d.size[1], 1.0)), height=float(d.H), widest=float(d.widest)) + + +def build(text: str, draft: bool): + """Build the vase. Returns (what the page shows about it, as JSON; positions; triangles; colours; each + corner's steepest lean) - the last four as raw float32 / uint32 bytes.""" + p = _params(text) + d = VaseDesign(p, draft=bool(draft)) + meta = dict(errors=d.errors, warnings=d.warnings) + if d.errors: + meta["report"] = _report(None, d.errors, d.warnings) + return json.dumps(meta), b"", b"", b"", b"" + verts = np.asarray(d.shell_verts, dtype=np.float64) + faces = np.asarray(d.shell_faces, dtype=np.int64) + lean = np.full(len(verts), -1.0) + np.maximum.at(lean, faces.ravel(), np.repeat(np.asarray(d.shell_lean, dtype=float), 3)) + fz, fa = np.asarray(d.filament_z, dtype=float), np.asarray(d.filament_at, dtype=float) + pick = np.unique(np.linspace(0, len(fz) - 1, min(len(fz), 300)).astype(int)) + meta.update( + info=d.info(), notes=d.notes, draft=bool(draft), height=float(d.H), size=[float(s) for s in d.size], + widest=float(max(v for _, v in p.silhouette)), head=round(float(d.head_fit) / 10.0, 1), + worn=bool(d.p.worn), pattern=pattern_of(d.p), + twist_words=twist_words(d.p.twist) if d.p.twist_style != OWN else "Your own curve", + ok=bool(d.worst <= d.p.max_overhang + TOLERANCE), look=int(d.p.look), normal=bool(d.normal), + triangles=int(len(faces)), bed=[float(d.p.bed_x), float(d.p.bed_y), float(d.p.printer_height)], + limit=float(d.p.max_overhang), report=_report(d, [], d.warnings), plan=d.colour_plan(), plots=_plots(d), + printing=dict(z=np.round(fz[pick], 3).tolist(), at=np.round(fa[pick], 2).tolist(), layers=int(d.layers), + seconds=float(d.seconds), grams=float(d.grams))) + colours = _colours(d, verts[:, 2]).astype(np.float32) + return (json.dumps(meta), verts.astype(np.float32).tobytes(), faces.astype(np.uint32).tobytes(), + colours.tobytes(), lean.astype(np.float32).tobytes()) + + +# ------------------------------------------------------------------ files +def _name(p: VaseParams) -> str: + name = "".join(ch if ch.isalnum() or ch in "-_ " else "_" for ch in p.name).strip() + return name or "vase" + + +def export_3mf(text: str): + """The vase for the slicer, as the desktop app's Save for printing makes it: a part per band of colour. + Returns (the file, the steps to print it, as HTML).""" + p = _params(text) + d = VaseDesign(p) + require_exportable(d) + colors = d.p.colors() + parts = d.export_parts() + base = _name(p) + many = len(parts) > 1 + named = [(f"{base} band {k + 1}" if many else base, v, f, fil, colors[fil]) for k, (fil, v, f) in enumerate(parts)] + path = os.path.join(tempfile.gettempdir(), "vase.3mf") + write_3mf(path, base, named, (p.bed_x / 2.0, p.bed_y / 2.0, 0.0)) + with open(path, "rb") as fh: + data = fh.read() + steps = print_steps(d, f"{base}.3mf", len(parts)) + steps = re.sub(r"^Saved .*?
", "", steps, flags=re.S) # saved by the button above the steps + return data, steps.replace(" (the button below, or File â–¸ Import)", " (File â–¸ Import)") + + +def export_lid(text: str): + """A tissue box cover's lid, made to fit it, as the desktop app's Save the lid for printing makes it. + Returns (the file, the steps to print it and put it on, as HTML).""" + p = _params(text) + d = VaseDesign(p) + require_exportable(d) + lid = Lid(d) + require_exportable(lid) + base = _name(p) + " lid" + path = os.path.join(tempfile.gettempdir(), "lid.3mf") + write_3mf(path, base, [(base, lid.verts, lid.faces, 1, d.p.colors()[1])], (p.bed_x / 2.0, p.bed_y / 2.0, 0.0)) + with open(path, "rb") as fh: + data = fh.read() + steps = re.sub(r"^Saved .*?
", "", lid_steps(lid, f"{base}.3mf"), flags=re.S) + return data, steps.replace(" (the button below, or File â–¸ Import)", " (File â–¸ Import)") + + +def export_stl(text: str) -> bytes: + p = _params(text) + d = VaseDesign(p) + require_exportable(d) + path = os.path.join(tempfile.gettempdir(), "vase.stl") + write_stl(path, *d.export_mesh(), _name(p)) + with open(path, "rb") as fh: + return fh.read() + + +def save_vase(text: str) -> str: + """A .vase design file, the same as the desktop app saves.""" + return json.dumps({"format": FILE_FORMAT, "version": FILE_VERSION, "params": _params(text).to_dict()}, indent=2) + + +def open_vase(text: str) -> str: + """The settings from a .vase design file, made safe.""" + data = json.load(io.StringIO(text)) + if data.get("format") != FILE_FORMAT: + raise ValueError("That is not a Vaseinator design file.") + return _dump(VaseParams.from_dict(data.get("params", {}))) + + +def workspace_action(state: str, text: str, op: str, payload: str = "{}") -> str: + return json.dumps(Workspace(json.loads(state) if state else None).command(op, _params(text), json.loads(payload))) + + +def compare_design(text: str) -> str: + return json.dumps(comparison(VaseDesign(_params(text)))) + + +def export_calibration(text: str): + p = _params(text) + path = os.path.join(tempfile.gettempdir(), "calibration.3mf") + write_3mf(path, "Clearance samples", calibration_parts(), (p.bed_x/2, p.bed_y/2, 0)) + with open(path, "rb") as fh: + return fh.read(), "" + CALIBRATION_HELP + "
" diff --git a/web/index.html b/web/index.html index ead9b42..b7f886e 100644 --- a/web/index.html +++ b/web/index.html @@ -1,251 +1,254 @@ - - - - - -
- Vases, lampshades, masks and helmets that print without supports
-Drag to turn · wheel or pinch to zoom · right-drag to move
-
- Getting Vaseinator ready…
-The first time takes a little while: it brings Python and numpy into your browser, - so the vase is built right here - nothing is sent anywhere.
-
+ Vases, lampshades, masks and helmets that print without supports
+Drag to turn · wheel or pinch to zoom · right-drag to move
+
+ Getting Vaseinator ready…
+The first time takes a little while: it brings Python and numpy into your browser, + so the vase is built right here - nothing is sent anywhere.
+`;
- b.querySelector("b").textContent = g.title;
- b.addEventListener("click", () => {
- $("gallery").close();
- chooseDesign(g.title);
- });
- designs.append(b);
- }
- const menu = $("designsmenu");
- for (const g of C.gallery) {
- const b = document.createElement("button");
- b.textContent = g.title;
- b.title = g.about;
- b.addEventListener("click", () => {
- closeMenus();
- chooseDesign(g.title);
- });
- menu.append(b);
- }
-}
-
-function chooseDesign(title) {
- return enqueue(() => withBusy("Getting it ready…", async () =>
- replaceNow(JSON.parse(await helper.call("design_of", title, JSON.stringify(params))))));
-}
-
-function openHelp(which) {
- const titles = { printing: "Printing it watertight", function: "Your own function", drawing: "Drawing a cross-section",
- about: `About Vaseinator ${C.version}` };
- $("helptitle").textContent = titles[which];
- $("helptext").innerHTML = C.help[which];
- $("helpexamples").hidden = which !== "function";
- $("help").showModal();
-}
-
-async function withBusy(text, work) {
- showBusy(text);
- try {
- await work();
- } catch (err) {
- showProblem(err.message);
- throw err;
- } finally {
- if (!busy) showBusy(null);
- }
-}
-
-function download(data, name, type) {
- const url = URL.createObjectURL(data instanceof Blob ? data : new Blob([data], { type }));
- const a = document.createElement("a");
- a.href = url;
- a.download = name;
- document.body.append(a);
- a.click();
- a.remove();
- setTimeout(() => URL.revokeObjectURL(url), 10000);
-}
-
-function offer(data, name, type, title, steps = "") {
- // a file that took a while to make: a browser only lets a click save a file straight away, so the file is
- // offered with a button of its own to click
- const link = $("stepsfile");
- if (link.href) URL.revokeObjectURL(link.href);
- link.href = URL.createObjectURL(new Blob([data], { type }));
- link.download = name;
- link.textContent = `Save ${name}`;
- $("stepstitle").textContent = title;
- $("steplist").innerHTML = steps;
- $("steps").showModal();
- link.focus();
-}
-
-function fileName() {
- return (params.name || "vase").replace(/[^\w\- ]/g, "_").trim() || "vase";
-}
-
-// ================================================================== the menus and buttons
-let currentView = 0;
-
-function setView(n) {
- currentView = n;
- view.setMode(n);
- document.querySelectorAll(".views button").forEach((b) => b.setAttribute("aria-pressed", String(Number(b.dataset.view) === n)));
-}
-
-function toggle(id, on) {
- $(id).setAttribute("aria-pressed", String(on));
-}
-
-function effectiveLight() {
- const t = document.documentElement.dataset.theme;
- return t ? t === "light" : window.matchMedia("(prefers-color-scheme: light)").matches;
-}
-
-async function libraryWork(op, payload = {}, text = JSON.stringify(params)) {
- const result = JSON.parse(await helper.call("workspace_action", libraryState ? JSON.stringify(libraryState) : "", text, op, JSON.stringify(payload)));
- libraryState = result.workspace;
- // Unlike optional preferences, library failures must be visible to avoid silent data loss.
- try { localStorage.setItem("vaseinator.library", JSON.stringify(libraryState)); }
- catch { showProblem("The library could not be saved in this browser. Export a backup before closing the page."); }
- if (result.params) replaceNow(result.params);
- return result;
-}
-
-function openLibrary() {
- libraryDialog({
- current: () => params,
- read: () => enqueue(() => libraryWork("read")),
- command: (op, data) => { flushText(); return enqueue(() => libraryWork(op, data)); },
- exportFile: () => enqueue(() => download(JSON.stringify(libraryState, null, 2), "vaseinator-library.json", "application/json")),
- importFile: (refresh) => {
- const input = document.createElement("input"); input.type = "file"; input.accept = ".json";
- input.onchange = async () => { if (input.files[0]) { await enqueue(async () => libraryWork("import", JSON.parse(await input.files[0].text()))); refresh(); } };
- input.click();
- },
- });
-}
-
-const actions = {
- library: openLibrary,
- compare: () => enqueue(() => withBusy("Comparing the surfaces…", async () => {
- const data = JSON.parse(await builder.call("compare_design", JSON.stringify(params)));
- $("helptitle").textContent = "Original and softened";
- $("helptext").replaceChildren();
- const text = document.createElement("p"); text.textContent = data.text;
- const image = document.createElement("img"); image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(data.svg); image.alt = data.text; image.style.width = "100%";
- $("helptext").append(text, image); $("helpexamples").hidden = true; $("help").showModal();
- })),
- calibration: () => enqueue(() => withBusy("Making clearance samples…", async () => {
- const {data, steps} = await builder.call("export_calibration", JSON.stringify(params));
- offer(data, "clearance_samples.3mf", "model/3mf", "How to use the samples", steps);
- })),
- new: () => enqueue(() => replaceNow({ ...C.defaults, ...Object.fromEntries(C.printer_keys.map((k) => [k, params[k]])) })),
- plain: () => chooseDesign("Plain cylinder"),
- open: () => $("openfile").click(),
- savevase: async () => download(await helper.call("save_vase", JSON.stringify(params)), fileName() + ".vase", "application/json"),
- print: () => withBusy("Making the file for your slicer…", async () => {
- const { data, steps } = await builder.call("export_3mf", JSON.stringify(params));
- offer(data, fileName() + ".3mf", "model/3mf", "How to print it", steps);
- }).catch(() => {}),
- lid: () => withBusy("Making the lid…", async () => {
- const { data, steps } = await builder.call("export_lid", JSON.stringify(params));
- offer(data, fileName() + " lid.3mf", "model/3mf", "How to print the lid", steps);
- }).catch(() => {}),
- stl: () => withBusy("Making the STL…", async () =>
- offer(await builder.call("export_stl", JSON.stringify(params)), fileName() + ".stl", "model/stl",
- "Your STL is ready")).catch(() => {}),
- "3mf": () => withBusy("Making the 3MF…", async () => {
- const { data } = await builder.call("export_3mf", JSON.stringify(params));
- offer(data, fileName() + ".3mf", "model/3mf", "Your 3MF is ready",
- "In your slicer, open it with File ▸ Import.
"); - }).catch(() => {}), - picture: async () => download(await view.picture(), fileName() + "_3d.png", "image/png"), - undo: () => step(undoStack, redoStack), - redo: () => step(redoStack, undoStack), - surprise: () => enqueue(() => withBusy("Thinking of something…", async () => - replaceNow(JSON.parse(await helper.call("surprise_me", JSON.stringify(params), Math.floor(Math.random() * 1e6), JSON.stringify(libraryState?.locks || []))))).catch(() => {})), - plan: async () => { - if (!meta) return; - try { - await navigator.clipboard.writeText(meta.plan); - status("Colour changes copied to the clipboard"); - } catch { - status("The browser didn't allow copying: the colour changes are in the panel"); - } - }, - gallery: () => $("gallery").showModal(), - view0: () => setView(0), - view1: () => setView(1), - view2: () => setView(2), - view3: () => setView(3), - spin: () => { - const on = $("spin").getAttribute("aria-pressed") !== "true"; - view.setSpin(on); - toggle("spin", on); - }, - printing: () => { - const on = $("printing").getAttribute("aria-pressed") !== "true"; - view.setPrinting(on); - toggle("printing", on); - }, - reset: () => view.reset(), - bigger: () => { - const on = $("bigger").getAttribute("aria-pressed") !== "true"; - document.documentElement.style.setProperty("--scale", on ? "1.25" : "1"); - toggle("bigger", on); - store.set("bigger", on); - }, - theme: () => { - const light = !effectiveLight(); - document.documentElement.dataset.theme = light ? "light" : "dark"; - store.set("theme", light ? "light" : "dark"); - drawPlots(); - Object.values(editors).forEach((e) => e.draw()); - for (const w of widgets.values()) if (w.set) w.set(params); - }, - "help-printing": () => openHelp("printing"), - "help-function": () => openHelp("function"), - "help-drawing": () => openHelp("drawing"), - "help-about": () => openHelp("about"), -}; - -for (const key of ["savevase", "print", "lid", "stl", "3mf", "picture", "plan"]) { - const action = actions[key]; - actions[key] = () => enqueue(action); -} -for (const key of Object.keys(actions)) { - const action = actions[key]; - actions[key] = () => { flushText(); return action(); }; -} - -function closeMenus(except) { - document.querySelectorAll(".menu[open]").forEach((m) => { if (m !== except) m.open = false; }); -} - -function wire() { - document.addEventListener("click", (e) => { - const b = e.target.closest("[data-do]"); - if (b) { - closeMenus(); - if (C && actions[b.dataset.do]) actions[b.dataset.do](); - return; - } - if (!e.target.closest(".menu")) closeMenus(); - }); - document.querySelectorAll(".menu").forEach((m) => m.addEventListener("toggle", () => { if (m.open) closeMenus(m); })); - document.querySelectorAll(".views button").forEach((b) => b.addEventListener("click", () => setView(Number(b.dataset.view)))); - $("simplebtn").addEventListener("click", () => setMode(false)); - $("advancedbtn").addEventListener("click", () => setMode(true)); - $("openfile").addEventListener("change", async (e) => { - const file = e.target.files[0]; - e.target.value = ""; - if (!file) return; - await enqueue(() => withBusy("Opening it…", async () => replaceNow(JSON.parse(await helper.call("open_vase", await file.text()))))); - }); - $("picturefile").addEventListener("change", (e) => { - const file = e.target.files[0]; - e.target.value = ""; - if (file) traceFile(file); - }); - $("useexample").addEventListener("click", () => { - setFormula($("examplepick").value); - $("help").close(); - }); - document.addEventListener("keydown", (e) => { - if (!C) return; - const typing = e.target.matches("input, textarea, select"); - if (e.ctrlKey || e.metaKey) { - const key = e.key.toLowerCase(); - const act = { z: e.shiftKey ? "redo" : "undo", y: "redo", s: "savevase", o: "open", g: "gallery" }[key]; - if (!act || (typing && (key === "z" || key === "y"))) return; - e.preventDefault(); - actions[act](); - } else if (!typing && !e.target.matches("canvas") && (e.key === "s" || e.key === "S")) { - actions.spin(); - } - }); - const theme = store.get("theme"); - if (theme) document.documentElement.dataset.theme = theme; - if (store.get("bigger")) actions.bigger(); -} - -// ================================================================== starting up -function failed(text) { - $("loading").hidden = false; - $("loading").classList.add("failed"); - $("loadingtext").textContent = `Vaseinator couldn't start: ${text}. Check the internet connection, then reload ` + - "the page."; -} - -async function boot() { - wire(); - try { - const [choices] = await Promise.all([helper.call("start"), builder.call("start")]); - C = JSON.parse(choices); - } catch (err) { - failed(err.message); - return; - } - K = C.constants; - $("examplepick").append(...C.examples.map(([n, f]) => new Option(`${n}: ${f}`, f))); - buildSimple(); - buildAdvanced(); - buildOutlineWindow(); - buildGallery(); - const printer = store.get("printer") || {}; - params = { ...C.defaults, ...printer, ...(store.get("design") || {}) }; - $("loading").hidden = true; - undoButtons(); - setMode(Boolean(store.get("advanced"))); - settled({ refit: true }); -} - -boot(); +// Vaseinator on the web: the desktop app, Simple and Advanced. The vase is built by the app's own Python (in +// worker.js, with Pyodide) - the settings, the rules for which are shown and what each change brings with it, +// and the report beside the view are the desktop app's own - and drawn here with three.js. + +import { CurveEditor } from "./curves.js"; +import { OutlineEditor } from "./outline.js"; +import { drawSide, drawTop } from "./plots.js"; +import { View } from "./view.js"; +import { libraryDialog } from "./library.js"; + +const $ = (id) => document.getElementById(id); + +// what this browser remembers: the design, the printer, the mode and the look - if it may +const store = { + get(key) { + try { return JSON.parse(localStorage.getItem("vaseinator." + key)); } catch { return null; } + }, + set(key, value) { + try { localStorage.setItem("vaseinator." + key, JSON.stringify(value)); } catch { /* private window */ } + }, +}; + +// ================================================================== Python, in two workers +// one builds the vase (which can take a few seconds); the other answers everything else straight away +class Python { + constructor() { + this.worker = new Worker("worker.js"); + this.waiting = new Map(); + this.next = 1; + this.worker.onmessage = (event) => { + const { id, ok, result, error } = event.data; + const w = this.waiting.get(id); + this.waiting.delete(id); + if (ok) w.resolve(result); + else w.reject(new Error(lastLine(error))); + }; + this.worker.onerror = (event) => { + for (const w of this.waiting.values()) w.reject(new Error(event.message || "Python stopped")); + this.waiting.clear(); + failed(event.message || "Python stopped"); + }; + } + + call(name, ...args) { + return new Promise((resolve, reject) => { + const id = this.next++; + this.waiting.set(id, { resolve, reject }); + this.worker.postMessage({ id, call: name, args }); + }); + } +} + +function lastLine(text) { + // a Python error comes with its whole traceback: its last line says what went wrong + const lines = String(text).trim().split("\n"); + return lines[lines.length - 1].replace(/^\w*Error: /, ""); +} + +const builder = new Python(); +const helper = new Python(); + +// ================================================================== the design +let C = null; // the settings, choices, constants and help, from Python +let K = null; // C.constants +let params = null; // the design's settings +let libraryState = store.get("library"); +let recoveryTimer = 0; +let meta = null; // what the last build says about it +let shown = new Set(); // the Advanced settings shown for it +const undoStack = []; +const redoStack = []; +let liveFrom = null; // the settings before a drag began, for Undo +let queue = Promise.resolve(); +let pendingText = null; +function flushText() { + if (pendingText) pendingText(); +} +function enqueue(work) { + const result = queue.then(work); + queue = result.catch((err) => showProblem(err.message)); + return queue; +} + +function pushUndo(snapshot) { + undoStack.push(snapshot); + if (undoStack.length > 100) undoStack.shift(); + redoStack.length = 0; + undoButtons(); +} + +function undoButtons() { + $("undo").disabled = !undoStack.length; + $("redo").disabled = !redoStack.length; +} + +function status(text) { + $("status").textContent = text || ""; +} + +function needsNormal(p) { + // holes, a face, an open bottom or a wall part way round: spiral vase mode prints one closed line a layer + return p.holes !== 0 || p.open_bottom || p.around < 360 || p.eyes !== 0 || p.mouth !== 0 || p.straps || p.box; +} + +function change(updates) { return enqueue(() => changeNow(updates)); } +function changeNow(updates) { + // several settings at once, as a picture in Simple mode sets them + if (!C) return; + pushUndo(JSON.stringify(params)); + Object.assign(params, typeof updates === "function" ? updates(params) : updates); + if (params.vase_mode === K.REAL_VASE && needsNormal(params)) params.vase_mode = K.FAKE_VASE; + settled({}); +} + +function commit(key, value, live = false) { return enqueue(() => commitNow(key, value, live)); } +async function commitNow(key, value, live = false) { + // one setting, as the desktop app's panel changes it: Python applies the app's own rules + if (!C) return Promise.resolve(); + if (live) { + if (liveFrom === null) liveFrom = JSON.stringify(params); + params[key] = value; + if (key === "silhouette") params.profile = K.OWN_PROFILE; + rebuild({ live: true }); + return Promise.resolve(); + } + { + const before = liveFrom !== null ? liveFrom : JSON.stringify(params); + liveFrom = null; + try { + const r = JSON.parse(await helper.call("apply", JSON.stringify(params), key, JSON.stringify(value))); + pushUndo(before); + params = r.params; + shown = new Set(r.shown); + status(r.message); + settled({ known: true }); + } catch (err) { + showProblem(err.message); + } + } +} + +function settled({ refit = false, known = false }) { + store.set("design", params); + rememberPrinter(); + clearTimeout(recoveryTimer); + const snapshot = JSON.stringify(params); + recoveryTimer = setTimeout(() => enqueue(() => libraryWork("recover", {}, snapshot)), 1500); + refreshSimple(); + refreshAdvanced(); + if (!known) { + const snapshot = JSON.stringify(params); + helper.call("shown", snapshot).then((keys) => { + if (JSON.stringify(params) !== snapshot) return; + shown = new Set(JSON.parse(keys)); + refreshAdvanced(); + }).catch(() => {}); + } + rebuild({ refit }); +} + +function replace(next, refit = true) { return enqueue(() => replaceNow(next, refit)); } +function replaceNow(next, refit = true) { + pushUndo(JSON.stringify(params)); + params = next; + settled({ refit }); +} + +function step(from, to) { return enqueue(() => stepNow(from, to)); } +function stepNow(from, to) { + if (!from.length) return; + to.push(JSON.stringify(params)); + params = JSON.parse(from.pop()); + undoButtons(); + settled({}); +} + +// ================================================================== building it +let seq = 0; // the newest design asked for +let wanted = null; // the next build to do +let busy = false; +let refit = true; +let refineTimer = 0; + +function rebuild({ refit: fit = false, live = false } = {}) { + seq += 1; + refit = refit || fit; + clearTimeout(refineTimer); + wanted = { seq, draft: true, live, text: JSON.stringify(params) }; + pump(); +} + +async function pump() { + if (busy || !wanted) return; + const job = wanted; + wanted = null; + busy = true; + showBusy(job.draft ? "Building…" : "Adding the fine detail…"); + let result = null; + try { + result = await builder.call("build", job.text, job.draft); + } catch (err) { + showProblem(err.message); + } + busy = false; + if (result && job.seq === seq) { + show(result); + if (job.draft && !job.live) { + // a quick draft first; then, if nothing changes for a moment, the vase in full detail + refineTimer = setTimeout(() => { + if (job.seq === seq) { + wanted = { seq: job.seq, draft: false, text: job.text }; + pump(); + } + }, 600); + } + } + if (wanted) pump(); + else showBusy(null); +} + +function showBusy(text) { + $("busy").hidden = !text; + if (text) $("busytext").textContent = text; +} + +// ================================================================== the view, the pictures, the report +const view = new View($("canvas"), $("viewer"), (text) => { $("hint").textContent = text; }); +window.vaseinator = { view, get params() { return params; }, get meta() { return meta; } }; // for checking it + +function show(result) { + const m = JSON.parse(result.meta); + if (m.errors && m.errors.length) { + $("report").innerHTML = m.report; + flagCrossing(m.errors); + return; + } + flagCrossing([]); + meta = m; + view.show(result, m, refit); + refit = false; + setNumber($("head"), m.head); + setNumber(widgetInput("head"), m.head); + lightTile($("pattern"), m.pattern); + $("report").innerHTML = m.report; + drawPlots(); +} + +function drawPlots() { + if (!meta) return; + drawSide($("sideplot"), meta.plots); + drawTop($("topplot"), meta.plots); +} +new ResizeObserver(drawPlots).observe($("plots")); + +function showProblem(text) { + const p = document.createElement("p"); + p.className = "e"; + p.textContent = `✗ ${text}`; + $("report").prepend(p); +} + +function flagCrossing(errors) { + // a drawn outline that crosses itself: the build says so; the editors show it red themselves + const crossing = errors.some((e) => e.includes("crosses itself")); + document.body.classList.toggle("crossing", crossing); +} + +// ================================================================== Simple: the pictures +const ACCENT = "#F0A356"; +const EDGE = "#966636"; +const DEEP = "#82582E"; +const svg = (body, size = 52) => ``; + +function aboveIcon(outline) { + const pts = outline.map(([x, y]) => `${(26 + 22.9 * x).toFixed(1)},${(26 - 22.9 * y).toFixed(1)}`).join(" "); + return svg(``;
+ b.querySelector("b").textContent = g.title;
+ b.addEventListener("click", () => {
+ $("gallery").close();
+ chooseDesign(g.title);
+ });
+ designs.append(b);
+ }
+ const menu = $("designsmenu");
+ for (const g of C.gallery) {
+ const b = document.createElement("button");
+ b.textContent = g.title;
+ b.title = g.about;
+ b.addEventListener("click", () => {
+ closeMenus();
+ chooseDesign(g.title);
+ });
+ menu.append(b);
+ }
+}
+
+function chooseDesign(title) {
+ return enqueue(() => withBusy("Getting it ready…", async () =>
+ replaceNow(JSON.parse(await helper.call("design_of", title, JSON.stringify(params))))));
+}
+
+function openHelp(which) {
+ const titles = { printing: "Printing it watertight", function: "Your own function", drawing: "Drawing a cross-section",
+ about: `About Vaseinator ${C.version}` };
+ $("helptitle").textContent = titles[which];
+ $("helptext").innerHTML = C.help[which];
+ $("helpexamples").hidden = which !== "function";
+ $("help").showModal();
+}
+
+async function withBusy(text, work) {
+ showBusy(text);
+ try {
+ await work();
+ } catch (err) {
+ showProblem(err.message);
+ throw err;
+ } finally {
+ if (!busy) showBusy(null);
+ }
+}
+
+function download(data, name, type) {
+ const url = URL.createObjectURL(data instanceof Blob ? data : new Blob([data], { type }));
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = name;
+ document.body.append(a);
+ a.click();
+ a.remove();
+ setTimeout(() => URL.revokeObjectURL(url), 10000);
+}
+
+function offer(data, name, type, title, steps = "") {
+ // a file that took a while to make: a browser only lets a click save a file straight away, so the file is
+ // offered with a button of its own to click
+ const link = $("stepsfile");
+ if (link.href) URL.revokeObjectURL(link.href);
+ link.href = URL.createObjectURL(new Blob([data], { type }));
+ link.download = name;
+ link.textContent = `Save ${name}`;
+ $("stepstitle").textContent = title;
+ $("steplist").innerHTML = steps;
+ $("steps").showModal();
+ link.focus();
+}
+
+function fileName() {
+ return (params.name || "vase").replace(/[^\w\- ]/g, "_").trim() || "vase";
+}
+
+// ================================================================== the menus and buttons
+let currentView = 0;
+
+function setView(n) {
+ currentView = n;
+ view.setMode(n);
+ document.querySelectorAll(".views button").forEach((b) => b.setAttribute("aria-pressed", String(Number(b.dataset.view) === n)));
+}
+
+function toggle(id, on) {
+ $(id).setAttribute("aria-pressed", String(on));
+}
+
+function effectiveLight() {
+ const t = document.documentElement.dataset.theme;
+ return t ? t === "light" : window.matchMedia("(prefers-color-scheme: light)").matches;
+}
+
+async function libraryWork(op, payload = {}, text = JSON.stringify(params)) {
+ const result = JSON.parse(await helper.call("workspace_action", libraryState ? JSON.stringify(libraryState) : "", text, op, JSON.stringify(payload)));
+ libraryState = result.workspace;
+ // Unlike optional preferences, library failures must be visible to avoid silent data loss.
+ try { localStorage.setItem("vaseinator.library", JSON.stringify(libraryState)); }
+ catch { showProblem("The library could not be saved in this browser. Export a backup before closing the page."); }
+ if (result.params) replaceNow(result.params);
+ return result;
+}
+
+function openLibrary() {
+ libraryDialog({
+ current: () => params,
+ read: () => enqueue(() => libraryWork("read")),
+ command: (op, data) => { flushText(); return enqueue(() => libraryWork(op, data)); },
+ exportFile: () => enqueue(() => download(JSON.stringify(libraryState, null, 2), "vaseinator-library.json", "application/json")),
+ importFile: (refresh) => {
+ const input = document.createElement("input"); input.type = "file"; input.accept = ".json";
+ input.onchange = async () => { if (input.files[0]) { await enqueue(async () => libraryWork("import", JSON.parse(await input.files[0].text()))); refresh(); } };
+ input.click();
+ },
+ });
+}
+
+const actions = {
+ library: openLibrary,
+ compare: () => enqueue(() => withBusy("Comparing the surfaces…", async () => {
+ const data = JSON.parse(await builder.call("compare_design", JSON.stringify(params)));
+ $("helptitle").textContent = "Original and softened";
+ $("helptext").replaceChildren();
+ const text = document.createElement("p"); text.textContent = data.text;
+ const image = document.createElement("img"); image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(data.svg); image.alt = data.text; image.style.width = "100%";
+ $("helptext").append(text, image); $("helpexamples").hidden = true; $("help").showModal();
+ })),
+ calibration: () => enqueue(() => withBusy("Making clearance samples…", async () => {
+ const {data, steps} = await builder.call("export_calibration", JSON.stringify(params));
+ offer(data, "clearance_samples.3mf", "model/3mf", "How to use the samples", steps);
+ })),
+ new: () => enqueue(() => replaceNow({ ...C.defaults, ...Object.fromEntries(C.printer_keys.map((k) => [k, params[k]])) })),
+ plain: () => chooseDesign("Plain cylinder"),
+ open: () => $("openfile").click(),
+ savevase: async () => download(await helper.call("save_vase", JSON.stringify(params)), fileName() + ".vase", "application/json"),
+ print: () => withBusy("Making the file for your slicer…", async () => {
+ const { data, steps } = await builder.call("export_3mf", JSON.stringify(params));
+ offer(data, fileName() + ".3mf", "model/3mf", "How to print it", steps);
+ }).catch(() => {}),
+ lid: () => withBusy("Making the lid…", async () => {
+ const { data, steps } = await builder.call("export_lid", JSON.stringify(params));
+ offer(data, fileName() + " lid.3mf", "model/3mf", "How to print the lid", steps);
+ }).catch(() => {}),
+ stl: () => withBusy("Making the STL…", async () =>
+ offer(await builder.call("export_stl", JSON.stringify(params)), fileName() + ".stl", "model/stl",
+ "Your STL is ready")).catch(() => {}),
+ "3mf": () => withBusy("Making the 3MF…", async () => {
+ const { data } = await builder.call("export_3mf", JSON.stringify(params));
+ offer(data, fileName() + ".3mf", "model/3mf", "Your 3MF is ready",
+ "In your slicer, open it with File ▸ Import.
"); + }).catch(() => {}), + picture: async () => download(await view.picture(), fileName() + "_3d.png", "image/png"), + undo: () => step(undoStack, redoStack), + redo: () => step(redoStack, undoStack), + surprise: () => enqueue(() => withBusy("Thinking of something…", async () => + replaceNow(JSON.parse(await helper.call("surprise_me", JSON.stringify(params), Math.floor(Math.random() * 1e6), JSON.stringify(libraryState?.locks || []))))).catch(() => {})), + plan: async () => { + if (!meta) return; + try { + await navigator.clipboard.writeText(meta.plan); + status("Colour changes copied to the clipboard"); + } catch { + status("The browser didn't allow copying: the colour changes are in the panel"); + } + }, + gallery: () => $("gallery").showModal(), + view0: () => setView(0), + view1: () => setView(1), + view2: () => setView(2), + view3: () => setView(3), + spin: () => { + const on = $("spin").getAttribute("aria-pressed") !== "true"; + view.setSpin(on); + toggle("spin", on); + }, + printing: () => { + const on = $("printing").getAttribute("aria-pressed") !== "true"; + view.setPrinting(on); + toggle("printing", on); + }, + reset: () => view.reset(), + bigger: () => { + const on = $("bigger").getAttribute("aria-pressed") !== "true"; + document.documentElement.style.setProperty("--scale", on ? "1.25" : "1"); + toggle("bigger", on); + store.set("bigger", on); + }, + theme: () => { + const light = !effectiveLight(); + document.documentElement.dataset.theme = light ? "light" : "dark"; + store.set("theme", light ? "light" : "dark"); + drawPlots(); + Object.values(editors).forEach((e) => e.draw()); + for (const w of widgets.values()) if (w.set) w.set(params); + }, + "help-printing": () => openHelp("printing"), + "help-function": () => openHelp("function"), + "help-drawing": () => openHelp("drawing"), + "help-about": () => openHelp("about"), +}; + +for (const key of ["savevase", "print", "lid", "stl", "3mf", "picture", "plan"]) { + const action = actions[key]; + actions[key] = () => enqueue(action); +} +for (const key of Object.keys(actions)) { + const action = actions[key]; + actions[key] = () => { flushText(); return action(); }; +} + +function closeMenus(except) { + document.querySelectorAll(".menu[open]").forEach((m) => { if (m !== except) m.open = false; }); +} + +function wire() { + document.addEventListener("click", (e) => { + const b = e.target.closest("[data-do]"); + if (b) { + closeMenus(); + if (C && actions[b.dataset.do]) actions[b.dataset.do](); + return; + } + if (!e.target.closest(".menu")) closeMenus(); + }); + document.querySelectorAll(".menu").forEach((m) => m.addEventListener("toggle", () => { if (m.open) closeMenus(m); })); + document.querySelectorAll(".views button").forEach((b) => b.addEventListener("click", () => setView(Number(b.dataset.view)))); + $("simplebtn").addEventListener("click", () => setMode(false)); + $("advancedbtn").addEventListener("click", () => setMode(true)); + $("openfile").addEventListener("change", async (e) => { + const file = e.target.files[0]; + e.target.value = ""; + if (!file) return; + await enqueue(() => withBusy("Opening it…", async () => replaceNow(JSON.parse(await helper.call("open_vase", await file.text()))))); + }); + $("picturefile").addEventListener("change", (e) => { + const file = e.target.files[0]; + e.target.value = ""; + if (file) traceFile(file); + }); + $("useexample").addEventListener("click", () => { + setFormula($("examplepick").value); + $("help").close(); + }); + document.addEventListener("keydown", (e) => { + if (!C) return; + const typing = e.target.matches("input, textarea, select"); + if (e.ctrlKey || e.metaKey) { + const key = e.key.toLowerCase(); + const act = { z: e.shiftKey ? "redo" : "undo", y: "redo", s: "savevase", o: "open", g: "gallery" }[key]; + if (!act || (typing && (key === "z" || key === "y"))) return; + e.preventDefault(); + actions[act](); + } else if (!typing && !e.target.matches("canvas") && (e.key === "s" || e.key === "S")) { + actions.spin(); + } + }); + const theme = store.get("theme"); + if (theme) document.documentElement.dataset.theme = theme; + if (store.get("bigger")) actions.bigger(); +} + +// ================================================================== starting up +function failed(text) { + $("loading").hidden = false; + $("loading").classList.add("failed"); + $("loadingtext").textContent = `Vaseinator couldn't start: ${text}. Check the internet connection, then reload ` + + "the page."; +} + +async function boot() { + wire(); + try { + const [choices] = await Promise.all([helper.call("start"), builder.call("start")]); + C = JSON.parse(choices); + } catch (err) { + failed(err.message); + return; + } + K = C.constants; + $("examplepick").append(...C.examples.map(([n, f]) => new Option(`${n}: ${f}`, f))); + buildSimple(); + buildAdvanced(); + buildOutlineWindow(); + buildGallery(); + const printer = store.get("printer") || {}; + params = { ...C.defaults, ...printer, ...(store.get("design") || {}) }; + $("loading").hidden = true; + undoButtons(); + setMode(Boolean(store.get("advanced"))); + settled({ refit: true }); +} + +boot(); diff --git a/web/bridge.py b/web/bridge.py index 28bcd5d..b9c8647 100644 --- a/web/bridge.py +++ b/web/bridge.py @@ -1,307 +1,307 @@ -"""The web page's Python: the same vaseinator package as the desktop app, run in the browser by Pyodide. - -The page's workers call these functions with settings as JSON text and get JSON text back - and, for a -built vase, its mesh as raw bytes the page draws with three.js. The settings, the rules for which are shown -and what a change brings with it, the panel's report and the help are the desktop app's own. -""" - -from __future__ import annotations - -import base64 -import io -import json -import math -import os -import re -import tempfile - -import numpy as np - -from vaseinator import __version__, sections -from vaseinator.choices import (COLOURS, MANY_COLOURS, NO_PATTERN, PATTERNS, SHAPES_FROM_ABOVE, TISSUE_HOLES, pattern_of, - twist_words) -from vaseinator.expr import EXAMPLES -from vaseinator.geometry import TOLERANCE, VaseDesign, fit_head, require_exportable -from vaseinator.lid import Lid -from vaseinator.params import (CIRCLE, DRAWN, EVENLY, FAKE_VASE, FILE_FORMAT, FILE_VERSION, ONE_COLOUR, OWN, - OWN_PROFILE, POLYGON, REAL_VASE, SAME, TISSUE_OVAL, TISSUE_ROUND, VaseParams) -from vaseinator.presets import GALLERY, PRINTER_KEYS, gallery_design, plain_design, slug, surprise -from vaseinator.report import ABOUT, DRAWING_HELP, PRINTING_HELP, function_help, info_html, lid_steps, print_steps -from vaseinator.settings import COLOUR_STYLES, LIVE_KEYS, REAL_COLOUR_STYLES, SPEC, TEXT_KEYS, change, wanted -from vaseinator.shapes import PALETTES, PROFILES, SHAPE_LABELS, pchip, shape_table -from vaseinator.workspace import Workspace, locked_surprise, comparison, calibration_parts, CALIBRATION_HELP -from vaseinator.stl import write_stl -from vaseinator.threemf import write_3mf - -SLICES = 14 # layers drawn in the from-above picture, as the desktop app draws them - - -def _report(d, errors, warnings) -> str: - """The desktop app's report, without its own style sheet: the page styles it.""" - return re.sub(r"^", "", info_html(d, errors, warnings), flags=re.S) - - -def _params(text: str) -> VaseParams: - return VaseParams.from_dict(json.loads(text)) - - -def _dump(p: VaseParams) -> str: - return json.dumps(p.to_dict()) - - -def _shown(p: VaseParams) -> list: - return [row[0] for _, rows in SPEC for row in rows if wanted(p, row[0])] - - -# ------------------------------------------------------------------ the choices -def _spec(): - """Every setting, by group, as the Advanced panel lists them.""" - groups = [] - for title, items in SPEC: - rows = [] - for key, label, kind, lo, hi, step, extra, tip in items: - row = dict(key=key, label=label, kind=kind, tip=tip, extra=extra) - if kind == "choice": - row["choices"] = [[v, t] for v, t in lo] - elif kind == "curve": - row["curve"] = lo - else: - row.update(lo=lo, hi=hi, step=step) - rows.append(row) - groups.append(dict(title=title, rows=rows)) - return groups - - -def start() -> str: - """Everything the page needs: the gallery, the choices and pictures, every setting, the help.""" - def above(settings): - r = shape_table(settings.get("shape1", CIRCLE), settings.get("count1", 5), settings.get("depth1", 0.0), - settings.get("sharp1", 0.5)) - a = np.arange(len(r)) * (2 * math.pi / len(r)) + math.radians(settings.get("turn1", 0.0)) - step = max(len(r) // 160, 1) - return [[round(float(rr * math.cos(t)), 4), round(float(rr * math.sin(t)), 4)] - for rr, t in zip(r[::step], a[::step])] - - def side(points): - pts = np.asarray(points, dtype=float) - hs = np.linspace(0.0, 1.0, 40) - d = np.clip(pchip(pts[:, 0], pts[:, 1], hs), 0.05, None) - return [round(float(v), 4) for v in d / d.max()] - - palettes = dict(PALETTES) - return json.dumps(dict( - version=__version__, - gallery=[dict(title=t, about=about, slug=slug(t), worn=bool(ch.get("worn", False))) - for t, about, ch in GALLERY], - shapes=[dict(name=n, settings=s, outline=above(s)) for n, s in SHAPES_FROM_ABOVE], - profiles=[dict(name=full.split(" (")[0], full=full, widths=side(pts), points=[list(q) for q in pts]) - for full, pts in PROFILES], - patterns=[dict(name=n, settings=s) for n, s in PATTERNS], - tissue_holes=[dict(name=n, value=v) for n, v in TISSUE_HOLES], - no_pattern=NO_PATTERN, - colours=[dict(name=n, colour=c) for n, c in COLOURS], - many_colours=[dict(name=n, palette=pal, settings=s, colours=list(palettes[pal])) - for n, pal, s in MANY_COLOURS], - palettes=[dict(name=n, colours=list(c)) for n, c in PALETTES], - printer_keys=list(PRINTER_KEYS), - spec=_spec(), live_keys=sorted(LIVE_KEYS), text_keys=sorted(TEXT_KEYS), - colour_styles=[[v, t] for v, t in COLOUR_STYLES], - real_colour_styles=[[v, t] for v, t in REAL_COLOUR_STYLES], - outlines=[dict(name=n, points=[list(q) for q in pts], repeat=r) for n, pts, r in sections.OUTLINES], - examples=[[n, f] for n, f in EXAMPLES], - shape_labels={str(k): list(v) for k, v in SHAPE_LABELS.items()}, - help=dict(printing=PRINTING_HELP, drawing=DRAWING_HELP, about=ABOUT, function=function_help()), - constants=dict(SAME=SAME, CIRCLE=CIRCLE, POLYGON=POLYGON, DRAWN=DRAWN, OWN=OWN, OWN_PROFILE=OWN_PROFILE, - EVENLY=EVENLY, REAL_VASE=REAL_VASE, FAKE_VASE=FAKE_VASE, ONE_COLOUR=ONE_COLOUR, - TISSUE_OVAL=TISSUE_OVAL, TISSUE_ROUND=TISSUE_ROUND), - defaults=VaseParams().to_dict(), - plain=plain_design().to_dict(), - )) - - -def shown(text: str) -> str: - """Which settings the Advanced panel shows for this design.""" - return json.dumps(_shown(_params(text))) - - -def apply(text: str, key: str, value: str) -> str: - """One change, as the panel makes it, with what follows from it (the desktop app's own rules).""" - p = _params(text) - touched, message = change(p, key, json.loads(value)) - p = VaseParams.from_dict(p.to_dict()) - return json.dumps(dict(params=p.to_dict(), touched=touched, message=message, shown=_shown(p))) - - -def design_of(title: str, keep: str) -> str: - """A ready-made design (or the plain cylinder), with the printer settings of ``keep``.""" - k = _params(keep) - return _dump(plain_design(k) if title == "Plain cylinder" else gallery_design(title, keep=k)) - - -def surprise_me(keep: str, seed: int, locks: str = "[]") -> str: - return _dump(locked_surprise(_params(keep), int(seed), json.loads(locks))) - - -def fit(text: str, head_mm: float) -> str: - """The design scaled to fit a head this many mm round.""" - return _dump(fit_head(_params(text), float(head_mm))) - - -def trace(pixels: str, width: int, height: int) -> str: - """Control points tracing the outline drawn in a picture: its RGBA pixels, base64.""" - rgba = np.frombuffer(base64.b64decode(pixels), dtype=np.uint8).reshape(int(height), int(width), 4) - return json.dumps(sections.trace_rgba(rgba)) - - -# ------------------------------------------------------------------ building it -def _gradient(colours, phase): - """The blend the 3D view uses for a gradient spool, for each phase.""" - ring = np.asarray(colours, dtype=float) - n = len(ring) - ph = np.mod(phase, 1.0) * n - k = np.floor(ph).astype(int) % n - t = ph - np.floor(ph) - t = t * t * (3.0 - 2.0 * t) - return ring[k] * (1.0 - t)[:, None] + ring[(k + 1) % n] * t[:, None] - - -def _colours(d: VaseDesign, z: np.ndarray) -> np.ndarray: - """The colour of each height, as the desktop app's 3D view shows it: bands, or a gradient spool.""" - cols = d.p.colors() - if d.gradient: - return _gradient([cols[k] for k in d.gradient_fils], d.colour_phase(z)) - starts = np.array([b[0] for b in d.bands]) - band_cols = np.array([cols[f] for _, f in d.bands], dtype=float) - idx = np.clip(np.searchsorted(starts, z, side="right") - 1, 0, len(starts) - 1) - return band_cols[idx] - - -def _plots(d: VaseDesign) -> dict: - """What the side and from-above pictures under the 3D view draw, as the desktop app draws them.""" - z = np.asarray(d.profile_z, dtype=float) - step = max(1, len(z) // 400) - keep = np.unique(np.concatenate([np.arange(0, len(z), step), [len(z) - 1]])) - lim = d.p.max_overhang + TOLERANCE - bad = np.nonzero(d.band_lean > lim)[0] - bad_z = (z[np.minimum(bad, len(z) - 1)] if d.rows is None - else np.array([d.rows[min(b, len(d.rows) - 1)][0] for b in bad])) - moved = z[d.row_moved > 0.05] if d.softened > 0.05 and d.row_moved is not None else np.zeros(0) - heights = [min(max(d.H * k / SLICES, 0.02), d.H - 0.02) for k in range(SLICES + 1)] - slices = [np.round(d.contour(zc)[:, :, :2], 2).reshape(-1).tolist() for zc in heights] - return dict(z=np.round(z[keep], 3).tolist(), rmax=np.round(d.profile_max[keep], 3).tolist(), - rmin=np.round(d.profile_min[keep], 3).tolist(), colours=np.round(_colours(d, z[keep]), 4).tolist(), - zb=float(d.zb), bad=np.round(bad_z, 2).tolist(), moved=np.round(moved[::step], 2).tolist(), - slices=slices, slice_colours=np.round(_colours(d, np.array(heights)), 4).tolist(), - half=0.5 * float(max(d.size[0], d.size[1], 1.0)), height=float(d.H), widest=float(d.widest)) - - -def build(text: str, draft: bool): - """Build the vase. Returns (what the page shows about it, as JSON; positions; triangles; colours; each - corner's steepest lean) - the last four as raw float32 / uint32 bytes.""" - p = _params(text) - d = VaseDesign(p, draft=bool(draft)) - meta = dict(errors=d.errors, warnings=d.warnings) - if d.errors: - meta["report"] = _report(None, d.errors, d.warnings) - return json.dumps(meta), b"", b"", b"", b"" - verts = np.asarray(d.shell_verts, dtype=np.float64) - faces = np.asarray(d.shell_faces, dtype=np.int64) - lean = np.full(len(verts), -1.0) - np.maximum.at(lean, faces.ravel(), np.repeat(np.asarray(d.shell_lean, dtype=float), 3)) - fz, fa = np.asarray(d.filament_z, dtype=float), np.asarray(d.filament_at, dtype=float) - pick = np.unique(np.linspace(0, len(fz) - 1, min(len(fz), 300)).astype(int)) - meta.update( - info=d.info(), notes=d.notes, draft=bool(draft), height=float(d.H), size=[float(s) for s in d.size], - widest=float(max(v for _, v in p.silhouette)), head=round(float(d.head_fit) / 10.0, 1), - worn=bool(d.p.worn), pattern=pattern_of(d.p), - twist_words=twist_words(d.p.twist) if d.p.twist_style != OWN else "Your own curve", - ok=bool(d.worst <= d.p.max_overhang + TOLERANCE), look=int(d.p.look), normal=bool(d.normal), - triangles=int(len(faces)), bed=[float(d.p.bed_x), float(d.p.bed_y), float(d.p.printer_height)], - limit=float(d.p.max_overhang), report=_report(d, [], d.warnings), plan=d.colour_plan(), plots=_plots(d), - printing=dict(z=np.round(fz[pick], 3).tolist(), at=np.round(fa[pick], 2).tolist(), layers=int(d.layers), - seconds=float(d.seconds), grams=float(d.grams))) - colours = _colours(d, verts[:, 2]).astype(np.float32) - return (json.dumps(meta), verts.astype(np.float32).tobytes(), faces.astype(np.uint32).tobytes(), - colours.tobytes(), lean.astype(np.float32).tobytes()) - - -# ------------------------------------------------------------------ files -def _name(p: VaseParams) -> str: - name = "".join(ch if ch.isalnum() or ch in "-_ " else "_" for ch in p.name).strip() - return name or "vase" - - -def export_3mf(text: str): - """The vase for the slicer, as the desktop app's Save for printing makes it: a part per band of colour. - Returns (the file, the steps to print it, as HTML).""" - p = _params(text) - d = VaseDesign(p) - require_exportable(d) - colors = d.p.colors() - parts = d.export_parts() - base = _name(p) - many = len(parts) > 1 - named = [(f"{base} band {k + 1}" if many else base, v, f, fil, colors[fil]) for k, (fil, v, f) in enumerate(parts)] - path = os.path.join(tempfile.gettempdir(), "vase.3mf") - write_3mf(path, base, named, (p.bed_x / 2.0, p.bed_y / 2.0, 0.0)) - with open(path, "rb") as fh: - data = fh.read() - steps = print_steps(d, f"{base}.3mf", len(parts)) - steps = re.sub(r"^Saved .*?
", "", steps, flags=re.S) # saved by the button above the steps - return data, steps.replace(" (the button below, or File â–¸ Import)", " (File â–¸ Import)") - - -def export_lid(text: str): - """A tissue box cover's lid, made to fit it, as the desktop app's Save the lid for printing makes it. - Returns (the file, the steps to print it and put it on, as HTML).""" - p = _params(text) - d = VaseDesign(p) - require_exportable(d) - lid = Lid(d) - require_exportable(lid) - base = _name(p) + " lid" - path = os.path.join(tempfile.gettempdir(), "lid.3mf") - write_3mf(path, base, [(base, lid.verts, lid.faces, 1, d.p.colors()[1])], (p.bed_x / 2.0, p.bed_y / 2.0, 0.0)) - with open(path, "rb") as fh: - data = fh.read() - steps = re.sub(r"^Saved .*?
", "", lid_steps(lid, f"{base}.3mf"), flags=re.S) - return data, steps.replace(" (the button below, or File â–¸ Import)", " (File â–¸ Import)") - - -def export_stl(text: str) -> bytes: - p = _params(text) - d = VaseDesign(p) - require_exportable(d) - path = os.path.join(tempfile.gettempdir(), "vase.stl") - write_stl(path, *d.export_mesh(), _name(p)) - with open(path, "rb") as fh: - return fh.read() - - -def save_vase(text: str) -> str: - """A .vase design file, the same as the desktop app saves.""" - return json.dumps({"format": FILE_FORMAT, "version": FILE_VERSION, "params": _params(text).to_dict()}, indent=2) - - -def open_vase(text: str) -> str: - """The settings from a .vase design file, made safe.""" - data = json.load(io.StringIO(text)) - if data.get("format") != FILE_FORMAT: - raise ValueError("That is not a Vaseinator design file.") - return _dump(VaseParams.from_dict(data.get("params", {}))) - - -def workspace_action(state: str, text: str, op: str, payload: str = "{}") -> str: - return json.dumps(Workspace(json.loads(state) if state else None).command(op, _params(text), json.loads(payload))) - - -def compare_design(text: str) -> str: - return json.dumps(comparison(VaseDesign(_params(text)))) - - -def export_calibration(text: str): - p = _params(text) - path = os.path.join(tempfile.gettempdir(), "calibration.3mf") - write_3mf(path, "Clearance samples", calibration_parts(), (p.bed_x/2, p.bed_y/2, 0)) - with open(path, "rb") as fh: - return fh.read(), "" + CALIBRATION_HELP + "
" +"""The web page's Python: the same vaseinator package as the desktop app, run in the browser by Pyodide. + +The page's workers call these functions with settings as JSON text and get JSON text back - and, for a +built vase, its mesh as raw bytes the page draws with three.js. The settings, the rules for which are shown +and what a change brings with it, the panel's report and the help are the desktop app's own. +""" + +from __future__ import annotations + +import base64 +import io +import json +import math +import os +import re +import tempfile + +import numpy as np + +from vaseinator import __version__, sections +from vaseinator.choices import (COLOURS, MANY_COLOURS, NO_PATTERN, PATTERNS, SHAPES_FROM_ABOVE, TISSUE_HOLES, pattern_of, + twist_words) +from vaseinator.expr import EXAMPLES +from vaseinator.geometry import TOLERANCE, VaseDesign, fit_head, require_exportable +from vaseinator.lid import Lid +from vaseinator.params import (CIRCLE, DRAWN, EVENLY, FAKE_VASE, FILE_FORMAT, FILE_VERSION, ONE_COLOUR, OWN, + OWN_PROFILE, POLYGON, REAL_VASE, SAME, TISSUE_OVAL, TISSUE_ROUND, VaseParams) +from vaseinator.presets import GALLERY, PRINTER_KEYS, gallery_design, plain_design, slug, surprise +from vaseinator.report import ABOUT, DRAWING_HELP, PRINTING_HELP, function_help, info_html, lid_steps, print_steps +from vaseinator.settings import COLOUR_STYLES, LIVE_KEYS, REAL_COLOUR_STYLES, SPEC, TEXT_KEYS, change, wanted +from vaseinator.shapes import PALETTES, PROFILES, SHAPE_LABELS, pchip, shape_table +from vaseinator.workspace import Workspace, locked_surprise, comparison, calibration_parts, CALIBRATION_HELP +from vaseinator.stl import write_stl +from vaseinator.threemf import write_3mf + +SLICES = 14 # layers drawn in the from-above picture, as the desktop app draws them + + +def _report(d, errors, warnings) -> str: + """The desktop app's report, without its own style sheet: the page styles it.""" + return re.sub(r"^", "", info_html(d, errors, warnings), flags=re.S) + + +def _params(text: str) -> VaseParams: + return VaseParams.from_dict(json.loads(text)) + + +def _dump(p: VaseParams) -> str: + return json.dumps(p.to_dict()) + + +def _shown(p: VaseParams) -> list: + return [row[0] for _, rows in SPEC for row in rows if wanted(p, row[0])] + + +# ------------------------------------------------------------------ the choices +def _spec(): + """Every setting, by group, as the Advanced panel lists them.""" + groups = [] + for title, items in SPEC: + rows = [] + for key, label, kind, lo, hi, step, extra, tip in items: + row = dict(key=key, label=label, kind=kind, tip=tip, extra=extra) + if kind == "choice": + row["choices"] = [[v, t] for v, t in lo] + elif kind == "curve": + row["curve"] = lo + else: + row.update(lo=lo, hi=hi, step=step) + rows.append(row) + groups.append(dict(title=title, rows=rows)) + return groups + + +def start() -> str: + """Everything the page needs: the gallery, the choices and pictures, every setting, the help.""" + def above(settings): + r = shape_table(settings.get("shape1", CIRCLE), settings.get("count1", 5), settings.get("depth1", 0.0), + settings.get("sharp1", 0.5)) + a = np.arange(len(r)) * (2 * math.pi / len(r)) + math.radians(settings.get("turn1", 0.0)) + step = max(len(r) // 160, 1) + return [[round(float(rr * math.cos(t)), 4), round(float(rr * math.sin(t)), 4)] + for rr, t in zip(r[::step], a[::step])] + + def side(points): + pts = np.asarray(points, dtype=float) + hs = np.linspace(0.0, 1.0, 40) + d = np.clip(pchip(pts[:, 0], pts[:, 1], hs), 0.05, None) + return [round(float(v), 4) for v in d / d.max()] + + palettes = dict(PALETTES) + return json.dumps(dict( + version=__version__, + gallery=[dict(title=t, about=about, slug=slug(t), worn=bool(ch.get("worn", False))) + for t, about, ch in GALLERY], + shapes=[dict(name=n, settings=s, outline=above(s)) for n, s in SHAPES_FROM_ABOVE], + profiles=[dict(name=full.split(" (")[0], full=full, widths=side(pts), points=[list(q) for q in pts]) + for full, pts in PROFILES], + patterns=[dict(name=n, settings=s) for n, s in PATTERNS], + tissue_holes=[dict(name=n, value=v) for n, v in TISSUE_HOLES], + no_pattern=NO_PATTERN, + colours=[dict(name=n, colour=c) for n, c in COLOURS], + many_colours=[dict(name=n, palette=pal, settings=s, colours=list(palettes[pal])) + for n, pal, s in MANY_COLOURS], + palettes=[dict(name=n, colours=list(c)) for n, c in PALETTES], + printer_keys=list(PRINTER_KEYS), + spec=_spec(), live_keys=sorted(LIVE_KEYS), text_keys=sorted(TEXT_KEYS), + colour_styles=[[v, t] for v, t in COLOUR_STYLES], + real_colour_styles=[[v, t] for v, t in REAL_COLOUR_STYLES], + outlines=[dict(name=n, points=[list(q) for q in pts], repeat=r) for n, pts, r in sections.OUTLINES], + examples=[[n, f] for n, f in EXAMPLES], + shape_labels={str(k): list(v) for k, v in SHAPE_LABELS.items()}, + help=dict(printing=PRINTING_HELP, drawing=DRAWING_HELP, about=ABOUT, function=function_help()), + constants=dict(SAME=SAME, CIRCLE=CIRCLE, POLYGON=POLYGON, DRAWN=DRAWN, OWN=OWN, OWN_PROFILE=OWN_PROFILE, + EVENLY=EVENLY, REAL_VASE=REAL_VASE, FAKE_VASE=FAKE_VASE, ONE_COLOUR=ONE_COLOUR, + TISSUE_OVAL=TISSUE_OVAL, TISSUE_ROUND=TISSUE_ROUND), + defaults=VaseParams().to_dict(), + plain=plain_design().to_dict(), + )) + + +def shown(text: str) -> str: + """Which settings the Advanced panel shows for this design.""" + return json.dumps(_shown(_params(text))) + + +def apply(text: str, key: str, value: str) -> str: + """One change, as the panel makes it, with what follows from it (the desktop app's own rules).""" + p = _params(text) + touched, message = change(p, key, json.loads(value)) + p = VaseParams.from_dict(p.to_dict()) + return json.dumps(dict(params=p.to_dict(), touched=touched, message=message, shown=_shown(p))) + + +def design_of(title: str, keep: str) -> str: + """A ready-made design (or the plain cylinder), with the printer settings of ``keep``.""" + k = _params(keep) + return _dump(plain_design(k) if title == "Plain cylinder" else gallery_design(title, keep=k)) + + +def surprise_me(keep: str, seed: int, locks: str = "[]") -> str: + return _dump(locked_surprise(_params(keep), int(seed), json.loads(locks))) + + +def fit(text: str, head_mm: float) -> str: + """The design scaled to fit a head this many mm round.""" + return _dump(fit_head(_params(text), float(head_mm))) + + +def trace(pixels: str, width: int, height: int) -> str: + """Control points tracing the outline drawn in a picture: its RGBA pixels, base64.""" + rgba = np.frombuffer(base64.b64decode(pixels), dtype=np.uint8).reshape(int(height), int(width), 4) + return json.dumps(sections.trace_rgba(rgba)) + + +# ------------------------------------------------------------------ building it +def _gradient(colours, phase): + """The blend the 3D view uses for a gradient spool, for each phase.""" + ring = np.asarray(colours, dtype=float) + n = len(ring) + ph = np.mod(phase, 1.0) * n + k = np.floor(ph).astype(int) % n + t = ph - np.floor(ph) + t = t * t * (3.0 - 2.0 * t) + return ring[k] * (1.0 - t)[:, None] + ring[(k + 1) % n] * t[:, None] + + +def _colours(d: VaseDesign, z: np.ndarray) -> np.ndarray: + """The colour of each height, as the desktop app's 3D view shows it: bands, or a gradient spool.""" + cols = d.p.colors() + if d.gradient: + return _gradient([cols[k] for k in d.gradient_fils], d.colour_phase(z)) + starts = np.array([b[0] for b in d.bands]) + band_cols = np.array([cols[f] for _, f in d.bands], dtype=float) + idx = np.clip(np.searchsorted(starts, z, side="right") - 1, 0, len(starts) - 1) + return band_cols[idx] + + +def _plots(d: VaseDesign) -> dict: + """What the side and from-above pictures under the 3D view draw, as the desktop app draws them.""" + z = np.asarray(d.profile_z, dtype=float) + step = max(1, len(z) // 400) + keep = np.unique(np.concatenate([np.arange(0, len(z), step), [len(z) - 1]])) + lim = d.p.max_overhang + TOLERANCE + bad = np.nonzero(d.band_lean > lim)[0] + bad_z = (z[np.minimum(bad, len(z) - 1)] if d.rows is None + else np.array([d.rows[min(b, len(d.rows) - 1)][0] for b in bad])) + moved = z[d.row_moved > 0.05] if d.softened > 0.05 and d.row_moved is not None else np.zeros(0) + heights = [min(max(d.H * k / SLICES, 0.02), d.H - 0.02) for k in range(SLICES + 1)] + slices = [np.round(d.contour(zc)[:, :, :2], 2).reshape(-1).tolist() for zc in heights] + return dict(z=np.round(z[keep], 3).tolist(), rmax=np.round(d.profile_max[keep], 3).tolist(), + rmin=np.round(d.profile_min[keep], 3).tolist(), colours=np.round(_colours(d, z[keep]), 4).tolist(), + zb=float(d.zb), bad=np.round(bad_z, 2).tolist(), moved=np.round(moved[::step], 2).tolist(), + slices=slices, slice_colours=np.round(_colours(d, np.array(heights)), 4).tolist(), + half=0.5 * float(max(d.size[0], d.size[1], 1.0)), height=float(d.H), widest=float(d.widest)) + + +def build(text: str, draft: bool): + """Build the vase. Returns (what the page shows about it, as JSON; positions; triangles; colours; each + corner's steepest lean) - the last four as raw float32 / uint32 bytes.""" + p = _params(text) + d = VaseDesign(p, draft=bool(draft)) + meta = dict(errors=d.errors, warnings=d.warnings) + if d.errors: + meta["report"] = _report(None, d.errors, d.warnings) + return json.dumps(meta), b"", b"", b"", b"" + verts = np.asarray(d.shell_verts, dtype=np.float64) + faces = np.asarray(d.shell_faces, dtype=np.int64) + lean = np.full(len(verts), -1.0) + np.maximum.at(lean, faces.ravel(), np.repeat(np.asarray(d.shell_lean, dtype=float), 3)) + fz, fa = np.asarray(d.filament_z, dtype=float), np.asarray(d.filament_at, dtype=float) + pick = np.unique(np.linspace(0, len(fz) - 1, min(len(fz), 300)).astype(int)) + meta.update( + info=d.info(), notes=d.notes, draft=bool(draft), height=float(d.H), size=[float(s) for s in d.size], + widest=float(max(v for _, v in p.silhouette)), head=round(float(d.head_fit) / 10.0, 1), + worn=bool(d.p.worn), pattern=pattern_of(d.p), + twist_words=twist_words(d.p.twist) if d.p.twist_style != OWN else "Your own curve", + ok=bool(d.worst <= d.p.max_overhang + TOLERANCE), look=int(d.p.look), normal=bool(d.normal), + triangles=int(len(faces)), bed=[float(d.p.bed_x), float(d.p.bed_y), float(d.p.printer_height)], + limit=float(d.p.max_overhang), report=_report(d, [], d.warnings), plan=d.colour_plan(), plots=_plots(d), + printing=dict(z=np.round(fz[pick], 3).tolist(), at=np.round(fa[pick], 2).tolist(), layers=int(d.layers), + seconds=float(d.seconds), grams=float(d.grams))) + colours = _colours(d, verts[:, 2]).astype(np.float32) + return (json.dumps(meta), verts.astype(np.float32).tobytes(), faces.astype(np.uint32).tobytes(), + colours.tobytes(), lean.astype(np.float32).tobytes()) + + +# ------------------------------------------------------------------ files +def _name(p: VaseParams) -> str: + name = "".join(ch if ch.isalnum() or ch in "-_ " else "_" for ch in p.name).strip() + return name or "vase" + + +def export_3mf(text: str): + """The vase for the slicer, as the desktop app's Save for printing makes it: a part per band of colour. + Returns (the file, the steps to print it, as HTML).""" + p = _params(text) + d = VaseDesign(p) + require_exportable(d) + colors = d.p.colors() + parts = d.export_parts() + base = _name(p) + many = len(parts) > 1 + named = [(f"{base} band {k + 1}" if many else base, v, f, fil, colors[fil]) for k, (fil, v, f) in enumerate(parts)] + path = os.path.join(tempfile.gettempdir(), "vase.3mf") + write_3mf(path, base, named, (p.bed_x / 2.0, p.bed_y / 2.0, 0.0)) + with open(path, "rb") as fh: + data = fh.read() + steps = print_steps(d, f"{base}.3mf", len(parts)) + steps = re.sub(r"^Saved .*?
", "", steps, flags=re.S) # saved by the button above the steps + return data, steps.replace(" (the button below, or File â–¸ Import)", " (File â–¸ Import)") + + +def export_lid(text: str): + """A tissue box cover's lid, made to fit it, as the desktop app's Save the lid for printing makes it. + Returns (the file, the steps to print it and put it on, as HTML).""" + p = _params(text) + d = VaseDesign(p) + require_exportable(d) + lid = Lid(d) + require_exportable(lid) + base = _name(p) + " lid" + path = os.path.join(tempfile.gettempdir(), "lid.3mf") + write_3mf(path, base, [(base, lid.verts, lid.faces, 1, d.p.colors()[1])], (p.bed_x / 2.0, p.bed_y / 2.0, 0.0)) + with open(path, "rb") as fh: + data = fh.read() + steps = re.sub(r"^Saved .*?
", "", lid_steps(lid, f"{base}.3mf"), flags=re.S) + return data, steps.replace(" (the button below, or File â–¸ Import)", " (File â–¸ Import)") + + +def export_stl(text: str) -> bytes: + p = _params(text) + d = VaseDesign(p) + require_exportable(d) + path = os.path.join(tempfile.gettempdir(), "vase.stl") + write_stl(path, *d.export_mesh(), _name(p)) + with open(path, "rb") as fh: + return fh.read() + + +def save_vase(text: str) -> str: + """A .vase design file, the same as the desktop app saves.""" + return json.dumps({"format": FILE_FORMAT, "version": FILE_VERSION, "params": _params(text).to_dict()}, indent=2) + + +def open_vase(text: str) -> str: + """The settings from a .vase design file, made safe.""" + data = json.load(io.StringIO(text)) + if data.get("format") != FILE_FORMAT: + raise ValueError("That is not a Vaseinator design file.") + return _dump(VaseParams.from_dict(data.get("params", {}))) + + +def workspace_action(state: str, text: str, op: str, payload: str = "{}") -> str: + return json.dumps(Workspace(json.loads(state) if state else None).command(op, _params(text), json.loads(payload))) + + +def compare_design(text: str) -> str: + return json.dumps(comparison(VaseDesign(_params(text)))) + + +def export_calibration(text: str): + p = _params(text) + path = os.path.join(tempfile.gettempdir(), "calibration.3mf") + write_3mf(path, "Clearance samples", calibration_parts(), (p.bed_x/2, p.bed_y/2, 0)) + with open(path, "rb") as fh: + return fh.read(), "" + CALIBRATION_HELP + "
" diff --git a/web/index.html b/web/index.html index b7f886e..cb61192 100644 --- a/web/index.html +++ b/web/index.html @@ -1,254 +1,254 @@ - - - - - -
- Vases, lampshades, masks and helmets that print without supports
-Drag to turn · wheel or pinch to zoom · right-drag to move
-
- Getting Vaseinator ready…
-The first time takes a little while: it brings Python and numpy into your browser, - so the vase is built right here - nothing is sent anywhere.
-
+ Vases, lampshades, masks and helmets that print without supports
+Drag to turn · wheel or pinch to zoom · right-drag to move
+
+ Getting Vaseinator ready…
+The first time takes a little while: it brings Python and numpy into your browser, + so the vase is built right here - nothing is sent anywhere.
+