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

cabana: nudge buttons, show name&hex in log

main
Andy Haden 2017-06-15 15:40:36 -07:00
parent 344701ef16
commit 5d78ada009
3 changed files with 56 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/CanExplorer.js
View File

@ -203,9 +203,10 @@ export default class CanExplorer extends Component {
canStartTime: this.state.firstCanTime});
}
onPartChange([first, last]) {
// update this.state.messages
//
onPartChange(parts) {
this.setState({currentParts: parts}, () => {
this.spawnWorker(parts, 0);
});
}
render() {

43
src/components/CanLog.js
View File

@ -27,12 +27,10 @@ export default class CanLog extends Component {
this.state = {
length: 0,
msgDisplayFormat: props.message && props.message.name ? 'name' : 'hex',
expandedMessages: [],
messageHeights: []
}
this.onChoicePress = this.onChoicePress.bind(this);
this.messageRow = this.messageRow.bind(this);
this.addDisplayedMessages = this.addDisplayedMessages.bind(this);
this.renderMessage = this.renderMessage.bind(this);
@ -74,10 +72,6 @@ export default class CanLog extends Component {
this.setState({length: newLength, messageHeights});
}
onChoicePress(fmt) {
this.setState({msgDisplayFormat: fmt});
}
expandMessage(msg, msgIdx) {
// const {messageHeights} = this.state;
// messageHeights[msgIdx] = TODO dynamic height calc if message expanded.
@ -130,9 +124,7 @@ export default class CanLog extends Component {
}
messageRow(msg, key) {
const {msgDisplayFormat} = this.state;
const msgIsExpanded = this.isMessageExpanded(msg);
let messageStyle = msgDisplayFormat === 'hex' ? Styles.hex : null;
const row = [<div key={key}
className={css(Styles.messageRow, Styles.row)}
@ -147,12 +139,16 @@ export default class CanLog extends Component {
:
<div className={css(Styles.col)}>&darr;</div>}
<div className={css(Styles.col, Styles.timefieldCol)}>
{msg.relTime}
{msg.relTime.toFixed(3)}
</div>
<div className={css(Styles.col,
Styles.messageCol)}>
{this.props.message.name}
</div>
<div className={css(Styles.col,
Styles.messageCol,
messageStyle)}>
{msgDisplayFormat == 'name' ? this.props.message.name : msg.hexData}
Styles.hex)}>
{msg.hexData}
</div>
</div>];
@ -177,17 +173,11 @@ export default class CanLog extends Component {
<div className={css(Styles.row)}>
<div className={css(Styles.col, Styles.dropdownCol)}>&nbsp;</div>
<div className={css(Styles.col, Styles.timefieldCol)}>Time</div>
<div className={css(Styles.messageCol)}>
Message
(<span className={css(Styles.messageFormatChoice,
(this.state.msgDisplayFormat == 'name' ? Styles.messageFormatChoiceSelected
: Styles.messageFormatChoiceUnselected))}
onClick={() => {this.onChoicePress('name')}}>Name</span>
<span> / </span>
<span className={css(Styles.messageFormatChoice,
(this.state.msgDisplayFormat == 'hex' ? Styles.messageFormatChoiceSelected
: Styles.messageFormatChoiceUnselected))}
onClick={() => {this.onChoicePress('hex')}}>Hex</span>)
<div className={css(Styles.col)}>
Message Name
</div>
<div className={css(Styles.col)}>
Bytes
</div>
</div>
<div className={css(Styles.tableRowGroup)}
@ -262,15 +252,6 @@ const Styles = StyleSheet.create({
},
messageFormatHeader: {
},
messageFormatChoice: {
cursor: 'pointer',
},
messageFormatChoiceSelected: {
fontWeight: 'bold'
},
messageFormatChoiceUnselected: {
color: 'gray'
},
pointerUnderlineHover: {
cursor: 'pointer',

44
src/components/PartSelector.js
View File

@ -16,6 +16,9 @@ export default class PartSelector extends Component {
selectedPartStyle: this.makePartStyle(props.partsCount, 0),
selectedPart: 0
};
this.selectNextPart = this.selectNextPart.bind(this);
this.selectPrevPart = this.selectPrevPart.bind(this);
}
makePartStyle(partsCount, selectedPart) {
@ -34,26 +37,59 @@ export default class PartSelector extends Component {
}
}
selectNextPart() {
let {selectedPart} = this.state;
selectedPart++;
this.setState({selectedPart,
selectedPartStyle: this.makePartStyle(this.props.partsCount,
selectedPart)});
}
selectPrevPart() {
let {selectedPart} = this.state;
selectedPart--;
this.setState({selectedPart,
selectedPartStyle: this.makePartStyle(this.props.partsCount,
selectedPart)});
}
render() {
const {selectedPartStyle} = this.state;
return (<div className={css(Styles.root)}>
<div className={css(Styles.selectedPart, selectedPartStyle.selectedPart)}></div>
<span>Next</span>
<span>Prev</span>
<div className={css(Styles.selector)}>
<div className={css(Styles.selectedPart, selectedPartStyle.selectedPart)}></div>
</div>
<div className={css(Styles.nudge)}>
<span className={css(Styles.nudgeButton)}
onClick={this.selectNextPart}>Next</span>
<span className={css(Styles.nudgeButton)}
onClick={this.selectPrevPart}>Prev</span>
</div>
</div>);
}
}
const Styles = StyleSheet.create({
root: {
flexDirection: 'row',
display: 'flex',
flex: 1
},
selector: {
width: PartSelector.selectorWidth,
height: 30,
border: '1px solid #000',
flexDirection: 'row'
},
selectedPart: {
backgroundColor: 'black',
height: '100%'
},
nudge: {
},
nudgeButton: {
cursor: 'pointer'
}
});