openflexure-microscope-server/src/components/controlComponents/settingsComponents/cameraSettings.vue
2019-06-18 17:00:26 +01:00

155 lines
4.9 KiB
Vue

<template>
<div id="cameraSettings">
<form @submit.prevent="applyConfigRequest">
<div>
<label class="uk-form-label" for="form-stacked-text">Exposure time</label>
<div class="uk-form-controls">
<input v-model="displayShutterSpeed" class="uk-input uk-form-small" type="number">
</div>
</div>
<div>
<label class="uk-form-label" for="form-stacked-text">Analogue gain</label>
<div class="uk-form-controls">
<input v-model="displayAnalogGain" class="uk-input uk-form-small" type="number" step="0.01">
</div>
</div>
<div>
<label class="uk-form-label" for="form-stacked-text">Digital gain</label>
<div class="uk-form-controls">
<input v-model="displayDigitalGain" class="uk-input uk-form-small" type="number" step="0.01">
</div>
</div>
<button type="submit" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">Apply Settings</button>
<div v-if="isCalibrating">
<progressBar/>
</div>
<div v-bind:hidden="isCalibrating">
<button type="button" v-on:click="recalibrateConfirm()" class="uk-button uk-button-default uk-form-small uk-float-right uk-margin-small uk-width-1-1">Auto-Calibrate</button>
</div>
</form>
</div>
</template>
<script>
import axios from 'axios'
import progressBar from "../../genericComponents/progressBar"
// Export main app
export default {
name: 'microscopeSettings',
components: {
progressBar
},
data: function () {
return {
shutterSpeed: this.$store.state.apiConfig.camera_settings.picamera_settings.shutter_speed,
analogGain: this.$store.state.apiConfig.camera_settings.picamera_settings.analog_gain,
digitalGain: this.$store.state.apiConfig.camera_settings.picamera_settings.digital_gain,
isCalibrating: false
}
},
methods: {
updateInputValues: function () {
this.shutterSpeed = this.$store.state.apiConfig.camera_settings.picamera_settings.shutter_speed
this.digitalGain = this.$store.state.apiConfig.camera_settings.picamera_settings.digital_gain
this.analogGain = this.$store.state.apiConfig.camera_settings.picamera_settings.analog_gain
},
applyConfigRequest: function() {
console.log("Applying config to the microscope")
var payload = {
picamera_settings: {}
}
//if (this.shutterSpeed != this.$store.state.apiConfig.picamera_settings.shutter_speed) {
payload.camera_settings.picamera_settings.shutter_speed = this.shutterSpeed
payload.camera_settings.picamera_settings.analog_gain = this.analogGain
payload.camera_settings.picamera_settings.digital_gain = this.digitalGain
//};
// Send request
axios.post(this.configApiUri, payload)
.then(response => { return new Promise(r => setTimeout(r, 500))}) // why is there no built-in for this??!
.then(response => {
return this.$store.dispatch('updateConfig');
})
.then(this.updateInputValues)
.then(r=>{console.log("Updated Config: ", payload.picamera_settings)})
.catch(error => {
this.modalError(error) // Let mixin handle error
})
},
recalibrateConfirm: function() {
var context = this
this.modalConfirm('Start recalibration? This may take a while, and the microscope will be locked during this time.')
.then(function() {
context.recalibrateRequest()
}, function () {
console.log('Rejected recalibration.')
})
},
recalibrateRequest: function() {
// Send move request
axios.post(this.recalibrateApiUri)
.then(response => {
console.log("Task ID: " + response.data.id)
this.isCalibrating = true
return this.$store.dispatch('pollTask', [response.data.id, null, null])
})
.then(() => {
this.modalNotify("Finished recalibration.")
return new Promise(r => setTimeout(r, 500)) // wait 500ms before updating config, so it's fresh
})
.then(() => {
return this.$store.dispatch('updateConfig');
})
.then(this.updateInputValues)
.catch(error => {
this.modalError(error) // Let mixin handle error
})
.finally(() => {
this.isCalibrating = false
})
}
},
computed: {
displayDigitalGain: function () {
return Number(this.digitalGain).toFixed(2)
},
displayAnalogGain: function () {
return Number(this.analogGain).toFixed(2)
},
displayShutterSpeed: function () {
return (this.shutterSpeed != 0) ? this.shutterSpeed : "auto"
},
recalibrateApiUri: function () {
return this.$store.getters.uri + "/plugin/default/camera_calibration/recalibrate"
},
configApiUri: function () {
return this.$store.getters.uri + "/config"
}
}
}
</script>
<style lang="less">
.center-spinner {
margin-left: auto;
margin-right: auto
}
</style>