Added extrusion controls, kept motor and fan controls in general control area as suggested (recurring demand suggests that they definitely aren't something to be added by anyone individually via custom controls), made custom controls always position themselves below the general stuff.

octoprint/server.py

@@ -202,6 +202,10 @@ def jog():
 	if "homeZ" in request.values.keys():
 		# home z
 		printer.command("G28 Z0")
+	if "extrude" in request.values.keys():
+		# extrude/retract
+		length = request.values["extrude"]
+		printer.commands(["G91", "G1 E" + length + " F300", "G90"])
 
 	return jsonify(SUCCESS)
 

octoprint/static/js/ui.js

@@ -355,6 +355,7 @@ function ControlsViewModel() {
     self.isReady = ko.observable(undefined);
     self.isLoading = ko.observable(undefined);
 
+    self.extrusionAmount = ko.observable(undefined);
     self.controls = ko.observableArray([]);
 
     self.fromCurrentData = function(data) {
@@ -426,6 +427,26 @@ function ControlsViewModel() {
         })
     }
 
+    self.sendExtrudeCommand = function() {
+        self._sendECommand(1);
+    }
+
+    self.sendRetractCommand = function() {
+        self._sendECommand(-1);
+    }
+
+    self._sendECommand = function(dir) {
+        var length = self.extrusionAmount();
+        if (!length)
+            length = 5;
+        $.ajax({
+            url: AJAX_BASEURL + "control/jog",
+            type: "POST",
+            dataType: "json",
+            data: "extrude=" + (dir * length)
+        })
+    }
+
     self.sendCustomCommand = function(command) {
         if (!command)
             return;

octoprint/templates/index.html

@@ -201,35 +201,26 @@
                             <div class="jog-panel">
                                 <h1>E</h1>
                                 <div>
-                                    <div class="input-append">
+                                    <div class="input-append control-box">
-                                        <input type="text" id="controls_extrusionAmount" class="input-mini text-right" data-bind="enable: isOperational(), attr: {placeholder: innerWall}">
+                                        <input type="text" class="input-mini text-right" data-bind="value: extrusionAmount, enable: isOperational() && !isPrinting(), attr: {placeholder: 5}">
                                         <span class="add-on">mm</span>
                                     </div>
-                                    <div class="btn-group">
+                                    <button class="btn control-box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendExtrudeCommand() }">Extrude</button>
-                                        <button class="btn">Extrude</button>
+                                    <button class="btn control-box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendRetractCommand() }">Retract</button>
-                                        <button class="btn dropdown-toggle" data-toggle="dropdown">
-                                            <span class="caret"></span>
-                                        </button>
-                                        <ul class="dropdown-menu">
-                                            <li>
-                                                <a href="#">Retract</a>
-                                            </li>
-                                        </ul>
-                                    </div>
                                 </div>
                             </div>
-                            <!-- General control -->
+                            <!-- General control panel -->
-                            <!--div class="jog-panel">
+                            <div class="jog-panel">
-                                <h1>Control</h1>
+                                <h1>General</h1>
                                 <div>
                                     <button class="btn control-box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendCustomCommand({type:'command',command:'M18'}) }"><i class="icon-off"></i>&nbsp;Motors off</button>
                                     <button class="btn control-box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendCustomCommand({type:'command',command:'M106'}) }">Fans on</button>
                                     <button class="btn control-box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendCustomCommand({type:'command',command:'M106 S0'}) }">Fans off</button>
                                 </div>
-                            </div-->
+                            </div>
 
                             <!-- Container for custom controls -->
-                            <div data-bind="template: { name: $root.displayMode, foreach: controls }"></div>
+                            <div style="clear: both;" data-bind="template: { name: $root.displayMode, foreach: controls }"></div>
 
                             <!-- Templates for custom controls -->
                             <script type="text/html" id="customControls_sectionTemplate">