145 lines
5.6 KiB
HTML
145 lines
5.6 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>停车机器人离线测试台</title>
|
||
|
|
<link rel="stylesheet" href="viewer.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<main class="app-shell">
|
||
|
|
<header class="topbar">
|
||
|
|
<div>
|
||
|
|
<p class="eyebrow">MY PARKING · OFFLINE LAB</p>
|
||
|
|
<h1>停车机器人离线测试台</h1>
|
||
|
|
</div>
|
||
|
|
<div class="connection">
|
||
|
|
<span id="connection-dot" class="dot"></span>
|
||
|
|
<span id="connection-text">正在连接仿真后端</span>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section class="workspace">
|
||
|
|
<aside class="panel controls-panel">
|
||
|
|
<div class="panel-heading">
|
||
|
|
<span>控制台</span>
|
||
|
|
<button id="reset-all" class="text-button">全部复位</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<label class="field-label" for="vehicle-select">当前车辆</label>
|
||
|
|
<select id="vehicle-select">
|
||
|
|
<option value="1">车辆 1</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<section class="virtual-remote">
|
||
|
|
<div class="remote-heading">
|
||
|
|
<p class="group-label">虚拟遥控器</p>
|
||
|
|
<span id="remote-state">已松开</span>
|
||
|
|
</div>
|
||
|
|
<div class="remote-pad" aria-label="虚拟遥控方向面板">
|
||
|
|
<button data-throttle="1" data-steering="1"
|
||
|
|
aria-label="前进并左转">↖</button>
|
||
|
|
<button data-throttle="1" data-steering="0"
|
||
|
|
aria-label="前进">↑</button>
|
||
|
|
<button data-throttle="1" data-steering="-1"
|
||
|
|
aria-label="前进并右转">↗</button>
|
||
|
|
<button data-throttle="0" data-steering="1"
|
||
|
|
aria-label="原地向左转">←</button>
|
||
|
|
<button id="remote-stop" class="remote-stop"
|
||
|
|
aria-label="停止">STOP</button>
|
||
|
|
<button data-throttle="0" data-steering="-1"
|
||
|
|
aria-label="原地向右转">→</button>
|
||
|
|
<button data-throttle="-1" data-steering="1"
|
||
|
|
aria-label="后退并左转">↙</button>
|
||
|
|
<button data-throttle="-1" data-steering="0"
|
||
|
|
aria-label="后退">↓</button>
|
||
|
|
<button data-throttle="-1" data-steering="-1"
|
||
|
|
aria-label="后退并右转">↘</button>
|
||
|
|
</div>
|
||
|
|
<p class="remote-help">
|
||
|
|
按住操作；键盘 W/S 前后，A/D 转向，可组合按键。
|
||
|
|
</p>
|
||
|
|
<label class="remote-slider">
|
||
|
|
<span>线速度 <output id="speed-scale-value">60%</output></span>
|
||
|
|
<input id="speed-scale" type="range"
|
||
|
|
min="0" max="100" value="60">
|
||
|
|
</label>
|
||
|
|
<label class="remote-slider">
|
||
|
|
<span>转向强度 <output id="steering-scale-value">60%</output></span>
|
||
|
|
<input id="steering-scale" type="range"
|
||
|
|
min="0" max="100" value="60">
|
||
|
|
</label>
|
||
|
|
<p class="remote-mode-note">
|
||
|
|
遥控方向遵循当前舵轮模式；正常模式下可边走边转。
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div id="action-groups"></div>
|
||
|
|
|
||
|
|
<div id="command-message" class="message">
|
||
|
|
请选择车辆和模式。
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<details class="configuration">
|
||
|
|
<summary>仿真布局配置</summary>
|
||
|
|
|
||
|
|
<label class="field-label" for="vehicle-count">车辆数量</label>
|
||
|
|
<select id="vehicle-count">
|
||
|
|
<option value="1">1 辆</option>
|
||
|
|
<option value="2">2 辆</option>
|
||
|
|
<option value="3">3 辆</option>
|
||
|
|
<option value="4">4 辆</option>
|
||
|
|
<option value="5">5 辆</option>
|
||
|
|
<option value="6">6 辆</option>
|
||
|
|
<option value="7">7 辆</option>
|
||
|
|
<option value="8">8 辆</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<p class="group-label">车队中心（世界系）</p>
|
||
|
|
<div class="numeric-grid">
|
||
|
|
<label>X / m<input id="fleet-x" type="number" step="0.1"></label>
|
||
|
|
<label>Y / m<input id="fleet-y" type="number" step="0.1"></label>
|
||
|
|
<label>Yaw / °<input id="fleet-yaw" type="number" step="1"></label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="group-label">单车相对车队中心位姿</p>
|
||
|
|
<div id="layout-rows" class="layout-rows"></div>
|
||
|
|
<button id="apply-configuration" class="primary-button">
|
||
|
|
应用布局并复位
|
||
|
|
</button>
|
||
|
|
</details>
|
||
|
|
|
||
|
|
<div class="legend">
|
||
|
|
<div><span class="axis-swatch x-axis"></span>车体 +X（车头）</div>
|
||
|
|
<div><span class="axis-swatch y-axis"></span>车体 +Y（左侧）</div>
|
||
|
|
<div><span class="legend-line zero"></span>舵轮机械 0°</div>
|
||
|
|
<div><span class="legend-line actual"></span>实际舵角</div>
|
||
|
|
<div><span class="legend-line target"></span>目标舵角</div>
|
||
|
|
<div><span class="legend-dot ready"></span>舵轮已到位</div>
|
||
|
|
<div><span class="legend-dot aligning"></span>舵轮转向中</div>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<section class="panel viewport-panel">
|
||
|
|
<div class="panel-heading">
|
||
|
|
<span>世界视图</span>
|
||
|
|
<span class="coordinate-note">X 向右 · Y 向上 · 逆时针为正</span>
|
||
|
|
</div>
|
||
|
|
<canvas id="world-canvas"></canvas>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<aside class="panel status-panel">
|
||
|
|
<div class="panel-heading">
|
||
|
|
<span>车辆状态</span>
|
||
|
|
<span id="update-rate">-- Hz</span>
|
||
|
|
</div>
|
||
|
|
<div id="selected-vehicle-detail"></div>
|
||
|
|
<div id="vehicle-cards" class="vehicle-cards"></div>
|
||
|
|
</aside>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<script src="viewer.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|