Rosbag image and point cloud viewer

GEMstack/onboard/visualization/sr_viz/threeD/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@foxglove/rosbag": "^0.4.1",
     "@mui/icons-material": "^7.0.2",
     "@mui/material": "^7.0.2",
     "@react-three/drei": "^10.0.6",
@@ -20,6 +21,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-icons": "^5.5.0",
+    "react-resizable-panels": "^3.0.1",
     "three": "^0.175.0",
     "urdf-loader": "^0.12.4"
   },

GEMstack/onboard/visualization/sr_viz/threeD/src/app/page.tsx

@@ -6,53 +6,80 @@ import CanvasWrapper from "@/components/CanvasWrapper";
 import Scrubber from "@/components/Scrubber";
 import { VehicleInfoPanel } from "@/components/VehicleInfoPanel";
 import { usePlaybackTime } from "@/hooks/usePlaybackTime";
+import { useRouter } from "next/navigation";
+import Button from "@mui/material/Button";
+import PageviewIcon from "@mui/icons-material/Pageview";
 
 export default function HomePage() {
-  const {
-    time,
-    reset,
-    restart,
-    play,
-    togglePlay,
-    speed,
-    setPlaybackSpeed,
-    moveToTime,
-    duration,
-    setDuration,
-  } = usePlaybackTime();
+    const router = useRouter();
+    const {
+        time,
+        reset,
+        restart,
+        play,
+        setPlay,
+        togglePlay,
+        speed,
+        setPlaybackSpeed,
+        moveToTime,
+        duration,
+        setDuration,
+    } = usePlaybackTime();
 
-  const [searchParams, setSearchParams] = useState<{
-    folder?: string;
-    file?: string;
-  }>({});
+    const [searchParams, setSearchParams] = useState<{
+        folder?: string;
+        file?: string;
+    }>({});
 
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      const params = new URLSearchParams(window.location.search);
-      const folder = params.get("folder") || undefined;
-      const file = params.get("file") || undefined;
-      setSearchParams({ folder, file });
-    }
-  }, []);
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            const params = new URLSearchParams(window.location.search);
+            const folder = params.get("folder") || undefined;
+            const file = params.get("file") || undefined;
+            setSearchParams({ folder, file });
+        }
+    }, []);
 
-  return (
-    <main className="relative w-screen h-screen bg-white">
-      <ControlPanel
-        reset={reset}
-        folder={searchParams.folder}
-        file={searchParams.file}
-      />
-      <CanvasWrapper time={time} setDuration={setDuration} />
-      <Scrubber
-        time={time}
-        play={play}
-        togglePlay={togglePlay}
-        restart={restart}
-        setPlaybackSpeed={setPlaybackSpeed}
-        moveToTime={moveToTime}
-        duration={duration}
-      />
-      <VehicleInfoPanel time={time} />
-    </main>
-  );
+    const handleRedirect = () => {
+        setPlay(false);
+        router.replace("/rosbagViewer");
+    };
+
+    return (
+        <main className="relative w-screen h-screen bg-white">
+            <div className="flex items-center fixed top-5 right-0 z-50 group w-[200px] h-[48px]">
+                <div className="w-fit transform translate-x-34/35 transition-transform duration-300 group-hover:translate-x-0">
+                    <Button
+                        variant="contained"
+                        startIcon={<PageviewIcon />}
+                        onClick={handleRedirect}
+                        sx={{
+                            color: "white",
+                            backgroundColor: "black",
+                            "&:hover": { backgroundColor: "gray" },
+                            borderRadius: "9999px",
+                        }}
+                    >
+                        Go to Viewer
+                    </Button>
+                </div>
+            </div>
+            <ControlPanel
+                reset={reset}
+                folder={searchParams.folder}
+                file={searchParams.file}
+            />
+            <CanvasWrapper time={time} setDuration={setDuration} />
+            <Scrubber
+                time={time}
+                play={play}
+                togglePlay={togglePlay}
+                restart={restart}
+                setPlaybackSpeed={setPlaybackSpeed}
+                moveToTime={moveToTime}
+                duration={duration}
+            />
+            <VehicleInfoPanel time={time} />
+        </main>
+    );
 }

GEMstack/onboard/visualization/sr_viz/threeD/src/app/rosbagViewer/page.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import RosbagViewer from "@/components/RosbagViewer";
+import { useRouter } from "next/navigation";
+import Button from "@mui/material/Button";
+import HomeIcon from "@mui/icons-material/Home";
+
+export default function RosbagViewerPage() {
+    const router = useRouter();
+    const handleRedirect = () => {
+        router.replace("/");
+    };
+    return (
+        <div className="w-screen h-screen">
+            <div className="flex items-center fixed top-5 left-0 z-50 group w-[240px] h-[48px]">
+                <div className="w-fit transform -translate-x-4/5 transition-transform duration-300 group-hover:translate-x-[20px]">
+                    <Button
+                        variant="contained"
+                        endIcon={<HomeIcon />}
+                        onClick={handleRedirect}
+                        className="rounded-full bg-slate-400 text-white px-4 py-2 hover:bg-slate-700"
+                        sx={{
+                            color: "white",
+                            backgroundColor: "black",
+                            "&:hover": { backgroundColor: "gray" },
+                            borderRadius: "9999px",
+                        }}
+                    >
+                        Go to Visualizer
+                    </Button>
+                </div>
+            </div>
+            <RosbagViewer />
+        </div>
+    );
+}