position panel templating

css/serialMonitor.css

@@ -39,7 +39,7 @@ body {
 }
 
 
-.btn {
+#controlPanel .btn {
       padding: 5px 10px;
       margin: 5px 10px;
 }
@@ -81,4 +81,13 @@ span.outgoing {
     background-color: #fdfdfd;
     display: inline-block;
     font-size: 30px;
-}
\ No newline at end of file
+}
+#positionPanel .btn-block {
+    margin-bottom: 15px;
+}
+
+#positionDataError{
+    font-size: 19px;
+    text-align: center;
+    padding-top: 20px;
+}

js/SerialMonitor/PositionControlPanelView.html

-X: <%= xAxis %><br/>
-Y: <%= yAxis %><br/>
-Z: <%= zAxis %><br/><br/>
-A: <%= aAxis %><br/>
-B: <%= bAxis %><br/>
-C: <%= cAxis %><br/>
\ No newline at end of file
+<div id="positionData">
+</div><br/>
+<a href="#" id="askForPosition" class="btn btn-block btn-lg btn-default">Refresh</a>
+<a href="#" id="askForPosition" class="btn btn-block btn-lg btn-warning">Pause</a>
+<a href="#" id="stopMachine" class="btn pull-right btn-block btn-lg btn-danger">Stop</a>
\ No newline at end of file

js/SerialMonitor/PositionControlPanelView.js

@@ -3,7 +3,8 @@
  */
 
 
-define(['jquery', 'underscore', 'backbone', 'text!PositionControlPanelView.html'], function($, _, Backbone, template){
+define(['jquery', 'underscore', 'backbone', 'text!PositionControlPanelView.html', 'text!PositionDataView.html'],
+    function($, _, Backbone, template, positionTemplate){
 
     return Backbone.View.extend({
 
@@ -18,18 +19,26 @@ define(['jquery', 'underscore', 'backbone', 'text!PositionControlPanelView.html'
             this.render();
         },
 
-        _makeTemplateJSON: function(){
-            console.log(this.model);
+        _renderPositionData: function(){
             var machineState = this.model.getMachineState();
-            if (machineState === null) return {};
-            return machineState.toJSON();
+            console.log(machineState);
+            if (machineState === null) {
+                $("#positionData").html("<div id='positionDataError'>no position data available</div>");
+                return;
+            }
+            $("#positionData").html(_.template(positionTemplate)(machineState.toJSON()));
+        },
+
+        _makeTemplateJSON: function(){
+            return {};
         },
 
         render: function(){
             this.$el.html(this.template(this._makeTemplateJSON()));
+            this._renderPositionData();
         },
 
-        template: _.template(template)
+        template: _.template(template),
 
     });
 

js/SerialMonitor/PositionDataView.html

+X: <%= xAxis %><br/>
+Y: <%= yAxis %><br/>
+Z: <%= zAxis %><br/><br/>
+A: <%= aAxis %><br/>
+B: <%= bAxis %><br/>
+C: <%= cAxis %><br/>
\ No newline at end of file