From 68d04d418f688ac59bd1f0284186132a6cce24e6 Mon Sep 17 00:00:00 2001
From: gb0101010101 <7369439+gb0101010101@users.noreply.github.com>
Date: Wed, 6 May 2020 19:58:40 -0700
Subject: [PATCH] gb0101010101-decimal-quick-fix: Enforce form validation on
 AJAX submits. Create jinja2 macro to generate decimal form inputs, add custom
 JS validation for input type 'number' that uses attribute 'pattern' which is
 not natively supported in HTML5.

---
 static/scripts/frontpage3d.js             | 21 +++++++++++++
 static/scripts/frontpage3dcontrols.js     |  8 +++++
 static/scripts/frontpageControls.js       | 32 ++++++++++++++-----
 static/scripts/settings.js                |  7 ++++-
 templates/editBoard.html                  | 12 +++----
 templates/editBoard_mobile.html           | 12 +++----
 templates/frontpage3d.html                |  6 ++--
 templates/frontpage3d_mobile.html         |  4 +--
 templates/frontpage3d_mobilecontrols.html |  4 +--
 templates/holeyCalibration.html           | 26 ++++++++--------
 templates/macros.html                     |  5 +++
 templates/opticalCalibration.html         | 38 ++++++++++++-----------
 templates/pidTuning.html                  | 32 +++++++++----------
 templates/quickConfigure.html             |  7 +++--
 templates/settings.html                   |  2 +-
 templates/settings_mobile.html            |  2 +-
 templates/triangularCalibration.html      | 10 +++---
 templates/trimBoard.html                  | 10 +++---
 templates/zaxis.html                      |  4 +--
 templates/zaxis_mobile.html               |  4 +--
 20 files changed, 153 insertions(+), 93 deletions(-)
 create mode 100644 templates/macros.html

diff --git a/static/scripts/frontpage3d.js b/static/scripts/frontpage3d.js
index 7491e3e8..1a625682 100644
--- a/static/scripts/frontpage3d.js
+++ b/static/scripts/frontpage3d.js
@@ -807,3 +807,24 @@ function toggle3DPO(){
     }
 }
 
+function onFooterSubmit(){
+  var form = $("#settingsForm")
+  // JQuery returns list of forms so must select first [0].
+  isValid = form[0].checkValidity();
+  if (isValid) {
+    var url = $("#pageID").val()
+    $.ajax({
+      url : '/'+url,
+      type: "POST",
+      data: form.serialize(),
+      success: function (data) {
+        console.log("success");
+        $('#contentModal').modal('toggle')
+      },
+      error: function (jXHR, textStatus, errorThrown) {
+        alert(errorThrown);
+      }
+    });
+  }
+}
+
diff --git a/static/scripts/frontpage3dcontrols.js b/static/scripts/frontpage3dcontrols.js
index d55cf71b..fb2560f8 100644
--- a/static/scripts/frontpage3dcontrols.js
+++ b/static/scripts/frontpage3dcontrols.js
@@ -152,3 +152,11 @@ function processStatusMessage(data){
     else
         $("#currentPositioningMode").text("Incremental (G91)");
 }
