Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    mr-react-slamviewerpublic

    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:

    > npm start test
    > npm start test.e2e 

    License

    © Copyright MotionRecall 2016 - all rights reserved

    Keywords

    none

    install

    npm i mr-react-slamviewer

    Downloadslast 7 days

    11

    version

    1.2.1

    license

    MotionRecall

    last publish

    collaborators

    • avatar