RViz Viewer

Installation

To install the @evdk12/rviz_viewer package, run the following command in your terminal:

npm install @evdk12/rviz_viewer

Description

The @evdk12/rviz_viewer package is a powerful React component designed for visualizing 3D data in RViz, a popular visualization tool used in robotics. This package allows developers to easily integrate RViz-like visualizations into their React applications, enabling the display of various data types such as Point Cloud Data (PCD), OpenStreetMap (OSM), and URDF (Unified Robot Description Format) models.

With RvizViewer, users can customize the visualization options to suit their needs, including toggling the visibility of different data layers. The component is designed to be user-friendly and efficient, making it an ideal choice for developers looking to enhance their robotics applications with rich visual representations of spatial data.

Key Features

• Easy Integration: Seamlessly integrate RViz visualizations into your React applications.
• Customizable Options: Control the visibility of PCD, OSM, and URDF layers.

Whether you're developing a robotics simulation, a mapping application, or any project that requires 3D data visualization, @evdk12/rviz_viewer provides the tools you need to create engaging and informative user experiences.

Usage

Below is a sample code demonstrating how to use the RvizViewer component in a React application.

Sample Code

// Import necessary modules

import { RvizViewer } from "@evdk12/rviz_viewer";
// Define the ViewerPage component
export default function ViewerPage() {
  // Define viewer data including URLs for PCD, OSM, and URDF files
  const viewerData = {
    pcdUrl: "./osm/GlobalMap_utm.pcd", // Optional: URL for the Point Cloud Data
    osmUrl: "./osm/lantet_maps.osm", // Optional: URL for the OSM map data
    urdfUrl: "./osm/innova_urdf.urdf", // Optional: URL for the URDF robot model
    robotPosition: {
      // Optional: Initial position and rotation of the robot
      x: 0, // Optional: Robot's X position
      y: 0, // Optional: Robot's Y position
      z: 0, // Optional: Robot's Z position
      rotation: 0, // Optional: Robot's rotation around the Y-axis
    },
  };
  const STYLE = {
    GRID: 0x444444,
    BACKGROUND: 0x111111,
    POINT_CLOUD: 0x808080, // GreyScale
    MAP: {
      CENTERLINE: 0x00ffff, // Cyan
      LEFT_BOUNDARY: 0xff0000, // Red
      RIGHT_BOUNDARY: 0x0000ff, // Blue
    },
    ROBOT: 0xff00ff, // Magenta
  };
  // Render the viewer component
  return (
    <div className="w-full h-full">
      <RvizViewer
        data={viewerData} // Pass the viewer data to the RvizViewer
        style={STYLE} // Pass the style to the RvizViewer
        options={{
          showPCD: true, // Option to show Point Cloud
          showOSM: true, // Option to show OSM map
          showURDF: true, // Option to show URDF robot model
        }}
      />
    </div>
  );
}

Explanation of Each Block

1. Imports:

   • The RvizViewer component is imported from the @evdk12/rviz_viewer package.

2. ViewerPage Component:

   • This is a functional component that serves as the main entry point for rendering the RViz viewer.

3. Viewer Data:

   • An object named viewerData is defined, containing URLs for the Point Cloud Data (PCD), OpenStreetMap (OSM), and URDF files. It also includes the initial position and rotation of the robot.

4. Rendering the Viewer:

   • The RvizViewer component is rendered within a div. The data prop is passed the viewerData object, and the options prop is used to specify which layers to display (PCD, OSM, URDF).

Additional Notes

• Ensure that the URLs provided in viewerData are accessible and point to valid files.
• You can customize the viewer options to show or hide specific layers based on your requirements.