+
+function inputDecimalValidate() {
+    var re = new RegExp($(this).attr("pattern"));
+    valid = pattern.test($(this).val());
+    if (!valid) {
+      $(this).setCustomValidity("Decimal input pattern mismatch");
+    }
+}
diff --git a/static/scripts/frontpageControls.js b/static/scripts/frontpageControls.js
index dc0bb784..42aeb37f 100644
--- a/static/scripts/frontpageControls.js
+++ b/static/scripts/frontpageControls.js
@@ -22,6 +22,25 @@ $(document).ready(function(){
     var controllerMessage = document.getElementById('controllerMessage');
     controllerMessage.scrollTop = controllerMessage.scrollHeight;
     $("#stickyButtons").css("top", $(".navbar").outerHeight());
+
+    // Set custom validation on all form inputs of type 'number' with attribute 'pattern'.
+    // Input type 'number' does not support 'pattern' attribute by default using HTML5.
+    // Input type 'number' always returns a value compatible with parseFloat using period as decimal separator.
+    // @todo: This event handler may need to be moved to other JS files for more/less global application.
+    $(':input[type="number"][pattern]').change(function () {
+      var re = new RegExp($(this).attr("pattern"));
+      var isValid = re.test($(this).val());
+      // JQuery selector returns array of possible matches.
+      // Validity checks must be applied to first item [0].
+      if (isValid) {
+        // Set empty value to clear error.
+        $(this)[0].setCustomValidity("");
+      }
+      else {
+        // Set title as error message.
+        $(this)[0].setCustomValidity($(this).attr("title"));
+      }
+    });
 });
 
 function pauseRun(){
@@ -138,13 +157,12 @@ function boardDataUpdate(data){
 }
 
 function moveAction(direction) {
-	distance = $("#distToMove").val();
-	distanceValid = distance.search(/^[0-9]*(\.[0-9]{0,3})?$/);
-	if (distanceValid == 0) {
-		action('move', direction, distance);
-	} else {
-		$("#distToMove").focus();
-	}
+  // JQuery returns list of matching forms so select first [0] for validitity checking.
+  var isValid = $("#distInput")[0].checkValidity();
+  if (isValid) {
+    distance = $("#distToMove").val();
+    action('move', direction, distance);
+  }
 }
 
 function processStatusMessage(data){
diff --git a/static/scripts/settings.js b/static/scripts/settings.js
index ea7a5472..45271612 100644
--- a/static/scripts/settings.js
+++ b/static/scripts/settings.js
@@ -1,9 +1,11 @@
 function onFooterSubmit(){
+  var form = $("#settingsForm")
+  if (form[0].checkValidity()) {
     var url = $("#pageID").val()
     $.ajax({
         url : '/'+url,
         type: "POST",
-        data: $("#settingsForm").serialize(),
+        data: form.serialize(),
         success: function (data) {
           console.log("success");
             $('#contentModal').modal('toggle')
@@ -12,8 +14,10 @@ function onFooterSubmit(){
             alert(errorThrown);
         }
     });
+  }
 }
 
+/*
 $(document).ready(function () {
     $('#settingsForm').on('submit', function(e) {
         e.preventDefault();
@@ -38,6 +42,7 @@ $(document).ready(function () {
      });
 
 });
+*/
 
 function updatePorts(data){
   var selectedPort = $("#comPorts").find(":selected").text();
diff --git a/templates/editBoard.html b/templates/editBoard.html
index d0faf3c2..b0ab1c09 100644
--- a/templates/editBoard.html
+++ b/templates/editBoard.html
@@ -1,4 +1,4 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <form id="editBoardForm">
@@ -32,17 +32,17 @@ <h4 class="card-title">
                   <div class="row">
                         <div class="form-group col-6">
                           <label for="width">Width</label>
-                          <input id="width"  type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,3})?$"  class="form-control" name="width" value="{{width}}">
+                          {{ macros.input_decimal("width", False, width) }}
                           <small class="form-text text-muted">Enter value in {{units}} only</small>
                         </div>
                         <div class="form-group col-6">
                           <label for="height">Height</label>
-                          <input id="height"  type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,3})?$"  class="form-control" name="height" value="{{height}}">
+                          {{ macros.input_decimal("height", True, height) }}
                           <small class="form-text text-muted">Enter value in {{units}} only</small>
                         </div>
                         <div class="form-group col-6">
                           <label for="Thickness">Thickness</label>
-                          <input id="thickness" type="number" step="any"  class="form-control" name="thickness" value="{{thickness}}">
+                          {{ macros.input_decimal("thickness", True, thickness) }}
                           <small class="form-text text-muted">Enter value in {{units}} only</small>
                         </div>
                   </div>
@@ -56,12 +56,12 @@ <h4 class="card-title">
                   <div class="row">
                         <div class="form-group col-6">
                           <label for="centerX">Center X</label>
-                          <input id="centerX" type="number" step="any"  class="form-control" name="centerX" value="{{centerX}}">
+                          {{ macros.input_decimal("centerX", True, centerX) }}
                           <small class="form-text text-muted">Enter value in {{units}} only</small>
                         </div>
                         <div class="form-group col-6">
                           <label for="centerY">Center Y</label>
-                          <input id="centerY" type="number" step="any"  class="form-control" name="centerY" value="{{centerY}}">
+                          {{ macros.input_decimal("centerY", True, centerY) }}
                           <small class="form-text text-muted">Enter value in {{units}} only</small>
                         </div>
                   </div>
diff --git a/templates/editBoard_mobile.html b/templates/editBoard_mobile.html
index add13a10..8f562600 100644
--- a/templates/editBoard_mobile.html
+++ b/templates/editBoard_mobile.html
@@ -1,4 +1,4 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <form id="editBoardForm">
@@ -28,17 +28,17 @@ <h4 class="card-title">
           <div class="row">
                 <div class="form-group col-6">
                   <label for="width">Width</label>
-                  <input id="width" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="width" value="{{width}}">
+                  {{ macros.input_decimal("width", True, width) }}
                   <small class="form-text text-muted">Enter value in {{units}} only</small>
                 </div>
                 <div class="form-group col-6">
                   <label for="height">Height</label>
-                  <input id="height" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="height" value="{{height}}">
+                  {{ macros.input_decimal("height", True, height) }}
                   <small class="form-text text-muted">Enter value in {{units}} only</small>
                 </div>
                 <div class="form-group col-6">
                   <label for="Thickness">Thickness</label>
