Fixed duplicated mini previews in settings

This commit is contained in:
Joel Collins 2020-10-16 15:42:11 +01:00
parent a5401a0a2e
commit d4c040bcac
6 changed files with 170 additions and 20 deletions

View file

@ -92,9 +92,9 @@
<p>Once you're ready, click auto-calibrate.</p>
<cameraStageMappingSettings
<CSMCalibrationSettings
:show-extra-settings="false"
></cameraStageMappingSettings>
></CSMCalibrationSettings>
</div>
</div>
@ -148,8 +148,8 @@
<script>
import axios from "axios";
import cameraCalibrationSettings from "../viewComponents/settingsComponents/cameraCalibrationSettings.vue";
import cameraStageMappingSettings from "../viewComponents/settingsComponents/cameraStageMappingSettings.vue";
import cameraCalibrationSettings from "../viewComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue";
import CSMCalibrationSettings from "../viewComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue";
import miniStreamDisplay from "../viewComponents/miniStreamDisplay.vue";
export default {
@ -157,7 +157,7 @@ export default {
components: {
cameraCalibrationSettings,
cameraStageMappingSettings,
CSMCalibrationSettings,
miniStreamDisplay
},

View file

@ -0,0 +1,156 @@
<template>
<div id="CSMSettings">
<CSMCalibrationSettings />
<div id="mini-stream">
<miniStreamDisplay />
</div>
</div>
</template>
<script>
import axios from "axios";
import CSMCalibrationSettings from "./CSMSettingsComponents/CSMCalibrationSettings.vue";
import miniStreamDisplay from "../miniStreamDisplay.vue";
// Export main app
export default {
name: "CSMSettings",
components: {
CSMCalibrationSettings,
miniStreamDisplay
},
props: {
showExtraSettings: {
type: Boolean,
required: false,
default: true
}
},
data: function() {
return {
settings: null,
recalibrationLinks: {},
isCalibrating: false,
dataAvailable: false
};
},
computed: {
settingsUri: function() {
return `${this.$store.getters.baseUri}/api/v2/instrument/settings`;
},
pluginsUri: function() {
return `${this.$store.getters.baseUri}/api/v2/extensions`;
}
},
mounted() {
this.updateSettings();
this.updateRecalibrationLinks();
},
methods: {
updateSettings: function() {
// Update links
axios
.get(this.settingsUri)
.then(response => {
this.settings =
response.data.extensions["org.openflexure.camera_stage_mapping"];
})
.catch(error => {
this.modalError(error); // Let mixin handle error
this.settings = {};
});
},
updateCalibrationDataAvailability: function() {
if ("get_calibration" in this.recalibrationLinks) {
axios
.get(this.recalibrationLinks.get_calibration.href)
.then(response => {
console.log("CSM data:");
console.log(response.data);
if (Object.keys(response.data).length === 0) {
this.dataAvailable = false;
} else {
this.dataAvailable = true;
}
})
.catch(error => {
this.modalError(error); // Let mixin handle error
});
}
},
getCalibrationData: function() {
axios
.get(this.recalibrationLinks.get_calibration.href)
.then(response => {
if (response.data != {}) {
const data = JSON.stringify(response.data);
const url = window.URL.createObjectURL(new Blob([data]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", "csm_calibration.json");
document.body.appendChild(link);
link.click();
}
})
.catch(error => {
this.modalError(error); // Let mixin handle error
});
},
updateRecalibrationLinks: function() {
axios
.get(this.pluginsUri) // Get a list of plugins
.then(response => {
var plugins = response.data;
var foundExtension = plugins.find(
e => e.title === "org.openflexure.camera_stage_mapping"
);
// if camera-stage mapping extension is enabled
if (foundExtension) {
// Get plugin action link
this.recalibrationLinks = foundExtension.links;
// Update whether calibration data is available
this.updateCalibrationDataAvailability();
} else {
this.recalibrationLinks = {};
}
})
.catch(error => {
this.modalError(error); // Let mixin handle error
});
},
onRecalibrateResponse: function() {
this.modalNotify("Finished stage-to-camera calibration.");
// Update local settings
this.updateSettings();
},
onRecalibrateError: function(error) {
this.modalError(error); // Let mixin handle error
}
}
};
</script>
<style lang="less">
.center-spinner {
margin-left: auto;
margin-right: auto;
}
#mini-stream {
width: 500px;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
</style>

View file

@ -1,5 +1,5 @@
<template>
<div id="cameraStageMappingSettings">
<div id="CSMCalibrationSettings">
<form @submit.prevent="applyConfigRequest">
<!--Show auto calibrate if default plugin is enabled-->
<div v-if="'calibrate_xy' in recalibrationLinks" class="uk-margin-small">
@ -27,25 +27,19 @@
Download calibration data
</button>
</form>
<div id="mini-stream">
<miniStreamDisplay />
</div>
</div>
</template>
<script>
import axios from "axios";
import taskSubmitter from "../../genericComponents/taskSubmitter";
import miniStreamDisplay from "../miniStreamDisplay.vue";
import taskSubmitter from "../../../genericComponents/taskSubmitter";
// Export main app
export default {
name: "CameraStageMappingSettings",
name: "CSMCalibrationSettings",
components: {
taskSubmitter,
miniStreamDisplay
taskSubmitter
},
props: {

View file

@ -68,7 +68,7 @@
<script>
import axios from "axios";
import cameraCalibrationSettings from "./cameraCalibrationSettings.vue";
import cameraCalibrationSettings from "./cameraSettingsComponents/cameraCalibrationSettings.vue";
import miniStreamDisplay from "../miniStreamDisplay.vue";
// Export main app

View file

@ -40,7 +40,7 @@
<script>
import axios from "axios";
import taskSubmitter from "../../genericComponents/taskSubmitter";
import taskSubmitter from "../../../genericComponents/taskSubmitter";
// Export main app
export default {

View file

@ -139,7 +139,7 @@
view. This enables functions like click-to-move, and more precise
tile scans.
</p>
<cameraStageMappingSettings />
<CSMSettings />
</div>
</tabContent>
@ -163,7 +163,7 @@ import microscopeSettings from "./settingsComponents/microscopeSettings.vue";
import cameraSettings from "./settingsComponents/cameraSettings.vue";
import appSettings from "./settingsComponents/appSettings.vue";
import featuresSettings from "./settingsComponents/featuresSettings.vue";
import cameraStageMappingSettings from "./settingsComponents/cameraStageMappingSettings.vue";
import CSMSettings from "./settingsComponents/CSMSettings.vue";
import stageSettings from "./settingsComponents/stageSettings.vue";
// Import generic components
import tabIcon from "../genericComponents/tabIcon";
@ -178,7 +178,7 @@ export default {
cameraSettings,
stageSettings,
microscopeSettings,
cameraStageMappingSettings,
CSMSettings,
appSettings,
featuresSettings,
tabIcon,