tanner/critical-leddemo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add support for DIN

Browse Source
This commit is contained in:
Tanner Collin 2017-10-28 03:09:06 +00:00
parent 45d88f1ddc
commit df5521d323
2 changed files with 64 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
server.js
View File

@ -1,8 +1,17 @@
const express = require('express') const express = require('express');
const app = express() const app = express();
const DOUT_LUT = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
const server = app.listen(3000, function () {
console.log('Example app listening on port 3000!');
})
const io = require('socket.io').listen(server);
var ioState = { var ioState = {
dout: [false], dout: [false, false, false, false],
din: [false, false, false, false]
} }
const updateState = data => { const updateState = data => {
@ -14,15 +23,21 @@ const updateState = data => {
app.use('/', express.static('dist')) app.use('/', express.static('dist'))
app.get('/api/dout/:pin', function (req, res) { app.get('/api/dio/:data', function (req, res) {
res.send(ioState.dout[req.params.pin]) const doutNum = ioState.dout.reduce((total, x, i) => x ? total + Math.pow(2, i) : total, 0);
}) const doutChar = DOUT_LUT[doutNum];
res.send(doutChar);
const server = app.listen(3000, function () { const dinChar = req.params.data || '0';
console.log('Example app listening on port 3000!') const dinArray = parseInt(dinChar, 16).toString(2).split('').reverse();
}) const din = new Array(4).fill(false).map((x, i) => dinArray[i] != '1').reverse();
const io = require('socket.io').listen(server); if (ioState.din.toString() != din.toString()) {
ioState.din = din;
io.emit('ioState', ioState);
console.log(din);
}
})
io.on('connection', socket => { io.on('connection', socket => {
socket.emit('ioState', ioState); socket.emit('ioState', ioState);

53
src/app.js
View File

@ -13,6 +13,11 @@ export default class App extends React.Component {
componentDidMount() { componentDidMount() {
this.connect(); this.connect();
this.setState({ioState: {
dout: [false, true, false, false],
din: [false, false, true, false]
}});
} }
componentWillUnmount() { componentWillUnmount() {
@ -48,28 +53,48 @@ export default class App extends React.Component {
<div className="center aligned column"> <div className="center aligned column">
<div className="ui basic segment"> <div className="ui basic segment">
<img className="ui left floated small image" src="http://criticalcontrol.com/wp-content/themes/cces/images/logo.png" /> <img className="ui left floated small image" src="http://criticalcontrol.com/wp-content/themes/cces/images/logo.png" />
<span className="ui medium header">LED Toggle Demo</span> <span className="ui medium header">Modem I/O Demo</span>
</div> </div>
</div> </div>
</div> </div>
{this.state.ioState && <div className="column"> {this.state.ioState && <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 middle aligned grid"> {this.state.ioState.dout.map((x, i) => (
<div className="twelve wide column"> <div className="ui two column middle aligned grid">
<div className="ui right pointing label"> <div className="twelve wide column">
DO1 <div className="ui right pointing label">
DO{i+1}
</div>
<div className="ui buttons">
<button onClick={() => this.sendUpdate('dout', i, true)} className="ui red button">On</button>
<button onClick={() => this.sendUpdate('dout', i, false)} className="ui button">Off</button>
</div>
</div>
<div className="four wide right aligned column">
{!x && <i className="bordered inverted disabled idea big icon"></i>}
{x && <i className="bordered inverted red idea big icon"></i>}
</div>
</div> </div>
<div className="ui buttons"> ))}
<button onClick={() => this.sendUpdate('dout', 0, true)} className="ui red button">On</button> </div>
<button onClick={() => this.sendUpdate('dout', 0, false)} className="ui button">Off</button> </div>}
{this.state.ioState && <div className="column">
<div className="ui segment">
<div className="ui top attached label">Digital In</div>
{this.state.ioState.din.map((x, i) => (
<div className="ui two column middle aligned grid">
<div className="four wide column">
<div className="ui right pointing label">
DI{i+1}
</div>
</div>
<div className="twelve wide center aligned column">
{!x && <i className="bordered inverted disabled circle big icon"></i>}
{x && <i className="bordered inverted red circle thin big icon"></i>}
</div>
</div> </div>
</div> ))}
<div className="four wide right aligned column">
{!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>}
</div> </div>