From 13df74e3d84e446f203028fdeb0e379c1581a354 Mon Sep 17 00:00:00 2001
From: Paul de Vries <pablo@blacktower.nl>
Date: Wed, 28 Oct 2015 14:45:47 +0000
Subject: [PATCH 1/3] Added HTML id's to control tab panels

---
 src/octoprint/templates/tabs/control.jinja2 | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/octoprint/templates/tabs/control.jinja2 b/src/octoprint/templates/tabs/control.jinja2
index 0fa8e0fc..d9703be1 100644
--- a/src/octoprint/templates/tabs/control.jinja2
+++ b/src/octoprint/templates/tabs/control.jinja2
@@ -26,7 +26,7 @@
 
 <div class="jog-panel" style="display: none;" data-bind="visible: loginState.isUser">
     <!-- XY jogging control panel -->
-    <div class="jog-panel">
+    <div class="jog-panel" id="controls-jog-xy">
         <h1>X/Y</h1>
         <div>
             <button class="btn box" id="control-yinc" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('y',1) }"><i class="icon-arrow-up"></i></button>
@@ -41,7 +41,7 @@
         </div>
     </div>
     <!-- Z jogging control panel -->
-    <div class="jog-panel">
+    <div class="jog-panel" id="controls-jog-z">
         <h1>Z</h1>
         <div>
             <button class="btn box" id="control-zinc" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('z',1) }"><i class="icon-arrow-up"></i></button>
@@ -55,8 +55,8 @@
     </div>
 
     <!-- Jog distance -->
-    <div class="distance">
-        <div class="btn-group" data-toggle="buttons-radio" id="jog_distance">
+    <div class="distance" id="controls-jog-distance">
+        <div class="btn-group" id="jog_distance" data-toggle="buttons-radio">
             <button type="button" id="control-distance01" class="btn distance" data-distance="0.1" data-bind="enable: loginState.isUser()">0.1</button>
             <button type="button" id="control-distance1" class="btn distance" data-distance="1" data-bind="enable: loginState.isUser()">1</button>
             <button type="button" id="control-distance10" class="btn distance active" data-distance="10" data-bind="enable: loginState.isUser()">10</button>
@@ -65,11 +65,13 @@
     </div>
 
     <!-- Feed rate -->
-    <input type="number" style="width: 153px" data-bind="slider: {min: 50, max: 150, step: 1, value: feedRate, tooltip: 'hide'}">
-    <button class="btn btn-block" style="width: 169px" data-bind="enable: isOperational() && loginState.isUser(), click: function() { $root.sendFeedRateCommand() }">{{ _('Feed rate:') }}<span data-bind="text: feedRate() + '%'"></span></button>
+    <div class="jog-panel" id="controls-jog-feedrate">
+        <input type="number" style="width: 153px" data-bind="slider: {min: 50, max: 150, step: 1, value: feedRate, tooltip: 'hide'}">
+        <button class="btn btn-block" style="width: 169px" data-bind="enable: isOperational() && loginState.isUser(), click: function() { $root.sendFeedRateCommand() }">{{ _('Feed rate:') }}<span data-bind="text: feedRate() + '%'"></span></button>
+    </div>
 </div>
 <!-- Extrusion control panel -->
-<div class="jog-panel" style="display: none;" data-bind="visible: loginState.isUser">
+<div class="jog-panel" id="controls-jog-extrusion" style="display: none;" data-bind="visible: loginState.isUser">
     <h1>Tool (E)</h1>
     <div>
         <div class="btn-group control-box">
@@ -94,7 +96,7 @@
     </div>
 </div>
 <!-- General control panel -->
-<div class="jog-panel" style="display: none;" data-bind="visible: loginState.isUser">
+<div class="jog-panel" id="controls-jog-general" style="display: none;" data-bind="visible: loginState.isUser">
     <h1>{{ _('General') }}</h1>
     <div>
         <button class="btn btn-block control-box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendCustomCommand({type:'command',command:'M18'}) }">{{ _('Motors off') }}</button>
@@ -104,7 +106,7 @@
 </div>
 
 <!-- Container for custom controls -->
-<div style="clear: both; display: none;" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
+<div id="controls-jog-custom" style="clear: both; display: none;" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
 
 <!-- Templates for custom controls -->
 <script type="text/html" id="customControls_containerTemplate_nameless">

From 4b0ef23f346f83334dc131d7ee48a216185f6419 Mon Sep 17 00:00:00 2001
From: Paul de Vries <pablo@blacktower.nl>
Date: Wed, 28 Oct 2015 14:57:11 +0000
Subject: [PATCH 2/3] Moved HTML id's before class for better readability

