From 97a237db38599ee9cea846308f6054fdf962641f Mon Sep 17 00:00:00 2001
From: openbuilds-engineer <p.walt@openbuilds.com>
Date: Fri, 29 Jun 2018 15:01:16 +0200
Subject: [PATCH] Cosmetic fixes

---
 app/css/buttons.css    |  29 ++++++----
 app/css/main.css       |   4 +-
 app/index.html         | 124 ++++++++++++++++++++++++++++++-----------
 app/js/grblsettings.js |  77 +++++++++++++------------
 app/js/jog.js          |  20 +++----
 app/js/main.js         |   2 +-
 app/js/ui.js           |   8 ++-
 index.js               |  10 +++-
 package.json           |   2 +-
 todo                   |   1 -
 10 files changed, 177 insertions(+), 100 deletions(-)
 delete mode 100644 todo

diff --git a/app/css/buttons.css b/app/css/buttons.css
index 8cb78f9..a246aa1 100644
--- a/app/css/buttons.css
+++ b/app/css/buttons.css
@@ -1,45 +1,50 @@
-.jogtable td {
+.drotable td, .jogtable td {
   padding: 2px;
+  vertical-align: bottom;
+}
+
+.drotable button, .dro {
+  border: 1px solid lightgray;
+}
+
+.jogtable button {
+  border: 1px solid lightgray;
 }
 
 .jogbtn:disabled {
   pointer-events:none;
 }
 
-.glossydro {
+.dro {
   display: block;
   text-decoration: none;
   background-color: #f8f8f8;
   color: #a7a7a7;
-  margin: 2px;
-  margin-left: 0px;
   width: 141px;
-  height: 34px;
+  height: 36px;
   position: relative;
   text-align: right;
   padding-right: 6px;
   padding-left: 6px;
-  line-height: 30px;
-  /* border-radius: 2px; */
-  /* border: 1px solid #ddd; */
+  line-height: 32px;
   font-weight:900;
   font-size: 18px;
-  cursor: default;
+  cursor: pointer;
 }
 
-.glossydroInput {
+.droInput {
   display: block;
   text-decoration: none;
   background-color: #f5f6f7;
   color: #a7a7a7;
   margin: 2px;
   width: 100px;
-  height: 32px;
+  height: 34px;
   position: relative;
   text-align: right;
   padding-right: 6px;
   padding-left: 6px;
-  line-height: 30px;
+  line-height: 34px;
   border-radius: 2px;
   border: 1px solid #ddd;
   font-weight:700;
diff --git a/app/css/main.css b/app/css/main.css
index de94eb8..370b8ba 100644
--- a/app/css/main.css
+++ b/app/css/main.css
@@ -20,8 +20,8 @@ body {
 }
 
 #grblPanel {
-    max-height: calc(100vh - 190px);
-    height: calc(100vh - 190px);
+    max-height: calc(100vh - 205px);
+    height: calc(100vh - 205px);
     width: 100%;
     overflow-y: auto;
     overflow-x: none;
diff --git a/app/index.html b/app/index.html
index ddd0ba0..78c6cf3 100644
--- a/app/index.html
+++ b/app/index.html
@@ -58,12 +58,6 @@
                     </span>
                     <span class="caption">Reset</span>
                   </button>
-                  <!-- <button class="ribbon-icon-button" onclick="sendGcode('$X')">
-                    <span class="icon">
-                      <span class="mif-unlock"></span>
-                    </span>
-                    <span class="caption">Unlock</span>
-                  </button> -->
                   <button class="ribbon-icon-button" onclick="sendGcode('$$')">
                     <span class="icon">
                       <span class="mif-cogs"></span>
@@ -98,23 +92,35 @@
           </div>
           <div class="section" id="section-grbl">
             <div class="group" style="width: calc(100vw - 40px);">
-              <button class="ribbon-button" onclick="grblSaveSettings();">
+              <button class="ribbon-button disabled" onclick="grblSaveSettings();" id="saveBtn" disabled>
                 <span class="icon">
                   <span class="fa-layers fa-fw">
-                    <i class="fas fa-save fg-grayBlue" data-fa-transform="grow-8"></i>
+                    <i id="saveBtnIcon" class="fas fa-save fg-gray" data-fa-transform="grow-8"></i>
                     <i id="grblSettingsBadge" class="fas fa-exclamation-circle fg-red" data-fa-transform="shrink-4 right-10 up-10" style="display: none;"></i>
-                    <!-- <span class="fa-layers-text fg-grayBlue" data-fa-transform="up-8 " style="font-weight:900; font-family: Arial; font-size: 12px;">setzero</span> -->
                   </span>
                 </span>
                 <span class="caption">Save<br> to Firmware</span>
               </button>
-              <button class="ribbon-button" onclick="refreshGrblSettings();">
-                <span class="icon">
+              <div class="ribbon-group" style="width: 90px;">
+                <button class="ribbon-icon-button" onclick="sendGcode(String.fromCharCode(0x18))">
+                  <span class="icon">
+                    <span class="mif-loop"></span>
+                  </span>
+                  <span class="caption">Reset</span>
+                </button>
+                <button class="ribbon-icon-button" onclick="sendGcode('$X')">
+                  <span class="icon">
+                    <span class="mif-unlock"></span>
+                  </span>
+                  <span class="caption">Unlock</span>
+                </button>
+                <button class="ribbon-icon-button" onclick="refreshGrblSettings();">
+                  <span class="icon">
                     <i class="fas fa-sync-alt"></i>
                   </span>
-                </span>
-                <span class="caption">Refresh<br>from Firmware</span>
-              </button>
+                  <span class="caption">Refresh</span>
+                </button>
+              </div>
               <span class="title">Grbl Settings</span>
             </div>
             <div class="group" style="width: 100px;">
@@ -245,34 +251,88 @@
           <div id="jogcontrols">
             <div class="row flex-justify-center flex-align-center" style="width: 100%;">
               <div class="cell">
-                <table>
+                <table class="drotable">
                   <tr>
                     <td>
-                      <div class="glossydro">
+                      <button class="button light jogbtn" onclick="sendGcode( 'G10 P1 L20 X0')" style="width: 60px;">
+                        <span class="fa-layers fa-fw">
+                          <i class="fas fa-crosshairs fg-grayBlue" data-fa-transform="shrink-2 down-8 left-12"></i>
+                          <span class="fa-layers-text fg-red" data-fa-transform="down-9 right-8" style="font-weight:900; font-family: Arial; font-size: 12px;">X</span>
+                          <span class="fa-layers-text fg-grayBlue" data-fa-transform="up-8 " style="font-weight:900; font-family: Arial; font-size: 12px;">setzero</span>
+                        </span>
+                      </button>
+                    </td>
+                    <td>
+                      <div class="dro">
                         <div class="float-left fg-red">X</div>
                         <div class="float-right fg-red" id="xPos" data-editable>0.000</div>
-                        <input id="xPosInput" class="m-0 p-0 glossydroInput float-right fg-red" />
+                        <input id="xPosInput" class="m-0 p-0 droInput float-right fg-red" />
                       </div>
                     </td>
                   </tr>
                   <tr>
                     <td>
-                      <div class="glossydro">
+                      <button class="button light jogbtn" onclick="sendGcode( 'G10 P1 L20 Y0')" style="width: 60px;">
+                        <span class="fa-layers fa-fw">
+                          <i class="fas fa-crosshairs fg-grayBlue" data-fa-transform="shrink-2 down-8 left-12"></i>
+                          <span class="fa-layers-text fg-green" data-fa-transform="down-9 right-8" style="font-weight:900; font-family: Arial; font-size: 12px;">Y</span>
+                          <span class="fa-layers-text fg-grayBlue" data-fa-transform="up-8 " style="font-weight:900; font-family: Arial; font-size: 12px;">setzero</span>
+                        </span>
+                      </button>
+                    </td>
+                    <td>
+                      <div class="dro">
                         <div class="float-left fg-green">Y</div>
                         <div class="float-right fg-green" id="yPos" data-editable>0.000</div>
-                        <input id="yPosInput" class="m-0 p-0 glossydroInput float-right fg-green" />
+                        <input id="yPosInput" class="m-0 p-0 droInput float-right fg-green" />
                       </div>
                     </td>
                   </tr>
                   <tr>
                     <td>
-                      <div class="glossydro">
+                      <button class="button light jogbtn" onclick="sendGcode( 'G10 P1 L20 Z0')" style="width: 60px;">
+                        <span class="fa-layers fa-fw">
+                          <i class="fas fa-crosshairs fg-grayBlue" data-fa-transform="shrink-2 down-8 left-8"></i>
+                          <span class="fa-layers-text fg-blue" data-fa-transform="down-9 right-8" style="font-weight:900; font-family: Arial; font-size: 12px;">Z</span>
+                          <span class="fa-layers-text fg-grayBlue" data-fa-transform="up-8 " style="font-weight:900; font-family: Arial; font-size: 12px;">setzero</span>
+                        </span>
+                      </button>
+                    </td>
+                    <td>
+                      <div class="dro">
                         <div class="float-left fg-blue">Z</div>
                         <div class="float-right fg-blue" id="zPos" data-editable>0.000</div>
-                        <input id="zPosInput" class="m-0 p-0 glossydroInput float-right fg-blue" />
+                        <input id="zPosInput" class="m-0 p-0 droInput float-right fg-blue" />
                       </div>
                     </td>
                   </tr>
+                  <tr>
+                    <td>
+                      <button class="button light jogbtn" onclick="sendGcode( 'G10 P1 L20 Z0')" style="width: 60px;">
+                        <span class="fa-layers fa-fw">
+                          <i class="fas fa-crosshairs fg-grayBlue" data-fa-transform="shrink-2 down-8 left-18"></i>
+                          <span class="fa-layers-text fg-red" data-fa-transform="down-9 right-2" style="font-weight:900; font-family: Arial; font-size: 12px;">X</span>
+                          <span class="fa-layers-text fg-green" data-fa-transform="down-9 right-12" style="font-weight:900; font-family: Arial; font-size: 12px;">Y</span>
+                          <span class="fa-layers-text fg-blue" data-fa-transform="down-9 right-22" style="font-weight:900; font-family: Arial; font-size: 12px;">Z</span>
+                          <span class="fa-layers-text fg-grayBlue" data-fa-transform="up-8 " style="font-weight:900; font-family: Arial; font-size: 12px;">setzero</span>
+                        </span>
+                      </button>
+                    </td>
+                    <td>
+                      <button class="button light jogbtn" style="width: 141px;" id="gotozero">
+                        <span class="fa-layers fa-fw">
+                          <i class="fas fa-chart-line fg-grayBlue" data-fa-transform="shrink-2 down-8 left-12"></i>
+                          <span class="fa-layers-text fg-red" data-fa-transform="down-9 right-8" style="font-weight:900; font-family: Arial; font-size: 12px;">X</span>
+                          <span class="fa-layers-text fg-green" data-fa-transform="down-9 right-19" style="font-weight:900; font-family: Arial; font-size: 12px;">Y</span>
+                          <span class="fa-layers-text fg-blue" data-fa-transform="down-9 right-29" style="font-weight:900; font-family: Arial; font-size: 12px;">Z</span>
+                          <span class="fa-layers-text fg-grayBlue" data-fa-transform="up-8 " style="font-weight:900; font-family: Arial; font-size: 12px;">gotozero</span>
+                        </span>
+
+                      </button>
+                    </td>
+                  </tr>
+                </table>
+                <!-- <table>
                   <tr>
                     <td style="padding-top: 2px;">
                       <button class="button light jogbtn" onclick="sendGcode( 'G10 P1 L20 X0 Y0')" style="width: 69px;">
@@ -294,7 +354,7 @@
                   </tr>
                   <tr>
                     <td style="padding-top: 3px;">
-                      <button class="button light jogbtn" style="width: 140px;" id="gotozero">
+                      <button class="button light jogbtn" style="width: 141px;" id="gotozero">
                         <span class="fa-layers fa-fw">
                           <i class="fas fa-chart-line fg-grayBlue" data-fa-transform="shrink-2 down-8 left-12"></i>
                           <span class="fa-layers-text fg-red" data-fa-transform="down-9 right-8" style="font-weight:900; font-family: Arial; font-size: 12px;">X</span>
@@ -306,7 +366,7 @@
                       </button>
                     </td>
                   </tr>
-                </table>
+                </table> -->
               </div>
               <div class="cell">
                 <table class="jogtable">
@@ -374,28 +434,28 @@
                   </tr>
                   <tr>
                     <td>
-                      <button class="button light jogbtn" id="dist01" style="width: 100%;">
+                      <button class="button light jogbtn" id="dist01" style="width: 100%; height: 30px; line-height: 28px;">
                         <span class=" fa-layers fa-fw">
                           <span id="dist01label" class="fa-layers-text fg-gray jogdist" data-fa-transform="" style="font-weight:900; font-family: Arial; font-size: 12px;">0.1mm</span>
                         </span>
                       </button>
                     </td>
                     <td>
-                      <button class="button light jogbtn" id="dist1" style="width: 100%;">
+                      <button class="button light jogbtn" id="dist1" style="width: 100%; height: 30px; line-height: 28px;">
                         <span class=" fa-layers fa-fw">
                           <span id="dist1label" class="fa-layers-text fg-gray jogdist" data-fa-transform="" style="font-weight:900; font-family: Arial; font-size: 12px;">1mm</span>
                         </span>
                       </button>
                     </td>
                     <td>
-                      <button class="button light jogbtn" id="dist10" style="width: 100%;">
+                      <button class="button light jogbtn" id="dist10" style="width: 100%; height: 30px; line-height: 28px;">
                         <span class=" fa-layers fa-fw">
-                          <span id="dist10label" class="fa-layers-text fg-dark jogdist" data-fa-transform="" style="font-weight:900; font-family: Arial; font-size: 12px;">10mm</span>
+                          <span id="dist10label" class="fa-layers-text fg-grayBlue jogdist" data-fa-transform="" style="font-weight:900; font-family: Arial; font-size: 12px;">10mm</span>
                         </span>
                       </button>
                     </td>
                     <td>
-                      <button class="button light jogbtn" id="dist100" style="width: 100%;">
+                      <button class="button light jogbtn" id="dist100" style="width: 100%; height: 30px; line-height: 28px;">
                         <span class=" fa-layers fa-fw">
                           <span id="dist100label" class="fa-layers-text fg-gray jogdist" data-fa-transform="" style="font-weight:900; font-family: Arial; font-size: 12px;">100mm</span>
                         </span>
@@ -435,7 +495,7 @@
         <div class="row">
           <div class="cell-3">
             <div>
-              <span class="badge inline bg-gray fg-white" style="width: 100%;">
+              <span class="badge inline bg-grayBlue fg-white" style="width: 100%;">
                 <span class="fa-layers" data-toggle="tooltip" data-placement="bottom" title="Flashes red when machine has entered ALARM state, click Clear Alarm button">
                   <i id="navbell" class="fas fa-bell fg-red" style="display: none;"></i>
                   <i class="far fa-bell"></i>
@@ -445,17 +505,17 @@
           </div>
           <div class="cell-3">
             <div>
-              <span class="badge inline bg-gray fg-white" id="connectStatus" style="width: 100%;">Not Connected</span>
+              <span class="badge inline bg-grayBlue fg-white" id="connectStatus" style="width: 100%;">Not Connected</span>
             </div>
           </div>
           <div class="cell-3">
             <div>
-              <span class="badge inline bg-gray fg-white" id="runStatus" style="width: 100%;">Not Connected</span>
+              <span class="badge inline bg-grayBlue fg-white" id="runStatus" style="width: 100%;">Not Connected</span>
             </div>
           </div>
           <div class="cell-3">
             <div>
-              <span class="badge inline bg-gray fg-white" id="gcodesent" style="width: 100%;">Queue: 0</span>
+              <span class="badge inline bg-grayBlue fg-white" id="gcodesent" style="width: 100%;">Queue: 0</span>
             </div>
           </div>
         </div>
diff --git a/app/js/grblsettings.js b/app/js/grblsettings.js
index 899694b..6129f77 100644
--- a/app/js/grblsettings.js
+++ b/app/js/grblsettings.js
@@ -59,7 +59,8 @@ function grblPopulate() {
         <table data-role="table" class="table compact striped row-hover row-border" data-show-rows-steps="false" data-rows="200" data-show-pagination="false" data-show-table-info="false">
         <thead>
           <tr>
-              <th class="sortable-column">Key</th>
+              <td>Key</th>
+              <th class="sortable-column" data-format="number"></th>
               <th class="sortable-column">Parameter</th>
               <th>Value</th>
 
@@ -67,9 +68,9 @@ function grblPopulate() {
         </thead>
 
         <tbody>
-        <tr><td>$0</td><td>Step pulse time, microseconds</td><td><input type="text" value="` + grblParams['$0'] + `" id="val-` + 0 + `-input"></td></tr>
-        <tr><td>$1</td><td>Step idle delay, milliseconds</td><td><input type="text" value="` + grblParams['$1'] + `" id="val-` + 1 + `-input"></td></tr>
-        <tr><td>$2</td>
+        <tr><td>$</td><td>0</td><td>Step pulse time, microseconds</td><td><input type="text" value="` + grblParams['$0'] + `" id="val-` + 0 + `-input"></td></tr>
+        <tr><td>$</td><td>1</td><td>Step idle delay, milliseconds</td><td><input type="text" value="` + grblParams['$1'] + `" id="val-` + 1 + `-input"></td></tr>
+        <tr><td>$</td><td>2</td>
         <td>Step pulse invert</td>
         <td>
         <select id="val-` + 2 + `-input" value="` + grblParams['$2'] + `">
@@ -84,7 +85,7 @@ function grblPopulate() {
         </select>
         </td>
         </tr>
-        <tr><td>$3</td><td>Step direction invert</td><td><select id="val-` + 3 + `-input" value="` + grblParams['$3'] + `">
+        <tr><td>$</td><td>3</td><td>Step direction invert</td><td><select id="val-` + 3 + `-input" value="` + grblParams['$3'] + `">
         <option value="0">X:&#xf10c Y:&#xf10c Z:&#xf10c</option>
         <option value="1">X:&#xf111 Y:&#xf10c Z:&#xf10c</option>
         <option value="2">X:&#xf10c Y:&#xf111 Z:&#xf10c</option>
@@ -94,22 +95,22 @@ function grblPopulate() {
         <option value="6">X:&#xf10c Y:&#xf111 Z:&#xf111</option>
         <option value="7">X:&#xf111 Y:&#xf111 Z:&#xf111</option>
         </select></td></tr>
-        <tr><td>$4</td><td>Invert step enable pin</td><td><select id="val-` + 4 + `-input" value="` + grblParams['$4'] + `"><option value="0">&#xf00d Disable</option><option value="1">&#xf00c Enable</option></select></td></tr>
-        <tr><td>$5</td><td>Invert limit pins</td><td><select id="val-` + 5 + `-input" value="` + grblParams['$5'] + `"><option value="0">&#xf00d Disable</option><option value="1">&#xf00c Enable</option></select></td></tr>
-        <tr><td>$6</td><td>Invert probe pin</td><td><select id="val-` + 6 + `-input" value="` + grblParams['$6'] + `"><option value="0">&#xf00d Disable</option><option value="1">&#xf00c Enable</option></select></td></tr>
-        <tr><td>$10</td><td>Status report options</td><td><select id="val-` + 10 + `-input" value="` + grblParams['$10'] + `">
+        <tr><td>$</td><td>4</td><td>Invert step enable pin</td><td><select id="val-` + 4 + `-input" value="` + grblParams['$4'] + `"><option value="0">&#xf00d Disable</option><option value="1">&#xf00c Enable</option></select></td></tr>
+        <tr><td>$</td><td>5</td><td>Invert limit pins</td><td><select id="val-` + 5 + `-input" value="` + grblParams['$5'] + `"><option value="0">&#xf00d Disable</option><option value="1">&#xf00c Enable</option></select></td></tr>
+        <tr><td>$</td><td>6</td><td>Invert probe pin</td><td><select id="val-` + 6 + `-input" value="` + grblParams['$6'] + `"><option value="0">&#xf00d Disable</option><option value="1">&#xf00c Enable</option></select></td></tr>
+        <tr><td>$</td><td>10</td><td>Status report options</td><td><select id="val-` + 10 + `-input" value="` + grblParams['$10'] + `">
           <option value="0">WPos:&#xf111 MPos:&#xf10c Buf:&#xf10c</option>
           <option value="1">WPos:&#xf10c MPos:&#xf111 Buf:&#xf10c</option>
           <option value="2">WPos:&#xf111 MPos:&#xf10c Buf:&#xf111</option>
         </select></td></tr>
-        <tr><td>$11</td><td>Junction deviation, millimeters</td><td><input type="text" value="` + grblParams['$11'] + `" id="val-` + 11 + `-input"></td></tr>
-        <tr><td>$12</td><td>Arc tolerance, millimeters</td><td><input type="text" value="` + grblParams['$12'] + `" id="val-` + 12 + `-input"></td></tr>
-        <tr><td>$13</td><td>Report in inches</td><td><select id="val-` + 13 + `-input" value="` + grblParams['$13'] + `"><option value="0">&#xf10c Disable</option><option value="1">&#xf111 Enable</option></select></td></tr>
+        <tr><td>$</td><td>11</td><td>Junction deviation, millimeters</td><td><input type="text" value="` + grblParams['$11'] + `" id="val-` + 11 + `-input"></td></tr>
+        <tr><td>$</td><td>12</td><td>Arc tolerance, millimeters</td><td><input type="text" value="` + grblParams['$12'] + `" id="val-` + 12 + `-input"></td></tr>
+        <tr><td>$</td><td>13</td><td>Report in inches</td><td><select id="val-` + 13 + `-input" value="` + grblParams['$13'] + `"><option value="0">&#xf10c Disable</option><option value="1">&#xf111 Enable</option></select></td></tr>
 
-        <tr><td>$20</td><td>Soft limits enable <small>(Enable and Save Homing first before enabling)<small></td><td><select id="val-` + 20 + `-input" value="` + grblParams['$20'] + `"><option value="0">&#xf00d Disable</option><option value="1">&#xf00c Enable</option></select></td></tr>
-        <tr><td>$21</td><td>Hard limits enable</td><td><select id="val-` + 21 + `-input" value="` + grblParams['$21'] + `"><option value="0">&#xf00d Disable</option><option value="1">&#xf00c Enable</option></select></td></tr>
-        <tr><td>$22</td><td>Homing cycle enable</td><td><select id="val-` + 22 + `-input" value="` + grblParams['$22'] + `"><option value="0">&#xf00d Disable</option><option value="1">&#xf00c Enable</option></select></td></tr>
-        <tr><td>$23</td><td>Homing direction invert</td><td><select id="val-` + 23 + `-input" value="` + grblParams['$23'] + `">
+        <tr><td>$</td><td>20</td><td>Soft limits enable <small>(Enable and Save Homing first before enabling)<small></td><td><select id="val-` + 20 + `-input" value="` + grblParams['$20'] + `"><option value="0">&#xf00d Disable</option><option value="1">&#xf00c Enable</option></select></td></tr>
+        <tr><td>$</td><td>21</td><td>Hard limits enable</td><td><select id="val-` + 21 + `-input" value="` + grblParams['$21'] + `"><option value="0">&#xf00d Disable</option><option value="1">&#xf00c Enable</option></select></td></tr>
+        <tr><td>$</td><td>22</td><td>Homing cycle enable</td><td><select id="val-` + 22 + `-input" value="` + grblParams['$22'] + `"><option value="0">&#xf00d Disable</option><option value="1">&#xf00c Enable</option></select></td></tr>
+        <tr><td>$</td><td>23</td><td>Homing direction invert</td><td><select id="val-` + 23 + `-input" value="` + grblParams['$23'] + `">
           <option value="0">X:&#xf10c Y:&#xf10c Z:&#xf10c</option>
           <option value="1">X:&#xf111 Y:&#xf10c Z:&#xf10c</option>
           <option value="2">X:&#xf10c Y:&#xf111 Z:&#xf10c</option>
@@ -119,30 +120,30 @@ function grblPopulate() {
           <option value="6">X:&#xf10c Y:&#xf111 Z:&#xf111</option>
           <option value="7">X:&#xf111 Y:&#xf111 Z:&#xf111</option>
         </select></td></tr>
-        <tr><td>$24</td><td>Homing locate feed rate, mm/min</td><td><input type="text" value="` + grblParams['$24'] + `" id="val-` + 24 + `-input"></td></tr>
-        <tr><td>$25</td><td>Homing search seek rate, mm/min</td><td><input type="text" value="` + grblParams['$25'] + `" id="val-` + 25 + `-input"></td></tr>
-        <tr><td>$26</td><td>Homing switch debounce delay, milliseconds</td><td><input type="text" value="` + grblParams['$26'] + `" id="val-` + 26 + `-input"></td></tr>
-        <tr><td>$27</td><td>Homing switch pull-off distance, millimeters</td><td><input type="text" value="` + grblParams['$27'] + `" id="val-` + 27 + `-input"></td></tr>
+        <tr><td>$</td><td>24</td><td>Homing locate feed rate, mm/min</td><td><input type="text" value="` + grblParams['$24'] + `" id="val-` + 24 + `-input"></td></tr>
+        <tr><td>$</td><td>25</td><td>Homing search seek rate, mm/min</td><td><input type="text" value="` + grblParams['$25'] + `" id="val-` + 25 + `-input"></td></tr>
+        <tr><td>$</td><td>26</td><td>Homing switch debounce delay, milliseconds</td><td><input type="text" value="` + grblParams['$26'] + `" id="val-` + 26 + `-input"></td></tr>
+        <tr><td>$</td><td>27</td><td>Homing switch pull-off distance, millimeters</td><td><input type="text" value="` + grblParams['$27'] + `" id="val-` + 27 + `-input"></td></tr>
 
-        <tr><td>$30</td><td>Maximum spindle speed, RPM</td><td><input type="text" value="` + grblParams['$30'] + `" id="val-` + 30 + `-input"></td></tr>
-        <tr><td>$31</td><td>Minimum spindle speed, RPM</td><td><input type="text" value="` + grblParams['$31'] + `" id="val-` + 31 + `-input"></td></tr>
-        <tr><td>$32</td><td>Laser-mode enable</td><td><select id="val-` + 32 + `-input" value="` + grblParams['$32'] + `"><option value="0">&#xf00d Disable</option><option value="1">&#xf00c Enable</option></select></td></tr>
+        <tr><td>$</td><td>30</td><td>Maximum spindle speed, RPM</td><td><input type="text" value="` + grblParams['$30'] + `" id="val-` + 30 + `-input"></td></tr>
+        <tr><td>$</td><td>31</td><td>Minimum spindle speed, RPM</td><td><input type="text" value="` + grblParams['$31'] + `" id="val-` + 31 + `-input"></td></tr>
+        <tr><td>$</td><td>32</td><td>Laser-mode enable</td><td><select id="val-` + 32 + `-input" value="` + grblParams['$32'] + `"><option value="0">&#xf00d Disable</option><option value="1">&#xf00c Enable</option></select></td></tr>
 
-        <tr><td>$100</td><td>X-axis steps per millimeter</td><td><input type="text" value="` + grblParams['$100'] + `" id="val-` + 100 + `-input"></td></tr>
-        <tr><td>$101</td><td>Y-axis steps per millimeter</td><td><input type="text" value="` + grblParams['$101'] + `" id="val-` + 101 + `-input"></td></tr>
-        <tr><td>$102</td><td>Z-axis steps per millimeter</td><td><input type="text" value="` + grblParams['$102'] + `" id="val-` + 102 + `-input"></td></tr>
+        <tr><td>$</td><td>100</td><td>X-axis steps per millimeter</td><td><input type="text" value="` + grblParams['$100'] + `" id="val-` + 100 + `-input"></td></tr>
+        <tr><td>$</td><td>101</td><td>Y-axis steps per millimeter</td><td><input type="text" value="` + grblParams['$101'] + `" id="val-` + 101 + `-input"></td></tr>
+        <tr><td>$</td><td>102</td><td>Z-axis steps per millimeter</td><td><input type="text" value="` + grblParams['$102'] + `" id="val-` + 102 + `-input"></td></tr>
 
-        <tr><td>$110</td><td>X-axis maximum rate, mm/min</td><td><input type="text" value="` + grblParams['$110'] + `" id="val-` + 110 + `-input"></td></tr>
-        <tr><td>$111</td><td>Y-axis maximum rate, mm/min</td><td><input type="text" value="` + grblParams['$111'] + `" id="val-` + 111 + `-input"></td></tr>
-        <tr><td>$112</td><td>Z-axis maximum rate, mm/min</td><td><input type="text" value="` + grblParams['$112'] + `" id="val-` + 112 + `-input"></td></tr>
+        <tr><td>$</td><td>110</td><td>X-axis maximum rate, mm/min</td><td><input type="text" value="` + grblParams['$110'] + `" id="val-` + 110 + `-input"></td></tr>
+        <tr><td>$</td><td>111</td><td>Y-axis maximum rate, mm/min</td><td><input type="text" value="` + grblParams['$111'] + `" id="val-` + 111 + `-input"></td></tr>
+        <tr><td>$</td><td>112</td><td>Z-axis maximum rate, mm/min</td><td><input type="text" value="` + grblParams['$112'] + `" id="val-` + 112 + `-input"></td></tr>
 
-        <tr><td>$120</td><td>X-axis acceleration, mm/sec<sup>2</sup></td><td><input type="text" value="` + grblParams['$120'] + `" id="val-` + 120 + `-input"></td></tr>
-        <tr><td>$121</td><td>Y-axis acceleration, mm/sec<sup>2</sup>]</td><td><input type="text" value="` + grblParams['$121'] + `" id="val-` + 121 + `-input"></td></tr>
-        <tr><td>$122</td><td>Z-axis acceleration, mm/sec<sup>2</sup></td><td><input type="text" value="` + grblParams['$122'] + `" id="val-` + 122 + `-input"></td></td></tr>
+        <tr><td>$</td><td>120</td><td>X-axis acceleration, mm/sec<sup>2</sup></td><td><input type="text" value="` + grblParams['$120'] + `" id="val-` + 120 + `-input"></td></tr>
+        <tr><td>$</td><td>121</td><td>Y-axis acceleration, mm/sec<sup>2</sup>]</td><td><input type="text" value="` + grblParams['$121'] + `" id="val-` + 121 + `-input"></td></tr>
+        <tr><td>$</td><td>122</td><td>Z-axis acceleration, mm/sec<sup>2</sup></td><td><input type="text" value="` + grblParams['$122'] + `" id="val-` + 122 + `-input"></td></td></tr>
 
-        <tr><td>$130</td><td>X-axis maximum travel, millimeters</td><td><input type="text" value="` + grblParams['$130'] + `" id="val-` + 130 + `-input"></td></tr>
-        <tr><td>$131</td><td>Y-axis maximum travel, millimeters</td><td><input type="text" value="` + grblParams['$131'] + `" id="val-` + 131 + `-input"></td></tr>
-        <tr><td>$132</td><td>Z-axis maximum travel, millimeters</td><td><input type="text" value="` + grblParams['$132'] + `" id="val-` + 132 + `-input"></td></tr>
+        <tr><td>$</td><td>130</td><td>X-axis maximum travel, millimeters</td><td><input type="text" value="` + grblParams['$130'] + `" id="val-` + 130 + `-input"></td></tr>
+        <tr><td>$</td><td>131</td><td>Y-axis maximum travel, millimeters</td><td><input type="text" value="` + grblParams['$131'] + `" id="val-` + 131 + `-input"></td></tr>
+        <tr><td>$</td><td>132</td><td>Z-axis maximum travel, millimeters</td><td><input type="text" value="` + grblParams['$132'] + `" id="val-` + 132 + `-input"></td></tr>
 
         </tbody>
         </table>
@@ -179,8 +180,12 @@ function grblPopulate() {
     }
     if (hasChanged) {
       $('#grblSettingsBadge').fadeIn('slow');
+      $('#saveBtn').attr('disabled', false).removeClass('disabled');
+      $('#saveBtnIcon').removeClass('fg-gray').addClass('fg-grayBlue');
     } else {
       $('#grblSettingsBadge').fadeOut('slow');
+      $('#saveBtn').attr('disabled', true).addClass('disabled');
+      $('#saveBtnIcon').removeClass('fg-grayBlue').addClass('fg-gray');
     }
   });
   $('#grblSettingsBadge').hide();
@@ -228,7 +233,7 @@ function grblSaveSettings() {
 function refreshGrblSettings() {
   grblParams = {};
   $('#grblconfig').empty();
-  $('#grblconfig').append("<center>Please Wait... </center><br><div data-role='countdown' data-seconds='3'></div><br> Requesting updated parameters from the controller firmware...");
+  $('#grblconfig').append("<center>Please Wait... </center><br><div data-role='countdown' data-seconds='3'></div><br> <center>Requesting updated parameters from the controller firmware...</center>");
   setTimeout(function() {
     sendGcode('$$');
     setTimeout(function() {
diff --git a/app/js/jog.js b/app/js/jog.js
index ac9cda8..20e4127 100644
--- a/app/js/jog.js
+++ b/app/js/jog.js
@@ -88,42 +88,42 @@ $(document).ready(function() {
 
   $('#dist01').on('click', function(ev) {
     jogdist = 0.1;
-    $('.jogdist').removeClass('fg-dark')
+    $('.jogdist').removeClass('fg-grayBlue')
     $('.jogdist').addClass('fg-gray')
     $('#dist01label').removeClass('fg-gray')
-    $('#dist01label').addClass('fg-dark')
+    $('#dist01label').addClass('fg-grayBlue')
   })
 
   $('#dist1').on('click', function(ev) {
     jogdist = 1;
-    $('.jogdist').removeClass('fg-dark')
+    $('.jogdist').removeClass('fg-grayBlue')
     $('.jogdist').addClass('fg-gray')
     $('#dist1label').removeClass('fg-gray')
-    $('#dist1label').addClass('fg-dark')
+    $('#dist1label').addClass('fg-grayBlue')
   })
 
   $('#dist10').on('click', function(ev) {
     jogdist = 10;
-    $('.jogdist').removeClass('fg-dark')
+    $('.jogdist').removeClass('fg-grayBlue')
     $('.jogdist').addClass('fg-gray')
     $('#dist10label').removeClass('fg-gray')
-    $('#dist10label').addClass('fg-dark')
+    $('#dist10label').addClass('fg-grayBlue')
   })
 
   $('#dist100').on('click', function(ev) {
     jogdist = 100;
-    $('.jogdist').removeClass('fg-dark')
+    $('.jogdist').removeClass('fg-grayBlue')
     $('.jogdist').addClass('fg-gray')
     $('#dist100label').removeClass('fg-gray')
-    $('#dist100label').addClass('fg-dark')
+    $('#dist100label').addClass('fg-grayBlue')
   })
 
   $('#dist500').on('click', function(ev) {
     jogdist = 500;
-    $('.jogdist').removeClass('fg-dark')
+    $('.jogdist').removeClass('fg-grayBlue')
     $('.jogdist').addClass('fg-gray')
     $('#dist500label').removeClass('fg-gray')
-    $('#dist500label').addClass('fg-dark')
+    $('#dist500label').addClass('fg-grayBlue')
   })
 
   $('#gotozero').on('click', function(ev) {
diff --git a/app/js/main.js b/app/js/main.js
index 1f29fdc..82c9f30 100644
--- a/app/js/main.js
+++ b/app/js/main.js
@@ -9,7 +9,7 @@ $(document).ready(function() {
   editor.setTheme('ace/theme/sqlserver')
   // editor.setOption('printMarginColumn', 0)
   editor.setAutoScrollEditorIntoView(true);
-  editor.session.setValue('; No GCODE yet - please Load a GCODE file from the Open GCODE'); // from samplefile.js
+  editor.session.setValue('; No GCODE yet - please Load a GCODE file from the Open GCODE button'); // from samplefile.js
   editor.setShowPrintMargin(false);
   // editor.container.addEventListener("contextmenu", function(e) {
   //   console.log("context")
diff --git a/app/js/ui.js b/app/js/ui.js
index 6db5256..774983e 100644
--- a/app/js/ui.js
+++ b/app/js/ui.js
@@ -180,10 +180,14 @@ function setConsole(val, status) {
     $("#command").attr('disabled', false);
     $("#sendCommand").prop('disabled', false);
   } else if (val == 3) { // Busy Streaming GCODE
-    $("#command").attr('disabled', true);
+    if (!$('#command').attr('disabled')) {
+      $('#command').attr('disabled', true);
+    }
     $("#sendCommand").prop('disabled', true);
   } else if (val == 4) { // Paused
-    $("#command").attr('disabled', true);
+    if (!$('#command').attr('disabled')) {
+      $('#command').attr('disabled', true);
+    }
     $("#sendCommand").prop('disabled', false);
   } else if (val == 5) { // Alarm State
     $("#command").attr('disabled', false);
diff --git a/index.js b/index.js
index 58eb1be..b5e712d 100644
--- a/index.js
+++ b/index.js
@@ -2009,8 +2009,8 @@ if (electronApp) {
   function createJogWindow() {
     // Create the browser window.
     jogWindow = new BrowserWindow({
-      width: 600,
-      height: 600,
+      width: 660,
+      height: 710,
       fullscreen: false,
       center: true,
       resizable: true,
@@ -2127,4 +2127,8 @@ if (electronApp) {
     openAtLogin: true,
     args: []
   })
-}
\ No newline at end of file
+}
+
+process.on('uncaughtException', function(error) {
+  console.log("Uncaught Error " + error)
+});
\ No newline at end of file
diff --git a/package.json b/package.json
index 06ecf7b..7c2b141 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "OpenBuildsMachineDriver",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "license": "AGPL-3.0",
   "description": "Machine Interface Driver for OpenBuilds",
   "author": "github.com/openbuilds",
diff --git a/todo b/todo
deleted file mode 100644
index 75389d5..0000000
--- a/todo
+++ /dev/null
@@ -1 +0,0 @@
-Catch alarm when grbl is Locked on Init