658 lines
17 KiB
HTML
658 lines
17 KiB
HTML
<!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>
|