Table of Contents

Main Panel

The Main Panel is the primary window of the HiNC application, providing navigation and access to all major features.

Key Models

Layout Structure

  • Top Navigation Menu

    • Brand logo, and the version badge beside it: the product module's VersionBadge, which AppMenuBar.vue places without drawing it. When the web service runs on its own, that is VersionBadge.vue, an outlined grey badge reading v + the HiNc assembly version reported by the anonymous authentication-status probe the router runs before the first route resolves, so it needs no loaded project; it is omitted only while that probe has reported no version. It has no other state and no tooltip, and a click on it does nothing. A host that builds the SPA with a product module of its own puts its own badge in this place (Hosting from another project): the installed HiNC shows its update badge here and adds Check for Updates… and Licence… to the Help dropdown, described in Updating HiNC on Windows and Signing In with a Cloud Account.

    • File Menu Dropdown — the project's commands; its strings keep the menu.project.* namespace, and only the label reads “File”

      • Project Path Text Field — readonly; reads “No Project Loaded” until a project is loaded
      • New MenuItem
      • Load MenuItem
      • ReLoad MenuItem
      • Save MenuItem
      • Save As MenuItem
      • Close Project MenuItem (below a separator)

      ReLoad, Save, Save As and Close Project are disabled until a project is loaded, and New, Load and Save As open the shared file-picker dialog with a .hincproj filter. The picker is allowed the Admin and Project roots and is denied the Resource root, which holds read-only templates the project endpoints cannot save through; it asks for the Admin root by name, so that is where it opens, and it seeds its path box with the directory holding the loaded project, or with the admin root itself when there is none. The Project root is one of the two only while a project is loaded: the roots endpoint lists a root only when its directory resolves, and the project directory resolves to nothing until a project is open, so with no project the picker offers Admin alone.

    • Preference Menu Dropdown

    • Help Menu Dropdown — the two references this server hosts, then the service's own log. The two references are same-origin links that open in a new browser tab, so the running page keeps its state, and each carries an open-in-new-tab icon

      • Documentation MenuItem — /HiAPI-docsite/, the doc site this server hosts
      • API Reference (Swagger) MenuItem — /swagger/index.html, the Swagger UI over the REST contract
      • Log Viewer MenuItem (below a separator) — a router link to the Log Viewer Page, /preference/log, which opens in place, in the same tab, and carries no icon. Its label is the route's own title. It is a support tool rather than a shop-floor one, which is why it sits here rather than on the bar. The Log Viewer presents this instance's log file for the current day, with a manual refresh, a selectable auto-refresh interval, copy to the clipboard, and download of the day's log file for offline analysis.
      • The product module's HelpMenuItems, rendered after the Log Viewer — null when the web service runs on its own, so the Log Viewer is the dropdown's last entry. A host's own product module may append items here.

      The two reference targets answer without signing in: the doc site is static files and the Swagger UI is middleware, and both stages run ahead of the login gate. The doc site is the docfx site HiNc-Resource ships into the build output's wwwroot/HiAPI-docsite/; the host layers the build output's wwwroot under its web root, so the entry resolves also when the service is started with dotnet run from the project folder, whose web root holds only the SPA bundle.

    • Page Switches — one segmented toggle (q-btn-toggle) after a vertical separator: the three workflow pages in setup order (fill the tool house, set up the equipment, run), then the one utility page, with no divider between them.

      • Tool House Switch Open Tool House Page — the tool list, the Control Tree of the tool picked there, its editor and the tool canvas. The switch links to the bare /tool-house, which reopens the tool already shown (the first tool on a fresh page) on the node last picked.
      • Equipment Switch The equipment Control Tree — four roots: Mechanism (Machine Tool / Fixture / Workpiece), Spindle Capability, Environment (Ambient Temperature / Coolant) and Controller, in that order, the middle two only while Show Physics Options is on — plus its editor column, the shared equipment canvas and the Topology column, the whole-equipment anchor / branch editor (Equipment Topology). Two further controller branches, CSV Controller and CL Controller, are hidden by default and are switched on from the Preference dropdown's Optional Nodes & Charts submenu.
      • Execution Switch Open Execution Page
      • File Explorer Switch. See Util Pages.

      The current page's switch is lit (filled primary), the others white. The lit switch is chosen by route name alone, so every URL a page answers to lights it — a ?tree= selection, a Tool House tool and node path, a File Explorer deep path, and the legacy redirect paths once they land. The lit switch carries no link, and clicking it does nothing, so a File Explorer deep path keeps its folder; the unlit switches are router links, so a middle-click or ctrl-click opens that page in a new tab.

      The switches are not every route the application has. The Log Viewer is reached from the Help dropdown, and no switch is lit while it is shown. The /general-setup path and the Machine Tool, Mechanism Builder, Fixture, Workpiece, Spindle Capability, Mission, Environment (Ambient Temperature / Coolant) and legacy Controller paths resolve as redirects into the Equipment and Execution trees — the Mechanism Builder's onto the Machine Tool root.

  • Central Page Panel — one router outlet wrapped in a keep-alive cache keyed on a project epoch: an integer the layout owns, raised by two watchers and read by nothing else. The first watches the project store's path, which New, Load and Save As each assign from the response they get back, which Close Project clears, and which a store-level watcher on the shared execution-status hub adopts from every broadcast — so a project change made in another tab, from another browser, or outside the browser altogether bumps the epoch here as well, and so does the boot status fetch, once, on a service that already has a project open. The second watches a counter the store raises whenever the server's project generation moves — a New, a Load, a ReLoad or a Close, from any tab or client, read from the status broadcast or from the response of the tab's own operation, whichever lands first — which is what makes a re-read of the same path, by ReLoad or by a Load of the file already open, remount at all. Assigning the path it already holds moves neither watcher, so Save on the current path does not remount and neither does a Save As written back onto the path already open. A bump discards every cached page and rebuilds it, so each page initializes on its own mount hook rather than watching for project changes itself.
  • Bottom footer — the routine-progress bar: the latest foreground message with a recent-messages history menu on the left, the live session status in the middle, and in-flight background job progress on the right. See Message Section on Main Panel.

