diff --git a/README.md b/README.md
index 89b5bb5..d777c3a 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,8 @@ The full cncjs UI can still be used, perhaps on a different computer or in a dif
 
 It works well with TinyG/g2core and GRBL.  It has been tested a little with Marlin but not extensively.  It has not been tested with Smoothieware - but Smoothie and GRBL are quite similar from a protocol standpoint so it is likely to work.
 
-Rotary axes A/B/C are not supported from the GUI, but you can issue GCode commands for those axes manually via the MDI boxes.
+Rotary axis A is supported from the GUI, but not B and C.  You can issue GCode commands for those axes manually via the MDI boxes.  The A axis GUI support includes a DRO, Set and GoTo functions, but not jog buttons.  There is a Home A menu entry in the dropdown menu.
+
 
 ### Setup
 
@@ -64,19 +65,29 @@ You can still use the full cncjs UI by browsing 'http://*host*:8000'. You can us
 
 ### Usage
 
-![cncjs-tablet 2](https://user-images.githubusercontent.com/4861133/33970662-4a8244b2-e018-11e7-92ab-5a379e3de461.PNG)
-
-* **Start/Pause/Resume/Stop** are highlighted and colored according to the program state
-    * **Start** is green when it is possible to start running a program
-    * **Pause** is red when the program is running
-    * **Stop** is red when the program is running or paused
-    * **Resume** is green when the program is paused
-* The **Inch** or **mm** button shows the currently-active units, and toggles them if clicked.
+![cncjs-shopfloor-tablet](https://user-images.githubusercontent.com/4861133/100148429-d9b16b80-2e40-11eb-8bc0-7c80a1b27a9f.png)
+
+From left to right, top to bottom, the screen elements are:
+* The legend in the upper left hand corner shows the current controller state and sometimes error messages.
+* There are two program control buttons that change according to the program state
+    * The left button is generalized "Go", while the right is generalized "Stop"
+    * The idea is that the left one is always the "accelerator" and the right the "brake"
+    * If no program is loaded, neither button is active (both are greyed out)
+    * If a program is loaded but not running, the left button is green/Start
+    * When a program is running, the right button is red, labeled Pause
+    * Then a program is paused, the left one is green/Resume and the right is red/Stop
+    * When a program is running, hitting the "brake" (right button) pauses exection.  From there you can decide whether to Resume or Stop (go back to idle state).
+* The number to the right of the control buttons is the number of program lines that have been executed.
+* The number to the right of that is the program run time.
+* The button in the upper right corner is a drop-down menu with miscellaneous functions that are used infrequently.
+* "G54" shows the current work coordinate system - G54, G55, .. G59.  To change the coordinate system manually you can enter e.g. G55 in an MDI box.
+* The gray "DRO" boxes labeled X, Y, Z, A show the current work coordinate for that axis.  Touching a DRO box brings up an RPN calculator in which you can enter or calculate a new value.  Having entered the value, you can exit from the calculator with Cancel (does nothing), GoTo (rapid move to the new location) or Set (change the work coordinate to the new value).
+* You can use the calculator to quickly perform custom jogs, as follows: When the calculator starts, the current location is pre-entered.  If you type a number followed by + or -, the new number will be added to or subtracted from the current location. You can then hit GoTo.
+* The **Inch** or **mm** button shows the currently-active units, and toggles them if clicked.  Switching units also changes the jog increment selections.
 * **X=** **Y=** **Z=** set the axis work coordinate to the value in the number box above
-* **GoX** **GoY** **GoZ** rapid to the axis work coordinate to the value in the number box above
-* **X=0** **Y=0** **Z=0** set the axis work coordinate to 0
-* **GoX0** **GoY0** **GoZ0** rapid to work 0 for that axis
-* **0.001** .. **5** set the jog increment.
+* **X=0** **Y=0** **Z=0** **A=0** set the axis work coordinate to 0
+* **->X0** **->Y0** **->Z0** **->A0" rapid to work 0 for that axis
+* **0.001** .. **5** set the jog increment.  The selection of increments changes according to the units (Inch or mm).
 * The selector box between **Z+** and **Z-** shows the current jog increment, and, when clicked, permits the choice of some additional jog increments.
 * **X-** **X+** **Y-** **Y+** **Z-** **Z+** jog by the current increment.  You can jog continuously by selecting a large increment, starting the jog, then hitting **Stop** when it has gone far enough.
 * **MDI** sends the GCode command entered in the box to its left.  To resend that command, click **MDI** again.  There are MDI blocks so you can have two different GCode commands "queued up" for easy execution.
@@ -84,3 +95,6 @@ You can still use the full cncjs UI by browsing 'http://*host*:8000'. You can us
 * **Rfrsh** refreshes the file selector list.  That is useful if additional files are added to the watch directory.  Another way to refresh the file list is to reload the page.
 * **Load** reloads the GCode program from the currently selected file.  That is useful if you edit the file from another computer and want to pick up the new version.  To reload it directly from the file selector, you would have to first select a different file and then re-select the edited one (because of the way selector ".change" events work).
 * If the file selector is blank and there is GCode text in the GCode display text area, the GCode is probably a macro loaded by a different cncjs session.
+* The text box to the right of MDI shows the currently loaded GCode program.  You can scroll it by swiping in the box.  When a program is running, the currently executing line is highlighted.  The highlighted line is sometimes wrong due to the fact that the CNCjs server filters out blank lines, so the line that the controller reports is sometimes a little off compared to the raw text in the file.
+* The graphic window in the lower right shows the toolpath looking down from the top.  Feedrate (cutting) moves are shown in blue, with rapid moves in green.There is a crosshair reticle at the origin, and the current tool position is shown as a pink circle.  The numbers are the motion limits in X and Y.
+* The scrollable Serial Messages box shows selected serial messages from the controller, filtering out very common protocol and flow control messages that are generally uninteresting.  The messages that are shown include error and alarm messages, and responses to inquiries that you enter in MDI boxes.
diff --git a/package.json b/package.json
index 1f6de20..3f4f502 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cncjs-shopfloor-tablet",
-  "version": "1.0.4",
+  "version": "2.0.0",
   "description": "A simplified UI for cncjs optimized for tablet computers in a production (shop floor) environment.",
   "homepage": "https://github.com/cncjs/cncjs-shopfloor-tablet",
   "author": "Mitch Bradley",
diff --git a/src/app.js b/src/app.js
index 59872f2..2c96e98 100644
--- a/src/app.js
+++ b/src/app.js
@@ -100,7 +100,8 @@ controller.on('serialport:open', function(options) {
         // settings report, so interpreting the numbers from the first status
         // report is ambiguous.  Subsequent status reports are interpreted correctly.
         // We work around that by deferring status reports until the settings report.
-        controller.writeln('$$');
+        // I commented this out because of https://github.com/cncjs/cncjs-shopfloor-tablet/issues/20
+        // controller.writeln('$$');
     }
 
     root.location = '#/workspace';
@@ -148,24 +149,44 @@ cnc.goAxis = function(axis, coordinate) {
 }
 
 cnc.moveAxis = function(axis, field) {
-    coordinate = document.getElementById(field).value;
-    cnc.goAxis(axis, coordinate)
+    cnc.goAxis(axis, document.getElementById(field).value)
 }
 
+cnc.currentAxisPNum = function() {
+    return 'P' + String(Number(modal.wcs.substring(1)) - 53);
+}
+
+cnc.setAxisByValue = function(axis, coordinate) {
+    cnc.click();
+    controller.command('gcode', 'G10 L20 ' +  cnc.currentAxisPNum() + ' ' + axis + coordinate);
+}
 cnc.setAxis = function(axis, field) {
+    cnc.setAxisByValue(axis, document.getElementById(field).value);
+}
+cnc.MDIcmd = function(value) {
     cnc.click();
-    coordinate = document.getElementById(field).value;
-    controller.command('gcode', 'G10 L20 P1 ' + axis + coordinate);
+    controller.command('gcode', value);
 }
+
 cnc.MDI = function(field) {
-    cnc.click();
-    mdicmd = document.getElementById(field).value;
-    controller.command('gcode', mdicmd);
+    cnc.MDIcmd(document.getElementById(field).value);
 }
 
 cnc.zeroAxis = function(axis) {
-    cnc.click();
-    controller.command('gcode', 'G10 L20 P1 ' + axis + '0');
+    cnc.setAxisByValue(axis, 0);
+}
+
+cnc.toggleFullscreen = function() {
+    var messages = document.getElementById('messages');
+
+    if (document.fullscreenElement) {
+        document.exitFullscreen();
+        messages.rows = 2;
+    } else {
+        document.documentElement.requestFullscreen();
+        messages.rows = 4;
+    }
+    messages.scrollTop = messages.scrollHeight;
 }
 
 cnc.toggleUnits = function() {
@@ -178,6 +199,12 @@ cnc.toggleUnits = function() {
     // No need to fix the button label, as that will be done by the status watcher
 }
 
+cnc.btnSetDistance = function() {
+    cnc.click();
+    var distance = event.target.innerText;
+    $('[data-route="workspace"] select[data-name="select-distance"]').val(distance);
+}
+
 cnc.setDistance = function(distance) {
     cnc.click();
     $('[data-route="workspace"] select[data-name="select-distance"]').val(distance);
@@ -269,13 +296,20 @@ cnc.sendMove = function(cmd) {
     fn && fn();
 };
 
-controller.on('serialport:read', function(data) {
+    echoData = function(data) {
+        var messages = $('[data-route="workspace"] [id="messages"]');
+        messages.text(messages.text() + "\n" + data);
+        messages[0].scrollTop = messages[0].scrollHeight;
+    }
+
+    controller.on('serialport:read', function(data) {
     if (data.r) {
 	cnc.line++;
     }
     switch (cnc.controllerType) {
     case 'Marlin':
 	if (data.startsWith('echo:')) {
+            echoData(data);
 	    stateName = data.substring(5);
 	    if (machineWorkflow == MACHINE_IDLE) {
 		machineWorkflow = MACHINE_STALL;  // Disables Start button
@@ -284,17 +318,27 @@ controller.on('serialport:read', function(data) {
 	    stateName = 'Idle';
 	    machineWorkflow = MACHINE_IDLE;
 	} else if (data.startsWith('Error:')) {
+            echoData(data);
 	    stateName = data;
 	}
 	cnc.updateView();
 	break;
     case 'Smoothie':
     case 'Grbl':
+        if (!data.startsWith('ok')) {
+            echoData(data);
+        }
 	if (data.startsWith('error:')) {
 	    stateName = data;
 	}
 	cnc.updateView();
 	break;
+    case 'TinyG':
+        if (!data.startsWith('{"qr"')) {
+            echoData(data);
+        }
+
+        break;
     }
 });
 
@@ -303,7 +347,7 @@ controller.on('serialport:read', function(data) {
 // We track the $13 value by watching for the Grbl:settings event and by
 // watching for manual changes via serialport:write.  Upon initial connection,
 // we issue a settings request in serialport:open.
-var grblReportingUnits;  // initially undefined
+var grblReportingUnits = 0;  // initially undefined
 
 controller.on('serialport:write', function(data) {
 //    var style = 'font-weight: bold; line-height: 20px; padding: 2px 4px; border: 1px solid; color: #00529B; background: #BDE5F8';
@@ -552,6 +596,9 @@ controller.on('TinyG:state', function(data) {
 	return;
     }
 
+    if (sr.modal) {
+	Object.assign(modal, sr.modal);
+    }
     mpos = sr.mpos;
     wpos = sr.wpos;
     var INIT = 0, READY = 1, ALARM = 2, STOP = 3, END = 4, RUN = 5,
@@ -569,14 +616,8 @@ controller.on('TinyG:state', function(data) {
         } else {
             machineWorkflow =  MACHINE_STOP;
         }
-        if (sr.modal) {
-	    Object.assign(modal, sr.modal);
-        }
     } else if ([READY, STOP].indexOf(machineState) >= 0) {
         machineWorkflow = (machineState == STOP && workflowState == 'paused') ? MACHINE_HOLD : MACHINE_IDLE;
-        if (sr.modal) {
-	    Object.assign(modal, sr.modal);
-        }
     } else if ([RUN, CYCLE, HOMING, PROBE, JOG].indexOf(machineState) >= 0) {
         machineWorkflow = MACHINE_RUN;
         running = true;
@@ -681,6 +722,72 @@ cnc.doRightButton = function() {
 }
 
 
+    cnc.setJogSelector = function(units) {
+        var selector = $('[data-route="workspace"] select[data-name="select-distance"]');
+        selector.empty();
+        if (units == "Inch") {
+            $('[data-route="workspace"] [id="jog00"]').text('0.001');
+            $('[data-route="workspace"] [id="jog01"]').text('0.01');
+            $('[data-route="workspace"] [id="jog02"]').text('0.1');
+            $('[data-route="workspace"] [id="jog03"]').text('1');
+            $('[data-route="workspace"] [id="jog10"]').text('0.003');
+            $('[data-route="workspace"] [id="jog11"]').text('0.03');
+            $('[data-route="workspace"] [id="jog12"]').text('0.3');
+            $('[data-route="workspace"] [id="jog13"]').text('3');
+            $('[data-route="workspace"] [id="jog20"]').text('0.005');
+            $('[data-route="workspace"] [id="jog21"]').text('0.05');
+            $('[data-route="workspace"] [id="jog22"]').text('0.5');
+            $('[data-route="workspace"] [id="jog23"]').text('5');
+            selector.append($("<option/>").text('0.00025'));
+            selector.append($("<option/>").text('0.0005'));
+            selector.append($("<option/>").text('0.001'));
+            selector.append($("<option/>").text('0.003'));
+            selector.append($("<option/>").text('0.005'));
+            selector.append($("<option/>").text('0.01'));
+            selector.append($("<option/>").text('0.03'));
+            selector.append($("<option/>").text('0.05'));
+            selector.append($("<option/>").text('0.1'));
+            selector.append($("<option/>").text('0.3'));
+            selector.append($("<option/>").text('0.5'));
+            selector.append($("<option/>").text('1'));
+            selector.append($("<option/>").text('3'));
+            selector.append($("<option/>").text('5'));
+            selector.append($("<option/>").text('10'));
+            selector.append($("<option/>").text('30'));
+            selector.val('1');
+        } else  {
+            $('[data-route="workspace"] [id="jog00"]').text('0.01');
+            $('[data-route="workspace"] [id="jog01"]').text('0.1');
+            $('[data-route="workspace"] [id="jog02"]').text('1');
+            $('[data-route="workspace"] [id="jog03"]').text('10');
+            $('[data-route="workspace"] [id="jog10"]').text('0.03');
+            $('[data-route="workspace"] [id="jog11"]').text('0.3');
+            $('[data-route="workspace"] [id="jog12"]').text('3');
+            $('[data-route="workspace"] [id="jog13"]').text('30');
+            $('[data-route="workspace"] [id="jog20"]').text('0.05');
+            $('[data-route="workspace"] [id="jog21"]').text('0.5');
+            $('[data-route="workspace"] [id="jog22"]').text('5');
+            $('[data-route="workspace"] [id="jog23"]').text('50');
+            selector.append($("<option/>").text('0.005'));
+            selector.append($("<option/>").text('0.01'));
+            selector.append($("<option/>").text('0.03'));
+            selector.append($("<option/>").text('0.05'));
+            selector.append($("<option/>").text('0.1'));
+            selector.append($("<option/>").text('0.3'));
+            selector.append($("<option/>").text('0.5'));
+            selector.append($("<option/>").text('1'));
+            selector.append($("<option/>").text('3'));
+            selector.append($("<option/>").text('5'));
+            selector.append($("<option/>").text('10'));
+            selector.append($("<option/>").text('30'));
+            selector.append($("<option/>").text('50'));
+            selector.append($("<option/>").text('100'));
+            selector.append($("<option/>").text('300'));
+            selector.append($("<option/>").text('1000'));
+            selector.val('10');
+        }
+    }
+
 cnc.updateView = function() {
     // if (cnc.filename == '') {
     //	canStart = false;
@@ -693,7 +800,12 @@ cnc.updateView = function() {
     $('[data-route="workspace"] .axis-position .btn').prop('disabled', cannotClick);
     $('[data-route="workspace"] .axis-position .position').prop('disabled', cannotClick);
 
-    $('[data-route="workspace"] [id="units"]').text(modal.units == 'G21' ? 'mm' : 'Inch');
+    var newUnits = modal.units == 'G21' ? 'mm' : 'Inch';
+    if ($('[data-route="workspace"] [id="units"]').text() != newUnits) {
+        $('[data-route="workspace"] [id="units"]').text(newUnits);
+        cnc.setJogSelector(newUnits);
+    }
+    // $('[data-route="workspace"] [id="units"]').text(modal.units == 'G21' ? 'mm' : 'Inch');
     $('[data-route="workspace"] [id="units"]').prop('disabled', cnc.controllerType == 'Marlin');
 
     var green = '#86f686';
@@ -749,6 +861,8 @@ cnc.updateView = function() {
 	if (seconds < 10)
 	    seconds = '0' + seconds;
 	runTime = minutes + ':' + seconds;
+    } else {
+        runTime = "0:00";
     }
     $('[data-route="workspace"] [id="runtime"]').text(runTime);
 
@@ -778,17 +892,20 @@ cnc.updateView = function() {
     var dmpos = {
         x: Number(mpos.x).toFixed(digits),
         y: Number(mpos.y).toFixed(digits),
-        z: Number(mpos.z).toFixed(digits)
+        z: Number(mpos.z).toFixed(digits),
+        a: Number(mpos.a).toFixed(2)
     };
     var dwpos = {
         x: Number(wpos.x).toFixed(digits),
         y: Number(wpos.y).toFixed(digits),
-        z: Number(wpos.z).toFixed(digits)
+        z: Number(wpos.z).toFixed(digits),
+        a: Number(wpos.a).toFixed(2)
     };
 
     $('[data-route="workspace"] [id="wpos-x"]').prop('value', dwpos.x);
     $('[data-route="workspace"] [id="wpos-y"]').prop('value', dwpos.y);
     $('[data-route="workspace"] [id="wpos-z"]').prop('value', dwpos.z);
+    $('[data-route="workspace"] [id="wpos-a"]').prop('value', dwpos.a);
 }
 
 controller.on('gcode:load', function(name, gcode) {
@@ -862,7 +979,6 @@ cnc.runUserCommand = function(name) {
     });
 }
 
-
 cnc.getFileList = function() {
     jQuery.get("../api/watch/files", {token: cnc.token, path: watchPath}, function(data) {
         var selector = $('[data-route="workspace"] select[data-name="select-file"]');
@@ -1073,6 +1189,13 @@ jogClick = function(name) {
 // Reports whether a text input box has focus - see the next comment
 cnc.inputFocused = false;
 
+$('.mdifield').on('keyup', function(event){
+    if (event.key === 'Enter') {
+        cnc.MDIcmd(event.target.value);
+        event.target.blur();
+    }
+});
+
 $(document).on('keydown keyup', function(event){
     // When we are in a modal input field like the MDI text boxes
     // or the numeric entry boxes, disable keyboard jogging so those
diff --git a/src/css/app.css b/src/css/app.css
index e93fcef..e6547b1 100644
--- a/src/css/app.css
+++ b/src/css/app.css
@@ -7,6 +7,7 @@
 [data-route="workspace"] {
   padding: 5px;
   font-size: 14px;
+  background-color: #fff;
 }
 [data-route="workspace"] .btn[disabled] {
   opacity: .6;
@@ -50,7 +51,7 @@
   padding-top: 12px;
   padding-bottom: 12px;
 }
-[data-route="workspace"] .nav-panel .btn {
+[data-route="workspace"] .btn {
   width: 100%;
   padding-left: 0;
   padding-right: 0;
@@ -79,13 +80,14 @@
   padding: 5px 10px;
 }
 [data-route="workspace"] .axis-label {
-  text-align: left;
-  font-size: 20px;
+  text-align: right;
   padding: 0 8px;
+  font-size: 17px;
 }
 [data-route="workspace"] .position {
   width: 95%;
   text-align: right;
+  font-size: 16px;
 }
 [data-route="workspace"] .load {
   font-size: 12px;
@@ -96,7 +98,7 @@
     padding-top: 20px;
 }
 [data-route="workspace"] textarea {
-  font-size: 12px;
+  font-size: 9px;
   width: 99%;
   resize: none;
 }
@@ -151,67 +153,123 @@
 [data-route="workspace"] .control-pad .btn {
   width: 100%;
   padding-left: 0;
-  padding-right: 0;
+}
+[data-route="workspace"] .axis-position .inset {
+  padding-left: 15px;
 }
 
 [data-route="workspace"] .mdi .container-fluid {
   background-color: lavenderblush;
   padding-top: 12px;
-  padding-bottom: 12px;
+  padding-bottom: 0px;
+}
+
+[data-route="workspace"] #small-toolpath {
+  width: 180px;
+  height: 100px;
+}
+
+@media (min-width: 736px) {
+  [data-route="workspace"] {
+    font-size: 14px;
+  }
+  [data-route="workspace"] .dropdown-menu {
+    min-width: 180px;
+  }
+  [data-route="workspace"] .dropdown-menu>li>a .fa {
+    width: 14px;
+  }
+  [data-route="workspace"] .axis-label {
+    font-size: 24px;
+  }
+  [data-route="workspace"] .dropdown-menu {
+    font-size: 14px;
+  }
+  [data-route="workspace"] .btn,
+  [data-route="workspace"] .form-control {
+    font-size: 14px;
+    height: 30px;
+  }
+  [data-route="workspace"] .position {
+    font-size: 18px;
+  }
+  [data-route="workspace"] #jog-distance {
+    text-align-last: right;
+  }
+  [data-route="workspace"] textarea {
+    font-size: 9px;
+  }
+  [data-route="workspace"] #small-toolpath {
+      width: 180px;
+      height: 100px;
+  }
 }
 
 @media (min-width: 768px) {
   [data-route="workspace"] {
-    font-size: 20px;
+    font-size: 15px;
   }
   [data-route="workspace"] .dropdown-menu {
     min-width: 180px;
   }
   [data-route="workspace"] .dropdown-menu>li>a .fa {
-    width: 20px;
+    width: 15px;
   }
   [data-route="workspace"] .axis-label {
     font-size: 24px;
-    text-align: right;
   }
   [data-route="workspace"] .dropdown-menu {
-    font-size: 20px;
+    font-size: 15px;
   }
   [data-route="workspace"] .btn,
   [data-route="workspace"] .form-control {
-    font-size: 20px;
-    height: 40px;
+    font-size: 15px;
+    height: 30px;
+  }
+  [data-route="workspace"] .position {
+    font-size: 19px;
   }
   [data-route="workspace"] #jog-distance {
     text-align-last: right;
   }
   [data-route="workspace"] textarea {
-    font-size: 12px;
+    font-size: 11px;
+  }
+  [data-route="workspace"] #small-toolpath {
+      width: 230px;
+      height: 130px;
   }
 }
 @media (min-width: 992px) {
   [data-route="workspace"] {
-    font-size: 24px;
+    font-size: 20px;
   }
   [data-route="workspace"] .dropdown-menu {
     min-width: 200px;
   }
   [data-route="workspace"] .dropdown-menu>li>a .fa {
-    width: 24px;
+    width: 20px;
   }
   [data-route="workspace"] .axis-label {
     font-size: 28px;
   }
   [data-route="workspace"] .dropdown-menu {
-    font-size: 24px;
+    font-size: 20px;
   }
   [data-route="workspace"] .btn,
   [data-route="workspace"] .form-control {
+    font-size: 20px;
+    height: 40px;
+  }
+  [data-route="workspace"] .position {
     font-size: 24px;
-    height: 46px;
   }
   [data-route="workspace"] textarea {
-    font-size: 14px;
+    font-size: 12px;
+  }
+  [data-route="workspace"] #small-toolpath {
+      width: 250px;
+      height: 130px;
   }
 }
 @media (min-width: 1200px) {
@@ -235,7 +293,26 @@
     font-size: 28px;
     height: 52px;
   }
+  [data-route="workspace"] .position {
+    font-size: 28px;
+  }
   [data-route="workspace"] textarea {
-    font-size: 14px;
+    font-size: 15px;
+  }
+  [data-route="workspace"] #small-toolpath {
+      width: 300px;
+      height: 160px;
+  }
+}
+@media (min-width: 1500px) {
+  [data-route="workspace"] #small-toolpath {
+      width: 360px;
+      height: 180px;
+  }
+}
+@media (min-width: 1800px) {
+  [data-route="workspace"] #small-toolpath {
+      width: 460px;
+      height: 190px;
   }
 }
diff --git a/src/index.html b/src/index.html
index 4b2913e..cd33e13 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,6 +11,8 @@
 <title>CNCjs</title>
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="mobile-web-app-capable" content="yes">
 <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
 <link rel="shortcut icon" href="/favicon.ico">
 <link rel="stylesheet" type="text/css" href="vendor/normalize/normalize.css">
@@ -98,6 +100,9 @@
                                     <i class="fa fa-list"></i>
                                 </button>
                                 <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                                    <li>
+                                        <a role="menuitem" href="javascript:void(0)" onclick="cnc.toggleFullscreen()"><i class="fa fa-fullscreen"></i>&nbsp;Fullscreen</a>
+                                    </li>
                                     <li>
                                         <a role="menuitem" href="javascript:void(0)" onclick="cnc.controller.command('homing')"><i class="fa fa-home"></i>&nbsp;Homing</a>
                                     </li>
@@ -166,39 +171,37 @@
                 </div>
 
                 <div class="col-xs-11">
-                    <div class="col-xs-1">
-                        <div class="axis-label">X</div>
-                    </div>
-                    <div class="col-xs-2">
-                      <input type="number" class="form-control position" id="wpos-x" value="0.0000">
-                    </div>
-                    <div class="col-xs-1">
-                      <button type="button" class="btn btn-default" title="Set X to 0" onclick="cnc.zeroAxis('X')">
-                        X=0
-                      </button>
-                    </div>
-                    <div class="col-xs-1">
-                        <div class="axis-label">Y</div>
-                    </div>
-                    <div class="col-xs-2">
-                      <input type="number" class="form-control position" id="wpos-y" value="0.0000">
-                    </div>
-                    <div class="col-xs-1">
-                      <button type="button" class="btn btn-default" title="Set Y to 0" onclick="cnc.zeroAxis('Y')">
-                        Y=0
-                      </button>
+                    <div class="col-xs-3">
+                      <div class="col-xs-4 axis-label">X&nbsp;&nbsp;</div>
+                      <div class="col-xs-8">
+                        <input type="number" class="form-control position" id="wpos-x" value="0.0000">
+                      </div>
                     </div>
-                    <div class="col-xs-1">
-                        <div class="axis-label">Z</div>
+
+<!--                    <div class="col-xs-1"></div> -->
+
+                    <div class="col-xs-3">
+                      <div class="col-xs-4 axis-label">Y&nbsp;&nbsp;</div>
+                      <div class="col-xs-8">
+                        <input type="number" class="form-control position" id="wpos-y" value="0.0000">
+                      </div>
                     </div>
-                    <div class="col-xs-2">
-                      <input type="number" class="form-control position" id="wpos-z" value="0.0000">
+
+
+                    <div class="col-xs-3">
+                      <div class="col-xs-4 axis-label">Z&nbsp;&nbsp;</div>
+                      <div class="col-xs-8">
+                        <input type="number" class="form-control position" id="wpos-z" value="0.0000">
+                      </div>
                     </div>
-                    <div class="col-xs-1">
-                      <button type="button" class="btn btn-default" title="Set Z to 0" onclick="cnc.zeroAxis('Z')">
-                        Z=0
-                      </button>
+
+                    <div class="col-xs-3">
+                      <div class="col-xs-4 axis-label">A&nbsp;&nbsp;</div>
+                      <div class="col-xs-8">
+                        <input type="number" class="form-control position" id="wpos-a" value="0.0000">
+                      </div>
                     </div>
+
                 </div>
             </div>
             <div class="row no-gutter">
@@ -210,58 +213,56 @@
                    </button>
                 </div>
 
+                <div class="col-xs-1"></div>
                 <div class="col-xs-11">
+                    <div class="col-xs-1"></div>
                     <div class="col-xs-1">
-                    </div>
-                    <div class="col-xs-1">
-                      <button type="button" class="btn btn-default" title="Set X (G10 X0)" onclick="cnc.setAxis('X', 'wpos-x')">
-                        X=
-                      </button>
-                    </div>
-                    <div class="col-xs-1">
-                      <button type="button" class="btn btn-default" title="Move to X (G0 X0)" onclick="cnc.moveAxis('X', 'wpos-x')">
-                        GoX
+                      <button type="button" class="btn btn-default" title="Set X to 0" onclick="cnc.zeroAxis('X')">
+                        X=0
                       </button>
                     </div>
                     <div class="col-xs-1">
                       <button type="button" class="btn btn-default" title="Goto 0 in X" onclick="cnc.goAxis('X', 0)">
-                        GoX0
+                        &#8594;X0
                       </button>
                     </div>
-
                     <div class="col-xs-1">
                     </div>
+
                     <div class="col-xs-1">
-                      <button type="button" class="btn btn-default" title="Set Y (G10 Y0)" onclick="cnc.setAxis('Y', 'wpos-y')">
-                        Y=
+                      <button type="button" class="btn btn-default" title="Set Y to 0" onclick="cnc.zeroAxis('Y')">
+                        Y=0
                       </button>
                     </div>
                     <div class="col-xs-1">
-                      <button type="button" class="btn btn-default" title="Move to Y (G0 Y0)" onclick="cnc.moveAxis('Y', 'wpos-y')">
-                        GoY
+                      <button type="button" class="btn btn-default" title="Goto 0 in Y" onclick="cnc.goAxis('Y', 0)">
+                        &#8594;Y0
                       </button>
                     </div>
                     <div class="col-xs-1">
-                      <button type="button" class="btn btn-default" title="Goto 0 in Y" onclick="cnc.goAxis('Y', 0)">
-                        GoY0
-                      </button>
                     </div>
 
                     <div class="col-xs-1">
+                      <button type="button" class="btn btn-default" title="Set Z to 0" onclick="cnc.zeroAxis('Z')">
+                        Z=0
+                      </button>
                     </div>
                     <div class="col-xs-1">
-                      <button type="button" class="btn btn-default" title="Set Z (G10 Z0)" onclick="cnc.setAxis('Z', 'wpos-z')">
-                        Z=
+                      <button type="button" class="btn btn-default" title="Goto 0 in Z" onclick="cnc.goAxis('Z', 0)">
+                        &#8594;Z0
                       </button>
                     </div>
                     <div class="col-xs-1">
-                      <button type="button" class="btn btn-default" title="Move to Z (G0 Z0)" onclick="cnc.moveAxis('Z', 'wpos-z')">
-                         GoZ
+                    </div>
+
+                    <div class="col-xs-1">
+                      <button type="button" class="btn btn-default" title="Set A to 0" onclick="cnc.zeroAxis('A')">
+                        A=0
                       </button>
                     </div>
                     <div class="col-xs-1">
-                      <button type="button" class="btn btn-default" title="Goto 0 in Z" onclick="cnc.goAxis('Z', 0)">
-                        GoZ0
+                      <button type="button" class="btn btn-default" title="Goto 0 in A" onclick="cnc.goAxis('A', 0)">
+                        &#8594;A0
                       </button>
                     </div>
                 </div>
@@ -303,7 +304,8 @@
                         type="button"
                         class="btn btn-default set-distance"
                         title="Jog by 0.001"
-                        onclick="cnc.setDistance('0.001')"
+                        onclick="cnc.btnSetDistance()"
+                        id="jog00"
                     >
                         0.001
                     </button>
@@ -313,7 +315,8 @@
                         type="button"
                         class="btn btn-default set-distance"
                         title="Jog by 0.01"
-                        onclick="cnc.setDistance('0.01')"
+                        onclick="cnc.btnSetDistance()"
+                        id="jog01"
                     >
                         0.01
                     </button>
@@ -323,7 +326,8 @@
                         type="button"
                         class="btn btn-default set-distance"
                         title="Jog by 0.1"
-                        onclick="cnc.setDistance('0.1')"
+                        onclick="cnc.btnSetDistance()"
+                        id="jog02"
                     >
                         0.1
                     </button>
@@ -333,7 +337,8 @@
                         type="button"
                         class="btn btn-default set-distance"
                         title="Jog by 1"
-                        onclick="cnc.setDistance('1')"
+                        onclick="cnc.btnSetDistance()"
+                        id="jog03"
                     >
                         1
                     </button>
@@ -390,7 +395,8 @@
                         type="button"
                         class="btn btn-default set-distance"
                         title="Jog by 0.003"
-                        onclick="cnc.setDistance('0.003')"
+                        onclick="cnc.btnSetDistance()"
+                        id="jog10"
                     >
                         0.003
                     </button>
@@ -400,7 +406,8 @@
                         type="button"
                         class="btn btn-default set-distance"
                         title="Jog by 0.03"
-                        onclick="cnc.setDistance('0.03')"
+                        onclick="cnc.btnSetDistance()"
+                        id="jog11"
                     >
                         0.03
                     </button>
@@ -410,7 +417,8 @@
                         type="button"
                         class="btn btn-default set-distance"
                         title="Jog by 0.3"
-                        onclick="cnc.setDistance('0.3')"
+                        onclick="cnc.btnSetDistance()"
+                        id="jog12"
                     >
                         0.3
                     </button>
@@ -420,7 +428,8 @@
                         type="button"
                         class="btn btn-default set-distance"
                         title="Jog by 3"
-                        onclick="cnc.setDistance('3')"
+                        onclick="cnc.btnSetDistance()"
+                        id="jog13"
                     >
                         3
                     </button>
@@ -458,7 +467,8 @@
                         type="button"
                         class="btn btn-default set-distance"
                         title="Jog by 0.005"
-                        onclick="cnc.setDistance('0.005')"
+                        onclick="cnc.btnSetDistance()"
+                        id="jog20"
                     >
                         0.005
                     </button>
@@ -468,7 +478,8 @@
                         type="button"
                         class="btn btn-default set-distance"
                         title="Jog by 0.05"
-                        onclick="cnc.setDistance('0.05')"
+                        onclick="cnc.btnSetDistance()"
+                        id="jog21"
                     >
                         0.05
                     </button>
@@ -478,7 +489,8 @@
                         type="button"
                         class="btn btn-default set-distance"
                         title="Jog by 0.5"
-                        onclick="cnc.setDistance('0.5')"
+                        onclick="cnc.btnSetDistance()"
+                        id="jog22"
                     >
                         0.5
                     </button>
@@ -488,7 +500,8 @@
                         type="button"
                         class="btn btn-default set-distance"
                         title="Jog by 5"
-                        onclick="cnc.setDistance('5')"
+                        onclick="cnc.btnSetDistance()"
+                        id="jog23"
                     >
                         5
                     </button>
@@ -501,7 +514,7 @@
                 <div class="row no-gutter">
                     <div class="col-xs-5">
                         <div class="col-xs-10">
-                            <input type="text" class="form-control" id="mditext0" placeholder="GCode Command" onFocus="cnc.inputFocused=true" onBlur="cnc.inputFocused=false">
+                            <input type="text" class="form-control mdifield" id="mditext0" placeholder="GCode Command" onFocus="cnc.inputFocused=true" onBlur="cnc.inputFocused=false">
                         </div>
                         <div class="col-xs-2">
                             <button
@@ -514,7 +527,7 @@
                             </button>
                         </div>
                         <div class="col-xs-10">
-                            <input type="text" class="form-control" id="mditext1" placeholder="GCode Command" onFocus="cnc.inputFocused=true" onBlur="cnc.inputFocused=false">
+                            <input type="text" class="form-control mdifield" id="mditext1" placeholder="GCode Command" onFocus="cnc.inputFocused=true" onBlur="cnc.inputFocused=false">
                         </div>
                         <div class="col-xs-2">
                             <button
@@ -560,7 +573,10 @@
                         </textarea>
                     </div>
                     <div class="col-xs-3">
-		      <canvas id="small-toolpath" class="previewer"></canvas>
+		      <canvas id="small-toolpath" class="previewer" width="100%" height="100%"></canvas>
+                    </div>
+                    <div class="col-xs-12">
+                      <textarea class="messages" id="messages" rows="2" spellcheck="false" readonly>Serial Messages</textarea>
                     </div>
                 </div>
             </div>
@@ -592,11 +608,11 @@
   $.fn.numpad.defaults.onKeypadOpen = function() {cnc.inputFocused = true;};
   $.fn.numpad.defaults.onKeypadClose = function() {cnc.inputFocused = false;};
 
-
-$('document').ready(function() {
-    $('#wpos-x').numpad();
-    $('#wpos-y').numpad();
-    $('#wpos-z').numpad();
+  $('document').ready(function() {
+    $('#wpos-x').numpad('X');
+    $('#wpos-y').numpad('Y');
+    $('#wpos-z').numpad('Z');
+    $('#wpos-a').numpad('A');
     var root = window;
     root.cnc = {
         router: null,
diff --git a/src/jquery.numpad.css b/src/jquery.numpad.css
index dd80479..2bac65f 100644
--- a/src/jquery.numpad.css
+++ b/src/jquery.numpad.css
@@ -2,6 +2,35 @@
 .nmpd-target {cursor: pointer;}
 .nmpd-grid {position:absolute; left:50px; top:50px; z-index:5000; -khtml-user-select: none; padding:10px; width: 80%; height:80%; }
 .nmpd-overlay {z-index:4999;}
-input.nmpd-display {text-align: right; font-size: 40px; }
-.nmpd-btn {font-size: 30px; }
+input.nmpd-display,
+.nmpd-btn {font-size: 14px; font-weight: 400; }
+input.nmpd-display {text-align: right; }
 .form-control { height: 80%; }
+@media (min-width: 660px) {
+    .nmpd-btn,
+    input.nmpd-display    {font-size: 15px; }
+}
+@media (min-width: 736px) {
+    .nmpd-btn,
+    input.nmpd-display    {font-size: 18px; }
+}
+@media (min-width: 768px) {
+    .nmpd-btn,
+    input.nmpd-display    {font-size: 28px; }
+}
+
+@media (min-width: 992px) {
+    .nmpd-btn,
+    input.nmpd-display    {font-size: 32px; }
+}
+
+@media (min-width: 1200px) {
+    .nmpd-btn {font-size: 40px; }
+    input.nmpd-display    {font-size: 40px; }
+
+}
+@media (min-width: 1900px) {
+    .nmpd-btn {font-size: 50px; }
+    input.nmpd-display    {font-size: 50px; }
+
+}
diff --git a/src/jquery.numpad.js b/src/jquery.numpad.js
index a553e79..8144d61 100644
--- a/src/jquery.numpad.js
+++ b/src/jquery.numpad.js
@@ -14,523 +14,546 @@
  */
 (function($){
 
-	// From https://stackoverflow.com/questions/4963053/focus-to-input-without-scrolling
-	var cursorFocus = function(elem) {
-		var x = window.scrollX, y = window.scrollY;
-		elem.focus();
-		window.scrollTo(x, y);
-	}
+    // From https://stackoverflow.com/questions/4963053/focus-to-input-without-scrolling
+    var cursorFocus = function(elem) {
+	var x = window.scrollX, y = window.scrollY;
+	elem.focus();
+	window.scrollTo(x, y);
+    }
 	
-    $.fn.numpad=function(options){
-    	
+    $.fn.numpad=function(axis, options){
     	if (typeof options == 'string'){
-    		var nmpd = $.data(this[0], 'numpad');
-    		if (!nmpd) throw "Cannot perform '" + options + "' on a numpad prior to initialization!";
-    		switch (options){
-    			case 'open': 
-    				nmpd.open(nmpd.options.target ? nmpd.options.target : this.first());
-    				break;
-    			case 'close':
-    				nmpd.open(nmpd.options.target ? nmpd.options.target : this.first());
-    				break;
-    		}
-    		return this;
-    	} 
+    	    var nmpd = $.data(this[0], 'numpad');
+    	    if (!nmpd) throw "Cannot perform '" + options + "' on a numpad prior to initialization!";
+    	    switch (options){
+    	    case 'open': 
+    		nmpd.open(nmpd.options.target ? nmpd.options.target : this.first());
+    		break;
+    	    case 'close':
+    		nmpd.open(nmpd.options.target ? nmpd.options.target : this.first());
+    		break;
+    	    }
+    	    return this;
+    	}
     	
-		// Apply the specified options overriding the defaults
-		options = $.extend({}, $.fn.numpad.defaults, options);
-		
-		// Create a numpad. One for all elements in this jQuery selector.
-		// Since numpad() can be called on multiple elements on one page, each call will create a unique numpad id.
-		var id = 'nmpd' + ($('.nmpd-wrapper').length + 1);
-		var nmpd = {};
-		return this.each(function(){
-			
-			// If an element with the generated unique numpad id exists, the numpad had been instantiated already.
-			// Otherwise create a new one!
-			if ($('#'+id).length == 0) {
-				/** @var nmpd jQuery object containing the entire numpad */
-				nmpd = $('<div id="' + id + '"></div>').addClass('nmpd-wrapper');
-				nmpd.options = options;
-				/** @var display jQuery object representing the display of the numpad (typically an input field) */
-				nmpd.s0 =  $(options.displayTpl).addClass('nmpd-display');
-				nmpd.s1 =  $(options.displayTpl).addClass('nmpd-display');
-				nmpd.s2 =  $(options.displayTpl).addClass('nmpd-display');
-				nmpd.display = $(options.displayTpl).addClass('nmpd-display');
-				nmpd.autopush = true;
-				/** @var grid jQuery object containing the grid for the numpad: the display, the buttons, etc. */
-				var table = $(options.gridTpl).addClass('nmpd-grid');
-				nmpd.grid = table;
-				table.append($(options.rowTpl)
-					     .append($(options.displayCellTpl).append(nmpd.s2).append($('<input type="hidden" class="dirty" value="0"></input>')))
-					     .append($(options.cellTpl).append($(options.buttonFunctionTpl).html('Roll').addClass('roll').click(function(){
-						 nmpd.roll();
-					     })))
-					     .append($(options.cellTpl).append($(options.buttonFunctionTpl).html('SIN').addClass('sin').click(function(){
-						 nmpd.sin();
-					     })))
-					    );
-				table.append($(options.rowTpl)
-					     .append($(options.displayCellTpl).append(nmpd.s1).append($('<input type="hidden" class="dirty" value="0"></input>')))
-					     .append($(options.cellTpl).append($(options.buttonFunctionTpl).html('Drop').addClass('drop').click(function(){
-						 nmpd.drop();
-					     })))
-					     .append($(options.cellTpl).append($(options.buttonFunctionTpl).html('COS').addClass('cos').click(function(){
-						 nmpd.cos();
-					     })))
-					    );
-				table.append($(options.rowTpl)
-					     .append($(options.displayCellTpl).append(nmpd.s0).append($('<input type="hidden" class="dirty" value="0"></input>')))
-					     .append($(options.cellTpl).append($(options.buttonFunctionTpl).html('Swap').addClass('swap').click(function(){
-						 nmpd.swap();
-					     })))
-					     .append($(options.cellTpl).append($(options.buttonFunctionTpl).html('TAN').addClass('tan').click(function(){
-						 nmpd.tan();
-					     })))
-					    );
-				table.append($(options.rowTpl)
-					     .append($(options.displayCellTpl).append(nmpd.display).append($('<input type="hidden" class="dirty" value="0"></input>')))
-					     .append($(options.cellTpl).append($(options.buttonFunctionTpl).html('Enter').addClass('enter').click(function(){
-						 nmpd.push();
-					     })))
-					     .append($(options.cellTpl).append($(options.buttonFunctionTpl).html('SQRT').addClass('sqrt').click(function(){
-						 nmpd.sqrt();
-					     })))
-					    );
-				// Create rows and columns of the the grid with appropriate buttons
-				table.append(
-					$(options.rowTpl)
-						.append($(options.cellTpl).append($(options.buttonNumberTpl).html(7).addClass('numero')))
-						.append($(options.cellTpl).append($(options.buttonNumberTpl).html(8).addClass('numero')))
-						.append($(options.cellTpl).append($(options.buttonNumberTpl).html(9).addClass('numero')))
-						.append($(options.cellTpl).append($(options.buttonFunctionTpl).html(options.textDelete).addClass('del').click(function(){
-							nmpd.setValue(nmpd.getValue().toString().substring(0,nmpd.getValue().toString().length - 1));
-						})))
-						.append($(options.cellTpl).append($(options.buttonFunctionTpl).html('+').addClass('plus').click(function(){
-							nmpd.plus();
-						})))
-					).append(
-					$(options.rowTpl)
-						.append($(options.cellTpl).append($(options.buttonNumberTpl).html(4).addClass('numero')))
-						.append($(options.cellTpl).append($(options.buttonNumberTpl).html(5).addClass('numero')))
-						.append($(options.cellTpl).append($(options.buttonNumberTpl).html(6).addClass('numero')))
-						.append($(options.cellTpl).append($(options.buttonFunctionTpl).html(options.textClear).addClass('clear').click(function(){
-							nmpd.setValue('');
-						})))
-						.append($(options.cellTpl).append($(options.buttonFunctionTpl).html('-').addClass('minus').click(function(){
-							nmpd.minus();
-						})))
+	// Apply the specified options overriding the defaults
+	options = $.extend({}, $.fn.numpad.defaults, options);
 
-					).append(
-					$(options.rowTpl)
-						.append($(options.cellTpl).append($(options.buttonNumberTpl).html(1).addClass('numero')))
-						.append($(options.cellTpl).append($(options.buttonNumberTpl).html(2).addClass('numero')))
-						.append($(options.cellTpl).append($(options.buttonNumberTpl).html(3).addClass('numero')))
-						.append($(options.cellTpl).append($(options.buttonFunctionTpl).html(options.textCancel).addClass('cancel').click(function(){
-							nmpd.close(false);
-						})))
-						.append($(options.cellTpl).append($(options.buttonFunctionTpl).html('*').addClass('times').click(function(){
-							nmpd.times();
-						})))
-					).append(
-					$(options.rowTpl)
-						.append($(options.cellTpl).append($(options.buttonFunctionTpl).html('&plusmn;').addClass('neg').click(function(){
-							nmpd.autopush = false;
-							nmpd.setValue(nmpd.getValue() * (-1));
-						})))
-						.append($(options.cellTpl).append($(options.buttonNumberTpl).html(0).addClass('numero')))
-						.append($(options.cellTpl).append($(options.buttonFunctionTpl).html(options.decimalSeparator).addClass('sep').click(function(){
-							var val;
-							if ($('#'+id+' .dirty').val() == '0'){
-								val = '0';
-							} else {
-								val = nmpd.getValue() ? nmpd.getValue().toString() : '0';
-							}
+	// Create a numpad. One for all elements in this jQuery selector.
+	// Since numpad() can be called on multiple elements on one page, each call will create a unique numpad id.
+	var id = 'nmpd' + ($('.nmpd-wrapper').length + 1);
+	var nmpd = { };
+	return this.each(function(){
 
-							nmpd.setValue(val + options.decimalSeparator);
-						})))
-						.append($(options.cellTpl).append($(options.buttonFunctionTpl).html(options.textDone).addClass('done')))
-						.append($(options.cellTpl).append($(options.buttonFunctionTpl).html('/').addClass('divide').click(function(){
-							nmpd.divide();
-						})))
-					);
-				// Create the backdrop of the numpad - an overlay for the main page
-				nmpd.append($(options.backgroundTpl).addClass('nmpd-overlay').click(function(){nmpd.close(false);}));
-				// Append the grid table to the nmpd element
-				nmpd.append(table);
-				
-				// Hide buttons to be hidden
-				if (options.hidePlusMinusButton){
-					nmpd.find('.neg').hide();
-				}
-				if (options.hideDecimalButton){
-					nmpd.find('.sep').hide();
-				}
-				
-				// Attach events
-				if (options.onKeypadCreate){
-					nmpd.on('numpad.create', options.onKeypadCreate);
-				}
-				if (options.onKeypadOpen){
-					nmpd.on('numpad.open', options.onKeypadOpen);
-				}
-				if (options.onKeypadClose){
-					nmpd.on('numpad.close', options.onKeypadClose);
-				}
-				if (options.onChange){
-					nmpd.on('numpad.change', options.onChange);
-				}
-				(options.appendKeypadTo ? options.appendKeypadTo : $(document.body)).append(nmpd);   
-				
-				// Special event for the numeric buttons
-				$('#'+id+' .numero').bind('click', function(){
-					var val;
-					if ($('#'+id+' .dirty').val() == '0'){
-						val = $(this).text();
-					} else {
-						val = nmpd.getValue() ? nmpd.getValue().toString() + $(this).text() : $(this).text();
-					}
-					nmpd.setValue(val);	
-				});
-				
-				// Finally, once the numpad is completely instantiated, trigger numpad.create
-				nmpd.trigger('numpad.create');
-			} else {
-				// If the numpad was already instantiated previously, just load it into the nmpd variable
-				//nmpd = $('#'+id);
-				//nmpd.display = $('#'+id+' input.nmpd-display');	
-			}
-			
-			$.data(this, 'numpad', nmpd);
-			
-			// Make the target element readonly and save the numpad id in the data-numpad property. Also add the special nmpd-target CSS class.
-			$(this).attr("readonly", true).attr('data-numpad', id).addClass('nmpd-target');
-			
-			// Register a listener to open the numpad on the event specified in the options
-			$(this).bind(options.openOnEvent,function(){
-				nmpd.open(options.target ? options.target : $(this));
-			});
-			
-			// Define helper functions
-			
-			/**
-			* Gets the current value displayed in the numpad
-			* @return string | number
-			*/
-			nmpd.getValue = function(){
-				return isNaN(nmpd.display.val()) ? 0 : nmpd.display.val();
-			};
-			
-			/**
-			* Sets all the dirty bits to 0 so the next number will overwrite the display
-			*/
-			nmpd.clean = function(){
-				nmpd.find('.dirty').val('0');
-			};
+	    // If an element with the generated unique numpad id exists, the numpad had been instantiated already.
+	    // Otherwise create a new one!
+	    if ($('#'+id).length == 0) {
+		/** @var nmpd jQuery object containing the entire numpad */
+		nmpd = $('<div id="' + id + '"></div>').addClass('nmpd-wrapper');
+		nmpd.options = options;
+                nmpd.options.textDone = axis + 'Done';
+		/** @var display jQuery object representing the display of the numpad (typically an input field) */
+		nmpd.s0 =  $(options.displayTpl).addClass('nmpd-display');
+		nmpd.s1 =  $(options.displayTpl).addClass('nmpd-display');
+		nmpd.s2 =  $(options.displayTpl).addClass('nmpd-display');
+		nmpd.display = $(options.displayTpl).addClass('nmpd-display');
+		nmpd.autopush = true;
+		/** @var grid jQuery object containing the grid for the numpad: the display, the buttons, etc. */
+		var table = $(options.gridTpl).addClass('nmpd-grid');
+		nmpd.grid = table;
+		table.append($(options.rowTpl)
+			     .append($(options.displayCellTpl).append(nmpd.s2).append($('<input type="hidden" class="dirty" value="0"></input>')))
+			     .append($(options.cellTpl).append($(options.buttonFunctionTpl).html('Roll').addClass('roll').click(function(){
+				 nmpd.roll();
+			     })))
+			     .append($(options.cellTpl).append($(options.buttonFunctionTpl).html('UnRoll').addClass('unroll').click(function(){
+				 nmpd.unroll();
+			     })))
+		             .append($(options.cellTpl).append($(options.buttonFunctionTpl).html('SIN').addClass('sin').click(function(){
+				 nmpd.sin();
+			     })))
+			    );
+		table.append($(options.rowTpl)
+			     .append($(options.displayCellTpl).append(nmpd.s1).append($('<input type="hidden" class="dirty" value="0"></input>')))
+			     .append($(options.cellTpl).append($(options.buttonFunctionTpl).html('Swap').addClass('swap').click(function(){
+				 nmpd.swap();
+			     })))
+			     .append($(options.cellTpl))
+			     .append($(options.cellTpl).append($(options.buttonFunctionTpl).html('COS').addClass('cos').click(function(){
+				 nmpd.cos();
+			     })))
+			    );
+		table.append($(options.rowTpl)
+			     .append($(options.displayCellTpl).append(nmpd.s0).append($('<input type="hidden" class="dirty" value="0"></input>')))
+			     .append($(options.cellTpl).append($(options.buttonFunctionTpl).html('Enter').addClass('enter').click(function(){
+				 nmpd.push();
+			     })))
+			     .append($(options.cellTpl).append($(options.buttonFunctionTpl).html('Drop').addClass('drop').click(function(){
+				 nmpd.drop();
+			     })))
+			     .append($(options.cellTpl).append($(options.buttonFunctionTpl).html('TAN').addClass('tan').click(function(){
+				 nmpd.tan();
+			     })))
+			    );
+		table.append($(options.rowTpl)
+			     .append($(options.displayCellTpl).append(nmpd.display).append($('<input type="hidden" class="dirty" value="0"></input>')))
+			     .append($(options.cellTpl).append($(options.buttonFunctionTpl).html(options.textDelete).addClass('del').click(function(){
+			         nmpd.setValue(nmpd.getValue().toString().substring(0,nmpd.getValue().toString().length - 1));
+			     })))
+			     .append($(options.cellTpl).append($(options.buttonFunctionTpl).html(options.textClear).addClass('clear').click(function(){
+			         nmpd.setValue('');
+			     })))
+			     .append($(options.cellTpl).append($(options.buttonFunctionTpl).html('SQRT').addClass('sqrt').click(function(){
+				 nmpd.sqrt();
+			     })))
+			    );
+		// Create rows and columns of the the grid with appropriate buttons
+		table.append(
+		    $(options.rowTpl)
+			.append($(options.cellTpl).append($(options.buttonNumberTpl).html(7).addClass('numero')))
+			.append($(options.cellTpl).append($(options.buttonNumberTpl).html(8).addClass('numero')))
+			.append($(options.cellTpl).append($(options.buttonNumberTpl).html(9).addClass('numero')))
+			.append($(options.cellTpl).append($(options.buttonFunctionTpl).html('&nbsp;&nbsp;&nbsp;&nbsp;+&nbsp;&nbsp;&nbsp;&nbsp;').addClass('plus').click(function(){
+			    nmpd.plus();
+			})))
 
-			/**
-			* Sets the display value of the numpad
-			* @param string value
-			* @return jQuery object nmpd
-			*/
-			nmpd.setValue = function(value){
-				if (nmpd.display.attr('maxLength') < value.toString().length) value = value.toString().substr(0, nmpd.display.attr('maxLength'));
-				if (nmpd.autopush) {
-					nmpd.push();
-				}
-				nmpd.display.val(value);
-				nmpd.find('.dirty').val('1');
-				nmpd.trigger('numpad.change', [value]);
-				return nmpd;
-			};
-			
-			/**
-			* Push the display value onto the stack
-			* @return jQuery object nmpd
-			*/
-			nmpd.push = function(){
-				nmpd.s2.val(nmpd.s1.val());
-				nmpd.s1.val(nmpd.s0.val());
-				nmpd.s0.val(nmpd.getValue());
-				nmpd.clean();
-				nmpd.autopush = false;
-				nmpd.display.val('');
-				return nmpd;
-			};
+		).append(
+		    $(options.rowTpl)
+			.append($(options.cellTpl).append($(options.buttonNumberTpl).html(4).addClass('numero')))
+			.append($(options.cellTpl).append($(options.buttonNumberTpl).html(5).addClass('numero')))
+			.append($(options.cellTpl).append($(options.buttonNumberTpl).html(6).addClass('numero')))
+			.append($(options.cellTpl).append($(options.buttonFunctionTpl).html('&nbsp;&nbsp;-&nbsp;&nbsp;').addClass('minus').click(function(){
+			    nmpd.minus();
+			})))
+                        .append($(options.exitCellTpl).append($(options.buttonFunctionTpl).html('GoTo '+axis).addClass('goto').click(function(){
+                            cnc.goAxis(axis, nmpd.getValue());
+			    nmpd.close(false);
+                        })))
+		).append(
+		    $(options.rowTpl)
+			.append($(options.cellTpl).append($(options.buttonNumberTpl).html(1).addClass('numero')))
+			.append($(options.cellTpl).append($(options.buttonNumberTpl).html(2).addClass('numero')))
+			.append($(options.cellTpl).append($(options.buttonNumberTpl).html(3).addClass('numero')))
+			.append($(options.cellTpl).append($(options.buttonFunctionTpl).html('&nbsp;&nbsp;*&nbsp;&nbsp;').addClass('times').click(function(){
+			    nmpd.times();
+			})))
+                        .append($(options.exitCellTpl).append($(options.buttonFunctionTpl).html(options.textCancel).addClass('cancel').click(function(){
+			    nmpd.close(false);
+			})))
+		).append(
+		    $(options.rowTpl)
+			.append($(options.cellTpl).append($(options.buttonFunctionTpl).html('&plusmn;').addClass('neg').click(function(){
+			    nmpd.autopush = false;
+			    nmpd.setValue(nmpd.getValue() * (-1));
+			})))
+			.append($(options.cellTpl).append($(options.buttonNumberTpl).html(0).addClass('numero')))
+			.append($(options.cellTpl).append($(options.buttonFunctionTpl).html(options.decimalSeparator).addClass('sep').click(function(){
+			    var val;
+			    if ($('#'+id+' .dirty').val() == '0'){
+				val = '0';
+			    } else {
+				val = nmpd.getValue() ? nmpd.getValue().toString() : '0';
+			    }
 
-			/**
-			* Pop the stack
-			* @return the previous top of stack
-			*/
-			nmpd.pop = function(){
-				var ret = nmpd.s0.val();
-				nmpd.s0.val(nmpd.s1.val());
-				nmpd.s1.val(nmpd.s2.val());
-				// nmpd.s2.val('');  // Last on stack duplicates on pop
-				return ret;
-			}
+			    nmpd.setValue(val + options.decimalSeparator);
+			})))
+			.append($(options.cellTpl).append($(options.buttonFunctionTpl).html('&nbsp;&nbsp;/&nbsp;&nbsp;').addClass('divide').click(function(){
+			    nmpd.divide();
+			})))
+                        .append($(options.exitCellTpl).append($(options.buttonFunctionTpl).html('Set '+axis).addClass('set').click(function(){
+                            cnc.setAxisByValue(axis, nmpd.getValue());
+			    nmpd.close(false);
+                        })
+))
+		);
+		// Create the backdrop of the numpad - an overlay for the main page
+		nmpd.append($(options.backgroundTpl).addClass('nmpd-overlay').click(function(){nmpd.close(false);}));
+		// Append the grid table to the nmpd element
+		nmpd.append(table);
+		
+		// Hide buttons to be hidden
+		if (options.hidePlusMinusButton){
+		    nmpd.find('.neg').hide();
+		}
+		if (options.hideDecimalButton){
+		    nmpd.find('.sep').hide();
+		}
+		
+		// Attach events
+		if (options.onKeypadCreate){
+		    nmpd.on('numpad.create', options.onKeypadCreate);
+		}
+		if (options.onKeypadOpen){
+		    nmpd.on('numpad.open', options.onKeypadOpen);
+		}
+		if (options.onKeypadClose){
+		    nmpd.on('numpad.close', options.onKeypadClose);
+		}
+		if (options.onChange){
+		    nmpd.on('numpad.change', options.onChange);
+		}
+		(options.appendKeypadTo ? options.appendKeypadTo : $(document.body)).append(nmpd);   
+		
+		// Special event for the numeric buttons
+		$('#'+id+' .numero').bind('click', function(){
+		    var val;
+		    if ($('#'+id+' .dirty').val() == '0'){
+			val = $(this).text();
+		    } else {
+			val = nmpd.getValue() ? nmpd.getValue().toString() + $(this).text() : $(this).text();
+		    }
+		    nmpd.setValue(val);	
+		});
+		
+		// Finally, once the numpad is completely instantiated, trigger numpad.create
+		nmpd.trigger('numpad.create');
+	    } else {
+		// If the numpad was already instantiated previously, just load it into the nmpd variable
+		//nmpd = $('#'+id);
+		//nmpd.display = $('#'+id+' input.nmpd-display');	
+	    }
+	    
+	    $.data(this, 'numpad', nmpd);
+	    
+	    // Make the target element readonly and save the numpad id in the data-numpad property. Also add the special nmpd-target CSS class.
+	    $(this).attr("readonly", true).attr('data-numpad', id).addClass('nmpd-target');
+	    
+	    // Register a listener to open the numpad on the event specified in the options
+	    $(this).bind(options.openOnEvent,function(){
+		nmpd.open(options.target ? options.target : $(this));
+	    });
+	    
+	    // Define helper functions
+	    
+	    /**
+	     * Gets the current value displayed in the numpad
+	     * @return string | number
+	     */
+	    nmpd.getValue = function(){
+		return isNaN(nmpd.display.val()) ? 0 : nmpd.display.val();
+	    };
+	    
+	    /**
+	     * Sets all the dirty bits to 0 so the next number will overwrite the display
+	     */
+	    nmpd.clean = function(){
+		nmpd.find('.dirty').val('0');
+	    };
 
-			/**
-			* Rotate the stack through the display value
-			* @return jQuery object nmpd
-			*/
-			nmpd.roll = function(){
-				var tmp = nmpd.getValue();
-				nmpd.drop();
-				nmpd.s2.val(tmp);
-				return nmpd;
-			}
+	    /**
+	     * Sets the display value of the numpad
+	     * @param string value
+	     * @return jQuery object nmpd
+	     */
+	    nmpd.setValue = function(value){
+		if (nmpd.display.attr('maxLength') < value.toString().length) value = value.toString().substr(0, nmpd.display.attr('maxLength'));
+		if (nmpd.autopush) {
+		    nmpd.push();
+		}
+		nmpd.display.val(value);
+		nmpd.find('.dirty').val('1');
+		nmpd.trigger('numpad.change', [value]);
+		return nmpd;
+	    };
+	    
+	    /**
+	     * Push the display value onto the stack
+	     * @return jQuery object nmpd
+	     */
+	    nmpd.push = function(){
+		nmpd.s2.val(nmpd.s1.val());
+		nmpd.s1.val(nmpd.s0.val());
+		nmpd.s0.val(nmpd.getValue());
+		nmpd.clean();
+		nmpd.autopush = false;
+		nmpd.display.val('');
+		return nmpd;
+	    };
 
-			/**
-			* Exchange the top of the stack with the display value
-			* @return jQuery object nmpd
-			*/
-			nmpd.swap = function(){
-				var tmp = nmpd.s0.val();
-				nmpd.s0.val(nmpd.getValue());
-				nmpd.autopush = false;
-				nmpd.setValue(tmp);
-				nmpd.clean();
-				nmpd.autopush = true;
-				return nmpd;
-			}
+	    /**
+	     * Pop the stack
+	     * @return the previous top of stack
+	     */
+	    nmpd.pop = function(){
+		var ret = nmpd.s0.val();
+		nmpd.s0.val(nmpd.s1.val());
+		nmpd.s1.val(nmpd.s2.val());
+		// nmpd.s2.val('');  // Last on stack duplicates on pop
+		return ret;
+	    }
 
-			/**
-			* Pop the stack into the display value
-			* @return jQuery object nmpd
-			*/
-			nmpd.drop = function(){
-				nmpd.autopush = false;
-				nmpd.setValue(nmpd.pop());
-				nmpd.clean();
-				nmpd.autopush = true;
-				return nmpd;
-			}
+	    /**
+	     * Rotate the stack through the display value
+	     * @return jQuery object nmpd
+	     */
+	    nmpd.roll = function(){
+		var tmp = nmpd.getValue();
+		nmpd.drop();
+		nmpd.s2.val(tmp);
+		return nmpd;
+	    }
 
-			/**
-			* Round to the indicated precision
-			* @param number to round
-			* @param number of postdecimal digits
-			* @return jQuery object nmpd
-			*/
-			nmpd.round = function(number, precision) {
-				var shift = function (number, exponent) {
-					var numArray = ("" + number).split("e");
-					return +(numArray[0] + "e" + (numArray[1] ? (+numArray[1] + exponent) : exponent));
-				};
-				return shift(Math.round(shift(number, +precision)), -precision);
-			}
+	    /**
+	     * UnRotate the stack through the display value
+	     * @return jQuery object nmpd
+	     */
+	    nmpd.unroll = function(){
+		var tmp = nmpd.s2.val();
+		nmpd.push();
+		nmpd.setValue(tmp);
+		return nmpd;
+	    }
+	    /**
+	     * Exchange the top of the stack with the display value
+	     * @return jQuery object nmpd
+	     */
+	    nmpd.swap = function(){
+		var tmp = nmpd.s0.val();
+		nmpd.s0.val(nmpd.getValue());
+		nmpd.autopush = false;
+		nmpd.setValue(tmp);
+		nmpd.clean();
+		nmpd.autopush = true;
+		return nmpd;
+	    }
 
-			/**
-			* Set the display value to the given value and arrange for the next number to push
-			* @param value
-			* @return jQuery object nmpd
-			*/
-			nmpd.calcValue = function(value) {
-				nmpd.autopush = false;
-				nmpd.setValue(nmpd.round(value, nmpd.options.precision));
-				nmpd.clean();
-				nmpd.autopush = true;
-				return nmpd;
-			};
+	    /**
+	     * Pop the stack into the display value
+	     * @return jQuery object nmpd
+	     */
+	    nmpd.drop = function(){
+		nmpd.autopush = false;
+		nmpd.setValue(nmpd.pop());
+		nmpd.clean();
+		nmpd.autopush = true;
+		return nmpd;
+	    }
 
-			/**
-			* Convert degrees to radians
-			* @param degrees
-			* @return radians
-			*/
-			nmpd.radians = function() {
-				return Number(nmpd.getValue()) / 180. * Math.PI;
-			}
+	    /**
+	     * Round to the indicated precision
+	     * @param number to round
+	     * @param number of postdecimal digits
+	     * @return jQuery object nmpd
+	     */
+	    nmpd.round = function(number, precision) {
+		var shift = function (number, exponent) {
+		    var numArray = ("" + number).split("e");
+		    return +(numArray[0] + "e" + (numArray[1] ? (+numArray[1] + exponent) : exponent));
+		};
+		return shift(Math.round(shift(number, +precision)), -precision);
+	    }
 
-			/**
-			* Replace the display value with its square root
-			* @return jQuery object nmpd
-			*/
-			nmpd.sqrt = function(){
-				return nmpd.calcValue(Math.sqrt(nmpd.getValue()));
-			};
+	    /**
+	     * Set the display value to the given value and arrange for the next number to push
+	     * @param value
+	     * @return jQuery object nmpd
+	     */
+	    nmpd.calcValue = function(value) {
+		nmpd.autopush = false;
+		nmpd.setValue(nmpd.round(value, nmpd.options.precision));
+		nmpd.clean();
+		nmpd.autopush = true;
+		return nmpd;
+	    };
 
-			/**
-			* Replace the display value (in degrees) with its cosine
-			* @return jQuery object nmpd
-			*/
-			nmpd.cos = function(){
-				return nmpd.calcValue(Math.cos(nmpd.radians()));
-			};
+	    /**
+	     * Convert degrees to radians
+	     * @param degrees
+	     * @return radians
+	     */
+	    nmpd.radians = function() {
+		return Number(nmpd.getValue()) / 180. * Math.PI;
+	    }
 
-			/**
-			* Replace the display value (in degrees) with its sine
-			* @return jQuery object nmpd
-			*/
-			nmpd.sin = function(){
-				return nmpd.calcValue(Math.sin(nmpd.radians()));
-			};
+	    /**
+	     * Replace the display value with its square root
+	     * @return jQuery object nmpd
+	     */
+	    nmpd.sqrt = function(){
+		return nmpd.calcValue(Math.sqrt(nmpd.getValue()));
+	    };
 
-			/**
-			* Replace the display value (in degrees) with its tangent
-			* @return jQuery object nmpd
-			*/
-			nmpd.tan = function(){
-				return nmpd.calcValue(Math.tan(nmpd.radians()));
-			};
+	    /**
+	     * Replace the display value (in degrees) with its cosine
+	     * @return jQuery object nmpd
+	     */
+	    nmpd.cos = function(){
+		return nmpd.calcValue(Math.cos(nmpd.radians()));
+	    };
 
-			/**
-			* Add the display value to the top of the stack
-			* @return jQuery object nmpd
-			*/
-			nmpd.plus = function(){
-				return nmpd.calcValue(Number(nmpd.pop()) + Number(nmpd.getValue()));
-			};
+	    /**
+	     * Replace the display value (in degrees) with its sine
+	     * @return jQuery object nmpd
+	     */
+	    nmpd.sin = function(){
+		return nmpd.calcValue(Math.sin(nmpd.radians()));
+	    };
 
-			/**
-			* Subtract the display value from the top of the stack
-			* @return jQuery object nmpd
-			*/
-			nmpd.minus = function(){
-			    return nmpd.calcValue(Number(nmpd.pop()) - Number(nmpd.getValue()));
-			};
+	    /**
+	     * Replace the display value (in degrees) with its tangent
+	     * @return jQuery object nmpd
+	     */
+	    nmpd.tan = function(){
+		return nmpd.calcValue(Math.tan(nmpd.radians()));
+	    };
 
-			/**
-			* Multiply the display value by the top of the stack
-			* @return jQuery object nmpd
-			*/
-			nmpd.times = function(){
-				return nmpd.calcValue(Number(nmpd.pop()) * Number(nmpd.getValue()));
-			};
+	    /**
+	     * Add the display value to the top of the stack
+	     * @return jQuery object nmpd
+	     */
+	    nmpd.plus = function(){
+		return nmpd.calcValue(Number(nmpd.pop()) + Number(nmpd.getValue()));
+	    };
 
-			/**
-			* Divide the display value by the top of the stack
-			* @return jQuery object nmpd
-			*/
-			nmpd.divide = function(){
-				return nmpd.calcValue(Number(nmpd.pop()) / Number(nmpd.getValue()));
-			};
+	    /**
+	     * Subtract the display value from the top of the stack
+	     * @return jQuery object nmpd
+	     */
+	    nmpd.minus = function(){
+		return nmpd.calcValue(Number(nmpd.pop()) - Number(nmpd.getValue()));
+	    };
 
-			/**
-			* Closes the numpad writing it's value to the given target element
-			* @param jQuery object target
-			* @return jQuery object nmpd
-			*/
-			nmpd.close = function(target){
-				// If a target element is given, set it's value to the dipslay value of the numpad. Otherwise just hide the numpad
-				if (target){
-					if (target.prop("tagName") == 'INPUT'){
-						target.val(nmpd.getValue().toString().replace('.', options.decimalSeparator));
-					} else {
-						target.html(nmpd.getValue().toString().replace('.', options.decimalSeparator));
-					}
-				}	
-				// Hide the numpad and trigger numpad.close
-				nmpd.hide();
-				nmpd.trigger('numpad.close');
-				// Trigger a change event on the target element if the value has really been changed
-				// TODO check if the value has really been changed!
-				if (target && target.prop("tagName") == 'INPUT'){
-					target.trigger('change');
-				}
-				return nmpd;
-			};
-			
-			/**
-			* Opens the numpad for a given target element optionally filling it with a given value
-			* @param jQuery object target
-			* @param string initialValue
-			* @return jQuery object nmpd
-			*/
-			nmpd.open = function(target, initialValue){
-				// Set the initial value
-				// Use nmpd.display.val to avoid triggering numpad.change for the initial value
-				if (initialValue){
-					nmpd.display.val(initialValue);
-				} else {
-					if (target.prop("tagName") == 'INPUT'){
-						nmpd.display.val(target.val());
-						nmpd.display.attr('maxLength', target.attr('maxLength'));
-					} else {
-						nmpd.display.val(isNaN(parseFloat(target.text())) ? '' : parseFloat(target.text()));
-					}
-				}
-				// Mark the numpad as not dirty initially
-				$('#'+id+' .dirty').val(0);
-				// Show the numpad and position it on the page
-				cursorFocus(nmpd.show().find('.cancel'));
-				position(nmpd.find('.nmpd-grid'), options.position, options.positionX, options.positionY);
-				// Register a click handler on the done button to update the target element
-				// Make sure all other click handlers get removed. Otherwise some unwanted sideeffects may occur if the numpad is
-				// opened multiple times for some reason
-				$('#'+id+' .done').off('click');
-				$('#'+id+' .done').one('click', function(){ nmpd.close(target); });
-				// Finally trigger numpad.open
-				nmpd.trigger('numpad.open');
-				nmpd.autopush = true;
-				return nmpd;
-			};		  
-		});
+	    /**
+	     * Multiply the display value by the top of the stack
+	     * @return jQuery object nmpd
+	     */
+	    nmpd.times = function(){
+		return nmpd.calcValue(Number(nmpd.pop()) * Number(nmpd.getValue()));
+	    };
+
+	    /**
+	     * Divide the display value by the top of the stack
+	     * @return jQuery object nmpd
+	     */
+	    nmpd.divide = function(){
+		return nmpd.calcValue(Number(nmpd.pop()) / Number(nmpd.getValue()));
+	    };
+
+	    /**
+	     * Closes the numpad writing it's value to the given target element
+	     * @param jQuery object target
+	     * @return jQuery object nmpd
+	     */
+	    nmpd.close = function(target){
+		// If a target element is given, set it's value to the dipslay value of the numpad. Otherwise just hide the numpad
+		if (target){
+		    if (target.prop("tagName") == 'INPUT'){
+			target.val(nmpd.getValue().toString().replace('.', options.decimalSeparator));
+		    } else {
+			target.html(nmpd.getValue().toString().replace('.', options.decimalSeparator));
+		    }
+		}	
+		// Hide the numpad and trigger numpad.close
+		nmpd.hide();
+		nmpd.trigger('numpad.close');
+		// Trigger a change event on the target element if the value has really been changed
+		// TODO check if the value has really been changed!
+		if (target && target.prop("tagName") == 'INPUT'){
+		    target.trigger('change');
+		}
+		return nmpd;
+	    };
+	    
+	    /**
+	     * Opens the numpad for a given target element optionally filling it with a given value
+	     * @param jQuery object target
+	     * @param string initialValue
+	     * @return jQuery object nmpd
+	     */
+	    nmpd.open = function(target, initialValue){
+		// Set the initial value
+		// Use nmpd.display.val to avoid triggering numpad.change for the initial value
+		if (initialValue){
+		    nmpd.display.val(initialValue);
+		} else {
+		    if (target.prop("tagName") == 'INPUT'){
+			nmpd.display.val(target.val());
+			nmpd.display.attr('maxLength', target.attr('maxLength'));
+		    } else {
+			nmpd.display.val(isNaN(parseFloat(target.text())) ? '' : parseFloat(target.text()));
+		    }
+		}
+		// Mark the numpad as not dirty initially
+		$('#'+id+' .dirty').val(0);
+		// Show the numpad and position it on the page
+		cursorFocus(nmpd.show().find('.cancel'));
+		position(nmpd.find('.nmpd-grid'), options.position, options.positionX, options.positionY);
+		// Register a click handler on the done button to update the target element
+		// Make sure all other click handlers get removed. Otherwise some unwanted sideeffects may occur if the numpad is
+		// opened multiple times for some reason
+		$('#'+id+' .done').off('click');
+		$('#'+id+' .done').one('click', function(){ nmpd.close(target); });
+		// Finally trigger numpad.open
+		nmpd.trigger('numpad.open');
+		nmpd.autopush = true;
+		return nmpd;
+	    };		  
+	});
     };
     
-	/**
-	* Positions any given jQuery element within the page
-	*/
+    /**
+     * Positions any given jQuery element within the page
+     */
     function position(element, mode, posX, posY) {
     	var x = 0;
     	var y = 0;
     	if (mode == 'fixed'){
-	        element.css('position','fixed');
-	        
-	        if (posX == 'left'){
-	        	x = 0;
-	        } else if (posX == 'right'){
-	        	x = $(window).width() - element.outerWidth();
-	        } else if (posX == 'center'){
-	        	x = ($(window).width() / 2) - (element.outerWidth() / 2);
-	        } else if ($.type(posX) == 'number'){
-	        	x = posX;
-	        }
-	        element.css('left', x);
-	        	        
-	        if (posY == 'top'){
-	        	y = 0;
-	        } else if (posY == 'bottom'){
-	        	y = $(window).height() - element.outerHeight();
-	        } else if (posY == 'middle'){
-	        	y = ($(window).height() / 2) - (element.outerHeight() / 2);
-	        } else if ($.type(posY) == 'number'){
-	        	y = posY;
-	        }
-	        element.css('top', y);
+	    element.css('position','fixed');
+	    
+	    if (posX == 'left'){
+	        x = 0;
+	    } else if (posX == 'right'){
+	        x = $(window).width() - element.outerWidth();
+	    } else if (posX == 'center'){
+	        x = ($(window).width() / 2) - (element.outerWidth() / 2);
+	    } else if ($.type(posX) == 'number'){
+	        x = posX;
+	    }
+	    element.css('left', x);
+	    
+	    if (posY == 'top'){
+	        y = 0;
+	    } else if (posY == 'bottom'){
+	        y = $(window).height() - element.outerHeight();
+	    } else if (posY == 'middle'){
+	        y = ($(window).height() / 2) - (element.outerHeight() / 2);
+	    } else if ($.type(posY) == 'number'){
+	        y = posY;
+	    }
+	    element.css('top', y);
     	}
         return element;
     }
-	
-	// Default values for numpad options
-	$.fn.numpad.defaults = {
-		target: false,
-		openOnEvent: 'click',
-		backgroundTpl: '<div></div>',
-		gridTpl: '<table></table>',
-		displayTpl: '<input type="text" />',
-		displayCellTpl: '<td colspan="3"></td>',
-		rowTpl: '<tr></tr>',
-		cellTpl: '<td></td>',
-		buttonNumberTpl: '<button></button>',
-		buttonFunctionTpl: '<button></button>',
-		gridTableClass: '',
-		hidePlusMinusButton: false,
-		hideDecimalButton: false,
-		textDone: 'Done',
-		textDelete: 'Del',
-		textClear: 'Clear',
-		textCancel: 'Cancel',
-		decimalSeparator: ',',
-		precision: 4,
-		appendKeypadTo: false,
-		position: 'fixed',
-		positionX: 'center',
-		positionY: 'middle',
-		onKeypadCreate: false,
-		onKeypadOpen: false,
-		onKeypadClose: false,
-		onChange: false
-	};
+    
+    // Default values for numpad options
+    $.fn.numpad.defaults = {
+	target: false,
+	openOnEvent: 'click',
+	backgroundTpl: '<div></div>',
+	gridTpl: '<table></table>',
+	displayTpl: '<input type="text" />',
+	displayCellTpl: '<td colspan="3"></td>',
+	rowTpl: '<tr></tr>',
+	cellTpl: '<td></td>',
+	exitCellTpl: '<td colspan="2"></td>',
+	buttonNumberTpl: '<button></button>',
+	buttonFunctionTpl: '<button></button>',
+	gridTableClass: '',
+	hidePlusMinusButton: false,
+	hideDecimalButton: false,
+	textDone: 'Done',
+	textDelete: 'Del',
+	textClear: 'Clear',
+	textCancel: 'Cancel',
+	decimalSeparator: ',',
+	precision: 4,
+	appendKeypadTo: false,
+	position: 'fixed',
+	positionX: 'center',
+	positionY: 'middle',
+	onKeypadCreate: false,
+	onKeypadOpen: false,
+	onKeypadClose: false,
+	onChange: false
+    };
 })(jQuery);
diff --git a/src/toolpath-displayer.js b/src/toolpath-displayer.js
index 1a87b2c..32cf30d 100644
--- a/src/toolpath-displayer.js
+++ b/src/toolpath-displayer.js
@@ -104,6 +104,12 @@ $(function() {
 
         var imageWidth = bbox.max.x - bbox.min.x;
         var imageHeight = bbox.max.y - bbox.min.y;
+        if (imageWidth == 0) {
+            imageWidth = 1;
+        }
+        if (imageHeight == 0) {
+            imageHeight = 1;
+        }
         var shrink = 0.90;
         inset = 5;
         var scaleX = (canvas.width - inset*2) / imageWidth;
@@ -111,6 +117,9 @@ $(function() {
         var minScale = Math.min(scaleX, scaleY);
 
         scaler = minScale * shrink;
+        if (scaler < 0) {
+            scaler = -scaler;
+        }
         xOffset = inset - bbox.min.x * scaler;
         yOffset = (canvas.height-inset) - bbox.min.y * (-scaler);