Henrik Muehe
32f3aca368
Implements the V09 mock end-to-end (per plans/2026-04-30_ux_redesign.md):
Top shell
- index.pug rebuilt around .app-shell with a slim 96px header.
- Underline-ribbon tab bar (Control / Program / Console / Settings)
replaces the old side menu and the inline #tab1..#tab4 system.
- Single 'All systems' pill collapses the legacy WiFi/Camera/Rotary/
IP/Version chip-soup into one popover (sys-popover) anchored to the
header; rotary toggle, camera feed and shutdown live there.
- Octagonal 88x88px STOP button wraps the existing <estop> SVG; STATE
pill with pulse-dot honors prefers-reduced-motion.
Routing
- app.js parse_hash maps every existing hash:
#control -> Control
#program / #program:auto -> Program
#console / #console:mdi|messages|indicators -> Console
#settings, #admin-general,
#admin-network, #motor:N, #tool, #io, #macros, #help,
#cheat-sheet -> Settings (rail picks inner)
- All deep links are preserved.
Control panel (control-view.pug + .js)
- 720px jog grid + 4-axis DRO + 4 KPI cards + 8-macro row.
- Jog tiles use V09 flat slate (#3f4b63) with diagonal helpers and
a ghost row for XY/Z origin shortcuts.
- Per-axis Settings/Set-zero/Home buttons grow to 72x72px.
- Status strip cards: State / Velocity-Feed / Spindle / Job. Tapping
the Spindle card opens the new override-drawer with feed + spindle
range inputs (resolved decision in plans/...).
- Macro row binds to state.macros.slice(0, 8); >8 lives in Settings.
- Drops the old <table> control-buttons, .info, .override and .tabs
blocks entirely.
Program panel (program-view.pug + .js)
- Extracts the Auto bar, file selectors, gcode-viewer and path-viewer
out of control-view.
- Action buttons (RUN/STOP/UPLOAD-FOLDER/UPLOAD-FILE/DOWNLOAD-FILE/
DELETE) at 84px with explicit color affordances.
- Reuses control-view's existing methods via the new program-mixin.
Console panel (console-view.pug + .js)
- Three sub-tabs: MDI / Messages / Indicators. Sub-tab persists in the
URL fragment (#console:messages etc.).
- MDI: terminal-style prompt + SEND, plus an 8-wide on-screen keypad
(G0/G1/G2/G3/G28/G92/M3/M5 + axis letters + CLEAR/SEND).
- Messages: pulls from .messages_log (mirrored from
state.messages); badge in the header tab counts unread.
- Indicators: mounts the existing <indicators> component.
Settings shell (settings-shell.pug + .js)
- New left rail navigator listing Display, Network, General/Firmware,
Spindle&Tool, IO, Motors 0..3, Macros, Cheat Sheet, Help.
- Inner area mounts the existing settings family templates via an
explicit v-if cascade (avoiding a Vue 1 :is reactivity quirk).
- Shutdown / Save buttons relocated from the dropped side menu.
JS plumbing
- main.js: Vue.config.async = false to keep dependent watchers in
sync when reactive data is mutated outside Vue's normal event loop
(e.g. from a hashchange listener).
- program-mixin.js extracted so control-view.js no longer carries the
file/macro/gcode methods that are now Program-only.
- control-view.js trimmed to jog/DRO/probe/home logic.
- console-view.js / settings-shell-view.js use a hashchange listener
+ local data props because Vue 1 cannot reliably observe
.sub_tab from a child component.
Stylus rewrite
- Removes the old .header (140px), .nav-header, .brand subtree, #menu,
#main, .control-view block, .info, .override, .toolbar, .macros-div,
.macros-button, the .tabs > input radio-tab system and the .control-
view #control media-query overrides. None of these are referenced
any more.
- Adds V09 tokens (jog/macro palette + accent + line/card colors) at
the top, the new shell rules, .ktab / .sys-btn / .state-badge /
.estop chrome, the .control-page grid, status strip + override
drawer, .program-page action / file bars and program body,
.console-page MDI keypad / messages / indicators panes, and the
.settings-shell rail.
- Adds a 1820px breakpoint that stacks the right column under the jog
on smaller portable monitors.
Hard cut: no config.ui.layout flag, the old shell is removed in this
single commit. side-menu.css is no longer included from index.pug.
Tested locally with agent-browser (1920x1080) on every top tab and
every settings sub-route; routing, active tab highlighting and inner
view selection all work without a controller connection.
61 lines
1.4 KiB
JavaScript
61 lines
1.4 KiB
JavaScript
"use strict";
|
|
|
|
// Program tab — file management, run/stop, gcode listing and 3D
|
|
// toolpath preview. Reuses the shared mixin (program-mixin) that also
|
|
// powers the legacy bits of control-view; this view does not host the
|
|
// jog grid or the DRO.
|
|
|
|
module.exports = {
|
|
template: "#program-view-template",
|
|
props: ["config", "template", "state"],
|
|
|
|
components: {
|
|
"path-viewer": require("./path-viewer"),
|
|
"gcode-viewer": require("./gcode-viewer"),
|
|
},
|
|
|
|
data: function () {
|
|
return {};
|
|
},
|
|
|
|
watch: {
|
|
"state.metric": {
|
|
handler: function () {},
|
|
immediate: true,
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
display_units: {
|
|
cache: false,
|
|
get: function () { return this.$root.display_units; },
|
|
set: function (value) {
|
|
this.config.settings.units = value;
|
|
this.$root.display_units = value;
|
|
this.$dispatch("config-changed");
|
|
},
|
|
},
|
|
|
|
metric: function () {
|
|
return this.display_units === "METRIC";
|
|
},
|
|
|
|
mach_state: function () {
|
|
const cycle = this.state.cycle;
|
|
const xx = this.state.xx;
|
|
if (xx != "ESTOPPED" && (cycle == "jogging" || cycle == "homing")) {
|
|
return cycle.toUpperCase();
|
|
}
|
|
return xx || "";
|
|
},
|
|
|
|
can_set_axis: function () { return this.state.cycle == "idle"; },
|
|
},
|
|
|
|
ready: function () {
|
|
this.load();
|
|
},
|
|
|
|
mixins: [require("./program-mixin")],
|
|
};
|