@altara/av

Autonomous-vehicle React components for Altara. Embeddable LiDAR point-cloud renderer (Three.js), occupancy grid, object-detection overlay, path planner, camera feed, control trace, radar sweep, perception state machine, sensor health matrix, and SLAM map — for robotaxis, ADS prototypes, autonomous-shuttle dashboards, mobile-robotics monitoring, and self-driving research UIs.

Install

npm install @altara/core @altara/av
# Three.js is required only if you use LiDARPointCloud — it's an optional peer dep:
npm install three

Import the design-token stylesheet from @altara/core once at your app root:

import '@altara/core/styles.css';

Quick start

import { AltaraProvider } from '@altara/core';
import { LiDARPointCloud, OccupancyGrid, ControlTrace } from '@altara/av';

export function AvDashboard() {
  return (
    <AltaraProvider theme="dark">
      <LiDARPointCloud mockMode width={800} height={500} />
      <OccupancyGrid mockMode width={400} height={400} />
      <ControlTrace mockMode windowMs={15_000} />
    </AltaraProvider>
  );
}

Components

| Component | Description | | --- | --- | | LiDARPointCloud | Three.js BufferGeometry + Points renderer. Color modes: intensity, height, return, flat. Camera presets: top, iso, follow. | | OccupancyGrid | 2D overhead occupancy-grid renderer with vehicle pose, goal marker, and planned-path overlay. | | ObjectDetectionOverlay | Bounding-box overlay with class labels + confidence scores for YOLO/SSD-style detections. | | PathPlannerOverlay | Top-down planned vs actual trajectory with deviation corridor and live cross-track-error readout. | | VelocityVectorDisplay | SVG vehicle diagram with linear-velocity arrow + angular-velocity arc. | | PerceptionStateMachine | SVG node graph of the perception pipeline with per-module status + latency. | | SensorHealthMatrix | Grid of sensor-health tiles — name, topic, expected rate, age, status. | | CameraFeed | Canvas image renderer with overlay slot (crosshair, grid, bounding box). | | ControlTrace | Three vertically stacked time-series for throttle, brake, steering. | | RadarSweep | PPI radar sweep with rotating wedge and decaying target dots. | | SLAMMap | Occupancy grid + pose-graph overlay with loop-closure highlighting. |

Showcase

Three.js — optional

LiDARPointCloud is the only component that needs three. It's loaded via dynamic import('three') so:

• The other ten components work without three installed.
• If three is missing when LiDARPointCloud mounts, the component renders a placeholder telling the user to npm install three — your app keeps running.

The package's tsup build externalises three, so you control which version your app pins.

Data sources

Every component accepts an AltaraDataSource from @altara/core. Pair with @altara/ros to wire sensor_msgs/PointCloud2 into LiDARPointCloud, nav_msgs/OccupancyGrid into OccupancyGrid, and vision_msgs/Detection2DArray into ObjectDetectionOverlay. Or use @altara/mqtt for broker-published telemetry.

Documentation

The full component playground — Default + variant stories per component, props in the Controls panel, dark/light theme toggle — lives in the project Storybook. Run it locally:

git clone https://github.com/JayaSaiKishanChapparam/altara.git
cd altara
pnpm install
pnpm --filter @altara/storybook storybook

Then open the AV/ section.

Sibling packages

| Package | What it does | | --- | --- | | @altara/core | Components, hooks, MQTT/mock adapters, design tokens. The starting point. | | @altara/aerospace | Flight instruments — PFD, HSI, altimeter, airspeed, VSI, engine cluster, TCAS, TAWS, FMA, fuel gauge, radio altimeter. | | @altara/ros | ROS2 / rosbridge adapter + typed factories for common sensor_msgs/* message types. | | @altara/mqtt | MQTT-over-WebSocket adapter for IoT brokers. |

Links

• GitHub repository
• Issue tracker
• Discussions
• Three.js — the rendering engine behind LiDARPointCloud

License

MIT — see LICENSE.