添加单车底盘仿真平台并完善运动控制与夹臂功能
This commit is contained in:
@@ -0,0 +1,842 @@
|
||||
const canvas = document.getElementById("world-canvas");
|
||||
const context = canvas.getContext("2d");
|
||||
const vehicleSelect = document.getElementById("vehicle-select");
|
||||
const commandMessage = document.getElementById("command-message");
|
||||
const connectionDot = document.getElementById("connection-dot");
|
||||
const connectionText = document.getElementById("connection-text");
|
||||
const vehicleCards = document.getElementById("vehicle-cards");
|
||||
const selectedVehicleDetail =
|
||||
document.getElementById("selected-vehicle-detail");
|
||||
const actionGroups = document.getElementById("action-groups");
|
||||
const updateRate = document.getElementById("update-rate");
|
||||
const vehicleCountInput = document.getElementById("vehicle-count");
|
||||
const layoutRows = document.getElementById("layout-rows");
|
||||
const remoteState = document.getElementById("remote-state");
|
||||
const speedScaleInput = document.getElementById("speed-scale");
|
||||
const steeringScaleInput =
|
||||
document.getElementById("steering-scale");
|
||||
const speedScaleValue =
|
||||
document.getElementById("speed-scale-value");
|
||||
const steeringScaleValue =
|
||||
document.getElementById("steering-scale-value");
|
||||
|
||||
let vehicles = [];
|
||||
let actions = [];
|
||||
let configuration = {
|
||||
vehicleCount: 1,
|
||||
fleetCenter: { xMeters: 0, yMeters: 0, yawRadians: 0 },
|
||||
vehicles: [
|
||||
{ vehicleId: 1, xMeters: 0, yMeters: 0, yawRadians: 0 }
|
||||
]
|
||||
};
|
||||
let lastUpdateTime = performance.now();
|
||||
let successfulUpdates = 0;
|
||||
let remoteThrottle = 0;
|
||||
let remoteSteering = 0;
|
||||
let remotePointerId = null;
|
||||
let remoteVehicleId = null;
|
||||
const pressedDriveKeys = new Set();
|
||||
|
||||
function resizeCanvas() {
|
||||
const bounds = canvas.getBoundingClientRect();
|
||||
const ratio = window.devicePixelRatio || 1;
|
||||
canvas.width = Math.max(1, Math.floor(bounds.width * ratio));
|
||||
canvas.height = Math.max(1, Math.floor(bounds.height * ratio));
|
||||
context.setTransform(ratio, 0, 0, ratio, 0, 0);
|
||||
}
|
||||
|
||||
function getView() {
|
||||
const centerX = configuration.fleetCenter.xMeters;
|
||||
const centerY = configuration.fleetCenter.yMeters;
|
||||
let radiusX = 2.1;
|
||||
let radiusY = 1.7;
|
||||
|
||||
for (const vehicle of vehicles) {
|
||||
radiusX = Math.max(
|
||||
radiusX,
|
||||
Math.abs(vehicle.xMeters - centerX) + 1.2);
|
||||
radiusY = Math.max(
|
||||
radiusY,
|
||||
Math.abs(vehicle.yMeters - centerY) + 1.0);
|
||||
}
|
||||
|
||||
const width = canvas.clientWidth;
|
||||
const height = canvas.clientHeight;
|
||||
const scale = Math.min(
|
||||
width / (radiusX * 2),
|
||||
height / (radiusY * 2),
|
||||
155);
|
||||
|
||||
return { centerX, centerY, scale, width, height };
|
||||
}
|
||||
|
||||
function worldToScreen(xMeters, yMeters, view = getView()) {
|
||||
return {
|
||||
x: view.width / 2 +
|
||||
(xMeters - view.centerX) * view.scale,
|
||||
y: view.height / 2 -
|
||||
(yMeters - view.centerY) * view.scale,
|
||||
scale: view.scale
|
||||
};
|
||||
}
|
||||
|
||||
function drawGrid(view) {
|
||||
const width = view.width;
|
||||
const height = view.height;
|
||||
const worldOrigin = worldToScreen(0, 0, view);
|
||||
const spacing = view.scale;
|
||||
|
||||
context.clearRect(0, 0, width, height);
|
||||
context.fillStyle = "#071018";
|
||||
context.fillRect(0, 0, width, height);
|
||||
context.lineWidth = 1;
|
||||
context.strokeStyle = "rgba(109, 143, 160, 0.12)";
|
||||
|
||||
for (let x = worldOrigin.x % spacing; x < width; x += spacing) {
|
||||
context.beginPath();
|
||||
context.moveTo(x, 0);
|
||||
context.lineTo(x, height);
|
||||
context.stroke();
|
||||
}
|
||||
|
||||
for (let y = worldOrigin.y % spacing; y < height; y += spacing) {
|
||||
context.beginPath();
|
||||
context.moveTo(0, y);
|
||||
context.lineTo(width, y);
|
||||
context.stroke();
|
||||
}
|
||||
|
||||
context.strokeStyle = "rgba(90, 125, 142, 0.35)";
|
||||
context.lineWidth = 1.2;
|
||||
context.beginPath();
|
||||
context.moveTo(0, worldOrigin.y);
|
||||
context.lineTo(width, worldOrigin.y);
|
||||
context.moveTo(worldOrigin.x, 0);
|
||||
context.lineTo(worldOrigin.x, height);
|
||||
context.stroke();
|
||||
}
|
||||
|
||||
function drawFleetCenter(view) {
|
||||
const fleet = configuration.fleetCenter;
|
||||
const point = worldToScreen(
|
||||
fleet.xMeters,
|
||||
fleet.yMeters,
|
||||
view);
|
||||
const yaw = fleet.yawRadians;
|
||||
const axisLength = 55;
|
||||
|
||||
context.save();
|
||||
context.translate(point.x, point.y);
|
||||
context.rotate(-yaw);
|
||||
|
||||
context.fillStyle = "#b58cff";
|
||||
context.beginPath();
|
||||
context.moveTo(0, -8);
|
||||
context.lineTo(8, 0);
|
||||
context.lineTo(0, 8);
|
||||
context.lineTo(-8, 0);
|
||||
context.closePath();
|
||||
context.fill();
|
||||
|
||||
drawArrow(0, 0, axisLength, 0, "#ff7285", 2);
|
||||
drawArrow(0, 0, 0, -axisLength, "#66d99a", 2);
|
||||
context.restore();
|
||||
|
||||
context.fillStyle = "#c7aaff";
|
||||
context.font = "12px Inter, sans-serif";
|
||||
context.fillText("FLEET CENTER", point.x + 12, point.y - 11);
|
||||
}
|
||||
|
||||
function drawVehicle(vehicle, view) {
|
||||
const point = worldToScreen(
|
||||
vehicle.xMeters,
|
||||
vehicle.yMeters,
|
||||
view);
|
||||
const selected = Number(vehicleSelect.value) === vehicle.vehicleId;
|
||||
const bodyLength = vehicle.bodyLengthMeters * point.scale;
|
||||
const bodyWidth = vehicle.bodyWidthMeters * point.scale;
|
||||
|
||||
context.save();
|
||||
context.translate(point.x, point.y);
|
||||
context.rotate(-vehicle.yawRadians);
|
||||
|
||||
context.fillStyle = selected
|
||||
? "rgba(26, 180, 155, 0.2)"
|
||||
: "rgba(50, 73, 88, 0.42)";
|
||||
context.strokeStyle = selected ? "#39d8b7" : "#668392";
|
||||
context.lineWidth = selected ? 2.5 : 1.5;
|
||||
context.beginPath();
|
||||
context.roundRect(
|
||||
-bodyLength / 2,
|
||||
-bodyWidth / 2,
|
||||
bodyLength,
|
||||
bodyWidth,
|
||||
12);
|
||||
context.fill();
|
||||
context.stroke();
|
||||
|
||||
drawBodyAxes(bodyLength, bodyWidth);
|
||||
|
||||
for (const wheel of vehicle.wheels) {
|
||||
drawWheel(
|
||||
wheel.xMeters * point.scale,
|
||||
-wheel.yMeters * point.scale,
|
||||
wheel);
|
||||
}
|
||||
|
||||
context.fillStyle = "rgba(202, 222, 230, 0.8)";
|
||||
context.font = "10px Inter, sans-serif";
|
||||
context.textAlign = "center";
|
||||
context.fillText(
|
||||
"1472 × 948 mm",
|
||||
0,
|
||||
bodyWidth / 2 - 8);
|
||||
context.restore();
|
||||
|
||||
context.textAlign = "left";
|
||||
context.fillStyle = "#dbe9ef";
|
||||
context.font = "600 13px Inter, sans-serif";
|
||||
context.fillText(
|
||||
`CAR ${vehicle.vehicleId}`,
|
||||
point.x - 24,
|
||||
point.y - bodyWidth / 2 - 18);
|
||||
|
||||
context.fillStyle = vehicle.modeReady ? "#42dfb7" : "#ffb257";
|
||||
context.font = "12px Inter, sans-serif";
|
||||
context.fillText(
|
||||
vehicle.modeReady ? "READY" : "ALIGNING",
|
||||
point.x - 23,
|
||||
point.y + bodyWidth / 2 + 25);
|
||||
}
|
||||
|
||||
function drawBodyAxes(bodyLength, bodyWidth) {
|
||||
const xLength = bodyLength / 2 + 30;
|
||||
const yLength = bodyWidth / 2 + 27;
|
||||
|
||||
drawArrow(0, 0, xLength, 0, "#ff6477", 2.4);
|
||||
drawArrow(0, 0, 0, -yLength, "#54d991", 2.4);
|
||||
|
||||
context.font = "700 11px Inter, sans-serif";
|
||||
context.fillStyle = "#ff8b99";
|
||||
context.fillText("+X", xLength - 2, -7);
|
||||
context.fillStyle = "#7debab";
|
||||
context.fillText("+Y", 6, -yLength + 2);
|
||||
}
|
||||
|
||||
function drawWheel(x, y, wheel) {
|
||||
const wheelLength = 33;
|
||||
const limitRadius = 20;
|
||||
context.save();
|
||||
context.translate(x, y);
|
||||
|
||||
context.strokeStyle = "rgba(86, 167, 255, 0.72)";
|
||||
context.lineWidth = 1.2;
|
||||
context.setLineDash([3, 3]);
|
||||
context.beginPath();
|
||||
context.moveTo(-22, 0);
|
||||
context.lineTo(24, 0);
|
||||
context.stroke();
|
||||
|
||||
drawWheelLimitArc(limitRadius);
|
||||
|
||||
context.save();
|
||||
context.rotate(-wheel.targetAngleDegrees * Math.PI / 180);
|
||||
context.strokeStyle = "rgba(255, 178, 87, 0.9)";
|
||||
context.lineWidth = 3;
|
||||
context.setLineDash([5, 4]);
|
||||
context.beginPath();
|
||||
context.moveTo(-wheelLength / 2, 0);
|
||||
context.lineTo(wheelLength / 2, 0);
|
||||
context.stroke();
|
||||
context.restore();
|
||||
|
||||
context.save();
|
||||
context.rotate(-wheel.actualAngleDegrees * Math.PI / 180);
|
||||
context.strokeStyle = wheel.isAligned ? "#42dfb7" : "#f2f6f8";
|
||||
context.lineWidth = 7;
|
||||
context.setLineDash([]);
|
||||
context.lineCap = "round";
|
||||
context.beginPath();
|
||||
context.moveTo(-wheelLength / 2, 0);
|
||||
context.lineTo(wheelLength / 2, 0);
|
||||
context.stroke();
|
||||
context.restore();
|
||||
|
||||
context.setLineDash([]);
|
||||
context.fillStyle = wheel.isAligned ? "#7ef4dc" : "#ffca83";
|
||||
context.font = "700 9px Inter, sans-serif";
|
||||
context.textAlign = "center";
|
||||
const sign = wheel.actualAngleDegrees >= 0 ? "+" : "";
|
||||
context.fillText(
|
||||
`${sign}${wheel.actualAngleDegrees.toFixed(0)}°`,
|
||||
0,
|
||||
-25);
|
||||
context.restore();
|
||||
}
|
||||
|
||||
function drawWheelLimitArc(radius) {
|
||||
context.strokeStyle = "rgba(181, 140, 255, 0.5)";
|
||||
context.lineWidth = 1;
|
||||
context.setLineDash([]);
|
||||
context.beginPath();
|
||||
|
||||
for (let angle = -120; angle <= 120; angle += 5) {
|
||||
const radians = -angle * Math.PI / 180;
|
||||
const x = Math.cos(radians) * radius;
|
||||
const y = Math.sin(radians) * radius;
|
||||
if (angle === -120) context.moveTo(x, y);
|
||||
else context.lineTo(x, y);
|
||||
}
|
||||
context.stroke();
|
||||
|
||||
for (const angle of [-120, 0, 120]) {
|
||||
const radians = -angle * Math.PI / 180;
|
||||
context.beginPath();
|
||||
context.moveTo(
|
||||
Math.cos(radians) * (radius - 3),
|
||||
Math.sin(radians) * (radius - 3));
|
||||
context.lineTo(
|
||||
Math.cos(radians) * (radius + 3),
|
||||
Math.sin(radians) * (radius + 3));
|
||||
context.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
function drawArrow(x1, y1, x2, y2, color, width) {
|
||||
const angle = Math.atan2(y2 - y1, x2 - x1);
|
||||
context.strokeStyle = color;
|
||||
context.fillStyle = color;
|
||||
context.lineWidth = width;
|
||||
context.setLineDash([]);
|
||||
context.beginPath();
|
||||
context.moveTo(x1, y1);
|
||||
context.lineTo(x2, y2);
|
||||
context.stroke();
|
||||
context.beginPath();
|
||||
context.moveTo(x2, y2);
|
||||
context.lineTo(
|
||||
x2 - 9 * Math.cos(angle - Math.PI / 6),
|
||||
y2 - 9 * Math.sin(angle - Math.PI / 6));
|
||||
context.lineTo(
|
||||
x2 - 9 * Math.cos(angle + Math.PI / 6),
|
||||
y2 - 9 * Math.sin(angle + Math.PI / 6));
|
||||
context.closePath();
|
||||
context.fill();
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const view = getView();
|
||||
drawGrid(view);
|
||||
drawFleetCenter(view);
|
||||
vehicles.forEach(vehicle => drawVehicle(vehicle, view));
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
function renderActions() {
|
||||
const preferredGroups = ["舵轮模式", "运动测试", "维护"];
|
||||
const groups = [...new Set(actions.map(action => action.group))]
|
||||
.sort((left, right) => {
|
||||
const leftIndex = preferredGroups.indexOf(left);
|
||||
const rightIndex = preferredGroups.indexOf(right);
|
||||
if (leftIndex < 0 && rightIndex < 0)
|
||||
return left.localeCompare(right, "zh-CN");
|
||||
if (leftIndex < 0) return 1;
|
||||
if (rightIndex < 0) return -1;
|
||||
return leftIndex - rightIndex;
|
||||
});
|
||||
|
||||
actionGroups.innerHTML = groups.map(group => {
|
||||
const buttons = actions
|
||||
.filter(action => action.group === group)
|
||||
.sort((a, b) => a.order - b.order)
|
||||
.map(action => `
|
||||
<button data-command="${action.key}"
|
||||
class="${action.key === "stop" ? "danger-button" : ""}">
|
||||
${action.displayName}
|
||||
</button>`)
|
||||
.join("");
|
||||
|
||||
return `
|
||||
<section class="action-group">
|
||||
<p class="group-label">${group}</p>
|
||||
<div class="action-grid">${buttons}</div>
|
||||
</section>`;
|
||||
}).join("");
|
||||
|
||||
actionGroups.querySelectorAll("[data-command]")
|
||||
.forEach(button => {
|
||||
button.addEventListener("click", () =>
|
||||
sendCommand(button.dataset.command));
|
||||
});
|
||||
}
|
||||
|
||||
function renderVehicleSelector() {
|
||||
const previous = Number(vehicleSelect.value);
|
||||
vehicleSelect.innerHTML = vehicles
|
||||
.map(vehicle =>
|
||||
`<option value="${vehicle.vehicleId}">车辆 ${vehicle.vehicleId}</option>`)
|
||||
.join("");
|
||||
|
||||
if (vehicles.some(vehicle => vehicle.vehicleId === previous))
|
||||
vehicleSelect.value = String(previous);
|
||||
}
|
||||
|
||||
function renderCards() {
|
||||
vehicleCards.innerHTML = vehicles.map(vehicle => {
|
||||
const actual = vehicle.actualBodyTwist;
|
||||
const selected =
|
||||
Number(vehicleSelect.value) === vehicle.vehicleId;
|
||||
return `
|
||||
<button class="vehicle-card ${selected ? "selected" : ""}"
|
||||
data-vehicle="${vehicle.vehicleId}">
|
||||
<div class="card-topline">
|
||||
<strong>CAR ${vehicle.vehicleId}</strong>
|
||||
<span class="${vehicle.modeReady ? "status-ready" : "status-aligning"}">
|
||||
${vehicle.modeReady ? "READY" : "ALIGNING"}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mode-name">${formatMode(vehicle.mode)}</div>
|
||||
<dl>
|
||||
<div><dt>X</dt><dd>${vehicle.xMeters.toFixed(2)} m</dd></div>
|
||||
<div><dt>Y</dt><dd>${vehicle.yMeters.toFixed(2)} m</dd></div>
|
||||
<div><dt>Yaw</dt><dd>${radToDeg(vehicle.yawRadians).toFixed(1)}°</dd></div>
|
||||
<div><dt>Vx / Vy</dt><dd>${actual.vxMetersPerSecond.toFixed(2)} / ${actual.vyMetersPerSecond.toFixed(2)}</dd></div>
|
||||
</dl>
|
||||
</button>`;
|
||||
}).join("");
|
||||
|
||||
vehicleCards.querySelectorAll("[data-vehicle]").forEach(card => {
|
||||
card.addEventListener("click", () => {
|
||||
vehicleSelect.value = card.dataset.vehicle;
|
||||
renderCards();
|
||||
renderSelectedVehicleDetail();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderSelectedVehicleDetail() {
|
||||
const selectedId = Number(vehicleSelect.value);
|
||||
const vehicle = vehicles.find(item => item.vehicleId === selectedId);
|
||||
if (!vehicle) {
|
||||
selectedVehicleDetail.innerHTML = "";
|
||||
return;
|
||||
}
|
||||
|
||||
selectedVehicleDetail.innerHTML = `
|
||||
<section class="wheel-detail">
|
||||
<div class="geometry-note">
|
||||
车体 1472 × 948 mm · 实际DLL轮位 X±750 / Y±500 mm
|
||||
</div>
|
||||
${vehicle.wheels.map(wheel => {
|
||||
const actualPercent =
|
||||
(wheel.actualAngleDegrees + 120) / 240 * 100;
|
||||
const targetPercent =
|
||||
(wheel.targetAngleDegrees + 120) / 240 * 100;
|
||||
return `
|
||||
<div class="wheel-row">
|
||||
<div class="wheel-row-title">
|
||||
<strong>${wheel.name}</strong>
|
||||
<span>实际 ${signed(wheel.actualAngleDegrees)}° · 目标 ${signed(wheel.targetAngleDegrees)}°</span>
|
||||
</div>
|
||||
<div class="angle-scale">
|
||||
<span class="zero-mark"></span>
|
||||
<span class="target-mark" style="left:${targetPercent}%"></span>
|
||||
<span class="actual-mark" style="left:${actualPercent}%"></span>
|
||||
</div>
|
||||
<div class="wheel-speed">
|
||||
轮速 ${wheel.actualSpeedMetersPerSecond.toFixed(2)} m/s
|
||||
</div>
|
||||
</div>`;
|
||||
}).join("")}
|
||||
</section>`;
|
||||
}
|
||||
|
||||
function formatMode(mode) {
|
||||
return {
|
||||
Normal: "正常模式",
|
||||
CrabLeft: "左蟹行",
|
||||
CrabRight: "右蟹行",
|
||||
Spin: "自转模式"
|
||||
}[mode] || mode;
|
||||
}
|
||||
|
||||
async function loadActions() {
|
||||
const response = await fetch("/api/actions", { cache: "no-store" });
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
actions = await response.json();
|
||||
renderActions();
|
||||
}
|
||||
|
||||
async function loadConfiguration() {
|
||||
const response = await fetch("/api/configuration", {
|
||||
cache: "no-store"
|
||||
});
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
configuration = await response.json();
|
||||
populateConfigurationForm();
|
||||
}
|
||||
|
||||
function populateConfigurationForm() {
|
||||
vehicleCountInput.value = String(configuration.vehicleCount);
|
||||
document.getElementById("fleet-x").value =
|
||||
configuration.fleetCenter.xMeters;
|
||||
document.getElementById("fleet-y").value =
|
||||
configuration.fleetCenter.yMeters;
|
||||
document.getElementById("fleet-yaw").value =
|
||||
radToDeg(configuration.fleetCenter.yawRadians).toFixed(1);
|
||||
renderLayoutRows(configuration.vehicleCount, configuration.vehicles);
|
||||
}
|
||||
|
||||
function readExistingLayouts() {
|
||||
return [...layoutRows.querySelectorAll(".layout-row")].map(row => ({
|
||||
vehicleId: Number(row.dataset.vehicleId),
|
||||
xMeters: Number(row.querySelector("[data-field='x']").value),
|
||||
yMeters: Number(row.querySelector("[data-field='y']").value),
|
||||
yawRadians: degToRad(
|
||||
Number(row.querySelector("[data-field='yaw']").value))
|
||||
}));
|
||||
}
|
||||
|
||||
function renderLayoutRows(count, sourceLayouts = readExistingLayouts()) {
|
||||
const byId = new Map(
|
||||
sourceLayouts.map(layout => [layout.vehicleId, layout]));
|
||||
|
||||
const fallbackSpacing = 2.0;
|
||||
layoutRows.innerHTML = Array.from({ length: count }, (_, index) => {
|
||||
const id = index + 1;
|
||||
const fallbackX =
|
||||
(index - (count - 1) / 2) * fallbackSpacing;
|
||||
const layout = byId.get(id) || {
|
||||
vehicleId: id,
|
||||
xMeters: count === 1 ? 0 : fallbackX,
|
||||
yMeters: 0,
|
||||
yawRadians: 0
|
||||
};
|
||||
|
||||
return `
|
||||
<div class="layout-row" data-vehicle-id="${id}">
|
||||
<strong>CAR ${id}</strong>
|
||||
<label>X<input data-field="x" type="number" step="0.1"
|
||||
value="${layout.xMeters}"></label>
|
||||
<label>Y<input data-field="y" type="number" step="0.1"
|
||||
value="${layout.yMeters}"></label>
|
||||
<label>Yaw°<input data-field="yaw" type="number" step="1"
|
||||
value="${radToDeg(layout.yawRadians).toFixed(1)}"></label>
|
||||
</div>`;
|
||||
}).join("");
|
||||
}
|
||||
|
||||
async function applyConfiguration() {
|
||||
const count = Number(vehicleCountInput.value);
|
||||
const layouts = readExistingLayouts().slice(0, count);
|
||||
const payload = {
|
||||
vehicleCount: count,
|
||||
fleetCenter: {
|
||||
xMeters: Number(document.getElementById("fleet-x").value),
|
||||
yMeters: Number(document.getElementById("fleet-y").value),
|
||||
yawRadians: degToRad(
|
||||
Number(document.getElementById("fleet-yaw").value))
|
||||
},
|
||||
vehicles: layouts
|
||||
};
|
||||
|
||||
const response = await fetch("/api/configuration", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
const result = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
commandMessage.textContent =
|
||||
result.message || "布局配置失败。";
|
||||
commandMessage.classList.add("error");
|
||||
return;
|
||||
}
|
||||
|
||||
configuration = result;
|
||||
commandMessage.textContent =
|
||||
`已应用 ${configuration.vehicleCount} 辆车的车队布局。`;
|
||||
commandMessage.classList.remove("error");
|
||||
await updateVehicles();
|
||||
}
|
||||
|
||||
async function updateVehicles() {
|
||||
try {
|
||||
const response = await fetch("/api/vehicles", {
|
||||
cache: "no-store"
|
||||
});
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
vehicles = await response.json();
|
||||
renderVehicleSelector();
|
||||
renderCards();
|
||||
renderSelectedVehicleDetail();
|
||||
connectionDot.classList.add("online");
|
||||
connectionText.textContent = "离线仿真运行中";
|
||||
successfulUpdates += 1;
|
||||
} catch {
|
||||
connectionDot.classList.remove("online");
|
||||
connectionText.textContent = "仿真后端未连接";
|
||||
}
|
||||
}
|
||||
|
||||
async function sendCommand(command) {
|
||||
const vehicleId = vehicleSelect.value;
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/vehicles/${vehicleId}/commands/${command}`,
|
||||
{ method: "POST" });
|
||||
const result = await response.json();
|
||||
commandMessage.textContent = result.message;
|
||||
commandMessage.classList.toggle("error", !result.success);
|
||||
await updateVehicles();
|
||||
} catch {
|
||||
commandMessage.textContent =
|
||||
"命令发送失败，请检查仿真后端。";
|
||||
commandMessage.classList.add("error");
|
||||
}
|
||||
}
|
||||
|
||||
function getRemoteScale(input) {
|
||||
return Number(input.value) / 100;
|
||||
}
|
||||
|
||||
function updateRemoteLabels() {
|
||||
speedScaleValue.textContent = `${speedScaleInput.value}%`;
|
||||
steeringScaleValue.textContent =
|
||||
`${steeringScaleInput.value}%`;
|
||||
}
|
||||
|
||||
async function sendManualControl(
|
||||
throttle,
|
||||
steering,
|
||||
showMessage = false,
|
||||
vehicleIdOverride = null) {
|
||||
remoteThrottle = throttle;
|
||||
remoteSteering = steering;
|
||||
|
||||
const active =
|
||||
Math.abs(throttle) > 0.001 ||
|
||||
Math.abs(steering) > 0.001;
|
||||
remoteState.textContent = active
|
||||
? `油门 ${signed(throttle)} · 转向 ${signed(steering)}`
|
||||
: "已松开";
|
||||
remoteState.classList.toggle("active", active);
|
||||
|
||||
try {
|
||||
const vehicleId = vehicleIdOverride ??
|
||||
(active
|
||||
? vehicleSelect.value
|
||||
: remoteVehicleId ?? vehicleSelect.value);
|
||||
|
||||
if (active)
|
||||
remoteVehicleId = String(vehicleId);
|
||||
|
||||
const response = await fetch(
|
||||
`/api/vehicles/${vehicleId}/manual-control`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
throttle,
|
||||
steering,
|
||||
speedScale: getRemoteScale(speedScaleInput),
|
||||
steeringScale: getRemoteScale(steeringScaleInput)
|
||||
})
|
||||
});
|
||||
const result = await response.json();
|
||||
|
||||
if (!response.ok || showMessage) {
|
||||
commandMessage.textContent = result.message;
|
||||
commandMessage.classList.toggle(
|
||||
"error",
|
||||
!result.success);
|
||||
}
|
||||
|
||||
if (!active &&
|
||||
String(vehicleId) === remoteVehicleId) {
|
||||
remoteVehicleId = null;
|
||||
}
|
||||
} catch {
|
||||
commandMessage.textContent =
|
||||
"虚拟遥控命令发送失败，请检查仿真后端。";
|
||||
commandMessage.classList.add("error");
|
||||
}
|
||||
}
|
||||
|
||||
function stopRemote(showMessage = false) {
|
||||
const vehicleId = remoteVehicleId;
|
||||
pressedDriveKeys.clear();
|
||||
document.querySelectorAll(".remote-pad .pressed")
|
||||
.forEach(button => button.classList.remove("pressed"));
|
||||
return sendManualControl(
|
||||
0,
|
||||
0,
|
||||
showMessage,
|
||||
vehicleId);
|
||||
}
|
||||
|
||||
function driveFromKeyboard() {
|
||||
const forward =
|
||||
pressedDriveKeys.has("KeyW") ||
|
||||
pressedDriveKeys.has("ArrowUp");
|
||||
const backward =
|
||||
pressedDriveKeys.has("KeyS") ||
|
||||
pressedDriveKeys.has("ArrowDown");
|
||||
const left =
|
||||
pressedDriveKeys.has("KeyA") ||
|
||||
pressedDriveKeys.has("ArrowLeft");
|
||||
const right =
|
||||
pressedDriveKeys.has("KeyD") ||
|
||||
pressedDriveKeys.has("ArrowRight");
|
||||
|
||||
const throttle = Number(forward) - Number(backward);
|
||||
const steering = Number(left) - Number(right);
|
||||
sendManualControl(throttle, steering);
|
||||
}
|
||||
|
||||
function isTypingTarget(target) {
|
||||
return target instanceof HTMLInputElement ||
|
||||
target instanceof HTMLSelectElement ||
|
||||
target instanceof HTMLTextAreaElement;
|
||||
}
|
||||
|
||||
document.querySelectorAll(
|
||||
".remote-pad [data-throttle][data-steering]")
|
||||
.forEach(button => {
|
||||
button.addEventListener("pointerdown", event => {
|
||||
event.preventDefault();
|
||||
remotePointerId = event.pointerId;
|
||||
button.setPointerCapture(event.pointerId);
|
||||
button.classList.add("pressed");
|
||||
sendManualControl(
|
||||
Number(button.dataset.throttle),
|
||||
Number(button.dataset.steering));
|
||||
});
|
||||
|
||||
const release = event => {
|
||||
if (remotePointerId !== event.pointerId)
|
||||
return;
|
||||
remotePointerId = null;
|
||||
button.classList.remove("pressed");
|
||||
stopRemote();
|
||||
};
|
||||
|
||||
button.addEventListener("pointerup", release);
|
||||
button.addEventListener("pointercancel", release);
|
||||
button.addEventListener("lostpointercapture", release);
|
||||
});
|
||||
|
||||
document.getElementById("remote-stop").addEventListener(
|
||||
"click",
|
||||
() => stopRemote(true));
|
||||
|
||||
window.addEventListener("keydown", event => {
|
||||
if (isTypingTarget(event.target))
|
||||
return;
|
||||
|
||||
const driveKeys = [
|
||||
"KeyW", "KeyS", "KeyA", "KeyD",
|
||||
"ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"
|
||||
];
|
||||
if (!driveKeys.includes(event.code))
|
||||
return;
|
||||
|
||||
event.preventDefault();
|
||||
if (event.repeat)
|
||||
return;
|
||||
|
||||
pressedDriveKeys.add(event.code);
|
||||
driveFromKeyboard();
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", event => {
|
||||
if (!pressedDriveKeys.has(event.code))
|
||||
return;
|
||||
|
||||
event.preventDefault();
|
||||
pressedDriveKeys.delete(event.code);
|
||||
driveFromKeyboard();
|
||||
});
|
||||
|
||||
window.addEventListener("blur", () => stopRemote());
|
||||
document.addEventListener("visibilitychange", () => {
|
||||
if (document.hidden)
|
||||
stopRemote();
|
||||
});
|
||||
|
||||
[speedScaleInput, steeringScaleInput].forEach(input => {
|
||||
input.addEventListener("input", () => {
|
||||
updateRemoteLabels();
|
||||
if (remoteThrottle !== 0 || remoteSteering !== 0) {
|
||||
sendManualControl(
|
||||
remoteThrottle,
|
||||
remoteSteering);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById("reset-all").addEventListener(
|
||||
"click",
|
||||
async () => {
|
||||
await fetch("/api/reset", { method: "POST" });
|
||||
commandMessage.textContent = "全部仿真车已复位。";
|
||||
commandMessage.classList.remove("error");
|
||||
await updateVehicles();
|
||||
});
|
||||
|
||||
document.getElementById("apply-configuration")
|
||||
.addEventListener("click", applyConfiguration);
|
||||
|
||||
vehicleCountInput.addEventListener("change", () =>
|
||||
renderLayoutRows(Number(vehicleCountInput.value)));
|
||||
|
||||
vehicleSelect.addEventListener("change", () => {
|
||||
stopRemote();
|
||||
renderCards();
|
||||
renderSelectedVehicleDetail();
|
||||
});
|
||||
|
||||
window.addEventListener("resize", resizeCanvas);
|
||||
|
||||
setInterval(updateVehicles, 100);
|
||||
setInterval(() => {
|
||||
const now = performance.now();
|
||||
const seconds = (now - lastUpdateTime) / 1000;
|
||||
updateRate.textContent =
|
||||
`${(successfulUpdates / seconds).toFixed(0)} Hz`;
|
||||
successfulUpdates = 0;
|
||||
lastUpdateTime = now;
|
||||
}, 1000);
|
||||
|
||||
function signed(value) {
|
||||
return `${value >= 0 ? "+" : ""}${value.toFixed(1)}`;
|
||||
}
|
||||
|
||||
function degToRad(value) {
|
||||
return value * Math.PI / 180;
|
||||
}
|
||||
|
||||
function radToDeg(value) {
|
||||
return value * 180 / Math.PI;
|
||||
}
|
||||
|
||||
async function initialize() {
|
||||
try {
|
||||
await Promise.all([
|
||||
loadActions(),
|
||||
loadConfiguration(),
|
||||
updateVehicles()
|
||||
]);
|
||||
} catch {
|
||||
connectionText.textContent = "仿真初始化失败";
|
||||
commandMessage.textContent =
|
||||
"无法读取命令或布局配置，请检查后端。";
|
||||
commandMessage.classList.add("error");
|
||||
}
|
||||
}
|
||||
|
||||
resizeCanvas();
|
||||
updateRemoteLabels();
|
||||
initialize();
|
||||
requestAnimationFrame(draw);
|
||||
Reference in New Issue
Block a user