Improved css and behaviour

app/index.html

@@ -469,7 +469,7 @@
                   <tr>
                     <td colspan="4">
                       <div style="margin: 2px;">
-                        <input id="jograte" type="number" min="100" max="10000" step="500" placeholder="1000" data-role="input" data-prepend="Jog Feedrate:" data-clear-button="false" value="1000" style="text-align: right;" />
+                        <input id="jograte" type="number" min="100" max="10000" step="500" placeholder="5000" data-role="input" data-prepend="Jog Feedrate:" data-clear-button="false" value="5000" style="text-align: right;" />
                       </div>
                     </td>
                   </tr>
@@ -648,86 +648,6 @@
           </div>
         </div>
       </div>
-      <div id="gamepadPanel" style="display: none;">
-        <!-- <h2 class="text-center">Coming Soon</h2> -->
-        <table class="keyboardpanel">
-          <tr>
-            <th colspan="2">Key</th>
-            <!-- <th></th> -->
-            <th>Function</th>
-          </tr>
-
-          <tr>
-            <td>
-              <span class="fa-layers">
-                <img src="img/keyboard.svg" data-fa-transform="grow-8"/>
-                <i class="fas fa-arrow-left" data-fa-transform="grow-4 down-12 right-10"></i>
-              </span>
-            </td>
-            <td>
-              <span class="fa-layers">
-                <img src="img/keyboard.svg" data-fa-transform="grow-8"/>
-                <i class="fas fa-arrow-right" data-fa-transform="grow-4 down-12 right-10"></i>
-              </span>
-            </td>
-            <td>
-              <div class="remark alert m-0">Jog <span class="tally alert">X</span> Axis</div>
-            </td>
-          </tr>
-
-          <tr>
-            <td>
-              <span class="fa-layers">
-                <img src="img/keyboard.svg" data-fa-transform="grow-8"/>
-                <i class="fas fa-arrow-up" data-fa-transform="grow-4 down-12 right-10"></i>
-              </span>
-            </td>
-            <td>
-              <span class="fa-layers">
-                <img src="img/keyboard.svg" data-fa-transform="grow-8"/>
-                <i class="fas fa-arrow-down" data-fa-transform="grow-4 down-12 right-10"></i>
-              </span>
-            </td>
-            <td>
-              <div class="remark success m-0">Jog <span class="tally success">Y</span> Axis</div>
-            </td>
-          </tr>
-
-          <tr>
-            <td>
-              <span class="fa-layers">
-                <img src="img/keyboard.svg" data-fa-transform="grow-8"/>
-                <span class="fa-layers-text" data-fa-transform="shrink-3 right-18 down-7" style="font-weight:900">Page</span>
-              <span class="fa-layers-text" data-fa-transform="shrink-3 right-18 down-22" style="font-weight:900">Up</span>
-            </td>
-            <td>
-              <span class="fa-layers">
-                <img src="img/keyboard.svg" data-fa-transform="grow-8"/>
-                <span class="fa-layers-text" data-fa-transform="shrink-3 right-18 down-7" style="font-weight:900">Page</span>
-              <span class="fa-layers-text" data-fa-transform="shrink-3 right-17 down-22" style="font-weight:900">Down</span>
-              </span>
-            </td>
-            <td>
-              <div class="remark info m-0"> Jog <span class="tally info">Z</span> Axis</div>
-            </td>
-          </tr>
-
-          <tr>
-            <td>
-
-            </td>
-            <td>
-              <span class="fa-layers">
-                <img src="img/keyboard.svg" data-fa-transform="grow-8"/>
-                <span class="fa-layers-text" data-fa-transform="shrink-3 right-17 down-14" style="font-weight:900">Esc</span>
-            </td>
-
-            <td>
-              <div class="remark m-0">Abort / Stop</div>
-            </td>
-          </tr>
-          <!-- <div id="updateconsole">Click "Download Updates" above</div> -->
-      </div>
 
       <!-- Bottom StatusBar -->
       <div class="fixed-bottom">

app/jog/app.js

