接上一轮，按接续文件继续执行
结论：Three.js 程序预览和刀具执行显示已收口，公网 HTTP/IP 下 Save/Restore Session 已支持 memory-fallback 降级并通过 node/browser gate。
This commit is contained in:
@@ -82,7 +82,13 @@ async function copyKinematicsRuntimeAssets() {
|
||||
join(sdkSrcDir, "linuxcnc-kinematics.js"),
|
||||
join(sdkDistDir, "linuxcnc-kinematics.js"),
|
||||
);
|
||||
for (const entry of ["linuxcnc-interp.js", "linuxcnc-hal.js", "linuxcnc-tp.js", "linuxcnc-task-hal.js"]) {
|
||||
for (const entry of [
|
||||
"linuxcnc-interp.js",
|
||||
"linuxcnc-hal.js",
|
||||
"linuxcnc-tp.js",
|
||||
"linuxcnc-task-hal.js",
|
||||
"sim-config-staging.js",
|
||||
]) {
|
||||
await cp(join(sdkSrcDir, entry), join(sdkDistDir, entry));
|
||||
}
|
||||
|
||||
|
||||
@@ -88,20 +88,22 @@ export function validateFiveAxisSessionSnapshot(snapshot, sessionId) {
|
||||
export async function saveFiveAxisSessionSnapshot(sessionId, payload, options = {}) {
|
||||
const snapshot = createFiveAxisSessionSnapshot(sessionId, payload, options);
|
||||
const path = sessionSnapshotPath(sessionId, options.filename);
|
||||
await saveTextFile(path, `${JSON.stringify(snapshot, null, 2)}\n`, options.storage);
|
||||
return { snapshot, path };
|
||||
const storage = resolveSessionStorage(options);
|
||||
await saveTextFile(path, `${JSON.stringify(snapshot, null, 2)}\n`, storage.storage);
|
||||
return { snapshot, path, storageMode: storage.mode };
|
||||
}
|
||||
|
||||
export async function loadFiveAxisSessionSnapshot(sessionId, options = {}) {
|
||||
const path = sessionSnapshotPath(sessionId, options.filename);
|
||||
const text = await loadTextFile(path, options.storage);
|
||||
const storage = resolveSessionStorage(options);
|
||||
const text = await loadTextFile(path, storage.storage);
|
||||
let snapshot;
|
||||
try {
|
||||
snapshot = JSON.parse(text);
|
||||
} catch (error) {
|
||||
throw new Error(`Invalid five-axis session snapshot JSON: ${error.message}`);
|
||||
}
|
||||
return { snapshot: validateFiveAxisSessionSnapshot(snapshot, sessionId), path };
|
||||
return { snapshot: validateFiveAxisSessionSnapshot(snapshot, sessionId), path, storageMode: storage.mode };
|
||||
}
|
||||
|
||||
export function restoreFiveAxisSessionState(snapshot) {
|
||||
@@ -138,6 +140,7 @@ export function restoreFiveAxisSessionState(snapshot) {
|
||||
export function createMemorySessionStorage(seed = {}) {
|
||||
const files = new Map(Object.entries(seed));
|
||||
return {
|
||||
apiName: "web-rtcp-5axis-memory-session-storage",
|
||||
files,
|
||||
async getDirectory() {
|
||||
return createDirectoryHandle(files, []);
|
||||
@@ -145,6 +148,35 @@ export function createMemorySessionStorage(seed = {}) {
|
||||
};
|
||||
}
|
||||
|
||||
let browserMemorySessionStorage = null;
|
||||
|
||||
function resolveSessionStorage(options = {}) {
|
||||
if (options.storage) {
|
||||
return {
|
||||
storage: options.storage,
|
||||
mode: options.storageMode || storageModeFor(options.storage),
|
||||
};
|
||||
}
|
||||
const browserStorage = globalThis.navigator?.storage;
|
||||
if (browserStorage?.getDirectory) {
|
||||
return {
|
||||
storage: browserStorage,
|
||||
mode: "opfs",
|
||||
};
|
||||
}
|
||||
browserMemorySessionStorage ??= createMemorySessionStorage();
|
||||
return {
|
||||
storage: browserMemorySessionStorage,
|
||||
mode: "memory-fallback",
|
||||
};
|
||||
}
|
||||
|
||||
function storageModeFor(storage) {
|
||||
return storage?.apiName === "web-rtcp-5axis-memory-session-storage"
|
||||
? "memory"
|
||||
: "custom";
|
||||
}
|
||||
|
||||
function validateFiveAxisSessionPayload(payload) {
|
||||
assertPlainObject(payload, "five-axis session payload");
|
||||
if (payload.apiName !== "web-rtcp-5axis-session-payload") {
|
||||
|
||||
@@ -59,6 +59,7 @@ const initialState = {
|
||||
filename: DEFAULT_SESSION_FILENAME,
|
||||
status: "not-saved",
|
||||
path: null,
|
||||
storageMode: null,
|
||||
savedAt: null,
|
||||
restoredAt: null,
|
||||
lastError: null,
|
||||
@@ -189,6 +190,7 @@ const initialState = {
|
||||
pathPoints: 64,
|
||||
selectedView: "iso",
|
||||
fullscreen: false,
|
||||
cameraRevision: 0,
|
||||
},
|
||||
toolPreview: {
|
||||
toolNumber: 1,
|
||||
@@ -629,10 +631,11 @@ export function createSimulationStore(seed = {}) {
|
||||
...state.sessionPersistence,
|
||||
status: "saved",
|
||||
path: action.path,
|
||||
storageMode: action.storageMode || null,
|
||||
savedAt: action.savedAt,
|
||||
lastError: null,
|
||||
},
|
||||
operatorMessage: `5-axis session saved ${action.path}`,
|
||||
operatorMessage: `5-axis session saved ${action.path} (${action.storageMode || "unknown"})`,
|
||||
});
|
||||
break;
|
||||
case "SESSION_RESTORE_STARTED":
|
||||
@@ -664,10 +667,11 @@ export function createSimulationStore(seed = {}) {
|
||||
...state.sessionPersistence,
|
||||
status: "restored",
|
||||
path: action.path,
|
||||
storageMode: action.storageMode || null,
|
||||
restoredAt: action.restoredAt,
|
||||
lastError: null,
|
||||
},
|
||||
operatorMessage: `5-axis session restored ${action.path}`,
|
||||
operatorMessage: `5-axis session restored ${action.path} (${action.storageMode || "unknown"})`,
|
||||
});
|
||||
}
|
||||
break;
|
||||
@@ -1255,7 +1259,11 @@ export function createSimulationStore(seed = {}) {
|
||||
break;
|
||||
case "RESET_VIEW":
|
||||
setState({
|
||||
preview: { ...state.preview, selectedView: "iso" },
|
||||
preview: {
|
||||
...state.preview,
|
||||
selectedView: "iso",
|
||||
cameraRevision: (state.preview.cameraRevision ?? 0) + 1,
|
||||
},
|
||||
operatorMessage: "preview fit to program",
|
||||
});
|
||||
break;
|
||||
@@ -1267,7 +1275,11 @@ export function createSimulationStore(seed = {}) {
|
||||
break;
|
||||
case "SET_VIEW":
|
||||
setState({
|
||||
preview: { ...state.preview, selectedView: action.view },
|
||||
preview: {
|
||||
...state.preview,
|
||||
selectedView: action.view,
|
||||
cameraRevision: (state.preview.cameraRevision ?? 0) + 1,
|
||||
},
|
||||
operatorMessage: `preview view ${action.view}`,
|
||||
});
|
||||
break;
|
||||
@@ -1395,17 +1407,19 @@ export function createSimulationStore(seed = {}) {
|
||||
const sessionId = options.sessionId || state.sessionPersistence.sessionId;
|
||||
const filename = options.filename || state.sessionPersistence.filename;
|
||||
const payload = createFiveAxisSessionPayload(state);
|
||||
const { snapshot, path } = await saveFiveAxisSessionSnapshot(sessionId, payload, {
|
||||
const { snapshot, path, storageMode } = await saveFiveAxisSessionSnapshot(sessionId, payload, {
|
||||
filename,
|
||||
storage: options.storage,
|
||||
storageMode: options.storageMode,
|
||||
metadata: options.metadata,
|
||||
});
|
||||
dispatch({
|
||||
type: "SESSION_SAVE_COMPLETE",
|
||||
path,
|
||||
storageMode,
|
||||
savedAt: snapshot.createdAt,
|
||||
});
|
||||
return { snapshot, path };
|
||||
return { snapshot, path, storageMode };
|
||||
} catch (error) {
|
||||
dispatch({ type: "SESSION_PERSISTENCE_FAILED", error: error.message });
|
||||
throw error;
|
||||
@@ -1417,18 +1431,20 @@ export function createSimulationStore(seed = {}) {
|
||||
try {
|
||||
const sessionId = options.sessionId || state.sessionPersistence.sessionId;
|
||||
const filename = options.filename || state.sessionPersistence.filename;
|
||||
const { snapshot, path } = await loadFiveAxisSessionSnapshot(sessionId, {
|
||||
const { snapshot, path, storageMode } = await loadFiveAxisSessionSnapshot(sessionId, {
|
||||
filename,
|
||||
storage: options.storage,
|
||||
storageMode: options.storageMode,
|
||||
});
|
||||
dispatch({
|
||||
type: "SESSION_RESTORE_COMPLETE",
|
||||
restoredState: restoreFiveAxisSessionState(snapshot),
|
||||
path,
|
||||
storageMode,
|
||||
restoredAt: new Date().toISOString(),
|
||||
});
|
||||
await refreshAsyncKinematicsFrame({ operatorMessage: `5-axis session restored ${path}` });
|
||||
return { snapshot, path };
|
||||
return { snapshot, path, storageMode };
|
||||
} catch (error) {
|
||||
dispatch({ type: "SESSION_PERSISTENCE_FAILED", error: error.message });
|
||||
throw error;
|
||||
|
||||
@@ -165,6 +165,12 @@ button:active {
|
||||
height: calc(100% - 64px);
|
||||
margin-top: 32px;
|
||||
display: block;
|
||||
touch-action: none;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.machine-preview:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.tool-preview-card {
|
||||
|
||||
@@ -324,7 +324,7 @@ function renderInfoTabs(element, state) {
|
||||
<dt>Canonical:</dt><dd data-program-execution-summary="${state.programExecution?.summary?.motionEventCount ?? 0}">${state.programExecution?.summary?.motionEventCount ?? 0} motion / ${state.programExecution?.summary?.canonicalEventCount ?? 0} events</dd>
|
||||
<dt>Switchkins:</dt><dd data-program-switchkins-summary="${state.programExecution?.summary?.switchkinsEventCount ?? 0}">${formatSwitchkinsSummary(state.programExecution)}</dd>
|
||||
<dt>Machine run:</dt><dd data-machine-file-execution="status">${formatMachineFileExecution(state.machineFileExecution)}</dd>
|
||||
<dt>Session:</dt><dd data-session-persistence="status">${state.sessionPersistence.status} / ${state.sessionPersistence.path ?? "-"}</dd>
|
||||
<dt>Session:</dt><dd data-session-persistence="status">${state.sessionPersistence.status} / ${state.sessionPersistence.storageMode ?? "-"} / ${state.sessionPersistence.path ?? "-"}</dd>
|
||||
<dt>Tool preview:</dt><dd data-tool-preview="detail">T${state.toolPreview.toolNumber} D${formatNumber(state.toolPreview.diameter, 2)} L${formatNumber(state.toolPreview.length, 3)} ${state.toolPreview.units}</dd>
|
||||
<dt>Program time:</dt><dd data-program-timing="summary">${formatProgramTiming(state)}</dd>
|
||||
<dt>Segment time:</dt><dd data-program-timing="segment">${formatProgramTimingSegment(state)}</dd>
|
||||
|
||||
@@ -1,6 +1,14 @@
|
||||
import * as THREE from "../vendor/three/three.module.js";
|
||||
|
||||
const scenes = new WeakMap();
|
||||
const CAMERA_PRESETS = {
|
||||
iso: { theta: -0.96, phi: 1.02, radius: 7.0, target: new THREE.Vector3(0, 0, 0) },
|
||||
x: { theta: 0, phi: Math.PI / 2, radius: 6.2, target: new THREE.Vector3(0, 0, 0) },
|
||||
y: { theta: -Math.PI / 2, phi: Math.PI / 2, radius: 6.2, target: new THREE.Vector3(0, 0, 0) },
|
||||
z: { theta: 0, phi: 0.001, radius: 6.6, target: new THREE.Vector3(0, 0, 0) },
|
||||
};
|
||||
const MAX_TOOLPATH_POINTS = 1600;
|
||||
const EMPTY_GEOMETRY = new THREE.BufferGeometry().setFromPoints([]);
|
||||
|
||||
export function renderFiveAxisScene(canvas, state) {
|
||||
let preview = scenes.get(canvas);
|
||||
@@ -16,7 +24,7 @@ export function renderFiveAxisScene(canvas, state) {
|
||||
|
||||
try {
|
||||
resizeRenderer(preview);
|
||||
updateMachinePose(preview, state);
|
||||
updateToolpathPreview(preview, state);
|
||||
preview.renderer.render(preview.scene, preview.camera);
|
||||
} catch (error) {
|
||||
const fallback = createFallbackPreview(canvas, error);
|
||||
@@ -25,12 +33,17 @@ export function renderFiveAxisScene(canvas, state) {
|
||||
return;
|
||||
}
|
||||
|
||||
const pointCount = preview.pathLine.geometry.getAttribute("position").count;
|
||||
const pointCount = preview.previewPath.geometry.getAttribute("position").count;
|
||||
const executedPointCount = preview.executedPath.geometry.getAttribute("position").count;
|
||||
exposePreviewDataset(canvas, state, {
|
||||
pointCount,
|
||||
executedPointCount,
|
||||
sceneObjectCount: countSceneObjects(preview.scene),
|
||||
toolhead: preview.toolGroup.position,
|
||||
toolhead: preview.currentToolhead,
|
||||
renderer: "webgl",
|
||||
sceneMode: "program-preview-and-tool-execution",
|
||||
cameraControls: preview.controls.enabled,
|
||||
toolExecutionMarker: preview.toolMarker.visible,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -48,87 +61,45 @@ function createScene(canvas) {
|
||||
antialias: true,
|
||||
preserveDrawingBuffer: true,
|
||||
});
|
||||
renderer.setClearColor(0x07100d, 1);
|
||||
renderer.setClearColor(0x030405, 1);
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
scene.fog = new THREE.Fog(0x07100d, 7, 15);
|
||||
const camera = new THREE.PerspectiveCamera(42, 1, 0.1, 100);
|
||||
camera.position.set(3.4, -5.0, 3.2);
|
||||
camera.lookAt(0, 0, 0);
|
||||
|
||||
const ambient = new THREE.HemisphereLight(0xdffbff, 0x17110d, 0.86);
|
||||
const key = new THREE.DirectionalLight(0xffffff, 1.35);
|
||||
key.position.set(3, -5, 7);
|
||||
const fill = new THREE.DirectionalLight(0x4fd5ff, 0.46);
|
||||
fill.position.set(-4, 3, 3);
|
||||
scene.add(ambient, key, fill);
|
||||
|
||||
const floor = new THREE.Mesh(
|
||||
new THREE.BoxGeometry(6.2, 4.5, 0.08),
|
||||
new THREE.MeshStandardMaterial({ color: 0x151b1f, roughness: 0.78, metalness: 0.12 }),
|
||||
);
|
||||
floor.position.z = -0.98;
|
||||
scene.add(floor);
|
||||
|
||||
const grid = new THREE.GridHelper(6.2, 14, 0x4b555a, 0x252f32);
|
||||
grid.rotation.x = Math.PI / 2;
|
||||
grid.position.z = -0.93;
|
||||
scene.add(grid);
|
||||
|
||||
const axes = new THREE.AxesHelper(1.45);
|
||||
axes.position.set(-2.85, -2.0, -0.86);
|
||||
scene.add(axes);
|
||||
|
||||
const envelope = buildEnvelope();
|
||||
scene.add(envelope);
|
||||
|
||||
const tableGroup = new THREE.Group();
|
||||
const table = new THREE.Mesh(
|
||||
new THREE.BoxGeometry(3.0, 2.15, 0.18),
|
||||
new THREE.MeshStandardMaterial({ color: 0x42484e, roughness: 0.68, metalness: 0.22 }),
|
||||
);
|
||||
const platter = new THREE.Mesh(
|
||||
new THREE.CylinderGeometry(0.84, 0.84, 0.16, 64),
|
||||
new THREE.MeshStandardMaterial({ color: 0x6d7880, roughness: 0.48, metalness: 0.42 }),
|
||||
);
|
||||
platter.rotation.x = Math.PI / 2;
|
||||
platter.position.z = 0.14;
|
||||
tableGroup.add(table, platter);
|
||||
scene.add(tableGroup);
|
||||
|
||||
const pathLine = buildToolpath();
|
||||
scene.add(pathLine);
|
||||
|
||||
const toolGroup = new THREE.Group();
|
||||
const toolBody = new THREE.Mesh(
|
||||
new THREE.CylinderGeometry(0.045, 0.07, 1.05, 28),
|
||||
new THREE.MeshStandardMaterial({ color: 0x29ecf0, emissive: 0x0a4f52, roughness: 0.28 }),
|
||||
);
|
||||
toolBody.rotation.x = Math.PI / 2;
|
||||
toolBody.position.z = 0.52;
|
||||
const tcpPoint = new THREE.Mesh(
|
||||
new THREE.SphereGeometry(0.095, 28, 18),
|
||||
new THREE.MeshStandardMaterial({ color: 0x1ffff4, emissive: 0x0b6f6f, roughness: 0.18 }),
|
||||
const previewPath = createLine(0x808892, 0.56);
|
||||
const executedPath = createLine(0x1ffff4, 1);
|
||||
const rapidPath = createLine(0xffb13b, 0.82);
|
||||
const toolMarker = new THREE.Mesh(
|
||||
new THREE.SphereGeometry(0.065, 18, 12),
|
||||
new THREE.MeshBasicMaterial({ color: 0x1ffff4 }),
|
||||
);
|
||||
const toolAxis = new THREE.Line(
|
||||
new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(), new THREE.Vector3(0, 0, 1)]),
|
||||
new THREE.LineBasicMaterial({ color: 0x21f2f2, linewidth: 2 }),
|
||||
EMPTY_GEOMETRY.clone(),
|
||||
new THREE.LineBasicMaterial({ color: 0x1ffff4, transparent: true, opacity: 0.9 }),
|
||||
);
|
||||
toolGroup.add(toolBody, tcpPoint, toolAxis);
|
||||
scene.add(toolGroup);
|
||||
scene.add(previewPath, rapidPath, executedPath, toolAxis, toolMarker);
|
||||
|
||||
const controls = createToolpathCameraControls(canvas, camera, () => {
|
||||
renderer.render(scene, camera);
|
||||
});
|
||||
const preview = {
|
||||
kind: "webgl",
|
||||
renderer,
|
||||
scene,
|
||||
camera,
|
||||
tableGroup,
|
||||
toolGroup,
|
||||
controls,
|
||||
previewPath,
|
||||
executedPath,
|
||||
rapidPath,
|
||||
toolMarker,
|
||||
toolAxis,
|
||||
pathLine,
|
||||
currentToolhead: new THREE.Vector3(),
|
||||
lastSelectedView: null,
|
||||
lastCameraRevision: null,
|
||||
};
|
||||
resizeRenderer(preview);
|
||||
resetCamera(preview, "iso");
|
||||
return preview;
|
||||
}
|
||||
|
||||
@@ -153,101 +124,65 @@ function renderFallbackPreview(preview, state) {
|
||||
if (!ctx) return;
|
||||
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
ctx.fillStyle = "#07100d";
|
||||
ctx.fillStyle = "#030405";
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
const cx = width * 0.5;
|
||||
const cy = height * 0.53;
|
||||
const scale = Math.min(width / 7.2, height / 4.8);
|
||||
|
||||
drawFallbackGrid(ctx, cx, cy, scale);
|
||||
|
||||
ctx.strokeStyle = "#e43a35";
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.strokeRect(cx - 2.95 * scale, cy - 1.9 * scale, 5.9 * scale, 3.8 * scale);
|
||||
|
||||
ctx.fillStyle = "#42484e";
|
||||
ctx.strokeStyle = "#79838a";
|
||||
const previewPoints = buildProgramPreviewPoints(state);
|
||||
const executedPoints = buildExecutedProgramPoints(state, previewPoints);
|
||||
const pointCount = previewPoints.length;
|
||||
const executedPointCount = executedPoints.length;
|
||||
if (pointCount > 0) {
|
||||
ctx.strokeStyle = "#8d95a0";
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(cx - 1.5 * scale, cy - 0.78 * scale, 3.0 * scale, 1.56 * scale, 4);
|
||||
ctx.fill();
|
||||
drawFallbackPolyline(ctx, previewPoints, cx, cy, scale);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.fillStyle = "#6d7880";
|
||||
ctx.strokeStyle = "#a3b0b8";
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(cx, cy, 0.84 * scale, 0.48 * scale, 0, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
|
||||
ctx.strokeStyle = "#ffffff";
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
for (let index = 0; index < 72; index += 1) {
|
||||
const t = index / 71;
|
||||
const x = cx + (-2.45 + t * 4.9) * scale;
|
||||
const y = cy + Math.sin(t * Math.PI * 13) * 0.36 * scale;
|
||||
if (index === 0) ctx.moveTo(x, y);
|
||||
else ctx.lineTo(x, y);
|
||||
}
|
||||
ctx.stroke();
|
||||
|
||||
const tcp = state.tcpPose;
|
||||
const tool = state.toolAxisVector;
|
||||
const toolX = cx + clamp(tcp.x * 0.035, -2.7, 2.7) * scale;
|
||||
const toolY = cy - clamp(tcp.y * 0.035, -2.0, 2.0) * scale;
|
||||
const axisX = toolX + tool.x * 0.85 * scale;
|
||||
const axisY = toolY - (tool.y || 0.2) * 0.85 * scale;
|
||||
ctx.strokeStyle = "#21f2f2";
|
||||
ctx.fillStyle = "#1ffff4";
|
||||
if (executedPointCount > 0) {
|
||||
ctx.strokeStyle = "#1ffff4";
|
||||
ctx.lineWidth = 3;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(toolX, toolY);
|
||||
ctx.lineTo(axisX, axisY);
|
||||
drawFallbackPolyline(ctx, executedPoints, cx, cy, scale);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
const toolPosition = executionToolPosition(state, previewPoints);
|
||||
if (toolPosition) {
|
||||
const toolX = cx + toolPosition.x * scale;
|
||||
const toolY = cy - toolPosition.y * scale;
|
||||
ctx.fillStyle = "#1ffff4";
|
||||
ctx.beginPath();
|
||||
ctx.arc(toolX, toolY, 0.09 * scale, 0, Math.PI * 2);
|
||||
ctx.arc(toolX, toolY, 0.055 * scale, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
ctx.fillStyle = "#b7c7b8";
|
||||
ctx.font = "12px Courier New, monospace";
|
||||
ctx.fillText("2D RTCP fallback", 12, height - 14);
|
||||
|
||||
exposePreviewDataset(canvas, state, {
|
||||
pointCount: 72,
|
||||
sceneObjectCount: 12,
|
||||
toolhead: {
|
||||
x: clamp(tcp.x * 0.035, -2.7, 2.7),
|
||||
y: clamp(tcp.y * 0.035, -2.0, 2.0),
|
||||
z: clamp(tcp.z * 0.04 + 0.35, -1.1, 1.9),
|
||||
},
|
||||
pointCount,
|
||||
executedPointCount,
|
||||
sceneObjectCount: (pointCount > 0 ? 1 : 0) + (executedPointCount > 0 ? 1 : 0),
|
||||
toolhead: toolPosition || { x: 0, y: 0, z: 0 },
|
||||
renderer: "2d-fallback",
|
||||
sceneMode: "program-preview-and-tool-execution",
|
||||
cameraControls: false,
|
||||
toolExecutionMarker: Boolean(toolPosition),
|
||||
});
|
||||
canvas.dataset.threeFallbackReason = preview.errorMessage;
|
||||
}
|
||||
|
||||
function drawFallbackGrid(ctx, cx, cy, scale) {
|
||||
ctx.strokeStyle = "#273236";
|
||||
ctx.lineWidth = 1;
|
||||
for (let x = -3; x <= 3; x += 0.5) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(cx + x * scale, cy - 2.1 * scale);
|
||||
ctx.lineTo(cx + x * scale, cy + 2.1 * scale);
|
||||
ctx.stroke();
|
||||
}
|
||||
for (let y = -2; y <= 2; y += 0.5) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(cx - 3.1 * scale, cy + y * scale);
|
||||
ctx.lineTo(cx + 3.1 * scale, cy + y * scale);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
function exposePreviewDataset(canvas, state, preview) {
|
||||
canvas.dataset.threeReady = "true";
|
||||
canvas.dataset.threeRevision = THREE.REVISION;
|
||||
canvas.dataset.threePathPoints = String(preview.pointCount);
|
||||
canvas.dataset.threeExecutedPathPoints = String(preview.executedPointCount);
|
||||
canvas.dataset.threeSceneObjects = String(preview.sceneObjectCount);
|
||||
canvas.dataset.threeToolhead = JSON.stringify(toRoundedVector(preview.toolhead));
|
||||
canvas.dataset.threeToolAxis = JSON.stringify(toRoundedVector(state.toolAxisVector));
|
||||
@@ -256,62 +191,346 @@ function exposePreviewDataset(canvas, state, preview) {
|
||||
canvas.dataset.threeSelectedView = state.preview.selectedView;
|
||||
canvas.dataset.threeFrameApi = state.rtcpFrame.apiName;
|
||||
canvas.dataset.threeRenderer = preview.renderer;
|
||||
canvas.dataset.threeSceneMode = preview.sceneMode;
|
||||
canvas.dataset.threeCameraControls = preview.cameraControls ? "orbit-pan-zoom" : "none";
|
||||
canvas.dataset.threeProgramPreviewSource = previewSourceMode(state);
|
||||
canvas.dataset.threeToolExecutionMarker = preview.toolExecutionMarker ? "true" : "false";
|
||||
}
|
||||
|
||||
function buildEnvelope() {
|
||||
const geometry = new THREE.BoxGeometry(5.9, 4.25, 2.7);
|
||||
const edges = new THREE.EdgesGeometry(geometry);
|
||||
const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0xe43a35 }));
|
||||
line.position.z = 0.2;
|
||||
return line;
|
||||
function createLine(color, opacity) {
|
||||
return new THREE.Line(
|
||||
EMPTY_GEOMETRY.clone(),
|
||||
new THREE.LineBasicMaterial({
|
||||
color,
|
||||
transparent: opacity < 1,
|
||||
opacity,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
function buildToolpath() {
|
||||
function updateToolpathPreview(preview, state) {
|
||||
const previewPoints = buildProgramPreviewPoints(state);
|
||||
const executedPoints = buildExecutedProgramPoints(state, previewPoints);
|
||||
const rapidPoints = buildRapidPreviewPoints(state);
|
||||
const toolPosition = executionToolPosition(state, previewPoints);
|
||||
|
||||
updateLineGeometry(preview.previewPath, previewPoints);
|
||||
updateLineGeometry(preview.executedPath, executedPoints);
|
||||
updateLineGeometry(preview.rapidPath, rapidPoints);
|
||||
updateToolExecutionMarker(preview, state, toolPosition);
|
||||
|
||||
const cameraRevision = state.preview.cameraRevision ?? 0;
|
||||
if (
|
||||
preview.lastSelectedView !== state.preview.selectedView ||
|
||||
preview.lastCameraRevision !== cameraRevision
|
||||
) {
|
||||
resetCamera(preview, state.preview.selectedView);
|
||||
preview.lastSelectedView = state.preview.selectedView;
|
||||
preview.lastCameraRevision = cameraRevision;
|
||||
} else {
|
||||
applyCameraControls(preview.controls);
|
||||
}
|
||||
}
|
||||
|
||||
function updateToolExecutionMarker(preview, state, toolPosition) {
|
||||
if (!toolPosition) {
|
||||
preview.currentToolhead.set(0, 0, 0);
|
||||
preview.toolMarker.visible = false;
|
||||
preview.toolAxis.visible = false;
|
||||
updateLineGeometry(preview.toolAxis, []);
|
||||
return;
|
||||
}
|
||||
|
||||
const vector = toToolVector(state.toolAxisVector);
|
||||
preview.currentToolhead.copy(toolPosition);
|
||||
preview.toolMarker.visible = true;
|
||||
preview.toolMarker.position.copy(toolPosition);
|
||||
preview.toolAxis.visible = true;
|
||||
updateLineGeometry(preview.toolAxis, [
|
||||
toolPosition,
|
||||
toolPosition.clone().add(vector.multiplyScalar(0.7)),
|
||||
]);
|
||||
}
|
||||
|
||||
function updateLineGeometry(line, points) {
|
||||
line.visible = points.length > 0;
|
||||
line.geometry.dispose();
|
||||
line.geometry = points.length > 0
|
||||
? new THREE.BufferGeometry().setFromPoints(points)
|
||||
: EMPTY_GEOMETRY.clone();
|
||||
}
|
||||
|
||||
function buildProgramPreviewPoints(state) {
|
||||
const motion = state.programExecution?.motion;
|
||||
if (Array.isArray(motion) && motion.length > 0 && state.preview.pathPoints !== 0) {
|
||||
return limitPoints(motion.map((event) => vectorFromAxes(event.axes)));
|
||||
}
|
||||
|
||||
const pointCount = normalizePathPointCount(state.preview.pathPoints);
|
||||
if (pointCount === 0) return [];
|
||||
return buildFixturePreviewPoints(pointCount, toPreviewVector(state.tcpPose));
|
||||
}
|
||||
|
||||
function buildExecutedProgramPoints(state, previewPoints) {
|
||||
if (state.preview.pathPoints === 0 || previewPoints.length === 0) return [];
|
||||
const samples = state.programExecutionTiming?.samples;
|
||||
const sampleIndex = Number(state.programExecutionSampleIndex || 0);
|
||||
if (Array.isArray(samples) && samples.length > 0) {
|
||||
const end = clamp(Math.round(sampleIndex), 0, samples.length - 1);
|
||||
return limitPoints(samples.slice(0, end + 1).map((sample) => vectorFromAxes(sample)));
|
||||
}
|
||||
|
||||
const motionIndex = clamp(Math.round(Number(state.programExecutionMotionIndex || 0)), 0, previewPoints.length - 1);
|
||||
return previewPoints.slice(0, motionIndex + 1);
|
||||
}
|
||||
|
||||
function buildRapidPreviewPoints(state) {
|
||||
const motion = state.programExecution?.motion;
|
||||
if (!Array.isArray(motion) || state.preview.pathPoints === 0) return [];
|
||||
return limitPoints(
|
||||
motion
|
||||
.filter((event) => event.type === "STRAIGHT_TRAVERSE")
|
||||
.map((event) => vectorFromAxes(event.axes)),
|
||||
);
|
||||
}
|
||||
|
||||
function buildFixturePreviewPoints(pointCount, tcpPosition) {
|
||||
const points = [];
|
||||
for (let index = 0; index < 72; index += 1) {
|
||||
const t = index / 71;
|
||||
for (let index = 0; index < pointCount; index += 1) {
|
||||
const t = pointCount === 1 ? 0 : index / (pointCount - 1);
|
||||
const x = -2.45 + t * 4.9;
|
||||
const y = Math.sin(t * Math.PI * 13) * 0.36;
|
||||
const z = -0.68 + Math.sin(t * Math.PI * 2) * 0.42;
|
||||
points.push(new THREE.Vector3(x, y, z));
|
||||
}
|
||||
const geometry = new THREE.BufferGeometry().setFromPoints(points);
|
||||
return new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0xffffff }));
|
||||
if (points.length > 0 && tcpPosition) {
|
||||
points[points.length - 1] = tcpPosition.clone();
|
||||
}
|
||||
return points;
|
||||
}
|
||||
|
||||
function updateMachinePose(preview, state) {
|
||||
const tcp = state.tcpPose;
|
||||
const tool = state.toolAxisVector;
|
||||
const tcpPosition = new THREE.Vector3(
|
||||
clamp(tcp.x * 0.035, -2.7, 2.7),
|
||||
clamp(tcp.y * 0.035, -2.0, 2.0),
|
||||
clamp(tcp.z * 0.04 + 0.35, -1.1, 1.9),
|
||||
function executionToolPosition(state, previewPoints) {
|
||||
if (state.preview.pathPoints === 0) return null;
|
||||
const feedbackAxes = state.programRuntimeFeedback?.axisPose || state.programRuntimeFeedback;
|
||||
if (feedbackAxes && hasLinearAxes(feedbackAxes)) return vectorFromAxes(feedbackAxes);
|
||||
if (hasLinearAxes(state.axisPose)) return vectorFromAxes(state.axisPose);
|
||||
return previewPoints.at(-1) || null;
|
||||
}
|
||||
|
||||
function vectorFromAxes(axes = {}) {
|
||||
return new THREE.Vector3(
|
||||
scaleLinearAxis(axes.x),
|
||||
scaleLinearAxis(axes.y),
|
||||
scaleZAxis(axes.z),
|
||||
);
|
||||
const toolAxisVector = new THREE.Vector3(tool.x, tool.y, tool.z || 1).normalize();
|
||||
|
||||
preview.toolGroup.position.copy(tcpPosition);
|
||||
preview.toolGroup.quaternion.setFromUnitVectors(new THREE.Vector3(0, 0, 1), toolAxisVector);
|
||||
preview.toolAxis.geometry.setFromPoints([
|
||||
new THREE.Vector3(0, 0, 0),
|
||||
toolAxisVector.clone().multiplyScalar(state.rtcpState === "on" ? 1.2 : 0.85),
|
||||
]);
|
||||
preview.tableGroup.rotation.x = THREE.MathUtils.degToRad(state.axisPose.a);
|
||||
preview.tableGroup.rotation.z = THREE.MathUtils.degToRad(state.axisPose.c);
|
||||
setCameraView(preview.camera, state.preview.selectedView);
|
||||
}
|
||||
|
||||
function setCameraView(camera, selectedView) {
|
||||
if (selectedView === "x") {
|
||||
camera.position.set(6, 0.02, 0.45);
|
||||
} else if (selectedView === "y") {
|
||||
camera.position.set(0.02, -6, 0.7);
|
||||
} else if (selectedView === "z") {
|
||||
camera.position.set(0.01, -0.02, 6.6);
|
||||
function toPreviewVector(pose = {}) {
|
||||
return new THREE.Vector3(
|
||||
scaleLinearAxis(pose.x),
|
||||
scaleLinearAxis(pose.y),
|
||||
scaleZAxis(pose.z),
|
||||
);
|
||||
}
|
||||
|
||||
function scaleLinearAxis(value) {
|
||||
return clamp((Number(value) || 0) * 0.035, -2.7, 2.7);
|
||||
}
|
||||
|
||||
function scaleZAxis(value) {
|
||||
return clamp((Number(value) || 0) * 0.04 + 0.35, -1.1, 1.9);
|
||||
}
|
||||
|
||||
function toToolVector(vector = {}) {
|
||||
return new THREE.Vector3(
|
||||
Number(vector.x) || 0,
|
||||
Number(vector.y) || 0,
|
||||
Number(vector.z) || 1,
|
||||
).normalize();
|
||||
}
|
||||
|
||||
function hasLinearAxes(value = {}) {
|
||||
return ["x", "y", "z"].some((axis) => Number.isFinite(Number(value[axis])));
|
||||
}
|
||||
|
||||
function limitPoints(points) {
|
||||
if (points.length <= MAX_TOOLPATH_POINTS) return points;
|
||||
const stride = Math.ceil(points.length / MAX_TOOLPATH_POINTS);
|
||||
const sampled = points.filter((_, index) => index % stride === 0);
|
||||
const last = points.at(-1);
|
||||
if (last && sampled.at(-1) !== last) sampled.push(last);
|
||||
return sampled;
|
||||
}
|
||||
|
||||
function previewSourceMode(state) {
|
||||
if (state.programExecution?.sourceMode) return state.programExecution.sourceMode;
|
||||
return state.programExecutionSourceMode || "fixture-line-playback";
|
||||
}
|
||||
|
||||
function drawFallbackPolyline(ctx, points, cx, cy, scale) {
|
||||
for (let index = 0; index < points.length; index += 1) {
|
||||
const point = points[index];
|
||||
const x = cx + point.x * scale;
|
||||
const y = cy - point.y * scale;
|
||||
if (index === 0) ctx.moveTo(x, y);
|
||||
else ctx.lineTo(x, y);
|
||||
}
|
||||
}
|
||||
|
||||
function createToolpathCameraControls(canvas, camera, renderFrame) {
|
||||
const controls = {
|
||||
enabled: true,
|
||||
camera,
|
||||
target: new THREE.Vector3(),
|
||||
theta: CAMERA_PRESETS.iso.theta,
|
||||
phi: CAMERA_PRESETS.iso.phi,
|
||||
radius: CAMERA_PRESETS.iso.radius,
|
||||
pointerMode: null,
|
||||
pointers: new Map(),
|
||||
lastPointer: null,
|
||||
lastPinchCenter: null,
|
||||
lastPinchDistance: 0,
|
||||
renderFrame,
|
||||
};
|
||||
|
||||
canvas.addEventListener("contextmenu", (event) => event.preventDefault());
|
||||
canvas.addEventListener("wheel", (event) => {
|
||||
event.preventDefault();
|
||||
const scale = Math.exp(Math.sign(event.deltaY) * 0.12);
|
||||
controls.radius = clamp(controls.radius * scale, 1.2, 28);
|
||||
applyCameraControls(controls);
|
||||
controls.renderFrame();
|
||||
}, { passive: false });
|
||||
canvas.addEventListener("pointerdown", (event) => {
|
||||
safelySetPointerCapture(canvas, event.pointerId);
|
||||
controls.pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
|
||||
controls.lastPointer = { x: event.clientX, y: event.clientY };
|
||||
controls.pointerMode = event.button === 1 || event.button === 2 || event.shiftKey ? "pan" : "rotate";
|
||||
if (controls.pointers.size === 2) {
|
||||
controls.pointerMode = "pinch";
|
||||
controls.lastPinchDistance = getPointerDistance(controls.pointers);
|
||||
controls.lastPinchCenter = getPointerCenter(controls.pointers);
|
||||
}
|
||||
});
|
||||
canvas.addEventListener("pointermove", (event) => {
|
||||
if (!controls.pointers.has(event.pointerId)) return;
|
||||
const previous = controls.pointers.get(event.pointerId);
|
||||
controls.pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
|
||||
|
||||
if (controls.pointerMode === "pinch" && controls.pointers.size >= 2) {
|
||||
const distance = getPointerDistance(controls.pointers);
|
||||
const center = getPointerCenter(controls.pointers);
|
||||
if (distance > 0 && controls.lastPinchDistance > 0) {
|
||||
controls.radius = clamp(controls.radius * (controls.lastPinchDistance / distance), 1.2, 28);
|
||||
if (controls.lastPinchCenter) {
|
||||
panCamera(
|
||||
controls,
|
||||
center.x - controls.lastPinchCenter.x,
|
||||
center.y - controls.lastPinchCenter.y,
|
||||
canvas,
|
||||
);
|
||||
}
|
||||
controls.lastPinchDistance = distance;
|
||||
controls.lastPinchCenter = center;
|
||||
applyCameraControls(controls);
|
||||
controls.renderFrame();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const dx = event.clientX - previous.x;
|
||||
const dy = event.clientY - previous.y;
|
||||
if (controls.pointerMode === "pan") {
|
||||
panCamera(controls, dx, dy, canvas);
|
||||
} else {
|
||||
camera.position.set(3.4, -5.0, 3.2);
|
||||
controls.theta -= dx * 0.006;
|
||||
controls.phi = clamp(controls.phi - dy * 0.006, 0.001, Math.PI - 0.001);
|
||||
}
|
||||
camera.lookAt(0, 0, 0);
|
||||
camera.updateProjectionMatrix();
|
||||
applyCameraControls(controls);
|
||||
controls.renderFrame();
|
||||
});
|
||||
|
||||
const releasePointer = (event) => {
|
||||
controls.pointers.delete(event.pointerId);
|
||||
safelyReleasePointerCapture(canvas, event.pointerId);
|
||||
if (controls.pointers.size === 0) {
|
||||
controls.pointerMode = null;
|
||||
controls.lastPointer = null;
|
||||
controls.lastPinchCenter = null;
|
||||
controls.lastPinchDistance = 0;
|
||||
}
|
||||
};
|
||||
canvas.addEventListener("pointerup", releasePointer);
|
||||
canvas.addEventListener("pointercancel", releasePointer);
|
||||
return controls;
|
||||
}
|
||||
|
||||
function safelySetPointerCapture(canvas, pointerId) {
|
||||
try {
|
||||
canvas.setPointerCapture?.(pointerId);
|
||||
} catch {
|
||||
// Synthetic browser-smoke events do not always have an active pointer capture target.
|
||||
}
|
||||
}
|
||||
|
||||
function safelyReleasePointerCapture(canvas, pointerId) {
|
||||
try {
|
||||
canvas.releasePointerCapture?.(pointerId);
|
||||
} catch {
|
||||
// Matching setPointerCapture guard for synthetic and cancelled pointer streams.
|
||||
}
|
||||
}
|
||||
|
||||
function normalizePathPointCount(value) {
|
||||
const requestedCount = Number(value);
|
||||
return Number.isFinite(requestedCount) && requestedCount > 0
|
||||
? Math.max(2, Math.min(Math.round(requestedCount), 512))
|
||||
: 0;
|
||||
}
|
||||
|
||||
function getPointerDistance(pointers) {
|
||||
const values = [...pointers.values()];
|
||||
if (values.length < 2) return 0;
|
||||
return Math.hypot(values[0].x - values[1].x, values[0].y - values[1].y);
|
||||
}
|
||||
|
||||
function getPointerCenter(pointers) {
|
||||
const values = [...pointers.values()];
|
||||
if (values.length < 2) return null;
|
||||
return {
|
||||
x: (values[0].x + values[1].x) / 2,
|
||||
y: (values[0].y + values[1].y) / 2,
|
||||
};
|
||||
}
|
||||
|
||||
function panCamera(controls, dx, dy, canvas) {
|
||||
const cameraDirection = new THREE.Vector3();
|
||||
controls.camera.getWorldDirection(cameraDirection);
|
||||
const right = new THREE.Vector3().crossVectors(cameraDirection, controls.camera.up).normalize();
|
||||
const up = new THREE.Vector3().crossVectors(right, cameraDirection).normalize();
|
||||
const speed = controls.radius / Math.max(canvas.clientWidth, canvas.clientHeight, 1);
|
||||
controls.target.addScaledVector(right, -dx * speed);
|
||||
controls.target.addScaledVector(up, dy * speed);
|
||||
}
|
||||
|
||||
function resetCamera(preview, selectedView) {
|
||||
const preset = CAMERA_PRESETS[selectedView] || CAMERA_PRESETS.iso;
|
||||
preview.controls.theta = preset.theta;
|
||||
preview.controls.phi = preset.phi;
|
||||
preview.controls.radius = preset.radius;
|
||||
preview.controls.target.copy(preset.target);
|
||||
applyCameraControls(preview.controls);
|
||||
}
|
||||
|
||||
function applyCameraControls(controls) {
|
||||
const sinPhiRadius = Math.sin(controls.phi) * controls.radius;
|
||||
controls.camera.position.set(
|
||||
controls.target.x + sinPhiRadius * Math.cos(controls.theta),
|
||||
controls.target.y + sinPhiRadius * Math.sin(controls.theta),
|
||||
controls.target.z + Math.cos(controls.phi) * controls.radius,
|
||||
);
|
||||
controls.camera.lookAt(controls.target);
|
||||
controls.camera.updateProjectionMatrix();
|
||||
}
|
||||
|
||||
function resizeRenderer(preview) {
|
||||
|
||||
@@ -76,11 +76,14 @@
|
||||
if (
|
||||
canvas.dataset.threeReady !== "true" ||
|
||||
canvas.dataset.threeFrameApi !== "web-rtcp-5axis-motion-frame" ||
|
||||
canvas.dataset.threeSceneMode !== "program-preview-and-tool-execution" ||
|
||||
canvas.dataset.threeCameraControls !== "orbit-pan-zoom" ||
|
||||
Number(canvas.dataset.threePathPoints ?? 0) < 64 ||
|
||||
Number(canvas.dataset.threeSceneObjects ?? 0) < 12 ||
|
||||
Number(canvas.dataset.threeSceneObjects ?? 0) < 5 ||
|
||||
!canvas.dataset.threeToolhead ||
|
||||
!canvas.dataset.threeToolAxis ||
|
||||
!canvas.dataset.threeTcpPose
|
||||
!canvas.dataset.threeTcpPose ||
|
||||
canvas.dataset.threeToolExecutionMarker !== "true"
|
||||
) {
|
||||
throw new Error(`Three.js preview did not expose ready render state: ${JSON.stringify(canvas.dataset)}`);
|
||||
}
|
||||
@@ -269,6 +272,14 @@
|
||||
if (win.webRtcp5AxisSimulation.getState().programRuntimeFeedback?.semanticBoundary !== "linuxcnc_tp_run_cycle_feedback_without_hardware") {
|
||||
throw new Error(`initial runtime feedback did not use LinuxCNC TP sample: ${JSON.stringify(win.webRtcp5AxisSimulation.getState().programRuntimeFeedback)}`);
|
||||
}
|
||||
canvas = doc.querySelector("[data-five-axis-canvas]");
|
||||
if (
|
||||
canvas.dataset.threeProgramPreviewSource !== "linuxcnc-interpreter-wasm" ||
|
||||
Number(canvas.dataset.threePathPoints ?? 0) < win.webRtcp5AxisSimulation.getState().programExecution.summary.motionEventCount ||
|
||||
Number(canvas.dataset.threeExecutedPathPoints ?? 0) < 1
|
||||
) {
|
||||
throw new Error(`Three.js preview did not consume LinuxCNC program execution path: ${JSON.stringify(canvas.dataset)}`);
|
||||
}
|
||||
if (!doc.querySelector('[data-program-execution-source]')?.textContent.includes("linuxcnc-interpreter-wasm")) {
|
||||
throw new Error("program execution source DOM did not render interpreter source");
|
||||
}
|
||||
@@ -369,9 +380,15 @@
|
||||
if (savedSession.snapshot.format !== "web-rtcp-5axis-session-snapshot") {
|
||||
throw new Error("saveSession did not write a five-axis session snapshot");
|
||||
}
|
||||
if (!["opfs", "memory-fallback"].includes(savedSession.storageMode)) {
|
||||
throw new Error(`saveSession used unexpected storage mode: ${savedSession.storageMode}`);
|
||||
}
|
||||
if (!doc.querySelector('[data-session-persistence="status"]')?.textContent.includes("saved")) {
|
||||
throw new Error("session save status did not render");
|
||||
}
|
||||
if (!doc.querySelector('[data-session-persistence="status"]')?.textContent.includes(savedSession.storageMode)) {
|
||||
throw new Error("session save status did not render storage mode");
|
||||
}
|
||||
if (doc.querySelector('[data-active-program-line]')?.textContent !== "Current line 2") {
|
||||
throw new Error("loaded program did not render first LinuxCNC motion line");
|
||||
}
|
||||
@@ -393,6 +410,13 @@
|
||||
if (Number(doc.querySelector(".gcode-row.active")?.dataset.programLine || 0) < 2) {
|
||||
throw new Error("RUN did not highlight a LinuxCNC task/HAL motion line");
|
||||
}
|
||||
canvas = doc.querySelector("[data-five-axis-canvas]");
|
||||
if (
|
||||
Number(canvas.dataset.threeExecutedPathPoints ?? 0) < 1 ||
|
||||
canvas.dataset.threeToolExecutionMarker !== "true"
|
||||
) {
|
||||
throw new Error(`Three.js preview did not display tool execution progress: ${JSON.stringify(canvas.dataset)}`);
|
||||
}
|
||||
const taskHalRunState = win.webRtcp5AxisSimulation.getState();
|
||||
if (taskHalRunState.fullExecutionBoundary?.semanticBoundary !== "linuxcnc_task_motion_hal_wasm_simulation_runtime") {
|
||||
throw new Error(`full execution boundary did not promote task/HAL simulation runtime: ${JSON.stringify(taskHalRunState.fullExecutionBoundary)}`);
|
||||
@@ -504,6 +528,23 @@
|
||||
if (!doc.querySelector('[data-session-persistence="status"]')?.textContent.includes("restored")) {
|
||||
throw new Error("session restore status did not render");
|
||||
}
|
||||
if (!doc.querySelector('[data-session-persistence="status"]')?.textContent.includes(savedSession.storageMode)) {
|
||||
throw new Error("session restore status did not preserve storage mode");
|
||||
}
|
||||
doc.querySelector('[data-action="SAVE_SESSION"]').click();
|
||||
await wait(120);
|
||||
const uiSavedSession = win.webRtcp5AxisSimulation.getState().sessionPersistence;
|
||||
if (uiSavedSession.status !== "saved" || !["opfs", "memory-fallback"].includes(uiSavedSession.storageMode)) {
|
||||
throw new Error(`UI Save Session did not use a supported storage mode: ${JSON.stringify(uiSavedSession)}`);
|
||||
}
|
||||
doc.querySelector('[data-action="JOG_X_POS"]').click();
|
||||
await wait(50);
|
||||
doc.querySelector('[data-action="RESTORE_SESSION"]').click();
|
||||
await wait(180);
|
||||
const uiRestoredSession = win.webRtcp5AxisSimulation.getState().sessionPersistence;
|
||||
if (uiRestoredSession.status !== "restored" || uiRestoredSession.storageMode !== uiSavedSession.storageMode) {
|
||||
throw new Error(`UI Restore Session did not restore from default storage fallback: ${JSON.stringify(uiRestoredSession)}`);
|
||||
}
|
||||
if (win.webRtcp5AxisSimulation.getState().machine.allHomed !== true) {
|
||||
doc.querySelector('[data-action="mode-manual"]').click();
|
||||
await wait(50);
|
||||
@@ -569,11 +610,46 @@
|
||||
if (win.webRtcp5AxisSimulation.getState().preview.selectedView !== "x") {
|
||||
throw new Error("preview view button did not update state");
|
||||
}
|
||||
canvas = doc.querySelector("[data-five-axis-canvas]");
|
||||
canvas.dispatchEvent(new WheelEvent("wheel", { deltaY: -120, bubbles: true, cancelable: true }));
|
||||
canvas.dispatchEvent(new PointerEvent("pointerdown", {
|
||||
pointerId: 1,
|
||||
clientX: 180,
|
||||
clientY: 120,
|
||||
button: 0,
|
||||
bubbles: true,
|
||||
}));
|
||||
canvas.dispatchEvent(new PointerEvent("pointermove", {
|
||||
pointerId: 1,
|
||||
clientX: 220,
|
||||
clientY: 135,
|
||||
button: 0,
|
||||
bubbles: true,
|
||||
}));
|
||||
canvas.dispatchEvent(new PointerEvent("pointerup", {
|
||||
pointerId: 1,
|
||||
clientX: 220,
|
||||
clientY: 135,
|
||||
button: 0,
|
||||
bubbles: true,
|
||||
}));
|
||||
await wait(50);
|
||||
if (canvas.dataset.threeCameraControls !== "orbit-pan-zoom") {
|
||||
throw new Error("Three.js preview did not expose orbit/pan/zoom controls");
|
||||
}
|
||||
assertCanvasNonblank(canvas, "interactive Three.js preview");
|
||||
doc.querySelector('[data-action="clear-preview"]').click();
|
||||
await wait(50);
|
||||
if (win.webRtcp5AxisSimulation.getState().preview.pathPoints !== 0) {
|
||||
throw new Error("clear preview button did not update path points");
|
||||
}
|
||||
canvas = doc.querySelector("[data-five-axis-canvas]");
|
||||
if (Number(canvas.dataset.threePathPoints ?? -1) !== 0) {
|
||||
throw new Error(`Three.js preview did not clear toolpath points: ${JSON.stringify(canvas.dataset)}`);
|
||||
}
|
||||
if (Number(canvas.dataset.threeExecutedPathPoints ?? -1) !== 0) {
|
||||
throw new Error(`Three.js preview did not clear executed toolpath points: ${JSON.stringify(canvas.dataset)}`);
|
||||
}
|
||||
doc.querySelector('[data-action="RELOAD"]').click();
|
||||
await wait(50);
|
||||
if (win.webRtcp5AxisSimulation.getState().preview.pathPoints !== 8) {
|
||||
|
||||
@@ -49,6 +49,8 @@ const storage = createMemorySessionStorage();
|
||||
const saved = await store.saveSession({ storage });
|
||||
assert.equal(saved.snapshot.format, "web-rtcp-5axis-session-snapshot");
|
||||
assert.equal(saved.path, "web-rtcp-5axis-sim-plan/sessions/gmoccapy-web-session/web-rtcp-5axis-session.json");
|
||||
assert.equal(saved.storageMode, "memory");
|
||||
assert.equal(store.getState().sessionPersistence.storageMode, "memory");
|
||||
|
||||
store.dispatch({ type: "SET_RTCP", enabled: false });
|
||||
store.dispatch({ type: "STOP" });
|
||||
@@ -60,7 +62,9 @@ assert.notEqual(store.getState().axisPose.x, beforeSave.axisPose.x);
|
||||
const restored = await store.restoreSession({ storage });
|
||||
const afterRestore = store.getState();
|
||||
assert.equal(restored.path, saved.path);
|
||||
assert.equal(restored.storageMode, "memory");
|
||||
assert.equal(afterRestore.sessionPersistence.status, "restored");
|
||||
assert.equal(afterRestore.sessionPersistence.storageMode, "memory");
|
||||
assert.equal(afterRestore.rtcpState, beforeSave.rtcpState);
|
||||
assert.equal(afterRestore.kinsType, beforeSave.kinsType);
|
||||
assert.equal(afterRestore.axisPose.x, beforeSave.axisPose.x);
|
||||
|
||||
93
备忘/备忘1.txt
93
备忘/备忘1.txt
@@ -1,40 +1,91 @@
|
||||
wasm-port/docs/porting-steps-standalone.md 的 Phase 9/10 继续推进，并直接补上第一批独立 kinematics WASM ABI。
|
||||
做全量 kinematics ABI
|
||||
需要完善的内容，做个备忘
|
||||
按 web-rtcp-5axis-sim-plan/docs/native-task-hal-sync-implementation-steps.md 的边界要求，本次只处理 Web Three.js 可视化层，不改 LinuxCNC task/HAL runtime 语义。
|
||||
|
||||
完成内容：
|
||||
新增独立 kinematics WASM C ABI：[linuxcnc_kinematics_wasm.c](/home/cnc/桌面/cnc_wams/wasm-port/runtime/core/linuxcnc_wrap/linuxcnc_kinematics_wasm.c)
|
||||
Three.js 三维显示区改为 toolpath-only：删除画布内地板、网格、坐标轴、机床包络、转台、刀具实体，只保留刀具预览路径线。
|
||||
|
||||
新增构建脚本：[build_kinematics_wasm.sh](/home/cnc/桌面/cnc_wams/wasm-port/tools/build_kinematics_wasm.sh)
|
||||
补齐 Three.js 相机交互：
|
||||
- 鼠标左键/单指拖动：旋转
|
||||
- 鼠标中键、右键或 Shift+拖动：平移
|
||||
- 鼠标滚轮：缩放
|
||||
- 双指：缩放并平移
|
||||
- X/Y/Z/Fit 按钮：预设视角/复位视角
|
||||
|
||||
新增 SDK：[linuxcnc-kinematics.js](/home/cnc/桌面/cnc_wams/wasm-port/runtime/sdk/src/linuxcnc-kinematics.js)
|
||||
并从 [index.js](/home/cnc/桌面/cnc_wams/wasm-port/runtime/sdk/src/index.js) 导出
|
||||
|
||||
新增 Node/WASM smoke：[verify_kinematics_wasm.sh](/home/cnc/桌面/cnc_wams/wasm-port/tests/wasm/node/verify_kinematics_wasm.sh)
|
||||
[verify_kinematics_wasm.mjs](/home/cnc/桌面/cnc_wams/wasm-port/tests/wasm/node/verify_kinematics_wasm.mjs)
|
||||
边界说明：
|
||||
这次没有提升 nativeTaskReady/nativeHalSyncReady；它仍属于 Web simulation UI 显示层调整。task/HAL native/WASM 边界仍需继续按执行文档阶段 0-8 推进。
|
||||
|
||||
更新文档：[porting-steps-standalone.md](/home/cnc/桌面/cnc_wams/wasm-port/docs/porting-steps-standalone.md)
|
||||
[README.md](/home/cnc/桌面/cnc_wams/wasm-port/runtime/sdk/README.md)
|
||||
|
||||
写入新接续文件：[text39.txt](/home/cnc/桌面/cnc_wams/textbak/text39.txt)
|
||||
继续按 web-rtcp-5axis-sim-plan/docs/native-task-hal-sync-implementation-steps.md 边界推进 Three.js 显示层：程序预览和刀具执行过程已显示在 Three.js 区域。
|
||||
|
||||
完成内容：
|
||||
Three.js 区域现在同时显示：
|
||||
- 完整程序预览路径：来自 state.programExecution.motion，也就是 LinuxCNC interpreter/WASM canonical motion events。
|
||||
- 已执行路径：优先来自 state.programExecutionTiming.samples，也就是 LinuxCNC TP queue runtime timing samples；没有 samples 时回退到 canonical motion 端点。
|
||||
- 当前刀具/TCP 执行标记：来自 state.programRuntimeFeedback.axisPose / task-HAL runtime feedback，并显示刀轴方向线。
|
||||
- 快速移动路径辅助层：从 canonical motion 中的 STRAIGHT_TRAVERSE 提取。
|
||||
|
||||
保留功能：
|
||||
- 鼠标/触控旋转、平移、缩放仍可用。
|
||||
- X/Y/Z/Fit 预设视角仍可用。
|
||||
- Clear 会同步清空完整预览路径和已执行路径。
|
||||
|
||||
实现文件：
|
||||
[five-axis-scene.js](/home/cnc/桌面/cnc_wams/web-rtcp-5axis-sim-plan/app/src/visualization/five-axis-scene.js)
|
||||
[gmoccapy_shell_smoke.html](/home/cnc/桌面/cnc_wams/web-rtcp-5axis-sim-plan/tests/browser/gmoccapy_shell_smoke.html)
|
||||
|
||||
新增可观测状态：
|
||||
canvas.dataset.threeSceneMode=program-preview-and-tool-execution
|
||||
canvas.dataset.threeProgramPreviewSource=linuxcnc-interpreter-wasm / linuxcnc-machine-file-remap-wasm / fixture-line-playback
|
||||
canvas.dataset.threePathPoints=完整程序预览点数
|
||||
canvas.dataset.threeExecutedPathPoints=已执行路径点数
|
||||
canvas.dataset.threeToolExecutionMarker=true/false
|
||||
|
||||
当前生成的独立 kinematics WASM 产物：
|
||||
linuxcnc_xyzac_trt_kinematics.js
|
||||
linuxcnc_xyzac_trt_kinematics.wasm
|
||||
linuxcnc_xyzbc_trt_kinematics.js
|
||||
linuxcnc_xyzbc_trt_kinematics.wasm
|
||||
验证已通过：
|
||||
EMSDK_QUIET=1 source /home/cnc/emsdk/emsdk_env.sh >/dev/null && wasm-port/tests/wasm/node/verify_kinematics_wasm.sh
|
||||
输出包含：
|
||||
kinematics_wasm_node_smoke=ok
|
||||
准确状态现在是：xyzac-trt / xyzbc-trt TRT kinematics 独立 WASM ABI 已完成第一批；但不能说 LinuxCNC 所有逆解算法都已完整移植到 WASM。全量 kinematics family 仍需继续逐个按 native probe -> 独立 WASM module -> SDK smoke 的路径补齐。
|
||||
|
||||
npm --prefix web-rtcp-5axis-sim-plan/app run smoke:node
|
||||
bash web-rtcp-5axis-sim-plan/tests/browser/verify_gmoccapy_shell_browser.sh
|
||||
bash web-rtcp-5axis-sim-plan/tests/browser/verify_gmoccapy_dist_browser.sh
|
||||
|
||||
边界说明：
|
||||
Three.js 不解析 G-code，不手写 LinuxCNC 运动语义；只消费已有 LinuxCNC interpreter canonical motion、TP timing samples、task/HAL runtime feedback。nativeTaskReady/nativeHalSyncReady 的提升仍按执行文档阶段任务另行完成。
|
||||
|
||||
|
||||
我先确认当前程序执行数据从哪里来，以及 LinuxCNC 示例程序在仓库里如何被加载。目标是让 Three.js 区域既能显示完整程序预览路径，也能显示执行中的刀具位置/已执行轨迹，并尽量复用已有 interpreter/task/HAL 输出，不手写新的 CNC 语义。
|
||||
|
||||
|
||||
文档更新会比较小：把 “下一步要做 Worker/store” 改为 “已接线”，把当前边界标为 Web simulation promoted，同时仍明确 hardware/realtime kernel/external user-M/tool DB 不支持。历史 M18/M13 记录不改。
|
||||
|
||||
|
||||
公网测试已经跑到一个明确失败点：Save Session 在 http://82.156.24.101:8092 下抛出 OPFS is not available in this browser。这类浏览器存储 API 在公网 HTTP/IP 环境不是安全上下文，很多“保存、恢复、暂存机床文件、完整边界审计”都会受影响；我会继续把其余功能用异常隔离方式跑完，确认还有没有独立问题。
|
||||
|
||||
|
||||
代码确认了：会话保存和机床文件暂存都硬依赖 OPFS。公网 HTTP/IP 不满足安全上下文，因此这些功能天然不可用；我会先用降级后的脚本继续测试不依赖 OPFS 的操作功能，再给出完整问题清单。
|
||||
|
||||
本轮继续处理公网 HTTP/IP 测试失败点：Save Session 在 http://82.156.24.101:8092 下因 OPFS 不可用报错。
|
||||
|
||||
完成内容：
|
||||
- five-axis session runtime 现在会优先使用 OPFS；如果当前浏览器没有 navigator.storage.getDirectory，则自动使用页面内存会话存储。
|
||||
- Save Session / Restore Session 返回并记录 storageMode：
|
||||
- opfs：安全上下文下的 OPFS 持久化；
|
||||
- memory-fallback：公网 HTTP/IP 等无 OPFS 环境下的页面内存后备；
|
||||
- memory：测试显式注入的内存存储。
|
||||
- gmoccapy 信息面板 Session 行现在显示 status / storageMode / path，避免把 memory-fallback 误认成 OPFS 持久化。
|
||||
- browser smoke 覆盖默认 Save/Restore 按钮路径，确认无 OPFS 环境不会再抛出 “OPFS is not available in this browser.”。
|
||||
|
||||
实现文件：
|
||||
[five-axis-session.js](/home/cnc/桌面/cnc_wams/web-rtcp-5axis-sim-plan/app/src/runtime/five-axis-session.js)
|
||||
[store.js](/home/cnc/桌面/cnc_wams/web-rtcp-5axis-sim-plan/app/src/state/store.js)
|
||||
[gmoccapy-shell.js](/home/cnc/桌面/cnc_wams/web-rtcp-5axis-sim-plan/app/src/ui/gmoccapy-shell.js)
|
||||
[verify_five_axis_session.mjs](/home/cnc/桌面/cnc_wams/web-rtcp-5axis-sim-plan/tests/node/verify_five_axis_session.mjs)
|
||||
[gmoccapy_shell_smoke.html](/home/cnc/桌面/cnc_wams/web-rtcp-5axis-sim-plan/tests/browser/gmoccapy_shell_smoke.html)
|
||||
|
||||
验证已通过：
|
||||
node web-rtcp-5axis-sim-plan/tests/node/verify_five_axis_session.mjs
|
||||
bash web-rtcp-5axis-sim-plan/tests/browser/verify_gmoccapy_shell_browser.sh
|
||||
npm --prefix web-rtcp-5axis-sim-plan/app run smoke:node
|
||||
bash web-rtcp-5axis-sim-plan/tests/browser/verify_gmoccapy_dist_browser.sh
|
||||
|
||||
边界说明：
|
||||
memory-fallback 只解决公网 HTTP/IP 下“当前页面生命周期内保存/恢复会话”的可用性，不声称提供 OPFS 持久化。机床文件暂存、完整边界审计中仍硬依赖 OPFS 的部分，公网 HTTP/IP 下还需要继续按功能逐项降级或标记 blocked。
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user