- implemented jog controls

- finalized temperature tab
- UI and code cleaning

Cura/webui/__init__.py

@@ -26,14 +26,22 @@ def index():
 def printerState():
 	temp = printer.currentTemp
 	bedTemp = printer.currentBedTemp
+	targetTemp = printer.currentTargetTemp
+	bedTargetTemp = printer.currentBedTargetTemp
 	jobData = printer.jobData()
 
 	result = {
 		'state': printer.getStateString(),
 		'temp': temp,
 		'bedTemp': bedTemp,
+		'targetTemp': targetTemp,
+		'targetBedTemp': bedTargetTemp,
 		'operational': printer.isOperational(),
-	'closedOrError': printer.isClosedOrError()
+		'closedOrError': printer.isClosedOrError(),
+		'error': printer.isError(),
+		'printing': printer.isPrinting(),
+		'paused': printer.isPaused(),
+		'ready': printer.isReady()
 	}
 
 	if (jobData != None):
@@ -95,6 +103,50 @@ def cancelPrint():
 	printer.cancelPrint()
 	return jsonify(SUCCESS)
 
+@app.route(BASEURL + 'control/temperature', methods=['POST'])
+def setTargetTemperature():
+	if not printer.isOperational():
+		return jsonify(SUCCESS)
+
+	if request.values.has_key("temp"):
+		# set target temperature
+		temp = request.values["temp"];
+		printer.command("M104 S" + temp)
+
+	if request.values.has_key("bedTemp"):
+		# set target bed temperature
+		bedTemp = request.values["bedTemp"]
+		printer.command("M140 S" + bedTemp)
+
+	return jsonify(SUCCESS)
+
+@app.route(BASEURL + "control/jog", methods=["POST"])
+def jog():
+	if not printer.isOperational() or printer.isPrinting():
+		# do not jog when a print job is running or we don't have a connection
+		return jsonify(SUCCESS)
+
+	if request.values.has_key("x"):
+		# jog x
+		x = request.values["x"]
+		printer.commands(["G91", "G1 X" + x + " F6000", "G90"])
+	if request.values.has_key("y"):
+		# jog y
+		y = request.values["y"]
+		printer.commands(["G91", "G1 Y" + y + " F6000", "G90"])
+	if request.values.has_key("z"):
+		# jog z
+		z = request.values["z"]
+		printer.commands(["G91", "G1 Z" + z + " F200", "G90"])
+	if request.values.has_key("homeXY"):
+		# home x/y
+		printer.command("G28 X0 Y0")
+	if request.values.has_key("homeZ"):
+		# home z
+		printer.command("G28 Z0")
+
+	return jsonify(SUCCESS)
+
 #~~ GCODE file handling
 
 @app.route(BASEURL + 'gcodefiles', methods=['GET'])
@@ -141,4 +193,4 @@ def sizeof_fmt(num):
 
 def run():
 	app.debug = True
-	app.run()
+	app.run(host="0.0.0.0")

Cura/webui/printer.py

@@ -25,6 +25,8 @@ class Printer():
 		self.printTimeLeft = None
 		self.currentTemp = None
 		self.currentBedTemp = None
+		self.currentTargetTemp = None
+		self.currentBedTargetTemp = None
 
 		self.gcode = None
 		self.gcodeList = None
@@ -36,7 +38,7 @@ class Printer():
 	def connect(self):
 		if self.comm != None:
 			self.comm.close()
-		self.comm = machineCom.MachineCom(port='VIRTUAL', callbackObject=self)
+		self.comm = machineCom.MachineCom(port="COM4", baudrate=115200, callbackObject=self)
 
 	def disconnect(self):
 		if self.comm != None:
@@ -44,6 +46,10 @@ class Printer():
 		self.comm = None
 
 	def command(self, command):
+		self.commands([command])
+
+	def commands(self, commands):
+		for command in commands:
 			self.comm.sendCommand(command)
 
 	def mcLog(self, message):
