|
|
|
@ -6,9 +6,7 @@ export default class App extends React.Component { |
|
|
|
|
super(props); |
|
|
|
|
|
|
|
|
|
this.state = { |
|
|
|
|
ioState: { |
|
|
|
|
dout: [false], |
|
|
|
|
}, |
|
|
|
|
ioState: null, |
|
|
|
|
socket: io.connect() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
@ -28,8 +26,9 @@ export default class App extends React.Component { |
|
|
|
|
console.log('connected'); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
socket.on('message', (data) => { |
|
|
|
|
socket.on('ioState', (data) => { |
|
|
|
|
console.log(data); |
|
|
|
|
this.setState({ioState: data}); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -42,6 +41,14 @@ export default class App extends React.Component { |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
sendUpdate(type, pin, value) { |
|
|
|
|
this.state.socket.emit('update', { |
|
|
|
|
type: type, |
|
|
|
|
pin: pin, |
|
|
|
|
value: value, |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
|
return ( |
|
|
|
|
<div className="ui text container"> |
|
|
|
@ -54,7 +61,7 @@ export default class App extends React.Component { |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div className="column"> |
|
|
|
|
{this.state.ioState && <div className="column"> |
|
|
|
|
<div className="ui segment"> |
|
|
|
|
<div className="ui top attached label">Digital Out</div> |
|
|
|
|
<div className="ui two column middle aligned grid"> |
|
|
|
@ -63,8 +70,8 @@ export default class App extends React.Component { |
|
|
|
|
DO1 |
|
|
|
|
</div> |
|
|
|
|
<div className="ui buttons"> |
|
|
|
|
<button onClick={() => this.doutSet(0, true)} className="ui red button">On</button> |
|
|
|
|
<button onClick={() => this.doutSet(0, false)} className="ui button">Off</button> |
|
|
|
|
<button onClick={() => this.sendUpdate('dout', 0, true)} className="ui red button">On</button> |
|
|
|
|
<button onClick={() => this.sendUpdate('dout', 0, false)} className="ui button">Off</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div className="four wide right aligned column"> |
|
|
|
@ -73,7 +80,7 @@ export default class App extends React.Component { |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div>} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|