add wust typr mpc and mutipule x

wust_vision-main/static/js/chart_logic.js

@@ -0,0 +1,249 @@
+const UPDATE_HZ = 100;
+const UPDATE_INTERVAL_MS = 1000 / UPDATE_HZ;
+
+let updateTimer = null;
+
+function startUpdateLoop() {
+  if (updateTimer) return;
+  updateTimer = setInterval(fetchDataAndUpdateCharts, UPDATE_INTERVAL_MS);
+}
+startUpdateLoop();
+
+const chartMap = {
+  raw_yaw: { label: "Raw Yaw" },
+  raw_pitch: { label: "Raw Pitch" },
+  yaw: { label: "Yaw" },
+  pitch: { label: "Pitch" },
+  armor_dis: { label: "Armor Distance" },
+  armor_x: { label: "Armor X" },
+  armor_y: { label: "Armor Y" },
+  armor_z: { label: "Armor Z" },
+  armor_yaw: { label: "Armor Yaw" },
+  ypd_p: { label: "Ypd Pitch" },
+  ypd_y: { label: "Ypd Yaw" },
+  rune_obs: { label: "Rune Obs" },
+  rune_pre: { label: "Rune Pre" },
+  rune_obsv: { label: "Rune ObsV" },
+  rune_fitv: { label: "Rune FitV" },
+  gimbal_yaw: { label: "Gimbal Yaw" },
+  gimbal_pitch: { label: "Gimbal Pitch" },
+  target_v_yaw: { label: "Target V Yaw" },
+  control_v_yaw: { label: "Control V Yaw" },
+  control_v_pitch: { label: "Control V Pitch" },
+  yaw_diff: { label: "Yaw Diff" },
+  fire: { label: "Fire" },
+  rune_dis: { label: "Rune Distance" },
+  fly_time: { label: "Fly Time" },
+  control_a_yaw: { label: "Control A Yaw" },
+  control_a_pitch: { label: "Control A Pitch" },
+};
+
+const mainCtx = document.getElementById("mainChart").getContext("2d");
+let individualCharts = {};
+let individualRanges = {};
+
+const commonChartOptions = {
+  animation: false,
+  responsive: false,
+  interaction: {
+    mode: "nearest",
+    axis: "x",
+    intersect: false,
+  },
+  elements: {
+    line: {
+      tension: 0,
+    },
+    point: {
+      radius: 0,
+      hoverRadius: 0,
+    },
+  },
+  plugins: {
+    tooltip: {
+      enabled: true,
+      mode: "nearest",
+      intersect: false,
+      backgroundColor: "rgba(0, 188, 212, 0.85)",
+      padding: 8,
+      cornerRadius: 6,
+      titleFont: {
+        size: 12,
+        family: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
+      },
+      bodyFont: {
+        size: 16,
+        family: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
+        weight: "bold",
+      },
+      callbacks: {
+        title: () => "",
+        label: (context) => `值: ${context.parsed.y.toFixed(3)}`,
+      },
+    },
+    legend: {
+      labels: {
+        font: {
+          size: 14,
+          family: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
+        },
+        color: "#00bcd4",
+      },
+    },
+  },
+  scales: {
+    x: {
+      display: false,   // ✅ 关键：彻底关闭 X 轴显示
+    },
+    y: {
+      title: { display: true, text: "Value" },
+      ticks: {
+        color: "#00bcd4",
+        font: {
+          size: 14,
+          family: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
+        },
+      },
+      grid: { color: "#2f3241" },
+    },
+  },
+};
+
+const mainChart = new Chart(mainCtx, {
+  type: "line",
+  data: { labels: [], datasets: [] },
+  options: commonChartOptions,
+});
+
+function updateMainRange() {
+  const maxPts = parseInt(document.getElementById("mainMaxPts").value) || 100;
+  mainChart._maxPoints = maxPts;
+}
+
+function updateCharts() {
+  const showMulti = document.getElementById("multiLineChart").checked;
+  const selected = Array.from(
+    document.querySelectorAll(
+      '.chart-select-controls input[type="checkbox"]:checked'
+    )
+  )
+    .map((cb) => cb.dataset.key)
+    .filter(Boolean);
+
+  const container = document.getElementById("individualCharts");
+  container.innerHTML = "";
+  individualCharts = {};
+  individualRanges = {};
+
+  if (showMulti) {
+    mainChart.data.datasets = selected.map((key) => ({
+      label: chartMap[key]?.label || key,
+      data: [],
+      fill: false,
+    }));
+  } else {
+    mainChart.data.datasets = [];
+  }
+  mainChart.update();
+
+  selected.forEach((key) => {
+    const box = document.createElement("div");
+    box.className = "chart-box";
+    const title = document.createElement("h4");
+    title.textContent = chartMap[key]?.label || key;
+    box.appendChild(title);
+
+    const rdiv = document.createElement("div");
+    rdiv.className = "range-controls";
+    rdiv.innerHTML = `
+      <label><input type="checkbox" class="childEnable" /> 固定范围</label>
+      min:<input type="number" class="childMin" value="0" step="0.1" />
+      max:<input type="number" class="childMax" value="1" step="0.1" />
+      <button type="button" class="applyRange">应用</button>
+    `;
+    box.appendChild(rdiv);
+
+    const canvas = document.createElement("canvas");
+    canvas.width = 440;
+    canvas.height = 280;
+    box.appendChild(canvas);
+    container.appendChild(box);
+
+    const ctx = canvas.getContext("2d");
+    const chart = new Chart(ctx, {
+      type: "line",
+      data: {
+        labels: [],
+        datasets: [
+          {
+            label: chartMap[key]?.label || key,
+            data: [],
+            fill: false,
+          },
+        ],
+      },
+      options: commonChartOptions,
+    });
+    individualCharts[key] = chart;
+
+    const applyBtn = rdiv.querySelector(".applyRange");
+    applyBtn.addEventListener("click", () => {
+      const enabled = rdiv.querySelector(".childEnable").checked;
+      const minVal = parseFloat(rdiv.querySelector(".childMin").value);
+      const maxVal = parseFloat(rdiv.querySelector(".childMax").value);
+      chart.options.scales.y.min = enabled ? minVal : undefined;
+      chart.options.scales.y.max = enabled ? maxVal : undefined;
+      chart.update("none");
+    });
+  });
+}
+
+async function fetchDataAndUpdateCharts() {
+  try {
+    const res = await fetch("/data");
+    const json = await res.json();
+    const time = json.time;
+    if (!time) return;
+
+    const maxPts = mainChart._maxPoints || 100;
+    const start = time.length > maxPts ? time.length - maxPts : 0;
+    const slicedTime = time.slice(start);
+
+    if (document.getElementById("multiLineChart").checked) {
+      mainChart.data.labels = slicedTime;
+      const keys = Object.keys(individualCharts);
+      mainChart.data.datasets.forEach((ds, i) => {
+        const key = keys[i];
+        ds.data = json[key]?.slice(start) || [];
+      });
+
+      const allValues = mainChart.data.datasets.flatMap(ds => ds.data);
+      if (allValues.length > 0) {
+        const minVal = Math.min(...allValues);
+        const maxVal = Math.max(...allValues);
+        const padding = (maxVal - minVal) * 0.1 || 1; // 至少留1的余量
+        mainChart.options.scales.y.min = minVal - padding;
+        mainChart.options.scales.y.max = maxVal + padding;
+      }
+      mainChart.update();
+    }
+
+    Object.entries(individualCharts).forEach(([key, ch]) => {
+      ch.data.labels = slicedTime;
+      ch.data.datasets[0].data = json[key]?.slice(start) || [];
+
+      // 每个子图也加 margin，避免线条贴边
+      const arr = ch.data.datasets[0].data;
+      if (arr.length > 0) {
+        const minVal = Math.min(...arr);
+        const maxVal = Math.max(...arr);
+        const padding = (maxVal - minVal) * 0.1 || 1;
+        ch.options.scales.y.min = minVal - padding;
+        ch.options.scales.y.max = maxVal + padding;
+      }
+      ch.update();
+    });
+  } catch (e) {
+    console.error("fetch error:", e);
+  }
+}