@@ -51,7 +57,7 @@ class Printer():
 		self.log = self.log[-300:]
 
 	def mcTempUpdate(self, temp, bedTemp, targetTemp, bedTargetTemp):
-		currentTime = time.time()
+		currentTime = int(time.time() * 1000)
 
 		self.temps['actual'].append((currentTime, temp))
 		self.temps['actual'] = self.temps['actual'][-300:]
@@ -66,14 +72,16 @@ class Printer():
 		self.temps['targetBed'] = self.temps['targetBed'][-300:]
 
 		self.currentTemp = temp
+		self.currentTargetTemp = targetTemp
 		self.currentBedTemp = bedTemp
+		self.currentBedTargetTemp = bedTargetTemp
 
 	def mcStateChange(self, state):
 		self.state = state
 
 	def mcMessage(self, message):
 		self.messages.append(message)
-		self.messages = self.message[-300:]
+		self.messages = self.messages[-300:]
 
 	def mcProgress(self, lineNr):
 		self.printTime = self.comm.getPrintTime()
@@ -124,6 +132,18 @@ class Printer():
 	def isOperational(self):
 		return self.comm != None and self.comm.isOperational()
 
+	def isPrinting(self):
+		return self.comm != None and self.comm.isPrinting()
+
+	def isPaused(self):
+		return self.comm != None and self.comm.isPaused()
+
+	def isError(self):
+		return self.comm != None and self.comm.isError()
+
+	def isReady(self):
+		return self.gcodeList and len(self.gcodeList) > 0
+
 	def loadGcode(self, file):
 		if self.comm != None and self.comm.isPrinting():
 			return

Cura/webui/static/js/ui.js

@@ -4,6 +4,10 @@ function PrinterStateViewModel() {
     self.stateString = ko.observable(undefined);
     self.isErrorOrClosed = ko.observable(undefined);
     self.isOperational = ko.observable(undefined);
+    self.isPrinting = ko.observable(undefined);
+    self.isPaused = ko.observable(undefined);
+    self.isError = ko.observable(undefined);
+    self.isReady = ko.observable(undefined);
 
     self.filament = ko.observable(undefined);
     self.estimatedPrintTime = ko.observable(undefined);
@@ -18,12 +22,18 @@ function PrinterStateViewModel() {
             return "-";
         var currentLine = self.currentLine() ? self.currentLine() : "-";
         return currentLine + " / " + self.totalLines();
-    })
+    });
     self.progress = ko.computed(function() {
         if (!self.currentLine() || !self.totalLines())
             return 0;
         return Math.round(self.currentLine() * 100 / self.totalLines());
     });