-                  <input id="thickness" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="thickness" value="{{thickness}}">
+                  {{ macros.input_decimal("thickness", True, thickness) }}
                   <small class="form-text text-muted">Enter value in {{units}} only</small>
                 </div>
           </div>
@@ -50,12 +50,12 @@ <h4 class="card-title">
           <div class="row">
                 <div class="form-group col-6">
                   <label for="centerX">Center X</label>
-                  <input id="centerX" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="centerX" value="{{centerX}}">
+                  {{ macros.input_decimal("centerX", True, centerX) }}
                   <small class="form-text text-muted">Enter value in {{units}} only</small>
                 </div>
                 <div class="form-group col-6">
                   <label for="centerY">Center Y</label>
-                  <input id="centerY" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="centerY" value="{{centerY}}">
+                  {{ macros.input_decimal("centerY", True, centerY) }}
                   <small class="form-text text-muted">Enter value in {{units}} only</small>
                 </div>
           </div>
diff --git a/templates/frontpage3d.html b/templates/frontpage3d.html
index a902f1c6..926cdeb9 100644
--- a/templates/frontpage3d.html
+++ b/templates/frontpage3d.html
@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-
+{% import 'macros.html' as macros %}
 {% block header %}
   <link rel="stylesheet" href="{{ url_for('static',filename='styles/frontpage.css', version='11102018j') }}" crossorigin="anonymous">
   <!--<style> #workarea {background-color: #AAA; width: 100%; height: 100%; border: 1px solid black;}</style>-->
@@ -26,7 +26,7 @@ <h3>Controls</h3>
         <div>
         <div class="controls row">
           <div class="col-3 mb-1">
-            <button type="button" class="btn btn-secondary btn-block disabler" onclick="moveAction('upLeft')"><i data-feather="arrow-up-left"></i></button>
+            <button type="button" data-wc-major-digits="5" class="btn btn-secondary btn-block disabler" onclick="moveAction('upLeft')"><i data-feather="arrow-up-left"></i></button>
           </div>
           <div class="col-3 mb-1">
             <button type="button" class="btn btn-dark btn-block" onclick="moveAction('up')"><i data-feather="arrow-up"></i></button>
@@ -68,7 +68,7 @@ <h3>Controls</h3>
             <label>Distance:</label>
           </div>
           <div class="col-3 mb-1">
-            <form id="distInput" onsubmit="return false;"><input class="form-control" type="text" pattern="^[0-9]*(\.[0-9]{0,3})?$" id="distToMove" title="Positive number with maximum 3 decimal places"></form>
+            <form id="distInput" onsubmit="return false;">{{ macros.input_decimal("distToMove", True) }}</form>
           </div>
           <div class="col-3 mb-1">
             <button id="units" type="button" class="btn btn-secondary" onclick="unitSwitch();">--</button>
diff --git a/templates/frontpage3d_mobile.html b/templates/frontpage3d_mobile.html
index d4091665..dd818acf 100644
--- a/templates/frontpage3d_mobile.html
+++ b/templates/frontpage3d_mobile.html
@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-
+{% import 'macros.html' as macros %}
 {% block header %}
   <link rel="stylesheet" href="{{ url_for('static',filename='styles/frontpage.css', version='10262019a') }}" crossorigin="anonymous">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -83,7 +83,7 @@ <h3>Controls</h3>
     </div>
     <div class="row">
       <div class="col-4  mb-1">
-        <form onsubmit="return false;"><input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,3})?$" id="distToMove" title="Positive number with maximum 3 decimal places"></form>
+        <form id="distInput" onsubmit="return false;">{{ macros.input_decimal("distToMove", True) }}</form>
       </div>
       <div class="col-4  mb-1">
         <button id="units" type="button" class="btn btn-lg btn-secondary" onclick="unitSwitch()">--</button>
diff --git a/templates/frontpage3d_mobilecontrols.html b/templates/frontpage3d_mobilecontrols.html
index 2aeb7354..cf318c7e 100644
--- a/templates/frontpage3d_mobilecontrols.html
+++ b/templates/frontpage3d_mobilecontrols.html
@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-
+{% import 'macros.html' as macros %}
 {% block header %}
   <link rel="stylesheet" href="{{ url_for('static',filename='styles/frontpage.css', version='10262019b') }}" crossorigin="anonymous">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -86,7 +86,7 @@ <h3>Controls</h3>
       <label>Dist To Move</label>
     </div>
     <div class="col-4  mb-1">
-      <input class="form-control" type="number" id="distToMove" value="0.01">
+      <form id="distInput" onsubmit="return false;">{{ macros.input_decimal("distToMove", True) }}</form>
     </div>
     <div class="col-4  mb-1">
       <button id="units" type="button" class="btn btn-lg btn-secondary" onclick="unitSwitch();">--</button>
