meswork/smart_wasm
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改测试页

Browse Source
This commit is contained in:
zhangshun
2026-06-16 09:39:36 +08:00
parent b5382163e0
commit bcd94b3307
2 changed files with 709 additions and 646 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
public/index.html
View File

@@ -1,8 +1,8 @@
<!DOCTYPE html> <!doctype html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>smart_wasm Local Debug</title> <title>smart_wasm Local Debug</title>
<style> <style>
:root { :root {
@@ -22,10 +22,14 @@
body { body {
margin: 0; margin: 0;
font-family: "Segoe UI", "Microsoft YaHei", sans-serif; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
color: var(--text); color: var(--text);
background: background:
radial-gradient(circle at top left, rgba(215, 133, 47, 0.18), transparent 30%), radial-gradient(
circle at top left,
rgba(215, 133, 47, 0.18),
transparent 30%
),
linear-gradient(135deg, #f7f1e3 0%, #e8efe9 100%); linear-gradient(135deg, #f7f1e3 0%, #e8efe9 100%);
min-height: 100vh; min-height: 100vh;
} }
@@ -111,7 +115,10 @@
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 14px; border-radius: 14px;
padding: 14px; padding: 14px;
font: 13px/1.5 Consolas, "Courier New", monospace; font:
13px/1.5 Consolas,
'Courier New',
monospace;
color: var(--text); color: var(--text);
background: #fff; background: #fff;
} }
@@ -177,7 +184,10 @@
overflow: auto; overflow: auto;
background: #172126; background: #172126;
color: #e8f2ef; color: #e8f2ef;
font: 13px/1.5 Consolas, "Courier New", monospace; font:
13px/1.5 Consolas,
'Courier New',
monospace;
} }
.response-shell { .response-shell {
@@ -273,10 +283,23 @@
</style> </style>
</head> </head>
<body> <body>
<div style="width: 200px; height: 300px">
<iframe
id="ModelLibraryPanel_iframe"
title="模型库"
src="https://www.claudedt.com/dmtModelLibrary"
style="width: 100%; height: 100%; border: 0; display: block"
></iframe>
</div>
<div class="shell"> <div class="shell">
<section class="hero"> <section class="hero">
<h1>smart_wasm 本地调试页</h1> <h1>smart_wasm 本地调试页</h1>
<p>这个页面直接加载 <code>public/wasm/smart_math.js</code>，可以在本地验证 WASM 初始化、命令调用和返回 JSON。</p> <p>
这个页面直接加载
<code>public/wasm/smart_math.js</code>，可以在本地验证 WASM
初始化、命令调用和返回 JSON。
</p>
</section> </section>
<section class="layout"> <section class="layout">
@@ -287,42 +310,70 @@
</div> </div>
<div class="body"> <div class="body">
<label for="request">JSON Request</label> <label for="request">JSON Request</label>
<textarea id="request">{ <textarea id="request">
{
"msg": "list robots after init", "msg": "list robots after init",
"req_code": "CASE_LIST_001", "req_code": "CASE_LIST_001",
"req_from": "local_debug", "req_from": "local_debug",
"req_cmd": "Cmd_ListRobots", "req_cmd": "Cmd_ListRobots",
"req_param": {} "req_param": {}
}</textarea> }</textarea
>
<div class="sample-bar"> <div class="sample-bar">
<label for="sample-select">接口测试样例</label> <label for="sample-select">接口测试样例</label>
<div class="sample-row"> <div class="sample-row">
<select id="sample-select"> <select id="sample-select">
<option value="listRobots">机器人列表 Cmd_ListRobots</option> <option value="listRobots">机器人列表 Cmd_ListRobots</option>
<option value="kinematicsForwardZero">运动学正解 Cmd_Kinematics_forward_pose_str</option> <option value="kinematicsForwardZero">
<option value="kinematicsForwardAllJoints">全关节正解 Cmd_Kinematics_forward_all_joints</option> 运动学正解 Cmd_Kinematics_forward_pose_str
</option>
<option value="kinematicsForwardAllJoints">
全关节正解 Cmd_Kinematics_forward_all_joints
</option>
<option value="spcBasic">SPC 计算 Cmd_Spc</option> <option value="spcBasic">SPC 计算 Cmd_Spc</option>
<option value="fourBarValid">四连杆有效样例 Cmd_FourBar_CrankSlider</option> <option value="fourBarValid">
<option value="fourBarInvalid">四连杆异常样例 Cmd_FourBar_CrankSlider</option> 四连杆有效样例 Cmd_FourBar_CrankSlider
<option value="quadrupedPoints">四足姿态点位 Cmd_QuadrupedRobot_CalculateAllPointsFromMotorAngles</option> </option>
<option value="quadrupedForwardGait">四足步态正解 Cmd_QuadrupedRobot_PerformForwardKinematics</option> <option value="fourBarInvalid">
四连杆异常样例 Cmd_FourBar_CrankSlider
</option>
<option value="quadrupedPoints">
四足姿态点位
Cmd_QuadrupedRobot_CalculateAllPointsFromMotorAngles
</option>
<option value="quadrupedForwardGait">
四足步态正解 Cmd_QuadrupedRobot_PerformForwardKinematics
</option>
</select> </select>
</div> </div>
<div class="sample-row"> <div class="sample-row">
<button class="secondary" id="sample-btn" type="button">填充选中样例</button> <button class="secondary" id="sample-btn" type="button">
填充选中样例
</button>
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<button class="primary" id="init-btn" type="button">初始化 WASM</button> <button class="primary" id="init-btn" type="button">
<button class="primary" id="run-btn" type="button">发送请求</button> 初始化 WASM
<button class="secondary" id="clear-btn" type="button">清空输出</button> </button>
<button class="primary" id="run-btn" type="button">
发送请求
</button>
<button class="secondary" id="clear-btn" type="button">
清空输出
</button>
</div> </div>
<div class="tips"> <div class="tips">
<div>1. 先点 <code>初始化 WASM</code>，会调用 <code>_init_func()</code>。</div> <div>
<div>2. 再点 <code>发送请求</code>，会调用 <code>_func()</code>。</div> 1. 先点 <code>初始化 WASM</code>，会调用
<code>_init_func()</code>。
</div>
<div>
2. 再点 <code>发送请求</code>，会调用 <code>_func()</code>。
</div>
<div>3. 默认地址使用 <code>http://localhost:8080/</code>。</div> <div>3. 默认地址使用 <code>http://localhost:8080/</code>。</div>
</div> </div>
</div> </div>
@@ -362,137 +413,136 @@
<script> <script>
let wasmModule = null; let wasmModule = null;
const moduleStatus = document.getElementById("module-status"); const moduleStatus = document.getElementById('module-status');
const requestStatus = document.getElementById("request-status"); const requestStatus = document.getElementById('request-status');
const requestBox = document.getElementById("request"); const requestBox = document.getElementById('request');
const output = document.getElementById("output"); const output = document.getElementById('output');
const sampleSelect = document.getElementById("sample-select"); const sampleSelect = document.getElementById('sample-select');
const metaSuccess = document.getElementById("meta-success"); const metaSuccess = document.getElementById('meta-success');
const metaCode = document.getElementById("meta-code"); const metaCode = document.getElementById('meta-code');
const metaCmd = document.getElementById("meta-cmd"); const metaCmd = document.getElementById('meta-cmd');
const metaReq = document.getElementById("meta-req"); const metaReq = document.getElementById('meta-req');
const requestSamples = { const requestSamples = {
listRobots: { listRobots: {
msg: "list robots after init", msg: 'list robots after init',
req_code: "CASE_LIST_001", req_code: 'CASE_LIST_001',
req_from: "local_debug", req_from: 'local_debug',
req_cmd: "Cmd_ListRobots", req_cmd: 'Cmd_ListRobots',
req_param: { req_param: {
detail: true detail: true,
} },
}, },
kinematicsForwardZero: { kinematicsForwardZero: {
msg: "fk zero pose", msg: 'fk zero pose',
req_code: "CASE_FK_001", req_code: 'CASE_FK_001',
req_from: "local_debug", req_from: 'local_debug',
req_cmd: "Cmd_Kinematics_forward_pose_str", req_cmd: 'Cmd_Kinematics_forward_pose_str',
req_param: { req_param: {
robot_uuid: "abb_irb120_3_58", robot_uuid: 'abb_irb120_3_58',
q_init_str: "0,0,0,0,0,0" q_init_str: '0,0,0,0,0,0',
} },
}, },
kinematicsForwardAllJoints: { kinematicsForwardAllJoints: {
msg: "fk all joints path", msg: 'fk all joints path',
req_code: "CASE_FK_ALL_001", req_code: 'CASE_FK_ALL_001',
req_from: "local_debug", req_from: 'local_debug',
req_cmd: "Cmd_Kinematics_forward_all_joints", req_cmd: 'Cmd_Kinematics_forward_all_joints',
req_param: { req_param: {
robot_uuid: "abb_irb120_3_58", robot_uuid: 'abb_irb120_3_58',
joints_str: "0,0,0,0,0,0;10,20,30,40,50,60" joints_str: '0,0,0,0,0,0;10,20,30,40,50,60',
} },
}, },
spcBasic: { spcBasic: {
msg: "spc basic 5x30", msg: 'spc basic 5x30',
req_code: "CASE_SPC_001", req_code: 'CASE_SPC_001',
req_from: "local_debug", req_from: 'local_debug',
req_cmd: "Cmd_Spc", req_cmd: 'Cmd_Spc',
req_param: { req_param: {
n: 5, n: 5,
k: 30, k: 30,
usl: 1.7, usl: 1.7,
lsl: 1.5, lsl: 1.5,
x: [ x: [
1.55, 1.58, 1.61, 1.6, 1.6, 1.58, 1.63, 1.63, 1.62, 1.63, 1.55, 1.58, 1.61, 1.6, 1.6, 1.58, 1.63, 1.63, 1.62, 1.63, 1.62,
1.62, 1.63, 1.62, 1.59, 1.58, 1.58, 1.6, 1.61, 1.62, 1.63, 1.63, 1.62, 1.59, 1.58, 1.58, 1.6, 1.61, 1.62, 1.63, 1.58, 1.64,
1.58, 1.64, 1.63, 1.62, 1.62, 1.62, 1.62, 1.63, 1.61, 1.57, 1.63, 1.62, 1.62, 1.62, 1.62, 1.63, 1.61, 1.57, 1.64, 1.62, 1.61,
1.64, 1.62, 1.61, 1.6, 1.58, 1.57, 1.59, 1.61, 1.62, 1.63, 1.6, 1.58, 1.57, 1.59, 1.61, 1.62, 1.63, 1.58, 1.61, 1.6, 1.62,
1.58, 1.61, 1.6, 1.62, 1.63, 1.6, 1.61, 1.64, 1.64, 1.63, 1.63, 1.6, 1.61, 1.64, 1.64, 1.63, 1.58, 1.6, 1.62, 1.63, 1.65,
1.58, 1.6, 1.62, 1.63, 1.65, 1.62, 1.58, 1.59, 1.57, 1.58, 1.62, 1.58, 1.59, 1.57, 1.58, 1.57, 1.57, 1.58, 1.59, 1.64, 1.61,
1.57, 1.57, 1.58, 1.59, 1.64, 1.61, 1.64, 1.62, 1.6, 1.59, 1.64, 1.62, 1.6, 1.59, 1.65, 1.62, 1.62, 1.6, 1.58, 1.57, 1.59,
1.65, 1.62, 1.62, 1.6, 1.58, 1.57, 1.59, 1.57, 1.59, 1.62, 1.57, 1.59, 1.62, 1.56, 1.57, 1.57, 1.61, 1.62, 1.56, 1.58, 1.59,
1.56, 1.57, 1.57, 1.61, 1.62, 1.56, 1.58, 1.59, 1.6, 1.62, 1.6, 1.62, 1.58, 1.6, 1.6, 1.62, 1.63, 1.58, 1.59, 1.6, 1.63,
1.58, 1.6, 1.6, 1.62, 1.63, 1.58, 1.59, 1.6, 1.63, 1.62, 1.62, 1.58, 1.59, 1.62, 1.63, 1.64, 1.58, 1.59, 1.62, 1.63, 1.61,
1.58, 1.59, 1.62, 1.63, 1.64, 1.58, 1.59, 1.62, 1.63, 1.61, 1.58, 1.59, 1.6, 1.61, 1.63, 1.57, 1.59, 1.61, 1.61, 1.62, 1.58,
1.58, 1.59, 1.6, 1.61, 1.63, 1.57, 1.59, 1.61, 1.61, 1.62, 1.58, 1.6, 1.61, 1.63, 1.62, 1.58, 1.58, 1.58, 1.57, 1.63, 1.59,
1.58, 1.58, 1.6, 1.61, 1.63, 1.62, 1.58, 1.58, 1.58, 1.57, 1.57, 1.58, 1.57, 1.58, 1.62, 1.61, 1.63, 1.61, 1.58, 1.57, 1.59,
1.63, 1.59, 1.57, 1.58, 1.57, 1.58, 1.62, 1.61, 1.63, 1.61, 1.6, 1.62, 1.62, 1.6, 1.6, 1.57, 1.57,
1.58, 1.57, 1.59, 1.6, 1.62, 1.62, 1.6, 1.6, 1.57, 1.57 ],
] },
}
}, },
fourBarValid: { fourBarValid: {
msg: "fourbar valid", msg: 'fourbar valid',
req_code: "CASE_FB_001", req_code: 'CASE_FB_001',
req_from: "local_debug", req_from: 'local_debug',
req_cmd: "Cmd_FourBar_CrankSlider", req_cmd: 'Cmd_FourBar_CrankSlider',
req_param: { req_param: {
L_AB: 0.5, L_AB: 0.5,
L_BS: 2.0, L_BS: 2.0,
S_OFS: 0.0, S_OFS: 0.0,
angleDeg: 45.0 angleDeg: 45.0,
} },
}, },
fourBarInvalid: { fourBarInvalid: {
msg: "fourbar invalid", msg: 'fourbar invalid',
req_code: "CASE_FB_002", req_code: 'CASE_FB_002',
req_from: "local_debug", req_from: 'local_debug',
req_cmd: "Cmd_FourBar_CrankSlider", req_cmd: 'Cmd_FourBar_CrankSlider',
req_param: { req_param: {
L_AB: 0.0, L_AB: 0.0,
L_BS: 0.2, L_BS: 0.2,
S_OFS: 0.5, S_OFS: 0.5,
angleDeg: 30.0 angleDeg: 30.0,
} },
}, },
quadrupedPoints: { quadrupedPoints: {
msg: "quadruped points from motor angles", msg: 'quadruped points from motor angles',
req_code: "CASE_QP_001", req_code: 'CASE_QP_001',
req_from: "local_debug", req_from: 'local_debug',
req_cmd: "Cmd_QuadrupedRobot_CalculateAllPointsFromMotorAngles", req_cmd: 'Cmd_QuadrupedRobot_CalculateAllPointsFromMotorAngles',
req_param: { req_param: {
Param: { Param: {
LF: { LF: {
thigh_angle_deg: -37.4784578338516, thigh_angle_deg: -37.4784578338516,
shank_angle_deg: -22.4917532451628, shank_angle_deg: -22.4917532451628,
ankle_angle_deg: 0.0 ankle_angle_deg: 0.0,
}, },
LH: { LH: {
thigh_angle_deg: -34.0564623655754, thigh_angle_deg: -34.0564623655754,
shank_angle_deg: -22.1353106546916, shank_angle_deg: -22.1353106546916,
ankle_angle_deg: 0.0 ankle_angle_deg: 0.0,
}, },
RF: { RF: {
thigh_angle_deg: 34.0564623655754, thigh_angle_deg: 34.0564623655754,
shank_angle_deg: 22.1353106546916, shank_angle_deg: 22.1353106546916,
ankle_angle_deg: 0.0 ankle_angle_deg: 0.0,
}, },
RH: { RH: {
thigh_angle_deg: 37.4784578338516, thigh_angle_deg: 37.4784578338516,
shank_angle_deg: 22.4917532451628, shank_angle_deg: 22.4917532451628,
ankle_angle_deg: 0.0 ankle_angle_deg: 0.0,
} },
} },
} },
}, },
quadrupedForwardGait: { quadrupedForwardGait: {
msg: "quadruped forward gait", msg: 'quadruped forward gait',
req_code: "CASE_QP_002", req_code: 'CASE_QP_002',
req_from: "local_debug", req_from: 'local_debug',
req_cmd: "Cmd_QuadrupedRobot_PerformForwardKinematics", req_cmd: 'Cmd_QuadrupedRobot_PerformForwardKinematics',
req_param: { req_param: {
GaitInfo: { GaitInfo: {
GaitType: "trot", GaitType: 'trot',
Period: 0.8, Period: 0.8,
Frequency: 50.0, Frequency: 50.0,
StepTime: 0.02, StepTime: 0.02,
@@ -501,7 +551,7 @@
SupportRatio: 0.5, SupportRatio: 0.5,
SwingRatio: 0.5, SwingRatio: 0.5,
TotalFrames: 40, TotalFrames: 40,
TotalTime: 0.8 TotalTime: 0.8,
}, },
SystemParameters: { SystemParameters: {
A_x: 0.0, A_x: 0.0,
@@ -528,38 +578,43 @@
C4_D2_Offset: 18.0, C4_D2_Offset: 18.0,
ThighMotorReduction: 1.0, ThighMotorReduction: 1.0,
ShankMotorReduction: 1.0, ShankMotorReduction: 1.0,
AnkleMotorReduction: 1.0 AnkleMotorReduction: 1.0,
} },
} },
} },
}; };
function escapeHtml(value) { function escapeHtml(value) {
return value return value
.replaceAll("&", "&amp;") .replaceAll('&', '&amp;')
.replaceAll("<", "&lt;") .replaceAll('<', '&lt;')
.replaceAll(">", "&gt;"); .replaceAll('>', '&gt;');
} }
function resetMeta() { function resetMeta() {
metaSuccess.textContent = "未执行"; metaSuccess.textContent = '未执行';
metaSuccess.className = "response-meta-value"; metaSuccess.className = 'response-meta-value';
metaCode.textContent = "-"; metaCode.textContent = '-';
metaCode.className = "response-meta-value"; metaCode.className = 'response-meta-value';
metaCmd.textContent = "-"; metaCmd.textContent = '-';
metaReq.textContent = "-"; metaReq.textContent = '-';
} }
function setMetaFromJson(data) { function setMetaFromJson(data) {
const success = data && typeof data.success === "boolean" ? data.success : null; const success =
metaSuccess.textContent = success === null ? "未知" : (success ? "成功" : "失败"); data && typeof data.success === 'boolean' ? data.success : null;
metaSuccess.className = "response-meta-value " + (success ? "is-ok" : success === false ? "is-error" : ""); metaSuccess.textContent =
success === null ? '未知' : success ? '成功' : '失败';
metaSuccess.className =
'response-meta-value ' +
(success ? 'is-ok' : success === false ? 'is-error' : '');
metaCode.textContent = data && "code" in data ? String(data.code) : "-"; metaCode.textContent = data && 'code' in data ? String(data.code) : '-';
metaCode.className = "response-meta-value " + (success === false ? "is-error" : ""); metaCode.className =
'response-meta-value ' + (success === false ? 'is-error' : '');
metaCmd.textContent = data && data.req_cmd ? data.req_cmd : "-"; metaCmd.textContent = data && data.req_cmd ? data.req_cmd : '-';
metaReq.textContent = data && data.req_code ? data.req_code : "-"; metaReq.textContent = data && data.req_code ? data.req_code : '-';
} }
function highlightJson(value) { function highlightJson(value) {
@@ -574,21 +629,21 @@
return `<span class="json-string">${stringToken}</span>`; return `<span class="json-string">${stringToken}</span>`;
} }
if (literalToken === "true" || literalToken === "false") { if (literalToken === 'true' || literalToken === 'false') {
return `<span class="json-boolean">${match}</span>`; return `<span class="json-boolean">${match}</span>`;
} }
if (literalToken === "null") { if (literalToken === 'null') {
return `<span class="json-null">${match}</span>`; return `<span class="json-null">${match}</span>`;
} }
return `<span class="json-number">${match}</span>`; return `<span class="json-number">${match}</span>`;
} },
); );
} }
function renderOutput(value) { function renderOutput(value) {
if (typeof value !== "string") { if (typeof value !== 'string') {
const jsonText = JSON.stringify(value, null, 2); const jsonText = JSON.stringify(value, null, 2);
output.innerHTML = highlightJson(jsonText); output.innerHTML = highlightJson(jsonText);
setMetaFromJson(value); setMetaFromJson(value);
@@ -625,10 +680,10 @@
return wasmModule; return wasmModule;
} }
requestStatus.textContent = "正在加载模块"; requestStatus.textContent = '正在加载模块';
wasmModule = await createSmartMathModule(); wasmModule = await createSmartMathModule();
moduleStatus.textContent = "WASM 已加载"; moduleStatus.textContent = 'WASM 已加载';
requestStatus.textContent = "模块加载完成"; requestStatus.textContent = '模块加载完成';
return wasmModule; return wasmModule;
} }
@@ -640,13 +695,15 @@
responsePtr = mod._init_func(); responsePtr = mod._init_func();
const text = mod.UTF8ToString(responsePtr); const text = mod.UTF8ToString(responsePtr);
renderOutput(text); renderOutput(text);
moduleStatus.textContent = "业务接口已初始化"; moduleStatus.textContent = '业务接口已初始化';
requestStatus.textContent = "初始化成功"; requestStatus.textContent = '初始化成功';
} catch (error) { } catch (error) {
moduleStatus.textContent = "初始化失败"; moduleStatus.textContent = '初始化失败';
requestStatus.textContent = "初始化失败"; requestStatus.textContent = '初始化失败';
resetMeta(); resetMeta();
output.textContent = String(error && error.stack ? error.stack : error); output.textContent = String(
error && error.stack ? error.stack : error,
);
} finally { } finally {
if (responsePtr) { if (responsePtr) {
mod._smart_free_string(responsePtr); mod._smart_free_string(responsePtr);
@@ -666,11 +723,13 @@
responsePtr = mod._func(requestPtr); responsePtr = mod._func(requestPtr);
const text = mod.UTF8ToString(responsePtr); const text = mod.UTF8ToString(responsePtr);
renderOutput(text); renderOutput(text);
requestStatus.textContent = "请求成功"; requestStatus.textContent = '请求成功';
} catch (error) { } catch (error) {
requestStatus.textContent = "请求失败"; requestStatus.textContent = '请求失败';
resetMeta(); resetMeta();
output.textContent = String(error && error.stack ? error.stack : error); output.textContent = String(
error && error.stack ? error.stack : error,
);
} finally { } finally {
if (requestPtr) { if (requestPtr) {
mod._free(requestPtr); mod._free(requestPtr);
@@ -681,13 +740,17 @@
} }
} }
document.getElementById("init-btn").addEventListener("click", initializeBusinessApi); document
document.getElementById("run-btn").addEventListener("click", runRequest); .getElementById('init-btn')
document.getElementById("sample-btn").addEventListener("click", loadSelectedSample); .addEventListener('click', initializeBusinessApi);
document.getElementById("clear-btn").addEventListener("click", () => { document.getElementById('run-btn').addEventListener('click', runRequest);
requestStatus.textContent = "等待操作"; document
.getElementById('sample-btn')
.addEventListener('click', loadSelectedSample);
document.getElementById('clear-btn').addEventListener('click', () => {
requestStatus.textContent = '等待操作';
resetMeta(); resetMeta();
output.textContent = "No output yet."; output.textContent = 'No output yet.';
}); });
resetMeta(); resetMeta();

6
public/smart_test.html
View File

@@ -1,8 +1,8 @@
<!DOCTYPE html> <!doctype html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta http-equiv="refresh" content="0; url=./index.html"> <meta http-equiv="refresh" content="0; url=./index.html" />
<title>Redirecting</title> <title>Redirecting</title>
</head> </head>
<body> <body>