Tidied up component structure
This commit is contained in:
jtc42
parent
c002ceccbd
commit
2327b9b8bf
19 changed files with 224 additions and 379 deletions
363
src/components/controlComponents/paneCapture.vue
Normal file
363
src/components/controlComponents/paneCapture.vue
Normal file
|
|
@ -0,0 +1,363 @@
|
|||
<template>
|
||||
<div id="paneCapture">
|
||||
|
||||
<div>
|
||||
<label class="uk-form-label" for="form-stacked-text">Filename</label>
|
||||
<input v-model="filename" class="uk-input uk-width-1-1 uk-form-small" name="inputFilename" placeholder="Leave blank for default">
|
||||
</div>
|
||||
|
||||
<p uk-tooltip="title: Capture will be removed automatically; delay: 500"><label><input v-model="temporary" class="uk-checkbox" type="checkbox"> Temporary</label></p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="uk-child-width-1-2" uk-grid>
|
||||
<p><label><input v-model="fullResolution" class="uk-checkbox" type="checkbox"> Full resolution</label></p>
|
||||
<p><label><input v-model="storeBayer" class="uk-checkbox" type="checkbox"> Store raw data</label></p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<p><label><input v-model="resizeCapture" class="uk-checkbox" type="checkbox"> Resize capture</label></p>
|
||||
|
||||
<div class="uk-child-width-1-2" uk-grid>
|
||||
<div>
|
||||
<input v-bind:class="resizeClass" v-model="resizeDims[0]" class="uk-input uk-form-width-medium uk-form-small" type="number" name="inputResizeW">
|
||||
</div>
|
||||
<div>
|
||||
<input v-bind:class="resizeClass" v-model="resizeDims[1]" class="uk-input uk-form-width-medium uk-form-small" type="number" name="inputResizeH">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul uk-accordion="multiple: true">
|
||||
<li>
|
||||
<a class="uk-accordion-title" href="#">Notes</a>
|
||||
<div class="uk-accordion-content">
|
||||
<div class="uk-margin-small">
|
||||
<textarea v-model="captureNotes" class="uk-textarea" rows="5" placeholder="Capture notes"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="uk-accordion-title" href="#">Metadata</a>
|
||||
<div class="uk-accordion-content">
|
||||
|
||||
<form @submit.prevent="handleMetadataSubmit">
|
||||
<div class="uk-margin-small uk-grid-small" uk-grid>
|
||||
<div class="uk-margin-remove-top uk-width-2-5"><input v-model="newMetadata.key" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Key"></div>
|
||||
<div class="uk-margin-remove-top uk-width-2-5"><input v-model="newMetadata.value" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Value"></div>
|
||||
<div class="uk-margin-remove-top uk-width-1-5"><button class="uk-button uk-button-default uk-form-small uk-float-right" uk-icon="plus"></button></div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div v-for="(value, key) in customMetadata" :key="key" class="uk-width-1-1 uk-margin-small uk-margin-remove-left uk-margin-remove-right" uk-grid>
|
||||
<div class="uk-margin-remove-top uk-padding-remove uk-width-expand"><b>{{ key }}: </b>{{ value }}</div>
|
||||
<div class="uk-margin-remove-top uk-padding-remove uk-width-auto">
|
||||
<a href="#" v-on:click="delMetadataKey(key)" class="uk-icon-link" uk-icon="trash"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="uk-accordion-title" href="#">Tags</a>
|
||||
<div class="uk-accordion-content">
|
||||
|
||||
<form @submit.prevent="handleTagSubmit">
|
||||
<div class="uk-margin-small uk-grid-small" uk-grid>
|
||||
<div class="uk-margin-remove-top uk-width-4-5"><input v-model="newTag" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Tag"></div>
|
||||
<div class="uk-margin-remove-top uk-width-1-5"><button class="uk-button uk-button-default uk-form-small uk-float-right" uk-icon="plus"></button></div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<span v-for="tag in tags" :key="tag" v-on:click="delTag(tag)" class="uk-label uk-margin-small-right deletable-label"> {{ tag }} </span>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
|
||||
<ul uk-accordion="multiple: true">
|
||||
<li>
|
||||
<a class="uk-accordion-title" href="#">Stack and Scan</a>
|
||||
<div v-if="isScanning" class="uk-accordion-content">
|
||||
<div class="uk-text-center uk-container" >
|
||||
<div class="center-spinner" uk-spinner></div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="uk-accordion-content">
|
||||
|
||||
<div class="uk-margin">
|
||||
<label><input v-model="scanCapture" class="uk-checkbox" type="checkbox"> Scan capture</label>
|
||||
</div>
|
||||
|
||||
<div v-bind:class="{ 'uk-disabled': !scanCapture }" >
|
||||
|
||||
<div class="uk-grid-small uk-child-width-1-3" uk-grid>
|
||||
<div>
|
||||
<label class="uk-form-label" for="form-stacked-text">x step-size</label>
|
||||
<div class="uk-form-controls">
|
||||
<input v-model="scanStepSize.x" class="uk-input uk-form-small" type="number" name="inputPositionX">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="uk-form-label" for="form-stacked-text">y step-size</label>
|
||||
<div class="uk-form-controls">
|
||||
<input v-model="scanStepSize.y" class="uk-input uk-form-small" type="number" name="inputPositionY">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="uk-form-label" for="form-stacked-text">z step-size</label>
|
||||
<div class="uk-form-controls">
|
||||
<input v-model="scanStepSize.z" class="uk-input uk-form-small" type="number" name="inputPositionZx">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-grid-small uk-child-width-1-3" uk-grid>
|
||||
<div>
|
||||
<label class="uk-form-label" for="form-stacked-text">x steps</label>
|
||||
<div class="uk-form-controls">
|
||||
<input v-model="scanSteps.x" class="uk-input uk-form-small" type="number" name="inputPositionX">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="uk-form-label" for="form-stacked-text">y steps</label>
|
||||
<div class="uk-form-controls">
|
||||
<input v-model="scanSteps.y" class="uk-input uk-form-small" type="number" name="inputPositionY">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="uk-form-label" for="form-stacked-text">z steps</label>
|
||||
<div class="uk-form-controls">
|
||||
<input v-model="scanSteps.z" class="uk-input uk-form-small" type="number" name="inputPositionZx">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-margin-small uk-margin-remove-bottom">
|
||||
<label class="uk-form-label" for="form-stacked-text">Autofocus</label>
|
||||
<select v-model="scanDeltaZ" class="uk-select">
|
||||
<option>Off</option>
|
||||
<option>Coarse</option>
|
||||
<option>Medium</option>
|
||||
<option>Fine</option>
|
||||
<option>Fast</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="uk-margin-small uk-margin-remove-bottom">
|
||||
<label class="uk-form-label" for="form-stacked-text">Scan Style</label>
|
||||
<select v-model="scanStyle" class="uk-select">
|
||||
<option>Raster</option>
|
||||
<option>Snake</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button v-if="scanCapture" v-on:click="handleScan()" v-bind:class="{ 'uk-disabled': isScanning }" class="uk-button uk-button-primary uk-form-small uk-margin uk-float-right uk-width-1-1">Start Scan</button>
|
||||
<button v-else v-on:click="handleCapture()" class="uk-button uk-button-primary uk-form-small uk-margin uk-float-right uk-width-1-1">Capture</button>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
name: 'paneCapture',
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
filename: '',
|
||||
temporary: false,
|
||||
fullResolution: false,
|
||||
storeBayer: false,
|
||||
resizeCapture: false,
|
||||
captureNotes: "",
|
||||
scanCapture: false,
|
||||
isScanning: false,
|
||||
scanDeltaZ: 'Medium',
|
||||
scanStyle: 'Raster',
|
||||
scanStepSize: {
|
||||
x: parseInt(0.8*this.$store.state.apiConfig.fov[0]),
|
||||
y: parseInt(0.8*this.$store.state.apiConfig.fov[1]),
|
||||
z: 50
|
||||
},
|
||||
scanSteps: {
|
||||
x: 3,
|
||||
y: 3,
|
||||
z: 5
|
||||
},
|
||||
resizeDims: [640, 480],
|
||||
newTag: "",
|
||||
tags: [],
|
||||
customMetadata: {
|
||||
Client: `${process.env.PACKAGE.name}.${process.env.PACKAGE.version}`
|
||||
},
|
||||
newMetadata: {
|
||||
key: "",
|
||||
value: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleMetadataSubmit: function () {
|
||||
console.log("Adding metadata");
|
||||
this.customMetadata[this.newMetadata.key] = this.newMetadata.value
|
||||
this.newMetadata.key = "";
|
||||
this.newMetadata.value = "";
|
||||
},
|
||||
|
||||
delMetadataKey: function (key) {
|
||||
this.$delete(this.customMetadata, key)
|
||||
},
|
||||
|
||||
handleTagSubmit: function () {
|
||||
this.tags.push(this.newTag)
|
||||
this.newTag = "";
|
||||
},
|
||||
|
||||
delTag: function (tag) {
|
||||
console.log(tag)
|
||||
var index = this.tags.indexOf(tag);
|
||||
if (index > -1) {
|
||||
this.tags.splice(index, 1);
|
||||
}
|
||||
},
|
||||
|
||||
handleCapture: function() {
|
||||
var payload = this.basePayload
|
||||
|
||||
// Do capture
|
||||
this.newCaptureRequest(payload)
|
||||
},
|
||||
|
||||
handleScan: function() {
|
||||
var payload = this.basePayload
|
||||
|
||||
// Scan params
|
||||
payload.grid = [this.scanSteps.x, this.scanSteps.y, this.scanSteps.z]
|
||||
payload.step_size = [this.scanStepSize.x, this.scanStepSize.y, this.scanStepSize.z]
|
||||
payload.style = this.scanStyle.toLowerCase()
|
||||
|
||||
// Convert AF selector to dz
|
||||
var afDeltas = {
|
||||
Off: 0,
|
||||
Coarse: 100,
|
||||
Medium: 30,
|
||||
Fine: 10,
|
||||
Fast: 1500
|
||||
}
|
||||
|
||||
payload.autofocus_dz = afDeltas[this.scanDeltaZ]
|
||||
payload.fast_autofocus = this.scanDeltaZ == "Fast"
|
||||
|
||||
// Do capture
|
||||
this.newScanRequest(payload)
|
||||
},
|
||||
|
||||
newCaptureRequest: function(params) {
|
||||
// Send move request
|
||||
axios.post(this.captureApiUri, params)
|
||||
.then(response => {
|
||||
this.$root.$emit('globalUpdateCaptureList')
|
||||
})
|
||||
.catch(error => {
|
||||
this.modalError(error) // Let mixin handle error
|
||||
})
|
||||
},
|
||||
|
||||
newScanRequest: function(params) {
|
||||
axios.post(this.scanApiUri, params)
|
||||
.then(response => {
|
||||
console.log("Task ID: " + response.data.id)
|
||||
this.isScanning = true
|
||||
return this.$store.dispatch('pollTask', [response.data.id, 3600, 5])
|
||||
})
|
||||
.then(() => {
|
||||
this.modalNotify("Finished scan.")
|
||||
})
|
||||
.catch(error => {
|
||||
this.modalError(error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.isScanning = false
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
resizeClass: function () {
|
||||
return {
|
||||
'uk-disabled': !this.resizeCapture
|
||||
}
|
||||
},
|
||||
captureApiUri: function () {
|
||||
return this.$store.getters.uri + "/camera/capture"
|
||||
},
|
||||
scanApiUri: function () {
|
||||
return this.$store.getters.uri + "/plugin/default/scan/tile"
|
||||
},
|
||||
basePayload: function () {
|
||||
var payload = {}
|
||||
|
||||
// Filename
|
||||
if (Boolean(this.filename)) {
|
||||
payload.filename = this.filename
|
||||
}
|
||||
|
||||
// Basic boolean params
|
||||
payload.temporary = this.temporary;
|
||||
payload.use_video_port = !this.fullResolution;
|
||||
payload.bayer = this.storeBayer;
|
||||
|
||||
// Resizing
|
||||
if (this.resizeCapture) {
|
||||
payload.size = {
|
||||
width: this.resizeDims[0],
|
||||
height: this.resizeDims[1]
|
||||
}
|
||||
}
|
||||
|
||||
// Additional metadata
|
||||
payload.metadata = this.customMetadata
|
||||
payload.tags = this.tags
|
||||
|
||||
// Attach notes
|
||||
if (this.captureNotes) {
|
||||
payload.metadata['Notes'] = this.captureNotes
|
||||
}
|
||||
|
||||
return payload
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.deletable-label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.deletable-label:hover {
|
||||
background-color: #f0506e;
|
||||
}
|
||||
|
||||
</style>
|
||||
258
src/components/controlComponents/paneConnect.vue
Normal file
258
src/components/controlComponents/paneConnect.vue
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
<template>
|
||||
<div class="host-input">
|
||||
<div class="uk-margin">
|
||||
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="uk-form-controls uk-margin">
|
||||
<label><input class="uk-radio" type="radio" name="radio_local" v-model="computedLocalMode" v-bind:value="true"> Connect locally</label><br>
|
||||
<label><input class="uk-radio" type="radio" name="radio_local" v-model="computedLocalMode" v-bind:value="false" checked> Connect remotely</label>
|
||||
</div>
|
||||
|
||||
<div v-if="!localMode">
|
||||
<div class="uk-inline uk-width-1-1">
|
||||
<span class="uk-form-icon" uk-icon="icon: server"></span>
|
||||
<input v-model="hostname" v-bind:class="IpFormClasses" class="uk-input uk-form-small" type="text" placeholder="Hostname or IP address">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul uk-accordion="multiple: true">
|
||||
<li>
|
||||
<a class="uk-accordion-title" href="#">Advanced</a>
|
||||
<div class="uk-accordion-content">
|
||||
<label class="uk-form-label" for="form-stacked-text">Port</label>
|
||||
<div class="uk-form-controls">
|
||||
<input v-model="computedPort" class="uk-input uk-form-small" id="form-stacked-text" type="number" value=5000>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="uk-accordion-title" href="#">Status</a>
|
||||
<div class="uk-accordion-content">
|
||||
<div v-if="$store.getters.ready">
|
||||
<p><b>Host:</b> {{ $store.state.host }}</p>
|
||||
<p><b>Base URI:</b> {{ $store.getters.uri }}</p>
|
||||
<p v-if="$store.state.apiConfig.name"><b>Device name:</b> {{ $store.state.apiConfig.name }}</p>
|
||||
</div>
|
||||
<div v-else-if="$store.state.waiting"><div uk-spinner></div></div>
|
||||
<div v-else-if="$store.state.error"><b>Error:</b> {{ $store.state.error }}</div>
|
||||
<div v-else>No active connection</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li v-if="!localMode" class="uk-open">
|
||||
<a class="uk-accordion-title" href="#">Saved hosts</a>
|
||||
<div class="uk-accordion-content">
|
||||
<button v-if="$store.getters.ready" v-on:click="saveHost()" class="uk-button uk-button-default uk-form-small uk-margin-small uk-width-1-1">Save Current</button>
|
||||
<div v-for="host in savedHosts" :key="host.name" class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-grid">
|
||||
<a href="#" v-on:click="autofillHost(host)" class="uk-icon-link uk-padding-remove uk-width-expand host-description"><b>{{ host.name }}</b> ({{ host.hostname }}:{{ host.port }})</a>
|
||||
<a href="#" v-on:click="delSavedHost(host)" class="uk-icon-link uk-width-auto host-delete" uk-icon="trash"></a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<button class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1">Connect</button>
|
||||
</form>
|
||||
|
||||
<button
|
||||
v-if="$store.getters.ready"
|
||||
v-on:click="$store.commit('resetState')"
|
||||
class="uk-button uk-button-danger uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1">
|
||||
Disconnect
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'paneConnect',
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
localMode: true,
|
||||
hostname: "",
|
||||
port: 5000,
|
||||
selectedHost: "",
|
||||
savedHosts: [
|
||||
{
|
||||
name: "local",
|
||||
hostname: "localhost",
|
||||
port: 5000
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// Propagate localMode settings
|
||||
this.setLocalMode(this.localMode)
|
||||
|
||||
// Try loading savedHosts from localStorage. If null, don't change.
|
||||
this.savedHosts = this.getLocalStorageObj('savedHosts') || this.savedHosts
|
||||
},
|
||||
|
||||
// When savedHosts changes, serialise to JSON and save to localStorage
|
||||
watch: {
|
||||
savedHosts(newSavedHosts) {
|
||||
this.setLocalStorageObj('savedHosts', this.savedHosts)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleSubmit: function(event) {
|
||||
// Split host and port if needed
|
||||
if (this.hostname.includes(':')) {
|
||||
this.port = this.computedPort;
|
||||
this.hostname = this.hostname.split(':')[0];
|
||||
}
|
||||
// Handle auto-local-connect
|
||||
if (this.localMode) {
|
||||
var hostname = "localhost";
|
||||
}
|
||||
else {
|
||||
var hostname = this.hostname;
|
||||
}
|
||||
// Commit the hostname and port to store
|
||||
this.$store.commit('changeHost', [
|
||||
hostname,
|
||||
this.port
|
||||
]);
|
||||
// Try to get config and state JSON from the newly submitted host
|
||||
this.$store.dispatch('firstConnect')
|
||||
.then (() => {
|
||||
console.log("Connected!")
|
||||
this.checkServerVersion()
|
||||
})
|
||||
.catch(error => {
|
||||
this.modalError(error) // Let mixin handle error
|
||||
})
|
||||
},
|
||||
|
||||
checkServerVersion: function () {
|
||||
this.$store.dispatch('updateState')
|
||||
.then (() => {
|
||||
var clientVersion = process.env.PACKAGE.version
|
||||
var clientVersionMajor = clientVersion.substring(0, 3)
|
||||
console.log(clientVersionMajor)
|
||||
|
||||
var serverVersion = this.$store.state.apiState.version
|
||||
if (serverVersion != undefined) {
|
||||
var serverVersionMajor = serverVersion.substring(0, 3)
|
||||
}
|
||||
console.log(serverVersionMajor)
|
||||
|
||||
if ((serverVersion == undefined) || (serverVersionMajor != clientVersionMajor)) {
|
||||
this.modalDialog("Version mismatch", "Client and microscope versions do not match. Consider updating your microscope software. Some functionality may currently be broken.", status='warning')
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
this.modalError(error) // Let mixin handle error
|
||||
})
|
||||
},
|
||||
|
||||
setLocalMode: function (state) {
|
||||
this.$store.commit("changeSetting", ['trackWindow', state]);
|
||||
this.$store.commit("changeSetting", ['disableStream', state]);
|
||||
this.$store.commit("changeSetting", ['autoGpuPreview', state]);
|
||||
this.$root.$emit('globalTogglePreview', state)
|
||||
},
|
||||
|
||||
autofillHost: function (host) {
|
||||
this.hostname = host.hostname;
|
||||
this.port = host.port
|
||||
},
|
||||
|
||||
delSavedHost: function (host) {
|
||||
console.log(host)
|
||||
var index = this.savedHosts.indexOf(host);
|
||||
if (index > -1) {
|
||||
this.savedHosts.splice(index, 1);
|
||||
}
|
||||
},
|
||||
|
||||
saveHost: function() {
|
||||
this.savedHosts.push(
|
||||
{
|
||||
name: this.$store.state.apiConfig.name,
|
||||
hostname: this.$store.state.host,
|
||||
port: this.$store.state.port
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
// Stylises the hostname input box based on connection status
|
||||
IpFormClasses: function () {
|
||||
return {
|
||||
'uk-form-danger': !this.$store.state.available,
|
||||
'uk-form-success': this.$store.getters.ready
|
||||
}
|
||||
},
|
||||
|
||||
computedLocalMode: {
|
||||
get: function() {
|
||||
return this.localMode
|
||||
},
|
||||
set: function(state) {
|
||||
this.localMode = state;
|
||||
this.setLocalMode(state)
|
||||
}
|
||||
},
|
||||
|
||||
computedPort: {
|
||||
get: function() {
|
||||
if (this.hostname.includes(':')) {
|
||||
var port = parseInt(this.hostname.split(':')[1]);
|
||||
return !isNaN(port) ? port : this.port
|
||||
}
|
||||
else {
|
||||
return this.port
|
||||
}
|
||||
},
|
||||
set: function(newPort) {
|
||||
this.port = newPort
|
||||
if (this.hostname.includes(':')) {
|
||||
this.hostname = this.hostname.split(':')[0] + ":" + this.port
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computedSelectedHost: {
|
||||
get: function() {
|
||||
return this.selectedHost
|
||||
},
|
||||
set: function(host) {
|
||||
this.selectedHost = host;
|
||||
this.hostname = host.hostname;
|
||||
this.port = host.port;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="less">
|
||||
.host-input {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.host-description {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.host-delete {
|
||||
padding: 0 2px 0 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
286
src/components/controlComponents/paneNavigate.vue
Normal file
286
src/components/controlComponents/paneNavigate.vue
Normal file
|
|
@ -0,0 +1,286 @@
|
|||
<template>
|
||||
<div id="paneNavigate">
|
||||
|
||||
<ul uk-accordion="multiple: true">
|
||||
<li>
|
||||
<a class="uk-accordion-title" href="#">Configure</a>
|
||||
<div class="uk-accordion-content">
|
||||
|
||||
<div class="uk-child-width-1-2" uk-grid>
|
||||
|
||||
<div>
|
||||
<label class="uk-form-label" for="form-stacked-text">x-y step size</label>
|
||||
<div class="uk-form-controls">
|
||||
<input v-model="stepXy" class="uk-input uk-form-width-medium uk-form-small" type="number" name="inputStepXy">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="uk-form-label" for="form-stacked-text">z step size</label>
|
||||
<div class="uk-form-controls">
|
||||
<input v-model="stepZz" class="uk-input uk-form-width-medium uk-form-small" type="number" name="inputStepZz">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="uk-open">
|
||||
<a class="uk-accordion-title" href="#">Move-to</a>
|
||||
<div class="uk-accordion-content">
|
||||
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="uk-grid-small uk-child-width-1-3" uk-grid>
|
||||
<div>
|
||||
<label class="uk-form-label" for="form-stacked-text">x</label>
|
||||
<div class="uk-form-controls">
|
||||
<input v-model="setPosition.x" class="uk-input uk-form-small" type="number" name="inputPositionX">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="uk-form-label" for="form-stacked-text">y</label>
|
||||
<div class="uk-form-controls">
|
||||
<input v-model="setPosition.y" class="uk-input uk-form-small" type="number" name="inputPositionY">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="uk-form-label" for="form-stacked-text">z</label>
|
||||
<div class="uk-form-controls">
|
||||
<input v-model="setPosition.z" class="uk-input uk-form-small" type="number" name="inputPositionZx">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<button class="uk-button uk-button-primary uk-form-small uk-float-right uk-width-1-1">Move</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="uk-open">
|
||||
<a class="uk-accordion-title" href="#">Autofocus</a>
|
||||
<div class="uk-accordion-content">
|
||||
|
||||
<div class="uk-text-center uk-container" v-if="isAutofocusing">
|
||||
<div class="center-spinner" uk-spinner></div>
|
||||
</div>
|
||||
<div class="uk-grid-small uk-child-width-1-3" v-bind:hidden="isAutofocusing" uk-grid>
|
||||
<div>
|
||||
<button v-on:click="runFastAutofocus(2000, 300);" class="uk-button uk-button-default uk-form-small uk-float-right uk-width-1-1">Fast</button>
|
||||
</div>
|
||||
<div>
|
||||
<button v-on:click="runAutofocus([-60,-30,0,30,60]);" class="uk-button uk-button-default uk-form-small uk-float-right uk-width-1-1">Medium</button>
|
||||
</div>
|
||||
<div>
|
||||
<button v-on:click="runAutofocus([-20,-10,0,10,20]);" class="uk-button uk-button-default uk-form-small uk-float-right uk-width-1-1">Fine</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
// Key Codes
|
||||
const keyCodes = {
|
||||
pgup: 33,
|
||||
pgdn: 34,
|
||||
left: 37,
|
||||
up: 38,
|
||||
right: 39,
|
||||
down: 40,
|
||||
enter: 13,
|
||||
esc: 27
|
||||
}
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
name: 'paneNavigate',
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
keysDown: {},
|
||||
stepXy: 200,
|
||||
stepZz: 50,
|
||||
setPosition: this.$store.state.apiState.stage.position,
|
||||
isAutofocusing: false,
|
||||
moveLock: false
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// A global signal listener to perform a move action
|
||||
this.$root.$on('globalMoveEvent', (x, y, z, absolute) => {
|
||||
this.moveRequest(x, y, z, absolute)
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
// Handle global mouse wheel events to be associated with navigation
|
||||
wheelMonitor: function(event) {
|
||||
// Only capture scroll if the event target's parent contains the "scrollTarget" class
|
||||
if (event.target.parentNode.classList.contains("scrollTarget") || event.target.classList.contains("scrollTarget")) {
|
||||
var z_rel = (event.deltaY)/100 * this.stepZz
|
||||
this.moveRequest(0, 0, z_rel, false)
|
||||
}
|
||||
},
|
||||
|
||||
// Handle global key press events to be associated with navigation
|
||||
keyDownMonitor: function(event) {
|
||||
this.keysDown[event.keyCode] = true; //Add key to array
|
||||
|
||||
// Convert keyCode dict into a list of key codes
|
||||
var keyCodeList = Object.keys(keyCodes).map(function(key){return keyCodes[key];});
|
||||
|
||||
if (!(event.target instanceof HTMLInputElement) && !(event.target.classList.contains('lightbox-link')) && keyCodeList.includes(event.keyCode)) {
|
||||
//console.log(this.keysDown)
|
||||
// Calculate movement array
|
||||
var x_rel = 0;
|
||||
var y_rel = 0;
|
||||
var z_rel = 0;
|
||||
if (keyCodes.left in this.keysDown) {
|
||||
x_rel = x_rel + this.stepXy;
|
||||
}
|
||||
if (keyCodes.right in this.keysDown) {
|
||||
x_rel = x_rel - this.stepXy;
|
||||
}
|
||||
if (keyCodes.up in this.keysDown) {
|
||||
y_rel = y_rel + this.stepXy;
|
||||
}
|
||||
if (keyCodes.down in this.keysDown) {
|
||||
y_rel = y_rel - this.stepXy;
|
||||
}
|
||||
if (keyCodes.pgup in this.keysDown) {
|
||||
z_rel = z_rel - this.stepZz;
|
||||
}
|
||||
if (keyCodes.pgdn in this.keysDown) {
|
||||
z_rel = z_rel + this.stepZz;
|
||||
}
|
||||
|
||||
// Make a position request
|
||||
this.moveRequest(x_rel, y_rel, z_rel, false)
|
||||
}
|
||||
},
|
||||
|
||||
keyUpMonitor: function(event) {
|
||||
delete this.keysDown[event.keyCode]; //Remove key from array
|
||||
},
|
||||
|
||||
handleSubmit: function(event) {
|
||||
this.moveRequest(
|
||||
this.setPosition.x,
|
||||
this.setPosition.y,
|
||||
this.setPosition.z,
|
||||
true,
|
||||
)
|
||||
},
|
||||
|
||||
moveRequest: function(x, y, z, absolute) {
|
||||
console.log(`Sending move request of ${x}, ${y}, ${z}`)
|
||||
// If not movement-locked
|
||||
if (!this.moveLock) {
|
||||
// Lock move requests
|
||||
this.moveLock = true
|
||||
|
||||
// Send move request
|
||||
axios.post(this.positionApiUri, {
|
||||
x: x,
|
||||
y: y,
|
||||
z: z,
|
||||
absolute: absolute
|
||||
})
|
||||
.then(response => {
|
||||
this.$store.dispatch('updateState'); // Update store state
|
||||
this.setPosition = response.data.stage.position; // Update boxes from response
|
||||
})
|
||||
.catch(error => {
|
||||
this.modalError(error) // Let mixin handle error
|
||||
})
|
||||
.then(() => {
|
||||
this.moveLock = false // Release the move lock
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
runAutofocus: function(dz) {
|
||||
if (!this.moveLock) {
|
||||
// Lock move requests
|
||||
this.moveLock = true
|
||||
this.isAutofocusing = true
|
||||
axios.post(this.autofocusApiUri, {dz: dz})
|
||||
.then(response => {
|
||||
console.log("Autofocus Task ID: " + response.data.id)
|
||||
// Start the store polling TaskId for success
|
||||
return this.$store.dispatch('pollTask', [response.data.id, null, null])
|
||||
})
|
||||
.then(() => {
|
||||
console.log("Successfully finished autofocus")
|
||||
})
|
||||
.catch(error => {
|
||||
this.modalError(error) // Let mixin handle error
|
||||
})
|
||||
.finally(() => {
|
||||
console.log("Cleaning up after autofocus.")
|
||||
this.isAutofocusing = false;
|
||||
this.moveLock = false // Release the move lock
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
runFastAutofocus: function(dz, backlash) {
|
||||
if (!this.moveLock) {
|
||||
// Lock move requests
|
||||
this.moveLock = true
|
||||
this.isAutofocusing = true
|
||||
axios.post(this.fastAutofocusApiUri, {dz: dz, backlash: backlash})
|
||||
.then(response => {
|
||||
console.log("Autofocus Task ID: " + response.data.id)
|
||||
// Start the store polling TaskId for success
|
||||
return this.$store.dispatch('pollTask', [response.data.id, null, null])
|
||||
})
|
||||
.then(() => {
|
||||
console.log("Successfully finished autofocus")
|
||||
})
|
||||
.catch(error => {
|
||||
this.modalError(error) // Let mixin handle error
|
||||
})
|
||||
.finally(() => {
|
||||
console.log("Cleaning up after autofocus.")
|
||||
this.isAutofocusing = false
|
||||
this.moveLock = false // Release the move lock
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
created: function () {
|
||||
window.addEventListener('keydown', this.keyDownMonitor);
|
||||
window.addEventListener("keyup", this.keyUpMonitor);
|
||||
window.addEventListener('wheel', this.wheelMonitor);
|
||||
},
|
||||
|
||||
computed: {
|
||||
positionApiUri: function () {
|
||||
return this.$store.getters.uri + "/stage/position"
|
||||
},
|
||||
autofocusApiUri: function () {
|
||||
return this.$store.getters.uri + "/plugin/default/autofocus/autofocus"
|
||||
},
|
||||
fastAutofocusApiUri: function () {
|
||||
return this.$store.getters.uri + "/plugin/default/autofocus/fast_autofocus"
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
17
src/components/controlComponents/panePlugins.vue
Normal file
17
src/components/controlComponents/panePlugins.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<div id="panePlugins">
|
||||
<h3>Plugins</h3>
|
||||
<div class="uk-placeholder uk-text-center">Plugin support coming soon...</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
name: 'panePlugins',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
</style>
|
||||
48
src/components/controlComponents/paneSettings.vue
Normal file
48
src/components/controlComponents/paneSettings.vue
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div id="paneSettings">
|
||||
|
||||
<appSettings/>
|
||||
|
||||
<ul uk-accordion="multiple: true">
|
||||
<li>
|
||||
<a class="uk-accordion-title" href="#">Stream settings</a>
|
||||
<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>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import streamSettings from './settingsComponents/streamSettings.vue'
|
||||
import microscopeSettings from './settingsComponents/microscopeSettings.vue'
|
||||
import cameraSettings from './settingsComponents/cameraSettings.vue'
|
||||
import appSettings from './settingsComponents/appSettings.vue'
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
name: 'paneSettings',
|
||||
|
||||
components: {
|
||||
streamSettings,
|
||||
cameraSettings,
|
||||
microscopeSettings,
|
||||
appSettings
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
</style>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<div id="appSettings">
|
||||
|
||||
<p><label><input v-model="darkMode" class="uk-checkbox" type="checkbox"> Enable dark theme</label></p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
name: 'appSettings',
|
||||
|
||||
data: function () {
|
||||
return {}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// Try loading settings from localStorage. If null, don't change.
|
||||
this.darkMode = this.getLocalStorageObj('darkMode') || this.darkMode
|
||||
},
|
||||
|
||||
watch: {
|
||||
darkMode(newdarkMode) {
|
||||
console.log("Saving darkmode setting")
|
||||
this.setLocalStorageObj('darkMode', this.darkMode)
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
darkMode: {
|
||||
get() {
|
||||
return this.$store.state.globalSettings.darkMode;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("changeSetting", ['darkMode', value]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
</style>
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
<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 class="uk-text-center uk-container" v-if="isCalibrating">
|
||||
<div class="center-spinner" uk-spinner></div>
|
||||
</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'
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
name: 'microscopeSettings',
|
||||
|
||||
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>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<template>
|
||||
<div id="microscopeSettings">
|
||||
<form @submit.prevent="applyConfigRequest">
|
||||
<h4>Stage</h4>
|
||||
|
||||
<label class="uk-form-label" for="form-stacked-text">Backlash compensation</label>
|
||||
<div class="uk-grid-small uk-child-width-1-3" uk-grid>
|
||||
<div>
|
||||
<label class="uk-form-label" for="form-stacked-text">x</label>
|
||||
<div class="uk-form-controls">
|
||||
<input v-model="stageBacklash.x" class="uk-input uk-form-small" type="number">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="uk-form-label" for="form-stacked-text">y</label>
|
||||
<div class="uk-form-controls">
|
||||
<input v-model="stageBacklash.y" class="uk-input uk-form-small" type="number">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="uk-form-label" for="form-stacked-text">z</label>
|
||||
<div class="uk-form-controls">
|
||||
<input v-model="stageBacklash.z" class="uk-input uk-form-small" type="number">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 type="submit" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">Apply Settings</button>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
name: 'microscopeSettings',
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
microscopeName: this.$store.state.apiConfig.name,
|
||||
stageBacklash: this.$store.state.apiConfig.stage_settings.backlash
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateInputValues: function () {
|
||||
this.microscopeName = this.$store.state.apiConfig.name;
|
||||
this.stageBacklash = this.$store.state.apiConfig.stage_settings.backlash
|
||||
},
|
||||
|
||||
applyConfigRequest: function() {
|
||||
var payload = {
|
||||
stage_settings: {}
|
||||
}
|
||||
|
||||
if (this.microscopeName != this.$store.state.apiConfig.name) {
|
||||
payload.name = this.microscopeName
|
||||
};
|
||||
|
||||
if (this.stageBacklash != this.$store.state.apiConfig.stage_settings.backlash) {
|
||||
payload.stage_settings.backlash = this.stageBacklash
|
||||
}
|
||||
|
||||
console.log(payload)
|
||||
|
||||
// Send request to update config
|
||||
axios.post(this.configApiUri, payload)
|
||||
.then(response => {
|
||||
this.$store.dispatch('updateConfig');
|
||||
this.updateInputValues
|
||||
this.modalNotify("Microscope config applied.")
|
||||
})
|
||||
.catch(error => {
|
||||
this.modalError(error) // Let mixin handle error
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
configApiUri: function () {
|
||||
return this.$store.getters.uri + "/config"
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.center-spinner {
|
||||
margin-left: auto;
|
||||
margin-right: auto
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<div id="streamSettings">
|
||||
|
||||
<p><label><input v-model="disableStream" class="uk-checkbox" type="checkbox"> Disable live stream</label></p>
|
||||
|
||||
<div class="uk-child-width-1-2" uk-grid>
|
||||
<p><label v-bind:class="[{'uk-disabled': !this.$store.getters.ready}]"><input v-model="autoGpuPreview" class="uk-checkbox" type="checkbox"> GPU preview</label></p>
|
||||
<p><label v-bind:class="[{'uk-disabled': !this.$store.getters.ready}]"><input v-model="trackWindow" class="uk-checkbox" type="checkbox"> Track window</label></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
name: 'streamSettings',
|
||||
|
||||
data: function () {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
disableStream: {
|
||||
get() {
|
||||
return this.$store.state.globalSettings.disableStream;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("changeSetting", ['disableStream', value]);
|
||||
}
|
||||
},
|
||||
|
||||
autoGpuPreview: {
|
||||
get() {
|
||||
return this.$store.state.globalSettings.autoGpuPreview;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("changeSetting", ['autoGpuPreview', value]);
|
||||
this.$root.$emit('globalTogglePreview', value)
|
||||
}
|
||||
},
|
||||
|
||||
trackWindow: {
|
||||
get() {
|
||||
return this.$store.state.globalSettings.trackWindow;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit("changeSetting", ['trackWindow', value]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue