Further layout improvements

This commit is contained in:
Joel Collins 2020-04-24 11:19:46 +01:00
parent a992f88aea
commit 07c4399bbf
10 changed files with 121 additions and 109 deletions

View file

@ -247,7 +247,7 @@
<button <button
v-else v-else
class="uk-button uk-button-primary uk-form-small uk-margin uk-margin-remove-top uk-width-1-1" class="uk-button uk-button-primary uk-margin uk-margin-remove-top uk-width-1-1"
@click="handleCapture()" @click="handleCapture()"
> >
Capture Capture

View file

@ -36,7 +36,7 @@
</div> </div>
<button <button
class="uk-button uk-button-default uk-form-small uk-margin uk-width-1-1" class="uk-button uk-button-default uk-margin uk-width-1-1"
@click="zeroRequest()" @click="zeroRequest()"
> >
Zero coordinates Zero coordinates
@ -91,7 +91,7 @@
<p> <p>
<button <button
type="submit" type="submit"
class="uk-button uk-button-default uk-form-small uk-float-right uk-width-1-1" class="uk-button uk-button-default uk-float-right uk-width-1-1"
> >
Move Move
</button> </button>
@ -265,15 +265,17 @@ export default {
// Lock move requests // Lock move requests
this.moveLock = true; this.moveLock = true;
if (!this.moveInImageCoordinatesUri){ if (!this.moveInImageCoordinatesUri) {
this.modalError("Moving in image coordinates is not supported - you will need to upgrade your microscope's software."); this.modalError(
"Moving in image coordinates is not supported - you will need to upgrade your microscope's software."
);
} }
// Send move request // Send move request
axios axios
.post(this.moveInImageCoordinatesUri, { .post(this.moveInImageCoordinatesUri, {
x: y, // NB the coordinates are numpy/PIL style, meaning X and Y are swapped. x: y, // NB the coordinates are numpy/PIL style, meaning X and Y are swapped.
y: x, y: x
}) })
.then(() => { .then(() => {
this.updatePosition(); // Update the position in text boxes this.updatePosition(); // Update the position in text boxes
@ -340,7 +342,8 @@ export default {
); );
if (foundExtension) { if (foundExtension) {
// Get plugin action link // Get plugin action link
this.moveInImageCoordinatesUri = foundExtension.links.move_in_image_coordinates.href; this.moveInImageCoordinatesUri =
foundExtension.links.move_in_image_coordinates.href;
} }
}) })
.catch(error => { .catch(error => {

View file

@ -13,7 +13,7 @@
<button <button
v-if="canTerminate" v-if="canTerminate"
type="button" type="button"
class="uk-button uk-button-danger uk-form-small uk-margin-remove uk-float-right uk-width-1-1" class="uk-button uk-button-danger uk-margin-remove uk-float-right uk-width-1-1"
@click="terminateTask()" @click="terminateTask()"
> >
Terminate Terminate
@ -24,7 +24,7 @@
<button <button
type="button" type="button"
:hidden="taskRunning" :hidden="taskRunning"
class="uk-button uk-form-small uk-margin-remove uk-width-1-1" class="uk-button uk-margin-remove uk-width-1-1"
:class="[buttonPrimary ? 'uk-button-primary' : 'uk-button-default']" :class="[buttonPrimary ? 'uk-button-primary' : 'uk-button-default']"
@click="bootstrapTask()" @click="bootstrapTask()"
> >

View file

@ -49,7 +49,7 @@
<div v-else class="uk-margin"> <div v-else class="uk-margin">
<button <button
type="button" type="button"
class="uk-button uk-button-primary uk-form-small uk-width-1-1" class="uk-button uk-button-primary uk-width-1-1"
@click="newQuickRequest(formData)" @click="newQuickRequest(formData)"
> >
{{ submitLabel }} {{ submitLabel }}

View file

@ -1,5 +1,6 @@
<template> <template>
<div id="appSettings"> <div id="appSettings">
<h3>Appearance</h3>
<p> <p>
<label> <label>
Theme Theme

View file

@ -1,62 +1,64 @@
<template> <template>
<div v-if="settings" id="cameraSettings"> <div v-if="settings" id="cameraSettings">
<form @submit.prevent="applyConfigRequest"> <div>
<div v-if="settings.picamera"> <h3>Manual camera settings</h3>
<!--PiCamera settings block--> <form @submit.prevent="applyConfigRequest">
<div v-if="settings.picamera.shutter_speed !== undefined"> <div v-if="settings.picamera">
<label class="uk-form-label" for="form-stacked-text" <!--PiCamera settings block-->
>Exposure time</label <div v-if="settings.picamera.shutter_speed !== undefined">
> <label class="uk-form-label" for="form-stacked-text"
<div class="uk-form-controls"> >Exposure time</label
<input >
v-model="settings.picamera.shutter_speed" <div class="uk-form-controls">
class="uk-input uk-form-small" <input
type="number" v-model="settings.picamera.shutter_speed"
/> class="uk-input uk-form-small"
type="number"
/>
</div>
</div>
<div v-if="settings.picamera.analog_gain !== undefined">
<label class="uk-form-label" for="form-stacked-text"
>Analogue gain</label
>
<div class="uk-form-controls">
<input
v-model="settings.picamera.analog_gain"
class="uk-input uk-form-small"
type="number"
step="0.000001"
/>
</div>
</div>
<div v-if="settings.picamera.digital_gain !== undefined">
<label class="uk-form-label" for="form-stacked-text"
>Digital gain</label
>
<div class="uk-form-controls">
<input
v-model="settings.picamera.digital_gain"
class="uk-input uk-form-small"
type="number"
step="0.000001"
/>
</div>
</div> </div>
</div> </div>
<div v-if="settings.picamera.analog_gain !== undefined"> <button
<label class="uk-form-label" for="form-stacked-text" type="submit"
>Analogue gain</label class="uk-button uk-button-primary uk-margin-small uk-width-1-1"
> >
<div class="uk-form-controls"> Apply Settings
<input </button>
v-model="settings.picamera.analog_gain" </form>
class="uk-input uk-form-small" </div>
type="number"
step="0.000001"
/>
</div>
</div>
<div v-if="settings.picamera.digital_gain !== undefined">
<label class="uk-form-label" for="form-stacked-text"
>Digital gain</label
>
<div class="uk-form-controls">
<input
v-model="settings.picamera.digital_gain"
class="uk-input uk-form-small"
type="number"
step="0.000001"
/>
</div>
</div>
</div>
<button
type="submit"
class="uk-button uk-button-primary uk-form-small uk-margin-small uk-width-1-1"
>
Apply Settings
</button>
</form>
<hr />
<!--Show auto calibrate if default plugin is enabled--> <!--Show auto calibrate if default plugin is enabled-->
<div v-if="'recalibrate' in recalibrationLinks" class="uk-margin-small"> <div v-if="'recalibrate' in recalibrationLinks" class="uk-margin-small">
<h3>Automatic calibration</h3>
<taskSubmitter <taskSubmitter
:can-terminate="false" :can-terminate="false"
:requires-confirmation="true" :requires-confirmation="true"
@ -71,28 +73,24 @@
</taskSubmitter> </taskSubmitter>
</div> </div>
<div <div class="uk-child-width-expand" uk-grid>
v-if="'flatten_lens_shading_table' in recalibrationLinks" <div v-if="'flatten_lens_shading_table' in recalibrationLinks">
class="uk-margin-small" <button
> class="uk-button uk-button-danger uk-width-1-1"
<button @click="flattenLensShadingTableRequest"
class="uk-button uk-button-danger uk-form-small uk-width-1-1" >
@click="flattenLensShadingTableRequest" Disable flat-field correction
> </button>
Disable flat-field correction </div>
</button>
</div>
<div <div v-if="'delete_lens_shading_table' in recalibrationLinks">
v-if="'delete_lens_shading_table' in recalibrationLinks" <button
class="uk-margin-small" class="uk-button uk-button-danger uk-width-1-1"
> @click="deleteLensShadingTableRequest"
<button >
class="uk-button uk-button-danger uk-form-small uk-width-1-1" Adaptive flat-field correction
@click="deleteLensShadingTableRequest" </button>
> </div>
Adaptive flat-field correction
</button>
</div> </div>
</div> </div>
</template> </template>

View file

@ -1,8 +1,11 @@
<template> <template>
<div id="cameraStageMappingSettings"> <div id="cameraStageMappingSettings">
<h3>Camera/stage mapping</h3>
<p>
Camera/stage mapping allows the stage to move relative to the camera view.
This enables functions like click-to-move, and more precise tile scans.
</p>
<form @submit.prevent="applyConfigRequest"> <form @submit.prevent="applyConfigRequest">
<!--Show auto calibrate if default plugin is enabled--> <!--Show auto calibrate if default plugin is enabled-->
<div v-if="'calibrate_xy' in recalibrationLinks" class="uk-margin-small"> <div v-if="'calibrate_xy' in recalibrationLinks" class="uk-margin-small">
<taskSubmitter <taskSubmitter
@ -61,7 +64,8 @@ export default {
axios axios
.get(this.settingsUri) .get(this.settingsUri)
.then(response => { .then(response => {
this.settings = response.data.extensions['org.openflexure.camera_stage_mapping']; this.settings =
response.data.extensions["org.openflexure.camera_stage_mapping"];
}) })
.catch(error => { .catch(error => {
this.modalError(error); // Let mixin handle error this.modalError(error); // Let mixin handle error
@ -82,7 +86,7 @@ export default {
// Get plugin action link // Get plugin action link
this.recalibrationLinks = foundExtension.links; this.recalibrationLinks = foundExtension.links;
} else { } else {
this.recalibrationLinks = {} this.recalibrationLinks = {};
} }
}) })
.catch(error => { .catch(error => {

View file

@ -1,5 +1,6 @@
<template> <template>
<div class="host-input uk-padding-small"> <div class="host-input">
<h3>Status</h3>
<div v-if="configuration && $store.getters.ready"> <div v-if="configuration && $store.getters.ready">
<div> <div>
<div class="uk-margin-small-bottom"> <div class="uk-margin-small-bottom">
@ -49,7 +50,7 @@
<div> <div>
<button <button
v-show="'shutdown' in systemActionLinks" v-show="'shutdown' in systemActionLinks"
class="uk-button uk-button-danger uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1" class="uk-button uk-button-danger uk-float-right uk-margin uk-margin-remove-top uk-width-1-1"
@click="shutdownRequest" @click="shutdownRequest"
> >
Shutdown Shutdown
@ -59,7 +60,7 @@
<div> <div>
<button <button
v-show="'reboot' in systemActionLinks" v-show="'reboot' in systemActionLinks"
class="uk-button uk-button-danger uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1" class="uk-button uk-button-danger uk-float-right uk-margin uk-margin-remove-top uk-width-1-1"
@click="rebootRequest" @click="rebootRequest"
> >
Restart Restart

View file

@ -1,26 +1,36 @@
<template> <template>
<div id="streamSettings"> <div id="streamSettings">
<p> <div>
<h3>Stream settings</h3>
<label <label
><input v-model="disableStream" class="uk-checkbox" type="checkbox" /> ><input v-model="disableStream" class="uk-checkbox" type="checkbox" />
Disable live stream</label Disable live stream</label
> >
</p> </div>
<hr /> <br />
<p> <div>
<label :class="[{ 'uk-disabled': !this.$store.getters.ready }]" <h3>Microscope display output</h3>
><input v-model="autoGpuPreview" class="uk-checkbox" type="checkbox" /> <div uk-grid>
GPU preview</label <div>
> <label :class="[{ 'uk-disabled': !this.$store.getters.ready }]"
</p> ><input
<p> v-model="autoGpuPreview"
<label :class="[{ 'uk-disabled': !this.$store.getters.ready }]" class="uk-checkbox"
><input v-model="trackWindow" class="uk-checkbox" type="checkbox" /> type="checkbox"
Track window</label />
> Enable GPU preview</label
</p> >
</div>
<div>
<label :class="[{ 'uk-disabled': !this.$store.getters.ready }]"
><input v-model="trackWindow" class="uk-checkbox" type="checkbox" />
Track window</label
>
</div>
</div>
</div>
</div> </div>
</template> </template>

View file

@ -79,7 +79,6 @@
:current-tab="currentTab" :current-tab="currentTab"
> >
<div class="settings-pane uk-padding-small"> <div class="settings-pane uk-padding-small">
<h3>Status</h3>
<statusPane /> <statusPane />
</div> </div>
</tabContent> </tabContent>
@ -90,9 +89,7 @@
:current-tab="currentTab" :current-tab="currentTab"
> >
<div class="settings-pane uk-padding-small"> <div class="settings-pane uk-padding-small">
<h3>Display settings</h3>
<appSettings /> <appSettings />
<hr />
<streamSettings /> <streamSettings />
</div> </div>
</tabContent> </tabContent>
@ -103,7 +100,6 @@
:current-tab="currentTab" :current-tab="currentTab"
> >
<div class="settings-pane uk-padding-small"> <div class="settings-pane uk-padding-small">
<h3>Camera settings</h3>
<cameraSettings /> <cameraSettings />
</div> </div>
</tabContent> </tabContent>
@ -114,7 +110,6 @@
:current-tab="currentTab" :current-tab="currentTab"
> >
<div class="settings-pane uk-padding-small"> <div class="settings-pane uk-padding-small">
<h3>Camera/stage mapping settings</h3>
<cameraStageMappingSettings /> <cameraStageMappingSettings />
</div> </div>
</tabContent> </tabContent>