---
 src/octoprint/templates/tabs/control.jinja2 | 30 ++++++++++-----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/octoprint/templates/tabs/control.jinja2 b/src/octoprint/templates/tabs/control.jinja2
index d9703be1..cc246a38 100644
--- a/src/octoprint/templates/tabs/control.jinja2
+++ b/src/octoprint/templates/tabs/control.jinja2
@@ -26,37 +26,37 @@
 
 <div class="jog-panel" style="display: none;" data-bind="visible: loginState.isUser">
     <!-- XY jogging control panel -->
-    <div class="jog-panel" id="controls-jog-xy">
+    <div id="controls-jog-xy" class="jog-panel">
         <h1>X/Y</h1>
         <div>
-            <button class="btn box" id="control-yinc" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('y',1) }"><i class="icon-arrow-up"></i></button>
+            <button id="control-yinc" class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('y',1) }"><i class="icon-arrow-up"></i></button>
         </div>
         <div>
-            <button class="btn box pull-left" id="control-xdec" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('x',-1) }"><i class="icon-arrow-left"></i></button>
-            <button class="btn box pull-left" id="control-xyhome" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendHomeCommand(['x', 'y']) }"><i class="icon-home"></i></button>
-            <button class="btn box pull-left" id="control-xinc" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('x',1) }"><i class="icon-arrow-right"></i></button>
+            <button id="control-xdec" class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('x',-1) }"><i class="icon-arrow-left"></i></button>
+            <button id="control-xyhome" class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendHomeCommand(['x', 'y']) }"><i class="icon-home"></i></button>
+            <button id="control-xinc" class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('x',1) }"><i class="icon-arrow-right"></i></button>
         </div>
         <div>
-            <button class="btn box" id="control-ydec" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('y',-1) }"><i class="icon-arrow-down"></i></button>
+            <button id="control-ydec" class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('y',-1) }"><i class="icon-arrow-down"></i></button>
         </div>
     </div>
     <!-- Z jogging control panel -->
-    <div class="jog-panel" id="controls-jog-z">
+    <div id="controls-jog-z" class="jog-panel">
         <h1>Z</h1>
         <div>
-            <button class="btn box" id="control-zinc" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('z',1) }"><i class="icon-arrow-up"></i></button>
+            <button id="control-zinc" class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('z',1) }"><i class="icon-arrow-up"></i></button>
         </div>
         <div>
-            <button class="btn box" id="control-zhome" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendHomeCommand(['z']) }"><i class="icon-home"></i></button>
+            <button id="control-zhome" class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendHomeCommand(['z']) }"><i class="icon-home"></i></button>
         </div>
         <div>
-            <button class="btn box" id="control-zdec" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('z',-1) }"><i class="icon-arrow-down"></i></button>
+            <button id="control-zdec" class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('z',-1) }"><i class="icon-arrow-down"></i></button>
         </div>
     </div>
 
     <!-- Jog distance -->
-    <div class="distance" id="controls-jog-distance">
-        <div class="btn-group" id="jog_distance" data-toggle="buttons-radio">
+    <div id="controls-jog-distance" class="distance">
+        <div id="jog_distance" class="btn-group" data-toggle="buttons-radio">
             <button type="button" id="control-distance01" class="btn distance" data-distance="0.1" data-bind="enable: loginState.isUser()">0.1</button>
             <button type="button" id="control-distance1" class="btn distance" data-distance="1" data-bind="enable: loginState.isUser()">1</button>
             <button type="button" id="control-distance10" class="btn distance active" data-distance="10" data-bind="enable: loginState.isUser()">10</button>
@@ -65,13 +65,13 @@
     </div>
 
     <!-- Feed rate -->
-    <div class="jog-panel" id="controls-jog-feedrate">
+    <div id="controls-jog-feedrate" class="jog-panel">
         <input type="number" style="width: 153px" data-bind="slider: {min: 50, max: 150, step: 1, value: feedRate, tooltip: 'hide'}">
         <button class="btn btn-block" style="width: 169px" data-bind="enable: isOperational() && loginState.isUser(), click: function() { $root.sendFeedRateCommand() }">{{ _('Feed rate:') }}<span data-bind="text: feedRate() + '%'"></span></button>
     </div>
 </div>
 <!-- Extrusion control panel -->
-<div class="jog-panel" id="controls-jog-extrusion" style="display: none;" data-bind="visible: loginState.isUser">
+<div id="controls-jog-extrusion" class="jog-panel" style="display: none;" data-bind="visible: loginState.isUser">
     <h1>Tool (E)</h1>
     <div>
         <div class="btn-group control-box">
