Merge pull request #23 from dacarley/put-away-probe-modal

Added a popup to remind user to put away the probe

src/js/app.js

@@ -397,10 +397,12 @@ module.exports = new Vue({
     },
 
     connect: function () {
-      this.sock = new Sock('//' + window.location.host + '/sockjs');
+      this.sock = new Sock(`//${location.host}/sockjs`);
 
-      this.sock.onmessage = function (e) {
+      this.sock.onmessage = (e) => {
-        if (typeof e.data != 'object') return;
+        if (typeof e.data != 'object') {
+          return;
+        }
 
         if ('log' in e.data) {
           this.$broadcast('log', e.data.log);
@@ -409,37 +411,44 @@ module.exports = new Vue({
 
         // Check for session ID change on controller
         if ('sid' in e.data) {
-          if (typeof this.sid == 'undefined') this.sid = e.data.sid;
+          if (typeof this.sid == 'undefined') {
-
+            this.sid = e.data.sid;
-          else if (this.sid != e.data.sid) {
+          } else if (this.sid != e.data.sid) {
-            if (typeof this.hostname != 'undefined' &&
+            if (typeof this.hostname !== 'undefined' && location.hostname !== 'localhost') {
-                String(location.hostname) != 'localhost')
               location.hostname = this.hostname;
-            location.reload(true);
+            }
+
+            location.reload();
           }
         }
 
         update_object(this.state, e.data, false);
 
         if (this.state.pw === 0) {
-          Vue.set(this.state, "probe_connected", true);
+          Vue.set(this.state, "saw_probe_connected", true);
+        }
+
+        if (this.state.cycle === 'idle') {
+          if (this.state.wait_for_probing_complete) {
+            Vue.set(this.state, "wait_for_probing_complete", false);
+            Vue.set(this.state, "show_probe_complete_modal", true);
+          }
         }
 
         this.$broadcast('update');
+      };
 
-      }.bind(this)
+      this.sock.onopen = () => {
-
-      this.sock.onopen = function (e) {
         this.status = 'connected';
         this.$emit(this.status);
         this.$broadcast(this.status);
-      }.bind(this)
+      };
 
-      this.sock.onclose = function (e) {
+      this.sock.onclose = () => {
         this.status = 'disconnected';
         this.$emit(this.status);
         this.$broadcast(this.status);
-      }.bind(this)
+      };
     },
 
 

src/js/control-view.js

@@ -30,23 +30,10 @@
 var api    = require('./api');
 var cookie = require('./cookie')('bbctrl-');
 
-
-function _is_array(x) {
-  return Object.prototype.toString.call(x) === '[object Array]';
-}
-
-
-function escapeHTML(s) {
-  var entityMap = {'&': '&amp;', '<': '&lt;', '>': '&gt;'};
-  return String(s).replace(/[&<>]/g, function (s) {return entityMap[s];});
-}
-
-
 module.exports = {
   template: '#control-view-template',
   props: ['config', 'template', 'state'],
 
-
   data: function () {
     return {
       mach_units: 'METRIC',
@@ -59,18 +46,40 @@ module.exports = {
       history: [],
       speed_override: 1,
       feed_override: 1,
-      manual_home: {x: false, y: false, z: false, a: false, b: false, c: false},
+      manual_home: {
-      position_msg: {x: false, y: false, z: false, a: false, b: false, c: false},
+        x: false,
+        y: false,
+        z: false,
+        a: false,
+        b: false,
+        c: false
+      },
+      position_msg: {
+        x: false,
+        y: false,
+        z: false,
+        a: false,
+        b: false,
+        c: false
+      },
       axis_position: 0,
       jog_step: cookie.get_bool('jog-step'),
       jog_adjust: parseInt(cookie.get('jog-adjust', 2)),
       deleteGCode: false,
       tab: 'auto',
       jog_incr: 1.0,
-      probe_test: false,
-      tool_msg: false,
       tool_diameter: 6.35,
-      toolpath_msg: {x: false, y: false, z: false, a: false, b: false, c: false},
+      show_probe_test_modal: false,
+      show_tool_diameter_modal: false,
+      show_probe_complete_modal: false,
+      toolpath_msg: {
+        x: false,
+        y: false,
+        z: false,
+        a: false,
+        b: false,
+        c: false
+      },
       ask_home: true,
       ask_home_msg: false,
       ask_zero_xy_msg: false,
@@ -79,7 +88,6 @@ module.exports = {
     }
   },
 
-
   components: {
     'axis-control': require('./axis-control'),
     'path-viewer': require('./path-viewer'),
@@ -256,18 +264,17 @@ module.exports = {
       }
 
       this.set_jog_incr('small');
-
     },
 
     start_probe_test: function(on_finish) {
-      this.probe_test = true;
+      this.show_probe_test_modal = true;
-      Vue.set(this.state, "probe_connected", false);
+      Vue.set(this.state, "saw_probe_connected", false);
       Vue.set(this.state, "on_probe_finish", on_finish);
     },
 
     finish_probe_test: function() {
-      this.probe_test = false;
+      this.show_probe_test_modal = false;
-      Vue.set(this.state, "probe_connected", false);
+      Vue.set(this.state, "saw_probe_connected", false);
 
       const on_finish = this.state.on_probe_finish;
       Vue.set(this.state, "on_probe_finish", undefined);
@@ -275,15 +282,11 @@ module.exports = {
       on_finish();
     },
 
-    show_tool_diameter_prompt: function() {
-      this.tool_msg = true;
-    },
-
     set_tool_diameter : function (new_diameter) {
       if(isNaN(new_diameter))
         return;
 
-      this.tool_msg = false;
+      this.show_tool_diameter_modal = false;
 
       this.tool_diameter = parseFloat(new_diameter);
       
@@ -298,31 +301,30 @@ module.exports = {
       document.getElementById("jog_button_medium").style.fontWeight = 'normal';
       document.getElementById("jog_button_large").style.fontWeight = 'normal';
 
-      if(newValue == 'fine')
+      if (newValue == 'fine') {
-      {
         document.getElementById("jog_button_fine").style.fontWeight = 'bold';
         if(this.mach_units == 'METRIC')
           this.jog_incr = 0.1;
         else
           this.jog_incr = 0.005;
-      } else if(newValue == 'small') {
+      } else if (newValue == 'small') {
         document.getElementById("jog_button_small").style.fontWeight = 'bold';
         if(this.mach_units == 'METRIC')
           this.jog_incr = 1.0;
         else
           this.jog_incr = 0.05;
-      } else if(newValue == 'medium') {
+      } else if (newValue == 'medium') {
         document.getElementById("jog_button_medium").style.fontWeight = 'bold';
         if(this.mach_units == 'METRIC')
           this.jog_incr = 10;
         else
           this.jog_incr = 0.5;
-      } else if(newValue == 'large') {
+      } else if (newValue == 'large') {
         document.getElementById("jog_button_large").style.fontWeight = 'bold';
-        if(this.mach_units == 'METRIC')
+
-          this.jog_incr = 100;
+        this.jog_incr = (this.mach_units == 'METRIC')
-        else
+          ? 100
-          this.jog_incr = 5;
+          : 5;
       }
 
 
@@ -398,6 +400,8 @@ module.exports = {
 
         M2
       `);
+
+      setTimeout(() => Vue.set(this.state, "wait_for_probing_complete", true), 1000);
     },
 
     probe_z() {
@@ -426,6 +430,8 @@ module.exports = {
 
         M2
       `);
+
+      setTimeout(() => Vue.set(this.state, "wait_for_probing_complete", true), 1000);
     },
 
     jog_fn: function (x_jog,y_jog,z_jog,a_jog) {

src/pug/templates/control-view.pug

@@ -311,8 +311,10 @@ script#control-view-template(type="text/x-template")
                       label {{(progress || 0) | percent}}
                       .bar(:style="'width:' + (progress || 0) * 100 + '%'")
       tr
-        td.control-buttons(style="white-space: nowrap;text-align:center")
+
-          message(:show.sync=`probe_test`)
+        td(style="white-space: nowrap;text-align:center")
+          message(:show.sync=`show_probe_test_modal`)
+
             h3(slot="header") Test probe connection
 
             div(slot="body")
@@ -321,14 +323,14 @@ script#control-view-template(type="text/x-template")
                 p Touch the probe block to the bit.
 
             div(slot="footer")
-              button.pure-button(@click=`probe_test = false`)
+              button.pure-button(@click=`show_probe_test_modal = false`)
                 | Cancel
 
               button.pure-button.button-success(
-                :disabled=`!state.probe_connected`
+                :disabled=`!state.saw_probe_connected`
                 @click=`finish_probe_test()`) Continue
 
-          message(:show.sync=`tool_msg`)
+          message(:show.sync=`show_tool_diameter_modal`)
             h3(slot="header") Enter probe tool information
 
             div(slot="body")
@@ -340,15 +342,32 @@ script#control-view-template(type="text/x-template")
               p
 
             div(slot="footer")
-              button.pure-button(@click=`tool_msg = false`)
+              button.pure-button(@click=`show_tool_diameter_modal = false`)
                 | Cancel
 
               button.pure-button.button-success(
-                @click=`set_tool_diameter(tool_diameter)`) Set
+                @click=`set_tool_diameter(tool_diameter)`)
+                | Set
 
-          button(:class="state['pw'] ? '' : 'load-on'", style="height:100px;width:200px", @click=`start_probe_test(show_tool_diameter_prompt)`) Probe XYZ
+          message(:show.sync=`state.show_probe_complete_modal`)
-          button(:class="state['pw'] ? '' : 'load-on'", style="height:100px;width:200px", @click=`start_probe_test(probe_z)`) Probe Z
+            h3(slot="header") Probing complete!
 
+            div(slot="body")
+              .pure-form
+                p Don't forget to put away the probe!
+
+            div(slot="footer")
+              button.pure-button.button-success(@click=`state.show_probe_complete_modal = false`)
+                | Done
+
+          button(:class="state['pw'] ? '' : 'load-on'",
+            style="height:100px;width:200px",
+            @click=`start_probe_test(() => { show_tool_diameter_modal = true })`)
+              | Probe XYZ
+          button(:class="state['pw'] ? '' : 'load-on'",
+            style="height:100px;width:200px",
+            @click=`start_probe_test(probe_z)`)
+              | Probe Z
 
     .tabs