From 878bee784a23cfd450bbab7c8a968a644ba36802 Mon Sep 17 00:00:00 2001
From: Richard Mitchell <github@mundo.org.uk>
Date: Sat, 9 Feb 2013 11:22:09 +0000
Subject: [PATCH] Modified the appearance of the jogging controls with a view
 to adding finer control

---
 octoprint/static/css/ui.css    | 26 +++++++++++++++++++-
 octoprint/templates/index.html | 44 +++++++++++++++++++++-------------
 2 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/octoprint/static/css/ui.css b/octoprint/static/css/ui.css
index 5188b91..90dd04c 100644
--- a/octoprint/static/css/ui.css
+++ b/octoprint/static/css/ui.css
@@ -144,4 +144,28 @@ table th.timelapse_files_action, table td.timelapse_files_action {
 
 .overflow_visible {
     overflow: visible !important;
-}
\ No newline at end of file
+}
+
+#controls {
+    overflow: hidden;
+}
+
+#controls .jog-panel {
+    float: left;
+    margin-right: 20px;
+}
+
+#controls .jog-panel > h4 {
+    border-bottom: 1px solid #ddd;
+}
+
+#controls .jog-panel > div {
+    text-align: center;
+}
+
+#controls .box {
+    width: 40px;
+    height: 40px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+}
diff --git a/octoprint/templates/index.html b/octoprint/templates/index.html
index 8bedf3e..eebdf17 100644
--- a/octoprint/templates/index.html
+++ b/octoprint/templates/index.html
@@ -169,23 +169,33 @@
                             </div>
                         </div>
                         <div class="tab-pane" id="controls">
-                            <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" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('y', 10) }">Y+</button></div>
-                                <div style="width: 70px; float: left;">&nbsp;</div>
-                                <div style="width: 70px; float: left; margin-left: 20px"><button class="btn btn-block" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('z', 10) }">Z+</button></div>
+                            <!-- XY jogging control panel -->
+                            <div id="jog_xy" class="jog-panel">
+                                <h4>XY</h4>
+                                <div>
+                                    <button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('y', 10) }"><i class="icon-arrow-up"></i></button>
+                                </div>
+                                <div>
+                                    <button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('x', -10) }"><i class="icon-arrow-left"></i></button>
+                                    <button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendHomeCommand('XY') }"><i class="icon-home"></i></button>
+                                    <button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('x', 10) }"><i class="icon-arrow-right"></i></button>
+                                </div>
+                                <div>
+                                    <button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('y', -10) }"><i class="icon-arrow-down"></i></button>
+                                </div>
                             </div>
-                            <div style="width: 350px; height: 70px">
-                                <div style="width: 70px; float: left;"><button class="btn btn-block" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('x', -10) }">X-</button></div>
-                                <div style="width: 70px; float: left;"><button class="btn btn-block" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendHomeCommand('XY') }">Home</button></div>
-                                <div style="width: 70px; float: left;"><button class="btn btn-block" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('x', 10) }">X+</button></div>
-                                <div style="width: 70px; float: left; margin-left: 20px"><button class="btn btn-block" id="jog_z_home" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendHomeCommand('Z') }">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" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('y', -10) }">Y-</button></div>
-                                <div style="width: 70px; float: left;">&nbsp;</div>
-                                <div style="width: 70px; float: left; margin-left: 20px"><button class="btn btn-block" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('z', -10) }">Z-</button></div>
+                            <!-- Z jogging control panel -->
+                            <div id="jog_z" class="jog-panel">
+                                <h4>Z</h4>
+                                <div>
+                                    <button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('z', 10) }"><i class="icon-arrow-up"></i></button>
+                                </div>
+                                <div>
+                                    <button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendHomeCommand('Z') }"><i class="icon-home"></i></button>
+                                </div>
+                                <div>
+                                    <button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('z', -10) }"><i class="icon-arrow-down"></i></button>
+                                </div>
                             </div>
 
                             <div data-bind="template: { name: $root.displayMode, foreach: controls }"></div>
@@ -433,4 +443,4 @@
         <!--<script type="text/javascript" src="{{ url_for('static', filename='gcodeviewer/lib/jquery-ui-1.9.0.custom.js') }}"></script>-->
 
     </body>
-</html>
\ No newline at end of file
+</html>