Automatically reconnect web client

diff --git a/src/jade/templates/control-view.jade b/src/jade/templates/control-view.jade
index a6bb3ed1d1b6e1dee8113968cf48df2c45ea22d6..d90b80dcd6ee14d9408c7bd9c431e6af9e4b9040 100644 (file)
--- a/src/jade/templates/control-view.jade
+++ b/src/jade/templates/control-view.jade
@@ -1,4 +1,6 @@
 script#control-view-template(type="text/x-template")
+  .status(:class="status") {{status}}
+
   #control
     .jog
       axis-control(axes="XY", :colors="['red', 'green']",

diff --git a/src/js/control-view.js b/src/js/control-view.js
index 51eb769e6846eda07aab72b00543d3944f13f777..fb90fd067e05afde36f8ec679ed3146a0e9e24f8 100644 (file)
--- a/src/js/control-view.js
+++ b/src/js/control-view.js
@@ -15,6 +15,7 @@ module.exports = {
 
   data: function () {
     return {
+      status: 'connecting',
       mdi: '',
       file: '',
       last_file: '',
@@ -37,40 +38,58 @@ module.exports = {
   events: {
     jog: function (axis, move) {
       console.debug('jog(' + axis + ', ' + move + ')');
-      this.sock.send('g91 g0' + axis + move);
+      this.send('g91 g0' + axis + move);
     },
 
 
     home: function (axis) {
       console.debug('home(' + axis + ')');
-      this.sock.send('$home ' + axis);
+      this.send('$home ' + axis);
     },
 
 
     zero: function (axis) {
       console.debug('zero(' + axis + ')');
-      this.sock.send('$zero ' + axis);
+      this.send('$zero ' + axis);
     }
   },
 
 
   ready: function () {
-    this.sock = new SockJS('//' + window.location.host + '/ws');
-
-    this.sock.onmessage = function (e) {
-      var data = e.data;
-      console.debug('msg: ' + JSON.stringify(data));
-
-      if (typeof data == 'object')
-        for (var key in data)
-          this.$set('state.' + key, data[key]);
-    }.bind(this);
-
+    this.connect();
     this.update();
   },
 
 
   methods: {
+    connect: function () {
+      this.sock = new SockJS('//' + window.location.host + '/ws');
+
+      this.sock.onmessage = function (e) {
+        var data = e.data;
+        console.debug('msg: ' + JSON.stringify(data));
+
+        if (typeof data == 'object')
+          for (var key in data)
+            this.$set('state.' + key, data[key]);
+      }.bind(this);
+
+      this.sock.onopen = function (e) {
+        this.status = 'connected';
+      }.bind(this);
+
+      this.sock.onclose = function (e) {
+        this.status = 'disconnected';
+        setTimeout(this.connect, 2000);
+      }.bind(this);
+    },
+
+
+    send: function (msg) {
+      if (this.status == 'connected') this.sock.send(msg);
+    },
+
+
     enabled: function (axis) {
       var axis = axis.toLowerCase();
       return axis in this.config.axes &&
@@ -97,7 +116,7 @@ module.exports = {
 
 
     submit_mdi: function () {
-      this.sock.send(this.mdi);
+      this.send(this.mdi);
     },
 
 
@@ -154,18 +173,13 @@ module.exports = {
     },
 
 
-    send: function (data) {
-      this.sock.send(JSON.stringify(data));
-    },
-
-
     current: function (axis, value) {
       var x = value / 32.0;
       if (this.state[axis + 'pl'] == x) return;
 
       var data = {};
       data[axis + 'pl'] = x;
-      this.send(data);
+      this.send(JSON.stringify(data));
     },
 
 
@@ -177,7 +191,7 @@ module.exports = {
 
 
     home: function () {
-      this.sock.send('$calibrate');
+      this.send('$calibrate');
     }
   },
 

diff --git a/src/stylus/style.styl b/src/stylus/style.styl
index 9c8d4ae01244e26587a2e3c40baac80215568ffa..ba9876997ea39b3c72600020438e64f837777167 100644 (file)
--- a/src/stylus/style.styl
+++ b/src/stylus/style.styl
@@ -21,6 +21,30 @@ body
   .right
     color #e5aa3d
 
+.error
+  background red
+
+.warn
+  background orange
+
+.success
+  background green
+
+.status
+  color #eee
+  text-align center
+  padding 0.125em
+  font-weight bold
+  margin-bottom 0.5em
+  text-transform uppercase
+
+  &.connecting
+    color orange
+  &.disconnected
+    color red
+  &.connected
+    color green
+
 
 #menu
   .save