HiNC-2025-win-desktop-Deploy/App/wwwroot/HiAPI-docsite/anatomy/execution/execution-tool-bar.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
      <title>Execution Tool Bar | HiAPI-C# 2025 </title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="title" content="Execution Tool Bar | HiAPI-C# 2025 ">
      
      
      <link rel="icon" href="../../img/HiAPI.favicon.ico">
      <link rel="stylesheet" href="../../public/docfx.min.css">
      <link rel="stylesheet" href="../../public/main.css">
      <meta name="docfx:navrel" content="../../toc.html">
      <meta name="docfx:tocrel" content="toc.html">
      
      <meta name="docfx:rel" content="../../">
      
      
      
      <meta name="loc:inThisArticle" content="In this article">
      <meta name="loc:searchResultsCount" content="{count} results for &quot;{query}&quot;">
      <meta name="loc:searchNoResults" content="No results for &quot;{query}&quot;">
      <meta name="loc:tocFilter" content="Filter by title">
      <meta name="loc:nextArticle" content="Next">
      <meta name="loc:prevArticle" content="Previous">
      <meta name="loc:themeLight" content="Light">
      <meta name="loc:themeDark" content="Dark">
      <meta name="loc:themeAuto" content="Auto">
      <meta name="loc:changeTheme" content="Change theme">
      <meta name="loc:copy" content="Copy">
      <meta name="loc:downloadPdf" content="Download PDF">

      <script type="module" src="./../../public/docfx.min.js"></script>

      <script>
        const theme = localStorage.getItem('theme') || 'auto'
        document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : theme)
      </script>

  </head>

  <body class="tex2jax_ignore" data-layout="" data-yaml-mime="">
    <header class="bg-body border-bottom">
      <nav id="autocollapse" class="navbar navbar-expand-md" role="navigation">
        <div class="container-xxl flex-nowrap">
          <a class="navbar-brand" href="../../index.html">
            <img id="logo" class="svg" src="../../img/HiAPI.logo.png" alt="">
            
          </a>
          <button class="btn btn-lg d-md-none border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navpanel" aria-controls="navpanel" aria-expanded="false" aria-label="Toggle navigation">
            <i class="bi bi-three-dots"></i>
          </button>
          <div class="collapse navbar-collapse" id="navpanel">
            <div id="navbar">
              <form class="search" role="search" id="search">
                <i class="bi bi-search"></i>
                <input class="form-control" id="search-query" type="search" disabled placeholder="Search" autocomplete="off" aria-label="Search">
              </form>
            </div>
          </div>
        </div>
      </nav>
    </header>

    <main class="container-xxl">
      <div class="toc-offcanvas">
        <div class="offcanvas-md offcanvas-start" tabindex="-1" id="tocOffcanvas" aria-labelledby="tocOffcanvasLabel">
          <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="tocOffcanvasLabel">Table of Contents</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#tocOffcanvas" aria-label="Close"></button>
          </div>
          <div class="offcanvas-body">
            <nav class="toc" id="toc"></nav>
          </div>
        </div>
      </div>

      <div class="content">
        <div class="actionbar">
          <button class="btn btn-lg border-0 d-md-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#tocOffcanvas" aria-controls="tocOffcanvas" aria-expanded="false" aria-label="Show table of contents">
            <i class="bi bi-list"></i>
          </button>

          <nav id="breadcrumb"></nav>
        </div>

        <article data-uid="Anatomy-ExecutionToolBar">
          <h1 id="execution-tool-bar">Execution Tool Bar</h1>

