#30 This adds a line in the console to send Lua code directly to the …

…nodemcu. Handy in diagnosing and trying stuff out.

Bounce/app/OutputConsole.js

@@ -0,0 +1,48 @@
+/**
+ * Create a console to output data in visible in the UI.
+ * @param output_element A DOM element to use for output.
+ * @constructor
+ */
+var OutputConsole = function (output_element) {
+    this.output_element = output_element;
+    this.lineTypedHandler = null;
+    this.writeLine('Console initialised.');
+};
+
+/**
+ * Write some data to the output. HTML is escaped.
+ * @param data Data to write.
+ */
+OutputConsole.prototype.write = function(data) {
+    var safe_data = goog.string.htmlEscape(data);
+    safe_data = goog.string.newLineToBr(safe_data);
+    this.output_element.append(safe_data);
+};
+
+/**
+ * Write a line of data.
+ * @param line
+ */
+OutputConsole.prototype.writeLine = function(line) {
+    this.write(line + '\n')
+};
+
+/**
+ * Set a handler for a line being typed. Only one handler allowed here.
+ * @param handler The handler to call. Expects only a "line" parameter - a string of input.
+ */
+OutputConsole.prototype.lineTyped = function(handler) {
+    this.lineTypedHandler = handler;
+};
+
+OutputConsole.prototype.setupInput = function(inputElement) {
+    var _oc = this;
+    inputElement.keypress(function(e) {
+        /* If it's an enter key */
+       if(e.which == 13) {
+           var line = inputElement.val();
+           _oc.lineTypedHandler(line + "\n");
+           inputElement.val('');
+       }
+    });
+};

Bounce/app/start.js

@@ -3,33 +3,6 @@ var mcu_console;
 var is_preparing = false;
 var ui;
 
-/**
- * Create a console to output data in visible in the UI.
- * @param output_element A DOM element to use for output.
- * @constructor
- */
-var OutputConsole = function (output_element) {
-    /**
-     * Write some data to the output. HTML is escaped.
-     * @param data Data to write.
-     */
-    this.write = function(data) {
-        var safe_data = goog.string.htmlEscape(data);
-        safe_data = goog.string.newLineToBr(safe_data);
-        output_element.append(safe_data);
-    };
-
-    /**
-     * Write a line of data.
-     * @param line
-     */
-    this.writeLine = function(line) {
-        this.write(line + '\n')
-    };
-
-    this.writeLine('Console initialised.');
-};
-
 
 /**
  *
@@ -344,6 +317,7 @@ BounceUI.prototype.connect_menu_item_clicked_ = function(connectItem, mcu) {
             // We've now connected the mcu. Update the UI
             mcu_console.writeLine("Connected");
             _ui.currentMcu = mcu;
+            mcu_console.lineTyped(mcu.send_data);
             // Add a tick (Check) to the connection menu item
             //connectItem.setChecked(true);
             // disconnect any others
@@ -386,7 +360,7 @@ BounceUI.prototype.connect_code = function() {
 BounceUI.prototype.setup_tabs = function() {
     var right_tabs = new goog.ui.TabPane(document.getElementById('rightTabs'));
     right_tabs.addPage(new goog.ui.TabPane.TabPage(
-        document.getElementById('output'), "Output"));
+        document.getElementById('console'), "Output"));
     right_tabs.addPage(new goog.ui.TabPane.TabPage(
         document.getElementById('code_page'), "Code"));
     this.connect_code();
@@ -400,6 +374,7 @@ $(function () {
     prepare_blockly_workspace();
 
     mcu_console = new OutputConsole($('#output'));
+    mcu_console.setupInput($('#consoleInput'));
     ui = new BounceUI();
     ui.setup_menu();
     ui.setup_tabs();

Bounce/bounce.css

@@ -234,6 +234,19 @@ code {
     height: -webkit-calc(100% - 37px);
 }
 
+#console {
+    height: -webkit-calc(100% - 1em);
+}
+
+#consoleInput {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    height: 1em;
+    float: bottom;
+}
+
 #output {
     margin: 1em 0 1em;
     width: auto;
@@ -243,7 +256,6 @@ code {
     user-select: text;
     -webkit-user-select: text;
     cursor: auto;
-
 }
 
 #code_page, #code_page pre {

Bounce/bounce_window.html

@@ -15,6 +15,7 @@
     <script src="app/nodemcu.js"></script> <!-- Serial port interactions here -->
     <script src="app/GeneratedCode.js"></script>
     <script src="app/BounceConfig.js"></script>
+    <script src="app/OutputConsole.js"></script>
     <script type="text/javascript" src="app/start.js"></script> <!-- Main ui here -->
     <link rel="stylesheet" href="goog_combined.css">
     <link rel="stylesheet" href="bounce.css">
@@ -67,7 +68,7 @@
         <div id="blocklyArea"><div id="blocklyDiv"></div></div>
         <div id="rightHand">
             <div id="rightTabs"></div>
-            <div id="output"></div>
+            <div id="console"><div id="output"></div><textarea id="consoleInput"></textarea></div>
             <!-- no it's not iso8859-1 (or win1252) -->
             <div id="code_page"><pre><code id="code" class="lua">-- no code yet</code></pre></div>
             <div id="config">

tests/SpecRunner.html

@@ -23,6 +23,7 @@
 
   <script src="../Bounce/app/GeneratedCode.js"></script>
   <script src="../Bounce/app/BounceConfig.js"></script>
+  <script src="../Bounce/app/OutputConsole.js"></script>
   <script src="../Bounce/app/start.js"></script>
   <!--<script src="src/Song.js"></script>-->
 
@@ -32,6 +33,6 @@
 </head>
 
 <body>
-    <div id="console"></div><pre><code id="code" class="lua">-- no code yet</code></pre>
+    <pre><code id="code" class="lua">-- no code yet</code></pre>
 </body>
 </html>

tests/spec/BounceSpec.js

@@ -121,9 +121,12 @@ describe("OutputConsole", function() {
     var element;
 
     beforeEach(function() {
+        setFixtures('<div id="console"></div>');
+        setFixtures('<div id="console_input"></div>');
         element = $("#console");
         spyOn(element, "append").and.stub();
         console = new OutputConsole(element);
+        console.setupInput($('#console_input'));
     });
 
     it("should write data to a div", function() {
@@ -151,4 +154,15 @@ describe("OutputConsole", function() {
         console.write("if a < b then");
         expect(element.append).toHaveBeenCalledWith("if a &lt; b then");
     });
+
+    it("Should send input box to connected code on enter", function() {
+        var callback = jasmine.createSpy("dummy");
+        console.lineTyped(callback);
+        $('#console_input').val("A test line");
+        var e = jQuery.Event("keypress");
+        e.which = 13;
+        $('#console_input').trigger(e);
+        expect(callback).toHaveBeenCalledWith('A test line\n');
+        expect($('#console_input').val()).toEqual('');
+    });
 });