openflexure-microscope-server/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
2023-11-02 20:32:15 +00:00

110 lines
2.7 KiB
Vue

<template>
<div id="CSMCalibrationSettings">
<!--Show auto calibrate if default plugin is enabled-->
<div v-if="'calibrate_xy' in actions" class="uk-margin-small">
<taskSubmitter
:button-primary="true"
:can-terminate="false"
:requires-confirmation="true"
:confirmation-message="
'Start recalibration of the stage to the camera? This may take a while, and the microscope will be locked during this time.'
"
:submit-url="thingUri + 'calibrate_xy'"
:submit-label="'Auto-Calibrate using camera'"
@response="onRecalibrateResponse"
@error="modalError"
/>
</div>
<button
v-if="'last_calibration' in properties"
v-show="showExtraSettings"
type="button"
class="uk-button uk-button-default uk-width-1-1"
@click="getCalibrationData()"
>
Download calibration data
</button>
</div>
</template>
<script>
import axios from "axios";
import taskSubmitter from "../../../genericComponents/taskSubmitter";
// Export main app
export default {
name: "CSMCalibrationSettings",
components: {
taskSubmitter
},
props: {
showExtraSettings: {
type: Boolean,
required: false,
default: true
}
},
data: function() {
return {
settings: null,
actions: {},
properties: {},
};
},
computed: {
thingUri: function() {
return `${this.$store.getters.baseUri}/camera_stage_mapping/`;
}
},
mounted() {
this.updateActions();
},
methods: {
getCalibrationData: async function() {
try {
let response = await axios.get(this.thingUri + "last_calibration");
if (response.data == {}) {
throw "No calibration data available.";
}
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
}
},
updateActions: async function() {
try {
let response = await axios.get(this.thingUri); // Get Thing Description
console.log("CSM TD", response.data);
this.actions = response.data.actions;
this.properties = response.data.properties;
} catch (error) {
this.modalError(error); // Let mixin handle error
}
},
onRecalibrateResponse: function() {
this.modalNotify("Finished stage-to-camera calibration.");
}
}
};
</script>
<style lang="less">
.center-spinner {
margin-left: auto;
margin-right: auto;
}
</style>