Skip to content

Commit

Permalink
[XVIZ playground] UX improvements (#291)
Browse files Browse the repository at this point in the history
  • Loading branch information
Pessimistress committed Apr 6, 2019
1 parent cd38499 commit e36894d
Show file tree
Hide file tree
Showing 5 changed files with 188 additions and 51 deletions.
164 changes: 164 additions & 0 deletions examples/xviz-playground/src/code-samples.js
@@ -0,0 +1,164 @@
// 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.

const streamMetadata = {
circle: `
.stream('/object/tracking_point')
.category('primitive')
.type('circle')
.coordinate('VEHICLE_RELATIVE')
.streamStyle({
fill_color: '#fb0'
})
`,
polygon: `
.stream('/object/shape')
.category('primitive')
.type('polygon')
.coordinate('VEHICLE_RELATIVE')
.streamStyle({
fill_color: '#fb0',
height: 1.5,
extruded: true
})
`,
polyline: `
.stream('/prediction/trajectory')
.category('primitive')
.type('polyline')
.coordinate('VEHICLE_RELATIVE')
.streamStyle({
stroke_color: '#f08'
})
`,
points: `
.stream('/lidar/points')
.category('primitive')
.type('points')
.coordinate('VEHICLE_RELATIVE')
.streamStyle({
point_color_mode: 'elevation',
point_color_domain: [0, 3],
radius_pixels: 4
})
`,
stadium: `
.stream('/motion_planning/vehicle')
.category('primitive')
.type('stadium')
.coordinate('VEHICLE_RELATIVE')
.streamStyle({
fill_color: '#8888',
radius: 1
})
`,
text: `
.stream('/object/label')
.category('primitive')
.type('text')
.coordinate('VEHICLE_RELATIVE')
.streamStyle({
font_family: 'Arial',
font_weight: 'bold',
text_size: 24,
fill_color: '#000'
})
`
};

const streamSample = {
circle: `
.primitive('/object/tracking_point')
.circle([10, 10, 0], 1)
.id('object-1')
.circle([3, 18.5, 0], 2)
.id('object-2')
.style({fill_color: '#048'})
`,
polygon: `
.primitive('/object/shape')
.polygon([[10, 14, 0], [7, 10, 0], [13, 6, 0]])
.id('object-1')
.polygon([[-2, 20, 0], [5, 14, 0], [8, 17, 0], [1, 23, 0]])
.style({
fill_color: '#08f',
height: 3.6
})
.id('object-2')
`,
polyline: `
.primitive('/prediction/trajectory')
.polyline([[10, 10, 0], [10, 12, 0], [12, 14, 0], [12, 16, 0], [14, 18, 0], [14, 20, 0]])
.id('object-1')
.polyline([[3, 18.5, 0], [-1, 17, 0], [-2, 17, 0], [-6, 15, 0]])
.id('object-2')
.style({stroke_width: 0.5})
`,
points: `
.primitive('/lidar/points')
.points(new Array(200).fill(0).map(() => [7 + Math.random() * 6, 6 + Math.random() * 8, Math.random() * 3 ]))
.points(new Array(200).fill(0).map(() => [-2 + Math.random() * 10, 14 + Math.random() * 9, Math.random() * 3.6 ]))
`,
stadium: `
.primitive('/motion_planning/vehicle')
.stadium([3, 0, 0], [6, 0, 0])
.stadium([9, 0, 0], [12, 0, 0], 2)
`,
text: `
.primitive('/object/label')
.text('Object 01')
.position([10, 10, 2])
.text('Object 02')
.position([3, 18.5, 4])
.style({text_anchor: 'start', text_rotation: 90})
`
};

export function getCodeSample(streamNames) {
let metadata = `// metadata
xvizMetadataBuilder
.startTime(1000)
.endTime(1005)
.stream('/vehicle_pose')
.category('pose')
`;
let frame = `// frame
const timestamp = 1000;
xvizBuilder
.pose('/vehicle_pose')
.timestamp(timestamp)
.mapOrigin(-122.4, 37.8, 0)
.orientation(0, 0, 0)
`;
for (const streamName of streamNames) {
if (streamName in streamMetadata) {
metadata += streamMetadata[streamName];
frame += `\nxvizBuilder${streamSample[streamName]}`;
}
}

return {metadata, frame};
}
46 changes: 0 additions & 46 deletions examples/xviz-playground/src/constants.js
Expand Up @@ -30,49 +30,3 @@ export const XVIZ_CONFIG = {
};

export const CAR = CarMesh.sedan({length: 4.4, width: 2.4, height: 1.6});

export const CODE_SAMPLE_METADATA = `// metadata
xvizMetadataBuilder
.stream('/vehicle_pose')
.category('pose')
.stream('/object/tracking_point')
.category('primitive')
.type('circle')
.coordinate('VEHICLE_RELATIVE')
.streamStyle({
fill_color: '#fb0'
})
.stream('/object/shape')
.category('primitive')
.type('polygon')
.coordinate('VEHICLE_RELATIVE')
.streamStyle({
extruded: true
})
.startTime(1000)
.endTime(1010);
`;

export const CODE_SAMPLE_FRAME = `// frame
const timestamp = 1000;
xvizBuilder.pose('/vehicle_pose')
.timestamp(timestamp)
.mapOrigin(-122.4, 37.8, 0)
.orientation(0, 0, 0);
xvizBuilder.primitive('/object/tracking_point')
.circle([10, 10, 0])
.id('object-1');
xvizBuilder.primitive('/object/shape')
.polygon([[-5, 20, 0], [5, 14, 0], [8, 18, 0]])
.style({
fill_color: '#08f',
height: 2
})
.id('object-2');
`;
26 changes: 22 additions & 4 deletions examples/xviz-playground/src/editor.js
Expand Up @@ -28,13 +28,21 @@ import 'brace/theme/tomorrow';
import 'brace/theme/tomorrow_night';
import 'brace/ext/language_tools';

import {CODE_SAMPLE_METADATA, CODE_SAMPLE_FRAME} from './constants';
import {getCodeSample} from './code-samples';
import {evaluateCode, createMessage} from './eval';
import completer from './auto-complete';

const {EditSession} = ace.acequire('ace/edit_session');
const LanguageTools = ace.acequire('ace/ext/language_tools');

// Parse default settings from query parameters
/* global location, URLSearchParams */
const urlParams = new URLSearchParams(location.search);
const sampleStreams = urlParams.get('sample_streams') || 'circle,polygon';
const defaultTab = urlParams.get('tab') || 'frame';

const codeSample = getCodeSample(sampleStreams.split(','));

export default class Editor extends PureComponent {
state = {
activeEditor: 'javascript-editor',
Expand Down Expand Up @@ -63,22 +71,32 @@ export default class Editor extends PureComponent {
// events
jsonEditor.on('change', debounce(this._evaluateJSON, 500));

this._gotoTab('metadata');
// push initial messages
this._evaluateAndPush(codeSample.metadata, 'metadata');
this._evaluateAndPush(codeSample.frame, 'frame');

// activate tab
this._gotoTab(defaultTab);
}

_activeEditor = null;
_jsEditor = null;
_jsonEditor = null;
_sessions = {
metadata: new EditSession(CODE_SAMPLE_METADATA),
frame: new EditSession(CODE_SAMPLE_FRAME)
metadata: new EditSession(codeSample.metadata),
frame: new EditSession(codeSample.frame)
};
_refs = {
'javascript-editor': React.createRef(),
'json-editor': React.createRef()
};
_error = null;

_evaluateAndPush(code, type) {
const {data} = evaluateCode(code, type);
this.props.log.push(createMessage(data));
}

_evaluateJS = () => {
const code = this._jsEditor.getValue();
const result = evaluateCode(code, this.state.tab);
Expand Down
1 change: 1 addition & 0 deletions examples/xviz-playground/src/xviz-json-loader.js
Expand Up @@ -59,6 +59,7 @@ export default class XVIZJsonLoader extends XVIZLoaderInterface {
.filter(Number.isFinite)
.sort();
this.set('timestamps', timestamps);
this.seek(message.timestamp);
}

_getLogStartTime(metadata) {
Expand Down
2 changes: 1 addition & 1 deletion modules/core/src/layers/xviz-layer.js
Expand Up @@ -359,7 +359,7 @@ export default class XVIZLayer extends CompositeLayer {
id: 'stadium',
data,
getPath: f => [f.start, f.end],
lineJointRounded: true,
rounded: true,
updateTriggers: deepExtend(updateTriggers, {
getColor: {useSemanticColor: this.props.useSemanticColor}
})
Expand Down

0 comments on commit e36894d

Please sign in to comment.