✨ feat(status): 添加点动摇杆请求日志
* 将状态页直角坐标点动改为 XYZ/WPR 双摇杆布局 * 添加 MovePose 请求日志与清空入口,便于现场观察下发内容 * 扩展状态页集成测试,覆盖摇杆控件和日志资源
This commit is contained in:
657
docs/status-jog-joystick-demo.html
Normal file
657
docs/status-jog-joystick-demo.html
Normal 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>
|
||||||
@@ -6,6 +6,9 @@
|
|||||||
--text: #172033;
|
--text: #172033;
|
||||||
--muted: #5b667a;
|
--muted: #5b667a;
|
||||||
--accent: #007c89;
|
--accent: #007c89;
|
||||||
|
--accent-dark: #005d67;
|
||||||
|
--steel: #2f3b4f;
|
||||||
|
--steel-soft: #e7ebf1;
|
||||||
--good: #12805c;
|
--good: #12805c;
|
||||||
--warn: #b7791f;
|
--warn: #b7791f;
|
||||||
--bad: #b42318;
|
--bad: #b42318;
|
||||||
@@ -190,28 +193,27 @@ dd {
|
|||||||
|
|
||||||
.jog-panel {
|
.jog-panel {
|
||||||
grid-column: 1 / -1;
|
grid-column: 1 / -1;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jog-content {
|
.jog-toolbar {
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jog-settings {
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, minmax(180px, 1fr));
|
grid-template-columns: repeat(2, minmax(180px, 1fr)) minmax(220px, 1fr);
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
margin-bottom: 14px;
|
padding: 16px;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
background: #fbfcfe;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jog-settings label {
|
.step-field {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jog-settings input {
|
.step-field input {
|
||||||
min-height: 36px;
|
min-height: 38px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
border: 1px solid var(--line);
|
border: 1px solid var(--line);
|
||||||
@@ -221,35 +223,257 @@ dd {
|
|||||||
font: inherit;
|
font: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jog-grid {
|
.jog-body {
|
||||||
display: grid;
|
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;
|
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 {
|
.jog-button {
|
||||||
|
min-width: 44px;
|
||||||
min-height: 44px;
|
min-height: 44px;
|
||||||
padding: 0 8px;
|
color: var(--steel);
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
user-select: 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 {
|
.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 {
|
.jog-status {
|
||||||
min-height: 24px;
|
display: flex;
|
||||||
margin-top: 12px;
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
min-height: 38px;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-family: Consolas, "Cascadia Mono", monospace;
|
font-family: Consolas, "Cascadia Mono", monospace;
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jog-status.error {
|
.jog-status.error {
|
||||||
color: var(--bad);
|
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) {
|
@media (max-width: 820px) {
|
||||||
.topbar {
|
.topbar {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
@@ -261,9 +485,14 @@ dd {
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jog-settings,
|
.jog-toolbar,
|
||||||
.jog-grid {
|
.jog-body {
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jog-status {
|
||||||
|
justify-content: flex-start;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
dl {
|
dl {
|
||||||
@@ -279,3 +508,19 @@ dd {
|
|||||||
padding-top: 2px;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -19,6 +19,8 @@ const fields = {
|
|||||||
linearStep: document.getElementById("linear-step"),
|
linearStep: document.getElementById("linear-step"),
|
||||||
angularStep: document.getElementById("angular-step"),
|
angularStep: document.getElementById("angular-step"),
|
||||||
jogStatus: document.getElementById("jog-status"),
|
jogStatus: document.getElementById("jog-status"),
|
||||||
|
requestLog: document.getElementById("request-log"),
|
||||||
|
clearLog: document.getElementById("clear-log"),
|
||||||
jogButtons: Array.from(document.querySelectorAll(".jog-button"))
|
jogButtons: Array.from(document.querySelectorAll(".jog-button"))
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -36,9 +38,14 @@ const jogState = {
|
|||||||
timer: null,
|
timer: null,
|
||||||
activeButton: null,
|
activeButton: null,
|
||||||
inFlight: false,
|
inFlight: false,
|
||||||
lastSnapshot: null
|
lastSnapshot: null,
|
||||||
|
sequence: 0,
|
||||||
|
logs: []
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const maxJogLogs = 80;
|
||||||
|
const jogIntervalMs = 250;
|
||||||
|
|
||||||
function formatArray(values) {
|
function formatArray(values) {
|
||||||
if (!Array.isArray(values) || values.length === 0) {
|
if (!Array.isArray(values) || values.length === 0) {
|
||||||
return "--";
|
return "--";
|
||||||
@@ -90,10 +97,10 @@ function clampStep(input, min, max) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function getStepForAxis(axis) {
|
function getStepForAxis(axis) {
|
||||||
// 平移和姿态使用不同单位,但共享 0.1 到 10 的现场可调范围。
|
// 平移和姿态使用不同单位,但共享 0.1 到 20 的现场可调范围。
|
||||||
return axis === "x" || axis === "y" || axis === "z"
|
return axis === "x" || axis === "y" || axis === "z"
|
||||||
? clampStep(fields.linearStep, 0.1, 10)
|
? clampStep(fields.linearStep, 0.1, 20)
|
||||||
: clampStep(fields.angularStep, 0.1, 10);
|
: clampStep(fields.angularStep, 0.1, 20);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setJogStatus(message, isError) {
|
function setJogStatus(message, isError) {
|
||||||
@@ -101,6 +108,51 @@ function setJogStatus(message, isError) {
|
|||||||
fields.jogStatus.classList.toggle("error", Boolean(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() {
|
async function loadSnapshotForJog() {
|
||||||
const response = await fetch("/api/status/snapshot", { cache: "no-store" });
|
const response = await fetch("/api/status/snapshot", { cache: "no-store" });
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
@@ -149,25 +201,46 @@ async function sendJog(button) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
jogState.inFlight = true;
|
jogState.inFlight = true;
|
||||||
|
const step = getStepForAxis(axis);
|
||||||
|
const directionLabel = formatDirection(axis, direction);
|
||||||
|
const sequence = ++jogState.sequence;
|
||||||
|
let bodyText = "{}";
|
||||||
|
let resultText = "";
|
||||||
|
let ok = false;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const snapshot = await loadSnapshotForJog();
|
const snapshot = await loadSnapshotForJog();
|
||||||
const pose = buildJogPose(snapshot, axis, direction);
|
const pose = buildJogPose(snapshot, axis, direction);
|
||||||
|
bodyText = JSON.stringify(pose);
|
||||||
const response = await fetch("/move_pose/", {
|
const response = await fetch("/move_pose/", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: { "Content-Type": "application/json" },
|
headers: { "Content-Type": "application/json" },
|
||||||
body: JSON.stringify(pose)
|
body: bodyText
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new Error(`MovePose 调用失败: HTTP ${response.status}`);
|
throw new Error(`MovePose 调用失败: HTTP ${response.status}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
setJogStatus(`${axis.toUpperCase()}${direction > 0 ? "+" : "-"} 已发送`, false);
|
ok = true;
|
||||||
|
resultText = `HTTP ${response.status}`;
|
||||||
|
setJogStatus(`${directionLabel} 已发送`, false);
|
||||||
await refreshStatus();
|
await refreshStatus();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
setJogStatus(error instanceof Error ? error.message : "点动失败", true);
|
resultText = error instanceof Error ? error.message : "点动失败";
|
||||||
|
setJogStatus(resultText, true);
|
||||||
stopJog();
|
stopJog();
|
||||||
} finally {
|
} 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;
|
jogState.inFlight = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -185,7 +258,7 @@ function startJog(event) {
|
|||||||
sendJog(button);
|
sendJog(button);
|
||||||
jogState.timer = window.setInterval(function () {
|
jogState.timer = window.setInterval(function () {
|
||||||
sendJog(button);
|
sendJog(button);
|
||||||
}, 250);
|
}, jogIntervalMs);
|
||||||
}
|
}
|
||||||
|
|
||||||
function stopJog() {
|
function stopJog() {
|
||||||
@@ -234,10 +307,14 @@ async function refreshStatus() {
|
|||||||
|
|
||||||
fields.refresh.addEventListener("click", refreshStatus);
|
fields.refresh.addEventListener("click", refreshStatus);
|
||||||
fields.linearStep.addEventListener("change", function () {
|
fields.linearStep.addEventListener("change", function () {
|
||||||
clampStep(fields.linearStep, 0.1, 10);
|
clampStep(fields.linearStep, 0.1, 20);
|
||||||
});
|
});
|
||||||
fields.angularStep.addEventListener("change", function () {
|
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) {
|
fields.jogButtons.forEach(function (button) {
|
||||||
button.addEventListener("pointerdown", startJog);
|
button.addEventListener("pointerdown", startJog);
|
||||||
@@ -251,5 +328,6 @@ window.addEventListener("keyup", function (event) {
|
|||||||
stopJog();
|
stopJog();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
renderJogLogs();
|
||||||
refreshStatus();
|
refreshStatus();
|
||||||
window.setInterval(refreshStatus, 2000);
|
window.setInterval(refreshStatus, 2000);
|
||||||
|
|||||||
@@ -59,32 +59,69 @@
|
|||||||
</section>
|
</section>
|
||||||
<section class="jog-panel">
|
<section class="jog-panel">
|
||||||
<h2>直角坐标点动</h2>
|
<h2>直角坐标点动</h2>
|
||||||
<div class="jog-content">
|
<div class="jog-toolbar">
|
||||||
<div class="jog-settings">
|
<label class="step-field" for="linear-step">
|
||||||
<label for="linear-step">
|
<span>平移步长 mm</span>
|
||||||
<span>平移步长 mm</span>
|
<input id="linear-step" type="number" min="0.1" max="20" step="0.1" value="1">
|
||||||
<input id="linear-step" type="number" min="0.1" max="10" step="0.1" value="1">
|
</label>
|
||||||
</label>
|
<label class="step-field" for="angular-step">
|
||||||
<label for="angular-step">
|
<span>姿态步长 deg</span>
|
||||||
<span>姿态步长 deg</span>
|
<input id="angular-step" type="number" min="0.1" max="20" step="0.1" value="1">
|
||||||
<input id="angular-step" type="number" min="0.1" max="10" step="0.1" value="1">
|
</label>
|
||||||
</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>
|
||||||
<div class="jog-grid" aria-label="直角坐标点动按钮">
|
<div id="request-log" class="request-log" aria-live="polite">
|
||||||
<button class="jog-button" type="button" data-axis="x" data-direction="-1">X-</button>
|
<div class="log-empty">暂无请求记录</div>
|
||||||
<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>
|
</div>
|
||||||
<div id="jog-status" class="jog-status">--</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -35,7 +35,7 @@ public sealed class StatusEndpointTests(FlyshotServerFactory factory) : IClassFi
|
|||||||
}
|
}
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// 状态页应当提供直角坐标点动按钮,并复用现有 MovePose HTTP 接口。
|
/// 状态页应当提供双摇杆直角坐标点动面板,并复用现有 MovePose HTTP 接口。
|
||||||
/// </summary>
|
/// </summary>
|
||||||
[Fact]
|
[Fact]
|
||||||
public async Task GetStatusPageAssets_ExposeCartesianJogControls()
|
public async Task GetStatusPageAssets_ExposeCartesianJogControls()
|
||||||
@@ -47,24 +47,45 @@ public sealed class StatusEndpointTests(FlyshotServerFactory factory) : IClassFi
|
|||||||
|
|
||||||
var html = await htmlResponse.Content.ReadAsStringAsync();
|
var html = await htmlResponse.Content.ReadAsStringAsync();
|
||||||
Assert.Contains("直角坐标点动", html, StringComparison.Ordinal);
|
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=\"linear-step\"", html, StringComparison.Ordinal);
|
||||||
Assert.Contains("id=\"angular-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}\"", 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($"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");
|
using var scriptResponse = await client.GetAsync("/assets/status.js");
|
||||||
Assert.Equal(HttpStatusCode.OK, scriptResponse.StatusCode);
|
Assert.Equal(HttpStatusCode.OK, scriptResponse.StatusCode);
|
||||||
|
|
||||||
var script = await scriptResponse.Content.ReadAsStringAsync();
|
var script = await scriptResponse.Content.ReadAsStringAsync();
|
||||||
|
Assert.Contains("/api/status/snapshot", script, StringComparison.Ordinal);
|
||||||
Assert.Contains("/move_pose/", script, StringComparison.Ordinal);
|
Assert.Contains("/move_pose/", script, StringComparison.Ordinal);
|
||||||
Assert.Contains("cartesianPose", script, StringComparison.Ordinal);
|
Assert.Contains("cartesianPose", script, StringComparison.Ordinal);
|
||||||
Assert.Contains("pointerdown", script, StringComparison.Ordinal);
|
Assert.Contains("pointerdown", script, StringComparison.Ordinal);
|
||||||
Assert.Contains("pointerup", 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>
|
/// <summary>
|
||||||
|
|||||||
Reference in New Issue
Block a user