retropilot
/
cabana
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

cabana: lift seek state up to CanExplorer.js; fix bug where seek marker would overlap video play button

main
Andy Haden 2017-06-23 14:17:35 -07:00
parent 01651e0899
commit c9dbb2f985
6 changed files with 79 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/CanExplorer.js
View File

@ -39,7 +39,8 @@ export default class CanExplorer extends Component {
dbc: new DBC(),
dbcFilename: 'New DBC',
dbcLastSaved: null,
seekTime: 0
seekTime: 0,
seekIndex: 0,
};
this.showLoadDbc = this.showLoadDbc.bind(this);
@ -53,6 +54,7 @@ export default class CanExplorer extends Component {
this.onConfirmedSignalChange = this.onConfirmedSignalChange.bind(this);
this.onPartChange = this.onPartChange.bind(this);
this.onMessageFrameEdited = this.onMessageFrameEdited.bind(this);
this.onSeek = this.onSeek.bind(this);
}
componentWillMount() {
@ -161,7 +163,8 @@ export default class CanExplorer extends Component {
worker.postMessage({dbcText: dbc.text(),
base: route.url,
num: part,
canStartTime: firstCanTime});
canStartTime: firstCanTime,
});
}
showLoadDbc() {
@ -243,8 +246,23 @@ export default class CanExplorer extends Component {
this.hideEditMessageModal();
}
onSeek(seekTime) {
this.setState({seekTime});
onSeek(seekIndex, seekTime) {
this.setState({seekIndex, seekTime});
}
onMessageSelected(msgKey) {
let {seekTime, seekIndex, messages} = this.state;
const msg = messages[msgKey];
if(seekTime > 0) {
seekIndex = msg.entries.findIndex((e) => e.relTime >= seekTime);
if(seekIndex === -1) {
seekIndex = 0;
}
seekTime = msg.entries[seekIndex].relTime;
}
this.setState({seekTime, seekIndex, selectedMessage: msgKey});
}
render() {
@ -274,7 +292,9 @@ export default class CanExplorer extends Component {
onConfirmedSignalChange={this.onConfirmedSignalChange}
onSeek={this.onSeek}
canFrameOffset={this.state.canFrameOffset}
firstCanTime={this.state.firstCanTime} /> : null}
firstCanTime={this.state.firstCanTime}
seekTime={this.state.seekTime}
seekIndex={this.state.seekIndex} /> : null}
</div>
{this.state.showLoadDbc ? <LoadDbcModal

5
src/components/RouteSeeker.js
View File

@ -87,7 +87,10 @@ export default class RouteSeeker extends Component {
onMouseMove(e) {
const markerOffsetPct = this.mouseEventXOffsetPercent(e);
if(markerOffsetPct < 0) {
this.onMouseLeave();
return;
}
const markerWidth = Styles.marker._definition.width;
const markerLeft = `calc(${markerOffsetPct + '%'} - ${markerWidth / 2}px)`;

36
src/components/explorer.js
View File

@ -21,7 +21,8 @@ export default class Explorer extends Component {
messages: PropTypes.objectOf(PropTypes.object),
onConfirmedSignalChange: PropTypes.func,
canFrameOffset: PropTypes.number,
firstCanTime: PropTypes.number
firstCanTime: PropTypes.number,
onSeek: PropTypes.func
};
constructor(props) {
@ -39,8 +40,6 @@ export default class Explorer extends Component {
segmentIndices: [],
shouldShowAddSignal: true,
userSeekIndex: 0,
seekIndex: 0,
seekTime: 0,
playing: false,
};
this.onSignalPlotPressed = this.onSignalPlotPressed.bind(this);
@ -70,7 +69,7 @@ export default class Explorer extends Component {
// by finding new message entry indices
// corresponding to old message segment/seek times.
let {segment, segmentIndices, userSeekIndex, seekIndex, seekTime} = this.state;
let {segment, segmentIndices, userSeekIndex} = this.state;
if(segment.length === 2) {
const segmentStartIdx = nextMessage.entries.findIndex((e) => e.relTime >= segment[0]);
let segmentEndIdx = nextMessage.entries.findIndex((e) => e.relTime >= segment[1]);
@ -90,20 +89,8 @@ export default class Explorer extends Component {
}
}
if(seekTime > 0) {
seekIndex = nextMessage.entries.findIndex((e) => e.relTime >= seekTime);
if(seekIndex === -1) {
seekIndex = 0;
}
seekTime = nextMessage.entries[seekIndex].relTime;
}
this.setState({segment,
segmentIndices,
seekIndex,
seekTime,
userSeekIndex: seekIndex})
segmentIndices})
}
if(nextMessage && curMessage) {
@ -221,16 +208,21 @@ export default class Explorer extends Component {
}
onUserSeek(ratio) {
const {entries} = this.props.messages[this.props.selectedMessage];
const userSeekIndex = this.indexFromSeekRatio(ratio);
this.setState({seekIndex: userSeekIndex, userSeekIndex});
const seekTime = entries[userSeekIndex].relTime;
this.props.onSeek(userSeekIndex, seekTime);
this.setState({userSeekIndex});
}
onPlaySeek(ratio) {
const {entries} = this.props.messages[this.props.selectedMessage];
const seekIndex = this.indexFromSeekRatio(ratio);
const seekTime = entries[seekIndex].relTime;
this.setState({seekIndex, seekTime: entries[seekIndex].time});
this.props.onSeek(seekIndex, seekTime);
}
onGraphTimeClick(time) {
@ -310,10 +302,10 @@ export default class Explorer extends Component {
onConfirmedSignalChange={this.props.onConfirmedSignalChange}
message={this.props.messages[this.props.selectedMessage]}
onClose={() => {this.setState({shouldShowAddSignal: false})}}
messageIndex={this.state.seekIndex}
messageIndex={this.props.seekIndex}
/> : null}
<CanLog message={this.props.messages[this.props.selectedMessage]}
messageIndex={this.state.seekIndex}
messageIndex={this.props.seekIndex}
segmentIndices={this.state.segmentIndices}
plottedSignals={this.state.plottedSignals}
onSignalPlotPressed={this.onSignalPlotPressed}
@ -328,7 +320,7 @@ export default class Explorer extends Component {
secondsLoaded={this.secondsLoaded()}
startOffset={this.startOffset()}
segmentProgress={this.segmentProgress}
seekIndex={this.state.seekIndex}
seekIndex={this.props.seekIndex}
userSeekIndex={this.state.userSeekIndex}
playing={this.state.playing}
url={this.props.url}

18
src/components/meta.js
View File

@ -23,7 +23,7 @@ export default class Meta extends Component {
showEditMessageModal: PropTypes.func,
route: PropTypes.object,
partsLoaded: PropTypes.array,
seekTime: PropTypes.number
};
constructor(props) {
@ -173,7 +173,7 @@ export default class Meta extends Component {
}
messageBytes(message) {
const {seekTime} = this.state;
const {seekTime} = this.props;
let mostRecentMsgIndex = message.entries.findIndex((e) =>
e.relTime > seekTime) - 1;
mostRecentMsgIndex = Math.max(0, mostRecentMsgIndex);
@ -181,11 +181,14 @@ export default class Meta extends Component {
const msgSize = message.frame ? message.frame.size : 8;
const byteStyles = mostRecentMsg.byteStateChangeTimes.map((time) =>
1 - ((time - seekTime) / 30)
).map((opacity) => {
const byteOpacities = mostRecentMsg.byteStateChangeTimes.map((time) =>
Math.max(0.1, Math.min(1, 1.1 - ((seekTime - time) / 30)))
);
const byteStyles = byteOpacities.map((opacity) =>
StyleSheet.create({byteStyle: {opacity}})
});
);
const bytes = byteStyles.map(({byteStyle}, idx) =>
<div key={idx} className={css(Styles.byte, byteStyle)}></div>
@ -377,6 +380,7 @@ const Styles = StyleSheet.create({
byte: {
width: 15,
height: 15,
border: '1px solid rgba(0,0,0,0.9)'
border: '1px solid rgba(0,0,0,0.9)',
backgroundColor: 'red'
}
});

16
src/styles/modal-tabs.js 100644
View File

@ -0,0 +1,16 @@
import {StyleSheet} from 'aphrodite/no-important';
export default StyleSheet.create({
tab: {
display: 'inline',
marginRight: 20,
cursor: 'pointer'
},
selectedTab: {
borderBottom: '2px solid #000',
fontWeight: 'bold'
},
tabContent: {
paddingTop: 20
}
});

17
src/workers/can-fetcher.worker.js
View File

@ -10,7 +10,8 @@ function createMessageSpec(dbc, address, id, bus) {
id: id,
bus: bus,
entries: [],
frame: dbc.messages.get(address)}
frame: dbc.messages.get(address),
signalAggregates: {}}
}
async function loadCanPart(dbc, base, num, canStartTime) {
@ -35,13 +36,13 @@ async function loadCanPart(dbc, base, num, canStartTime) {
const prevMsg = messages[id].entries.length > 0 ?
messages[id].entries[messages[id].entries.length - 1] : null;
const msg = DbcUtils.parseMessage(dbc,
t,
address.toNumber(),
data,
canStartTime,
prevMsg);
messages[id].entries.push(msg);
const msgEntry = DbcUtils.parseMessage(dbc,
t,
address.toNumber(),
data,
canStartTime,
prevMsg);
messages[id].entries.push(msgEntry);
}
self.postMessage(messages);