Mr-react-slamviewer NPM

Synopsis

Slamviewer is a React component wihch displays 3D modelization results from the SLAM process output.
It defines the <ReactComponentSlamjs> object.

Inputs / Props

assetFolder path to a Maestro asset.
The path can be absolute or relative to your application directory.

Dependencies

THREE.js framework for 3D real time display
DAT-GUI for quick UI to control camera, image navigation

Installation

To use the component, enter the following command:

npm install --save "http://theimaginary.me/mr-react-slamviewer-1.0.0.tgz"

mr-react-slamviewer will be installed in your node_modules/ directory.
The component entry is located in mr-react-slamviewer/build/lib/ReactComponentSlamjs.

How to use

In your react application simply add the following:

import SlamView from 'mr-react-slamviewer/build/lib/slam-view.js';

// ...

ReactDOM.render(
   
   //you can insert a slamviewer in you react application like this
   <SlamView assetFolder="yourassetpath" />, 
   
   // ... 
)

SlamViewer requires the following CSS classes in your application.

mush {
    position: relative;
    background-color: #455;
}

#slamtoolbar {
    width: 245px;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    float:right;
    display: 'inline';
    overflow: 'hidden';
}

#btnFullscreen {
    position: absolute;
     top: 0;
    left: 0;
    z-index: 10;
}

.slamPlayer {
    width: 100%;
    height: 100%;
}

/* Fullscreen style */
#mush:-webkit-full-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

:-webkit-full-screen #btnFullscreen {
    visibility: hidden;
}

Options

Background color

By default the background color is black. You can specify the color to use, with a background props:

<SlamView
    ...
    bg="#424242"
/>,

Grid

By default a grid is drawn to cover the area of the trajectory, using the lowest point to position itself.

You can disable the grid with the following prop:

<SlamView
    ...
    grid={false}
/>,

Tests

The component provides functionnal and unit tests in the /test and /test-e2e folders. Please note that functionnal tests (e2e) will launch a browser.

To run the tests, simply launch the following: