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.

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) {

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];
+      }
+    }
   }
 };
 </script>

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() {