First draft fixing GPU preview toggling (9623deec) · Commits · OpenFlexure / openflexure-microscope-server

src/components/viewComponents/connectDisplay.vue

+0 −1

Original line number	Diff line number	Diff line
		@@ -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

+41 −17

Original line number	Diff line number	Diff line
		@@ -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,36 @@ export default {

		handleDoneResize: function() {
		// Recalculate size
		console.log("Recalculating frame size");
		console.log(`Recalculating frame size for ${this._uid}`);
		this.recalculateSize();
		if (
		this.$store.state.globalSettings.autoGpuPreview == true &&
		this.GpuPreviewActive == true
		) {
		// Handle closed stream
		if (this.displaySize[0] == 0 && this.displaySize[1] == 0) {
		console.log(`${this._uid} is zero`);
		// If this stream was previously active
		if (this.$store.state.activeStreams[this._uid] == 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) {
		// Reload preview
		this.$root.$emit("globalTogglePreview", true);
		this.previewRequest(true);
		}
		}
		},

		recalculateSize: function() {
		// Calculate stream size
		let element = this.$refs.streamDisplay.parentNode;
		let bound = element.getBoundingClientRect();

		@@ -183,20 +204,22 @@ export default {

		this.displaySize = elementSize;
		this.displayPosition = elementPositionOnDisplay;

		console.log(`Size: ${this.displaySize}`);
		console.log(`Position: ${this.displayPosition}`);
		},

		previewRequest: function(state) {
		// If all streams are closed, don't start GPU preview
		var a = Object.values(this.$store.state.activeStreams);
		let allClosed = a.every(v => v === false);
		if (state === true && 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 +243,7 @@ export default {
		}

		// Send preview request
		console.log(`${this._uid} toggled preview to ${state}`);
		axios
		.post(requestUri, payload)
		.then(() => {})

src/store.js

+8 −1

Original line number	Diff line number	Diff line
		@@ -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;
		}
		},