Merge branch 'updated-gpu-preview' into 'master'

Fixed toggling GPU preview when switching tabs

See merge request openflexure/openflexure-microscope-jsclient!51

package-lock.json

@@ -8804,7 +8804,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -8825,12 +8826,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -8845,17 +8848,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -8972,7 +8978,8 @@
         "inherits": {
           "version": "2.0.4",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -8984,6 +8991,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -8998,6 +9006,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -9005,12 +9014,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.9.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -9029,6 +9040,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -9118,7 +9130,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -9130,6 +9143,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -9215,7 +9229,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -9251,6 +9266,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -9270,6 +9286,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -9313,12 +9330,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },

src/components/viewComponents/connectDisplay.vue

@@ -374,7 +374,6 @@ export default {
       this.$store.commit("changeSetting", ["trackWindow", state]);
       this.$store.commit("changeSetting", ["disableStream", state]);
       this.$store.commit("changeSetting", ["autoGpuPreview", state]);
-      //this.$root.$emit('globalTogglePreview', state)
     },
 
     delSavedHost: function(host) {

src/components/viewComponents/streamDisplay.vue

@@ -5,7 +5,7 @@
     class="stream-display uk-width-1-1 uk-height-1-1 scrollTarget"
   >
     <img
-      v-if="streamVisible"
+      v-if="thisStreamOpen"
       ref="click-frame"
       class="uk-align-center uk-margin-remove-bottom"
       :hidden="!streamEnabled"
@@ -45,7 +45,6 @@ export default {
       displaySize: [0, 0],
       displayPosition: [0, 0],
       fov: [0, 0],
-      GpuPreviewActive: false,
       resizeTimeoutId: setTimeout(this.doneResizing, 500)
     };
   },
@@ -57,7 +56,7 @@ export default {
         !this.$store.state.globalSettings.disableStream
       );
     },
-    streamVisible: function() {
+    thisStreamOpen: function() {
       // Only a single MJPEG connection should be open at a time
       return !(this.displaySize[0] == 0) && !(this.displaySize[1] == 0);
     },
@@ -76,9 +75,9 @@ export default {
   },
 
   mounted() {
+    console.log(`${this._uid} mounted`);
     // A global signal listener to change the GPU preview state
     this.$root.$on("globalTogglePreview", state => {
-      console.log(`Toggling preview to ${state}`);
       this.previewRequest(state);
     });
     // A global signal listener to flash the stream element
@@ -97,6 +96,7 @@ export default {
   },
 
   created: function() {
+    console.log(`${this._uid} created`);
     // Send a request to start/stop GPU preview based on global setting
     this.previewRequest(this.$store.state.globalSettings.autoGpuPreview);
     // Get FOV from settings
@@ -104,12 +104,15 @@ export default {
   },
 
   beforeDestroy: function() {
+    console.log(`${this._uid} being destroyed`);
     // Remove global signal listener to change the GPU preview state
     this.$root.$off("globalTogglePreview");
     // Remove global signal listener to flash the stream element
     this.$root.$off("globalFlashStream");
     // Disconnect the size observer
     this.sizeObserver.disconnect();
+    // Remove from the array of active streams
+    this.$store.commit("removeStream", this._uid);
   },
 
   methods: {
@@ -151,18 +154,56 @@ export default {
 
     handleDoneResize: function() {
       // Recalculate size
-      console.log("Recalculating frame size");
+      console.log(`Recalculating frame size for ${this._uid}`);
       this.recalculateSize();
-      if (
+      // Handle closed stream
-        this.$store.state.globalSettings.autoGpuPreview == true &&
+      if (this.displaySize[0] == 0 && this.displaySize[1] == 0) {
-        this.GpuPreviewActive == true
+        console.log(`${this._uid} is zero`);
-      ) {
+        // If this stream was previously active
-        // Reload preview
+        if (this.$store.state.activeStreams[this._uid] == true) {
-        this.$root.$emit("globalTogglePreview", true);
+          console.log(`${this._uid} was active`);
+          console.log(`STREAM ${this._uid} CLOSED`);
+          this.$store.commit("removeStream", this._uid);
+          // If all streams are closed, request the GPU preview close
+          var a = Object.values(this.$store.state.activeStreams);
+          let allClosed = a.every(v => v === false);
+          if (allClosed) {
+            this.previewRequest(false);
+          }
+        }
+        // If resized to anything other than zero
+      } else {
+        console.log(`STREAM ${this._uid} OPEN`);
+        this.$store.commit("addStream", this._uid);
+        if (this.$store.state.globalSettings.autoGpuPreview == true) {
+          // Start the preview immediately
+          this.previewRequest(true);
+          // Send another start preview request after 1 second
+          /*
+          The internal logic of this component means that a stop GPU preview
+          request will only ever be sent if ALL stream components are invisible.
+          However, when switching tabs, sometimes the previous component will
+          react to becoming invisible before the new tab has become visible.
+          This results in a stop-preview request being sent JUST before the new
+          start preview request is sent. In an ideal network, this is fine, however
+          due to network jitter, these requests will occasionally be recieved out
+          of order, causing the preview to start in the new location, and then 
+          quickly stop again.
+          Preventing this properly will involve some clever server-side logic
+          probably, however as a pit-stop solution, we always send another
+          start-preview request after 1 second. This means that either:
+          1. The initial requests happened in order, in which case this follow-up
+          request does nothing, or
+          2. The requests leapfrog eachother, stopping the preview, in which case
+          the follow-up request restarts the preview in the correct location.
+          */
+          setTimeout(() => this.previewRequest(true), 250);
+        }
       }
     },
 
     recalculateSize: function() {
+      // Calculate stream size
       let element = this.$refs.streamDisplay.parentNode;
       let bound = element.getBoundingClientRect();
 
@@ -183,20 +224,26 @@ export default {
 
       this.displaySize = elementSize;
       this.displayPosition = elementPositionOnDisplay;
-
-      console.log(`Size: ${this.displaySize}`);
-      console.log(`Position: ${this.displayPosition}`);
     },
 
     previewRequest: function(state) {
+      var a = Object.values(this.$store.state.activeStreams);
+      let allClosed = a.every(v => v === false);
+      // If all streams are closed, don't start GPU preview
+      if (state === true && allClosed) {
+        return false;
+      }
+      // If not all streams are closed, don't stop GPU preview
+      if (state === false && !allClosed) {
+        return false;
+      }
+      // If requesting starting the stream, but this component is inactive, skip
       if (this.$store.getters.ready == true) {
         var requestUri = null;
-        // Create URI and set this.GpuPreviewActive depending on if starting or stopping preview
+        // Create URI
         if (state == true) {
-          this.GpuPreviewActive = true;
           requestUri = this.startPreviewUri;
         } else {
-          this.GpuPreviewActive = false;
           requestUri = this.stopPreviewUri;
         }
 
@@ -220,6 +267,7 @@ export default {
         }
 
         // Send preview request
+        console.log(`${this._uid} toggled preview to ${state}`);
         axios
           .post(requestUri, payload)
           .then(() => {})

src/store.js

@@ -15,7 +15,8 @@ export default new Vuex.Store({
       autoGpuPreview: false,
       trackWindow: true,
       appTheme: "system"
-    }
+    },
+    activeStreams: {}
   },
 
   mutations: {
@@ -41,6 +42,12 @@ export default new Vuex.Store({
     setError(state, msg) {
       state.waiting = false;
       state.error = msg;
+    },
+    addStream(state, id) {
+      state.activeStreams[id] = true;
+    },
+    removeStream(state, id) {
+      state.activeStreams[id] = false;
     }
   },