458 lines
12 KiB
Vue
458 lines
12 KiB
Vue
<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-model="resizeDims[0]"
|
|
:class="resizeClass"
|
|
class="uk-input uk-form-width-medium uk-form-small"
|
|
type="number"
|
|
name="inputResizeW"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
v-model="resizeDims[1]"
|
|
:class="resizeClass"
|
|
class="uk-input uk-form-width-medium uk-form-small"
|
|
type="number"
|
|
name="inputResizeH"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<ul uk-accordion="multiple: true; animation: false">
|
|
<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">
|
|
<keyvalList v-model="metadata" />
|
|
</div>
|
|
</li>
|
|
|
|
<li>
|
|
<a class="uk-accordion-title" href="#">Tags</a>
|
|
<div class="uk-accordion-content">
|
|
<tagList v-model="tags" />
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<hr />
|
|
|
|
<ul uk-accordion="multiple: true; animation: false">
|
|
<!--Show stack and scan if scan plugin is enabled-->
|
|
<li v-if="scanUri">
|
|
<a class="uk-accordion-title" href="#">Stack and Scan</a>
|
|
<div class="uk-accordion-content">
|
|
<div class="uk-margin">
|
|
<label
|
|
><input
|
|
v-model="scanCapture"
|
|
class="uk-checkbox"
|
|
type="checkbox"
|
|
/>
|
|
Scan capture</label
|
|
>
|
|
</div>
|
|
|
|
<div :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>
|
|
|
|
<taskSubmitter
|
|
v-if="scanCapture"
|
|
:submit-url="scanUri"
|
|
:submit-data="scanPayload"
|
|
:submit-label="'Start Scan'"
|
|
@submit="onScanSubmit"
|
|
@response="onScanResponse"
|
|
@error="onScanError"
|
|
>
|
|
</taskSubmitter>
|
|
|
|
<button
|
|
v-else
|
|
class="uk-button uk-button-primary uk-form-small uk-margin uk-margin-remove-top uk-float-right uk-width-1-1"
|
|
@click="handleCapture()"
|
|
>
|
|
Capture
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
|
|
import tagList from "../fieldComponents/tagList";
|
|
import keyvalList from "../fieldComponents/keyvalList";
|
|
|
|
import taskSubmitter from "../genericComponents/taskSubmitter";
|
|
|
|
// Export main app
|
|
export default {
|
|
name: "PaneCapture",
|
|
|
|
components: {
|
|
tagList,
|
|
keyvalList,
|
|
taskSubmitter
|
|
},
|
|
|
|
data: function() {
|
|
return {
|
|
filename: "",
|
|
temporary: false,
|
|
fullResolution: false,
|
|
storeBayer: false,
|
|
resizeCapture: false,
|
|
captureNotes: "",
|
|
scanCapture: false,
|
|
scanDeltaZ: "Medium",
|
|
scanStyle: "Raster",
|
|
scanStepSize: {
|
|
x: 0,
|
|
y: 0,
|
|
z: 0
|
|
},
|
|
scanSteps: {
|
|
x: 3,
|
|
y: 3,
|
|
z: 5
|
|
},
|
|
resizeDims: [640, 480],
|
|
tags: [],
|
|
metadata: {
|
|
Client: `${process.env.PACKAGE.name}.${process.env.PACKAGE.version}`
|
|
},
|
|
scanUri: null
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
resizeClass: function() {
|
|
return {
|
|
"uk-disabled": !this.resizeCapture
|
|
};
|
|
},
|
|
captureActionUri: function() {
|
|
return `${this.$store.getters.baseUri}/api/v2/actions/camera/capture`;
|
|
},
|
|
pluginsUri: function() {
|
|
return `${this.$store.getters.baseUri}/api/v2/plugins`;
|
|
},
|
|
settingsFovUri: function() {
|
|
return `${this.$store.getters.baseUri}/api/v2/settings/fov`;
|
|
},
|
|
basePayload: function() {
|
|
var payload = {};
|
|
|
|
// Filename
|
|
if (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.metadata;
|
|
payload.tags = this.tags;
|
|
|
|
// Attach notes
|
|
if (this.captureNotes) {
|
|
payload.metadata["Notes"] = this.captureNotes;
|
|
}
|
|
|
|
return payload;
|
|
},
|
|
|
|
scanPayload: 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";
|
|
|
|
return payload;
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.updateScanUri();
|
|
this.updateScanStepSize();
|
|
},
|
|
|
|
methods: {
|
|
handleCapture: function() {
|
|
var payload = this.basePayload;
|
|
|
|
// Do capture
|
|
axios
|
|
.post(this.captureActionUri, payload)
|
|
.then(() => {
|
|
// Flash the stream (capture animation)
|
|
this.$root.$emit("globalFlashStream");
|
|
// Update the global capture list
|
|
this.$root.$emit("globalUpdateCaptureList");
|
|
})
|
|
.catch(error => {
|
|
this.modalError(error); // Let mixin handle error
|
|
});
|
|
},
|
|
|
|
updateScanUri: function() {
|
|
axios
|
|
.get(this.pluginsUri) // Get a list of plugins
|
|
.then(response => {
|
|
var plugins = response.data;
|
|
// if ScanPlugin is enabled
|
|
if ("ScanPlugin" in plugins) {
|
|
// Get plugin action link
|
|
var link = plugins.ScanPlugin.views.tile.links.self;
|
|
// Store plugin action URI
|
|
this.scanUri = `${this.$store.getters.baseUri}${link}`;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
this.modalError(error); // Let mixin handle error
|
|
});
|
|
},
|
|
|
|
updateScanStepSize: function() {
|
|
axios
|
|
.get(this.settingsFovUri) // Get a list of plugins
|
|
.then(response => {
|
|
this.scanStepSize = {
|
|
x: parseInt(0.5 * response.data[0]),
|
|
y: parseInt(0.5 * response.data[1]),
|
|
z: 50
|
|
};
|
|
})
|
|
.catch(error => {
|
|
this.modalError(error); // Let mixin handle error
|
|
});
|
|
},
|
|
|
|
onScanSubmit: function() {},
|
|
|
|
onScanResponse: function(responseData) {
|
|
console.log("Scan finished with response data: ", responseData);
|
|
this.modalNotify("Finished scan.");
|
|
},
|
|
|
|
onScanError: function(error) {
|
|
this.modalError(error);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.deletable-label {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.deletable-label:hover {
|
|
background-color: #f0506e;
|
|
}
|
|
</style>
|