Merge pull request #63 from parallaxinc/serial-output-data

communicate with BS2 over serial, add output pane for data, clear data on download - closes #47, closes #48, closes #49

Author: monteslu

client.js

@@ -30,15 +30,15 @@ var plugins = [
     }
   },
   {
-    register: require('./plugins/sidebar'),
+    register: require('./plugins/editor'),
     options: {
-      defaultProject: 'new-project'
+      initial: ''
     }
   },
   {
-    register: require('./plugins/editor'),
+    register: require('./plugins/sidebar'),
     options: {
-      initial: ''
+      defaultProject: 'new-project'
     }
   }
 ];

package.json

@@ -7,7 +7,7 @@
     "test": "test"
   },
   "dependencies": {
-    "bs2-serial": "^0.2.0",
+    "bs2-serial": "^0.3.0",
     "codemirror": "^4.13.0",
     "frylord": "^0.5.0",
     "holovisor": "^0.2.0",
@@ -19,6 +19,7 @@
     "react-style": "^0.4.0",
     "skrim": "0.0.3",
     "snacks": "^0.2.0",
+    "through2": "^0.6.5",
     "when": "^3.7.2"
   },
   "devDependencies": {

plugins/editor/index.js

@@ -9,14 +9,38 @@ var CodeMirror = require('codemirror');
 function editor(app, opts, done){
 
   var codeEditor;
+  var outputConsole;
 
   var space = app.workspace;
 
+  function output(text){
+    if(outputConsole){
+      outputConsole.innerHTML += text;
+      outputConsole.scrollTop = outputConsole.scrollHeight;
+    }
+  }
+
+  function clearOutput(){
+    if(outputConsole){
+      outputConsole.innerHTML = '';
+    }
+  }
+
+  output.clear = clearOutput;
+
+  app.expose('logger', output);
+
   app.view('editor', function(el, cb){
     console.log('editor render');
 
     if(!codeEditor){
-      codeEditor = CodeMirror(el, {
+      let editorContainer = document.createElement('div');
+      editorContainer.style.display = 'flex';
+      editorContainer.style.flex = '1';
+      editorContainer.style.flexDirection = 'column';
+      el.appendChild(editorContainer);
+
+      codeEditor = CodeMirror(editorContainer, {
         value: space.current.deref(),
         mode: 'javascript',
         theme: 'neo',
@@ -36,6 +60,17 @@ function editor(app, opts, done){
       });
     }
 
+    if(!outputConsole){
+      outputConsole = document.createElement('pre');
+      outputConsole.style.height = '200px';
+      outputConsole.style.boxShadow = 'inset 0 5px 10px -5px rgba(0, 0, 0, 0.26)';
+      outputConsole.style.backgroundColor = 'white';
+      outputConsole.style.padding = '10px';
+      outputConsole.style.overflow = 'auto';
+      outputConsole.style.whiteSpace = 'pre-wrap';
+      el.appendChild(outputConsole);
+    }
+
     cb();
   });
 

plugins/sidebar/file-operations.js

@@ -1,7 +1,7 @@
 'use strict';
 
-const when = require('when');
 const React = require('react');
+const through = require('through2');
 const { Menu, MainButton, ChildButton } = require('react-mfb-iceddev');
 
 require('react-mfb-iceddev/mfb.css');
@@ -12,8 +12,12 @@ const DeleteConfirmOverlay = require('./overlays/delete-confirm');
 
 const styles = require('./styles');
 
+let boards = {};
+
 const FileOperations = React.createClass({
   handleError: function(err){
+    // leaving this in for better debugging of errors
+    console.log(err);
     const toast = this.props.toast;
 
     toast.show(err.message, { style: styles.errorToast });
@@ -67,24 +71,38 @@ const FileOperations = React.createClass({
   download: function(devicePath){
     const toast = this.props.toast;
     const space = this.props.workspace;
+    const logger = this.props.logger;
     const overlay = this.props.overlay;
-    const programmer = this.props.programmer;
+    const Board = this.props.Board;
     const name = space.filename.deref();
+    const source = space.current.deref();
 
     if(!devicePath){
       return;
     }
 
-    programmer.compile({ source: space.current.deref() })
-      .then(function(memory){
-        var options = {
-          path: devicePath,
-          board: 'bs2',
-          memory: memory
-        };
+    const boardOpts = {
+      path: devicePath,
+      revision: 'bs2',
+      readAfterProgram: true
+    };
+
+    let board;
+    if(boards[devicePath]){
+      board = boards[devicePath];
+    } else {
+      board = boards[devicePath] = new Board(boardOpts);
+    }
+
+    const log = through(function(chunk, enc, cb){
+      logger(chunk.toString());
+      cb(null, chunk);
+    });
 
-        return programmer.bootload(options);
-      })
+    board.compile(source)
+      .tap(() => logger.clear())
+      .then((memory) => board.bootload(memory))
+      .then(() => board.read().pipe(log))
       .tap(() => toast.clear())
       .tap(() => this.handleSuccess(`'${name}' downloaded successfully`))
       .catch(this.handleError)

plugins/sidebar/index.js

@@ -15,7 +15,8 @@ function sidebar(app, opts, done){
   const toast = app.toast;
   const overlay = app.overlay;
   const userConfig = app.userConfig;
-  const programmer = app.bs2serial;
+  const Board = app.bs2serial;
+  const logger = app.logger;
 
   app.view('sidebar', function(el, cb){
     console.log('sidebar render');
@@ -28,7 +29,7 @@ function sidebar(app, opts, done){
           <ListItem icon="folder" disableRipple>{space.cwd.deref()}</ListItem>
           {directory.map((file) => <File key={file.get('name')} workspace={space} filename={file.get('name')} temp={file.get('temp')} />)}
         </FileList>
-        <FileOperations workspace={space} overlay={overlay} toast={toast} programmer={programmer} />
+        <FileOperations workspace={space} overlay={overlay} toast={toast} Board={Board} logger={logger} />
       </Sidebar>
     );