The menu bar carries no run tool bars at all: the transport controls and the execution status badge ride the run header the Execution Page‘s Control Tree pane pins above its tree, and the view controls ride its canvas panel header. What the menu bar keeps instead, right-aligned after the page switches, is the page's set of column quick-toggles, the connection badge, the product module's CloudStatusBadge and — when authentication is on — the sign-out button, labelled with the signed-in user name; the connection badge and the sign-out button are each led by a separator of their own, and CloudStatusBadge draws its own when it shows a badge. When the web service runs on its own, CloudStatusBadge is null and nothing stands between the connection badge and the sign-out button; the installed HiNC puts its cloud licence badge there, on every page, while it runs under a cloud licence (Signing In with a Cloud Account). The bar prints no page title: the lit switch names each of the four switch pages, and the Log Viewer carries its own title row. The toggles follow whichever tree page is current, one per column left to right: four on the Execution page (control dock, canvas, strip charts, step info), four on Equipment (Control Tree, editor, canvas, Topology — the canvas one titled “Toggle the Equipment canvas”, the last “Toggle the Topology column”) and four on Tool House (tool list, Control Tree, editor, tool canvas). The Topology column is the one column whose first-visit default depends on the window: it starts shown only on a window at least 1280 px wide, and its width persists as topologyColPx in the same device-local view prefs as the other columns. The connection badge is Execution-only — the other pages’ canvases carry their own in-panel badges.

File Menu Behavior

The Project Path Text Field displays the current project path when a project is loaded. It is implemented as a pure text field (not a button) that allows users to select and copy the path.

The File Menu manages MachiningProject with the following operations:

Operation Description Example
New Creates a new project See DemoBuildGeomOnlyMachiningProject
Load Opens an existing project See DemoUseMachiningProject
ReLoad Re-reads the current project from disk, same path —
Save Saves the current project See DemoBuildGeomOnlyMachiningProject
Save As Saves the project to a new location See DemoBuildGeomOnlyMachiningProject
Close Closes the current project and clears the shell —

Every Project action reports through two channels: a background progress line on the footer while it runs, then a toast when it lands — positive on success, a “busy” warning when a concurrent action has already claimed the service (HTTP 409), negative otherwise. What a project change drives in the shell is the layout's keep-alive epoch, not a canvas view: every cached page is discarded and rebuilt.

Note

Project actions report through the toast helper and the routine-progress footer store, and none of them routes a message through MessageUtil. Project I/O is asynchronous, so the shell stays responsive during file I/O.

Platform-Specific Differences

Web Application

  • The Execution Page is the landing route — / redirects to /execution
  • The page URL and panel state are synchronized (bi-directional navigation)
  • Environment is a root of the Equipment page's Control Tree, over Ambient Temperature / Coolant, not a menu-bar dropdown. Mechanism (Machine Tool / Fixture / Workpiece), Spindle Capability, Environment and Controller are the roots of that tree — Spindle Capability and Environment only while Show Physics Options is on — and Tool House and Execution are pages of their own; the remaining paths resolve as redirects into those pages. The menu bar therefore holds three dropdowns, File ▾ | Preference ▾ | Help ▾, and after them the four page switches.

