Created microscope settings. Added recalibrate button with polling
This commit is contained in:
parent
844d0109d1
commit
ab7c88cf98
1 changed files with 85 additions and 0 deletions
85
src/components/paneSettingsComponents/microscopeSettings.vue
Normal file
85
src/components/paneSettingsComponents/microscopeSettings.vue
Normal file
|
|
@ -0,0 +1,85 @@
|
||||||
|
<template>
|
||||||
|
<div id="microscopeSettings">
|
||||||
|
|
||||||
|
<h4>Camera</h4>
|
||||||
|
<div class="uk-text-center uk-container" v-if="isCalibrating">
|
||||||
|
<div class="center-spinner" uk-spinner></div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<button v-on:click="recalibrateRequest()" class="uk-button uk-button-default uk-form-small uk-float-right uk-margin-small uk-width-1-1">Auto-Calibrate</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4>Stage</h4>
|
||||||
|
|
||||||
|
<h4>Microscope</h4>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="uk-form-label" for="form-stacked-text">Microscope name</label>
|
||||||
|
<input v-model="microscopeName" class="uk-input uk-width-1-1 uk-form-small" name="inputFilename" placeholder="Leave blank for default">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="uk-button uk-button-default uk-form-small uk-float-right uk-margin-small uk-width-1-1 uk-disabled">Apply Settings</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from 'axios'
|
||||||
|
import UIkit from 'uikit';
|
||||||
|
|
||||||
|
// Export main app
|
||||||
|
export default {
|
||||||
|
name: 'microscopeSettings',
|
||||||
|
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
microscopeName: this.$store.state.apiConfig.name,
|
||||||
|
isCalibrating: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
updateInputValues: function () {
|
||||||
|
this.microscopeName = this.$store.state.apiConfig.name
|
||||||
|
},
|
||||||
|
|
||||||
|
recalibrateRequest: function() {
|
||||||
|
// Send move request
|
||||||
|
axios.post(this.recalibrateApiUri)
|
||||||
|
.then(response => {
|
||||||
|
console.log("Task ID: " + response.data[0].id)
|
||||||
|
this.isCalibrating = true
|
||||||
|
// Start the store polling TaskId for success
|
||||||
|
self = this;
|
||||||
|
this.$store.dispatch('pollTask', [response.data[0].id, null, null])
|
||||||
|
.then(function() {
|
||||||
|
self.isCalibrating = false
|
||||||
|
UIkit.notification({message: "Finished recalibration", status: 'success'})
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
self.isCalibrating = false
|
||||||
|
UIkit.notification({message: `<span uk-icon=\'icon: warning\'></span> ${error}`, status: 'danger'})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
this.$store.dispatch('handleHTTPError', error); // Let store handle error
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
recalibrateApiUri: function () {
|
||||||
|
return this.$store.getters.uri + "/plugin/default/camera_calibration/recalibrate"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.center-spinner {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue