wangdequan/KDL_WORK
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload project files

Browse Source
This commit is contained in:
wangdequan
2026-06-28 08:20:33 +08:00
parent f0e96308d2
commit 84a5b54195
162 changed files with 14070 additions and 31381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
kdl-wasm/web/app/virtual-controller.css Normal file
View File

@@ -0,0 +1,185 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
color: #1f2933;
background: #eef2f4;
}
.workbench {
min-height: 100vh;
display: grid;
grid-template-columns: 240px minmax(320px, 1fr) 280px;
grid-template-rows: 48px minmax(280px, 1fr) 180px;
gap: 1px;
background: #c7d0d6;
}
.command-bar,
.object-tree,
.viewport,
.pendant,
.editor,
.bottom-panel {
background: #f8fafb;
}
.command-bar {
grid-column: 1 / 4;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 8px 12px;
}
button {
min-height: 32px;
border: 1px solid #9aa8b2;
background: #ffffff;
color: #1f2933;
border-radius: 4px;
}
.object-tree {
padding: 12px;
overflow: auto;
}
.object-tree h2,
.pendant h2 {
margin: 0 0 8px;
font-size: 16px;
}
.object-tree ul {
margin: 0;
padding-left: 18px;
line-height: 1.8;
}
.viewport {
position: relative;
overflow: hidden;
min-height: 320px;
background: linear-gradient(#f8fafb, #dfe7eb);
}
.viewport svg {
position: absolute;
inset: auto 24px 24px 24px;
height: 45%;
width: calc(100% - 48px);
}
.robot-arm {
position: absolute;
left: 12%;
top: 20%;
width: 62%;
height: 48%;
}
.joint {
position: absolute;
width: 18px;
height: 18px;
border-radius: 50%;
background: #334e68;
}
.link {
position: absolute;
height: 8px;
border-radius: 4px;
background: #627d98;
transform-origin: left center;
}
.j1 { left: 20px; top: 150px; }
.l1 { left: 35px; top: 155px; width: 115px; transform: rotate(-45deg); }
.j2 { left: 122px; top: 72px; }
.l2 { left: 137px; top: 78px; width: 120px; transform: rotate(20deg); }
.j3 { left: 250px; top: 115px; }
.l3 { left: 265px; top: 120px; width: 95px; transform: rotate(-15deg); }
.j4 { left: 356px; top: 92px; }
.pendant {
padding: 12px;
overflow: auto;
}
.pendant dl {
display: grid;
grid-template-columns: 84px 1fr;
gap: 8px;
margin: 0;
}
.pendant dt {
font-weight: 700;
}
.editor {
grid-column: 1 / 3;
padding: 12px;
overflow: auto;
}
.editor nav {
display: flex;
gap: 6px;
margin-bottom: 8px;
}
.editor pre {
margin: 0;
padding: 12px;
background: #1f2933;
color: #f8fafb;
overflow: auto;
}
.bottom-panel {
padding: 12px;
display: grid;
grid-template-columns: repeat(7, minmax(100px, 1fr));
gap: 8px;
overflow: auto;
}
.bottom-panel div {
border: 1px solid #c7d0d6;
padding: 8px;
background: #ffffff;
display: grid;
gap: 6px;
min-width: 0;
}
.bottom-panel span {
overflow-wrap: anywhere;
}
@media (max-width: 840px) {
.workbench {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.command-bar,
.editor {
grid-column: auto;
}
.bottom-panel {
grid-template-columns: 1fr 1fr;
}
.viewport {
min-height: 300px;
}
}

84
kdl-wasm/web/app/virtual-controller.html Normal file
View File

@@ -0,0 +1,84 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ABB120 Virtual Controller</title>
<link rel="stylesheet" href="./virtual-controller.css">
</head>
<body>
<main class="workbench" data-robot="abb_irb120_3_58">
<header class="command-bar">
<strong>ABB120 Station</strong>
<button type="button" data-command="load">Load</button>
<button type="button" data-command="run">Run</button>
<button type="button" data-command="pause">Pause</button>
<button type="button" data-command="step">Step</button>
<button type="button" data-command="stop">Stop</button>
<button type="button" data-command="reset">Reset</button>
<button type="button" data-command="export">Export</button>
</header>
<aside class="object-tree">
<h2>Station</h2>
<ul>
<li>Robot: abb_irb120_3_58</li>
<li>Tool: tool0</li>
<li>Frame: world</li>
<li>Path: pick_place</li>
<li>Operation: pick_op</li>
<li>Program: main</li>
<li>Reports</li>
</ul>
</aside>
<section class="viewport" aria-label="station viewport">
<div class="robot-arm">
<span class="joint j1"></span>
<span class="link l1"></span>
<span class="joint j2"></span>
<span class="link l2"></span>
<span class="joint j3"></span>
<span class="link l3"></span>
<span class="joint j4"></span>
</div>
<svg viewBox="0 0 480 240" role="img" aria-label="path trace">
<path d="M70 170 C150 80 260 80 410 150" fill="none" stroke="#1f7a8c" stroke-width="4"/>
<circle cx="70" cy="170" r="6"/>
<circle cx="250" cy="90" r="6"/>
<circle cx="410" cy="150" r="6"/>
</svg>
</section>
<aside class="pendant">
<h2>Controller</h2>
<dl>
<dt>State</dt><dd data-field="state">ready</dd>
<dt>Mode</dt><dd data-field="mode">auto</dd>
<dt>Motors</dt><dd data-field="motors">on</dd>
<dt>PC</dt><dd data-field="pc">main:0</dd>
<dt>Joints</dt><dd data-field="joints">[0, 0, 0, 0, 0, 0]</dd>
<dt>TCP</dt><dd data-field="tcp">[0, 0, 580, 0, 0, 0]</dd>
</dl>
</aside>
<section class="editor">
<nav>
<button type="button" data-tab="grl" aria-pressed="true">GRL</button>
<button type="button" data-tab="abb">ABB</button>
<button type="button" data-tab="fanuc">FANUC</button>
<button type="button" data-tab="kuka">KUKA</button>
</nav>
<pre data-field="editor">proc main()
run_path pick_place
end</pre>
</section>
<section class="bottom-panel">
<div><strong>Log</strong><span data-field="log">ready</span></div>
<div><strong>Diagnostics</strong><span data-field="diagnostics">ready</span></div>
<div><strong>IO</strong><span data-field="io">do[1]=false, di[1]=false</span><button type="button" data-io="di1">DI1</button></div>
<div><strong>Wait</strong><span data-field="wait">none</span></div>
<div><strong>Motion Queue</strong><span data-field="queue">empty</span></div>
<div><strong>Trace</strong><span data-field="trace">0 events</span></div>
<div><strong>Reports</strong><span data-field="reports">A120-REPORT</span></div>
</section>
</main>
<script src="./virtual-controller.js"></script>
</body>
</html>

140
kdl-wasm/web/app/virtual-controller.js Normal file
View File

@@ -0,0 +1,140 @@
(function () {
const root = document.querySelector(".workbench");
const fields = new Map(
Array.from(document.querySelectorAll("[data-field]")).map((item) => [item.dataset.field, item])
);
const tabButtons = Array.from(document.querySelectorAll("[data-tab]"));
const sources = {
grl: "proc main()\n run_path pick_place\nend",
abb: "MODULE A120Smoke\n PROC main()\n MoveJ home,v100,fine,tool0;\n ENDPROC\nENDMODULE",
fanuc: "/PROG A120SMOKE\n/MN\n 1:J P[1] 40% FINE ;\n/END",
kuka: "DEF A120SMOKE()\n PTP HOME\nEND"
};
const state = {
command: "ready",
mode: "auto",
motors: "on",
pc: 0,
joints: [0, 0, 0, 0, 0, 0],
tcp: [0, 0, 580, 0, 0, 0],
di1: false,
do1: false,
wait: "none",
queue: [],
trace: ["ready"],
diagnostics: ["ready"],
report: "A120-REPORT",
tab: "grl"
};
function formatArray(values) {
return `[${values.map((value) => Number(value).toFixed(value % 1 === 0 ? 0 : 2)).join(", ")}]`;
}
function setField(name, value) {
const item = fields.get(name);
if (item) item.textContent = value;
}
function render() {
root?.setAttribute("data-last-command", state.command);
root?.setAttribute("data-running", String(state.command === "running"));
setField("state", state.command);
setField("mode", state.mode);
setField("motors", state.motors);
setField("pc", `main:${state.pc}`);
setField("joints", formatArray(state.joints));
setField("tcp", formatArray(state.tcp));
setField("log", state.trace.at(-1) ?? "ready");
setField("diagnostics", state.diagnostics.at(-1) ?? "ready");
setField("io", `do[1]=${state.do1}, di[1]=${state.di1}`);
setField("wait", state.wait);
setField("queue", state.queue.length ? state.queue.join(" -> ") : "empty");
setField("trace", `${state.trace.length} events`);
setField("reports", state.report);
setField("editor", sources[state.tab]);
for (const button of tabButtons) {
button.setAttribute("aria-pressed", String(button.dataset.tab === state.tab));
}
}
function pushTrace(message) {
state.trace.push(message);
state.diagnostics.push(message);
}
function advanceProgram(stepSize) {
state.pc = Math.min(state.pc + stepSize, 4);
state.joints = state.joints.map((value, index) => Number((value + (index + 1) * 1.5 * stepSize).toFixed(2)));
state.tcp = [
Number((state.tcp[0] + 12 * stepSize).toFixed(2)),
Number((state.tcp[1] + 4 * stepSize).toFixed(2)),
state.tcp[2],
state.tcp[3],
state.tcp[4],
state.tcp[5]
];
}
function handleCommand(command) {
state.command = command === "run" ? "running" : command;
if (command === "load") {
state.pc = 0;
state.queue = ["movej home", "run_path pick_place"];
state.wait = "none";
pushTrace("program loaded");
} else if (command === "run") {
advanceProgram(2);
state.do1 = true;
state.wait = state.di1 ? "satisfied" : "waiting di[1]";
state.queue = state.di1 ? ["movel place"] : ["wait di[1]", "movel place"];
pushTrace(state.di1 ? "running path" : "waiting for di[1]");
} else if (command === "pause") {
pushTrace("program paused");
} else if (command === "step") {
state.command = "paused";
advanceProgram(1);
pushTrace(`stepped to main:${state.pc}`);
} else if (command === "stop") {
state.queue = [];
pushTrace("program stopped");
} else if (command === "reset") {
state.command = "ready";
state.pc = 0;
state.joints = [0, 0, 0, 0, 0, 0];
state.tcp = [0, 0, 580, 0, 0, 0];
state.do1 = false;
state.wait = "none";
state.queue = [];
pushTrace("controller reset");
} else if (command === "export") {
state.report = "A120-REPORT exported";
pushTrace("delivery package exported");
}
render();
}
for (const button of document.querySelectorAll("[data-command]")) {
button.addEventListener("click", () => handleCommand(button.dataset.command ?? "ready"));
}
for (const button of tabButtons) {
button.addEventListener("click", () => {
state.tab = button.dataset.tab ?? "grl";
pushTrace(`${state.tab.toUpperCase()} source selected`);
render();
});
}
document.querySelector("[data-io='di1']")?.addEventListener("click", () => {
state.di1 = !state.di1;
state.wait = state.di1 ? "satisfied" : "waiting di[1]";
pushTrace(`di[1]=${state.di1}`);
render();
});
render();
})();