Improved visibility observer on MJPEG streams

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;