Added gain/exposure controls (e6649e41) · Commits · OpenFlexure / openflexure-microscope-server

src/components/paneSettings.vue

+7 −0

Original line number	Diff line number	Diff line
		@@ -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
		}

src/components/paneSettingsComponents/cameraSettings.vue

0 → 100644

+139 −0

Original line number	Diff line number	Diff line
		<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>

src/components/paneSettingsComponents/microscopeSettings.vue

+2 −43

Original line number	Diff line number	Diff line
		<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"
		}