Merge branch 'remember-scan-parameters' into 'master'

Scan settings are now remembered

Closes #216

See merge request openflexure/openflexure-microscope-server!132

openflexure_microscope/api/static/src/components/tabContentComponents/captureComponents/paneCapture.vue

@@ -102,7 +102,7 @@
 
     <ul uk-accordion="multiple: true">
       <!--Show stack and scan if scan plugin is enabled-->
-      <li v-if="scanUri">
+      <li v-if="scanUri" :class="{ 'uk-open': scanCapture }">
         <a class="uk-accordion-title" href="#">Stack and Scan</a>
         <div class="uk-accordion-content">
           <div class="uk-margin">
@@ -273,8 +273,41 @@ import axios from "axios";
 
 import tagList from "../../fieldComponents/tagList";
 import keyvalList from "../../fieldComponents/keyvalList";
-
 import taskSubmitter from "../../genericComponents/taskSubmitter";
+import { syncDataWithLocalStorage } from "../../../syncDataWithLocalStorage";
+
+/**
+ * The capture settings that should persist in local storage are these ones
+ */
+function defaultCaptureSettings() {
+  return {
+    filename: "",
+    temporary: false,
+    fullResolution: false,
+    storeBayer: false,
+    resizeCapture: false,
+    captureNotes: "",
+    scanDeltaZ: "Fast",
+    scanStyle: "Raster",
+    namingStyle: "Coordinates",
+    scanStepSize: {
+      x: 800,
+      y: 640,
+      z: 50
+    },
+    scanSteps: {
+      x: 3,
+      y: 3,
+      z: 5
+    },
+    resizeDims: [640, 480],
+    tags: [],
+    annotations: {
+      Client: "openflexure-microscope-jsclient:builtin"
+    },
+    scanUri: null
+  };
+}
 
 // Export main app
 export default {
@@ -288,32 +321,8 @@ export default {
 
   data: function() {
     return {
-      filename: "",
+      ...defaultCaptureSettings(),
-      temporary: false,
+      scanCapture: false // Don't remember the "scan" tickbox in local storage.
-      fullResolution: false,
-      storeBayer: false,
-      resizeCapture: false,
-      captureNotes: "",
-      scanCapture: false,
-      scanDeltaZ: "Fast",
-      scanStyle: "Raster",
-      namingStyle: "Coordinates",
-      scanStepSize: {
-        x: 800,
-        y: 640,
-        z: 50
-      },
-      scanSteps: {
-        x: 3,
-        y: 3,
-        z: 5
-      },
-      resizeDims: [640, 480],
-      tags: [],
-      annotations: {
-        Client: "openflexure-microscope-jsclient:builtin"
-      },
-      scanUri: null
     };
   },
 
@@ -393,6 +402,9 @@ export default {
 
   mounted() {
     this.updateScanUri();
+    // Load settings if they have been saved, and set up watchers to sync with local storage
+    syncDataWithLocalStorage("captureSettings", this, defaultCaptureSettings());
+
     // A global signal listener to perform a capture action
     this.$root.$on("globalCaptureEvent", () => {
       this.handleCapture();

openflexure_microscope/api/static/src/components/tabContentComponents/captureContent.vue

@@ -15,7 +15,7 @@ import paneCapture from "./captureComponents/paneCapture";
 import streamDisplay from "./streamContent.vue";
 
 export default {
-  name: "NavigateContent",
+  name: "CaptureContent",
 
   components: {
     paneCapture,

openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/cameraSettings.vue

@@ -3,7 +3,7 @@
     <div class="uk-grid uk-grid-divider uk-child-width-expand" uk-grid>
       <div class="uk-width-large">
         <h3>Manual camera settings</h3>
-        <form @submit.prevent="applySettingsRequest" >
+        <form @submit.prevent="applySettingsRequest">
           <div class="uk-margin-small-bottom">
             <ul uk-accordion="multiple: true">
               <li class="uk-open">
@@ -51,18 +51,18 @@
                   </div>
 
                   <div v-if="picamera.awb_gains !== undefined">
-                    <label class="uk-form-label" for="form-stacked-text" >
+                    <label class="uk-form-label" for="form-stacked-text">
                       White Balance gains
                     </label>
                     <div class="uk-form-controls">
-                      <label class="uk-form-label" >R:</label>
+                      <label class="uk-form-label">R:</label>
                       <input
                         v-model="picamera.awb_gains[0]"
                         class="uk-input uk-form-small"
                         type="number"
                         step="0.0000000000000001"
                       />
-                      <label class="uk-form-label" >B:</label>
+                      <label class="uk-form-label">B:</label>
                       <input
                         v-model="picamera.awb_gains[1]"
                         class="uk-input uk-form-small"
@@ -290,8 +290,8 @@ export default {
             framerate: parseInt(this.picamera.framerate),
             awb_gains: [
               parseFloat(this.picamera.awb_gains[0]),
-              parseFloat(this.picamera.awb_gains[1]),
+              parseFloat(this.picamera.awb_gains[1])
-            ],
+            ]
           }
         }
       };

openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue

@@ -15,7 +15,10 @@
       >
       </taskSubmitter>
     </div>
-    <div v-if="'auto_exposure_from_raw' in recalibrationLinks" class="uk-margin-small">
+    <div
+      v-if="'auto_exposure_from_raw' in recalibrationLinks"
+      class="uk-margin-small"
+    >
       <taskSubmitter
         :can-terminate="false"
         :requires-confirmation="false"
@@ -26,7 +29,10 @@
       >
       </taskSubmitter>
     </div>
-    <div v-if="'auto_white_balance_from_raw' in recalibrationLinks" class="uk-margin-small">
+    <div
+      v-if="'auto_white_balance_from_raw' in recalibrationLinks"
+      class="uk-margin-small"
+    >
       <taskSubmitter
         :can-terminate="false"
         :requires-confirmation="false"
@@ -37,13 +43,16 @@
       >
       </taskSubmitter>
     </div>
-    <div v-if="'auto_lens_shading_table' in recalibrationLinks" class="uk-margin-small">
+    <div
+      v-if="'auto_lens_shading_table' in recalibrationLinks"
+      class="uk-margin-small"
+    >
       <taskSubmitter
         :can-terminate="false"
         :requires-confirmation="true"
         :confirmation-message="
           'Is the microscope looking at an evenly illuminated, empty field of view? ' +
-          'If not, the current image will show through in any images captured afterwards.'
+            'If not, the current image will show through in any images captured afterwards.'
         "
         :submit-url="recalibrationLinks.auto_lens_shading_table.href"
         :submit-label="'Auto flat field correction'"

openflexure_microscope/api/static/src/syncDataWithLocalStorage.js

@@ -0,0 +1,36 @@
+/**
+ * This function should be called from a Vue component's "created" hook
+ * It will initialise a list of properties from local storage.
+ * It then sets up watchers for said properties to sync them back
+ * so that next time we load, the values persist.
+ *
+ * Arguments:
+ *   keyName: a string, used as the key in local storage
+ *   syncedObject: the object whose data you want to sync (usually `this`)
+ *   syncedData: an object, the keys of which set the properties to be synced
+ */
+export function syncDataWithLocalStorage(keyName, syncedObject, syncedData) {
+  const syncedKeys = Object.keys(syncedData);
+  // First, we try to retrieve the stored data
+  const storedString = localStorage.getItem(keyName);
+  if (storedString) {
+    const storedValues = JSON.parse(storedString);
+    for (const item of syncedKeys) {
+      if (item in storedValues) syncedObject[item] = storedValues[item];
+    }
+  }
+
+  // This function will update local storage with current values
+  let updateStoredValues = function() {
+    let newData = {};
+    for (const item of syncedKeys) {
+      newData[item] = syncedObject[item];
+    }
+    localStorage.setItem(keyName, JSON.stringify(newData));
+  };
+
+  // Now, set up watchers to update local storage when things change
+  for (const item of syncedKeys) {
+    syncedObject.$watch(item, updateStoredValues, { deep: true });
+  }
+}