推进 INI 面板 control page entry

2026-06-14 23:02:50 +08:00
parent 27d2316f78
commit 2844fd25c3
6 changed files with 408 additions and 0 deletions
--- a/wasm-port/docs/ui-panel-state-summary.md
+++ b/wasm-port/docs/ui-panel-state-summary.md
@@ -26,6 +26,9 @@ For direct rendering, use `window.linuxCncIniPanelApi.getMachineSessionControlVi
 The panel also exposes
 `window.linuxCncIniPanelApi.renderMachineSessionControlView(container)`, which
 renders the current view into a supplied DOM container.
+For a ready-made read-only page, open
+`runtime/ui/ini-panel/control-page.html`. It embeds the panel in a hidden iframe
+and mirrors the same control view into the visible page.

 ## `createIniPanelStateSummary(input)`

--- a/wasm-port/runtime/ui/ini-panel/control-page.html
+++ b/wasm-port/runtime/ui/ini-panel/control-page.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>LinuxCNC INI Control View</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --bg: #f2f5f8;
+      --panel: #ffffff;
+      --border: #cfd8e1;
+      --text: #17212b;
+      --muted: #5a6875;
+      --accent: #1366a6;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: "Segoe UI", "Noto Sans", sans-serif;
+      background: var(--bg);
+      color: var(--text);
+    }
+    main {
+      max-width: 1040px;
+      margin: 0 auto;
+      padding: 24px;
+      display: grid;
+      gap: 16px;
+    }
+    .panel {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      box-shadow: 0 10px 30px rgba(17, 34, 51, 0.06);
+      padding: 16px;
+      display: grid;
+      gap: 12px;
+    }
+    h1 {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+    }
+    .status {
+      color: var(--muted);
+      font: 13px/1.4 "SFMono-Regular", "Consolas", monospace;
+      overflow-wrap: anywhere;
+    }
+    .control-view {
+      display: grid;
+      gap: 12px;
+      border-top: 1px solid #edf2f6;
+      padding-top: 12px;
+    }
+    iframe {
+      display: none;
+    }
+    .control-view [data-control-view-sections] {
+      display: grid;
+      gap: 10px;
+    }
+    .control-view section {
+      border-top: 1px solid #edf2f6;
+      padding-top: 10px;
+      display: grid;
+      gap: 8px;
+    }
+    .control-view h3 {
+      margin: 0;
+      font-size: 13px;
+      font-weight: 700;
+    }
+    .control-view dl {
+      display: grid;
+      grid-template-columns: 132px 1fr;
+      gap: 6px 10px;
+      margin: 0;
+    }
+    .control-view dt {
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .control-view dd {
+      margin: 0;
+      font: 12px/1.4 "SFMono-Regular", "Consolas", monospace;
+      overflow-wrap: anywhere;
+    }
+    @media (max-width: 640px) {
+      main { padding: 16px; }
+      .control-view dl { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+  <main>
+    <section class="panel">
+      <h1>LinuxCNC INI Control View</h1>
+      <div id="control-page-status" class="status">waiting for panel</div>
+      <div id="control-page-view" class="control-view"></div>
+    </section>
+  </main>
+  <iframe id="panel-frame" title="LinuxCNC INI panel" aria-hidden="true"></iframe>
+  <script type="module" src="./control-page.js"></script>
+</body>
+</html>
--- a/wasm-port/runtime/ui/ini-panel/control-page.js
+++ b/wasm-port/runtime/ui/ini-panel/control-page.js
@@ -0,0 +1,58 @@
+import {
+  renderMachineSessionControlView,
+} from "./control-view-renderer.js";
+
+const panelFrameNode = document.getElementById("panel-frame");
+const statusNode = document.getElementById("control-page-status");
+const viewNode = document.getElementById("control-page-view");
+
+let refreshTimer = null;
+
+function getPanelWindow() {
+  return panelFrameNode?.contentWindow ?? null;
+}
+
+function getPanelApi() {
+  return getPanelWindow()?.linuxCncIniPanelApi ?? null;
+}
+
+function getControlView() {
+  return getPanelApi()?.getMachineSessionControlView?.() ?? null;
+}
+
+function renderControlPage() {
+  const view = getControlView();
+  if (!view) {
+    statusNode.textContent = "waiting for panel";
+    viewNode.textContent = "";
+    return null;
+  }
+
+  statusNode.textContent = [
+    view.status.lastAction ?? "-",
+    view.status.runStatus ?? "-",
+    view.status.error ?? "-",
+  ].join(" | ");
+  return renderMachineSessionControlView(viewNode, view);
+}
+
+function startPolling() {
+  if (!refreshTimer) {
+    refreshTimer = setInterval(renderControlPage, 200);
+  }
+}
+
+panelFrameNode.addEventListener("load", () => {
+  renderControlPage();
+  startPolling();
+});
+
+panelFrameNode.src = "./index.html";
+renderControlPage();
+startPolling();
+
+window.linuxCncIniPanelControlPageApi = {
+  getControlView,
+  getPanelApi,
+  renderControlPage,
+};
--- a/wasm-port/tests/browser/ini_panel_control_page_smoke.html
+++ b/wasm-port/tests/browser/ini_panel_control_page_smoke.html
@@ -0,0 +1,162 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>LinuxCNC INI Control Page Smoke</title>
+</head>
+<body>
+  <pre id="status">running</pre>
+  <script type="module">
+    function assertEqual(actual, expected, label) {
+      if (actual !== expected) {
+        throw new Error(`${label}: expected ${expected}, got ${actual}`);
+      }
+    }
+
+    function delay(ms) {
+      return new Promise((resolve) => setTimeout(resolve, ms));
+    }
+
+    async function waitFor(predicate, label) {
+      const deadline = performance.now() + 10000;
+      while (performance.now() < deadline) {
+        const value = predicate();
+        if (value) {
+          return value;
+        }
+        await delay(50);
+      }
+      throw new Error(`Timed out waiting for ${label}`);
+    }
+
+    async function loadControlPageFrame() {
+      const frame = document.createElement("iframe");
+      frame.src = "../../runtime/ui/ini-panel/control-page.html";
+      document.body.appendChild(frame);
+      await new Promise((resolve, reject) => {
+        frame.addEventListener("load", resolve, { once: true });
+        frame.addEventListener("error", reject, { once: true });
+      });
+      return frame.contentDocument;
+    }
+
+    try {
+      const iniText = `[EMC]
+MACHINE = browser-control-page
+
+[TRAJ]
+LINEAR_UNITS = mm
+COORDINATES = X Y Z
+
+[KINS]
+KINEMATICS = trivkins
+JOINTS = 3
+
+[RS274NGC]
+PARAMETER_FILE = browser-linuxcnc.var
+
+[EMCIO]
+TOOL_TABLE = browser-tool.tbl
+`;
+
+      const controlDoc = await loadControlPageFrame();
+      const controlPageApi = controlDoc.defaultView.linuxCncIniPanelControlPageApi;
+      if (
+        !controlPageApi?.getControlView ||
+        !controlPageApi?.getPanelApi ||
+        !controlPageApi?.renderControlPage
+      ) {
+        throw new Error("control page API namespace did not expose control helpers");
+      }
+
+      const panelFrame = controlDoc.getElementById("panel-frame");
+      const panelDoc = await waitFor(
+        () => panelFrame?.contentDocument,
+        "embedded INI panel frame",
+      );
+      await waitFor(
+        () => panelDoc.defaultView?.linuxCncIniPanelApi?.getMachineSessionControlView?.(),
+        "embedded INI panel API",
+      );
+      await waitFor(
+        () => controlPageApi.getControlView(),
+        "control page API view",
+      );
+
+      panelDoc.getElementById("ini-editor").value = iniText;
+      panelDoc.getElementById("query").click();
+      await waitFor(
+        () => panelDoc.getElementById("field-parameter-file")?.textContent.includes("browser-linuxcnc.var"),
+        "control page query",
+      );
+
+      panelDoc.getElementById("save-machine-files").click();
+      await waitFor(
+        () => panelDoc.getElementById("log")?.textContent.includes("Saved machine text files"),
+        "control page save machine files",
+      );
+
+      panelDoc.getElementById("load-session").click();
+      await waitFor(
+        () => panelDoc.getElementById("log")?.textContent.includes("Loaded machine session"),
+        "control page load session",
+      );
+
+      panelDoc.getElementById("save-session-snapshot").click();
+      await waitFor(
+        () => panelDoc.getElementById("log")?.textContent.includes("Saved machine session snapshot"),
+        "control page save session snapshot",
+      );
+
+      panelDoc.getElementById("run-gcode").click();
+      await waitFor(
+        () => panelDoc.getElementById("log")?.textContent.includes("Ran G-code"),
+        "control page run G-code",
+      );
+      await waitFor(
+        () => controlPageApi.getControlView()?.status?.runStatus === "ok",
+        "control page rendered view",
+      );
+
+      const controlView = controlPageApi.getControlView();
+      assertEqual(controlView.status.lastAction, "run-gcode", "control page last action");
+      assertEqual(controlView.status.runStatus, "ok", "control page run status");
+      assertEqual(controlView.sections.length, 3, "control page section count");
+      assertEqual(
+        controlView.sections[1].rows[1].value,
+        "save-session-snapshot",
+        "control page session workflow row",
+      );
+      assertEqual(
+        controlView.sections[2].rows[1].value,
+        2,
+        "control page canonical event row",
+      );
+      assertEqual(
+        controlDoc.getElementById("control-page-status").textContent,
+        "run-gcode | ok | -",
+        "control page DOM status",
+      );
+      assertEqual(
+        controlDoc.getElementById("control-page-view").querySelectorAll("section").length,
+        3,
+        "control page DOM section count",
+      );
+      assertEqual(
+        controlDoc.getElementById("control-page-view").querySelector(
+          'section[data-control-view-section-id="run"] dd[data-control-view-row="Canonical events"]',
+        ).textContent,
+        "2",
+        "control page DOM canonical event row",
+      );
+
+      status.textContent = "browser_ini_control_page_smoke=ok";
+      console.log("browser_ini_control_page_smoke=ok");
+    } catch (error) {
+      status.textContent = `browser_ini_control_page_smoke=failed: ${error.message}`;
+      console.error(error);
+      throw error;
+    }
+  </script>
+</body>
+</html>
--- a/wasm-port/tests/browser/verify_ini_panel_browser.sh
+++ b/wasm-port/tests/browser/verify_ini_panel_browser.sh
@@ -61,7 +61,9 @@ fi

 PORT="$(cat "$PORT_FILE")"
 URL="http://127.0.0.1:$PORT/tests/browser/ini_panel_smoke.html"
+CONTROL_URL="http://127.0.0.1:$PORT/tests/browser/ini_panel_control_page_smoke.html"
 OUT="$TMP_DIR/chromium.out"
+CONTROL_OUT="$TMP_DIR/chromium-control.out"

 "$CHROMIUM" \
  --headless=new \
@@ -79,3 +81,20 @@ if ! grep -Fq "browser_ini_opfs_smoke=ok" "$OUT"; then
 fi

 echo "browser_ini_opfs_smoke=ok"
+
+"$CHROMIUM" \
+  --headless=new \
+  --disable-gpu \
+  --no-sandbox \
+  --user-data-dir="$CHROME_PROFILE" \
+  --virtual-time-budget=10000 \
+  --dump-dom \
+  "$CONTROL_URL" >"$CONTROL_OUT" 2>&1
+
+if ! grep -Fq "browser_ini_control_page_smoke=ok" "$CONTROL_OUT"; then
+  echo "browser INI control page smoke failed" >&2
+  sed -n '1,220p' "$CONTROL_OUT" >&2
+  exit 1
+fi
+
+echo "browser_ini_control_page_smoke=ok"