Add support for DIN

server.js

@@ -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);

src/app.js

@@ -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>
-                            <div className="ui two column middle aligned grid">
-                                <div className="twelve wide column">
-                                    <div className="ui right pointing label">
-                                          DO1
+                                {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">
+                                                  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 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>
+                                ))}
+                        </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 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>