in examples/get-started/src/app.js [71:132]
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]}
/>
<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>
);
}