wangdequan/linuxcncWebWASM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Support XYZAC and XYZBC in shared web machine UI

Browse Source
This commit is contained in:
wangdequan
2026-09-11 06:25:13 +08:00
parent aac1ceb250
commit 02dcc573b0
20 changed files with 318 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/react/src/XyzacMachineView.tsx
View File

@@ -46,14 +46,15 @@ export function XyzacMachineView({ visual, toolpath, view = "p", zoom = 1, rotat
const floor = new THREE.Mesh(new THREE.PlaneGeometry(18, 18), new THREE.ShadowMaterial({ opacity: .24 }));
floor.rotation.x = -Math.PI / 2; floor.position.y = -2.64; floor.receiveShadow = true; scene.add(floor);
const assembly = buildXyzacMachine(); scene.add(assembly.machine);
const coordinates = visualRef.current.machineModel?.coordinate_system ?? "XYZAC";
const assembly = buildXyzacMachine(coordinates); scene.add(assembly.machine);
assembly.update(visualRef.current);
const nameplateCanvas = document.createElement("canvas"); nameplateCanvas.width = 512; nameplateCanvas.height = 128;
const label = nameplateCanvas.getContext("2d");
if (label) {
label.fillStyle = "#176b67"; label.fillRect(0, 0, 512, 128);
label.fillStyle = "#f0f4f3"; label.font = "bold 68px sans-serif"; label.fillText("AXIS", 18, 82);
label.font = "24px sans-serif"; label.fillText("XYZAC / TRT", 235, 76);
label.font = "24px sans-serif"; label.fillText(`${coordinates} / TRT`, 235, 76);
}
const nameplateTexture = new THREE.CanvasTexture(nameplateCanvas); nameplateTexture.colorSpace = THREE.SRGBColorSpace;
const nameplate = new THREE.Mesh(new THREE.PlaneGeometry(.84, .21), new THREE.MeshBasicMaterial({ map: nameplateTexture }));
@@ -158,7 +159,8 @@ export function XyzacMachineView({ visual, toolpath, view = "p", zoom = 1, rotat
limits.box.setFromPoints([toView({ x: x[0], y: y[0], z: z[0] }), toView({ x: x[1], y: y[1], z: z[1] })]);
}
offsets.visible = config.showOffsets;
offsets.position.set(0, state.offsets.z_offset * .01, state.offsets.y_offset * .01);
const coordinates = state.machineModel?.coordinate_system ?? "XYZAC";
offsets.position.set(coordinates === "XYZBC" ? Number(state.offsets.x_offset ?? 0) * .01 : 0, state.offsets.z_offset * .01, state.offsets.y_offset * .01);
extents.visible = config.showExtents;
const preset = `${config.view}:${config.zoom}`;
if (preset !== lastPreset) { presetCamera(); lastPreset = preset; }
@@ -179,8 +181,10 @@ export function XyzacMachineView({ visual, toolpath, view = "p", zoom = 1, rotat
}, []);
const model = visual.machineModel;
const coordinates = model?.coordinate_system ?? "XYZAC";
const axisLabels = [...coordinates];
const controllerButton = (action: string, label: string, asset?: string, glyph?: string) => <button type="button" data-axis-control={`machine-${action}`} data-xyzac-machine-controller={action} title={label} aria-label={label} onClick={() => host.current?.xyzacMachineController?.[action]?.()}>{asset ? <img src={axisIcon(asset)} alt="" /> : glyph}</button>;
return <div className="three-viewer xyzac-machine-view" ref={host} data-xyzac-preview="machine" data-xyzac-model-source="linuxcnc-wasm" data-xyzac-mouse-controls="left-rotate-middle-zoom-right-pan-wheel-zoom" data-xyzac-model-id={model?.id ?? ""} data-xyzac-model-source-path={model?.source_path ?? ""} data-xyzac-model-source-hash={model?.source_hash ?? ""} data-xyzac-authoritative={String(visual.authoritative)} data-xyzac-tick={visual.tick} data-xyzac-state-hash={visual.stateHash} data-xyzac-active-segment={visual.activeSegmentId ?? ""} data-xyzac-joints={JSON.stringify(visual.joints)} data-xyzac-offsets={JSON.stringify(visual.offsets)} aria-label="XYZAC TRT Vismach machine model">
return <div className="three-viewer xyzac-machine-view" ref={host} data-xyzac-preview="machine" data-xyzac-model-source="linuxcnc-wasm" data-xyzac-mouse-controls="left-rotate-middle-zoom-right-pan-wheel-zoom" data-xyzac-model-id={model?.id ?? ""} data-xyzac-model-source-path={model?.source_path ?? ""} data-xyzac-model-source-hash={model?.source_hash ?? ""} data-xyzac-authoritative={String(visual.authoritative)} data-xyzac-tick={visual.tick} data-xyzac-state-hash={visual.stateHash} data-xyzac-active-segment={visual.activeSegmentId ?? ""} data-xyzac-joints={JSON.stringify(visual.joints)} data-xyzac-offsets={JSON.stringify(visual.offsets)} aria-label={`${coordinates} TRT Vismach machine model`}>
<div className="xyzac-view-controller xyzac-machine-controller" role="toolbar" aria-label="Machine 3D view controller">
{controllerButton("zoomIn", "Zoom in", "tool_zoomin.gif")}{controllerButton("zoomOut", "Zoom out", "tool_zoomout.gif")}
{controllerButton("panLeft", "Pan left", undefined, "\u2190")}{controllerButton("panRight", "Pan right", undefined, "\u2192")}
@@ -189,10 +193,11 @@ export function XyzacMachineView({ visual, toolpath, view = "p", zoom = 1, rotat
{controllerButton("rotateUp", "Rotate upward", undefined, "\u2b06")}{controllerButton("rotateDown", "Rotate downward", undefined, "\u2b07")}
{controllerButton("reset", "Reset machine view", undefined, "\u21ba")}{controllerButton("tool", "Tool close-up", "tool_axis_z.gif")}
</div>
<pre className="axis-preview-hud xyzac-machine-hud" aria-label="XYZAC authoritative visual state">{visual.authoritative ? `XYZAC TRT\n${visual.joints.map((value, index) => `${["X", "Y", "Z", "A", "C"][index]} ${value.toFixed(3)}`).join("\n")}\n${visual.joints.map((value, index) => `J${index} ${value.toFixed(3)}`).join(" ")}${showVelocity ? `\nV ${Number(visual.velocityMmMin ?? 0).toFixed(1)}` : ""}` : "XYZAC TRT\nWASM state pending"}</pre>
<pre className="axis-preview-hud xyzac-machine-hud" aria-label={`${coordinates} authoritative visual state`}>{visual.authoritative ? `${coordinates} TRT\n${visual.joints.map((value, index) => `${axisLabels[index] ?? `J${index}`} ${value.toFixed(3)}`).join("\n")}\n${visual.joints.map((value, index) => `J${index} ${value.toFixed(3)}`).join(" ")}${showVelocity ? `\nV ${Number(visual.velocityMmMin ?? 0).toFixed(1)}` : ""}` : `${coordinates} TRT\nWASM state pending`}</pre>
</div>;
}
export function XyzacMachineViewFromSnapshot({ snapshot, ...props }: Omit<Props, "visual"> & { snapshot: XyzacVisualSource | null | undefined }) {
return <XyzacMachineView visual={projectXyzacVisual(snapshot)} {...props} />;
const visual = projectXyzacVisual(snapshot);
return <XyzacMachineView key={visual.machineModel?.id ?? "machine-model-pending"} visual={visual} {...props} />;
}