Add RTCP simulation QA updates

This commit is contained in:
2026-06-22 09:30:27 -04:00
parent 61e2fe8441
commit ea8e10031b
51 changed files with 10008 additions and 178 deletions

View File

@@ -86,20 +86,18 @@ function renderPreview(element, state, dispatch) {
const tcp = state.tcpPose;
const tool = state.toolAxisVector;
element.innerHTML = `
<div class="program-path">${escapeHtml(state.activeProgram)}</div>
<canvas class="machine-preview" data-five-axis-canvas="true" aria-label="5 axis Three.js preview"></canvas>
if (element.dataset.previewMounted !== "true") {
element.innerHTML = `
<div class="program-path" data-preview-program-path></div>
<canvas class="toolpath-preview" data-five-axis-canvas="true" aria-label="5 axis toolpath preview"></canvas>
<div class="tool-preview-card" data-tool-preview="summary">
<strong>T${state.toolPreview.toolNumber}</strong>
<span>D ${formatNumber(state.toolPreview.diameter, 2)} ${state.toolPreview.units}</span>
<span>L ${formatNumber(state.toolPreview.length, 3)} ${state.toolPreview.units}</span>
<span>${state.toolPreview.holder}</span>
<strong data-tool-preview-number></strong>
<span data-tool-preview-diameter></span>
<span data-tool-preview-length></span>
<span data-tool-preview-holder></span>
</div>
<div class="rtcp-preview-badge" data-rtcp-preview-state="${state.rtcpState}">
RTCP ${state.rtcpState} | TCP ${formatNumber(tcp.x)} ${formatNumber(tcp.y)} ${formatNumber(tcp.z)}
| V ${formatNumber(tool.x, 3)} ${formatNumber(tool.y, 3)} ${formatNumber(tool.z, 3)}
</div>
<div class="preview-toolbar" data-preview-points="${state.preview.pathPoints}">
<div class="rtcp-preview-badge" data-rtcp-preview-state></div>
<div class="preview-toolbar" data-preview-points>
<button type="button" data-action="view-x">X</button>
<button type="button" data-action="view-y">Y</button>
<button type="button" data-action="view-z">Z</button>
@@ -108,18 +106,56 @@ function renderPreview(element, state, dispatch) {
</div>
`;
element.querySelector('[data-action="reset-view"]').addEventListener("click", () => {
dispatch({ type: "RESET_VIEW" });
});
element.querySelector('[data-action="clear-preview"]').addEventListener("click", () => {
dispatch({ type: "CLEAR_PREVIEW" });
});
for (const view of ["x", "y", "z"]) {
element.querySelector(`[data-action="view-${view}"]`).addEventListener("click", () => {
dispatch({ type: "SET_VIEW", view });
element.querySelector('[data-action="reset-view"]').addEventListener("click", () => {
dispatch({ type: "RESET_VIEW" });
});
element.querySelector('[data-action="clear-preview"]').addEventListener("click", () => {
dispatch({ type: "CLEAR_PREVIEW" });
});
for (const view of ["x", "y", "z"]) {
element.querySelector(`[data-action="view-${view}"]`).addEventListener("click", () => {
dispatch({ type: "SET_VIEW", view });
});
}
element.dataset.previewMounted = "true";
}
setText(element, "[data-preview-program-path]", state.activeProgram);
setText(element, "[data-tool-preview-number]", `T${state.toolPreview.toolNumber}`);
setText(element, "[data-tool-preview-diameter]", `D ${formatNumber(state.toolPreview.diameter, 2)} ${state.toolPreview.units}`);
setText(element, "[data-tool-preview-length]", `L ${formatNumber(state.toolPreview.length, 3)} ${state.toolPreview.units}`);
setText(element, "[data-tool-preview-holder]", state.toolPreview.holder);
const rtcpBadge = element.querySelector("[data-rtcp-preview-state]");
if (rtcpBadge) {
rtcpBadge.dataset.rtcpPreviewState = state.rtcpState;
rtcpBadge.textContent = [
`RTCP ${state.rtcpState}`,
`TCP ${formatNumber(tcp.x)} ${formatNumber(tcp.y)} ${formatNumber(tcp.z)}`,
`V ${formatNumber(tool.x, 3)} ${formatNumber(tool.y, 3)} ${formatNumber(tool.z, 3)}`,
].join(" | ");
}
const toolbar = element.querySelector("[data-preview-points]");
if (toolbar) {
toolbar.dataset.previewPoints = String(state.preview.pathPoints);
for (const view of ["x", "y", "z"]) {
toolbar.querySelector(`[data-action="view-${view}"]`)?.setAttribute(
"data-active",
state.preview.selectedView === view ? "true" : "false",
);
}
}
const canvas = element.querySelector("[data-five-axis-canvas]");
renderFiveAxisScene(canvas, state);
}
function setText(root, selector, value) {
const element = root.querySelector(selector);
if (element) {
element.textContent = value;
}
renderFiveAxisScene(element.querySelector("[data-five-axis-canvas]"), state);
}
function renderDro(element, state) {