gardentech
f34817d5b6
FastAPI backend + vanilla JS frontend for LiDAR/camera startup, camera settings, and rosbag recording, unifying the previous scan_gui/scan_gui_dual/ scan_gui_triple desktop tools into one web app.
34 lines
1005 B
JavaScript
34 lines
1005 B
JavaScript
// Builds the MJPEG camera preview grid. One <img> per camera, no client JS
|
|
// decoding needed — the browser natively renders multipart MJPEG streams.
|
|
|
|
export function buildCameraGrid(cameras) {
|
|
const grid = document.getElementById("camera-grid");
|
|
grid.innerHTML = "";
|
|
for (const cam of cameras) {
|
|
const pane = document.createElement("div");
|
|
pane.className = "camera-pane";
|
|
|
|
const title = document.createElement("div");
|
|
title.className = "cam-title";
|
|
title.textContent = `${cam.id} (${cam.topic})`;
|
|
pane.appendChild(title);
|
|
|
|
const img = document.createElement("img");
|
|
img.dataset.camId = cam.id;
|
|
img.alt = cam.id;
|
|
pane.appendChild(img);
|
|
|
|
grid.appendChild(pane);
|
|
}
|
|
}
|
|
|
|
export function setPreviewActive(active) {
|
|
document.querySelectorAll("#camera-grid img").forEach((img) => {
|
|
if (active) {
|
|
if (!img.src) img.src = `/api/camera/${img.dataset.camId}/stream.mjpg?t=${Date.now()}`;
|
|
} else {
|
|
img.removeAttribute("src");
|
|
}
|
|
});
|
|
}
|