From 82a277b04c925ea5886836870140bb7a7eb9665b Mon Sep 17 00:00:00 2001 From: Richard Date: Tue, 27 Apr 2021 16:36:55 +0100 Subject: [PATCH] Cache stream settings in local storage GPU preview and MJPEG stream settings are now persisted using localStorage. The old code that disabled the stream for local connections now just sets the initial/default value. The initialisation of stream settings is now done in the created() method of streamContent.vue. I've eliminated the "globalsafetogglepreview" event in favour of watching the store. --- .../api/static/src/components/appContent.vue | 40 ++++++------------ .../settingsComponents/streamSettings.vue | 41 ++++++++++++++++++- .../tabContentComponents/streamContent.vue | 15 +++++-- 3 files changed, 63 insertions(+), 33 deletions(-) diff --git a/openflexure_microscope/api/static/src/components/appContent.vue b/openflexure_microscope/api/static/src/components/appContent.vue index 60713801..fbc12e8d 100644 --- a/openflexure_microscope/api/static/src/components/appContent.vue +++ b/openflexure_microscope/api/static/src/components/appContent.vue @@ -140,6 +140,8 @@ import loggingContent from "./tabContentComponents/loggingContent.vue"; // Import modal components for device initialisation import calibrationModal from "./modalComponents/calibrationModal.vue"; +import { mapState } from "vuex"; + // Export main app export default { name: "AppContent", @@ -241,21 +243,21 @@ export default { currentTabIndex: function() { return this.tabOrder.indexOf(this.currentTab); + }, + + // Map the setting for IHI's interface so we can watch it + ...mapState(["IHIEnabled"]) + }, + + watch: { + // Update the interface when the IHI interface is enabled/disabled + IHIEnabled: function(newValue) { + this.updateTopTabs(newValue); } }, created: function() { if (this.$store.getters.ready) { - // Detect local connection - if ( - ["localhost", "0.0.0.0", "127.0.0.1", "[::1]"].includes( - window.location.hostname - ) - ) { - this.$store.commit("changeDisableStream", true); - this.$store.commit("changeAutoGpuPreview", true); - this.$store.commit("changeTrackWindow", true); - } // Update top tabs this.updateTopTabs(this.$store.state.IHIEnabled); // Update plugins @@ -264,16 +266,6 @@ export default { this.startModals(); }); } - - // Watch for host 'ready', then update status - this.unwatchStoreFunction = this.$store.watch( - state => { - return state.IHIEnabled; - }, - IHIEnabled => { - this.updateTopTabs(IHIEnabled); - } - ); }, mounted() { @@ -291,14 +283,6 @@ export default { }); }, - beforeDestroy() { - // Then we call that function here to unwatch - if (this.unwatchStoreFunction) { - this.unwatchStoreFunction(); - this.unwatchStoreFunction = null; - } - }, - methods: { updateTopTabs: function(IHIEnabled) { if (IHIEnabled) { diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/streamSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/streamSettings.vue index b21627a6..2136ad5a 100644 --- a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/streamSettings.vue +++ b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/streamSettings.vue @@ -73,8 +73,11 @@ export default { return this.$store.state.autoGpuPreview; }, set(value) { + // NB the stream viewer watches the store, and is + // responsible for making the request that switches + // GPU preview on/off + // see streamContent.vue this.$store.commit("changeAutoGpuPreview", value); - this.$root.$emit("globalSafeTogglePreview", value); } }, @@ -86,6 +89,42 @@ export default { this.$store.commit("changeTrackWindow", value); } } + }, + + watch: { + // Cache the stream settings to local storage for persistence + // (the next 3 functions all relate to this) + disableStream: function(newValue) { + console.log(`disableStream updated to ${newValue} and saved in local storage`); + }, + autoGpuPreview: function(newValue) { + console.log(`GPU preview updated to ${newValue} and saved in local storage`); + }, + trackWindow: function(newValue) { + console.log(`trackWindow updated to ${newValue} and saved in local storage`); + } + }, + + created() { + // Apply sensible defaults for stream settings, depending on + // whether we're connecting locally or remotely, respecting + // the settings that were cached previously. + const localMode = ["localhost", "0.0.0.0", "127.0.0.1", "[::1]"].includes( + window.location.hostname + ); + const localDefaults = { + disableStream: true, + autoGpuPreview: true, + trackWindow: true + }; + for (let k in localDefaults) { + if (localStorage.getItem(k) !== null) { + this[k] = this.getLocalStorageObj(k); + } else if (localMode) { + console.log(`${k} set to default value for a local connection`); + this[k] = localDefaults[k]; + } + } } }; diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/streamContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/streamContent.vue index 2554d621..16fde3e1 100644 --- a/openflexure_microscope/api/static/src/components/tabContentComponents/streamContent.vue +++ b/openflexure_microscope/api/static/src/components/tabContentComponents/streamContent.vue @@ -69,6 +69,16 @@ export default { }, settingsUri: function() { return `${this.$store.getters.baseUri}/api/v2/instrument/settings`; + }, + autoGpuPreview: function() { + return this.$store.state.autoGpuPreview; + } + }, + + watch: { + autoGpuPreview: function(newValue) { + // When the GPU preview setting in the store changes, update the server + this.safePreviewRequest(newValue); } }, @@ -77,9 +87,6 @@ export default { this.$root.$on("globalTogglePreview", state => { this.previewRequest(state); }); - this.$root.$on("globalSafeTogglePreview", state => { - this.safePreviewRequest(state); - }); // A global signal listener to flash the stream element this.$root.$on("globalFlashStream", () => { this.flashStream(); @@ -97,7 +104,7 @@ export default { created: function() { // Send a request to start/stop GPU preview based on global setting - this.safePreviewRequest(this.$store.state.autoGpuPreview); + this.safePreviewRequest(this.autoGpuPreview); }, beforeDestroy: function() {