rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Only have a single stream connection open at a time

Browse source
This commit is contained in:
Joel Collins 2020-05-14 14:17:02 +01:00
parent 191b333320
commit 9f55085f20
1 changed files with 19 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/viewComponents/streamDisplay.vue
View file

@ -5,15 +5,16 @@
class="stream-display uk-width-1-1 uk-height-1-1 scrollTarget" class="stream-display uk-width-1-1 uk-height-1-1 scrollTarget"
> >
<img <img
v-if="streamVisible"
ref="click-frame" ref="click-frame"
class="uk-align-center uk-margin-remove-bottom" class="uk-align-center uk-margin-remove-bottom"
:hidden="!showStream" :hidden="!streamEnabled"
:src="streamImgUri" :src="streamImgUri"
alt="Stream" alt="Stream"
@dblclick="clickMonitor" @dblclick="clickMonitor"
/> />
<div v-if="!showStream" class="uk-height-1-1"> <div v-if="!streamEnabled" class="uk-height-1-1">
<div v-if="$store.state.waiting" class="uk-position-center"> <div v-if="$store.state.waiting" class="uk-position-center">
<div uk-spinner="ratio: 4.5"></div> <div uk-spinner="ratio: 4.5"></div>
</div> </div>
@ -50,12 +51,16 @@ export default {
}, },
computed: { computed: {
showStream: function() { streamEnabled: function() {
return ( return (
this.$store.getters.ready && this.$store.getters.ready &&
!this.$store.state.globalSettings.disableStream !this.$store.state.globalSettings.disableStream
); );
}, },
streamVisible: function() {
// Only a single MJPEG connection should be open at a time
return !(this.displaySize[0] == 0) && !(this.displaySize[1] == 0);
},
streamImgUri: function() { streamImgUri: function() {
return `${this.$store.getters.baseUri}/api/v2/streams/mjpeg`; return `${this.$store.getters.baseUri}/api/v2/streams/mjpeg`;
}, },
@ -122,14 +127,20 @@ export default {
let yCoordinate = event.offsetY; let yCoordinate = event.offsetY;
let xRelative = let xRelative =
(0.5 * event.target.offsetWidth - xCoordinate) / ((0.5 * event.target.offsetWidth - xCoordinate) /
event.target.offsetWidth * event.target.naturalWidth; event.target.offsetWidth) *
event.target.naturalWidth;
let yRelative = let yRelative =
(0.5 * event.target.offsetHeight - yCoordinate) / ((0.5 * event.target.offsetHeight - yCoordinate) /
event.target.offsetHeight * event.target.naturalHeight; event.target.offsetHeight) *
event.target.naturalHeight;
// Emit a signal to move, acted on by panelNavigate.vue // Emit a signal to move, acted on by panelNavigate.vue
this.$root.$emit("globalMoveInImageCoordinatesEvent", -xRelative, -yRelative); this.$root.$emit(
"globalMoveInImageCoordinatesEvent",
-xRelative,
-yRelative
);
}, },
handleResize: function() { handleResize: function() {