From e138431bba5b28b3519111bfecd5c01fe99f820e Mon Sep 17 00:00:00 2001 From: Jason717717 <1354471825@qq.com> Date: Mon, 12 May 2025 22:13:29 -0500 Subject: [PATCH 1/2] switch icon for splits --- .../sr_viz/threeD/src/components/PanelManager.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/GEMstack/onboard/visualization/sr_viz/threeD/src/components/PanelManager.tsx b/GEMstack/onboard/visualization/sr_viz/threeD/src/components/PanelManager.tsx index 98aad4737..3543ce57c 100644 --- a/GEMstack/onboard/visualization/sr_viz/threeD/src/components/PanelManager.tsx +++ b/GEMstack/onboard/visualization/sr_viz/threeD/src/components/PanelManager.tsx @@ -218,7 +218,7 @@ const PanelMenu = ({ }} > - + Split Horizontally @@ -229,7 +229,7 @@ const PanelMenu = ({ }} > - + Split Vertically From e85d1bf8c7d25d48dbbbc51fe56c76e1a85019c2 Mon Sep 17 00:00:00 2001 From: Jason717717 <1354471825@qq.com> Date: Tue, 13 May 2025 02:35:01 -0500 Subject: [PATCH 2/2] fix issues for build --- .../visualization/sr_viz/threeD/package-lock.json | 7 ++++--- .../onboard/visualization/sr_viz/threeD/package.json | 1 + .../sr_viz/threeD/src/app/rosbagViewer/page.tsx | 1 + .../sr_viz/threeD/src/components/PanelManager.tsx | 10 +++++----- .../sr_viz/threeD/src/components/PointCloudPanel.tsx | 10 +++++----- .../sr_viz/threeD/src/components/RosbagViewer.tsx | 8 ++++---- 6 files changed, 20 insertions(+), 17 deletions(-) diff --git a/GEMstack/onboard/visualization/sr_viz/threeD/package-lock.json b/GEMstack/onboard/visualization/sr_viz/threeD/package-lock.json index 5414b9c5c..2ae9e1513 100644 --- a/GEMstack/onboard/visualization/sr_viz/threeD/package-lock.json +++ b/GEMstack/onboard/visualization/sr_viz/threeD/package-lock.json @@ -22,6 +22,7 @@ "react-icons": "^5.5.0", "react-resizable-panels": "^3.0.1", "three": "^0.175.0", + "three-stdlib": "^2.36.0", "urdf-loader": "^0.12.4" }, "devDependencies": { @@ -6345,9 +6346,9 @@ } }, "node_modules/three-stdlib": { - "version": "2.35.15", - "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.35.15.tgz", - "integrity": "sha512-2XbhiOV7jVCchUoWxTmsj5dNhTe8eYb58Nyrfoa2F2yL+6h/+2VRaU2gENljRW1d/P1mk4/uwNzbdkKWV3hwzw==", + "version": "2.36.0", + "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.36.0.tgz", + "integrity": "sha512-kv0Byb++AXztEGsULgMAs8U2jgUdz6HPpAB/wDJnLiLlaWQX2APHhiTJIN7rqW+Of0eRgcp7jn05U1BsCP3xBA==", "dependencies": { "@types/draco3d": "^1.4.0", "@types/offscreencanvas": "^2019.6.4", diff --git a/GEMstack/onboard/visualization/sr_viz/threeD/package.json b/GEMstack/onboard/visualization/sr_viz/threeD/package.json index ccf138646..73f65fb57 100644 --- a/GEMstack/onboard/visualization/sr_viz/threeD/package.json +++ b/GEMstack/onboard/visualization/sr_viz/threeD/package.json @@ -23,6 +23,7 @@ "react-icons": "^5.5.0", "react-resizable-panels": "^3.0.1", "three": "^0.175.0", + "three-stdlib": "^2.36.0", "urdf-loader": "^0.12.4" }, "devDependencies": { diff --git a/GEMstack/onboard/visualization/sr_viz/threeD/src/app/rosbagViewer/page.tsx b/GEMstack/onboard/visualization/sr_viz/threeD/src/app/rosbagViewer/page.tsx index 18475ac99..411ea3acd 100644 --- a/GEMstack/onboard/visualization/sr_viz/threeD/src/app/rosbagViewer/page.tsx +++ b/GEMstack/onboard/visualization/sr_viz/threeD/src/app/rosbagViewer/page.tsx @@ -1,5 +1,6 @@ "use client"; +import React from "react"; import RosbagViewer from "@/components/RosbagViewer"; import { useRouter } from "next/navigation"; import Button from "@mui/material/Button"; diff --git a/GEMstack/onboard/visualization/sr_viz/threeD/src/components/PanelManager.tsx b/GEMstack/onboard/visualization/sr_viz/threeD/src/components/PanelManager.tsx index 3543ce57c..2cfc438dd 100644 --- a/GEMstack/onboard/visualization/sr_viz/threeD/src/components/PanelManager.tsx +++ b/GEMstack/onboard/visualization/sr_viz/threeD/src/components/PanelManager.tsx @@ -42,7 +42,7 @@ export const PanelManager = ({ }) => { const [rootPanel, setRootPanel] = useState(createPanel("video")); - const renderPanelNode = (node: PanelNode): JSX.Element => { + const renderPanelNode = (node: PanelNode) => { if ("split" in node) { return ( @@ -94,12 +94,12 @@ export const PanelManager = ({ rootPanel={rootPanel} /> {node.type === "video" && ( - + } initialTopic={Object.keys(messageMap["video"])[0]} /> )} {node.type === "pointcloud" && ( } + tfMessages={messageMap["tf"] as any[]} initialTopic={Object.keys(messageMap["pointcloud"])[0]} /> )} @@ -152,7 +152,7 @@ function closePanel( return node; } const newRoot = helper(root); - setRoot(newRoot); + if (newRoot) setRoot(newRoot); } function changePanelType( diff --git a/GEMstack/onboard/visualization/sr_viz/threeD/src/components/PointCloudPanel.tsx b/GEMstack/onboard/visualization/sr_viz/threeD/src/components/PointCloudPanel.tsx index 339720961..69e6063b7 100644 --- a/GEMstack/onboard/visualization/sr_viz/threeD/src/components/PointCloudPanel.tsx +++ b/GEMstack/onboard/visualization/sr_viz/threeD/src/components/PointCloudPanel.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useRef, useState } from "react"; import { useScrubber } from "./ScrubberContext"; import * as THREE from "three"; -import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; +import { OrbitControls } from "three-stdlib"; import { Select, SelectChangeEvent, MenuItem } from "@mui/material"; function parsePointCloud2(msg: any): THREE.Points { @@ -116,10 +116,10 @@ export const PointCloudPanel = ({ const mountRef = useRef(null); const { startTime, currentTime } = useScrubber(); const rendererRef = useRef(null); - const cameraRef = useRef(); - const sceneRef = useRef(); - const controlsRef = useRef(); - const pointCloudRef = useRef(); + const cameraRef = useRef(null); + const sceneRef = useRef(null); + const controlsRef = useRef(null); + const pointCloudRef = useRef(null); const [selectedTopic, setSelectedTopic] = useState( initialTopic || Object.keys(messages)[0] || "" ); diff --git a/GEMstack/onboard/visualization/sr_viz/threeD/src/components/RosbagViewer.tsx b/GEMstack/onboard/visualization/sr_viz/threeD/src/components/RosbagViewer.tsx index d2d9d2867..a42dd2191 100644 --- a/GEMstack/onboard/visualization/sr_viz/threeD/src/components/RosbagViewer.tsx +++ b/GEMstack/onboard/visualization/sr_viz/threeD/src/components/RosbagViewer.tsx @@ -56,8 +56,8 @@ export default function RosbagViewer() { if (!file) return; setMessageMap({ - video: [], - pointcloud: [], + video: {}, + pointcloud: {}, tf: [], }); setLoading(true); @@ -72,7 +72,7 @@ export default function RosbagViewer() { (conn) => conn.type ); setTopics(topicNames); - setTypes(topicTypes); + setTypes(topicTypes as string[]); // console.log("Topics:", topicNames, topicTypes); const videoMessages: Record = {}; @@ -84,7 +84,7 @@ export default function RosbagViewer() { topic: msg.topic, data: msg.message, }; - const type = topicTypes[topicNames.indexOf(msg.topic)]; + const type = topicTypes[topicNames.indexOf(msg.topic)] as string; if (type.includes("Image")) { if (!videoMessages[msg.topic]) videoMessages[msg.topic] = []; videoMessages[msg.topic].push(entry);