diff --git a/src/components/CanGraph.js b/src/components/CanGraph.js index 710e192..c533e4e 100644 --- a/src/components/CanGraph.js +++ b/src/components/CanGraph.js @@ -15,7 +15,7 @@ export default class CanGraph extends Component { signalSpec: PropTypes.instanceOf(Signal), segment: PropTypes.array, unplot: PropTypes.func, - onTimeClick: PropTypes.func, + onRelativeTimeClick: PropTypes.func, currentTime: PropTypes.number }; @@ -41,7 +41,7 @@ export default class CanGraph extends Component { this.view.signal('segment', nextProps.segment) } else { // Reset segment to full domain - const xVals = this.props.data.map((d) => d.x); + const xVals = this.props.data.map((d) => d.xRel); const min = Math.min.apply(null, xVals); const max = Math.max.apply(null, xVals); this.view.signal('segment', [min, max]); @@ -71,7 +71,7 @@ export default class CanGraph extends Component { onSignalClickTime(signal, clickTime) { if(clickTime !== undefined) { - this.props.onTimeClick(clickTime); + this.props.onRelativeTimeClick(clickTime); } } diff --git a/src/components/NearestFrame.js b/src/components/NearestFrame.js index 2edddbd..6e97598 100644 --- a/src/components/NearestFrame.js +++ b/src/components/NearestFrame.js @@ -76,17 +76,15 @@ export default class NearestFrame extends Component { return (
} + />
); } onLoadStart() { - console.log('onLoadStart') this.setState({isLoading: true}); } onLoadEnd() { - console.log('onLoadEnd') this.setState({isLoading: false}); } diff --git a/src/components/explorer.js b/src/components/explorer.js index 6a5b3f9..697b13d 100644 --- a/src/components/explorer.js +++ b/src/components/explorer.js @@ -68,6 +68,7 @@ export default class Explorer extends Component { return samples.map((entry) => { return {x: entry.time, + xRel: entry.time - this.props.firstCanTime, y: entry.signals[signalName], unit: msg.signals[signalName].unit} }); @@ -134,9 +135,11 @@ export default class Explorer extends Component { } onGraphTimeClick(time) { + const canTime = time + this.props.firstCanTime; + const {segmentIndices} = this.state; const {entries} = this.props.messages[this.props.selectedMessage]; - const userSeekIndex = Entries.findTimeIndex(entries, time); + const userSeekIndex = Entries.findTimeIndex(entries, canTime); this.setState({userSeekIndex, playing: true}); } @@ -191,6 +194,15 @@ export default class Explorer extends Component { return msg.entries[userSeekIndex].time; } + relativeSegment() { + const {segment} = this.state; + if(segment.length === 2) { + return [segment[0] - this.props.firstCanTime, + segment[1] - this.props.firstCanTime]; + } + return []; + } + render() { return (
{this.props.messages[this.props.selectedMessage] !== undefined ? @@ -249,10 +261,10 @@ export default class Explorer extends Component { unplot={() => {this.onSignalUnplotPressed(messageId, name)}} messageName={msg.name} signalSpec={msg.signals[name]} - segment={this.state.segment} + segment={this.relativeSegment()} data={this.graphData(msg, name)} - onTimeClick={this.onGraphTimeClick} - currentTime={this.state.seekTime} />; + onRelativeTimeClick={this.onGraphTimeClick} + currentTime={this.state.seekTime - this.props.firstCanTime} />; })}
diff --git a/src/models/can/dbc.js b/src/models/can/dbc.js index 7028df1..ea63927 100644 --- a/src/models/can/dbc.js +++ b/src/models/can/dbc.js @@ -34,7 +34,6 @@ export function swapOrder(arr, wordSize, gSize) { } export default class DBC { - constructor(dbcString) { this.dbcText = dbcString; this.importDbcString(dbcString); diff --git a/src/models/can/frame.js b/src/models/can/frame.js index 9e43204..f16eb5d 100644 --- a/src/models/can/frame.js +++ b/src/models/can/frame.js @@ -27,4 +27,4 @@ export default class Frame { return this.header() + "\n" + signals; } -} \ No newline at end of file +} diff --git a/src/vega/CanPlot.js b/src/vega/CanPlot.js index e40c983..17901a7 100644 --- a/src/vega/CanPlot.js +++ b/src/vega/CanPlot.js @@ -10,17 +10,17 @@ export default createClassFromSpec('CanPlot', { "name": "tipTime", "on": [{ "events": "mousemove", - "update": "invert('xscale', x())" + "update": "invert('xrelscale', x())" }] }, {"name": "clickTime", "on": [{ "events": "mouseup", - "update": "invert('xscale', x())" + "update": "invert('xrelscale', x())" }] }, {"name": "videoTime"}, - {"name": "segment", "value": {"data": "table", "field": "x"}} + {"name": "segment", "value": {"data": "table", "field": "xRel"}} ], "data": [ { @@ -32,24 +32,30 @@ export default createClassFromSpec('CanPlot', { "transform": [ { "type": "filter", - "expr": "abs(datum.x - tipTime) <= 0.1" + "expr": "abs(datum.xRel - tipTime) <= 0.1" }, { "type": "aggregate", - "fields": ["x", "y", "unit"], + "fields": ["xRel", "y", "unit"], "ops": ["min", "argmin", "argmin"], "as": ["min", "argmin", "argmin"] } ] } ], - "scales": [ { "name": "xscale", "type": "linear", "range": "width", "domain": {"data": "table", "field": "x"}, + "zero": false + }, + { + "name": "xrelscale", + "type": "linear", + "range": "width", + "domain": {"data": "table", "field": "xRel"}, "zero": false, "clamp": true, "domainRaw": {"signal": "segment"} @@ -62,12 +68,10 @@ export default createClassFromSpec('CanPlot', { "domain": {"data": "table", "field": "y"} } ], - "axes": [ - {"orient": "bottom", "scale": "xscale"}, + {"orient": "bottom", "scale": "xrelscale"}, {"orient": "left", "scale": "yscale"} ], - "marks": [ { "type": "line", @@ -75,7 +79,7 @@ export default createClassFromSpec('CanPlot', { "interactive": true, "encode": { "update": { - "x": {"scale": "xscale", "field": "x"}, + "x": {"scale": "xrelscale", "field": "xRel"}, "y": {"scale": "yscale", "field": "y"} }, "hover": { @@ -94,19 +98,7 @@ export default createClassFromSpec('CanPlot', { "y2": {"field": {"group": "height"}}, "stroke": {"value": "#000"}, "strokeWidth": {"value": 2}, - "x": {"value": 2460} - } - } - }, - { - "type": "rule", - "encode": { - "update": { - "y": {"value": 0}, - "y2": {"field": {"group": "height"}}, - "stroke": {"value": "#000"}, - "strokeWidth": {"value": 2}, - "x": {"scale": "xscale", + "x": {"scale": "xrelscale", "signal": "videoTime", "offset": 0.5} } } @@ -116,7 +108,7 @@ export default createClassFromSpec('CanPlot', { "from": {"data": "tooltip"}, "encode": { "update": { - "x": {"scale": "xscale", "field": "argmin.x"}, + "x": {"scale": "xrelscale", "field": "argmin.xRel"}, "y": {"scale": "yscale", "field": "argmin.y"}, "size": {"value": 50}, "fill": {"value": "black"} @@ -129,7 +121,7 @@ export default createClassFromSpec('CanPlot', { "interactive": false, "encode": { "update": { - "x": {"scale": "xscale", "field": "argmin.x"}, + "x": {"scale": "xrelscale", "field": "argmin.xRel"}, "y": {"scale": "yscale", "field": "argmin.y"}, "height": {"value": 20}, "width": {"value": 150}, @@ -145,7 +137,7 @@ export default createClassFromSpec('CanPlot', { "interactive": false, "encode": { "update": { - "text": {"signal": "parent.argmin.x + ': ' + parent.argmin.y + ' ' + parent.argmin.unit"}, + "text": {"signal": "parent.argmin.xRel + ': ' + parent.argmin.y + ' ' + parent.argmin.unit"}, "fill": {"value": "black"}, "fontWeight": {"value": "bold"} }