543 lines
24 KiB
HTML
543 lines
24 KiB
HTML
<!doctype html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>LiDAR Manager</title>
|
|
<link rel="stylesheet" href="/style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="shell">
|
|
<aside class="sidebar">
|
|
<div class="brand">
|
|
<div class="brandIcon">R</div>
|
|
<div class="brandText">
|
|
<div class="brandTitle">PhenikaaX</div>
|
|
<div class="brandSub">RobotApp</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navTitle">WORKSPACE</div>
|
|
<nav class="nav">
|
|
<a class="navItem active" href="#" data-page="overview" aria-current="page">
|
|
<span class="navDot"></span>
|
|
Tổng quan
|
|
</a>
|
|
<a class="navItem" href="#" data-page="config">
|
|
<span class="navDot"></span>
|
|
Cấu hình
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="sidebarFooter">
|
|
<div class="statusBadge">
|
|
<span class="statusLed"></span>
|
|
<span id="status" class="statusText">…</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="body">
|
|
<header class="topbar">
|
|
<div class="topbarTitle">
|
|
<div class="kicker">PhenikaaX Robotics</div>
|
|
<div class="pageTitle">Cấu Hình</div>
|
|
</div>
|
|
<div class="topbarActions">
|
|
<button id="refreshBtn" type="button" class="btn subtle">Tải lại</button>
|
|
<button id="saveLayoutBtn" class="btn primary" type="button">Lưu layout</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="content">
|
|
<div class="page" id="pageOverview" data-page-content="overview" hidden>
|
|
<section class="card">
|
|
<div class="cardHeader">
|
|
<div>
|
|
<div class="cardTitle">Phần mềm</div>
|
|
<div class="cardSub">Thông tin phiên bản và trạng thái backend.</div>
|
|
</div>
|
|
</div>
|
|
<div class="cardBody">
|
|
<div class="row rowWide">
|
|
<label>Backend</label>
|
|
<div id="overviewBackend" class="mutedNote">—</div>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>Dữ liệu</label>
|
|
<div class="mutedNote">`data/state.json` (catalog) + `data/models/{id}.json` (layout)</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<div class="cardHeader">
|
|
<div>
|
|
<div class="cardTitle">Cấu hình đang active</div>
|
|
<div class="cardSub">Tóm tắt layout đang mở.</div>
|
|
</div>
|
|
</div>
|
|
<div class="cardBody">
|
|
<div class="row rowWide">
|
|
<label>Layout</label>
|
|
<div id="overviewActiveLayout" class="mutedNote">—</div>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>Model robot</label>
|
|
<div id="overviewActiveModel" class="mutedNote">—</div>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>LiDAR / IMU</label>
|
|
<div id="overviewActiveSensors" class="mutedNote">—</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="page" id="pageConfig" data-page-content="config">
|
|
<div class="contentLeft">
|
|
<section class="card" id="layoutManagerCard">
|
|
<div class="cardHeader">
|
|
<div>
|
|
<div class="cardTitle">Quản lý layout</div>
|
|
<div class="cardSub">Nhiều cấu hình robot — mỗi layout có LiDAR và model riêng.</div>
|
|
</div>
|
|
</div>
|
|
<div class="cardBody">
|
|
<div class="row rowWide">
|
|
<label>Layout hiện tại</label>
|
|
<select id="layoutSelect"></select>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>Tên layout mới</label>
|
|
<input id="layoutNewName" type="text" placeholder="VD: AGV kho A" />
|
|
</div>
|
|
<div class="checkRow">
|
|
<label>
|
|
<input id="layoutCloneCurrent" type="checkbox" />
|
|
Sao chép từ layout đang mở
|
|
</label>
|
|
</div>
|
|
<div class="layoutManagerActions">
|
|
<button id="layoutCreateBtn" type="button" class="btn subtle">Tạo layout</button>
|
|
<button id="layoutDeleteBtn" type="button" class="btn subtle danger">Xóa</button>
|
|
</div>
|
|
<p id="layoutActiveHint" class="mutedNote">—</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card collapsible" id="lidarListCard">
|
|
<div
|
|
class="cardHeader cardHeaderToggle"
|
|
id="lidarListCardToggle"
|
|
role="button"
|
|
tabindex="0"
|
|
aria-expanded="true"
|
|
aria-controls="lidarListCardBody"
|
|
>
|
|
<div>
|
|
<div class="cardTitle">LiDARs</div>
|
|
<div class="cardSub">Đăng ký tên, IP, port và chỉnh pose theo robot frame.</div>
|
|
</div>
|
|
<span class="cardChevron" aria-hidden="true"></span>
|
|
</div>
|
|
|
|
<div class="cardBody" id="lidarListCardBody">
|
|
<form id="lidarForm" class="form">
|
|
<div class="row">
|
|
<label>Tên</label>
|
|
<input id="name" placeholder="Lidar trước" required />
|
|
</div>
|
|
<div class="row">
|
|
<label>IP</label>
|
|
<input id="ip" placeholder="192.168.0.10" required />
|
|
</div>
|
|
<div class="row">
|
|
<label>Port</label>
|
|
<input id="port" type="number" min="1" max="65535" value="2112" required />
|
|
</div>
|
|
<div class="actions">
|
|
<button id="addLidarBtn" class="btn primary" type="button">Thêm</button>
|
|
</div>
|
|
<p id="lidarFormHint" class="formHint" hidden></p>
|
|
</form>
|
|
|
|
<div id="lidarList" class="list"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card collapsible" id="imuListCard">
|
|
<div
|
|
class="cardHeader cardHeaderToggle"
|
|
id="imuListCardToggle"
|
|
role="button"
|
|
tabindex="0"
|
|
aria-expanded="true"
|
|
aria-controls="imuListCardBody"
|
|
>
|
|
<div>
|
|
<div class="cardTitle">IMU</div>
|
|
<div class="cardSub">Cảm biến quán tính — frame, topic và pose trên robot.</div>
|
|
</div>
|
|
<span class="cardChevron" aria-hidden="true"></span>
|
|
</div>
|
|
|
|
<div class="cardBody" id="imuListCardBody">
|
|
<form id="imuForm" class="form">
|
|
<div class="row">
|
|
<label>Tên</label>
|
|
<input id="imuName" placeholder="IMU chính" required />
|
|
</div>
|
|
<div class="row">
|
|
<label>Frame ID</label>
|
|
<input id="imuFrameId" placeholder="imu_link" required />
|
|
</div>
|
|
<div class="row">
|
|
<label>Topic</label>
|
|
<input id="imuTopic" placeholder="imu/data" value="imu/data" required />
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>Nguồn</label>
|
|
<select id="imuSource">
|
|
<option value="external">Ngoài (ROS topic)</option>
|
|
<option value="lidar_builtin">Tích hợp LiDAR</option>
|
|
<option value="onboard">Onboard robot</option>
|
|
</select>
|
|
</div>
|
|
<div class="row">
|
|
<label>Tần số (Hz)</label>
|
|
<input id="imuRateHz" type="number" min="1" max="1000" step="1" value="100" />
|
|
</div>
|
|
<div class="checkRow">
|
|
<label>
|
|
<input id="imuEnabled" type="checkbox" checked />
|
|
Bật IMU
|
|
</label>
|
|
</div>
|
|
<div class="actions">
|
|
<button id="addImuBtn" class="btn primary" type="button">Thêm IMU</button>
|
|
</div>
|
|
<p id="imuFormHint" class="formHint" hidden></p>
|
|
</form>
|
|
|
|
<div id="imuList" class="list"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card collapsible" id="robotModelCard">
|
|
<div
|
|
class="cardHeader cardHeaderToggle"
|
|
id="robotModelCardToggle"
|
|
role="button"
|
|
tabindex="0"
|
|
aria-expanded="true"
|
|
aria-controls="robotModelCardBody"
|
|
>
|
|
<div>
|
|
<div class="cardTitle">Model robot</div>
|
|
<div class="cardSub">Kinematic differential — bánh, động cơ và giới hạn vận tốc.</div>
|
|
</div>
|
|
<span class="cardChevron" aria-hidden="true"></span>
|
|
</div>
|
|
<div class="cardBody" id="robotModelCardBody">
|
|
<div class="modelForm">
|
|
<div class="row rowWide">
|
|
<label>Model</label>
|
|
<select id="robotModel">
|
|
<option value="diff">Differential (2 bánh)</option>
|
|
<option value="bicycle">Bicycle</option>
|
|
</select>
|
|
</div>
|
|
<div id="diffParams" class="modelParams">
|
|
<details class="acc" open>
|
|
<summary>Hình học bánh</summary>
|
|
<div class="accBody">
|
|
<div class="row rowWide">
|
|
<label>Khoảng cách 2 bánh</label>
|
|
<div class="inputUnit">
|
|
<input id="wheelSeparationM" type="number" min="0.05" max="5" step="0.01" value="1.0" />
|
|
<span class="unit">m</span>
|
|
</div>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>Bán kính bánh</label>
|
|
<div class="inputUnit">
|
|
<input id="wheelRadiusM" type="number" min="0.02" max="1" step="0.01" value="0.3" />
|
|
<span class="unit">m</span>
|
|
</div>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>Tỷ lệ hiển thị</label>
|
|
<div class="inputUnit">
|
|
<input id="scaleMPerPx" type="number" min="0.001" max="0.1" step="0.001" value="0.005" />
|
|
<span class="unit">m/px</span>
|
|
</div>
|
|
</div>
|
|
<details class="acc accNested">
|
|
<summary>Hiệu chỉnh (nâng cao)</summary>
|
|
<div class="accBody">
|
|
<div class="row rowWide">
|
|
<label>b multiplier</label>
|
|
<input id="wheelSeparationMult" type="number" min="0.5" max="2" step="0.01" value="1.0" />
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>r multiplier</label>
|
|
<input id="wheelRadiusMult" type="number" min="0.5" max="2" step="0.01" value="1.0" />
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="acc">
|
|
<summary>Động cơ</summary>
|
|
<div class="accBody">
|
|
<p class="mutedNote">Mỗi bánh gán một động cơ — chọn hãng và model.</p>
|
|
<div id="motorWheels" class="motorWheels"></div>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="acc">
|
|
<summary>Giới hạn vận tốc</summary>
|
|
<div class="accBody">
|
|
<div class="row rowWide">
|
|
<label>cmd_vel timeout</label>
|
|
<div class="inputUnit">
|
|
<input id="cmdVelTimeout" type="number" min="0.05" max="5" step="0.05" value="0.25" />
|
|
<span class="unit">s</span>
|
|
</div>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>Linear max</label>
|
|
<div class="inputUnit">
|
|
<input id="linearMaxVel" type="number" min="0.01" max="5" step="0.05" value="1.0" />
|
|
<span class="unit">m/s</span>
|
|
</div>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>Linear min</label>
|
|
<div class="inputUnit">
|
|
<input id="linearMinVel" type="number" min="-5" max="0" step="0.05" value="-0.5" />
|
|
<span class="unit">m/s</span>
|
|
</div>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>Linear accel max</label>
|
|
<div class="inputUnit">
|
|
<input id="linearMaxAccel" type="number" min="0.01" max="10" step="0.05" value="0.8" />
|
|
<span class="unit">m/s²</span>
|
|
</div>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>Angular max</label>
|
|
<div class="inputUnit">
|
|
<input id="angularMaxVel" type="number" min="0.01" max="10" step="0.05" value="1.7" />
|
|
<span class="unit">rad/s</span>
|
|
</div>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>Angular accel max</label>
|
|
<div class="inputUnit">
|
|
<input id="angularMaxAccel" type="number" min="0.01" max="10" step="0.05" value="1.5" />
|
|
<span class="unit">rad/s²</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<p id="diffValidation" class="validation" hidden></p>
|
|
</div>
|
|
|
|
<div id="bicycleParams" class="modelParams" hidden>
|
|
<p class="mutedNote">
|
|
Kinematic bicycle — tham chiếu trục sau, quan hệ
|
|
<span class="mono">ω = v·tan(δ)/L</span>
|
|
(<a href="https://thomasfermi.github.io/Algorithms-for-Automated-Driving/Control/BicycleModel.html" target="_blank" rel="noopener">mô hình</a>).
|
|
</p>
|
|
<details class="acc" open>
|
|
<summary>Hình học (wheelbase)</summary>
|
|
<div class="accBody">
|
|
<div class="row rowWide">
|
|
<label>Wheelbase L</label>
|
|
<div class="inputUnit">
|
|
<input id="bicycleWheelbaseM" type="number" min="0.2" max="5" step="0.05" value="1.2" />
|
|
<span class="unit">m</span>
|
|
</div>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>Bán kính bánh</label>
|
|
<div class="inputUnit">
|
|
<input id="bicycleWheelRadiusM" type="number" min="0.02" max="1" step="0.01" value="0.15" />
|
|
<span class="unit">m</span>
|
|
</div>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>Tỷ lệ hiển thị</label>
|
|
<div class="inputUnit">
|
|
<input id="bicycleScaleMPerPx" type="number" min="0.001" max="0.1" step="0.001" value="0.005" />
|
|
<span class="unit">m/px</span>
|
|
</div>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>Góc lái xem trước</label>
|
|
<div class="inputUnit">
|
|
<input id="bicycleSteerPreviewDeg" type="number" min="-45" max="45" step="1" value="15" />
|
|
<span class="unit">°</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
<details class="acc">
|
|
<summary>Động cơ</summary>
|
|
<div class="accBody">
|
|
<p class="mutedNote">Bánh sau (drive) và bánh trước (steer).</p>
|
|
<div id="bicycleMotorWheels" class="motorWheels"></div>
|
|
</div>
|
|
</details>
|
|
<details class="acc">
|
|
<summary>Giới hạn</summary>
|
|
<div class="accBody">
|
|
<div class="row rowWide">
|
|
<label>δ max (lái)</label>
|
|
<div class="inputUnit">
|
|
<input id="bicycleSteerMaxDeg" type="number" min="5" max="60" step="1" value="35" />
|
|
<span class="unit">°</span>
|
|
</div>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>cmd_vel timeout</label>
|
|
<div class="inputUnit">
|
|
<input id="bicycleCmdVelTimeout" type="number" min="0.05" max="5" step="0.05" value="0.25" />
|
|
<span class="unit">s</span>
|
|
</div>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>Linear max</label>
|
|
<div class="inputUnit">
|
|
<input id="bicycleLinearMaxVel" type="number" min="0.01" max="5" step="0.05" value="1.0" />
|
|
<span class="unit">m/s</span>
|
|
</div>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>Linear accel max</label>
|
|
<div class="inputUnit">
|
|
<input id="bicycleLinearMaxAccel" type="number" min="0.01" max="10" step="0.05" value="0.8" />
|
|
<span class="unit">m/s²</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
<p id="bicycleValidation" class="validation" hidden></p>
|
|
</div>
|
|
|
|
<details class="acc">
|
|
<summary>Footprint</summary>
|
|
<div class="accBody">
|
|
<p class="mutedNote">Hình dạng robot (ROS polygon) — tọa độ theo robot frame.</p>
|
|
<div class="row rowWide">
|
|
<label>Hình dạng</label>
|
|
<select id="footprintShape">
|
|
<option value="rectangle">Hình chữ nhật</option>
|
|
<option value="circle">Hình tròn</option>
|
|
<option value="regular_polygon">Đa giác đều</option>
|
|
<option value="custom">Tùy chỉnh (đa giác)</option>
|
|
</select>
|
|
</div>
|
|
<div id="footprintPresetPanel" class="footprintPresetPanel">
|
|
<div id="fpRectParams" class="fpShapeParams">
|
|
<div class="row rowWide">
|
|
<label>Chiều dài</label>
|
|
<div class="inputUnit">
|
|
<input id="fpLengthM" type="number" min="0.1" max="10" step="0.05" value="1.4" />
|
|
<span class="unit">m</span>
|
|
</div>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>Chiều rộng</label>
|
|
<div class="inputUnit">
|
|
<input id="fpWidthM" type="number" min="0.1" max="10" step="0.05" value="1.1" />
|
|
<span class="unit">m</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="fpCircleParams" class="fpShapeParams" hidden>
|
|
<div class="row rowWide">
|
|
<label>Bán kính</label>
|
|
<div class="inputUnit">
|
|
<input id="fpRadiusM" type="number" min="0.1" max="5" step="0.05" value="0.55" />
|
|
<span class="unit">m</span>
|
|
</div>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>Độ mịn (cạnh)</label>
|
|
<input id="fpCircleSegments" type="number" min="8" max="64" step="1" value="32" />
|
|
</div>
|
|
</div>
|
|
<div id="fpPolyParams" class="fpShapeParams" hidden>
|
|
<div class="row rowWide">
|
|
<label>Bán kính</label>
|
|
<div class="inputUnit">
|
|
<input id="fpPolyRadiusM" type="number" min="0.1" max="5" step="0.05" value="0.6" />
|
|
<span class="unit">m</span>
|
|
</div>
|
|
</div>
|
|
<div class="row rowWide">
|
|
<label>Số cạnh</label>
|
|
<input id="fpPolySides" type="number" min="3" max="32" step="1" value="6" />
|
|
</div>
|
|
</div>
|
|
<button id="applyFootprintPresetBtn" type="button" class="btn subtle btnBlock">Áp dụng hình dạng</button>
|
|
</div>
|
|
<div id="footprintCustomPanel" class="footprintCustomPanel hidden">
|
|
<div class="fpVertexRow">
|
|
<span class="fpVertexLabel">Số đỉnh: <strong id="fpVertexCount">0</strong></span>
|
|
<span id="fpSelectedVertexText" class="fpSelectedVertex mutedNote">—</span>
|
|
</div>
|
|
<div class="fpVertexActions">
|
|
<button id="fpAddVertexBtn" type="button" class="btn subtle">Thêm đỉnh</button>
|
|
<button id="fpRemoveVertexBtn" type="button" class="btn subtle" disabled>Xóa đỉnh</button>
|
|
</div>
|
|
</div>
|
|
<button id="editFootprintBtn" type="button" class="btn subtle btnBlock">Sửa footprint</button>
|
|
<div id="footprintEditHint" class="fpHint" hidden></div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="configSplitter" class="splitter" role="separator" aria-orientation="vertical" tabindex="0"></div>
|
|
|
|
<div class="contentRight">
|
|
<section class="card">
|
|
<div class="cardHeader">
|
|
<div>
|
|
<div class="cardTitle">Bố trí trên robot</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cardBody">
|
|
<div class="canvasWrap" id="canvasWrap">
|
|
<canvas id="canvas"></canvas>
|
|
</div>
|
|
<div class="metaBar">
|
|
<div class="viewHint">Cuộn chuột: zoom • Shift + kéo: di chuyển vùng nhìn</div>
|
|
<div id="robotDiffSummary" class="robotDiffSummary">—</div>
|
|
<div>Robot center: <span id="robotCenterText"></span></div>
|
|
<div>Selected: <span id="selectedText">none</span></div>
|
|
<div>Pose: <span id="selectedRelText">—</span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|