支持真实G代码程序执行

结论:AXIS 风格浏览器仿真页面新增 Open Program、runProgramText 和 loadProgramFile,支持用户提供的 G-code 文本/文件通过 LinuxCNC WASM 执行并参与回放。
This commit is contained in:
2026-06-16 22:14:34 +08:00
parent 163a68ff42
commit 69ccf931b1
8 changed files with 204 additions and 5 deletions

View File

@@ -501,6 +501,14 @@
.axis-statusbar { grid-template-columns: 1fr; }
dl { grid-template-columns: 1fr; }
}
.hidden-file-input {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
</style>
</head>
<body data-simulation-ready="false">
@@ -510,6 +518,7 @@
<h1>axis.ngc - AXIS 2.9.8 on LinuxCNC-BROWSER-SIM</h1>
<div class="window-controls" aria-hidden="true"><span></span><span></span><span></span><span>×</span></div>
</header>
<input class="hidden-file-input" type="file" accept=".ngc,.nc,.tap,.gcode,.txt" data-open-program-file>
<nav class="axis-menubar" data-axis-shell="menubar" aria-label="AXIS menu">
<span>File</span>
<span>Machine</span>
@@ -518,7 +527,7 @@
</nav>
<div class="axis-toolbar" data-axis-shell="toolbar" aria-label="AXIS toolbar">
<button type="button" class="toolbar-button" aria-label="Emergency stop"></button>
<button type="button" class="toolbar-button" aria-label="Open program"></button>
<button type="button" class="toolbar-button" aria-label="Open program" data-open-program>Open</button>
<button type="button" class="toolbar-button" aria-label="Reload program"></button>
<div class="program-controls">
<select data-program-selector aria-label="Simulation test program"></select>
@@ -643,7 +652,7 @@
</div>
<section class="axis-gcode-pane" data-axis-shell="gcode-pane" aria-label="G-code program">
<div class="axis-gcode-head">
<span>Program: <span data-selected-program>Executed through the LinuxCNC-backed WASM interpreter.</span></span>
<span>Program: <span data-selected-program>Executed through the LinuxCNC-backed WASM interpreter.</span> | Source: <span data-program-source>loading</span></span>
<span>Active line <span data-active-line>-</span></span>
</div>
<div class="program-lines" data-program-lines></div>
@@ -678,7 +687,7 @@
</section>
<footer class="axis-statusbar" data-axis-shell="statusbar">
<span>ESTOP</span>
<span>No tool</span>
<span>No tool | <span data-program-source>loading</span></span>
<span>Position: Relative Actual</span>
</footer>
</main>
@@ -692,6 +701,8 @@
const runButton = document.querySelector("[data-run-program]");
const programSelector = document.querySelector("[data-program-selector]");
const openProgramButton = document.querySelector("[data-open-program]");
const openProgramFile = document.querySelector("[data-open-program-file]");
const resetButton = document.querySelector("[data-playback-reset]");
const prevButton = document.querySelector("[data-playback-prev]");
const playButton = document.querySelector("[data-playback-play]");
@@ -807,6 +818,48 @@
}
}
async function runProgramText(programText, metadata = {}) {
stopPlayback();
document.body.dataset.simulationReady = "false";
setAllText("[data-simulation-status]", "running");
if (runButton) {
runButton.disabled = true;
}
try {
const state = await runRealBrowserSimulation({ documentRef: document, programText });
const label = metadata.label ?? metadata.filename ?? "Custom G-code program";
const sourceLabel = metadata.filename ? `Loaded file: ${metadata.filename}` : (metadata.sourceLabel ?? "Custom G-code text");
state.program = {
id: "custom",
label,
category: "Custom",
source: metadata.source ?? "custom",
sourceLabel,
filename: metadata.filename ?? null,
};
window.linuxCncRealSimulationState = state;
document.body.dataset.simulationProgramId = "custom";
document.body.dataset.simulationProgramSource = state.program.source;
setAllText("[data-selected-program]", state.program.label);
setAllText("[data-program-source]", state.program.sourceLabel);
renderPlayback(0);
return state;
} finally {
if (runButton) {
runButton.disabled = false;
}
}
}
async function loadProgramFile(file) {
const text = await file.text();
return runProgramText(text, {
filename: file.name,
label: file.name,
source: "file",
});
}
try {
const state = await runSelectedProgram(DEFAULT_SIMULATION_PROGRAM_ID);
window.linuxCncRealSimulationState = state;
@@ -819,6 +872,8 @@
play: startPlayback,
pause: stopPlayback,
finishPlayback: () => renderPlayback(currentState()?.motion.length - 1 ?? 0),
runProgramText,
loadProgramFile,
runProgramById: async (programId) => {
const nextState = await runSelectedProgram(programId);
window.linuxCncRealSimulationState = nextState;
@@ -832,6 +887,18 @@
document.querySelector("[data-canonical-output]").textContent = error?.stack ?? error?.message ?? String(error);
});
});
openProgramButton?.addEventListener("click", () => openProgramFile?.click());
openProgramFile?.addEventListener("change", () => {
const file = openProgramFile.files?.[0];
if (!file) {
return;
}
window.linuxCncRealSimulationApi.loadProgramFile(file).catch((error) => {
document.body.dataset.simulationReady = "false";
setAllText("[data-simulation-status]", "failed");
document.querySelector("[data-canonical-output]").textContent = error?.stack ?? error?.message ?? String(error);
});
});
resetButton?.addEventListener("click", () => renderPlayback(0));
prevButton?.addEventListener("click", () => stepPlayback(-1));
playButton?.addEventListener("click", togglePlayback);

View File

@@ -306,9 +306,11 @@ export function renderSimulationPlaybackFrame(documentRef, state, index = state.
export function renderSimulationState(documentRef, state) {
documentRef.body.dataset.simulationReady = state.summary.ready ? "true" : "false";
documentRef.body.dataset.simulationProgramId = state.program?.id ?? "custom";
documentRef.body.dataset.simulationProgramSource = state.program?.source ?? "custom";
setText(documentRef, "[data-simulation-status]", state.summary.ready ? "ready" : "blocked");
setText(documentRef, "[data-runtime-status]", state.summary.rows[0].value);
setText(documentRef, "[data-selected-program]", state.program?.label ?? "Custom program");
setText(documentRef, "[data-program-source]", state.program?.sourceLabel ?? "Custom G-code text");
setText(documentRef, "[data-canonical-output]", state.resultText);
renderProgramSelector(documentRef, state.program?.id ?? "custom");
renderRows(documentRef, state.summary.rows);
@@ -330,7 +332,15 @@ export async function runRealBrowserSimulation({
const state = {
apiName: "real-browser-simulation-state",
stateVersion: 1,
program: program ? { ...program, text: undefined } : null,
program: program
? { ...program, source: "builtin", sourceLabel: "Built-in test program", text: undefined }
: {
id: "custom",
label: "Custom G-code program",
category: "Custom",
source: "custom",
sourceLabel: "Custom G-code text",
},
programText: resolvedProgramText,
resultText,
motion,