diff --git a/templates/holeyCalibration.html b/templates/holeyCalibration.html
index 2a011918..c07e38b3 100644
--- a/templates/holeyCalibration.html
+++ b/templates/holeyCalibration.html
@@ -1,4 +1,4 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <div class="card-body">
@@ -14,62 +14,62 @@ <h4 class="card-title">Measurements</h4>
       <div class="form-group">
         <div class="form-group">
           <label for="M1">M1</label>
-          <input id="M1" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="M1" value="0">
+          {{ macros.input_decimal("M1", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M2">M2</label>
-          <input id="M2" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="M2" value="0">
+          {{ macros.input_decimal("M2", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M3">M3</label>
-          <input id="M3" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M3" value="0">
+          {{ macros.input_decimal("M3", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M4">M4</label>
-          <input id="M4" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M4" value="0">
+          {{ macros.input_decimal("M4", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M5">M5</label>
-          <input id="M5" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M5" value="0">
+          {{ macros.input_decimal("M5", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M6">M6</label>
-          <input id="M6" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M6" value="0">
+          {{ macros.input_decimal("M6", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M7">M7</label>
-          <input id="M7" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M7" value="0">
+          {{ macros.input_decimal("M7", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M8">M8</label>
-          <input id="M8" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M8" value="0">
+          {{ macros.input_decimal("M8", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M9">M9</label>
-          <input id="M9" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M9" value="0">
+          {{ macros.input_decimal("M9", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M10">M10</label>
-          <input id="M10" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M10" value="0">
+          {{ macros.input_decimal("M10", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M11">M11</label>
-          <input id="M11" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M11" value="0">
+          {{ macros.input_decimal("M11", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="form-group">
           <label for="M12">M12</label>
-          <input id="M12" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  class="form-control" name="M12" value="0">
+          {{ macros.input_decimal("M12", True, "0") }}
           <small class="form-text text-muted">Enter value in mm only</small>
         </div>
         <div class="row">
diff --git a/templates/macros.html b/templates/macros.html
new file mode 100644
index 00000000..87a2afce
--- /dev/null
+++ b/templates/macros.html
@@ -0,0 +1,5 @@
+{% macro input_decimal(id, required = False, default_value = "", disabled = False, digits_before = 4, digits_after = 5, error_text = "") %}
+  {% set pattern = "^[0-9]{0," ~ digits_before ~ "}([\.,][0-9]{0," ~ digits_after ~ "})?$" %}
+  {% set title = error_text|default("Decimal number with one separator with max " ~ digits_before ~ " major digits and max " ~ digits_after + " minor digits", True) %}
+  <input id="{{ id }}" type="number" step="any" inputmode="decimal" pattern="{{ pattern }}" class="form-control" name="{{ id }}" value="{{ default_value }}" {{ 'required=required' if required }} {{ 'disabled=disabled' if disabled }} title="{{ title }}">
+{% endmacro %}
\ No newline at end of file
diff --git a/templates/opticalCalibration.html b/templates/opticalCalibration.html
index 5874b48c..6d74b471 100644
--- a/templates/opticalCalibration.html
+++ b/templates/opticalCalibration.html
@@ -1,4 +1,4 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <div class="row">
@@ -16,14 +16,14 @@ <h4 class="card-title" id="configurationHeader">
               <div class="col">
                 <div class="form-group">
                   <label for="markerX">Horizontal Size of Marker</label>
-                  <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="markerX" id="markerX" value="{{markerX}}">
+                  {{ macros.input_decimal("markerX", True, markerX) }}
                   <small class="form-text text-muted">Enter value in inches only</small>
                 </div>
               </div>
               <div class="col">
                 <div class="form-group">
                   <label for="markerY">Vertical Size of Marker</label>
-                  <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="markerY" id="markerY" value="{{markerY}}">
+                  {{ macros.input_decimal("markerY", True, markerY) }}
                   <small class="form-text text-muted">Enter value in inches only</small>
                 </div>
               </div>
@@ -32,13 +32,14 @@ <h4 class="card-title" id="configurationHeader">
               <div class="col">
                 <div class="form-group">
                   <label for="scaleX">Horizontal Scale Factor</label>
-                  <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="scaleX" id="scaleX" value="{{scaleX}}">
+                  {{ macros.input_decimal("scaleX", True, scaleX) }}
                   <small class="form-text text-muted">Enter something like 1.0028</small>
                 </div>
               </div>
               <div class="col">
                 <div class="form-group">
                   <label for="scaleY">Vertical Scale Factor</label>
+                  {{ macros.input_decimal("scaleY", True, scaleY) }}
                   <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="scaleY" id="scaleY" value="{{scaleY}}">
                   <small class="form-text text-muted">Enter something like 1.0028</small>
                 </div>
@@ -48,14 +49,14 @@ <h4 class="card-title" id="configurationHeader">
               <div class="col">
                 <div class="form-group">
                   <label for="opticalCenterX">X Coordinate of Center</label>
-                  <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="opticalCenterX" id="opticalCenterX" value="{{opticalCenterX}}">
+                  {{ macros.input_decimal("opticalCenterX", True, opticalCenterX) }}
                   <small class="form-text text-muted">Enter something like 300</small>
                 </div>
               </div>
               <div class="col">
                 <div class="form-group">
                   <label for="opticalCenterY">Y Coordinate of Center</label>
-                  <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="opticalCenterY" id="opticalCenterY" value="{{opticalCenterY}}">
+                  {{ macros.input_decimal("opticalCenterY", True, opticalCenterY) }}
                   <small class="form-text text-muted">Enter something like 200</small>
                 </div>
              </div>
@@ -64,7 +65,7 @@ <h4 class="card-title" id="configurationHeader">
               <div class="col">
                 <div class="form-group">
                   <label for="positionTolerance">Position Tolerance</label>
-                  <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="positionTolerance" id="positionTolerance" value="{{positionTolerance}}">
+                  {{ macros.input_decimal("positionTolerance", True, positionTolerance) }}
                   <small class="form-text text-muted">Enter something like 0.125 (mm)</small>
                 </div>
               </div>
@@ -91,17 +92,18 @@ <h4 class="card-title">Calibration Extents</h4>
               <option value="Custom" {{'selected' if calibrationExtents=='Custom' else ''}}>Custom</option>
             </select>
             <div class="row">
+            {% set disabled_custom = (calibrationExtents!='Custom') %}
             <div class="col">
               <div class="form-group">
                 <label for="tlX">X Coordinate of Top Left</label>
-                <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="tlX" id="tlX" {{'disabled' if calibrationExtents!='Custom' else ''}} value="{{tlX}}">
+                {{ macros.input_decimal("tlX", True, tlX, disabled_custom) }}
                 <small class="form-text text-muted">Range from +15 to -15 (+ is right, - is left)</small>
               </div>
             </div>
             <div class="col">
               <div class="form-group">
                 <label for="tlY">Y Coordinate of Top Left</label>
-                <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="tlY" id="tlY" {{'disabled' if calibrationExtents!='Custom' else ''}} value="{{tlY}}">
+                {{ macros.input_decimal("tlY", True, tlY, disabled_custom) }}
                 <small class="form-text text-muted">Range from +7 to -7 (+ is up, - is down)</small>
               </div>
             </div>
@@ -110,14 +112,14 @@ <h4 class="card-title">Calibration Extents</h4>
               <div class="col">
                 <div class="form-group">
                   <label for="brX">X Coordinate of Bottom Right</label>
-                  <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="brX" id="brX" {{'disabled' if calibrationExtents!='Custom' else ''}} value="{{brX}}">
+                  {{ macros.input_decimal("brX", True, brX, disabled_custom) }}
                   <small class="form-text text-muted">Range from +15 to -15 (+ is right, - is left)</small>
                 </div>
               </div>
               <div class="col">
                 <div class="form-group">
                   <label for="brY">Y Coordinate of Bottom Right</label>
-                  <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="brY" id="brY" {{'disabled' if calibrationExtents!='Custom' else ''}} value="{{brY}}">
+                  {{ macros.input_decimal("brY", True, brY, disabled_custom) }}
                   <small class="form-text text-muted">Range from +7 to -7 (+ is up, - is down)</small>
                 </div>
               </div>
@@ -156,14 +158,14 @@ <h4 class="card-title" id="configurationHeader">
                   <div class="col">
                     <div class="form-group">
                       <label for="markerX">Horizontal Size of Marker</label>
-                      <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="markerX" id="markerX" value="{{markerX}}">
+                      {{ macros.input_decimal("markerX", True, markerX) }}
                       <small class="form-text text-muted">Enter value in inches only</small>
                     </div>
                   </div>
                   <div class="col">
                     <div class="form-group">
                       <label for="markerY">Vertical Size of Marker</label>
-                      <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="markerY" id="markerY" value="{{markerY}}">
+                      {{ macros.input_decimal("markerY", True, markerY) }}
                       <small class="form-text text-muted">Enter value in inches only</small>
                     </div>
                   </div>
@@ -172,14 +174,14 @@ <h4 class="card-title" id="configurationHeader">
                   <div class="col">
                     <div class="form-group">
                       <label for="scaleX">Horizontal Scale Factor</label>
-                      <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="scaleX" id="scaleX" value="{{scaleX}}">
+                      {{ macros.input_decimal("scaleX", True, scaleX) }}
                       <small class="form-text text-muted">Enter something like 1.0028</small>
                     </div>
                   </div>
                   <div class="col">
                     <div class="form-group">
                       <label for="scaleY">Vertical Scale Factor</label>
-                      <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="scaleY" id="scaleY" value="{{scaleY}}">
+                      {{ macros.input_decimal("scaleY", True, scaleY) }}
                       <small class="form-text text-muted">Enter something like 1.0028</small>
                     </div>
                   </div>
@@ -188,14 +190,14 @@ <h4 class="card-title" id="configurationHeader">
                   <div class="col">
                     <div class="form-group">
                       <label for="opticalCenterX">X Coordinate of Center</label>
-                      <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="opticalCenterX" id="opticalCenterX" value="{{opticalCenterX}}">
+                      {{ macros.input_decimal("opticalCenterY", True, opticalCenterY) }}
                       <small class="form-text text-muted">Enter something like 300</small>
                     </div>
                   </div>
                   <div class="col">
                     <div class="form-group">
                       <label for="opticalCenterY">Y Coordinate of Center</label>
-                      <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="opticalCenterY" id="opticalCenterY" value="{{opticalCenterY}}">
+                      {{ macros.input_decimal("opticalCenterY", True, opticalCenterY) }}
                       <small class="form-text text-muted">Enter something like 200</small>
                     </div>
                    </div>
@@ -204,7 +206,7 @@ <h4 class="card-title" id="configurationHeader">
                   <div class="col-6">
                     <div class="form-group">
                       <label for="positionTolerance">Position Tolerance</label>
-                      <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="positionTolerance" id="positionTolerance" value="{{positionTolerance}}">
+                      {{ macros.input_decimal("positionTolerance", True, positionTolerance) }}
                       <small class="form-text text-muted">Enter something like 0.125 (mm)</small>
                     </div>
                   </div>
diff --git a/templates/pidTuning.html b/templates/pidTuning.html
index 3b50622c..500c5555 100644
--- a/templates/pidTuning.html
+++ b/templates/pidTuning.html
@@ -1,4 +1,4 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <div class="card" id="motorAdjustmentAccordion">
@@ -290,14 +290,14 @@ <h4 class="card-title">Settings</h4>
              <div class="col">
                <div class="form-group">
                  <label for="vStart">Start</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="vStart" id="vStart" value="{{vStart}}">
+                 {{ macros.input_decimal("vStart", False, vStart) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="vStop">Stop</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="vStop" id="vStop" value="{{vStop}}">
+                 {{ macros.input_decimal("vStop", False, vStop) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
@@ -306,14 +306,14 @@ <h4 class="card-title">Settings</h4>
              <div class="col">
                <div class="form-group">
                  <label for="vSteps">Steps</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="vSteps" id="vSteps" value="{{vSteps}}">
+                 {{ macros.input_decimal("vSteps", False, vSteps) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="vVersion">Version</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="vVersion" id="vVersion" value="{{vVersion}}">
+                 {{ macros.input_decimal("vVersion", False, vVersion) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
@@ -322,21 +322,21 @@ <h4 class="card-title">Settings</h4>
              <div class="col">
                <div class="form-group">
                  <label for="KpV">KpV</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="KpV" id="KpV" value="{{KpV}}">
+                 {{ macros.input_decimal("KpV", False, KpV) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="KiV">KiV</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="KiV" id="KiV" value="{{KiV}}">
+                 {{ macros.input_decimal("KiV", False, KiV) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="KdV">KdV</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="KdV" id="KdV" value="{{KdV}}">
+                 {{ macros.input_decimal("KdV", False, KdV) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
@@ -393,14 +393,14 @@ <h4 class="card-title">Settings</h4>
              <div class="col">
                <div class="form-group">
                  <label for="pStart">Start</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="pStart" id="pStart" value="{{pStart}}">
+                 {{ macros.input_decimal("pStart", False, pStart) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="pStop">Stop</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="pStop" id="pStop" value="{{pStop}}">
+                 {{ macros.input_decimal("pStop", False, pStop) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
@@ -409,14 +409,14 @@ <h4 class="card-title">Settings</h4>
              <div class="col">
                <div class="form-group">
                  <label for="pSteps">Steps</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="pSteps" id="pSteps" value="{{pSteps}}">
+                 {{ macros.input_decimal("pSteps", False, pSteps) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="pVersion">Version</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="pVersion" id="pVersion" value="{{pVersion}}">
+                 {{ macros.input_decimal("pVersion", False, pVersion) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
@@ -425,7 +425,7 @@ <h4 class="card-title">Settings</h4>
              <div class="col-6">
                <div class="form-group">
                  <label for="pTime">Time</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="pTime" id="pTime" value="{{pTime}}">
+                 {{ macros.input_decimal("pTime", False, pTime) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
@@ -434,21 +434,21 @@ <h4 class="card-title">Settings</h4>
              <div class="col">
                <div class="form-group">
                  <label for="KpP">KpP</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="KpP" id="KpP" value="{{KpP}}">
+                 {{ macros.input_decimal("KpP", False, KpP) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="KiP">KiP</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="KiP" id="KiP" value="{{KiP}}">
+                 {{ macros.input_decimal("KiP", False, KiP) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="KdV">KdP</label>
-                 <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="KdP" id="KdP" value="{{KdP}}">
+                 {{ macros.input_decimal("KdV", False, KdV) }}
                  <small class="form-text text-muted"></small>
                </div>
              </div>
diff --git a/templates/quickConfigure.html b/templates/quickConfigure.html
index 278a4e72..8c953578 100644
--- a/templates/quickConfigure.html
+++ b/templates/quickConfigure.html
@@ -1,3 +1,4 @@
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <input id="pageID" type="hidden" value="{{pageID}}">
@@ -48,7 +49,7 @@ <h5>Metal Maslow Linkage</h5>
         </select>
         <p></p>
         <label for="rotationRadius">Rotational Radius</label>
-        <input class="form-control"  type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="rotationRadius" id="rotationRadius" value="{{rotationRadius}}">
+        {{ macros.input_decimal("rotationRadius", False, rotationRadius) }}
         <small class="form-text text-muted">Enter value in mm only</small>
       </div>
     </div>
@@ -80,7 +81,7 @@ <h4 class="card-title">Distance Between Motors</h4>
         <img src="{{ url_for('static',filename='images/quickConfig/measureEdgeMotor.png') }}" height="300" width="300">
         <p></p>
         <label for="motorSpacingX">Distance Between Motors</label>
-        <input class="form-control"  type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="motorSpacingX" id="motorSpacingX" value="{{motorSpacingX}}">
+        {{ macros.input_decimal("motorSpacingX", False, motorSpacingX) }}
         <small class="form-text text-muted">Enter value in mm only</small>
         <button type="button" onclick="subtract40p4();">Subtract 40.4 mm</button>
       </div>
@@ -95,7 +96,7 @@ <h4 class="card-title">Height of Motors Above Workspace</h4>
         <img src="{{ url_for('static',filename='images/quickConfig/motorOffsetY.png') }}" height="300" width="300">
         <p></p>
         <label for="motorOffsetY">Height of Motors Above Workspace</label>
-        <input class="form-control"  type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" name="motorOffsetY" id="motorOffSetY" value="{{motorOffsetY}}">
+        {{ macros.input_decimal("motorOffsetY", False, motorOffsetY) }}
         <small class="form-text text-muted">Enter value in mm only</small>
       </div>
     </div>
diff --git a/templates/settings.html b/templates/settings.html
index 94cd7639..ea2654f5 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -46,7 +46,7 @@ <h4 {{'' if enableCustom or setting.custom != 1 else 'style=color:#ccc'}}>{{sett
                 <label for="switch-{{setting.key}}"></label>
               </span>
             {% else %}
-              <input name="{{setting.key}}" {{'type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"' | safe if setting.value | isnumber else '' }} data-group="{{title}}" class="form-control" value="{{setting.value}}" {{'' if enableCustom or setting.custom != 1 else 'disabled'}}>
+              <input name="{{setting.key}}" {{'type="number" inputmode="decimal" pattern="^[0-9]*([\.,][0-9]{0,5})?$"' | safe if setting.value | isnumber else '' }} data-group="{{title}}" class="form-control" value="{{setting.value}}" {{'' if enableCustom or setting.custom != 1 else 'disabled'}}>
             {% endif %}
           </div>
         </div>
diff --git a/templates/settings_mobile.html b/templates/settings_mobile.html
index a10e22a2..9635f5ff 100644
--- a/templates/settings_mobile.html
+++ b/templates/settings_mobile.html
@@ -46,7 +46,7 @@ <h4 {{'' if enableCustom or setting.custom != 1 else 'style=color:#ccc'}}>{{sett
                 <label for="switch-{{setting.key}}"></label>
               </span>
             {% else %}
-              <input name="{{setting.key}}" {{'type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"' | safe if setting.value | isnumber else '' }} data-group="{{title}}" class="form-control" value="{{setting.value}}" {{'' if enableCustom or setting.custom != 1 else 'disabled'}}>
+              <input name="{{setting.key}}" {{'type="number" inputmode="decimal" pattern="^[0-9]*([\.,][0-9]{0,5})?$"' | safe if setting.value | isnumber else '' }} data-group="{{title}}" class="form-control" value="{{setting.value}}" {{'' if enableCustom or setting.custom != 1 else 'disabled'}}>
               <!--<input name="{{setting.key}}" data-group="{{title}}" class="form-control" value="{{setting.value}}" {{'' if enableCustom or setting.custom != 1 else 'disabled'}}>-->
             {% endif %}
           </div>
diff --git a/templates/triangularCalibration.html b/templates/triangularCalibration.html
index 1a3a0f49..64fe4650 100644
--- a/templates/triangularCalibration.html
+++ b/templates/triangularCalibration.html
@@ -1,4 +1,4 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <h5>Cut Test Pattern</h5>
@@ -11,22 +11,22 @@ <h5>Measurements</h5>
     <div class="form-group">
       <div class="form-group">
         <label for="cut12">Distance Between Cuts 1 and 2</label>
-        <input id="cut12" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="cut12" value="1930">
+        {{ macros.input_decimal("cut12", True, "1930") }}
         <small class="form-text text-muted">Enter value in mm only</small>
       </div>
       <div class="form-group">
         <label for="cut34">Distance Between Cuts 3 and 4</label>
-        <input id="cut34" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="cut34" value="1930">
+        {{ macros.input_decimal("cut34", True, "1930") }}
         <small class="form-text text-muted">Enter value in mm only</small>
       </div>
       <div class="form-group">
         <label for="cut5">Distance Between Top of Work Area and Cut 5</label>
-        <input id="cut5" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="cut5" value="300">
+        {{ macros.input_decimal("cut5", True, "300") }}
         <small class="form-text text-muted">Enter value in mm only</small>
       </div>
       <div class="form-group">
         <label for="bitDiameter">Router Bit Diameter</label>
-        <input id="bitDiameter" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="bitDiameter" value="6.35">
+        {{ macros.input_decimal("bitDiameter", True, "6.35") }}
         <small class="form-text text-muted">Enter value in mm only</small>
       </div>
       <div class="row">
diff --git a/templates/trimBoard.html b/templates/trimBoard.html
index ac8257ad..a20fe9a5 100644
--- a/templates/trimBoard.html
+++ b/templates/trimBoard.html
@@ -1,4 +1,4 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <form id="trimBoardForm">
@@ -7,26 +7,26 @@
       <div class="row justify-content-center">
           <div class="form-group col-6">
             <label for="trimTop">Trim Top</label>
-            <input id="trimTop" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="trimTop" value="0">
+            {{ macros.input_decimal("trimTop", True, "0") }}
             <small class="form-text text-muted">Enter value in {{units}} only</small>
           </div>
       </div>
       <div class="row">
         <div class="form-group col-6">
             <label for="trimLeft">Trim Left</label>
-            <input id="trimLeft" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="trimLeft" value="0">
+            {{ macros.input_decimal("trimLeft", True, "0") }}
             <small class="form-text text-muted">Enter value in {{units}} only</small>
         </div>
         <div class="form-group col-6">
             <label for="trimRight">Trim Right</label>
-            <input id="trimRight" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="trimRight" value="0">
+            {{ macros.input_decimal("trimRight", True, "0") }}
             <small class="form-text text-muted">Enter value in {{units}} only</small>
         </div>
       </div>
       <div class="row justify-content-center">
           <div class="form-group col-6">
             <label for="trimBottom">Trim Bottom</label>
-            <input id="trimBottom" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" class="form-control" name="trimBottom" value="0">
+            {{ macros.input_decimal("trimBottom", True, "0") }}
             <small class="form-text text-muted">Enter value in {{units}} only</small>
           </div>
       </div>
diff --git a/templates/zaxis.html b/templates/zaxis.html
index 024e8c45..1e087d6c 100644
--- a/templates/zaxis.html
+++ b/templates/zaxis.html
@@ -1,11 +1,11 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <div class="row">
     <div class = "col-9">
       <div class="row">
         <div class="col-4 mb-1">
-          <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$" id="distToMoveZ" value="{{distToMoveZ}}">
+          {{ macros.input_decimal("distToMoveZ", True, distToMoveZ) }}
         </div>
         <div class="col-4 mb-1">
           <button id="unitsZ" type="button" class="btn  btn-lg btn-block btn-secondary" onclick="unitSwitchZ();">{{unitsZ}}</button>
diff --git a/templates/zaxis_mobile.html b/templates/zaxis_mobile.html
index a22c2179..84dfef7d 100644
--- a/templates/zaxis_mobile.html
+++ b/templates/zaxis_mobile.html
@@ -1,11 +1,11 @@
-
+{% import 'macros.html' as macros %}
 {% block content %}
 <div class="container-fluid">
   <div class="row">
     <div class = "col">
       <div class="row">
         <div class="col-6 mb-1">
-          <input class="form-control" type="text" inputmode="decimal" pattern="^[0-9]*(\.[0-9]{0,5})?$"  id="distToMoveZ" value="{{distToMoveZ}}">
+          {{ macros.input_decimal("distToMoveZ", True, distToMoveZ) }}
         </div>
         <div class="col-6 mb-1">
           <button id="unitsZ" type="button" class="btn  btn-lg btn-block btn-secondary" onclick="unitSwitchZ();">{{unitsZ}}</button>