serial monitor read

Author: Alberto Iannaccone

src/reader-writer.js

@@ -5,6 +5,7 @@ export default class ReaderWriter {
     this.socket = null;
     this.pluginURL = null;
     this.messageSubject = new Subject();
+    this.serialMonitorSubject = new Subject();
     this.devicesList = {
       serial: [],
       network: []
@@ -32,7 +33,6 @@ export default class ReaderWriter {
       else {
         this.devicesList.serial = devicesInfo.Ports;
       }
-      console.log(this.devicesList);
     }
   }
 
@@ -65,6 +65,7 @@ export default class ReaderWriter {
     this.openingSerial = new Promise((resolve, reject) => {
       checkOpen = message => {
         if (message.Cmd === 'Open') {
+          this.readSerial();
           return resolve();
         }
         if (message.Cmd === 'OpenFail') {
@@ -89,6 +90,9 @@ export default class ReaderWriter {
       return Promise.reject(new Error('No board found'));
     }
     if (!serialPort.IsOpen) {
+      if (!this.readSerialSubscription) {
+        this.readSerialSubscription.unsubscribe();
+      }
       return Promise.resolve();
     }
     let checkClosed = null;
@@ -109,4 +113,15 @@ export default class ReaderWriter {
     this.socket.emit('command', `close ${port}`);
     return this.closingSerial;
   }
+
+  readSerial() {
+    const onMessage = message => {
+      if (message.D) {
+        this.serialMonitorSubject.next(message.D);
+      }
+    };
+    if (!this.readSerialSubscription) {
+      this.readSerialSubscription = this.messageSubject.subscribe(onMessage);
+    }
+  }
 }

test/app.jsx

@@ -2,14 +2,10 @@ import React from 'react';
 import Daemon from '../src';
 import { WS_STATUS_CONNECTED, AGENT_STATUS_FOUND } from '../src/socket-daemon';
 
-const handleOpen = (e, port) => {
-  e.preventDefault();
-  Daemon.readerWriter.openSerialMonitor(port);
-};
-
-const handleClose = (e, port) => {
-  e.preventDefault();
-  Daemon.readerWriter.closeSerialMonitor(port);
+const scrollToBottom = (target) => {
+  if (target) {
+    target.scrollTop = target.scrollHeight; // eslint-disable-line no-param-reassign
+  }
 };
 
 class App extends React.Component {
@@ -21,9 +17,13 @@ class App extends React.Component {
       wsStatus: '-',
       serialDevices: [],
       networkDevices: [],
-      agentInfo: ''
+      agentInfo: '',
+      serialMonitorContent: ''
     };
+
     this.connect = this.connect.bind(this);
+    this.handleOpen = this.handleOpen.bind(this);
+    this.handleClose = this.handleClose.bind(this);
   }
 
   componentDidMount() {
@@ -46,6 +46,12 @@ class App extends React.Component {
         networkDevices: Daemon.readerWriter.devicesList.network
       });
     });
+
+    const serialTextarea = document.getElementById('serial-textarea');
+    Daemon.readerWriter.serialMonitorSubject.subscribe(message => {
+      this.setState({ serialMonitorContent: this.state.serialMonitorContent + message });
+      scrollToBottom(serialTextarea);
+    });
   }
 
   showError(err) {
@@ -62,8 +68,19 @@ class App extends React.Component {
       .catch(this.showError);
   }
 
+  handleOpen(e, port) {
+    this.setState({ serialMonitorContent: '' });
+    e.preventDefault();
+    Daemon.readerWriter.openSerialMonitor(port);
+  }
+
+  handleClose(e, port) {
+    e.preventDefault();
+    Daemon.readerWriter.closeSerialMonitor(port);
+  }
+
   render() {
-    const listSerialDevices = this.state.serialDevices.map((device, i) => (<li key={i}>{device.Name} - IsOpen: {device.IsOpen ? 'true' : 'false'} - <a href="#" onClick={(e) => handleOpen(e, device.Name)}>open</a> - <a href="#" onClick={(e) => handleClose(e, device.Name)}>close</a></li>));
+    const listSerialDevices = this.state.serialDevices.map((device, i) => (<li key={i}>{device.Name} - IsOpen: {device.IsOpen ? 'true' : 'false'} - <a href="#" onClick={(e) => this.handleOpen(e, device.Name)}>open</a> - <a href="#" onClick={(e) => this.handleClose(e, device.Name)}>close</a></li>));
     const listNetworkDevices = this.state.networkDevices.map((device, i) => <li key={i}>{device.Name}</li>);
 
     return (
@@ -91,6 +108,10 @@ class App extends React.Component {
           <p id="error"></p>
         </div>
         <button id="connect" onClick={ this.connect }>Connect</button>
+        <div className="serial-monitor">
+          <h2>Serial Monitor</h2>
+          <textarea id="serial-textarea" value={ this.state.serialMonitorContent }/>
+        </div>
       </div>
     );
   }

test/index.html

@@ -20,6 +20,10 @@
   pre {
     background: #f9f9f9;
   }
+
+  #serial-textarea {
+    height: 300px;
+  }
   </style>
 </head>
 <body>