126 lines
3.4 KiB
Vue
126 lines
3.4 KiB
Vue
<template>
|
|
<!-- Workflow Selection Dropdown -->
|
|
<div ref="slideScanControls" class="uk-margin">
|
|
<label class="uk-form-label">Workflow</label>
|
|
|
|
<select
|
|
class="uk-select uk-form-small"
|
|
:value="workflowName"
|
|
@change="setWorkflow($event.target.value)"
|
|
>
|
|
<option v-for="(label, name) in workflowOptions" :key="name" :value="name">
|
|
{{ label }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<server-specified-interface :elements="workflowSettings" @request-update="readSettings" />
|
|
<ul uk-accordion="multiple: true">
|
|
<li class="uk-open">
|
|
<a class="uk-accordion-title" href="#">Stitching Settings</a>
|
|
<div class="uk-accordion-content">
|
|
<div class="uk-margin">
|
|
<propertyControl
|
|
thing-name="smart_scan"
|
|
property-name="stitch_automatically"
|
|
label="Automatically Stitch Images Together"
|
|
/>
|
|
</div>
|
|
<div class="uk-margin">
|
|
<propertyControl
|
|
v-if="thingAvailable('smart_scan')"
|
|
thing-name="smart_scan"
|
|
property-name="stitch_tiff"
|
|
label="When Stitching, Produce a Pyramidal TIFF"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
|
|
<script>
|
|
import propertyControl from "@/components/labThingsComponents/propertyControl.vue";
|
|
import ServerSpecifiedInterface from "@/components/labThingsComponents/serverSpecifiedInterface.vue";
|
|
import { useIntersectionObserver } from "@vueuse/core";
|
|
//import { mapWritableState } from "pinia";
|
|
//import { useSettingsStore } from "@/stores/settings.js";
|
|
|
|
export default {
|
|
name: "SlideScanControls",
|
|
|
|
components: {
|
|
propertyControl,
|
|
ServerSpecifiedInterface,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
workflowName: undefined,
|
|
workflowSettings: [],
|
|
workflowOptions: [],
|
|
workflowReady: false,
|
|
};
|
|
},
|
|
|
|
async created() {
|
|
this.readSettings();
|
|
this.workflowOptions = await this.readThingProperty(
|
|
"smart_scan",
|
|
"workflow_display_names",
|
|
true,
|
|
);
|
|
},
|
|
|
|
mounted() {
|
|
// sets visibilityChanged to true or false, which can then update settings if needed
|
|
useIntersectionObserver(
|
|
this.$refs.slideScanControls,
|
|
([{ isIntersecting }]) => {
|
|
this.visibilityChanged(isIntersecting);
|
|
},
|
|
{
|
|
threshold: 0.0,
|
|
},
|
|
);
|
|
},
|
|
|
|
methods: {
|
|
visibilityChanged(isVisible) {
|
|
if (isVisible) {
|
|
this.readSettings();
|
|
}
|
|
},
|
|
async readSettings() {
|
|
this.workflowName = await this.readThingProperty("smart_scan", "workflow_name");
|
|
|
|
if (!this.workflowName) {
|
|
console.warn("Could not read workflow_name, using default");
|
|
this.workflowName = "histo_scan_workflow";
|
|
}
|
|
|
|
if (this.workflowName) {
|
|
this.workflowReady = await this.readThingProperty(this.workflowName, "ready", true);
|
|
this.workflowSettings =
|
|
(await this.getThingEndpoint(this.workflowName, "settings_ui")) || [];
|
|
}
|
|
},
|
|
async setWorkflow(name) {
|
|
try {
|
|
this.workflowName = name;
|
|
|
|
await this.writeThingProperty("smart_scan", "workflow_name", name);
|
|
|
|
// refresh UI
|
|
await this.readSettings();
|
|
} catch (err) {
|
|
this.modalError(err);
|
|
|
|
// revert if server rejected
|
|
this.workflowName = await this.readThingProperty("smart_scan", "workflow_name", true);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|