✨ feat(status): 添加点动摇杆请求日志

* 将状态页直角坐标点动改为 XYZ/WPR 双摇杆布局
* 添加 MovePose 请求日志与清空入口,便于现场观察下发内容
* 扩展状态页集成测试,覆盖摇杆控件和日志资源
This commit is contained in:
2026-05-19 11:17:53 +08:00
parent 2cd42f04e5
commit 0952958af7
5 changed files with 1093 additions and 55 deletions

View File

@@ -0,0 +1,657 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>状态页摇杆点动 Demo</title>
<style>
:root {
color-scheme: light;
--bg: #f5f7fb;
--surface: #ffffff;
--line: #d8dee9;
--text: #172033;
--muted: #5b667a;
--accent: #007c89;
--accent-dark: #005d67;
--steel: #2f3b4f;
--steel-soft: #e7ebf1;
--good: #12805c;
--warn: #b7791f;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
background: var(--bg);
color: var(--text);
font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
font-size: 15px;
letter-spacing: 0;
}
header {
border-bottom: 1px solid var(--line);
background: var(--surface);
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: min(1180px, calc(100% - 32px));
margin: 0 auto;
padding: 18px 0;
}
h1 {
margin: 0;
font-size: 22px;
font-weight: 650;
}
.status-pill {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 36px;
padding: 0 12px;
border: 1px solid rgba(18, 128, 92, 0.28);
border-radius: 999px;
background: rgba(18, 128, 92, 0.08);
color: var(--good);
font-weight: 650;
}
.dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--good);
}
main {
width: min(1180px, calc(100% - 32px));
margin: 22px auto;
}
.summary {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.metric,
.panel {
border: 1px solid var(--line);
border-radius: 8px;
background: var(--surface);
}
.metric {
min-height: 86px;
padding: 14px;
}
.label {
color: var(--muted);
font-size: 13px;
}
.value {
margin-top: 8px;
overflow-wrap: anywhere;
font-size: 24px;
font-weight: 650;
}
.panel h2 {
margin: 0;
padding: 14px 16px;
border-bottom: 1px solid var(--line);
font-size: 16px;
font-weight: 650;
}
.jog-panel {
overflow: hidden;
}
.jog-body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 18px;
padding: 16px;
}
.jog-toolbar {
display: grid;
grid-template-columns: repeat(2, minmax(180px, 1fr)) minmax(220px, 1fr);
gap: 12px;
padding: 16px;
border-bottom: 1px solid var(--line);
background: #fbfcfe;
}
.step-field {
display: grid;
gap: 6px;
color: var(--muted);
font-size: 13px;
}
.step-field input {
min-height: 38px;
width: 100%;
padding: 0 10px;
border: 1px solid var(--line);
border-radius: 6px;
background: #ffffff;
color: var(--text);
font: inherit;
}
.jog-readout {
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 38px;
color: var(--muted);
font-family: Consolas, "Cascadia Mono", monospace;
text-align: right;
}
.stick-card {
min-width: 0;
border: 1px solid #ccd4df;
border-radius: 8px;
background: linear-gradient(180deg, #ffffff 0%, #f3f6fa 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.stick-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px 0;
}
.stick-title {
margin: 0;
font-size: 16px;
font-weight: 650;
}
.stick-unit {
color: var(--muted);
font-size: 13px;
font-family: Consolas, "Cascadia Mono", monospace;
}
.stick-console {
display: grid;
grid-template-columns: 72px 1fr 72px;
grid-template-rows: 72px 72px 72px;
gap: 8px;
width: min(100%, 344px);
margin: 18px auto 16px;
padding: 14px;
border: 1px solid #c2cad7;
border-radius: 999px;
background:
radial-gradient(circle at 50% 50%, #ffffff 0 26%, #e6ebf2 27% 48%, #cdd5e0 49% 50%, #edf1f6 51% 100%);
}
.axis-button {
min-width: 0;
min-height: 64px;
border: 1px solid #99a8ba;
border-radius: 999px;
background: linear-gradient(180deg, #ffffff 0%, #e5ebf2 100%);
color: var(--steel);
font: inherit;
font-weight: 750;
cursor: pointer;
touch-action: none;
user-select: none;
box-shadow: 0 2px 0 #b7c1ce;
}
.axis-button:hover,
.axis-button.active {
border-color: var(--accent);
background: linear-gradient(180deg, #10a4b3 0%, var(--accent) 100%);
color: #ffffff;
box-shadow: 0 2px 0 var(--accent-dark);
}
.axis-button:focus-visible {
outline: 3px solid rgba(0, 124, 137, 0.3);
outline-offset: 2px;
}
.axis-button.up {
grid-column: 2;
grid-row: 1;
}
.axis-button.left {
grid-column: 1;
grid-row: 2;
}
.axis-button.right {
grid-column: 3;
grid-row: 2;
}
.axis-button.down {
grid-column: 2;
grid-row: 3;
}
.center-stack {
display: grid;
grid-column: 2;
grid-row: 2;
grid-template-columns: 1fr 1fr;
gap: 6px;
place-items: center;
padding: 8px;
border-radius: 999px;
background: rgba(47, 59, 79, 0.08);
}
.mini-button {
min-width: 44px;
min-height: 44px;
border: 1px solid #99a8ba;
border-radius: 999px;
background: var(--surface);
color: var(--steel);
font: inherit;
font-weight: 750;
cursor: pointer;
touch-action: none;
user-select: none;
}
.mini-button:hover,
.mini-button.active {
border-color: var(--warn);
background: #b7791f;
color: #ffffff;
}
.hint-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding: 0 16px 16px;
color: var(--muted);
font-size: 13px;
text-align: center;
}
.hint-row span {
min-height: 28px;
padding: 5px 8px;
border-radius: 999px;
background: var(--steel-soft);
white-space: nowrap;
}
.log-panel {
margin-top: 16px;
overflow: hidden;
}
.log-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid var(--line);
}
.log-head h2 {
margin: 0;
padding: 0;
border-bottom: 0;
}
.clear-button {
min-height: 34px;
padding: 0 12px;
border: 1px solid var(--line);
border-radius: 6px;
background: #ffffff;
color: var(--muted);
font: inherit;
cursor: pointer;
}
.clear-button:hover {
border-color: var(--accent);
color: var(--accent);
}
.request-log {
display: grid;
gap: 8px;
max-height: 300px;
margin: 0;
padding: 12px 16px 16px;
overflow: auto;
background: #fbfcfe;
font-family: Consolas, "Cascadia Mono", monospace;
font-size: 13px;
}
.log-entry {
display: grid;
grid-template-columns: 86px 96px minmax(0, 1fr);
gap: 10px;
align-items: start;
padding: 9px 10px;
border: 1px solid #e1e7ef;
border-radius: 6px;
background: #ffffff;
}
.log-entry:first-child {
border-color: rgba(0, 124, 137, 0.35);
background: rgba(0, 124, 137, 0.04);
}
.log-time,
.log-axis {
color: var(--muted);
white-space: nowrap;
}
.log-payload {
overflow-wrap: anywhere;
color: var(--text);
}
@media (max-width: 920px) {
.summary,
.jog-body,
.jog-toolbar {
grid-template-columns: 1fr;
}
.jog-readout {
justify-content: flex-start;
text-align: left;
}
}
@media (max-width: 520px) {
.topbar {
align-items: flex-start;
flex-direction: column;
}
.stick-console {
grid-template-columns: 60px 1fr 60px;
grid-template-rows: 60px 60px 60px;
padding: 10px;
}
.axis-button {
min-height: 56px;
}
.log-entry {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<header>
<div class="topbar">
<h1>Flyshot Replacement 状态监控</h1>
<div class="status-pill"><span class="dot"></span><span>Connected</span></div>
</div>
</header>
<main>
<div class="summary">
<div class="metric">
<div class="label">机器人</div>
<div class="value">FANUC</div>
</div>
<div class="metric">
<div class="label">速度倍率</div>
<div class="value">0.70</div>
</div>
<div class="metric">
<div class="label">运动中</div>
<div class="value">否</div>
</div>
<div class="metric">
<div class="label">TCP 位姿</div>
<div class="value" style="font-size: 16px;">120.0, 80.0, 320.0</div>
</div>
</div>
<section class="panel jog-panel">
<h2>直角坐标点动</h2>
<div class="jog-toolbar">
<label class="step-field" for="linear-step">
<span>平移步长 mm</span>
<input id="linear-step" type="number" min="0.1" max="10" step="0.1" value="1">
</label>
<label class="step-field" for="angular-step">
<span>姿态步长 deg</span>
<input id="angular-step" type="number" min="0.1" max="10" step="0.1" value="1">
</label>
<div id="readout" class="jog-readout">等待点动输入</div>
</div>
<div class="jog-body">
<article class="stick-card">
<div class="stick-head">
<h3 class="stick-title">XYZ 平移摇杆</h3>
<span class="stick-unit">mm</span>
</div>
<div class="stick-console" aria-label="XYZ 平移摇杆">
<button class="axis-button up" type="button" data-axis="y" data-direction="1">Y+</button>
<button class="axis-button left" type="button" data-axis="x" data-direction="-1">X-</button>
<div class="center-stack">
<button class="mini-button" type="button" data-axis="z" data-direction="1">Z+</button>
<button class="mini-button" type="button" data-axis="z" data-direction="-1">Z-</button>
</div>
<button class="axis-button right" type="button" data-axis="x" data-direction="1">X+</button>
<button class="axis-button down" type="button" data-axis="y" data-direction="-1">Y-</button>
</div>
<div class="hint-row">
<span>X 左右</span>
<span>Y 上下</span>
<span>Z 中心</span>
</div>
</article>
<article class="stick-card">
<div class="stick-head">
<h3 class="stick-title">WPR 姿态摇杆</h3>
<span class="stick-unit">deg</span>
</div>
<div class="stick-console" aria-label="WPR 姿态摇杆">
<button class="axis-button up" type="button" data-axis="p" data-direction="1">P+</button>
<button class="axis-button left" type="button" data-axis="w" data-direction="-1">W-</button>
<div class="center-stack">
<button class="mini-button" type="button" data-axis="r" data-direction="-1">R-</button>
<button class="mini-button" type="button" data-axis="r" data-direction="1">R+</button>
</div>
<button class="axis-button right" type="button" data-axis="w" data-direction="1">W+</button>
<button class="axis-button down" type="button" data-axis="p" data-direction="-1">P-</button>
</div>
<div class="hint-row">
<span>W 左右</span>
<span>P 上下</span>
<span>R 中心</span>
</div>
</article>
</div>
</section>
<section class="panel log-panel">
<div class="log-head">
<h2>请求日志</h2>
<button id="clear-log" class="clear-button" type="button">清空</button>
</div>
<div id="request-log" class="request-log" aria-live="polite">
<div class="log-entry">
<span class="log-time">--:--:--</span>
<span class="log-axis">等待输入</span>
<span class="log-payload">按住任意摇杆方向后,这里会记录每次模拟 MovePose 请求。</span>
</div>
</div>
</section>
</main>
<script>
const readout = document.getElementById("readout");
const buttons = Array.from(document.querySelectorAll("[data-axis]"));
const linearStepInput = document.getElementById("linear-step");
const angularStepInput = document.getElementById("angular-step");
const requestLog = document.getElementById("request-log");
const clearLog = document.getElementById("clear-log");
const axisIndexes = { x: 0, y: 1, z: 2, w: 3, p: 4, r: 5 };
const poseKeys = ["x", "y", "z", "w", "p", "r"];
const maxLogCount = 80;
let timer = null;
let activeButton = null;
let requestCount = 0;
let currentPose = {
x: 120.0,
y: 80.0,
z: 320.0,
w: 0.0,
p: 45.0,
r: 0.0
};
function labelFor(button) {
const axis = button.dataset.axis.toUpperCase();
const sign = Number(button.dataset.direction) > 0 ? "+" : "-";
return axis + sign;
}
function clampStep(input, min, max) {
const value = Number(input.value);
if (!Number.isFinite(value)) {
input.value = String(min);
return min;
}
const clamped = Math.min(Math.max(value, min), max);
input.value = String(clamped);
return clamped;
}
function stepFor(axis) {
return axis === "x" || axis === "y" || axis === "z"
? clampStep(linearStepInput, 0.1, 10)
: clampStep(angularStepInput, 0.1, 10);
}
function buildMovePoseBody(button) {
const axis = button.dataset.axis;
const direction = Number(button.dataset.direction);
const key = poseKeys[axisIndexes[axis]];
currentPose[key] = Number((currentPose[key] + direction * stepFor(axis)).toFixed(6));
return {
x: currentPose.x,
y: currentPose.y,
z: currentPose.z,
w: currentPose.w,
p: currentPose.p,
r: currentPose.r
};
}
function appendLog(button, body) {
requestCount += 1;
if (requestCount === 1) {
requestLog.replaceChildren();
}
const row = document.createElement("div");
row.className = "log-entry";
const time = document.createElement("span");
time.className = "log-time";
time.textContent = new Date().toLocaleTimeString("zh-CN", { hour12: false });
const axis = document.createElement("span");
axis.className = "log-axis";
axis.textContent = "#" + String(requestCount).padStart(3, "0") + " " + labelFor(button);
const payload = document.createElement("span");
payload.className = "log-payload";
payload.textContent = "POST /move_pose/ " + JSON.stringify(body);
row.append(time, axis, payload);
requestLog.prepend(row);
while (requestLog.children.length > maxLogCount) {
requestLog.lastElementChild.remove();
}
}
function tick(button) {
const body = buildMovePoseBody(button);
readout.textContent = "模拟发送: " + labelFor(button) + " -> " + JSON.stringify(body);
appendLog(button, body);
}
function stop() {
if (timer !== null) {
window.clearInterval(timer);
timer = null;
}
if (activeButton) {
activeButton.classList.remove("active");
activeButton = null;
}
}
buttons.forEach(function (button) {
button.addEventListener("pointerdown", function (event) {
event.preventDefault();
stop();
activeButton = button;
button.classList.add("active");
tick(button);
timer = window.setInterval(function () {
tick(button);
}, 250);
});
button.addEventListener("pointerup", stop);
button.addEventListener("pointerleave", stop);
button.addEventListener("pointercancel", stop);
});
clearLog.addEventListener("click", function () {
requestCount = 0;
requestLog.innerHTML = '<div class="log-entry"><span class="log-time">--:--:--</span><span class="log-axis">已清空</span><span class="log-payload">新的点动请求会继续记录在这里。</span></div>';
readout.textContent = "等待点动输入";
});
window.addEventListener("blur", stop);
</script>
</body>
</html>

View File

@@ -6,6 +6,9 @@
--text: #172033;
--muted: #5b667a;
--accent: #007c89;
--accent-dark: #005d67;
--steel: #2f3b4f;
--steel-soft: #e7ebf1;
--good: #12805c;
--warn: #b7791f;
--bad: #b42318;
@@ -190,28 +193,27 @@ dd {
.jog-panel {
grid-column: 1 / -1;
overflow: hidden;
}
.jog-content {
padding: 16px;
}
.jog-settings {
.jog-toolbar {
display: grid;
grid-template-columns: repeat(2, minmax(180px, 1fr));
grid-template-columns: repeat(2, minmax(180px, 1fr)) minmax(220px, 1fr);
gap: 12px;
margin-bottom: 14px;
padding: 16px;
border-bottom: 1px solid var(--line);
background: #fbfcfe;
}
.jog-settings label {
.step-field {
display: grid;
gap: 6px;
color: var(--muted);
font-size: 13px;
}
.jog-settings input {
min-height: 36px;
.step-field input {
min-height: 38px;
width: 100%;
padding: 0 10px;
border: 1px solid var(--line);
@@ -221,35 +223,257 @@ dd {
font: inherit;
}
.jog-grid {
.jog-body {
display: grid;
grid-template-columns: repeat(6, minmax(64px, 1fr));
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 18px;
padding: 16px;
}
.stick-card {
min-width: 0;
border: 1px solid #ccd4df;
border-radius: 8px;
background: linear-gradient(180deg, #ffffff 0%, #f3f6fa 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.stick-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px 0;
}
.stick-head h3 {
margin: 0;
font-size: 16px;
font-weight: 650;
}
.stick-head span {
color: var(--muted);
font-family: Consolas, "Cascadia Mono", monospace;
font-size: 13px;
}
.stick-console {
display: grid;
grid-template-columns: 72px 1fr 72px;
grid-template-rows: 72px 72px 72px;
gap: 8px;
width: min(100%, 344px);
margin: 18px auto 16px;
padding: 14px;
border: 1px solid #c2cad7;
border-radius: 999px;
background:
radial-gradient(circle at 50% 50%, #ffffff 0 26%, #e6ebf2 27% 48%, #cdd5e0 49% 50%, #edf1f6 51% 100%);
}
.jog-button {
min-width: 44px;
min-height: 44px;
padding: 0 8px;
color: var(--steel);
font-weight: 650;
touch-action: none;
user-select: none;
}
.axis-button,
.mini-button {
border: 1px solid #99a8ba;
border-radius: 999px;
background: linear-gradient(180deg, #ffffff 0%, #e5ebf2 100%);
box-shadow: 0 2px 0 #b7c1ce;
}
.axis-button {
min-width: 0;
min-height: 64px;
padding: 0 8px;
}
.mini-button {
padding: 0 10px;
background: var(--surface);
}
.axis-button:hover,
.axis-button.active {
border-color: var(--accent);
background: linear-gradient(180deg, #10a4b3 0%, var(--accent) 100%);
color: #ffffff;
box-shadow: 0 2px 0 var(--accent-dark);
}
.mini-button:hover,
.mini-button.active {
border-color: var(--warn);
background: var(--warn);
color: #ffffff;
box-shadow: 0 2px 0 #8a5a13;
}
.jog-button:focus-visible {
outline: 3px solid rgba(0, 124, 137, 0.3);
outline-offset: 2px;
}
.jog-button.active {
filter: brightness(0.88);
transform: translateY(1px);
}
.axis-button.up {
grid-column: 2;
grid-row: 1;
}
.axis-button.left {
grid-column: 1;
grid-row: 2;
}
.axis-button.right {
grid-column: 3;
grid-row: 2;
}
.axis-button.down {
grid-column: 2;
grid-row: 3;
}
.center-stack {
display: grid;
grid-column: 2;
grid-row: 2;
grid-template-columns: 1fr 1fr;
gap: 6px;
place-items: center;
padding: 8px;
border-radius: 999px;
background: rgba(47, 59, 79, 0.08);
}
.hint-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding: 0 16px 16px;
color: var(--muted);
font-size: 13px;
text-align: center;
}
.hint-row span {
min-height: 28px;
padding: 5px 8px;
border-radius: 999px;
background: var(--steel-soft);
white-space: nowrap;
}
.jog-status {
min-height: 24px;
margin-top: 12px;
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 38px;
color: var(--muted);
font-family: Consolas, "Cascadia Mono", monospace;
text-align: right;
}
.jog-status.error {
color: var(--bad);
}
.log-panel {
margin: 0 16px 16px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 8px;
background: #fbfcfe;
}
.log-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
background: var(--surface);
}
.log-head h3 {
margin: 0;
font-size: 15px;
font-weight: 650;
}
.clear-button {
min-height: 34px;
padding: 0 12px;
border-color: var(--line);
background: #ffffff;
color: var(--muted);
}
.clear-button:hover {
border-color: var(--accent);
color: var(--accent);
}
.request-log {
display: grid;
gap: 8px;
max-height: 300px;
min-height: 54px;
margin: 0;
padding: 12px 14px 14px;
overflow: auto;
font-family: Consolas, "Cascadia Mono", monospace;
font-size: 13px;
}
.log-entry {
display: grid;
grid-template-columns: 88px 96px minmax(0, 1fr);
gap: 10px;
align-items: start;
padding: 9px 10px;
border: 1px solid #e1e7ef;
border-radius: 6px;
background: #ffffff;
}
.log-entry:first-child {
border-color: rgba(0, 124, 137, 0.35);
background: rgba(0, 124, 137, 0.04);
}
.log-entry.error {
border-color: rgba(180, 35, 24, 0.35);
background: rgba(180, 35, 24, 0.06);
}
.log-time,
.log-axis {
color: var(--muted);
white-space: nowrap;
}
.log-payload {
overflow-wrap: anywhere;
color: var(--text);
}
.log-empty {
color: var(--muted);
}
@media (max-width: 820px) {
.topbar {
align-items: flex-start;
@@ -261,9 +485,14 @@ dd {
grid-template-columns: 1fr;
}
.jog-settings,
.jog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
.jog-toolbar,
.jog-body {
grid-template-columns: 1fr;
}
.jog-status {
justify-content: flex-start;
text-align: left;
}
dl {
@@ -279,3 +508,19 @@ dd {
padding-top: 2px;
}
}
@media (max-width: 520px) {
.stick-console {
grid-template-columns: 60px 1fr 60px;
grid-template-rows: 60px 60px 60px;
padding: 10px;
}
.axis-button {
min-height: 56px;
}
.log-entry {
grid-template-columns: 1fr;
}
}

View File

@@ -19,6 +19,8 @@ const fields = {
linearStep: document.getElementById("linear-step"),
angularStep: document.getElementById("angular-step"),
jogStatus: document.getElementById("jog-status"),
requestLog: document.getElementById("request-log"),
clearLog: document.getElementById("clear-log"),
jogButtons: Array.from(document.querySelectorAll(".jog-button"))
};
@@ -36,9 +38,14 @@ const jogState = {
timer: null,
activeButton: null,
inFlight: false,
lastSnapshot: null
lastSnapshot: null,
sequence: 0,
logs: []
};
const maxJogLogs = 80;
const jogIntervalMs = 250;
function formatArray(values) {
if (!Array.isArray(values) || values.length === 0) {
return "--";
@@ -90,10 +97,10 @@ function clampStep(input, min, max) {
}
function getStepForAxis(axis) {
// 平移和姿态使用不同单位,但共享 0.1 到 10 的现场可调范围。
// 平移和姿态使用不同单位,但共享 0.1 到 20 的现场可调范围。
return axis === "x" || axis === "y" || axis === "z"
? clampStep(fields.linearStep, 0.1, 10)
: clampStep(fields.angularStep, 0.1, 10);
? clampStep(fields.linearStep, 0.1, 20)
: clampStep(fields.angularStep, 0.1, 20);
}
function setJogStatus(message, isError) {
@@ -101,6 +108,51 @@ function setJogStatus(message, isError) {
fields.jogStatus.classList.toggle("error", Boolean(isError));
}
function formatDirection(axis, direction) {
return `${axis.toUpperCase()}${direction > 0 ? "+" : "-"}`;
}
function renderJogLogs() {
fields.requestLog.replaceChildren();
if (jogState.logs.length === 0) {
const empty = document.createElement("div");
empty.className = "log-empty";
empty.textContent = "暂无请求记录";
fields.requestLog.appendChild(empty);
return;
}
jogState.logs.forEach(function (entry) {
const row = document.createElement("div");
row.className = `log-entry${entry.ok ? "" : " error"}`;
const time = document.createElement("span");
time.className = "log-time";
time.textContent = entry.time;
const axis = document.createElement("span");
axis.className = "log-axis";
axis.textContent = `#${entry.sequence} ${entry.direction}`;
const payload = document.createElement("span");
payload.className = "log-payload";
payload.textContent = `step=${entry.step} ${entry.unit}; body=${entry.body}; ${entry.result}`;
row.append(time, axis, payload);
fields.requestLog.appendChild(row);
});
}
function addJogLog(entry) {
jogState.logs.unshift(entry);
if (jogState.logs.length > maxJogLogs) {
jogState.logs.length = maxJogLogs;
}
renderJogLogs();
}
async function loadSnapshotForJog() {
const response = await fetch("/api/status/snapshot", { cache: "no-store" });
if (!response.ok) {
@@ -149,25 +201,46 @@ async function sendJog(button) {
}
jogState.inFlight = true;
const step = getStepForAxis(axis);
const directionLabel = formatDirection(axis, direction);
const sequence = ++jogState.sequence;
let bodyText = "{}";
let resultText = "";
let ok = false;
try {
const snapshot = await loadSnapshotForJog();
const pose = buildJogPose(snapshot, axis, direction);
bodyText = JSON.stringify(pose);
const response = await fetch("/move_pose/", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(pose)
body: bodyText
});
if (!response.ok) {
throw new Error(`MovePose 调用失败: HTTP ${response.status}`);
}
setJogStatus(`${axis.toUpperCase()}${direction > 0 ? "+" : "-"} 已发送`, false);
ok = true;
resultText = `HTTP ${response.status}`;
setJogStatus(`${directionLabel} 已发送`, false);
await refreshStatus();
} catch (error) {
setJogStatus(error instanceof Error ? error.message : "点动失败", true);
resultText = error instanceof Error ? error.message : "点动失败";
setJogStatus(resultText, true);
stopJog();
} finally {
addJogLog({
time: new Date().toLocaleTimeString(),
sequence,
direction: directionLabel,
step,
unit: axis === "x" || axis === "y" || axis === "z" ? "mm" : "deg",
body: bodyText,
result: resultText,
ok
});
jogState.inFlight = false;
}
}
@@ -185,7 +258,7 @@ function startJog(event) {
sendJog(button);
jogState.timer = window.setInterval(function () {
sendJog(button);
}, 250);
}, jogIntervalMs);
}
function stopJog() {
@@ -234,10 +307,14 @@ async function refreshStatus() {
fields.refresh.addEventListener("click", refreshStatus);
fields.linearStep.addEventListener("change", function () {
clampStep(fields.linearStep, 0.1, 10);
clampStep(fields.linearStep, 0.1, 20);
});
fields.angularStep.addEventListener("change", function () {
clampStep(fields.angularStep, 0.1, 10);
clampStep(fields.angularStep, 0.1, 20);
});
fields.clearLog.addEventListener("click", function () {
jogState.logs = [];
renderJogLogs();
});
fields.jogButtons.forEach(function (button) {
button.addEventListener("pointerdown", startJog);
@@ -251,5 +328,6 @@ window.addEventListener("keyup", function (event) {
stopJog();
}
});
renderJogLogs();
refreshStatus();
window.setInterval(refreshStatus, 2000);

View File

@@ -59,32 +59,69 @@
</section>
<section class="jog-panel">
<h2>直角坐标点动</h2>
<div class="jog-content">
<div class="jog-settings">
<label for="linear-step">
<span>平移步长 mm</span>
<input id="linear-step" type="number" min="0.1" max="10" step="0.1" value="1">
</label>
<label for="angular-step">
<span>姿态步长 deg</span>
<input id="angular-step" type="number" min="0.1" max="10" step="0.1" value="1">
</label>
<div class="jog-toolbar">
<label class="step-field" for="linear-step">
<span>平移步长 mm</span>
<input id="linear-step" type="number" min="0.1" max="20" step="0.1" value="1">
</label>
<label class="step-field" for="angular-step">
<span>姿态步长 deg</span>
<input id="angular-step" type="number" min="0.1" max="20" step="0.1" value="1">
</label>
<div id="jog-status" class="jog-status">等待点动输入</div>
</div>
<div class="jog-body">
<article class="stick-card">
<div class="stick-head">
<h3>XYZ 平移摇杆</h3>
<span>mm</span>
</div>
<div class="stick-console" aria-label="XYZ 平移摇杆">
<button class="jog-button axis-button up" type="button" data-axis="y" data-direction="1">Y+</button>
<button class="jog-button axis-button left" type="button" data-axis="x" data-direction="-1">X-</button>
<div class="center-stack">
<button class="jog-button mini-button" type="button" data-axis="z" data-direction="1">Z+</button>
<button class="jog-button mini-button" type="button" data-axis="z" data-direction="-1">Z-</button>
</div>
<button class="jog-button axis-button right" type="button" data-axis="x" data-direction="1">X+</button>
<button class="jog-button axis-button down" type="button" data-axis="y" data-direction="-1">Y-</button>
</div>
<div class="hint-row">
<span>X 左右</span>
<span>Y 上下</span>
<span>Z 中心</span>
</div>
</article>
<article class="stick-card">
<div class="stick-head">
<h3>WPR 姿态摇杆</h3>
<span>deg</span>
</div>
<div class="stick-console" aria-label="WPR 姿态摇杆">
<button class="jog-button axis-button up" type="button" data-axis="p" data-direction="1">P+</button>
<button class="jog-button axis-button left" type="button" data-axis="w" data-direction="-1">W-</button>
<div class="center-stack">
<button class="jog-button mini-button" type="button" data-axis="r" data-direction="-1">R-</button>
<button class="jog-button mini-button" type="button" data-axis="r" data-direction="1">R+</button>
</div>
<button class="jog-button axis-button right" type="button" data-axis="w" data-direction="1">W+</button>
<button class="jog-button axis-button down" type="button" data-axis="p" data-direction="-1">P-</button>
</div>
<div class="hint-row">
<span>W 左右</span>
<span>P 上下</span>
<span>R 中心</span>
</div>
</article>
</div>
<div class="log-panel">
<div class="log-head">
<h3>请求日志</h3>
<button id="clear-log" class="clear-button" type="button">清空</button>
</div>
<div class="jog-grid" aria-label="直角坐标点动按钮">
<button class="jog-button" type="button" data-axis="x" data-direction="-1">X-</button>
<button class="jog-button" type="button" data-axis="x" data-direction="1">X+</button>
<button class="jog-button" type="button" data-axis="y" data-direction="-1">Y-</button>
<button class="jog-button" type="button" data-axis="y" data-direction="1">Y+</button>
<button class="jog-button" type="button" data-axis="z" data-direction="-1">Z-</button>
<button class="jog-button" type="button" data-axis="z" data-direction="1">Z+</button>
<button class="jog-button" type="button" data-axis="w" data-direction="-1">W-</button>
<button class="jog-button" type="button" data-axis="w" data-direction="1">W+</button>
<button class="jog-button" type="button" data-axis="p" data-direction="-1">P-</button>
<button class="jog-button" type="button" data-axis="p" data-direction="1">P+</button>
<button class="jog-button" type="button" data-axis="r" data-direction="-1">R-</button>
<button class="jog-button" type="button" data-axis="r" data-direction="1">R+</button>
<div id="request-log" class="request-log" aria-live="polite">
<div class="log-empty">暂无请求记录</div>
</div>
<div id="jog-status" class="jog-status">--</div>
</div>
</section>
</div>

View File

@@ -35,7 +35,7 @@ public sealed class StatusEndpointTests(FlyshotServerFactory factory) : IClassFi
}
/// <summary>
/// 状态页应当提供直角坐标点动按钮,并复用现有 MovePose HTTP 接口。
/// 状态页应当提供双摇杆直角坐标点动面板,并复用现有 MovePose HTTP 接口。
/// </summary>
[Fact]
public async Task GetStatusPageAssets_ExposeCartesianJogControls()
@@ -47,24 +47,45 @@ public sealed class StatusEndpointTests(FlyshotServerFactory factory) : IClassFi
var html = await htmlResponse.Content.ReadAsStringAsync();
Assert.Contains("直角坐标点动", html, StringComparison.Ordinal);
Assert.Contains("XYZ 平移摇杆", html, StringComparison.Ordinal);
Assert.Contains("WPR 姿态摇杆", html, StringComparison.Ordinal);
Assert.Contains("id=\"linear-step\"", html, StringComparison.Ordinal);
Assert.Contains("id=\"angular-step\"", html, StringComparison.Ordinal);
Assert.Contains("max=\"20\"", html, StringComparison.Ordinal);
Assert.Contains("请求日志", html, StringComparison.Ordinal);
Assert.Contains("id=\"request-log\"", html, StringComparison.Ordinal);
Assert.Contains("id=\"clear-log\"", html, StringComparison.Ordinal);
foreach (var axis in new[] { "x", "y", "z", "w", "p", "r" })
foreach (var (axis, negative, positive) in new[]
{
("x", "X-", "X+"),
("y", "Y-", "Y+"),
("z", "Z-", "Z+"),
("w", "W-", "W+"),
("p", "P-", "P+"),
("r", "R-", "R+")
})
{
Assert.Contains($"data-axis=\"{axis}\"", html, StringComparison.Ordinal);
Assert.Contains($"data-axis=\"{axis}\" data-direction=\"1\"", html, StringComparison.Ordinal);
Assert.Contains($"data-axis=\"{axis}\" data-direction=\"-1\"", html, StringComparison.Ordinal);
Assert.Contains(negative, html, StringComparison.Ordinal);
Assert.Contains(positive, html, StringComparison.Ordinal);
}
using var scriptResponse = await client.GetAsync("/assets/status.js");
Assert.Equal(HttpStatusCode.OK, scriptResponse.StatusCode);
var script = await scriptResponse.Content.ReadAsStringAsync();
Assert.Contains("/api/status/snapshot", script, StringComparison.Ordinal);
Assert.Contains("/move_pose/", script, StringComparison.Ordinal);
Assert.Contains("cartesianPose", script, StringComparison.Ordinal);
Assert.Contains("pointerdown", script, StringComparison.Ordinal);
Assert.Contains("pointerup", script, StringComparison.Ordinal);
Assert.Contains("pointerleave", script, StringComparison.Ordinal);
Assert.Contains("blur", script, StringComparison.Ordinal);
Assert.Contains("request-log", script, StringComparison.Ordinal);
Assert.Contains("clear-log", script, StringComparison.Ordinal);
}
/// <summary>