843 lines
24 KiB
JavaScript
843 lines
24 KiB
JavaScript
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);
|