@@ -0,0 +1,13 @@
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker
+    .register('/service-worker.js')
+    .then(function(registration) {
+      console.log(
+        'Service Worker registration successful with scope: ',
+        registration.scope
+      );
+    })
+    .catch(function(err) {
+      console.log('Service Worker registration failed: ', err);
+    });
+}

app/jog/index.html

@@ -5,8 +5,32 @@
   <title>OpenBuilds Machine Driver</title>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <meta name="author" content="">
+  <meta name="author" content="openbuilds.com">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0">
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+  <meta name="HandheldFriendly" content="true" />
+
+  <link rel="manifest" href="manifest.json">
+  <link rel="shortcut icon" href="favicon.ico">
+  <link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png">
+  <link rel="icon" href="./images/icons/apple-touch-icon.png">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="OpenBuilds Jog">
+  <link rel="apple-touch-startup-image" href="./images/splash/launch-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="./images/splash/launch-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="./images/splash/launch-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="./images/splash/launch-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="./images/splash/launch-1536x2048.png" media="(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="./images/splash/launch-1668x2224.png" media="(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="./images/splash/launch-2048x2732.png" media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-icon" sizes="180x180" href="./images/icons/apple-touch-icon.png">
+  <link rel="mask-icon" href="./images/icons/safari-pinned-tab.svg" color="#4a4e51">
+  <meta name="msapplication-TileColor" content="#4a4e51">
+  <meta name="theme-color" content="#4a4e51">
+
   <meta name="metro4:init" content="true">
   <script type="text/javascript" src="../lib/jquery/jquery.min.js"></script>
   <link rel="stylesheet" href="../lib/metro4/css/metro-all.css" />
@@ -100,8 +124,9 @@
             <span class="caption">Stop</span>
           </button>
         </div>
-
       </form>
+
+
       <center>
         <table class="drotable mb-2">
           <tr>
@@ -307,7 +332,7 @@
                   <tr>
                     <td colspan="4">
                       <div style="margin: 2px;">
-                        <input id="jograte" type="number" min="100" max="10000" step="500" placeholder="1000" data-role="input" data-prepend="Jog Feedrate:" data-clear-button="false" value="1000" style="text-align: right;" />
+                        <input id="jograte" type="number" min="100" max="10000" step="500" placeholder="5000" data-role="input" data-prepend="Jog Feedrate:" data-clear-button="false" value="5000" style="text-align: right;" />
                       </div>
                     </td>
                   </tr>
@@ -320,7 +345,6 @@
             <div class="title_box" id="bill_to">
               <div id="title"><small>Jog Touchpad</small></div>
               <div id="svgview">
-
               </div>
             </div>
           </div>

app/jog/manifest.json

@@ -0,0 +1,23 @@
+{
+  "name": "PWA Splash",
+  "short_name": "PWA Splash",
+  "description": "PWA SPlash Screens",
+  "scope": ".",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "icons": [
+    {
+      "src": "images/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

app/jog/service-worker.js

@@ -0,0 +1,29 @@
+self.addEventListener('install', function(event) {
+  console.log('[Service Worker] Installing Service Worker ...', event);
+  event.waitUntil(
+    caches.open('static').then(function(cache) {
+      cache.addAll(['/', '/index.html', '/app.js', '/manifest.json']);
+    })
+  );
+});
+
+self.addEventListener('activate', function(event) {
+  console.log('[Service Worker] Activating Service Worker ....', event);
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      if (response) {
+        return response;
+      } else {
+        return fetch(event.request).then(function(res) {
+          return caches.open('dynamic').then(function(cache) {
+            cache.put(event.request.url, res.clone());
+            return res;
+          });
+        });
+      }
+    })
+  );
+});

app/js/mobilejog.js

@@ -7,24 +7,26 @@ SVG.on(document, 'DOMContentLoaded', function() {
 
 $(document).ready(function() {
   $("#svgview").swipe(function(direction, offset, eventstate) {
-    event.preventDefault();
+    if (laststatus.comms.connectionStatus == 1 || laststatus.comms.connectionStatus == 2) {
-    draw.clear()
+      event.preventDefault();
-    console.log("Moving", direction.x, "and", direction.y);
+      draw.clear()
-    console.log("Touch moved by", offset.x, "horizontally and", offset.y, "vertically");
+      console.log("Moving", direction.x, "and", direction.y);
-    console.log("Event state ", eventstate)
+      console.log("Touch moved by", offset.x, "horizontally and", offset.y, "vertically");
-    var height = draw.node.clientHeight;
+      console.log("Event state ", eventstate)
-    var width = draw.node.clientWidth;
+      var height = draw.node.clientHeight;
-    line = draw.line(width / 2, height / 2, (width / 2) + offset.x, (height / 2) + offset.y * -1).stroke({
+      var width = draw.node.clientWidth;
-      width: 5
+      line = draw.line(width / 2, height / 2, (width / 2) + offset.x, (height / 2) + offset.y * -1).stroke({
-    })
+        width: 5
-    if (eventstate == 'up') {
+      })
-      var feedrate = $('#jograte').val();
+      if (eventstate == 'up') {
-      jogXY((offset.x / 10).toFixed(2), (offset.y / 10).toFixed(2), feedrate)
+        var feedrate = $('#jograte').val();
-      Metro.toast.create("Delta move: X: " + (offset.x / 10).toFixed(2) + " / Y: " + (offset.y / 10).toFixed(2), null, 1000);
+        jogXY((offset.x / 10).toFixed(2), (offset.y / 10).toFixed(2), feedrate)
-      setTimeout(function() {
+        Metro.toast.create("Delta move: X: " + (offset.x / 10).toFixed(2) + " / Y: " + (offset.y / 10).toFixed(2), null, 1000);
-        draw.clear()
+        setTimeout(function() {
-      }, 1000)
+          draw.clear()
+        }, 1000)
 
+      }
     }
   });
 });

app/js/ui.js

@@ -96,7 +96,7 @@ function setControlBar(val, status) {
     $('#toolBtn').hide().attr('disabled', true);
     $('#homeBtn').hide().attr('disabled', true);
     $('.estop').hide()
-  } else if (val == 0 || val == 2) { // Connected, but not Playing yet
+  } else if (val == 1 || val == 2) { // Connected, but not Playing yet
     if (typeof ace !== 'undefined') {
       $('#runBtn').show().attr('disabled', editor.session.getLength() < 2);
     } else {
@@ -138,6 +138,7 @@ function setControlBar(val, status) {
 function setJogPanel(val, status) {
   if (val == 0) { // Not Connected Yet
     // Show panel and resize editor
+    $("#svgview").css('background-color', '#f5f6f7');
     $("#jogcontrols").slideUp(20);
     $("#editor").css('height', 'calc(' + 100 + 'vh - ' + 290 + 'px)');
     $("#console").css('height', 'calc(' + 100 + 'vh - ' + 290 + 'px)');
@@ -149,8 +150,13 @@ function setJogPanel(val, status) {
     if ($('#jograte').attr('disabled')) {
       $('#jograte').attr('disabled', false);
     }
-  } else if (val == 0 || val == 2) { // Connected, but not Playing yet
+    $('#xPos').html('0.00');
+    $('#yPos').html('0.00');
+    $('#zPos').html('0.00');
+
+  } else if (val == 1 || val == 2) { // Connected, but not Playing yet
     // Show panel and resize editor
+    $("#svgview").css('background-color', '#ffffff');
     $("#jogcontrols").slideDown(20);
     $("#editor").css('height', 'calc(' + 100 + 'vh - ' + 480 + 'px)');
     $("#console").css('height', 'calc(' + 100 + 'vh - ' + 480 + 'px)');
@@ -164,6 +170,7 @@ function setJogPanel(val, status) {
     }
   } else if (val == 3) { // Busy Streaming GCODE
     // Show panel and resize editor
+    $("#svgview").css('background-color', '#f5f6f7');
     $("#editor").css('height', 'calc(' + 100 + 'vh - ' + 480 + 'px)');
     $("#console").css('height', 'calc(' + 100 + 'vh - ' + 480 + 'px)');
     // $('#console').scrollTop($("#console")[0].scrollHeight - $("#console").height());
@@ -177,6 +184,7 @@ function setJogPanel(val, status) {
     }
   } else if (val == 4) { // Paused
     // Show panel and resize editor
+    $("#svgview").css('background-color', '#f5f6f7');
     $("#jogcontrols").slideDown(20);
     $("#editor").css('height', 'calc(' + 100 + 'vh - ' + 480 + 'px)');
     $("#console").css('height', 'calc(' + 100 + 'vh - ' + 480 + 'px)');
@@ -190,6 +198,7 @@ function setJogPanel(val, status) {
     }
   } else if (val == 5) { // Alarm State
     // Show panel and resize editor
+    $("#svgview").css('background-color', '#f5f6f7');
     $("#jogcontrols").slideUp(20);
     $("#editor").css('height', 'calc(' + 100 + 'vh - ' + 290 + 'px)');
     $("#console").css('height', 'calc(' + 100 + 'vh - ' + 290 + 'px)');

app/js/websocket.js

@@ -216,18 +216,6 @@ function initSocket() {
       }
     }
 
-    // Set the Connection Toolbar option
-    setConnectBar(status.comms.connectionStatus, status);
-    setControlBar(status.comms.connectionStatus, status)
-    setJogPanel(status.comms.connectionStatus, status)
-    setConsole(status.comms.connectionStatus, status)
-    if (status.comms.connectionStatus != 5) {
-      bellstate = false
-    };
-    if (status.comms.connectionStatus == 0) {
-      showGrbl(false)
-    }
-
     $('#runStatus').html("Controller: " + status.comms.runStatus);
 
 
@@ -390,6 +378,18 @@ function initSocket() {
     //
     // }
 
+    // Set the Connection Toolbar option
+    setConnectBar(status.comms.connectionStatus, status);
+    setControlBar(status.comms.connectionStatus, status)
+    setJogPanel(status.comms.connectionStatus, status)
+    setConsole(status.comms.connectionStatus, status)
+    if (status.comms.connectionStatus != 5) {
+      bellstate = false
+    };
+    if (status.comms.connectionStatus == 0) {
+      showGrbl(false)
+    }
+
     laststatus = status;
   });
 

app/lib/jquery/jquery-swipe.js

@@ -20,11 +20,17 @@ $(function() {
     };
 
     function swipeInfo(event) {
+      console.log(event.originalEvent)
+      if (event.originalEvent.touches) {
+        var x = event.originalEvent.touches[0].pageX,
+          y = event.originalEvent.touches[0].pageY,
+          dx, dy;
+      } else {
+        var x = event.originalEvent.pageX,
+          y = event.originalEvent.pageY,
+          dx, dy;
+      }
 
-      // console.log(event.originalEvent.touches[0])
-      var x = event.originalEvent.touches[0].pageX,
-        y = event.originalEvent.touches[0].pageY,
-        dx, dy;
 
       dx = (x > originalPosition.x) ? "right" : "left";
       dy = (y > originalPosition.y) ? "down" : "up";
@@ -44,10 +50,18 @@ $(function() {
     $el.on("touchstart mousedown", function(event) {
       touchDown = true;
       info.eventstate = 'down';
-      originalPosition = {
+      if (event.originalEvent.touches) {
-        x: event.originalEvent.touches[0].pageX,
+        originalPosition = {
-        y: event.originalEvent.touches[0].pageY
+          x: event.originalEvent.touches[0].pageX,
-      };
+          y: event.originalEvent.touches[0].pageY
+        };
+      } else {
+        originalPosition = {
+          x: event.originalEvent.x,
+          y: event.originalEvent.y
+        };
+      }
+
       callback(info.direction, info.offset, info.eventstate, originalPosition);
     });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "OpenBuildsMachineDriver",
-  "version": "1.0.76",
+  "version": "1.0.78",
   "license": "AGPL-3.0",
   "description": "Machine Interface Driver for OpenBuilds",
   "author": "github.com/openbuilds <webmaster@openbuilds.com>",