Improved visibility observer on MJPEG streams

openflexure_microscope/api/static/package-lock.json

@@ -12983,6 +12983,11 @@
         }
       }
     },
+    "vue-observe-visibility": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
+      "integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q=="
+    },
     "vue-plugin-load-script": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/vue-plugin-load-script/-/vue-plugin-load-script-1.2.0.tgz",

openflexure_microscope/api/static/package.json

@@ -14,7 +14,8 @@
   },
   "dependencies": {
     "material-design-icons": "^3.0.1",
-    "mousetrap": "^1.6.5"
+    "mousetrap": "^1.6.5",
+    "vue-observe-visibility": "^0.4.6"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.12.1",

openflexure_microscope/api/static/src/components/viewComponents/miniStreamDisplay.vue

@@ -2,9 +2,11 @@
   <div
     id="stream-display"
     ref="streamDisplay"
+    v-observe-visibility="visibilityChanged"
     class="stream-display uk-width-1-1 uk-height-1-1 scrollTarget"
   >
     <img
+      v-if="isVisible"
       ref="click-frame"
       class="uk-align-center uk-margin-remove-bottom"
       :src="streamImgUri"
@@ -19,7 +21,9 @@ export default {
   name: "MiniStreamDisplay",
 
   data: function() {
-    return {};
+    return {
+      isVisible: false
+    };
   },
 
   computed: {
@@ -27,7 +31,11 @@ export default {
       return `${this.$store.getters.baseUri}/api/v2/streams/mjpeg`;
     }
   },
-  methods: {}
+  methods: {
+    visibilityChanged(isVisible) {
+      this.isVisible = isVisible;
+    }
+  }
 };
 </script>
 

openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/cameraSettings.vue

@@ -59,19 +59,25 @@
     <!--Show auto calibrate if default plugin is enabled-->
     <h3>Automatic calibration</h3>
     <cameraCalibrationSettings></cameraCalibrationSettings>
+
+    <div id="mini-stream">
+      <miniStreamDisplay />
+    </div>
   </div>
 </template>
 
 <script>
 import axios from "axios";
 import cameraCalibrationSettings from "./cameraCalibrationSettings.vue";
+import miniStreamDisplay from "../miniStreamDisplay.vue";
 
 // Export main app
 export default {
   name: "CameraSettings",
 
   components: {
-    cameraCalibrationSettings
+    cameraCalibrationSettings,
+    miniStreamDisplay
   },
 
   data: function() {
@@ -133,4 +139,13 @@ export default {
 };
 </script>
 
-<style lang="less"></style>
+<style lang="less">
+#mini-stream {
+  width: 500px;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 50px;
+  border: 1px solid #555;
+}
+</style>

openflexure_microscope/api/static/src/components/viewComponents/streamDisplay.vue

@@ -2,10 +2,11 @@
   <div
     id="stream-display"
     ref="streamDisplay"
+    v-observe-visibility="visibilityChanged"
     class="stream-display uk-width-1-1 uk-height-1-1 scrollTarget"
   >
     <img
-      v-if="thisStreamOpen"
+      v-if="isVisible"
       ref="click-frame"
       class="uk-align-center uk-margin-remove-bottom"
       :hidden="!streamEnabled"
@@ -42,6 +43,7 @@ export default {
 
   data: function() {
     return {
+      isVisible: false,
       displaySize: [0, 0],
       displayPosition: [0, 0],
       fov: [0, 0],
@@ -119,6 +121,9 @@ export default {
   },
 
   methods: {
+    visibilityChanged(isVisible) {
+      this.isVisible = isVisible;
+    },
     flashStream: function() {
       // Run an animation that flashes the stream (for capture feedback)
       let element = this.$refs.streamDisplay;

openflexure_microscope/api/static/src/main.js

@@ -5,6 +5,7 @@ import UIkit from "uikit";
 import VueTour from "vue-tour";
 import LoadScript from "vue-plugin-load-script";
 import VueFriendlyIframe from "vue-friendly-iframe";
+import VueObserveVisibility from "vue-observe-visibility";
 
 require("vue-tour/dist/vue-tour.css");
 
@@ -30,6 +31,9 @@ Vue.use(VueTour);
 // Use Friendly Iframe module
 Vue.use(VueFriendlyIframe);
 
+// Use visibility observer
+Vue.use(VueObserveVisibility);
+
 Vue.config.productionTip = false;
 
 Vue.mixin({