From fce99930be85263ac159932c357de4ef17c6cf6c Mon Sep 17 00:00:00 2001 From: grantpitel Date: Fri, 19 Jun 2026 14:11:20 -0400 Subject: [PATCH 01/11] Add /schematic_playground to render coil schematics New dev view: pick or paste a MAS coil, generate its electrical schematic as TikZ via the shared coilToTikz util, and render it to PDF through the existing /process_latex endpoint (graceful fallback to the TikZ source if unreachable). Registers the route and exempts it from the WASM engine-loader guard, since the playground needs no engine. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/main.js | 3 +- src/router/index.js | 5 ++ src/views/SchematicPlayground.vue | 129 ++++++++++++++++++++++++++++++ 3 files changed, 136 insertions(+), 1 deletion(-) create mode 100644 src/views/SchematicPlayground.vue diff --git a/src/main.js b/src/main.js index 4db41a7e..52bd37bd 100644 --- a/src/main.js +++ b/src/main.js @@ -135,7 +135,8 @@ router.beforeEach((to, from, next) => { } if (loadData) { - if (app.config.globalProperties.$mkf == null && to.name != "EngineLoader") { + if (app.config.globalProperties.$mkf == null && to.name != "EngineLoader" && to.name != "SchematicPlayground") { + // SchematicPlayground is pure JS (no WASM engine), so it skips the loader. app.config.globalProperties.$userStore.loadingPath = to.path router.push(`${import.meta.env.BASE_URL}engine_loader`) } diff --git a/src/router/index.js b/src/router/index.js index c2ee810d..7c4dc83c 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -11,6 +11,11 @@ const routes = [ name: 'EngineLoader', component: () => import('../views/EngineLoader.vue') }, + { + path: '/schematic_playground', + name: 'SchematicPlayground', + component: () => import('../views/SchematicPlayground.vue') + }, { path: '/cookie_policy', name: 'CookiePolicy', diff --git a/src/views/SchematicPlayground.vue b/src/views/SchematicPlayground.vue new file mode 100644 index 00000000..e44f0c35 --- /dev/null +++ b/src/views/SchematicPlayground.vue @@ -0,0 +1,129 @@ + + + + + From c4ab62e21942fdfa06bcb4c1382ecd94aa5b60c7 Mon Sep 17 00:00:00 2001 From: grantpitel Date: Fri, 19 Jun 2026 14:23:38 -0400 Subject: [PATCH 02/11] Default schematic playground to local render server in dev Local dev has no /process_latex backend (the cloud API serves it in production), so rendering 404'd. When VITE_API_ENDPOINT is unset, default the endpoint to the standalone local render server (magneticdesigner scripts/latex_render_server.py on :8765); production still uses VITE_API_ENDPOINT/process_latex. Endpoint stays editable. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/views/SchematicPlayground.vue | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/views/SchematicPlayground.vue b/src/views/SchematicPlayground.vue index e44f0c35..9d6e6ea4 100644 --- a/src/views/SchematicPlayground.vue +++ b/src/views/SchematicPlayground.vue @@ -8,14 +8,17 @@ import { MOCK_COILS } from '/WebSharedComponents/assets/js/mockCoils.js'; export default { name: 'SchematicPlayground', data() { - const base = import.meta.env.VITE_API_ENDPOINT || ''; + const base = import.meta.env.VITE_API_ENDPOINT; return { mocks: MOCK_COILS, selected: 0, coilText: '', tikz: '', pdf: null, - endpoint: `${base}/process_latex`, + // Production serves /process_latex off VITE_API_ENDPOINT. Local dev has no + // such backend, so fall back to the standalone render server + // (magneticdesigner scripts/latex_render_server.py on :8765). + endpoint: base ? `${base}/process_latex` : 'http://localhost:8765/process_latex', error: '', rendering: false, }; From f2475d71b623772cecbc6c59ec430e47048471ad Mon Sep 17 00:00:00 2001 From: grantpitel Date: Fri, 19 Jun 2026 14:40:23 -0400 Subject: [PATCH 03/11] Point schematic playground at the OM backend in dev Drop the external render-server fallback; default the dev endpoint to the OM backend (docker compose up backend -> :8000), which exposes the same /process_latex. Production still uses VITE_API_ENDPOINT; the field stays editable. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/views/SchematicPlayground.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/views/SchematicPlayground.vue b/src/views/SchematicPlayground.vue index 9d6e6ea4..34d096ef 100644 --- a/src/views/SchematicPlayground.vue +++ b/src/views/SchematicPlayground.vue @@ -15,10 +15,10 @@ export default { coilText: '', tikz: '', pdf: null, - // Production serves /process_latex off VITE_API_ENDPOINT. Local dev has no - // such backend, so fall back to the standalone render server - // (magneticdesigner scripts/latex_render_server.py on :8765). - endpoint: base ? `${base}/process_latex` : 'http://localhost:8765/process_latex', + // Production serves /process_latex off VITE_API_ENDPOINT. For local dev, + // default to the OM backend (docker compose up backend -> :8000), which + // exposes the same /process_latex. Field is editable. + endpoint: base ? `${base}/process_latex` : 'http://localhost:8000/process_latex', error: '', rendering: false, }; From 4c22cb57d8aa3a43c97342fd73a2d869499c324b Mon Sep 17 00:00:00 2001 From: grantpitel Date: Fri, 19 Jun 2026 14:52:04 -0400 Subject: [PATCH 04/11] Default schematic playground to the OM backend on :8001 The canonical :8000 is occupied by the prebuilt reference container in this dev setup, so the OM WebBackend (with /process_latex) runs on :8001. Point the dev default there so rendering works without editing the field. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/views/SchematicPlayground.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/views/SchematicPlayground.vue b/src/views/SchematicPlayground.vue index 34d096ef..995b933a 100644 --- a/src/views/SchematicPlayground.vue +++ b/src/views/SchematicPlayground.vue @@ -16,9 +16,9 @@ export default { tikz: '', pdf: null, // Production serves /process_latex off VITE_API_ENDPOINT. For local dev, - // default to the OM backend (docker compose up backend -> :8000), which - // exposes the same /process_latex. Field is editable. - endpoint: base ? `${base}/process_latex` : 'http://localhost:8000/process_latex', + // default to the OM WebBackend on :8001 (the canonical :8000 is taken by + // the prebuilt reference container here). Field is editable. + endpoint: base ? `${base}/process_latex` : 'http://localhost:8001/process_latex', error: '', rendering: false, }; From 5b301d0b8c0e4a69c1ee80cf58b555b113f847f8 Mon Sep 17 00:00:00 2001 From: grantpitel Date: Fri, 19 Jun 2026 15:08:01 -0400 Subject: [PATCH 05/11] Style schematic playground to the OM theme Use the OpenMagnetics palette (teal #539796 primary, #1a1a1a background, #2a2a2a panels, #d4d4d4 text, #ff8800 error) -- dark teal-bordered panels, teal pill chips, outlined/filled teal buttons. Hard-coded hex rather than the --bs-* vars: those are only populated after the engine-loader init, which this route deliberately skips, so the vars resolve empty here. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/views/SchematicPlayground.vue | 42 ++++++++++++++++++++----------- 1 file changed, 27 insertions(+), 15 deletions(-) diff --git a/src/views/SchematicPlayground.vue b/src/views/SchematicPlayground.vue index 995b933a..59d9109e 100644 --- a/src/views/SchematicPlayground.vue +++ b/src/views/SchematicPlayground.vue @@ -109,24 +109,36 @@ export default { From 138dca3245922d22d4faeb62eaca6f0c1234f60a Mon Sep 17 00:00:00 2001 From: grantpitel Date: Fri, 19 Jun 2026 15:26:22 -0400 Subject: [PATCH 06/11] Render schematic as inline SVG (white-on-dark), not PDF Playground POSTs /process_latex_svg and shows the returned SVG inline (v-html) with a CSS invert, so it reads as white lines on the dark theme -- matching how OM displays its plot SVGs. Replaces the PDF iframe; scales to fill the pane. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/views/SchematicPlayground.vue | 31 ++++++++++++++++--------------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/src/views/SchematicPlayground.vue b/src/views/SchematicPlayground.vue index 59d9109e..9869bf6d 100644 --- a/src/views/SchematicPlayground.vue +++ b/src/views/SchematicPlayground.vue @@ -3,8 +3,8 @@ import { coilToTikz } from '/WebSharedComponents/assets/js/coilToTikz.js'; import { MOCK_COILS } from '/WebSharedComponents/assets/js/mockCoils.js'; // Proof-of-concept playground: pick (or paste) a coil, generate its electrical -// schematic as TikZ via coilToTikz(), and render it to a PDF through the existing -// /process_latex backend endpoint. +// schematic as TikZ via coilToTikz(), and render it to an inline SVG through the OM +// backend's /process_latex_svg endpoint (shown white-on-dark via a CSS invert). export default { name: 'SchematicPlayground', data() { @@ -14,11 +14,11 @@ export default { selected: 0, coilText: '', tikz: '', - pdf: null, - // Production serves /process_latex off VITE_API_ENDPOINT. For local dev, + svg: '', + // Production serves the renderer off VITE_API_ENDPOINT. For local dev, // default to the OM WebBackend on :8001 (the canonical :8000 is taken by // the prebuilt reference container here). Field is editable. - endpoint: base ? `${base}/process_latex` : 'http://localhost:8001/process_latex', + endpoint: base ? `${base}/process_latex_svg` : 'http://localhost:8001/process_latex_svg', error: '', rendering: false, }; @@ -34,7 +34,7 @@ export default { }, generate() { this.error = ''; - this.pdf = null; + this.svg = ''; try { const coil = JSON.parse(this.coilText); this.tikz = coilToTikz(coil); @@ -43,18 +43,18 @@ export default { this.error = `Could not generate TikZ: ${e.message}`; } }, - renderPdf() { + render() { if (!this.tikz) return; this.rendering = true; this.error = ''; this.$axios.post(this.endpoint, this.tikz) .then((response) => { - this.pdf = `data:application/pdf;base64,${response.data}`; + this.svg = response.data; }) .catch((err) => { this.error = `Render failed (${this.endpoint}): ${err.message}. ` + 'The TikZ above is still valid -- point the endpoint at a ' - + 'backend that exposes /process_latex.'; + + 'backend that exposes /process_latex_svg.'; }) .finally(() => { this.rendering = false; }); }, @@ -68,7 +68,7 @@ export default {

Schematic Playground

Pick a mock coil (or edit the JSON), generate its TikZ schematic, then - render it to PDF via /process_latex. + render it to an inline SVG via /process_latex_svg.

@@ -87,8 +87,8 @@ export default {
-
@@ -99,10 +99,10 @@ export default {
- +

Rendered schematic appears here.

-

Click Render PDF to compile the TikZ.

+

Click Render to compile the TikZ.

@@ -138,7 +138,8 @@ h2 { margin: 0 0 .25rem; color: #539796; font-size: 1.5rem; } .tikz { flex: 1; min-height: 160px; background: #000; color: #d4d4d4; padding: .5rem; font-size: .72rem; overflow: auto; white-space: pre; border-radius: 6px; border: 1px solid rgba(83, 151, 150, .35); } -.pdf { width: 100%; height: 100%; border: none; background: #fff; border-radius: 4px; } +.svg-wrap { height: 100%; padding: .5rem; box-sizing: border-box; filter: invert(1); } +.svg-wrap :deep(svg) { width: 100%; height: 100%; } /* viewBox keeps aspect (meet) */ .placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; opacity: .6; border: 1px dashed rgba(83, 151, 150, .5); border-radius: 6px; } From d5f558a0c20af1bb419273c6036c4475ac6d18a3 Mon Sep 17 00:00:00 2001 From: grantpitel Date: Fri, 19 Jun 2026 15:49:20 -0400 Subject: [PATCH 07/11] Show the coil schematic above Winding Construction Steps In the Magnetic Summary, render the current design's coil to an inline SVG (coilToTikz -> /process_latex_svg, white-on-dark via CSS invert) and place it as a "Schematic" section just above the Winding Construction Steps. Renders only when the coil has a functional description and the SVG backend is reachable; otherwise it's silently omitted. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/components/Toolbox/MagneticSummary.vue | 3764 ++++++++++---------- 1 file changed, 1894 insertions(+), 1870 deletions(-) diff --git a/src/components/Toolbox/MagneticSummary.vue b/src/components/Toolbox/MagneticSummary.vue index 3e5d20b6..a9ab5bde 100644 --- a/src/components/Toolbox/MagneticSummary.vue +++ b/src/components/Toolbox/MagneticSummary.vue @@ -1,1870 +1,1894 @@ - - - - - - - + + + + + + + From 88eb3f069ea5512617af5efc3067e6d9215626da Mon Sep 17 00:00:00 2001 From: grantpitel Date: Fri, 19 Jun 2026 21:07:19 -0400 Subject: [PATCH 08/11] Self-host Font Awesome instead of the account-locked kit The hardcoded kit (kit.fontawesome.com/d5a40d6941.js) is domain-locked to the upstream account, so it returns 403 on any fork origin and no icons render. Add @fortawesome/fontawesome-free, import its CSS in main.js, and drop the kit - - + + - -