Add RTCP simulation QA updates
This commit is contained in:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user