✨ 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;
|
||||
--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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user