diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/captureComponents/paneCapture.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/captureComponents/paneCapture.vue index 1c3a0c85..8e78e091 100644 --- a/openflexure_microscope/api/static/src/components/tabContentComponents/captureComponents/paneCapture.vue +++ b/openflexure_microscope/api/static/src/components/tabContentComponents/captureComponents/paneCapture.vue @@ -273,8 +273,39 @@ import axios from "axios"; import tagList from "../../fieldComponents/tagList"; import keyvalList from "../../fieldComponents/keyvalList"; - import taskSubmitter from "../../genericComponents/taskSubmitter"; +import { syncDataWithLocalStorage } from "../../../syncDataWithLocalStorage"; + +function defaultCaptureSettings() { + return { + filename: "", + temporary: false, + 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 + }; +} // Export main app export default { @@ -287,34 +318,9 @@ export default { }, data: function() { - return { - filename: "", - temporary: false, - 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 - }; + // I've split this out so I can use the keys elsewhere, and to allow + // for some data in the future that isn't in defaultCaptureSettings(); + return defaultCaptureSettings(); }, computed: { @@ -393,6 +399,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(); diff --git a/openflexure_microscope/api/static/src/syncDataWithLocalStorage.js b/openflexure_microscope/api/static/src/syncDataWithLocalStorage.js new file mode 100644 index 00000000..3add0f80 --- /dev/null +++ b/openflexure_microscope/api/static/src/syncDataWithLocalStorage.js @@ -0,0 +1,37 @@ +/** + * 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 + //const context = this; + 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 }); + } +}