From f09d57bef9015afa1d8d49cbbfcd99e66d5eae37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gina=20H=C3=A4u=C3=9Fge?= <osd@foosel.net>
Date: Sat, 9 Feb 2013 23:20:41 +0100
Subject: [PATCH] Started work on adding extrusion control

---
 octoprint/static/css/ui.css    |  4 ++++
 octoprint/templates/index.html | 32 +++++++++++++++++++++++++++-----
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/octoprint/static/css/ui.css b/octoprint/static/css/ui.css
index 770e6c0..f1f9c79 100644
--- a/octoprint/static/css/ui.css
+++ b/octoprint/static/css/ui.css
@@ -176,3 +176,7 @@ table th.timelapse_files_action, table td.timelapse_files_action {
     margin-right: 20px;
     margin-bottom: 20px;
 }
+
+.text-right {
+    text-align: right;
+}
\ No newline at end of file
diff --git a/octoprint/templates/index.html b/octoprint/templates/index.html
index 40282d9..152b86c 100644
--- a/octoprint/templates/index.html
+++ b/octoprint/templates/index.html
@@ -171,7 +171,7 @@
                         <div class="tab-pane" id="controls">
                             <!-- XY jogging control panel -->
                             <div class="jog-panel">
-                                <h4>XY</h4>
+                                <h1>X/Y</h1>
                                 <div>
                                     <button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('y', 10) }"><i class="icon-arrow-up"></i></button>
                                 </div>
@@ -186,7 +186,7 @@
                             </div>
                             <!-- Z jogging control panel -->
                             <div class="jog-panel">
-                                <h4>Z</h4>
+                                <h1>Z</h1>
                                 <div>
                                     <button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('z', 10) }"><i class="icon-arrow-up"></i></button>
                                 </div>
@@ -197,16 +197,38 @@
                                     <button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('z', -10) }"><i class="icon-arrow-down"></i></button>
                                 </div>
                             </div>
-                            <!-- General control -->
+                            <!-- Extrusion control panel -->
                             <div class="jog-panel">
-                                <h4>Control</h4>
+                                <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}">
+                                        <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>
+                                </div>
+                            </div>
+                            <!-- General control -->
+                            <!--div class="jog-panel">
+                                <h1>Control</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>
 
                             <!-- Templates for custom controls -->