Source Code Path

See HiNC App Anatomy for git repository links.

Web Application

HiNC-2025-webservice (Quasar CLI SPA):

  • Environments/PreferenceController.cs — the endpoints behind the Preference dropdown.
  • Environments/ProjectController.cs — the project endpoints: status, new, load, save, reload, saveas and close, plus the log endpoints.
  • Environments/UserService.cs — the shell's user model.
  • wwwroot-src/src/components/AppMenuBar.vue — the whole navigation menu: the brand logo and the product module's VersionBadge placed beside it, the File, Preference and Help dropdowns, the Help entries' two hrefs and the Log Viewer router link below them, followed by the product module's HelpMenuItems when it is not null, the right-hand toggles, the connection badge, the product module's CloudStatusBadge after it when it is not null, the sign-out button, and the page switches — PAGE_SWITCHES (route name and label key per switch), the activePage computed that maps the route name onto the lit switch, and pageSwitches, the options of the page-switches toggle, in which the lit switch carries no to.
  • wwwroot-src/src/components/AppFooter.vue — the routine-progress footer the layout docks.
  • wwwroot-src/src/layouts/MainLayout.vue — the shell that hosts the menu bar, the keep-alive page panel and the footer.
  • wwwroot-src/src/router/routes.ts — the routes the page switches target and the redirect-only legacy paths.
  • wwwroot-src/src/i18n/en/menu.ts — the menu bar's English labels: menu.project.* behind the File dropdown, menu.preference.* behind the Preference dropdown, menu.page.* the switch labels — which the Preference dropdown's Optional Nodes & Charts submenu also reads for its group headers — and menu.help.* the Help dropdown.
  • Program.cs — layers the build output's wwwroot under the web root, which is what serves /HiAPI-docsite/ under dotnet run.
  • wwwroot-src/src/stores/project.ts — the six Project actions and the busy error a 409 becomes.
  • wwwroot-src/src/stores/routineProgress.ts — the foreground-message and background-progress store the Project handlers share with the footer.
  • wwwroot-src/src/composables/useToast.ts — the toasts every Project action ends in.
  • wwwroot-src/src/composables/useViewPrefs.ts — the device-local per-page column visibility, the CSV / CL controller switches, the two sensor-chart switches and the Block Info panel's raw JSON switch.
  • wwwroot-src/src/composables/useConnectionsHealth.ts — the aggregate state behind the Execution connection badge.
  • wwwroot-src/src/components/widgets/FileExplorerDialog.vue — the shared picker New, Load and Save As open.
  • wwwroot-src/src/components/widgets/ColumnToggleIcon.vue — the glyph each column quick-toggle draws.
  • wwwroot-src/src/pages/LogViewerPage.vue — the Log Viewer the Help dropdown's Log Viewer entry opens.
  • wwwroot-src/src/i18n/en/routes.ts — the Log Viewer route title that entry reads as.
  • wwwroot-src/src/product/index.ts — the web service's own product module, which the menu bar imports through the product alias: VersionBadge, and HelpMenuItems and CloudStatusBadge, both null.
  • wwwroot-src/src/product/VersionBadge.vue — the web service's own version badge: outlined grey, v + the auth store's version, omitted while there is none.
  • wwwroot-src/quasar.config.ts — the product alias, which resolves to wwwroot-src/src/product unless HINC_PRODUCT_SPA names another folder at build time.

See Also

  • Execution Page — the landing page the shell routes to
  • Preference Menu Dropdown — the second dropdown on the bar
  • Bottom Message Bar — the notification bar the shell docks along the bottom
  • Equipment Page — the page the Equipment switch reaches
  • Equipment Topology — the Equipment page's fourth column, behind the bar's last column toggle
  • Tree Ids and Routes — the route table this bar navigates, and how a ?tree= id lands on the page that owns it
  • Session State — the keep-alive this shell wraps the router view in, and what a project change destroys
  • Login and Authentication — the gate in front of this shell, and the sign-out entry on this bar
  • Log Viewer Page — the screen the Help dropdown's Log Viewer entry opens
  • Hosting from another project — how another project hosts this web service, and the product module through which it puts a version badge, Help items and a cloud licence badge of its own on this bar
  • Updating HiNC on Windows — the update badge and the Check for Updates… entry the installed HiNC puts on this bar, from the operator's side