Update UI

app/css/main.css

@@ -59,6 +59,30 @@ body {
                                      supported by Chrome and Opera */
 }
 
+#updateconsole {
+    /*font-family: "Courier New", Courier, monospace;*/
+    font-family: "Lucida Console", Monaco, monospace;
+    max-height: calc(100vh - 260px);
+    height: calc(100vh - 200px);
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: none;
+    text-align: left;
+    /* background-color: #444; */
+    padding: 0px;
+    font-size: 12px;
+    padding-left: 20px;
+    white-space:normal;
+    margin-bottom: 0px;
+    -webkit-touch-callout:  text; /* iOS Safari */
+       -webkit-user-select: text; /* Safari */
+        -khtml-user-select: text; /* Konqueror HTML */
+          -moz-user-select: text; /* Firefox */
+           -ms-user-select: text; /* Internet Explorer/Edge */
+               user-select: text; /* Non-prefixed version, currently
+                                     supported by Chrome and Opera */
+}
+
 .pf {
     margin-top: 0px;
     margin-bottom: -4px;

app/index.html

@@ -27,12 +27,12 @@
       </div>
     </div>
     <div class="window-content" style="height: 100%; overflow: hidden  !important;">
-
       <nav data-role="ribbonmenu" class="mt-1">
         <ul class="tabs-holder">
           <li><a href="#section-one" onclick="connectionPanel();">Connection</a></li>
           <li id="grblSettings" style="display: none;"><a href="#section-grbl" onclick="grblPanel();">Grbl Settings</a></li>
           <li><a href="#section-two" onclick="manualcontrolPanel();">Control</a></li>
+          <li><a href="#section-update" onclick="updatePanel();">Update</a></li>
         </ul>
         <div class="content-holder">
           <div class="section" id="section-one">
@@ -228,6 +228,33 @@
               <span class="title">E-Stop</span>
             </div>
           </div>
+          <div class="section" id="section-update">
+
+            <div class="group" style="width: calc(100vw - 90px);">
+              <button id="checkforupdatesbtn" class="ribbon-button" onclick="socket.emit('checkUpdates', true)">
+                <span class="icon">
+                  <span class="fa-layers fa-fw">
+                    <i class="fas fa-sync-alt fg-green" data-fa-transform="grow-8"></i>
+                    <i class="fas fa-download" data-fa-transform="grow-1 left-0.5"></i>
+                    <div id="downloadprogress" style="display: none; color: #fff ; background-color: rgba(0, 0, 0, 0.6); font-weight:900; font-family: Arial; font-size: 12px; border: 1px solid ##607d8b; border-radius: 2px;">99%</div>
+                  </span>
+                </span>
+                <span class="caption">Check for<br>Updates</span>
+              </button>
+              <button id="applyupdatesbtn" class="ribbon-button" onclick="socket.emit('applyUpdate', true)" disabled>
+                <span class="icon">
+                  <span class="fa-layers fa-fw">
+                    <i class="fas fa-cog fg-red" data-fa-transform="grow-8"></i>
+                    <i class="fas fa-download" data-fa-transform="grow-1 left-0.5"></i>
+                    <i class="fa-inverse far fa-check-square" data-fa-transform="shrink-8 down-5"></i>
+                  </span>
+                </span>
+                <span class="caption">Install<br>Update</span>
+              </button>
+              <span class="title">Online Updates</span>
+            </div>
+
+          </div>
         </div>
       </nav>
 
@@ -504,6 +531,9 @@
       <div id="grblPanel" style="display: none;">
         <div id="grblconfig"></div>
       </div>
+      <div id="updatePanel">
+        <div id="updateconsole">Click "Check for Updates" above</div>
+      </div>
 
       <!-- Bottom StatusBar -->
       <div class="fixed-bottom">

app/js/metroactions.js

@@ -29,13 +29,14 @@ function connectionPanel() {
   $('#connectionPanel').show()
   $('#manualControlPanel').hide()
   $('#grblPanel').hide()
-
+  $('#updatePanel').hide()
 }
 
 function manualcontrolPanel() {
   $('#connectionPanel').hide()
   $('#manualControlPanel').show()
   $('#grblPanel').hide()
+  $('#updatePanel').hide()
 }
 
 function grblPanel() {
@@ -43,4 +44,12 @@ function grblPanel() {
   $('#connectionPanel').hide()
   $('#manualControlPanel').hide()
   $('#grblPanel').show()
+  $('#updatePanel').hide()
+}
+
+function updatePanel() {
+  $('#connectionPanel').hide()
+  $('#manualControlPanel').hide()
+  $('#grblPanel').hide()
+  $('#updatePanel').show()
 }

app/js/websocket.js

@@ -47,6 +47,24 @@ function printLog(string) {
   $('#console').scrollTop($("#console")[0].scrollHeight - $("#console").height());
 }
 
+function printUpdateLog(string) {
+  if (string.isString) {
+    // split(/\r\n|\n|\r/);
+    string = string.replace(/\r\n|\n|\r/, "<br />");
+  }
+  if ($('#console p').length > 100) {
+    // remove oldest if already at 300 lines
+    $('#console p').first().remove();
+  }
+  var template = '<p class="pf">';
+  var time = new Date();
+
+  template += '<span class="fg-brandColor1">[' + (time.getHours() < 10 ? '0' : '') + time.getHours() + ":" + (time.getMinutes() < 10 ? '0' : '') + time.getMinutes() + ":" + (time.getSeconds() < 10 ? '0' : '') + time.getSeconds() + ']</span> ';
+  template += string;
+  $('#updateconsole').append(template);
+  $('#updateconsole').scrollTop($("#updateconsole")[0].scrollHeight - $("#updateconsole").height());
+}
+
 
 function initSocket() {
   socket = io.connect(server); // socket.io init
@@ -68,6 +86,21 @@ function initSocket() {
   });
 
 
+  socket.on('updatedata', function(data) {
+    // console.log(data.length, data)
+    var toPrint = data.response;
+    printUpdateLog("<span class='fg-red'>[ " + data.command + " ]</span>  <span class='fg-green'>" + toPrint + "</span>")
+  });
+
+  socket.on('updateready', function(data) {
+    $('#applyupdatesbtn').prop('disabled', false);
+  });
+
+  socket.on('updateprogress', function(data) {
+    $('#checkforupdatesbtn').prop('disabled', true);
+    $('#downloadprogress').show();
+    $('#downloadprogress').html(data + "%");
+  });
 
   socket.on('data', function(data) {
     // console.log(data.length, data)

index.js

@@ -86,7 +86,7 @@ var appIcon = null,
 const autoUpdater = require("electron-updater").autoUpdater
 
 electronApp.on('ready', function() {
-  autoUpdater.checkForUpdates();
+  // autoUpdater.checkForUpdates();
 });
 
 autoUpdater.on('checking-for-update', () => {
@@ -95,7 +95,7 @@ autoUpdater.on('checking-for-update', () => {
     'command': 'autoupdate',
     'response': string
   }
-  io.sockets.emit('data', output);
+  io.sockets.emit('updatedata', output);
   appIcon.displayBalloon({
     icon: nativeImage.createFromPath(iconPath),
     title: "OpenBuilds Machine Driver",
@@ -103,12 +103,12 @@ autoUpdater.on('checking-for-update', () => {
   })
 })
 autoUpdater.on('update-available', (ev, info) => {
-  var string = 'Update available.\n'
+  var string = 'Update available.Installed version: ' + require('./package').version + " / Available version: " + ev.version
   var output = {
     'command': 'autoupdate',
     'response': string
   }
-  io.sockets.emit('data', output);
+  io.sockets.emit('updatedata', output);
   appIcon.displayBalloon({
     icon: nativeImage.createFromPath(iconPath),
     title: "OpenBuilds Machine Driver",
@@ -116,12 +116,12 @@ autoUpdater.on('update-available', (ev, info) => {
   })
 })
 autoUpdater.on('update-not-available', (ev, info) => {
-  var string = 'Update not available.';
+  var string = 'Update not available. Installed version: ' + require('./package').version + " / Available version: " + ev.version + ". Starting Download...\n";
   var output = {
     'command': 'autoupdate',
     'response': string
   }
-  io.sockets.emit('data', output);
+  io.sockets.emit('updatedata', output);
   appIcon.displayBalloon({
     icon: nativeImage.createFromPath(iconPath),
     title: "OpenBuilds Machine Driver",
@@ -129,12 +129,12 @@ autoUpdater.on('update-not-available', (ev, info) => {
   })
 })
 autoUpdater.on('error', (ev, err) => {
-  var string = 'Error in auto-updater.';
+  var string = 'Error in auto-updater: \n' + err.split('SyntaxError')[0];
   var output = {
     'command': 'autoupdate',
     'response': string
   }
-  io.sockets.emit('data', output);
+  io.sockets.emit('updatedata', output);
   appIcon.displayBalloon({
     icon: nativeImage.createFromPath(iconPath),
     title: "OpenBuilds Machine Driver",
@@ -148,21 +148,25 @@ autoUpdater.on('download-progress', (ev, progressObj) => {
     'command': 'autoupdate',
     'response': string
   }
-  io.sockets.emit('data', output);
-  appIcon.displayBalloon({
-    icon: nativeImage.createFromPath(iconPath),
-    title: "OpenBuilds Machine Driver",
-    content: string
-  })
+  io.sockets.emit('updatedata', output);
+  io.sockets.emit('updateprogress', ev.percent.toFixed(0));
+  if (ev.percent % 10 === 0) {
+    appIcon.displayBalloon({
+      icon: nativeImage.createFromPath(iconPath),
+      title: "OpenBuilds Machine Driver",
+      content: string
+    })
+  }
 })
 
 autoUpdater.on('update-downloaded', (info) => {
-  var string = "New update ready";
+  var string = "New update ready.  Click INSTALL UPDATE once you are ready. NB Note that this closes the running instance of the OpenBuilds Machine Driver, and aborts any running jobs.  Only run the Update before beginning a job / once you are done working with your machine. ";
   var output = {
     'command': 'autoupdate',
     'response': string
   }
-  io.sockets.emit('data', output);
+  io.sockets.emit('updatedata', output);
+  io.sockets.emit('updateready', true);
   appIcon.displayBalloon({
     icon: nativeImage.createFromPath(iconPath),
     title: "OpenBuilds Machine Driver",
@@ -686,6 +690,11 @@ io.on("connection", function(socket) {
     autoUpdater.quitAndInstall();
   })
 
+  socket.on("checkUpdates", function(data) {
+    autoUpdater.checkForUpdates();
+  })
+
+
   socket.on("connectTo", function(data) { // If a user picks a port to connect to, open a Node SerialPort Instance to it
 
     if (status.comms.connectionStatus < 1) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "OpenBuildsMachineDriver",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "license": "AGPL-3.0",
   "description": "Machine Interface Driver for OpenBuilds",
   "author": "github.com/openbuilds",