From be961240388d112981cfc1cead4294fc827cba7b Mon Sep 17 00:00:00 2001 From: Amanda Ghassaei <amandaghassaei@gmail.com> Date: Fri, 11 Sep 2015 15:29:08 -0400 Subject: [PATCH] position panel templating --- css/serialMonitor.css | 13 ++++++++++-- .../PositionControlPanelView.html | 11 +++++----- js/SerialMonitor/PositionControlPanelView.js | 21 +++++++++++++------ js/SerialMonitor/PositionDataView.html | 6 ++++++ 4 files changed, 37 insertions(+), 14 deletions(-) create mode 100644 js/SerialMonitor/PositionDataView.html diff --git a/css/serialMonitor.css b/css/serialMonitor.css index 5fcd784b..e5b0d44e 100644 --- a/css/serialMonitor.css +++ b/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; +} diff --git a/js/SerialMonitor/PositionControlPanelView.html b/js/SerialMonitor/PositionControlPanelView.html index 3a26afc0..15f398bb 100644 --- a/js/SerialMonitor/PositionControlPanelView.html +++ b/js/SerialMonitor/PositionControlPanelView.html @@ -1,6 +1,5 @@ -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 diff --git a/js/SerialMonitor/PositionControlPanelView.js b/js/SerialMonitor/PositionControlPanelView.js index d2f5742f..511318a5 100644 --- a/js/SerialMonitor/PositionControlPanelView.js +++ b/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), }); diff --git a/js/SerialMonitor/PositionDataView.html b/js/SerialMonitor/PositionDataView.html new file mode 100644 index 00000000..3a26afc0 --- /dev/null +++ b/js/SerialMonitor/PositionDataView.html @@ -0,0 +1,6 @@ +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 -- GitLab