Visualization integration

GEMstack/onboard/visualization/sr_viz/README.md

@@ -0,0 +1,141 @@
+# SR Visualization Dashboard
+
+## How to Use
+
+### 1. Start Backend Server
+
+Navigate to the backend directory:
+
+```
+cd ./log_dashboard
+```
+
+Install Python dependencies:
+
+```
+pip install -r requirements.txt
+```
+
+Start the backend server:
+
+```
+python app.py
+```
+
+The backend server will be running at: [http://localhost:5000](http://localhost:5000)
+
+---
+
+### 2. Start Frontend (Development or Production)
+
+#### Prerequisites
+
+- Node.js (v18.17+) and npm. If you already have a different version of Node.js installed, you can manage multiple versions using [nvm](https://github.com/nvm-sh/nvm) (for Unix-based systems) or [nvm-windows](https://github.com/coreybutler/nvm-windows) (for Windows).
+
+Navigate to the frontend directory:
+
+```
+cd ./GEMstack/onboard/visualization/sr_viz/threeD
+```
+
+Install frontend dependencies:
+
+```
+npm install
+```
+
+Run development server:
+
+```
+npm run dev
+```
+
+Or run production build:
+
+```
+npm run build && npm run start
+```
+
+The frontend visualizer will be available at: [http://localhost:3000](http://localhost:3000)
+
+---
+
+### 3. Open the Dashboard
+
+Visit: [http://localhost:5000](http://localhost:5000)
+
+If a valid `behavior.json` file is loaded, the **"3D Visualization"** button will appear at the top-right corner.
+
+Clicking it redirects you to the 3D visualizer at: [http://localhost:3000](http://localhost:3000)
+
+---
+
+## Format of Objects in `behavior.json`
+
+### Other Vehicles
+
+```json
+{
+  "other_vehicles": {
+    "<vehicle_id>": {
+      "type": "OtherVehicleState",
+      "data": {
+        "pose": {
+          "frame": <int>,
+          "t": <float>,
+          "x": <float>,
+          "y": <float>,
+          "z": <float>,
+          "yaw": <float>,
+          "pitch": <float>,
+          "roll": <float>
+        },
+        "dimensions": [<float>, <float>, <float>],
+        "outline": <null | object>,
+        "type": <int>,
+        "activity": <int>,
+        "velocity": [<float>, <float>, <float>],
+        "yaw_rate": <float>
+      }
+    }
+  },
+  "time": <float>
+}
+```
+
+### Traffic Lights
+
+```json
+{
+  "traffic_lights": {
+    "<traffic_light_id>": {
+      "type": "TrafficLightState",
+      "data": {
+        "pose": {
+          "frame": <int>,
+          "t": <float>,
+          "x": <float>,
+          "y": <float>,
+          "z": <float>,
+          "yaw": <float>,
+          "pitch": <float>,
+          "roll": <float>
+        },
+        "state": <string>
+      }
+    }
+  },
+  "time": <float>
+}
+```
+
+# SR Rosbag Viewer
+## How to Use
+In the bottom-right corner of the 3D Visualizer, there's a redirect button. Clicking it will take you to the Rosbag Viewer. Currently, it supports viewing uncompressed images and point clouds by topic.
+
+To view both images and point clouds simultaneously:
+  1. After uploading the rosbag file and confirming that the upload is complete (as indicated by the loading status in the scrubber), click the menu in the top-right corner.
+
+  2. Choose to split the current panel vertically or horizontally.
+
+  3. In one of the panels, select `Switch to PointCloud Panel`.

GEMstack/onboard/visualization/sr_viz/threeD/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

GEMstack/onboard/visualization/sr_viz/threeD/.nuxt/app.config.mjs

@@ -0,0 +1,18 @@
+
+import { _replaceAppConfig } from '#app/config'
+import { defuFn } from 'defu'
+
+const inlineConfig = {
+  "nuxt": {}
+}
+
+// Vite - webpack is handled directly in #app/config
+if (import.meta.hot) {
+  import.meta.hot.accept((newModule) => {
+    _replaceAppConfig(newModule.default)
+  })
+}
+
+
+
+export default /*@__PURE__*/ defuFn(inlineConfig)

GEMstack/onboard/visualization/sr_viz/threeD/.nuxt/components.d.ts

@@ -0,0 +1,138 @@
+
+import type { DefineComponent, SlotsType } from 'vue'
+type IslandComponent<T extends DefineComponent> = T & DefineComponent<{}, {refresh: () => Promise<void>}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, SlotsType<{ fallback: { error: unknown } }>>
+type HydrationStrategies = {
+  hydrateOnVisible?: IntersectionObserverInit | true
+  hydrateOnIdle?: number | true
+  hydrateOnInteraction?: keyof HTMLElementEventMap | Array<keyof HTMLElementEventMap> | true
+  hydrateOnMediaQuery?: string
+  hydrateAfter?: number
+  hydrateWhen?: boolean
+  hydrateNever?: true
+}
+type LazyComponent<T> = (T & DefineComponent<HydrationStrategies, {}, {}, {}, {}, {}, {}, { hydrated: () => void }>)
+interface _GlobalComponents {
+      'AxesReference': typeof import("../components/AxesReference.vue")['default']
+    'Car': typeof import("../components/Car")['default']
+    'Human': typeof import("../components/Human")['default']
+    'RoadVehicleViz': typeof import("../components/RoadVehicleViz.vue")['default']
+    'TrafficLight': typeof import("../components/TrafficLight")['default']
+    'UnoIcon': typeof import("../node_modules/@unocss/nuxt/runtime/UnoIcon.vue")['default']
+    'NuxtWelcome': typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']
+    'NuxtLayout': typeof import("../node_modules/nuxt/dist/app/components/nuxt-layout")['default']
+    'NuxtErrorBoundary': typeof import("../node_modules/nuxt/dist/app/components/nuxt-error-boundary")['default']
+    'ClientOnly': typeof import("../node_modules/nuxt/dist/app/components/client-only")['default']
+    'DevOnly': typeof import("../node_modules/nuxt/dist/app/components/dev-only")['default']
+    'ServerPlaceholder': typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']
+    'NuxtLink': typeof import("../node_modules/nuxt/dist/app/components/nuxt-link")['default']
+    'NuxtLoadingIndicator': typeof import("../node_modules/nuxt/dist/app/components/nuxt-loading-indicator")['default']
+    'NuxtRouteAnnouncer': typeof import("../node_modules/nuxt/dist/app/components/nuxt-route-announcer")['default']
+    'NuxtImg': typeof import("../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtImg']
+    'NuxtPicture': typeof import("../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtPicture']
+    'NuxtPage': typeof import("../node_modules/nuxt/dist/pages/runtime/page")['default']
+    'NoScript': typeof import("../node_modules/nuxt/dist/head/runtime/components")['NoScript']
+    'Link': typeof import("../node_modules/nuxt/dist/head/runtime/components")['Link']
+    'Base': typeof import("../node_modules/nuxt/dist/head/runtime/components")['Base']
+    'Title': typeof import("../node_modules/nuxt/dist/head/runtime/components")['Title']
+    'Meta': typeof import("../node_modules/nuxt/dist/head/runtime/components")['Meta']
+    'Style': typeof import("../node_modules/nuxt/dist/head/runtime/components")['Style']
+    'Head': typeof import("../node_modules/nuxt/dist/head/runtime/components")['Head']
+    'Html': typeof import("../node_modules/nuxt/dist/head/runtime/components")['Html']
+    'Body': typeof import("../node_modules/nuxt/dist/head/runtime/components")['Body']
+    'NuxtIsland': typeof import("../node_modules/nuxt/dist/app/components/nuxt-island")['default']
+    'NuxtRouteAnnouncer': IslandComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
+      'LazyAxesReference': LazyComponent<typeof import("../components/AxesReference.vue")['default']>
+    'LazyCar': LazyComponent<typeof import("../components/Car")['default']>
+    'LazyHuman': LazyComponent<typeof import("../components/Human")['default']>
+    'LazyRoadVehicleViz': LazyComponent<typeof import("../components/RoadVehicleViz.vue")['default']>
+    'LazyTrafficLight': LazyComponent<typeof import("../components/TrafficLight")['default']>
+    'LazyUnoIcon': LazyComponent<typeof import("../node_modules/@unocss/nuxt/runtime/UnoIcon.vue")['default']>
+    'LazyNuxtWelcome': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']>
+    'LazyNuxtLayout': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-layout")['default']>
+    'LazyNuxtErrorBoundary': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-error-boundary")['default']>
+    'LazyClientOnly': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/client-only")['default']>
+    'LazyDevOnly': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/dev-only")['default']>
+    'LazyServerPlaceholder': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
+    'LazyNuxtLink': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-link")['default']>
+    'LazyNuxtLoadingIndicator': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-loading-indicator")['default']>
+    'LazyNuxtRouteAnnouncer': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-route-announcer")['default']>
+    'LazyNuxtImg': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtImg']>
+    'LazyNuxtPicture': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtPicture']>
+    'LazyNuxtPage': LazyComponent<typeof import("../node_modules/nuxt/dist/pages/runtime/page")['default']>
+    'LazyNoScript': LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['NoScript']>
+    'LazyLink': LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Link']>
+    'LazyBase': LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Base']>
+    'LazyTitle': LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Title']>
+    'LazyMeta': LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Meta']>
+    'LazyStyle': LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Style']>
+    'LazyHead': LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Head']>
+    'LazyHtml': LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Html']>
+    'LazyBody': LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Body']>
+    'LazyNuxtIsland': LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-island")['default']>
+    'LazyNuxtRouteAnnouncer': LazyComponent<IslandComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>>
+}
+
+declare module 'vue' {
+  export interface GlobalComponents extends _GlobalComponents { }
+}
+
+export const AxesReference: typeof import("../components/AxesReference.vue")['default']
+export const Car: typeof import("../components/Car")['default']
+export const Human: typeof import("../components/Human")['default']
+export const RoadVehicleViz: typeof import("../components/RoadVehicleViz.vue")['default']
+export const TrafficLight: typeof import("../components/TrafficLight")['default']
+export const UnoIcon: typeof import("../node_modules/@unocss/nuxt/runtime/UnoIcon.vue")['default']
+export const NuxtWelcome: typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']
+export const NuxtLayout: typeof import("../node_modules/nuxt/dist/app/components/nuxt-layout")['default']
+export const NuxtErrorBoundary: typeof import("../node_modules/nuxt/dist/app/components/nuxt-error-boundary")['default']
+export const ClientOnly: typeof import("../node_modules/nuxt/dist/app/components/client-only")['default']
+export const DevOnly: typeof import("../node_modules/nuxt/dist/app/components/dev-only")['default']
+export const ServerPlaceholder: typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']
+export const NuxtLink: typeof import("../node_modules/nuxt/dist/app/components/nuxt-link")['default']
+export const NuxtLoadingIndicator: typeof import("../node_modules/nuxt/dist/app/components/nuxt-loading-indicator")['default']
+export const NuxtRouteAnnouncer: typeof import("../node_modules/nuxt/dist/app/components/nuxt-route-announcer")['default']
+export const NuxtImg: typeof import("../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtImg']
+export const NuxtPicture: typeof import("../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtPicture']
+export const NuxtPage: typeof import("../node_modules/nuxt/dist/pages/runtime/page")['default']
+export const NoScript: typeof import("../node_modules/nuxt/dist/head/runtime/components")['NoScript']
+export const Link: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Link']
+export const Base: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Base']
+export const Title: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Title']
+export const Meta: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Meta']
+export const Style: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Style']
+export const Head: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Head']
+export const Html: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Html']
+export const Body: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Body']
+export const NuxtIsland: typeof import("../node_modules/nuxt/dist/app/components/nuxt-island")['default']
+export const NuxtRouteAnnouncer: IslandComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
+export const LazyAxesReference: LazyComponent<typeof import("../components/AxesReference.vue")['default']>
+export const LazyCar: LazyComponent<typeof import("../components/Car")['default']>
+export const LazyHuman: LazyComponent<typeof import("../components/Human")['default']>
+export const LazyRoadVehicleViz: LazyComponent<typeof import("../components/RoadVehicleViz.vue")['default']>
+export const LazyTrafficLight: LazyComponent<typeof import("../components/TrafficLight")['default']>
+export const LazyUnoIcon: LazyComponent<typeof import("../node_modules/@unocss/nuxt/runtime/UnoIcon.vue")['default']>
+export const LazyNuxtWelcome: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']>
+export const LazyNuxtLayout: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-layout")['default']>
+export const LazyNuxtErrorBoundary: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-error-boundary")['default']>
+export const LazyClientOnly: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/client-only")['default']>
+export const LazyDevOnly: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/dev-only")['default']>
+export const LazyServerPlaceholder: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
+export const LazyNuxtLink: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-link")['default']>
+export const LazyNuxtLoadingIndicator: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-loading-indicator")['default']>
+export const LazyNuxtRouteAnnouncer: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-route-announcer")['default']>
+export const LazyNuxtImg: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtImg']>
+export const LazyNuxtPicture: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtPicture']>
+export const LazyNuxtPage: LazyComponent<typeof import("../node_modules/nuxt/dist/pages/runtime/page")['default']>
+export const LazyNoScript: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['NoScript']>
+export const LazyLink: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Link']>
+export const LazyBase: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Base']>
+export const LazyTitle: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Title']>
+export const LazyMeta: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Meta']>
+export const LazyStyle: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Style']>
+export const LazyHead: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Head']>
+export const LazyHtml: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Html']>
+export const LazyBody: LazyComponent<typeof import("../node_modules/nuxt/dist/head/runtime/components")['Body']>
+export const LazyNuxtIsland: LazyComponent<typeof import("../node_modules/nuxt/dist/app/components/nuxt-island")['default']>
+export const LazyNuxtRouteAnnouncer: LazyComponent<IslandComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>>
+
+export const componentNames: string[]