@@ -96,7 +96,7 @@
     </div>
 </div>
 <!-- General control panel -->
-<div class="jog-panel" id="controls-jog-general" style="display: none;" data-bind="visible: loginState.isUser">
+<div id="controls-jog-general" class="jog-panel" style="display: none;" data-bind="visible: loginState.isUser">
     <h1>{{ _('General') }}</h1>
     <div>
         <button class="btn btn-block control-box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendCustomCommand({type:'command',command:'M18'}) }">{{ _('Motors off') }}</button>

From fba4648e37547bce1066658efe64ad1ebd0d21f3 Mon Sep 17 00:00:00 2001
From: Paul de Vries <pablo@blacktower.nl>
Date: Wed, 28 Oct 2015 15:32:31 +0000
Subject: [PATCH 3/3] Update controls-* to control-*

---
 src/octoprint/templates/tabs/control.jinja2 | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/octoprint/templates/tabs/control.jinja2 b/src/octoprint/templates/tabs/control.jinja2
index cc246a38..f64db4f7 100644
--- a/src/octoprint/templates/tabs/control.jinja2
+++ b/src/octoprint/templates/tabs/control.jinja2
@@ -26,7 +26,7 @@
 
 <div class="jog-panel" style="display: none;" data-bind="visible: loginState.isUser">
     <!-- XY jogging control panel -->
-    <div id="controls-jog-xy" class="jog-panel">
+    <div id="control-jog-xy" class="jog-panel">
         <h1>X/Y</h1>
         <div>
             <button id="control-yinc" class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('y',1) }"><i class="icon-arrow-up"></i></button>
@@ -41,7 +41,7 @@
         </div>
     </div>
     <!-- Z jogging control panel -->
-    <div id="controls-jog-z" class="jog-panel">
+    <div id="control-jog-z" class="jog-panel">
         <h1>Z</h1>
         <div>
             <button id="control-zinc" class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('z',1) }"><i class="icon-arrow-up"></i></button>
@@ -55,7 +55,7 @@
     </div>
 
     <!-- Jog distance -->
-    <div id="controls-jog-distance" class="distance">
+    <div id="control-jog-distance" class="distance">
         <div id="jog_distance" class="btn-group" data-toggle="buttons-radio">
             <button type="button" id="control-distance01" class="btn distance" data-distance="0.1" data-bind="enable: loginState.isUser()">0.1</button>
             <button type="button" id="control-distance1" class="btn distance" data-distance="1" data-bind="enable: loginState.isUser()">1</button>
@@ -65,13 +65,13 @@
     </div>
 
     <!-- Feed rate -->
-    <div id="controls-jog-feedrate" class="jog-panel">
+    <div id="control-jog-feedrate" class="jog-panel">
         <input type="number" style="width: 153px" data-bind="slider: {min: 50, max: 150, step: 1, value: feedRate, tooltip: 'hide'}">
         <button class="btn btn-block" style="width: 169px" data-bind="enable: isOperational() && loginState.isUser(), click: function() { $root.sendFeedRateCommand() }">{{ _('Feed rate:') }}<span data-bind="text: feedRate() + '%'"></span></button>
     </div>
 </div>
 <!-- Extrusion control panel -->
-<div id="controls-jog-extrusion" class="jog-panel" style="display: none;" data-bind="visible: loginState.isUser">
+<div id="control-jog-extrusion" class="jog-panel" style="display: none;" data-bind="visible: loginState.isUser">
     <h1>Tool (E)</h1>
     <div>
         <div class="btn-group control-box">
@@ -96,7 +96,7 @@
     </div>
 </div>
 <!-- General control panel -->
-<div id="controls-jog-general" class="jog-panel" style="display: none;" data-bind="visible: loginState.isUser">
+<div id="control-jog-general" class="jog-panel" style="display: none;" data-bind="visible: loginState.isUser">
     <h1>{{ _('General') }}</h1>
     <div>
         <button class="btn btn-block control-box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendCustomCommand({type:'command',command:'M18'}) }">{{ _('Motors off') }}</button>
@@ -106,7 +106,7 @@
 </div>
 
 <!-- Container for custom controls -->
-<div id="controls-jog-custom" style="clear: both; display: none;" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
+<div id="control-jog-custom" style="clear: both; display: none;" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
 
 <!-- Templates for custom controls -->
 <script type="text/html" id="customControls_containerTemplate_nameless">