Skip to content

Commit

Permalink
Added Custom XVIZ Layer Capability
Browse files Browse the repository at this point in the history 
- refactored layer primitives into layer handlers that can be extended by the customXVIZLayers
- made example showcasing customXVIZLayers
- passed customXVIZLayers through logviewer and core-3d-viewer components
  • Loading branch information
Sam Nosenzo committed Apr 15, 2021
1 parent 6a94d18 commit b5630b6
Show file tree
Hide file tree
Showing 11 changed files with 638 additions and 110 deletions.
5 changes: 5 additions & 0 deletions examples/custom-xviz-layers/README.md
View file
@@ -0,0 +1,5 @@
# streetscape.gl Starter Kit

This is an example showing the use of custom xviz layers for custom xviz streams.

[Instructions for running this application](../../docs/get-started/starter-kit.md)
23 changes: 23 additions & 0 deletions examples/custom-xviz-layers/index.html
View file
@@ -0,0 +1,23 @@
<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>streetscape.gl quick start</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { margin: 0; }
#container { position: fixed; display: flex; width: 100vw; height: 100vh; overflow: hidden; }
#control-panel { box-sizing: border-box; width: 320px; padding: 12px; position: relative; z-index: 1; box-shadow: 0 0 8px rgba(0,0,0,0.3); height: 100%; overflow-x: hidden; overflow-y: auto; }
#control-panel hr { margin: 24px -12px; opacity: 0.3; }
#log-panel { flex-grow: 1; display: flex; flex-direction: column; height: 100%; }
#map-view { flex-grow: 1; position: relative; }
#timeline { padding: 24px 0; position: relative; }
#hud { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; box-shadow: 0 0 8px rgba(0,0,0,0.3); }
#hud hr {margin: 0; opacity: 0.3;}
</style>
</head>
<body>
<div id="app"></div>
<script src='bundle.js'></script>
</body>
</html>
34 changes: 34 additions & 0 deletions examples/custom-xviz-layers/package.json
View file
@@ -0,0 +1,34 @@
{
"name": "streetscape.gl-quick-start",
"description": "A template app of streetscape.gl",
"version": "0.1.0",
"scripts": {
"start-local": "webpack-dev-server --env.local --progress --hot --open",
"start-streaming-local": "webpack-dev-server --env.local --env.stream --progress --hot --open",
"start-live-local": "webpack-dev-server --env.local --env.live --progress --hot --open",
"start": "webpack-dev-server --progress --hot --open",
"start-streaming": "webpack-dev-server --env.stream --progress --hot --open",
"start-live": "webpack-dev-server --env.live --progress --hot --open"
},
"dependencies": {
"@deck.gl/extensions": "^8.4.13",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"streetscape.gl": "^1.0.0"
},
"devDependencies": {
"@babel/cli": "^7.0.0",
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.0",
"source-map-loader": "^0.2.3",
"webpack": "^4.20.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.1"
},
"resolutions": {
"@deck.gl/core": "8.4.12"
}
}
172 changes: 172 additions & 0 deletions examples/custom-xviz-layers/src/app.js
View file
@@ -0,0 +1,172 @@
// Copyright (c) 2019 Uber Technologies, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

/* global document, console */
/* eslint-disable no-console, no-unused-vars, no-undef */
import React, {PureComponent} from 'react';
import {render} from 'react-dom';
import {PathStyleExtension} from '@deck.gl/extensions';
import {setXVIZConfig, getXVIZConfig} from '@xviz/parser';
import {
LaneLayer,
LogViewer,
PlaybackControl,
StreamSettingsPanel,
MeterWidget,
TrafficLightWidget,
TurnSignalWidget,
XVIZPanel,
VIEW_MODE
} from 'streetscape.gl';
import {Form} from '@streetscape.gl/monochrome';

import {XVIZ_CONFIG, APP_SETTINGS, MAPBOX_TOKEN, MAP_STYLE, XVIZ_STYLE, CAR} from './constants';

setXVIZConfig(XVIZ_CONFIG);

const TIMEFORMAT_SCALE = getXVIZConfig().TIMESTAMP_FORMAT === 'seconds' ? 1000 : 1;

// __IS_STREAMING__ and __IS_LIVE__ are defined in webpack.config.js
const exampleLog = require(__IS_STREAMING__
? './log-from-stream'
: __IS_LIVE__
? './log-from-live'
: './log-from-file').default;

