|
|
@ -1,6 +1,25 @@ |
|
|
|
import React from 'react'; |
|
|
|
import React from 'react'; |
|
|
|
|
|
|
|
|
|
|
|
export default class Site extends React.Component { |
|
|
|
export default class App extends React.Component { |
|
|
|
|
|
|
|
constructor(props) { |
|
|
|
|
|
|
|
super(props); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.state = { |
|
|
|
|
|
|
|
ioState: { |
|
|
|
|
|
|
|
dout: [false], |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
doutSet(pin, value) { |
|
|
|
|
|
|
|
this.setState({ |
|
|
|
|
|
|
|
ioState: { |
|
|
|
|
|
|
|
...this.state.ioState, |
|
|
|
|
|
|
|
dout: this.state.ioState.dout.map((x, i) => i == pin ? value : x), |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
render() { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div className="ui text container"> |
|
|
|
<div className="ui text container"> |
|
|
@ -16,18 +35,19 @@ export default class Site extends React.Component { |
|
|
|
<div className="column"> |
|
|
|
<div className="column"> |
|
|
|
<div className="ui segment"> |
|
|
|
<div className="ui segment"> |
|
|
|
<div className="ui top attached label">Digital Out</div> |
|
|
|
<div className="ui top attached label">Digital Out</div> |
|
|
|
<div className="ui two column grid"> |
|
|
|
<div className="ui two column middle aligned grid"> |
|
|
|
<div className="twelve wide column"> |
|
|
|
<div className="twelve wide column"> |
|
|
|
<div className="ui right pointing label"> |
|
|
|
<div className="ui right pointing label"> |
|
|
|
DO1 |
|
|
|
DO1 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="ui buttons"> |
|
|
|
<div className="ui buttons"> |
|
|
|
<button className="ui red button">On</button> |
|
|
|
<button onClick={() => this.doutSet(0, true)} className="ui red button">On</button> |
|
|
|
<button className="ui button">Off</button> |
|
|
|
<button onClick={() => this.doutSet(0, false)} className="ui button">Off</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="four wide right aligned column"> |
|
|
|
<div className="four wide right aligned column"> |
|
|
|
<i className="red idea big icon"></i> |
|
|
|
{!this.state.ioState.dout[0] && <i className="bordered inverted disabled idea big icon"></i>} |
|
|
|
|
|
|
|
{this.state.ioState.dout[0] && <i className="bordered inverted red idea big icon"></i>} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|