wust_vision-main/static/js/json_view.js

@@ -0,0 +1,61 @@
+function jsonToHtml(data, container) {
+  const title = container.querySelector("h3");
+  container.innerHTML = "";
+  if (title) container.appendChild(title);
+  const contentDiv = document.createElement("div");
+  container.appendChild(contentDiv);
+
+  function buildTree(d, parent) {
+    if (typeof d !== "object" || d === null) {
+      parent.textContent = String(d);
+      return;
+    }
+    const ul = document.createElement("ul");
+    ul.className = "json-tree";
+    const entries = Array.isArray(d) ? d.map((v, i) => [i, v]) : Object.entries(d);
+    entries.forEach(([k, v]) => {
+      const li = document.createElement("li");
+      if (typeof v === "object" && v !== null) {
+        const details = document.createElement("details");
+        details.open = true;
+        const summary = document.createElement("summary");
+        summary.textContent = k;
+        details.appendChild(summary);
+        const childUl = document.createElement("ul");
+        childUl.className = "json-tree";
+        buildTree(v, childUl);
+        details.appendChild(childUl);
+        li.appendChild(details);
+      } else {
+        li.textContent = `${k}: ${v}`;
+      }
+      ul.appendChild(li);
+    });
+    parent.appendChild(ul);
+  }
+  buildTree(data, contentDiv);
+}
+
+let lastSerialData = null, lastTargetData = null;
+
+async function fetchAndDisplayJsonWithTree(id, url) {
+  const parent = document.getElementById(id + "-container");
+  const cont = document.getElementById(id);
+  try {
+    parent.classList.add("json-updating");
+    const res = await fetch(url);
+    if (!res.ok) throw new Error(res.statusText);
+    const data = await res.json();
+
+    const prev = id === "json-serial" ? lastSerialData : lastTargetData;
+    if (JSON.stringify(data) !== JSON.stringify(prev)) {
+      jsonToHtml(data, cont);
+      if (id === "json-serial") lastSerialData = data;
+      else lastTargetData = data;
+    }
+  } catch (e) {
+    console.warn(`请求失败(${url}): ${e.message}`);
+  } finally {
+    parent.classList.remove("json-updating");
+  }
+}

wust_vision-main/static/js/main.js

@@ -0,0 +1,35 @@
+function showTab(tab) {
+  document.getElementById("video-tab").style.display = tab === "video" ? "flex" : "none";
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  updateCharts();
+  updateMainRange();
+  setInterval(() => {
+    fetchDataAndUpdateCharts();
+    fetchAndDisplayJsonWithTree("json-target", "/target_log");
+    fetchAndDisplayJsonWithTree("json-serial", "/serial_log");
+  }, 200);
+});
+function toggleFullscreen() {
+  const container = document.querySelector('.video-container');
+
+  if (!document.fullscreenElement) {
+    container.requestFullscreen().then(() => {
+      document.body.classList.add('fullscreen-mode');
+    }).catch((err) => {
+      alert(`无法进入全屏模式: ${err.message}`);
+    });
+  } else {
+    document.exitFullscreen().then(() => {
+      document.body.classList.remove('fullscreen-mode');
+    });
+  }
+}
+
+// 监听用户按 ESC 或其他方式退出全屏
+document.addEventListener('fullscreenchange', () => {
+  if (!document.fullscreenElement) {
+    document.body.classList.remove('fullscreen-mode');
+  }
+});