481 lines
19 KiB
JavaScript
481 lines
19 KiB
JavaScript
const SIM_JOINT_ORDER = [
|
|
["fl", "hip_abduction"], ["fl", "hip_pitch"], ["fl", "knee"],
|
|
["fr", "hip_abduction"], ["fr", "hip_pitch"], ["fr", "knee"],
|
|
["rl", "hip_abduction"], ["rl", "hip_pitch"], ["rl", "knee"],
|
|
["rr", "hip_abduction"], ["rr", "hip_pitch"], ["rr", "knee"],
|
|
["fl", "wheel"], ["fr", "wheel"], ["rl", "wheel"], ["rr", "wheel"],
|
|
];
|
|
|
|
const $ = (id) => document.getElementById(id);
|
|
const PLOTS = {};
|
|
let CURRENT_STATUS = null;
|
|
let SSE_CONN = null;
|
|
let SSE_RECONNECT_TIMER = null;
|
|
let LAST_RENDER_TS = 0;
|
|
|
|
async function api(path, body = null) {
|
|
const options = { method: body ? "POST" : "GET" };
|
|
if (body) {
|
|
options.headers = { "Content-Type": "application/json" };
|
|
options.body = JSON.stringify(body);
|
|
}
|
|
const response = await fetch(path, options);
|
|
const payload = await response.json().catch(() => ({}));
|
|
if (!response.ok) {
|
|
throw new Error(payload.error || `HTTP ${response.status}`);
|
|
}
|
|
return payload;
|
|
}
|
|
|
|
function safeText(value, fallback = "--") {
|
|
return value === undefined || value === null || Number.isNaN(value) ? fallback : value;
|
|
}
|
|
|
|
function appendEvent(ev) {
|
|
const el = $("events-log");
|
|
if (!el) return;
|
|
const item = document.createElement("div");
|
|
let cls = "ev-name";
|
|
if (/ERROR|STOP|NAN/.test(ev.kind || "")) cls = "ev-stop";
|
|
else if (/FAULT|BRAKE/.test(ev.kind || "")) cls = "ev-fault";
|
|
else if (/DONE|CONNECTED|ENABLED|PRIMED/.test(ev.kind || "")) cls = "ev-ok";
|
|
const t = ev.t ? new Date(ev.t * 1000).toLocaleTimeString() : new Date().toLocaleTimeString();
|
|
const detail = Object.entries(ev)
|
|
.filter(([k]) => !["t", "kind"].includes(k))
|
|
.slice(0, 6)
|
|
.map(([k, v]) => `${k}=${typeof v === "number" ? v.toFixed(3) : JSON.stringify(v).slice(0, 80)}`)
|
|
.join(" ");
|
|
item.innerHTML = `<span class="ev-t">${t}</span> <span class="${cls}">${ev.kind}</span> <span style="color:#8e8e93">${detail}</span>`;
|
|
el.appendChild(item);
|
|
while (el.children.length > 300) el.removeChild(el.firstChild);
|
|
el.scrollTop = el.scrollHeight;
|
|
}
|
|
|
|
function setStage(stage, detail) {
|
|
const el = $("stage");
|
|
if (!el) return;
|
|
el.textContent = stage + (detail ? ` · ${detail}` : "");
|
|
el.className = "stage " + stage;
|
|
}
|
|
|
|
function setButtonEnabled(id, enabled) {
|
|
const el = $(id);
|
|
if (!el) return;
|
|
el.disabled = !enabled;
|
|
}
|
|
|
|
function updateButtons(status) {
|
|
if (!status) return;
|
|
const stage = status.stage || "DISCONNECTED";
|
|
const busy = !!status.busy;
|
|
const runtime = stage === "RUNTIME";
|
|
const connected = stage !== "DISCONNECTED" && stage !== "CONNECTING";
|
|
const enabled = ["ENABLED", "STARTING_UP", "STAND_HOLD", "RUNTIME"].includes(stage);
|
|
const canStartup = stage === "ENABLED";
|
|
const canRuntimeStart = stage === "STAND_HOLD";
|
|
const canRuntimeStop = runtime;
|
|
|
|
setButtonEnabled("btn-connect", !busy && stage === "DISCONNECTED");
|
|
setButtonEnabled("btn-disconnect", !busy && connected);
|
|
setButtonEnabled("btn-enable", !busy && ["CONNECTED", "FAULTED"].includes(stage));
|
|
setButtonEnabled("btn-disable", !busy && enabled);
|
|
setButtonEnabled("btn-startup", !busy && canStartup);
|
|
setButtonEnabled("btn-runtime-start", !busy && canRuntimeStart);
|
|
setButtonEnabled("btn-runtime-stop", !busy && canRuntimeStop);
|
|
setButtonEnabled("btn-reset-estop", !busy && stage === "ESTOPPED");
|
|
setButtonEnabled("btn-estop", connected);
|
|
}
|
|
|
|
function renderState(state) {
|
|
const el = $("state-summary");
|
|
if (!el) return;
|
|
if (!state) {
|
|
el.innerHTML = '<div class="state-item"><span class="k">STATUS</span><span class="v">NO DATA</span></div>';
|
|
return;
|
|
}
|
|
const metric = (k, v, cls = "") =>
|
|
`<div class="state-item"><span class="k">${k}</span><span class="v ${cls}">${v}</span></div>`;
|
|
const safetyText = ["NORMAL", "CLIP", "BRAKE", "ESTOP"][state.safety_level || 0];
|
|
const guardText = ["NORMAL", "WARN", "STOP"][state.guard_level || 0] || "NORMAL";
|
|
const imuCls = (state.imu_age_ms || 0) > 60 ? "bad" : (state.imu_age_ms || 0) > 30 ? "warn" : "";
|
|
const dtCls = (state.loop_dt_ms || 0) > 25 ? "bad" : (state.loop_dt_ms || 0) > 22 ? "warn" : "";
|
|
const gravityZ = state.proj_gravity?.[2] ?? -1;
|
|
const gravityCls = gravityZ > -0.5 ? "warn" : "";
|
|
const rawMax = Math.max(...(state.raw || [0]).map((x) => Math.abs(x || 0)));
|
|
const trackingErr = Math.max(
|
|
...(state.joint_pos || []).slice(0, 12).map((pos, i) => Math.abs(pos - ((state.target || [])[i] || 0))),
|
|
0,
|
|
);
|
|
el.innerHTML = [
|
|
metric("phase", safeText(state.phase, "?")),
|
|
metric("imu_age", `${(state.imu_age_ms || 0).toFixed(1)} ms`, imuCls),
|
|
metric("loop_dt", `${(state.loop_dt_ms || 0).toFixed(1)} ms`, dtCls),
|
|
metric("safety", safetyText, state.safety_level >= 2 ? "bad" : state.safety_level === 1 ? "warn" : ""),
|
|
metric("guard", guardText, state.guard_level >= 2 ? "bad" : state.guard_level === 1 ? "warn" : ""),
|
|
metric("holdover", String(state.holdover_total || 0)),
|
|
metric("raw max", rawMax.toFixed(2)),
|
|
metric("grav_z", gravityZ.toFixed(3), gravityCls),
|
|
metric("track_err", trackingErr.toFixed(3), trackingErr > 0.5 ? "bad" : trackingErr > 0.2 ? "warn" : ""),
|
|
].join("");
|
|
}
|
|
|
|
function renderDiagnostics(diag, state) {
|
|
if (!diag) return;
|
|
const setValue = (id, text, cls = "") => {
|
|
const el = $(id);
|
|
if (!el) return;
|
|
el.textContent = text;
|
|
el.className = "diag-value " + cls;
|
|
};
|
|
setValue("diag-norm", "Aligned", "success");
|
|
setValue("diag-latency", `${(state?.loop_dt_ms || 0).toFixed(1)} ms`, (state?.loop_dt_ms || 0) > 25 ? "danger" : (state?.loop_dt_ms || 0) > 22 ? "warning" : "success");
|
|
const trackErr = Math.max(
|
|
...(state?.joint_pos || []).slice(0, 12).map((pos, i) => Math.abs(pos - ((state?.target || [])[i] || 0))),
|
|
0,
|
|
);
|
|
setValue("diag-track-err", `${trackErr.toFixed(3)} rad`, trackErr > 0.5 ? "danger" : trackErr > 0.2 ? "warning" : "success");
|
|
setValue("diag-runtime", diag.runtime_active ? "ACTIVE" : "IDLE", diag.runtime_active ? "success" : "warning");
|
|
setValue("diag-runtime-age", diag.last_runtime_age_s == null ? "--" : `${diag.last_runtime_age_s.toFixed(2)} s`, diag.last_runtime_age_s != null && diag.last_runtime_age_s > 1.0 ? "danger" : "success");
|
|
setValue("diag-poll-age", diag.last_poll_age_s == null ? "--" : `${diag.last_poll_age_s.toFixed(2)} s`, diag.last_poll_age_s != null && diag.last_poll_age_s > 1.0 ? "warning" : "success");
|
|
setValue("diag-cmd-age", diag.last_command_age_s == null ? "--" : `${diag.last_command_age_s.toFixed(2)} s`);
|
|
setValue("diag-poll-errors", String(diag.poll_error_count || 0), (diag.poll_error_count || 0) > 0 ? "danger" : "success");
|
|
setValue("diag-api-errors", String(diag.api_error_count || 0), (diag.api_error_count || 0) > 0 ? "warning" : "success");
|
|
setValue("diag-suppression", String(diag.zero_cmd_suppression), diag.zero_cmd_suppression ? "warning" : "success");
|
|
const pathEl = $("diag-policy");
|
|
if (pathEl) pathEl.textContent = diag.policy_path || "--";
|
|
}
|
|
|
|
function renderFault(status) {
|
|
const faultBox = $("fault-box");
|
|
const faultText = $("fault-text");
|
|
const traceText = $("traceback-text");
|
|
if (!faultBox || !faultText || !traceText) return;
|
|
if (!status.fault_reason && !status.last_error) {
|
|
faultBox.classList.add("hidden");
|
|
faultText.textContent = "";
|
|
traceText.textContent = "";
|
|
return;
|
|
}
|
|
faultBox.classList.remove("hidden");
|
|
faultText.textContent = status.fault_reason || status.last_error || "";
|
|
traceText.textContent = status.last_traceback || "";
|
|
}
|
|
|
|
function applyStatus(status) {
|
|
if (!status) return;
|
|
CURRENT_STATUS = { ...(CURRENT_STATUS || {}), ...status };
|
|
const merged = CURRENT_STATUS;
|
|
if (merged.stage) setStage(merged.stage, merged.detail || "");
|
|
if (merged.busy !== undefined && $("busy")) $("busy").textContent = merged.busy ? " [BUSY]" : "";
|
|
if (merged.log_dir && $("logdir")) $("logdir").textContent = merged.log_dir;
|
|
updateButtons(merged);
|
|
renderFault(merged);
|
|
if (merged.last_state !== undefined) {
|
|
const now = performance.now();
|
|
if (now - LAST_RENDER_TS > 80) {
|
|
renderState(merged.last_state);
|
|
renderDiagnostics(merged.diagnostics || {}, merged.last_state);
|
|
if (window.viewer3d && window.viewer3d._isLoaded && merged.last_state.joint_pos) {
|
|
window.viewer3d.updateJoints(merged.last_state.joint_pos);
|
|
}
|
|
updateMotorsGrid(merged.last_state);
|
|
addPlotData(merged.last_state);
|
|
LAST_RENDER_TS = now;
|
|
}
|
|
}
|
|
}
|
|
|
|
async function refreshDebug() {
|
|
try {
|
|
const debug = await api("/api/debug");
|
|
if (debug.status) {
|
|
applyStatus(debug.status);
|
|
}
|
|
renderDiagnostics(debug.status?.diagnostics || {}, debug.status?.last_state || null);
|
|
renderFault(debug.status || {});
|
|
const diagJson = $("debug-json");
|
|
if (diagJson) diagJson.textContent = JSON.stringify(debug.status?.diagnostics || {}, null, 2);
|
|
} catch (err) {
|
|
appendEvent({ kind: "DEBUG_FETCH_ERROR", error: err.message });
|
|
}
|
|
}
|
|
|
|
function connectSSE() {
|
|
if (SSE_CONN) {
|
|
SSE_CONN.close();
|
|
SSE_CONN = null;
|
|
}
|
|
if (SSE_RECONNECT_TIMER) {
|
|
clearTimeout(SSE_RECONNECT_TIMER);
|
|
SSE_RECONNECT_TIMER = null;
|
|
}
|
|
const es = new EventSource("/events");
|
|
SSE_CONN = es;
|
|
es.onmessage = (event) => {
|
|
const ev = JSON.parse(event.data);
|
|
if (ev.kind === "STATUS_FULL" || ev.kind === "PULSE" || ev.kind === "STATUS") {
|
|
applyStatus(ev);
|
|
if (ev.fault_reason) appendEvent({ t: ev.t, kind: "FAULT_REASON", reason: ev.fault_reason });
|
|
} else {
|
|
appendEvent(ev);
|
|
}
|
|
};
|
|
es.onerror = () => {
|
|
if (SSE_CONN) {
|
|
SSE_CONN.close();
|
|
SSE_CONN = null;
|
|
}
|
|
if (!SSE_RECONNECT_TIMER) {
|
|
SSE_RECONNECT_TIMER = setTimeout(() => {
|
|
SSE_RECONNECT_TIMER = null;
|
|
connectSSE();
|
|
}, 1500);
|
|
}
|
|
};
|
|
}
|
|
|
|
window.jog = async (leg, joint, dir) => {
|
|
const delta = parseFloat($("jt-delta").value) * dir;
|
|
const kp = parseFloat($("jt-kp").value);
|
|
const kd = parseFloat($("jt-kd").value);
|
|
const duration = parseFloat($("jt-dur").value);
|
|
try {
|
|
await api("/api/test_motor", { leg, joint, delta_rad: delta, kp, kd, duration_s: duration });
|
|
appendEvent({ kind: "JOG_SENT", leg, joint, delta });
|
|
} catch (err) {
|
|
appendEvent({ kind: "JOG_ERROR", error: err.message, leg, joint });
|
|
}
|
|
};
|
|
|
|
function initMotorsGrid() {
|
|
const grid = $("motors-grid");
|
|
if (!grid) return;
|
|
const abbr = { hip_abduction: "H_ABD", hip_pitch: "H_PIT", knee: "KNEE", wheel: "WHEEL" };
|
|
grid.innerHTML = SIM_JOINT_ORDER.map(([leg, joint], i) => `
|
|
<div class="motor-row" id="mi-${i}">
|
|
<span class="m-status" id="ms-${i}" title="offline">●</span>
|
|
<span class="name" title="${leg}_${joint}">${leg.toUpperCase()}_${abbr[joint]}</span>
|
|
<span class="val pos">0.00</span>
|
|
<span class="val vel">0.00</span>
|
|
<span class="val tau">0.00</span>
|
|
<div class="m-jog">
|
|
<button class="btn-jog" onclick="window.jog('${leg}','${joint}',-1)">-</button>
|
|
<button class="btn-jog" onclick="window.jog('${leg}','${joint}',1)">+</button>
|
|
</div>
|
|
</div>
|
|
`).join("");
|
|
}
|
|
|
|
function updateMotorsGrid(state) {
|
|
if (!state || !state.joint_pos) return;
|
|
const positions = state.joint_pos;
|
|
const velocities = state.joint_vel || [];
|
|
const torques = state.joint_torque || [];
|
|
const stale = state.per_motor_stale || [];
|
|
for (let i = 0; i < 16; i += 1) {
|
|
const row = $("mi-" + i);
|
|
if (!row) continue;
|
|
const dot = $("ms-" + i);
|
|
if (dot) {
|
|
const count = stale[i] ?? 99;
|
|
if (count <= 0) {
|
|
dot.style.color = "#4ade80";
|
|
dot.title = "online";
|
|
} else if (count < 5) {
|
|
dot.style.color = "#facc15";
|
|
dot.title = `stale(${count})`;
|
|
} else {
|
|
dot.style.color = "#ef4444";
|
|
dot.title = `offline(${count})`;
|
|
}
|
|
}
|
|
row.children[2].textContent = (positions[i] || 0).toFixed(2);
|
|
row.children[3].textContent = (velocities[i] || 0).toFixed(2);
|
|
const tau = torques[i] || 0;
|
|
row.children[4].textContent = tau.toFixed(2);
|
|
row.children[4].style.color = Math.abs(tau) > 16.0 ? "var(--color-danger)" : "";
|
|
row.children[4].style.fontWeight = Math.abs(tau) > 16.0 ? "bold" : "";
|
|
}
|
|
}
|
|
|
|
function initPlots() {
|
|
const colors12 = ["#ff453a", "#ff9f0a", "#ffd60a", "#32ade6", "#0a84ff", "#5e5ce6", "#ff375f", "#bf5af2", "#30d158", "#66d4cf", "#8e8e93", "#c7c7cc"];
|
|
const specs = [
|
|
{ id: "plot-pos", title: "Leg Pos (12)", nCh: 12, colors: colors12 },
|
|
{ id: "plot-vel", title: "Wheel Vel (4)", nCh: 4, colors: ["#ff453a", "#32ade6", "#30d158", "#ffd60a"] },
|
|
{ id: "plot-imu", title: "IMU (gyro+gz)", nCh: 4, colors: ["#ff453a", "#30d158", "#0a84ff", "#ffd60a"] },
|
|
{ id: "plot-diag", title: "Diag (dt+age)", nCh: 2, colors: ["#ff453a", "#30d158"] },
|
|
];
|
|
const maxPts = 150;
|
|
specs.forEach((spec) => {
|
|
const canvas = $(spec.id);
|
|
if (!canvas) return;
|
|
canvas.width = canvas.parentElement.clientWidth;
|
|
canvas.height = 80;
|
|
PLOTS[spec.id] = {
|
|
ctx: canvas.getContext("2d"),
|
|
title: spec.title,
|
|
nCh: spec.nCh,
|
|
colors: spec.colors,
|
|
data: Array.from({ length: spec.nCh }, () => new Array(maxPts).fill(0)),
|
|
yMin: Array(spec.nCh).fill(Infinity),
|
|
yMax: Array(spec.nCh).fill(-Infinity),
|
|
maxPts,
|
|
};
|
|
});
|
|
}
|
|
|
|
function addPlotData(state) {
|
|
if (!state) return;
|
|
const channels = [
|
|
["plot-pos", (state.joint_pos || []).slice(0, 12)],
|
|
["plot-vel", (state.joint_vel || []).slice(12, 16)],
|
|
["plot-imu", [...(state.gyro || [0, 0, 0]), (state.proj_gravity || [0, 0, -1])[2]]],
|
|
["plot-diag", [state.loop_dt_ms || 0, state.imu_age_ms || 0]],
|
|
];
|
|
channels.forEach(([id, values]) => {
|
|
const plot = PLOTS[id];
|
|
if (!plot) return;
|
|
for (let i = 0; i < plot.nCh && i < values.length; i += 1) {
|
|
const data = plot.data[i];
|
|
data.push(values[i]);
|
|
if (data.length > plot.maxPts) data.shift();
|
|
if (values[i] < plot.yMin[i]) plot.yMin[i] = values[i];
|
|
if (values[i] > plot.yMax[i]) plot.yMax[i] = values[i];
|
|
}
|
|
drawPlot(plot);
|
|
});
|
|
}
|
|
|
|
function drawPlot(plot) {
|
|
const { ctx, data, colors, yMin, yMax, title, maxPts } = plot;
|
|
const canvas = ctx.canvas;
|
|
const width = canvas.width;
|
|
const height = canvas.height;
|
|
ctx.clearRect(0, 0, width, height);
|
|
ctx.fillStyle = "rgba(255,255,255,0.5)";
|
|
ctx.font = "10px monospace";
|
|
ctx.fillText(title, 4, 12);
|
|
const margin = { l: 30, r: 4, t: 16, b: 4 };
|
|
const plotW = width - margin.l - margin.r;
|
|
const plotH = height - margin.t - margin.b;
|
|
if (plotW <= 0 || plotH <= 0) return;
|
|
for (let i = 0; i < data.length; i += 1) {
|
|
if (yMin[i] === Infinity) {
|
|
yMin[i] = -1;
|
|
yMax[i] = 1;
|
|
}
|
|
const curMin = Math.min(...data[i]);
|
|
const curMax = Math.max(...data[i]);
|
|
yMin[i] = yMin[i] * 0.99 + curMin * 0.01;
|
|
yMax[i] = yMax[i] * 0.99 + curMax * 0.01;
|
|
}
|
|
const globalMin = Math.min(...yMin);
|
|
const globalMax = Math.max(...yMax);
|
|
const range = globalMax - globalMin || 1;
|
|
data.forEach((series, i) => {
|
|
if (series.length < 2) return;
|
|
ctx.strokeStyle = colors[i] || "#8e8e93";
|
|
ctx.lineWidth = 1.0;
|
|
ctx.beginPath();
|
|
series.forEach((value, j) => {
|
|
const x = margin.l + (j / maxPts) * plotW;
|
|
const y = margin.t + plotH - ((value - globalMin) / range) * plotH;
|
|
if (j === 0) ctx.moveTo(x, y);
|
|
else ctx.lineTo(x, y);
|
|
});
|
|
ctx.stroke();
|
|
});
|
|
ctx.fillStyle = "rgba(255,255,255,0.4)";
|
|
ctx.font = "9px monospace";
|
|
ctx.fillText(globalMax.toFixed(1), 2, margin.t + 8);
|
|
ctx.fillText(globalMin.toFixed(1), 2, margin.t + plotH - 2);
|
|
}
|
|
|
|
async function refreshLogs() {
|
|
try {
|
|
const result = await api("/api/logs");
|
|
const tbody = document.querySelector("#logs-table tbody");
|
|
if (!tbody) return;
|
|
tbody.innerHTML = result.sessions.map((s) => `
|
|
<tr>
|
|
<td style="font-family:monospace">${s.id.slice(-8)}</td>
|
|
<td>${s.state_csv ? `<a href="/api/logs/${s.id}/state.csv" download>CSV</a>` : "—"}</td>
|
|
<td>${s.events_jsonl ? `<a href="/api/logs/${s.id}/events.jsonl" download>JSONL</a>` : "—"}</td>
|
|
<td>${s.size_kb} KB</td>
|
|
</tr>
|
|
`).join("");
|
|
} catch (err) {
|
|
appendEvent({ kind: "LOG_REFRESH_ERROR", error: err.message });
|
|
}
|
|
}
|
|
|
|
let cmdTimer = null;
|
|
function sendCmd() {
|
|
if (cmdTimer) return;
|
|
cmdTimer = setTimeout(() => {
|
|
cmdTimer = null;
|
|
api("/api/cmd", {
|
|
vx: parseFloat($("cmd-vx").value),
|
|
vy: parseFloat($("cmd-vy").value),
|
|
yaw: parseFloat($("cmd-yaw").value),
|
|
}).catch((err) => appendEvent({ kind: "CMD_ERROR", error: err.message }));
|
|
}, 50);
|
|
}
|
|
|
|
function bind() {
|
|
$("btn-connect").onclick = () => api("/api/connect", { dry_run: $("dry-run").checked }).catch((err) => appendEvent({ kind: "CONNECT_ERROR", error: err.message }));
|
|
$("btn-disconnect").onclick = () => api("/api/disconnect", {}).catch((err) => appendEvent({ kind: "DISCONNECT_ERROR", error: err.message }));
|
|
$("btn-enable").onclick = () => api("/api/enable", {}).catch((err) => appendEvent({ kind: "ENABLE_ERROR", error: err.message }));
|
|
$("btn-disable").onclick = () => api("/api/disable", {}).catch((err) => appendEvent({ kind: "DISABLE_ERROR", error: err.message }));
|
|
$("btn-startup").onclick = () => api("/api/startup", {}).catch((err) => appendEvent({ kind: "STARTUP_ERROR", error: err.message }));
|
|
$("btn-runtime-start").onclick = () => api("/api/runtime/start", { policy_path: $("policy-path").value || null }).catch((err) => appendEvent({ kind: "RUNTIME_START_ERROR", error: err.message }));
|
|
$("btn-runtime-stop").onclick = () => api("/api/runtime/stop", {}).catch((err) => appendEvent({ kind: "RUNTIME_STOP_ERROR", error: err.message }));
|
|
$("btn-estop").onclick = () => api("/api/estop", {}).catch((err) => appendEvent({ kind: "ESTOP_ERROR", error: err.message }));
|
|
$("btn-reset-estop").onclick = () => api("/api/reset_estop", {}).catch((err) => appendEvent({ kind: "RESET_ESTOP_ERROR", error: err.message }));
|
|
$("btn-refresh-debug").onclick = () => refreshDebug();
|
|
|
|
["vx", "vy", "yaw"].forEach((key) => {
|
|
const el = $("cmd-" + key);
|
|
el.oninput = () => {
|
|
$("cmd-" + key + "-v").textContent = parseFloat(el.value).toFixed(2);
|
|
sendCmd();
|
|
};
|
|
});
|
|
$("btn-cmd-zero").onclick = () => {
|
|
["vx", "vy", "yaw"].forEach((key) => {
|
|
const el = $("cmd-" + key);
|
|
el.value = 0;
|
|
$("cmd-" + key + "-v").textContent = "0.00";
|
|
});
|
|
sendCmd();
|
|
};
|
|
|
|
const jtSlider = $("jt-delta");
|
|
jtSlider.oninput = () => { $("jt-delta-v").textContent = parseFloat(jtSlider.value).toFixed(2); };
|
|
|
|
$("btn-show-logs").onclick = () => {
|
|
refreshLogs();
|
|
$("logs-modal").classList.remove("hidden");
|
|
};
|
|
$("btn-close-logs").onclick = () => $("logs-modal").classList.add("hidden");
|
|
}
|
|
|
|
window.addEventListener("DOMContentLoaded", () => {
|
|
initMotorsGrid();
|
|
bind();
|
|
initPlots();
|
|
connectSSE();
|
|
refreshLogs();
|
|
refreshDebug();
|
|
updateButtons({ stage: "DISCONNECTED", busy: false });
|
|
setInterval(refreshLogs, 10000);
|
|
setInterval(refreshDebug, 5000);
|
|
});
|
|
|
|
window.addEventListener("resize", () => {
|
|
Object.values(PLOTS).forEach((plot) => {
|
|
plot.ctx.canvas.width = plot.ctx.canvas.parentElement.clientWidth;
|
|
});
|
|
});
|