41d720c1d0
- Detect kiosk mode (localhost / ?kiosk=1) and add html.kiosk-mode - Suppress 3D path-viewer in kiosk mode (Pi 3B too slow) - Compact 1366x768 layout: 56px header, smaller jog grid, 4-col macros 2-col status, 540px jog column - Flex-gap fallbacks for Chromium 72 (header tabs, sys-btn, state-badge, ktab, sp-row, etc.) using "> * + *" margin-* rules - Path-viewer: opaque WebGL canvas, ResizeObserver-gated render loop, no first-frame size flash - Path-viewer renderer cleared properly on component teardown - W axis row: W- | W+ | Probe XYZ | Probe Z (was W-|HomeW|W+|Probe) - Running panel only for actual program execution (not jogging) - Settings sectioned (Display+Units / Probing / G-code+Motion) - Routed component now keep-alive across tab swaps - FA4 -> FA6 webfonts
61 lines
2.1 KiB
JavaScript
61 lines
2.1 KiB
JavaScript
// V09 wraps the legacy Svelte SettingsView and filters its big page
|
|
// down to a single rail section so each rail item shows only the
|
|
// relevant controls. The Svelte component is left untouched (it is
|
|
// shared with the legacy UI) — we just hide the `<h2>` and `<fieldset>`
|
|
// elements whose `data-sec` does not match the active section.
|
|
|
|
module.exports = {
|
|
template: "#settings-view-template",
|
|
|
|
props: {
|
|
// "display" | "probing" | "gcode". Default is "display" which
|
|
// keeps the rail's "Display & Units" item working unchanged.
|
|
section: { default: "display" },
|
|
},
|
|
|
|
attached: function () {
|
|
this.svelteComponent = SvelteComponents.createComponent(
|
|
"SettingsView",
|
|
document.getElementById("settings")
|
|
);
|
|
// Defer one tick so Svelte has rendered the section markup.
|
|
setTimeout(() => this.apply_section_filter(), 0);
|
|
},
|
|
|
|
detached: function () {
|
|
if (this.svelteComponent) this.svelteComponent.$destroy();
|
|
},
|
|
|
|
watch: {
|
|
section: function () {
|
|
this.apply_section_filter();
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
apply_section_filter: function () {
|
|
const root = document.getElementById("settings");
|
|
if (!root) return;
|
|
const want = this.section || "display";
|
|
// Hide every section block that does not match.
|
|
root.querySelectorAll("[data-sec]").forEach(el => {
|
|
el.style.display = el.dataset.sec === want ? "" : "none";
|
|
});
|
|
// Hide the global <h1>Settings</h1> on subsections so the
|
|
// page reads as a focused panel.
|
|
const h1 = root.querySelector(".settings-view > h1");
|
|
if (h1) {
|
|
if (want === "display") {
|
|
h1.textContent = "Display & Units";
|
|
} else if (want === "probing") {
|
|
h1.textContent = "Probing";
|
|
} else if (want === "gcode") {
|
|
h1.textContent = "G-code & Motion";
|
|
} else {
|
|
h1.textContent = "Settings";
|
|
}
|
|
}
|
|
},
|
|
},
|
|
};
|