class Example extends PureComponent {
state = {
log: exampleLog,
settings: {
viewMode: 'PERSPECTIVE',
showTooltip: false
}
};

componentDidMount() {
this.state.log.on('error', console.error).connect();
}

_onSettingsChange = changedSettings => {
this.setState({
settings: {...this.state.settings, ...changedSettings}
});
};

render() {
const {log, settings} = this.state;

return (
<div id="container">
<div id="control-panel">
<XVIZPanel log={log} name="Metrics" />
<hr />
<XVIZPanel log={log} name="Camera" />
<hr />
<Form
data={APP_SETTINGS}
values={this.state.settings}
onChange={this._onSettingsChange}
/>
<StreamSettingsPanel log={log} />
</div>
<div id="log-panel">
<div id="map-view">
<LogViewer
log={log}
mapboxApiAccessToken={MAPBOX_TOKEN}
mapStyle={MAP_STYLE}
car={CAR}
xvizStyles={XVIZ_STYLE}
showTooltip={settings.showTooltip}
viewMode={VIEW_MODE[settings.viewMode]}
customXVIZLayers={[
{
// {string} id - passed into layer
id: 'dual',
//
extendPrimitive: 'path',
layerClass: LaneLayer,
/*
* Determines whether the layer handler should be used for a specific stream
* @param {string} streamName
* @param {Object} streamMetadata
*/

streamMatch: (_, streamMetadata) => {
//
return streamMetadata.primitive_type === 'polyline';
},
/*
* Defines props to spread into `this.getSublayerProps` in the XVIZLayer
* @param {Object} xvizLayerProps - all props passed into XVIZLayer
* @param {Object} primitiveLayerProps - all layer-type props that are used for the primitive layer
* @param {Object} state - the XVIZLayer state
*/
getSubProps: ({xvizLayerProps, primitiveLayerProps, state}) => {
return {
id: 'path-dual',
getWidth: [0.1, 0.1, 0.1],
getPath: f => f.vertices,
getDashArray: () => [1, 2],
getDashArray2: () => [2, 4],
getColor2: state.layerProps.getColor,
extensions: [new PathStyleExtension({dash: true})]
};
}
}
]}
/>
<div id="hud">
<TurnSignalWidget log={log} streamName="/vehicle/turn_signal" />
<hr />
<TrafficLightWidget log={log} streamName="/vehicle/traffic_light" />
<hr />
<MeterWidget
log={log}
streamName="/vehicle/acceleration"
label="Acceleration"
min={-4}
max={4}
/>
<hr />
<MeterWidget
log={log}
streamName="/vehicle/velocity"
label="Speed"
getWarning={x => (x > 6 ? 'FAST' : '')}
min={0}
max={20}
/>
</div>
</div>
<div id="timeline">
<PlaybackControl
width="100%"
log={log}
formatTimestamp={x => new Date(x * TIMEFORMAT_SCALE).toUTCString()}
/>
</div>
</div>
</div>
);
}
}

render(<Example />, document.getElementById('app'));
54 changes: 54 additions & 0 deletions examples/custom-xviz-layers/src/constants.js
View file
@@ -0,0 +1,54 @@
// Copyright (c) 2019 Uber Technologies, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
import {CarMesh} from 'streetscape.gl';

/* eslint-disable camelcase */
export const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line

export const MAP_STYLE = 'mapbox://styles/mapbox/light-v9';

export const XVIZ_CONFIG = {
PLAYBACK_FRAME_RATE: 10
};

export const CAR = CarMesh.sedan({
origin: [1.08, -0.32, 0],
length: 4.3,
width: 2.2,
height: 1.5,
color: [160, 160, 160]
});

export const APP_SETTINGS = {
viewMode: {
type: 'select',
title: 'View Mode',
data: {TOP_DOWN: 'Top Down', PERSPECTIVE: 'Perspective', DRIVER: 'Driver'}
},
showTooltip: {
type: 'toggle',
title: 'Show Tooltip'
}
};

export const XVIZ_STYLE = {
'/tracklets/objects': [{name: 'selected', style: {fill_color: '#ff8000aa'}}],
'/lidar/points': [{style: {point_color_mode: 'ELEVATION'}}]
};
31 changes: 31 additions & 0 deletions examples/custom-xviz-layers/src/log-from-file.js
View file
@@ -0,0 +1,31 @@
// Copyright (c) 2019 Uber Technologies, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

import {XVIZFileLoader} from 'streetscape.gl';

export default new XVIZFileLoader({
timingsFilePath:
'https://raw.githubusercontent.com/uber/xviz-data/master/kitti/2011_09_26_drive_0005_sync/0-frame.json',
getFilePath: index =>
`https://raw.githubusercontent.com/uber/xviz-data/master/kitti/2011_09_26_drive_0005_sync/${index +
1}-frame.glb`,
worker: true,
maxConcurrency: 4
});
32 changes: 32 additions & 0 deletions examples/custom-xviz-layers/src/log-from-live.js
View file
@@ -0,0 +1,32 @@
// Copyright (c) 2019 Uber Technologies, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

import {XVIZLiveLoader} from 'streetscape.gl';

export default new XVIZLiveLoader({
logGuid: 'mock',
bufferLength: 10,
serverConfig: {
defaultLogLength: 30,
serverUrl: 'ws://localhost:8081'
},
worker: true,
maxConcurrency: 4
});
32 changes: 32 additions & 0 deletions examples/custom-xviz-layers/src/log-from-stream.js
View file
@@ -0,0 +1,32 @@
// Copyright (c) 2019 Uber Technologies, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

import {XVIZStreamLoader} from 'streetscape.gl';

export default new XVIZStreamLoader({
logGuid: 'mock',
// bufferLength: 15,
serverConfig: {
defaultLogLength: 30,
serverUrl: 'ws://localhost:8081'
},
worker: true,
maxConcurrency: 4
});

0 comments on commit b5630b6

Please sign in to comment.