Skip to content

Latest commit

 

History

History
132 lines (102 loc) · 4.36 KB

starter-kit.md

File metadata and controls

132 lines (102 loc) · 4.36 KB

Starter Kit

The starter kit is a minimal example that uses the components from streetscape.gl to display a XVIZ log. The application demonstrates how to connect to an XVIZ source and pipe the data to the streetscape.gl components.

Running the Example

# clone the repo
git clone https://github.com/uber/streetscape.gl.git
cd streetscape.gl/examples/get-started
# install dependencies
yarn
# start the app
yarn start

Display the Base Map

You may need a Mapbox access token to display the base map. See your options regarding Mapbox tokens.

Load Data from a Different Source

This example loads an XVIZ log extracted from the KITTI dataset. By default, the data is loaded from a remote URL using the XVIZFileLoader. You can change the URL to point to your own files by tweaking the options in log-from-file.js.

You can also use this application to stream XVIZ data from a server. To do this:

  • Follow these instructions to start a local XVIZ stream server
  • In the get-started example directory, run yarn start-streaming.

You can change the streaming options in log-from-stream.js.

Application Controls

  • Mouse controls

    • shift + drag => rotate
    • drag => pan
    • wheel/pinch => zoom

  • Object interactions

    • click on charts to jump to time
    • click on objects in the 3D view to select and show context info

Application Walk-through

This section will cover some of the key parts in the main application source code in app.js.

XVIZ Configuration

setXVIZConfig(XVIZ_CONFIG);
setXVIZSettings(XVIZ_SETTINGS);

This call to setXVIZConfig and setXVIZSettings sets the configuration for log parsing and synchronization in XVIZ. The config is used by XVIZ libraries to collect and associated information across streams, as well as generating proper frames for the playback.

Connecting to XVIZ Server

componentDidMount() {
  this.state.log.connect();
}

The application uses either the XVIZFileLoader or the XVIZStreamLoader to obtain XVIZ data. The default connection parameters are defined in in constants.js.

Log Playback Components

  <div id="map-view">
    <LogViewer
      log={log}
      mapboxApiAccessToken={MAPBOX_TOKEN}
      mapStyle={MAP_STYLE}
      car={CAR}
      xvizStyles={XVIZ_STYLE}
      viewMode={VIEW_MODE[settings.viewMode]}
    />
  </div>
  <div id="timeline">
    <PlaybackControl
      width="100%"
      log={log}
      formatTimestamp={x => new Date(x).toUTCString()}
    />
  </div>

Here we can see how the log from the XVIZStreamLoader is passed to the LogViewer and controls PlaybackControl. The same log is passed into the PlaybackControl.

Each component will use the XVIZLoaderInterface to access the necessary data from the log.

Declarative UI Components

<div id="control-panel">
  <XVIZPanel log={log} name="Camera" />
  <hr />
  <XVIZPanel log={log} name="Metrics" />
</div>

An important part of XVIZ is the Declarative UI which allows UI elements to be data-driven with bindings to XVIZ streams. This enables engineers to create controls that are defined at the source of the data generation without the need to know the specifics of the client implementation.

The XVIZPanel component in streetscape.gl renders any valid panel definition that is compliant with the XVIZ declarative UI spec.