wangdequan
9e149107dc
结论：真实浏览器仿真页面新增 G-code 执行过程和刀具运动回放，支持 reset、step、play、finish，逐帧高亮 G-code 与 motion row，并渲染已执行刀路和移动 toolhead。
559 lines
16 KiB
HTML
559 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>LinuxCNC Browser Simulation</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: light;
|
|
--page: #eef2f5;
|
|
--surface: #ffffff;
|
|
--line: #c8d3dc;
|
|
--text: #1a252f;
|
|
--muted: #596875;
|
|
--blue: #1263a3;
|
|
--green: #188160;
|
|
--steel: #6f7f8d;
|
|
--warn: #a9561b;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
font-family: "Segoe UI", "Noto Sans", sans-serif;
|
|
color: var(--text);
|
|
background: var(--page);
|
|
}
|
|
main {
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
min-height: 100vh;
|
|
}
|
|
header {
|
|
border-bottom: 1px solid var(--line);
|
|
background: var(--surface);
|
|
padding: 14px 20px;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(240px, auto) auto;
|
|
gap: 16px;
|
|
align-items: center;
|
|
}
|
|
h1 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
font-weight: 650;
|
|
}
|
|
.status-strip {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: end;
|
|
}
|
|
.badge {
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
padding: 5px 8px;
|
|
background: #f8fafb;
|
|
color: var(--muted);
|
|
font: 12px/1.2 "Segoe UI", sans-serif;
|
|
}
|
|
.badge strong {
|
|
color: var(--green);
|
|
font-weight: 700;
|
|
}
|
|
.program-controls {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
justify-content: end;
|
|
min-width: 0;
|
|
}
|
|
select, button {
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
background: #fbfcfd;
|
|
color: var(--text);
|
|
font: 13px/1.2 "Segoe UI", sans-serif;
|
|
min-height: 32px;
|
|
}
|
|
select {
|
|
min-width: 220px;
|
|
max-width: 320px;
|
|
padding: 5px 8px;
|
|
}
|
|
button {
|
|
padding: 6px 12px;
|
|
font-weight: 650;
|
|
cursor: pointer;
|
|
}
|
|
button:hover {
|
|
border-color: var(--blue);
|
|
}
|
|
button:disabled {
|
|
cursor: wait;
|
|
opacity: 0.6;
|
|
}
|
|
.playback-controls {
|
|
border-bottom: 1px solid var(--line);
|
|
background: #fbfcfd;
|
|
padding: 10px 20px;
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.playback-controls .spacer {
|
|
flex: 1 1 auto;
|
|
}
|
|
.playback-readout {
|
|
color: var(--muted);
|
|
font: 12px/1.3 "SFMono-Regular", "Consolas", monospace;
|
|
white-space: nowrap;
|
|
}
|
|
.workspace {
|
|
display: grid;
|
|
grid-template-columns: minmax(280px, 0.75fr) minmax(420px, 1.35fr) minmax(300px, 0.9fr);
|
|
min-height: 0;
|
|
}
|
|
section {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
border-right: 1px solid var(--line);
|
|
background: var(--surface);
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
}
|
|
section:last-child { border-right: 0; }
|
|
.section-head {
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 12px 14px;
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
h2 {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
font-weight: 650;
|
|
}
|
|
.hint {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
.program-lines {
|
|
overflow: auto;
|
|
padding: 10px 0;
|
|
background: #fbfcfd;
|
|
font: 13px/1.45 "SFMono-Regular", "Consolas", monospace;
|
|
}
|
|
.program-lines div {
|
|
display: grid;
|
|
grid-template-columns: 48px minmax(0, 1fr);
|
|
gap: 10px;
|
|
padding: 4px 12px;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
.program-lines div[data-active="true"] {
|
|
background: #e9f4ef;
|
|
border-left-color: var(--green);
|
|
}
|
|
.program-lines span {
|
|
color: var(--steel);
|
|
text-align: right;
|
|
user-select: none;
|
|
}
|
|
.program-lines code {
|
|
color: var(--text);
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.preview {
|
|
background: #f8fafb;
|
|
display: grid;
|
|
grid-template-rows: minmax(0, 1fr) auto;
|
|
}
|
|
.toolpath-wrap {
|
|
min-height: 0;
|
|
padding: 18px;
|
|
display: grid;
|
|
}
|
|
svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 320px;
|
|
border: 1px solid var(--line);
|
|
background: #ffffff;
|
|
}
|
|
.grid-line {
|
|
stroke: #edf1f4;
|
|
stroke-width: 0.01;
|
|
}
|
|
.toolpath {
|
|
fill: none;
|
|
stroke: #b7c6d2;
|
|
stroke-width: 0.028;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
.toolpath-executed {
|
|
fill: none;
|
|
stroke: var(--blue);
|
|
stroke-width: 0.045;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
.toolhead {
|
|
fill: var(--warn);
|
|
stroke: #ffffff;
|
|
stroke-width: 0.025;
|
|
}
|
|
.readout {
|
|
border-top: 1px solid var(--line);
|
|
padding: 12px 14px;
|
|
display: grid;
|
|
gap: 10px;
|
|
background: var(--surface);
|
|
}
|
|
.axis-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 8px;
|
|
}
|
|
.axis-grid div {
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
padding: 8px;
|
|
display: grid;
|
|
gap: 4px;
|
|
background: #fbfcfd;
|
|
}
|
|
.axis-grid span:first-child {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
.axis-grid span:last-child {
|
|
font: 14px/1.2 "SFMono-Regular", "Consolas", monospace;
|
|
}
|
|
dl {
|
|
margin: 0;
|
|
display: grid;
|
|
grid-template-columns: 128px minmax(0, 1fr);
|
|
gap: 7px 12px;
|
|
font-size: 12px;
|
|
}
|
|
dt { color: var(--muted); }
|
|
dd {
|
|
margin: 0;
|
|
overflow-wrap: anywhere;
|
|
font-family: "SFMono-Regular", "Consolas", monospace;
|
|
}
|
|
.motion-table-wrap {
|
|
overflow: auto;
|
|
min-height: 0;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font: 12px/1.4 "Segoe UI", sans-serif;
|
|
}
|
|
th, td {
|
|
border-bottom: 1px solid #edf1f4;
|
|
padding: 7px 8px;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
th {
|
|
position: sticky;
|
|
top: 0;
|
|
background: #f8fafb;
|
|
z-index: 1;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
}
|
|
td:nth-child(3), td:nth-child(4) {
|
|
font-family: "SFMono-Regular", "Consolas", monospace;
|
|
}
|
|
tr[data-executed="true"] td {
|
|
background: #f1f7fb;
|
|
}
|
|
tr[data-active="true"] td {
|
|
background: #e9f4ef;
|
|
box-shadow: inset 3px 0 0 var(--green);
|
|
}
|
|
pre {
|
|
margin: 0;
|
|
overflow: auto;
|
|
padding: 12px;
|
|
background: #111820;
|
|
color: #dbe7ef;
|
|
font: 11px/1.45 "SFMono-Regular", "Consolas", monospace;
|
|
max-height: 170px;
|
|
}
|
|
@media (max-width: 1040px) {
|
|
.workspace { grid-template-columns: 1fr; }
|
|
section { border-right: 0; border-bottom: 1px solid var(--line); }
|
|
svg { min-height: 280px; }
|
|
}
|
|
@media (max-width: 560px) {
|
|
header { grid-template-columns: 1fr; }
|
|
.program-controls { justify-content: stretch; }
|
|
.program-controls select { min-width: 0; width: 100%; }
|
|
.playback-controls button { flex: 1 1 calc(50% - 8px); }
|
|
.playback-controls .spacer { display: none; }
|
|
.status-strip { justify-content: start; }
|
|
.axis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
dl { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body data-simulation-ready="false">
|
|
<main>
|
|
<header>
|
|
<h1>LinuxCNC Browser Simulation</h1>
|
|
<div class="program-controls">
|
|
<select data-program-selector aria-label="Simulation test program"></select>
|
|
<button type="button" data-run-program>Run</button>
|
|
</div>
|
|
<div class="status-strip">
|
|
<span class="badge">Simulation <strong data-simulation-status>loading</strong></span>
|
|
<span class="badge" data-runtime-status>LinuxCNC interpreter WASM</span>
|
|
</div>
|
|
</header>
|
|
<div class="playback-controls" aria-label="Simulation playback controls">
|
|
<button type="button" data-playback-reset>Reset</button>
|
|
<button type="button" data-playback-prev>Step Back</button>
|
|
<button type="button" data-playback-play>Play</button>
|
|
<button type="button" data-playback-next>Step Forward</button>
|
|
<button type="button" data-playback-finish>Finish</button>
|
|
<div class="spacer"></div>
|
|
<label class="playback-readout">
|
|
Speed
|
|
<select data-playback-speed aria-label="Playback speed">
|
|
<option value="900">Slow</option>
|
|
<option value="500" selected>Normal</option>
|
|
<option value="220">Fast</option>
|
|
</select>
|
|
</label>
|
|
<span class="playback-readout">Step <span data-playback-step>0</span>/<span data-playback-total>0</span></span>
|
|
<span class="playback-readout" data-playback-progress>0%</span>
|
|
</div>
|
|
<div class="workspace">
|
|
<section aria-label="G-code program">
|
|
<div class="section-head">
|
|
<h2>Program</h2>
|
|
<p class="hint" data-selected-program>Executed through the LinuxCNC-backed WASM interpreter.</p>
|
|
</div>
|
|
<div class="program-lines" data-program-lines></div>
|
|
</section>
|
|
<section aria-label="Toolpath preview">
|
|
<div class="section-head">
|
|
<h2>Toolpath Preview</h2>
|
|
<p class="hint">Rendered from LinuxCNC canonical motion events.</p>
|
|
</div>
|
|
<div class="preview">
|
|
<div class="toolpath-wrap">
|
|
<svg data-toolpath-svg role="img" aria-label="LinuxCNC canonical toolpath preview" viewBox="-1 -1 2 2">
|
|
<line class="grid-line" x1="-10" y1="0" x2="10" y2="0"></line>
|
|
<line class="grid-line" x1="0" y1="-10" x2="0" y2="10"></line>
|
|
<polyline class="toolpath" data-toolpath-polyline points=""></polyline>
|
|
<polyline class="toolpath-executed" data-toolpath-executed-polyline points=""></polyline>
|
|
<circle class="toolhead" data-toolpath-head cx="0" cy="0" r="0.055"></circle>
|
|
</svg>
|
|
</div>
|
|
<div class="readout">
|
|
<div class="axis-grid">
|
|
<div><span>X</span><span data-axis="x">0.000</span></div>
|
|
<div><span>Y</span><span data-axis="y">0.000</span></div>
|
|
<div><span>Z</span><span data-axis="z">0.000</span></div>
|
|
<div><span>A</span><span data-axis="a">0.000</span></div>
|
|
<div><span>B</span><span data-axis="b">0.000</span></div>
|
|
<div><span>C</span><span data-axis="c">0.000</span></div>
|
|
</div>
|
|
<dl data-simulation-summary-rows></dl>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section aria-label="Machine state">
|
|
<div class="section-head">
|
|
<h2>Machine State</h2>
|
|
<p class="hint">Active line, statement, motion rows, and canonical output.</p>
|
|
</div>
|
|
<div class="motion-table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Motion</th>
|
|
<th>Line</th>
|
|
<th>Position</th>
|
|
<th>Statement</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody data-motion-rows></tbody>
|
|
</table>
|
|
<div class="readout">
|
|
<dl>
|
|
<dt>Active line</dt>
|
|
<dd data-active-line>-</dd>
|
|
<dt>Statement</dt>
|
|
<dd data-active-statement>-</dd>
|
|
</dl>
|
|
</div>
|
|
<pre data-canonical-output></pre>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<script type="module">
|
|
import {
|
|
DEFAULT_SIMULATION_PROGRAM_ID,
|
|
getSimulationTestPrograms,
|
|
renderSimulationPlaybackFrame,
|
|
runRealBrowserSimulation,
|
|
} from "./simulation-app.js";
|
|
|
|
const runButton = document.querySelector("[data-run-program]");
|
|
const programSelector = document.querySelector("[data-program-selector]");
|
|
const resetButton = document.querySelector("[data-playback-reset]");
|
|
const prevButton = document.querySelector("[data-playback-prev]");
|
|
const playButton = document.querySelector("[data-playback-play]");
|
|
const nextButton = document.querySelector("[data-playback-next]");
|
|
const finishButton = document.querySelector("[data-playback-finish]");
|
|
const speedSelector = document.querySelector("[data-playback-speed]");
|
|
let playbackTimer = null;
|
|
let playbackIndex = 0;
|
|
|
|
function currentState() {
|
|
return window.linuxCncRealSimulationState;
|
|
}
|
|
|
|
function stopPlayback() {
|
|
if (playbackTimer) {
|
|
clearInterval(playbackTimer);
|
|
playbackTimer = null;
|
|
}
|
|
if (playButton) {
|
|
playButton.textContent = "Play";
|
|
}
|
|
}
|
|
|
|
function renderPlayback(index) {
|
|
const state = currentState();
|
|
if (!state) {
|
|
return null;
|
|
}
|
|
const frame = renderSimulationPlaybackFrame(document, state, index);
|
|
playbackIndex = frame.index;
|
|
if (frame.index >= frame.total - 1) {
|
|
stopPlayback();
|
|
}
|
|
return frame;
|
|
}
|
|
|
|
function stepPlayback(delta) {
|
|
const state = currentState();
|
|
if (!state) {
|
|
return null;
|
|
}
|
|
return renderPlayback(playbackIndex + delta);
|
|
}
|
|
|
|
function startPlayback() {
|
|
const state = currentState();
|
|
if (!state || state.motion.length === 0) {
|
|
return;
|
|
}
|
|
if (playbackIndex >= state.motion.length - 1) {
|
|
playbackIndex = -1;
|
|
}
|
|
stopPlayback();
|
|
if (playButton) {
|
|
playButton.textContent = "Pause";
|
|
}
|
|
const delay = Number(speedSelector?.value ?? 500);
|
|
playbackTimer = setInterval(() => {
|
|
const frame = stepPlayback(1);
|
|
if (!frame || frame.index >= frame.total - 1) {
|
|
stopPlayback();
|
|
}
|
|
}, delay);
|
|
stepPlayback(1);
|
|
}
|
|
|
|
function togglePlayback() {
|
|
if (playbackTimer) {
|
|
stopPlayback();
|
|
} else {
|
|
startPlayback();
|
|
}
|
|
}
|
|
|
|
async function runSelectedProgram(programId = programSelector?.value ?? DEFAULT_SIMULATION_PROGRAM_ID) {
|
|
stopPlayback();
|
|
document.body.dataset.simulationReady = "false";
|
|
document.querySelector("[data-simulation-status]").textContent = "running";
|
|
if (runButton) {
|
|
runButton.disabled = true;
|
|
}
|
|
try {
|
|
const state = await runRealBrowserSimulation({ documentRef: document, programId });
|
|
window.linuxCncRealSimulationState = state;
|
|
renderPlayback(0);
|
|
return state;
|
|
} finally {
|
|
if (runButton) {
|
|
runButton.disabled = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
try {
|
|
const state = await runSelectedProgram(DEFAULT_SIMULATION_PROGRAM_ID);
|
|
window.linuxCncRealSimulationState = state;
|
|
window.linuxCncRealSimulationApi = {
|
|
getState: () => window.linuxCncRealSimulationState,
|
|
getPrograms: getSimulationTestPrograms,
|
|
getPlaybackFrame: () => renderPlayback(playbackIndex),
|
|
resetPlayback: () => renderPlayback(0),
|
|
stepPlayback: (delta = 1) => stepPlayback(delta),
|
|
play: startPlayback,
|
|
pause: stopPlayback,
|
|
finishPlayback: () => renderPlayback(currentState()?.motion.length - 1 ?? 0),
|
|
runProgramById: async (programId) => {
|
|
const nextState = await runSelectedProgram(programId);
|
|
window.linuxCncRealSimulationState = nextState;
|
|
return nextState;
|
|
},
|
|
};
|
|
runButton?.addEventListener("click", () => {
|
|
window.linuxCncRealSimulationApi.runProgramById(programSelector.value).catch((error) => {
|
|
document.body.dataset.simulationReady = "false";
|
|
document.querySelector("[data-simulation-status]").textContent = "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);
|
|
nextButton?.addEventListener("click", () => stepPlayback(1));
|
|
finishButton?.addEventListener("click", () => renderPlayback(currentState()?.motion.length - 1 ?? 0));
|
|
speedSelector?.addEventListener("change", () => {
|
|
if (playbackTimer) {
|
|
startPlayback();
|
|
}
|
|
});
|
|
} catch (error) {
|
|
stopPlayback();
|
|
document.body.dataset.simulationReady = "false";
|
|
document.querySelector("[data-simulation-status]").textContent = "failed";
|
|
document.querySelector("[data-canonical-output]").textContent = error?.stack ?? error?.message ?? String(error);
|
|
throw error;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|