From 8c9c2ecfee45421c6106ad30207a3a02a4eb0431 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gina=20H=C3=A4u=C3=9Fge?= <osd@foosel.net>
Date: Sun, 10 Feb 2013 00:40:06 +0100
Subject: [PATCH] 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            |  4 ++++
 octoprint/static/js/ui.js      | 21 +++++++++++++++++++++
 octoprint/templates/index.html | 27 +++++++++------------------
 3 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/octoprint/server.py b/octoprint/server.py
index 5fde4a9..43a00b0 100644
--- a/octoprint/server.py
+++ b/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)
 
diff --git a/octoprint/static/js/ui.js b/octoprint/static/js/ui.js
index 2c88413..ddd5b2d 100644
--- a/octoprint/static/js/ui.js
+++ b/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;
diff --git a/octoprint/templates/index.html b/octoprint/templates/index.html
index 152b86c..ff08e4c 100644
--- a/octoprint/templates/index.html
+++ b/octoprint/templates/index.html
@@ -201,35 +201,26 @@
                             <div class="jog-panel">
                                 <h1>E</h1>
                                 <div>
-                                    <div class="input-append">
-                                        <input type="text" id="controls_extrusionAmount" class="input-mini text-right" data-bind="enable: isOperational(), attr: {placeholder: innerWall}">
+                                    <div class="input-append control-box">
+                                        <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">Extrude</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>
+                                    <button class="btn control-box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendExtrudeCommand() }">Extrude</button>
+                                    <button class="btn control-box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendRetractCommand() }">Retract</button>
                                 </div>
                             </div>
-                            <!-- General control -->
-                            <!--div class="jog-panel">
-                                <h1>Control</h1>
+                            <!-- General control panel -->
+                            <div class="jog-panel">
+                                <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">