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

355
public/index.html
View File

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

14
public/smart_test.html
View File

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