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
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 app = express()
const express = require('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 = {
dout: [false],
dout: [false, false, false, false],
din: [false, false, false, false]
}
const updateState = data => {
@@ -14,15 +23,21 @@ const updateState = data => {
app.use('/', express.static('dist'))
app.get('/api/dout/:pin', function (req, res) {
res.send(ioState.dout[req.params.pin])
})
app.get('/api/dio/:data', function (req, res) {
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 () {
console.log('Example app listening on port 3000!')
})
const dinChar = req.params.data || '0';
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 => {
socket.emit('ioState', ioState);

37
src/app.js
View File

@@ -13,6 +13,11 @@ export default class App extends React.Component {
componentDidMount() {
this.connect();
this.setState({ioState: {
dout: [false, true, false, false],
din: [false, false, true, false]
}});
}
componentWillUnmount() {
@@ -48,28 +53,48 @@ export default class App extends React.Component {
<div className="center aligned column">
<div className="ui basic segment">
<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>
{this.state.ioState && <div className="column">
<div className="ui segment">
<div className="ui top attached label">Digital Out</div>
{this.state.ioState.dout.map((x, i) => (
<div className="ui two column middle aligned grid">
<div className="twelve wide column">
<div className="ui right pointing label">
DO1
DO{i+1}
</div>
<div className="ui buttons">
<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>
<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">
{!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>}
{!x && <i className="bordered inverted disabled idea big icon"></i>}
{x && <i className="bordered inverted red idea big icon"></i>}
</div>
</div>
))}
</div>
</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>