Made camera settings component stateless (3142c9a3) · Commits · OpenFlexure / openflexure-microscope-server

src/components/controlComponents/settingsComponents/cameraSettings.vue

+63 −55

Original line number	Diff line number	Diff line
		<template>
		<div id="cameraSettings">
		<div v-if="camera_settings" id="cameraSettings">
		<form @submit.prevent="applyConfigRequest">
		<div>
		<div v-if="camera_settings.picamera_settings.shutter_speed">
		<label class="uk-form-label" for="form-stacked-text"
		>Exposure time</label
		>
		<div class="uk-form-controls">
		<input
		:value="displayShutterSpeed"
		v-model="camera_settings.picamera_settings.shutter_speed"
		class="uk-input uk-form-small"
		type="number"
		@input="shutterSpeed = $event.target.value"
		/>
		</div>
		</div>

		<div>
		<div v-if="camera_settings.picamera_settings.analog_gain">
		<label class="uk-form-label" for="form-stacked-text"
		>Analogue gain</label
		>
		<div class="uk-form-controls">
		<input
		:value="displayAnalogGain"
		v-model="camera_settings.picamera_settings.analog_gain"
		class="uk-input uk-form-small"
		type="number"
		step="0.1"
		@input="analogGain = $event.target.value"
		step="0.000001"
		/>
		</div>
		</div>

		<div>
		<div v-if="camera_settings.picamera_settings.digital_gain">
		<label class="uk-form-label" for="form-stacked-text"
		>Digital gain</label
		>
		<div class="uk-form-controls">
		<input
		:value="displayDigitalGain"
		v-model="camera_settings.picamera_settings.digital_gain"
		class="uk-input uk-form-small"
		type="number"
		step="0.1"
		@input="digitalGain = $event.target.value"
		step="0.000001"
		/>
		</div>
		</div>
		@@ -53,20 +50,14 @@
		</button>

		<!--Show auto calibrate if default plugin is enabled-->
		<div
		v-if="
		this.$store.state.apiState.plugin.includes(
		'default_camera_calibration'
		)
		"
		>
		<div v-if="recalibrationUri">
		<taskSubmitter
		:can-terminate="false"
		:requires-confirmation="true"
		:confirmation-message="
		'Start recalibration? This may take a while, and the microscope will be locked during this time.'
		"
		:submit-u-r-l="recalibrateApiUri"
		:submit-url="recalibrationUri"
		:submit-label="'Auto-Calibrate (Task)'"
		@response="onRecalibrateResponse"
		@error="onRecalibrateError"
		@@ -83,7 +74,7 @@ import taskSubmitter from "../../genericComponents/taskSubmitter";

		// Export main app
		export default {
		name: "MicroscopeSettings",
		name: "CameraSettings",

		components: {
		taskSubmitter
		@@ -91,61 +82,78 @@ export default {

		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,
		camera_settings: null,
		recalibrationUri: null,
		isCalibrating: false
		};
		},

		computed: {
		displayDigitalGain: function() {
		return Number(this.digitalGain).toFixed(2);
		},
		displayAnalogGain: function() {
		return Number(this.analogGain).toFixed(2);
		settingsUri: function() {
		return `http://${this.$store.state.host}:${
		this.$store.state.port
		}/api/v2/settings`;
		},
		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";
		pluginsUri: function() {
		return `http://${this.$store.state.host}:${
		this.$store.state.port
		}/api/v2/plugins`;
		}
		},

		mounted() {
		this.updateSettings();
		this.updateRecalibrationUri();
		},

		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;
		updateSettings: function() {
		axios
		.get(this.settingsUri)
		.then(response => {
		this.camera_settings = response.data.camera_settings;
		})
		.catch(error => {
		this.modalError(error); // Let mixin handle error
		});
		},

		updateRecalibrationUri: function() {
		axios
		.get(this.pluginsUri) // Get a list of plugins
		.then(response => {
		var plugins = response.data;
		// if AutocalibrationPlugin is enabled
		if ("AutocalibrationPlugin" in plugins) {
		// Get plugin action link
		var link =
		plugins.AutocalibrationPlugin.views.recalibrate.links.self;
		// Store plugin action URI
		this.recalibrationUri = `http://${this.$store.state.host}:${
		this.$store.state.port
		}${link}`;
		}
		})
		.catch(error => {
		this.modalError(error); // Let mixin handle error
		});
		},

		applyConfigRequest: function() {
		console.log("Applying config to the microscope");
		var payload = {
		camera_settings: {
		picamera_settings: {}
		picamera_settings: {
		shutter_speed: this.camera_settings.picamera_settings.shutter_speed,
		analog_gain: this.camera_settings.picamera_settings.analog_gain,
		digital_gain: this.camera_settings.picamera_settings.digital_gain
		}
		}
		};

		//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)
		.put(this.settingsUri, payload)
		.then(() => {
		return new Promise(r => setTimeout(r, 500));
		}) // why is there no built-in for this??!