<p>The transport controls for the run. In the web application they sit in the run header of the <a href="index.html">Execution Page</a>'s Control Tree pane — pinned above the tree, beside the run-state badge, on the Execution page only — and this sole instance registers the F5–F8 shortcuts.</p>
<h2 id="layout">Layout</h2>
<ul>
<li><code>Execution Tool Bar</code>
<ul>
<li><code>Status Text Field</code></li>
<li><code>Start Button</code> (F5; <strong>Resume</strong> once the run is paused)</li>
<li><code>Pause Button</code> (F6)</li>
<li><code>Run-One-Line Button</code> (F7 — one NC line)</li>
<li><code>Run-One-Step Button</code> (F8 — one machining step)</li>
<li><code>Stop Button</code></li>
<li><code>Reset Button</code></li>
</ul>
</li>
</ul>
<p>In the web application the status text is a run-state badge to the right of the button strip; the two share the Control Tree pane's run header, and when the tree column is narrowed the button strip scrolls while the badge keeps its width, so the run state is the last thing a resize hides. The two single-advance buttons share one <code>skip_next</code> icon and are separated by a letter drawn into the button's corner — <code>L</code> for the line button, <code>S</code> for the step button — rather than by colour; the tool-tips carry the key names.</p>
<h2 id="behavior">Behavior</h2>
<ul>
<li>The webservice watches <a class="xref" href="../../api/Hi.MachiningProcs.LocalProjectService.html">LocalProjectService</a> events to track <a class="xref" href="../../api/Hi.MachiningProcs.LocalProjectService.html#Hi_MachiningProcs_LocalProjectService_PacePlayer">PacePlayer</a> status changes.</li>
<li>In the webservice, <code>ExecutionStatusService</code> subscribes to those events and broadcasts status changes over SignalR through <code>ExecutionStatusHub</code>.</li>
<li>The frequently used buttons carry hotkeys: Start / Resume, Pause, Run One Line and Run One Step. The app's tool-tips are the only place those key bindings are written down.</li>
<li>The badge reads the status in lower case (<code>ready</code>, <code>running</code>, <code>paused</code>, <code>finished</code>, <code>no project</code>, <code>error</code>), and the background color of the <code>Status Text Field</code> follows it:
<ul>
<li>Warning (amber) — Running</li>
<li>Orange — Paused</li>
<li>Positive (green) — Finished, Ready</li>
<li>Negative (red) — Error</li>
<li>Grey — No Project, and any status the client has no label for (its raw name is shown)</li>
</ul>
</li>
</ul>
<p>The action of <code>Reset Button</code> is async, so the UI stays responsive while the session unwinds; the button shows a busy state for the duration, and the flag behind it is shared with the keyboard path so the two agree.</p>
<h2 id="enable-rules">Enable Rules</h2>
<p>Every button is disabled unless a project is loaded <strong>and</strong> the page has finished initializing its rendering connection — the web transport reads that readiness from the Execution page, so a dropped canvas connection greys the whole bar with a project still open. On top of that gate each button follows the status:</p>
<table>
<thead>
<tr>
<th>Button</th>
<th>Enabled for status</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Start</code> / <code>Resume</code></td>
<td><code>Ready</code>, <code>Paused</code></td>
</tr>
<tr>
<td><code>Pause</code></td>
<td><code>Running</code></td>
</tr>
<tr>
<td><code>Run-One-Line</code>, <code>Run-One-Step</code></td>
<td><code>Ready</code>, <code>Paused</code></td>
</tr>
<tr>
<td><code>Stop</code></td>
<td><code>Running</code>, <code>Paused</code>, <code>Finished</code></td>
</tr>
<tr>
<td><code>Reset</code></td>
<td>any, while no reset is in flight</td>
</tr>
</tbody>
</table>
<p><strong>Neither single-advance button is enabled while the run is <code>Running</code></strong> — stepping is a <code>Ready</code>-or-<code>Paused</code> operation, so a moving run has to be paused before it can be stepped.</p>
<p>The F5–F8 handler applies the same predicates before acting, and declines in two more cases: when the event target is an <code>input</code>, a <code>textarea</code> or a contenteditable element, and when the hosting page is deactivated. The second matters because the shell keep-alives the routed pages, so leaving the Execution route deactivates rather than unmounts this component; without the detach, F5 elsewhere in the app would drive the transport instead of reloading the browser. Collapsing the Control Tree row does not detach it: the dock keeps the tree pane mounted through a collapse. Every declined key falls through to the browser.</p>
<div class="TIP">
<h5>Tip</h5>
<p>Use icons rather than text on the tool-bar buttons. Run One Line and Run One Step share an icon, so they need a second mark to tell them apart — this bar draws an <code>L</code> and an <code>S</code> in the button corner. The default colour is enough for the rest.</p>
</div>
<h2 id="source-code-path">Source Code Path</h2>
<p>See <a class="xref" href="../index.html">HiNC App Anatomy</a> for git repository links.</p>
<p>HiNC-2025-webservice (Quasar CLI SPA):</p>
<ul>
<li><code>wwwroot-src/src/components/execution/ExecutionToolBar.vue</code> — the buttons. All state and handlers come from the shared <code>useExecutionTransport</code> composable, so the component is pure markup.</li>
<li><code>wwwroot-src/src/composables/useExecutionTransport.ts</code> — the enable rules, the API-calling handlers and the F5–F8 listener; the shared reset-in-flight flag lives here.</li>
<li><code>wwwroot-src/src/components/controlTree/ControlTreePanel.vue</code> — the Control Tree pane; its run header mounts the bar beside the run-state badge on the Execution page only, with the badge unshrinkable and the button strip the part that scrolls.</li>
<li><code>wwwroot-src/src/utils/executionStatusPresent.ts</code> — the badge's label and color per status.</li>
<li><code>Execution/ExecutionController.cs</code> — <code>POST /api/Execution/start | pause | resume | run-line | run-step | stop | reset</code>, and <code>GET /api/Execution/status</code>.</li>
<li><code>Execution/ExecutionStatusHub.cs</code> + <code>Execution/ExecutionStatusService.cs</code> — the status broadcast.</li>
</ul>
<h4 id="signalr-implementation-web-service-only">SignalR Implementation (Web Service Only)</h4>
<p><code>ExecutionStatusHub</code> is mapped at <code>/executionStatusHub</code> and answers <code>GetExecutionStatus()</code>. <code>ExecutionStatusService</code> watches the <a class="xref" href="../../api/Hi.MachiningProcs.LocalProjectService.html#Hi_MachiningProcs_LocalProjectService_PacePlayer">PacePlayer</a> events — <a class="xref" href="../../api/Hi.Common.PacePlayer.html#Hi_Common_PacePlayer_IsRunningChangedEvent">IsRunningChangedEvent</a>, <a class="xref" href="../../api/Hi.Common.PacePlayer.html#Hi_Common_PacePlayer_IsLockedChangedEvent">IsLockedChangedEvent</a>, <a class="xref" href="../../api/Hi.Common.PacePlayer.html#Hi_Common_PacePlayer_IsFinishedChangedEvent">IsFinishedChangedEvent</a> and <a class="xref" href="../../api/Hi.Common.PacePlayer.html#Hi_Common_PacePlayer_ResetedEvent">ResetedEvent</a> — and broadcasts each change, so every connected client sees the same run state without polling.</p>
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="index.html">Execution Page</a> — the page these controls drive</li>
<li><a href="../../manual/run/running-a-simulation.html">Starting and Stepping</a> — the task these controls serve, with the enable rules read as a procedure</li>
</ul>

</article>

        <div class="contribution d-print-none">
        </div>

        <div class="next-article d-print-none border-top" id="nextArticle"></div>

      </div>

      <div class="affix">
        <nav id="affix"></nav>
      </div>
    </main>

    <div class="container-xxl search-results" id="search-results"></div>

    <footer class="border-top text-secondary">
      <div class="container-xxl">
        <div class="flex-fill">
          <span> Copyright © 2025 <a href='https://superhightech.com.tw'>Tech Coordinate</a>. All rights reserved. <a href='https://superhightech.com.tw'>超級高科技股份有限公司</a> © 2025 版權所有 </span>
        </div>
      </div>
    </footer>
  </body>
</html>