+    self.pauseString = ko.computed(function() {
+        if (self.isPaused())
+            return "Continue";
+        else
+            return "Pause";
+    });
 
     self.connect = function() {
         $.ajax({
@@ -37,6 +47,10 @@ function PrinterStateViewModel() {
         self.stateString(response.state);
         self.isErrorOrClosed(response.closedOrError);
         self.isOperational(response.operational);
+        self.isPaused(response.paused);
+        self.isPrinting(response.printing);
+        self.isError(response.error);
+        self.isReady(response.ready);
 
         if (response.job) {
             self.filament(response.job.filament);
@@ -63,6 +77,35 @@ function TemperatureViewModel() {
 
     self.temp = ko.observable(undefined);
     self.bedTemp = ko.observable(undefined);
+    self.targetTemp = ko.observable(undefined);
+    self.bedTargetTemp = ko.observable(undefined);
+    self.isErrorOrClosed = ko.observable(undefined);
+    self.isOperational = ko.observable(undefined);
+    self.isPrinting = ko.observable(undefined);
+    self.isPaused = ko.observable(undefined);
+    self.isError = ko.observable(undefined);
+    self.isReady = ko.observable(undefined);
+
+    self.tempString = ko.computed(function() {
+        if (!self.temp())
+            return "-";
+        return self.temp() + " °C";
+    });
+    self.bedTempString = ko.computed(function() {
+        if (!self.bedTemp())
+            return "-";
+        return self.bedTemp() + " °C";
+    });
+    self.targetTempString = ko.computed(function() {
+        if (!self.targetTemp())
+            return "-";
+        return self.targetTemp() + " °C";
+    });
+    self.bedTargetTempString = ko.computed(function() {
+        if (!self.bedTargetTemp())
+            return "-";
+        return self.bedTargetTemp() + " °C";
+    });
 
     self.temperatures = [];
     self.plotOptions = {
@@ -72,7 +115,18 @@ function TemperatureViewModel() {
             ticks: 10
         },
         xaxis: {
-            mode: "time"
+            mode: "time",
+            timeformat: "%H:%M:%S",
+            minTickSize: [2, "minute"],
+            tickFormatter: function(val, axis) {
+                var now = new Date();
+                var diff = now.getTime() - val;
+                var diffInMins = Math.round(diff / (60000));
+                if (diffInMins == 0)
+                    return "just now";
+                else
+                    return "- " + diffInMins + " min";
+            }
         },
         legend: {
             noColumns: 4
@@ -80,10 +134,19 @@ function TemperatureViewModel() {
     }
 
     self.fromResponse = function(response) {
-        self.temp(response.currentTemp);
+        self.temp(response.temp);
-        self.bedTemp(response.currentBedTemp);
+        self.bedTemp(response.bedTemp);
+        self.targetTemp(response.targetTemp);
+        self.bedTargetTemp(response.bedTargetTemp);
         self.temperatures = (response.temperatures);
 
+        self.isErrorOrClosed(response.closedOrError);
+        self.isOperational(response.operational);
+        self.isPaused(response.paused);
+        self.isPrinting(response.printing);
+        self.isError(response.error);
+        self.isReady(response.ready);
+
         self.updatePlot();
     }
 
@@ -113,13 +176,13 @@ function TerminalViewModel() {
     self.updateOutput = function() {
         var output = '';
         for (var i = 0; i < self.log.length; i++) {
-            output += self.log[i] + '<br>';
+            output += self.log[i] + '\n';
         }
 
         var container = $("#terminal-output");
         var autoscroll = (container.scrollTop() == container[0].scrollHeight - container.height);
 
-        container.html(output);
+        container.text(output);
 
         if (autoscroll) {
             container.scrollTop(container[0].scrollHeight - container.height())
@@ -215,11 +278,11 @@ $(function() {
             })
         })
         $("#job_pause").click(function() {
+            $("#job_pause").button('toggle');
             $.ajax({
                 url: AJAX_BASEURL + "control/pause",
                 type: 'POST',
                 dataType: 'json',
-                success: function(){}
             })
         })
         $("#job_cancel").click(function() {
@@ -227,10 +290,55 @@ $(function() {
                 url: AJAX_BASEURL + "control/cancel",
                 type: 'POST',
                 dataType: 'json',
-                success: function(){}
             })
         })
 
+        $("#temp_newTemp_set").click(function() {
+            var newTemp = $("#temp_newTemp").val();
+            $.ajax({
+                url: AJAX_BASEURL + "control/temperature",
+                type: "POST",
+                dataType: "json",
+                data: { temp: newTemp },
+                success: function() {$("#temp_newTemp").val("")}
+            })
+        })
+        $("#temp_newBedTemp_set").click(function() {
+            var newBedTemp = $("#temp_newBedTemp").val();
+            $.ajax({
+                url: AJAX_BASEURL + "control/temperature",
+                type: "POST",
+                dataType: "json",
+                data: { bedTemp: newBedTemp },
+                success: function() {$("#temp_newBedTemp").val("")}
+            })
+        })
+
+        function jogCommand(axis, distance) {
+            $.ajax({
+                url: AJAX_BASEURL + "control/jog",
+                type: "POST",
+                dataType: "json",
+                data: axis + "=" + distance
+            })
+        }
+        function homeCommand(axis) {
+            $.ajax({
+                url: AJAX_BASEURL + "control/jog",
+                type: "POST",
+                dataType: "json",
+                data: "home" + axis
+            })
+        }
+        $("#jog_x_inc").click(function() {jogCommand("x", "10")});
+        $("#jog_x_dec").click(function() {jogCommand("x", "-10")});
+        $("#jog_y_inc").click(function() {jogCommand("y", "10")});
+        $("#jog_y_dec").click(function() {jogCommand("y", "-10")});
+        $("#jog_z_inc").click(function() {jogCommand("z", "10")});
+        $("#jog_z_dec").click(function() {jogCommand("z", "-10")});
+        $("#jog_xy_home").click(function() {homeCommand("XY")});
+        $("#jog_z_home").click(function() {homeCommand("Z")});
+
         $("#terminal-send").click(function () {
             var command = $("#terminal-command").val();
             $.ajax({
@@ -238,9 +346,6 @@ $(function() {
                 type: 'POST',
                 dataType: 'json',
                 data: 'command=' + command,
-                success: function(response) {
-                    // do nothing
-                }
             })
         })
 
@@ -249,7 +354,6 @@ $(function() {
             done: function (e, data) {
                 gcodeFilesViewModel.fromResponse(data.result);
             },
-            acceptFileTypes: /(\.|\/)gcode$/i,
             progressall: function (e, data) {
                 var progress = parseInt(data.loaded / data.total * 100, 10);
                 $('#gcode_upload_progress .bar').css(
@@ -260,9 +364,10 @@ $(function() {
         });
 
         ko.applyBindings(printerStateViewModel, document.getElementById("state"));
-        ko.applyBindings(temperatureViewModel, document.getElementById("temp"));
-        ko.applyBindings(terminalViewModel, document.getElementById("term"));
         ko.applyBindings(gcodeFilesViewModel, document.getElementById("files"));
+        ko.applyBindings(temperatureViewModel, document.getElementById("temp"));
+        ko.applyBindings(printerStateViewModel, document.getElementById("jog"));
+        ko.applyBindings(terminalViewModel, document.getElementById("term"));
 
         dataUpdater.requestData();
         $.ajax({

Cura/webui/templates/index.html

@@ -5,6 +5,7 @@
 
         <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet" media="screen">
         <link href="{{ url_for('static', filename='css/jquery.fileupload-ui.css') }}" rel="stylesheet" media="screen">
+        <link href="{{ url_for('static', filename='css/ui.css') }}" rel="stylesheet" media="screen">
 
         <script src="http://code.jquery.com/jquery-latest.js"></script>
         <script src="{{ url_for('static', filename='js/knockout-2.2.0.js') }}"></script>
@@ -19,25 +20,25 @@
         </script>
     </head>
     <body>
-        <div class="container-fluid">
+        <div class="navbar navbar-fixed-top">
-            <div class="row-fluid">
+            <div class="navbar-inner">
-                <h1>Cura WebUI</h1>
+                <div class="container">
+                    <a class="brand" href="#">Cura WebUI</a>
                 </div>
-
+            </div>
-            <div class="row-fluid">
+        </div>
-                <div class="span3 accordion">
+        <div class="container">
+            <div class="row">
+                <div class="accordion span4">
                     <div class="accordion-group">
                         <div class="accordion-heading">
-                            <a class="accordion-toggle" data-toggle="collapse" href="#state">State</a>
+                            <a class="accordion-toggle" data-toggle="collapse" href="#state"><i class="icon-info-sign"></i> State</a>
                         </div>
                         <div class="accordion-body collapse in" id="state">
                             <div class="accordion-inner">
+                                <button class="btn btn-block" id="printer_connect" data-bind="css: {disabled: !isErrorOrClosed}, enable: isErrorOrClosed">Connect</button>
+
                                 Machine State: <strong data-bind="text: stateString"></strong><br>
-
-                                <div class="progress">
-                                    <div class="bar" id="job_progressBar" data-bind="style: { width: progress() + '%' }"></div>
-                                </div>
-
                                 Filament: <strong data-bind="text: filament"></strong><br>
                                 Estimated Print Time: <strong data-bind="text: estimatedPrintTime"></strong><br>
                                 Line: <strong data-bind="text: lineString"></strong><br>
@@ -45,41 +46,44 @@
                                 Print Time: <strong data-bind="text: printTime"></strong><br>
                                 Print Time Left: <strong data-bind="text: printTimeLeft"></strong><br>
 
-                                <button class="btn" id="printer_connect" data-bind="css: {disabled: !isErrorOrClosed}, enable: isErrorOrClosed">Connect</button>
+                                <div class="progress">
-                                <button class="btn btn-primary" id="job_print"><i class="icon-print icon-white"></i> <span>Print</span></button>
+                                    <div class="bar" id="job_progressBar" data-bind="style: { width: progress() + '%' }"></div>
-                                <button class="btn" id="job_pause"><i class="icon-pause"></i> <span>Pause</span></button>
+                                </div>
+
+                                <button class="btn btn-primary" data-bind="enable: isOperational() && isReady() && !isPrinting() && !isPaused()" id="job_print"><i class="icon-print icon-white"></i> <span>Print</span></button>
+                                <button class="btn" id="job_pause" data-bind="css: {active: isPaused}"><i class="icon-pause"></i> <span>Pause</span></button>
                                 <button class="btn" id="job_cancel"><i class="icon-stop"></i> Cancel</button>
                             </div>
                         </div>
                     </div>
                     <div class="accordion-group">
                         <div class="accordion-heading">
-                            <a class="accordion-toggle" data-toggle="collapse" href="#files">Files</a>
+                            <a class="accordion-toggle" data-toggle="collapse" href="#files"><i class="icon-list"></i> Files</a>
                         </div>
-                        <div class="accordion-body collapse" id="files">
+                        <div class="accordion-body collapse in" id="files">
                             <div class="accordion-inner">
-                                <table class="table table-striped table-hover table-condensed table-hover">
+                                <table class="table table-striped table-hover table-condensed table-hover" id="gcode_files">
                                     <thead>
                                         <tr>
-                                            <th>Name</th>
+                                            <th class="gcode_files_name">Name</th>
-                                            <th style="text-align: right">Size</th>
+                                            <th class="gcode_files_size">Size</th>
-                                            <th style="text-align: center">Action</th>
+                                            <th class="gcode_files_action">Action</th>
                                         </tr>
                                     </thead>
                                     <tbody data-bind="foreach: files">
                                         <tr data-bind="attr: {title: name}, event: {dblclick: $parent.loadFile}">
-                                            <td data-bind="text: name"></td>
+                                            <td class="gcode_files_name" data-bind="text: name"></td>
-                                            <td style="text-align: right" data-bind="text: size"></td>
+                                            <td class="gcode_files_size" data-bind="text: size"></td>
-                                            <td style="text-align: center"><a href="#" class="icon-trash" data-bind="click: $parent.removeFile"></a>&nbsp;|&nbsp;<a href="#" class="icon-folder-open" data-bind="click: $parent.loadFile"></a></td>
+                                            <td class="gcode_files_action"><a href="#" class="icon-trash" data-bind="click: $parent.removeFile"></a>&nbsp;|&nbsp;<a href="#" class="icon-folder-open" data-bind="click: $parent.loadFile"></a></td>
                                         </tr>
                                     </tbody>
                                 </table>
-                                <span class="btn btn-primary btn-block fileinput-button">
+                                <span class="btn btn-primary btn-block fileinput-button" style="margin-bottom: 10px">
                                     <i class="icon-upload icon-white"></i>
                                     <span>Upload</span>
                                     <input id="gcode_upload" type="file" name="gcode_file" class="fileinput-button" data-url="/ajax/gcodefiles/upload">
                                 </span>
-                                <div id="gcode_upload_progress" class="progress">
+                                <div id="gcode_upload_progress" class="progress" style="width: 100%;">
                                     <div class="bar" style="width: 0%"></div>
                                 </div>
                             </div>
@@ -87,7 +91,7 @@
                     </div>
                 </div>
 
-                <div class="span9 tabbable tabs-left">
+                <div class="tabbable span8">
                     <ul class="nav nav-tabs">
                         <li class="active"><a href="#temp" data-toggle="tab">Temp</a></li>
                         <li><a href="#jog" data-toggle="tab">Jog</a></li>
@@ -97,51 +101,62 @@
 
                     <div class="tab-content">
                         <div class="tab-pane active" id="temp">
-                            <div id="temperature-graph" class="span6" style="height: 350px"></div>
+                            <div class="row" style="padding-left: 20px">
-                            <div class="span3">
+                                <div id="temperature-graph" style="height: 350px; width: 100%"></div>
-                                Temp: <strong data-bind="text: temp"></strong><br>
+                            </div>
-                                Bed Temp: <strong data-bind="text: bedTemp"></strong><br>
+                            <div>
+                                <div class="form-horizontal" style="width: 49%; float: left; margin-bottom: 20px;">
+                                    <fieldset>
+                                        <legend>Temperature</legend>
+
+                                        <label>Current: <strong data-bind="text: tempString"></strong></label>
+
+                                        <label>Target: <strong data-bind="text: targetTempString"></strong></label>
+
+                                        <label for="temp_newTemp">New Target</label>
+                                        <div class="input-append">
+                                            <input class="span1" type="text" id="temp_newTemp" data-bind="attr: {placeholder: targetTemp}">
+                                            <span class="add-on">°C</span>
+                                        </div>
+                                        <button type="submit" class="btn" id="temp_newTemp_set">Set</button>
+                                    </fieldset>
+                                </div>
+                                <div class="form-horizontal" style="width: 49%; margin-left: 2%; float: left; margin-bottom: 20px;">
+                                    <fieldset>
+                                        <legend>Bed Temperature</legend>
+
+                                        <label>Current: <strong data-bind="text: bedTempString"></strong></label>
+
+                                        <label>Target: <strong data-bind="text: bedTargetTempString"></strong></label>
+
+                                        <label for="temp_newBedTemp">New Target</label>
+                                        <div class="input-append">
+                                            <input class="span1" type="text" id="temp_newBedTemp" data-bind="attr: {placeholder: bedTargetTemp}">
+                                            <span class="add-on">°C</span>
+                                        </div>
+                                        <button type="submit" class="btn" id="temp_newBedTemp_set">Set</button>
+                                    </fieldset>
+                                </div>
                             </div>
                         </div>
                         <div class="tab-pane" id="jog">
-                            <div class="span9">
+                            <div style="width: 350px; height: 70px">
-                                <div class="row">
+                                <div style="width: 70px; float: left;">&nbsp;</div>
-                                    <div class="span1 offset1 btn-group btn-group-vertical">
+                                <div style="width: 70px; float: left;"><button class="btn btn-block" id="jog_y_inc" data-bind="enable: isOperational() && isReady() && !isPrinting()">Up</button></div>
-                                        <button class="btn btn-block btn-large" type="button"><i class="icon-chevron-up"></i></button>
+                                <div style="width: 70px; float: left;">&nbsp;</div>
-                                        <button class="btn btn-block" type="button"><i class="icon-chevron-up"></i></button>
+                                <div style="width: 70px; float: left; margin-left: 20px"><button class="btn btn-block" id="jog_z_inc" data-bind="enable: isOperational() && isReady() && !isPrinting()">Z+</button></div>
-                                        <button class="btn btn-block btn-small" type="button"><i class="icon-chevron-up"></i></button>
-                                    </div>
-                                    <div class="span1 offset1 btn-group btn-group-vertical">
-                                        <button class="btn btn-block btn-large" type="button"><i class="icon-chevron-up"></i></button>
-                                        <button class="btn btn-block" type="button"><i class="icon-chevron-up"></i></button>
-                                        <button class="btn btn-block btn-small" type="button"><i class="icon-chevron-up"></i></button>
-                                    </div>
-                                </div>
-                                <div class="row">
-                                    <div class="span1 btn-group btn-group">
-                                        <button class="btn" type="button"><i class="icon-chevron-left"></i></button>
-                                        <button class="btn" type="button"><i class="icon-chevron-left"></i></button>
-                                        <button class="btn" type="button"><i class="icon-chevron-left"></i></button>
-                                    </div>
-                                    <div class="span1">
-                                        <button class="btn btn-block" type="button"><i class="icon-home"></i></button>
-                                    </div>
-                                    <div class="span1 btn-group btn-group">
-                                        <button class="btn" type="button"><i class="icon-chevron-right"></i></button>
-                                        <button class="btn" type="button"><i class="icon-chevron-right"></i></button>
-                                        <button class="btn" type="button"><i class="icon-chevron-right"></i></button>
-                                    </div>
-                                    <div class="span1">
-                                        <button class="btn btn-block" type="button"><i class="icon-home"></i></button>
-                                    </div>
-                                </div>
-                                <div class="row">
-                                    <div class="span1 offset1 btn-group btn-group-vertical">
-                                        <button class="btn btn-block btn-small" type="button"><i class="icon-chevron-down"></i></button>
-                                        <button class="btn btn-block" type="button"><i class="icon-chevron-down"></i></button>
-                                        <button class="btn btn-block btn-large" type="button"><i class="icon-chevron-down"></i></button>
                             </div>
+                            <div style="width: 350px; height: 70px">
+                                <div style="width: 70px; float: left;"><button class="btn btn-block" id="jog_x_dec" data-bind="enable: isOperational() && isReady() && !isPrinting()">Left</button></div>
+                                <div style="width: 70px; float: left;"><button class="btn btn-block" id="jog_xy_home" data-bind="enable: isOperational() && isReady() && !isPrinting()">Home</button></div>
+                                <div style="width: 70px; float: left;"><button class="btn btn-block" id="jog_x_inc" data-bind="enable: isOperational() && isReady() && !isPrinting()">Right</button></div>
+                                <div style="width: 70px; float: left; margin-left: 20px"><button class="btn btn-block" id="jog_z_home" data-bind="enable: isOperational() && isReady() && !isPrinting()">Home</button></div>
                             </div>
+                            <div style="width: 350px; height: 70px">
+                                <div style="width: 70px; float: left;">&nbsp;</div>
+                                <div style="width: 70px; float: left;"><button class="btn btn-block" id="jog_y_dec" data-bind="enable: isOperational() && isReady() && !isPrinting()">Down</button></div>
+                                <div style="width: 70px; float: left;">&nbsp;</div>
+                                <div style="width: 70px; float: left; margin-left: 20px"><button class="btn btn-block" id="jog_z_dec" data-bind="enable: isOperational() && isReady() && !isPrinting()">Z-</button></div>
                             </div>
                         </div>
                         <div class="tab-pane" id="speed">
@@ -150,7 +165,7 @@
                         <div class="tab-pane" id="term">
                             <pre id="terminal-output" class="pre-scrollable"></pre>
                             <div class="input-append">
-                                <input type="text" class="span9" id="terminal-command">
+                                <input type="text" id="terminal-command">
                                 <button class="btn" type="button" id="terminal-send">Send</button>
                             </div>
                         </div>