control panel

css/serialMonitor.css

@@ -18,4 +18,28 @@
 
   #serialMonitorView {
       overflow: hidden;
+  }
+
+
+  .btn {
+      padding: 5px 10px;
+      margin: 5px 10px;
+  }
+
+  #controlPanel {
+    background: #eee;
+    width: 100%;
+    position: absolute;
+    bottom: 40px;
+  }
+
+  .checkbox input[type="checkbox"].custom-checkbox:checked + .icons .icon-checked, .radio input[type="checkbox"].custom-checkbox:checked + .icons .icon-checked, .checkbox input[type="radio"].custom-radio:checked + .icons .icon-checked, .radio input[type="radio"].custom-radio:checked + .icons .icon-checked {
+    color: #888;
+  }
+
+  #autoscrollCheckbox {
+    display: inline-block;
+    position: absolute;
+    margin-left: 10px;
+    margin-top: 12px;
   }
\ No newline at end of file

js/SerialMonitor/SerialMonitorView.html

 <div id="serialMonitorOutput"></div>
 <div id="controlPanel">
-
+    <label id="autoscrollCheckbox" class="checkbox" for="autoscroll">
+        <input id="autoscroll" data-property="autoscroll" type="checkbox" <% if (autoscroll){ %> checked="checked"<% } %> value="" data-toggle="checkbox" class="serialMonitor custom-checkbox">
+        <span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
+    Autoscroll</label>
+    <a href="#" id="clearMonitor" class="pull-right btn btn-lg btn-default">Clear</a><br/>
 </div>
 <input id="sendSerialMessage" value="" placeholder="Send Message" class="form-control" type="text">
\ No newline at end of file

js/SerialMonitor/SerialMonitorView.js

@@ -11,6 +11,7 @@ define(['jquery', 'underscore', 'commParentMenu', 'serialComm', 'text!SerialMoni
         el: "#serialMonitorView",
 
         events: {
+            "click #clearMonitor":                   "_clear"
         },
 
         __initialize: function(){
@@ -21,6 +22,11 @@ define(['jquery', 'underscore', 'commParentMenu', 'serialComm', 'text!SerialMoni
             return this.model.toJSON();
         },
 
+        _clear: function(e){
+            e.preventDefault();
+            $("#serialMonitorOutput").html("");
+        },
+
         _updateIncomingMessage: function(){
             $("#serialMonitorOutput").append(serialComm.get("lastMessageReceived") + "<br/>");
         },