Added gain/exposure controls
Also refactored settings pane slightly.
This commit is contained in:
Richard Bowman
parent
5e40af1b2f
commit
e6649e41d8
3 changed files with 148 additions and 43 deletions
|
|
@ -7,6 +7,11 @@
|
|||
<div class="uk-accordion-content"><streamSettings/></div>
|
||||
</li>
|
||||
|
||||
<li v-if="$store.getters.ready">
|
||||
<a class="uk-accordion-title" href="#">Camera settings</a>
|
||||
<div class="uk-accordion-content"><cameraSettings/></div>
|
||||
</li>
|
||||
|
||||
<li v-if="$store.getters.ready">
|
||||
<a class="uk-accordion-title" href="#">Microscope settings</a>
|
||||
<div class="uk-accordion-content"><microscopeSettings/></div>
|
||||
|
|
@ -20,6 +25,7 @@
|
|||
<script>
|
||||
import streamSettings from './paneSettingsComponents/streamSettings.vue'
|
||||
import microscopeSettings from './paneSettingsComponents/microscopeSettings.vue'
|
||||
import cameraSettings from './paneSettingsComponents/cameraSettings.vue'
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
|
|
@ -27,6 +33,7 @@ export default {
|
|||
|
||||
components: {
|
||||
streamSettings,
|
||||
cameraSettings,
|
||||
microscopeSettings
|
||||
}
|
||||
|
||||
|
|
|
|||
139
src/components/paneSettingsComponents/cameraSettings.vue
Normal file
139
src/components/paneSettingsComponents/cameraSettings.vue
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
<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="shutterSpeed" 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="analogGain" class="uk-input uk-form-small" type="number">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="uk-form-label" for="form-stacked-text">Digital gain</label>
|
||||
<div class="uk-form-controls">
|
||||
<input v-model="digitalGain" class="uk-input uk-form-small" type="number">
|
||||
</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 class="uk-text-center uk-container" v-if="isCalibrating">
|
||||
<div class="center-spinner" uk-spinner></div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<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 UIkit from 'uikit';
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
name: 'microscopeSettings',
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
shutterSpeed: this.$store.state.apiConfig.picamera_settings.shutter_speed,
|
||||
analogGain: this.$store.state.apiConfig.picamera_settings.analog_gain,
|
||||
digitalGain: this.$store.state.apiConfig.picamera_settings.digital_gain,
|
||||
isCalibrating: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateInputValues: function () {
|
||||
this.shutterSpeed = this.$store.state.apiConfig.picamera_settings.shutter_speed
|
||||
this.digitalGain = this.$store.state.apiConfig.picamera_settings.digital_gain
|
||||
this.analogGain = this.$store.state.apiConfig.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.picamera_settings.shutter_speed = this.shutterSpeed
|
||||
payload.picamera_settings.analog_gain = this.analogGain
|
||||
payload.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.$store.dispatch('handleHTTPError', error); // Let store 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(() => {
|
||||
UIkit.notification({message: "Finished recalibration.", status: 'success'})
|
||||
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.$store.dispatch('handleHTTPError', error); // Let store handle error
|
||||
})
|
||||
.finally(() => {
|
||||
this.isCalibrating = false
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
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>
|
||||
|
|
@ -1,14 +1,6 @@
|
|||
<template>
|
||||
<div id="microscopeSettings">
|
||||
<form @submit.prevent="applyConfigRequest">
|
||||
<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 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>
|
||||
|
||||
<h4>Stage</h4>
|
||||
|
||||
<label class="uk-form-label" for="form-stacked-text">Backlash compensation</label>
|
||||
|
|
@ -61,8 +53,7 @@ export default {
|
|||
data: function () {
|
||||
return {
|
||||
microscopeName: this.$store.state.apiConfig.name,
|
||||
stageBacklash: this.$store.state.apiConfig.backlash,
|
||||
isCalibrating: false
|
||||
stageBacklash: this.$store.state.apiConfig.backlash
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -72,35 +63,6 @@ export default {
|
|||
this.stageBacklash = this.$store.state.apiConfig.backlash
|
||||
},
|
||||
|
||||
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[0].id)
|
||||
this.isCalibrating = true
|
||||
return this.$store.dispatch('pollTask', [response.data[0].id, null, null])
|
||||
})
|
||||
.then(() => {
|
||||
UIkit.notification({message: "Finished recalibration.", status: 'success'})
|
||||
})
|
||||
.catch(error => {
|
||||
this.$store.dispatch('handleHTTPError', error); // Let store handle error
|
||||
})
|
||||
.finally(() => {
|
||||
this.isCalibrating = false
|
||||
})
|
||||
},
|
||||
|
||||
applyConfigRequest: function() {
|
||||
var payload = {}
|
||||
|
||||
|
|
@ -112,7 +74,7 @@ export default {
|
|||
payload.backlash = this.stageBacklash
|
||||
}
|
||||
|
||||
// Send move request
|
||||
// Send request to update config
|
||||
axios.post(this.configApiUri, payload)
|
||||
.then(response => {
|
||||
this.$store.dispatch('updateConfig');
|
||||
|
|
@ -127,9 +89,6 @@ export default {
|
|||
},
|
||||
|
||||
computed: {
|
||||
recalibrateApiUri: function () {
|
||||
return this.$store.getters.uri + "/plugin/default/camera_calibration/recalibrate"
|
||||
},
|
||||
configApiUri: function () {
|
||||
return this.$store.getters.uri + "/config"
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue