Commit ac21bb36 authored by Joel Collins's avatar Joel Collins
Browse files

Improved visibility observer on MJPEG streams

parent 292137cf

openflexure_microscope/api/static/package-lock.json

+5 −0
Original line number Diff line number Diff line
@@ -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

+2 −1
Original line number Diff line number Diff line
@@ -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

+10 −2
Original line number Diff line number Diff line
@@ -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

+17 −2
Original line number Diff line number Diff line
@@ -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

+6 −1
Original line number Diff line number Diff line
@@ -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;