rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'lower-case-gui' into 'v3'

Browse source 
GUI clean up - button cases, features tab and redo tour

Closes #381

See merge request openflexure/openflexure-microscope-server!268
This commit is contained in:
Joe Knapper 2025-05-20 13:15:58 +00:00
commit 0b2aaa9c92
14 changed files with 46 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

7
webapp/src/assets/less/theme.less
View file

@ -80,7 +80,11 @@
// Nav
//
@nav-header-font-size: 12px;
@nav-header-font-size: 16px;
.uk-nav-header{
text-transform:none;
}
//
// Subnav
@ -358,6 +362,7 @@ a:hover {
padding: 0 8px;
border-color: @global-border;
margin-bottom: 2px;
text-transform:none !important;
}
.uk-button-default {

10
webapp/src/components/appContent.vue
View file

@ -205,27 +205,27 @@ export default {
topTabs: function() {
let tabs = [
{
id: "view",
id: "View",
icon: "visibility",
component: viewContent
},
{
id: "navigate",
id: "Navigate",
icon: "gamepad",
component: navigateContent
},
{
id: "background detect",
id: "Background Detect",
icon: "background_replace",
component: backgroundDetectContent
},
{
id: "slide scan",
id: "Slide Scan",
icon: "settings_overscan",
component: slideScanContent
},
{
id: "scan list",
id: "Scan List",
icon: "photo_library",
component: ScanListContent
}

6
webapp/src/components/tabContentComponents/aboutComponents/devTools.vue
View file

@ -25,12 +25,6 @@
Apply
</button>
</form>
<form class="uk-form-stacked" @submit.prevent="resetTour">
<label class="uk-form-label">Re-run tour on next load</label>
<button class="uk-button uk-button-default uk-margin-small">
Reset
</button>
</form>
</div>
</template>

6
webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
View file

@ -3,12 +3,12 @@
<div v-if="$store.state.available">
<div>
<div class="uk-margin-small-bottom">
<b>Microscope hostname:</b>
<b>Microscope Hostname:</b>
<br />
{{ $store.state.microscopeHostname }}
</div>
<div class="uk-margin-small-bottom">
<b>API origin:</b>
<b>API Origin:</b>
<br />
{{ $store.state.origin }}
</div>
@ -24,7 +24,7 @@
<hr />
<div>
<b>Server version:</b> <br />
<b>Server Version:</b> <br />
TODO
</div>

8
webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
View file

@ -19,14 +19,14 @@
<propertyControl
thing-name="background_detect"
property-name="fraction"
label="Sample coverage required (%)"
label="Sample Coverage Required (%)"
/>
</div>
<div class="uk-margin">
<action-button
thing="background_detect"
action="background_fraction"
submit-label="Check coverage"
submit-label="Check Coverage"
:can-terminate="false"
:poll-interval="0.1"
@response="alertBackgroundFraction"
@ -40,7 +40,7 @@
<action-button
thing="background_detect"
action="set_background"
submit-label="Set background"
submit-label="Set Background"
:can-terminate="false"
:poll-interval="0.1"
@response="alertBackgroundSet"
@ -50,7 +50,7 @@
<action-button
thing="background_detect"
action="image_is_sample"
submit-label="Check current image"
submit-label="Check Current Image"
:can-terminate="false"
:poll-interval="0.1"
@response="alertImageLabel"

2
webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue
View file

@ -5,7 +5,7 @@
<li>
<a class="uk-accordion-title" href="#">Configure</a>
<div class="uk-accordion-content">
<b>STEP SIZE</b>
<b>Step Size</b>
<div class="uk-grid-small uk-child-width-1-3" uk-grid>
<div>
<label class="uk-form-label" for="form-stacked-text">x</label>

4
webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
View file

@ -5,9 +5,9 @@
uk-grid
>
<div class="uk-width-large">
<h3>Camera/stage mapping</h3>
<h3>Camera to Stage Mapping</h3>
<p>
Camera/stage mapping allows the stage to move relative to the camera
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>

4
webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
View file

@ -11,7 +11,7 @@
"
thing="camera_stage_mapping"
action="calibrate_xy"
:submit-label="'Auto-Calibrate using camera'"
:submit-label="'Auto-Calibrate Using Camera'"
:modal-progress="true"
@response="onRecalibrateResponse"
@error="modalError"
@ -24,7 +24,7 @@
class="uk-button uk-button-default uk-width-1-1"
@click="getCalibrationData()"
>
Download calibration data
Download Calibration Data
</button>
</div>
</template>

10
webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
View file

@ -13,19 +13,19 @@
<a class="uk-accordion-title" href="#">Pi Camera Settings</a>
<div class="uk-accordion-content">
<PropertyControl
label="Exposure time (0-33251)"
label="Exposure Time (0-33251)"
property-name="exposure_time"
thing-name="camera"
:read-back-delay="1000"
/>
<PropertyControl
label="Analogue gain"
label="Analogue Gain"
property-name="analogue_gain"
thing-name="camera"
:read-back-delay="1000"
/>
<PropertyControl
label="Colour gains"
label="Colour Gains"
property-name="colour_gains"
thing-name="camera"
:read-back-delay="1000"
@ -36,13 +36,13 @@
<a class="uk-accordion-title" href="#">Image Quality</a>
<div class="uk-accordion-content">
<PropertyControl
label="MJPEG stream bit rate"
label="MJPEG Stream Bit Rate"
property-name="mjpeg_bitrate"
thing-name="camera"
:read-back-delay="100"
/>
<PropertyControl
label="MJPEG stream resolution"
label="MJPEG Stream Resolution"
property-name="stream_resolution"
thing-name="camera"
:read-back-delay="100"

10
webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
View file

@ -21,7 +21,7 @@
:requires-confirmation="false"
thing="camera"
action="auto_expose_from_minimum"
:submit-label="'Auto gain &amp; shutter speed'"
:submit-label="'Auto Gain &amp; Shutter Speed'"
@response="onRecalibrateResponse"
@error="modalError"
/>
@ -32,7 +32,7 @@
:requires-confirmation="false"
thing="camera"
action="calibrate_white_balance"
:submit-label="'Auto white balance'"
:submit-label="'Auto White Balance'"
@response="onRecalibrateResponse"
@error="modalError"
/>
@ -47,7 +47,7 @@
"
thing="camera"
action="calibrate_lens_shading"
:submit-label="'Auto flat field correction'"
:submit-label="'Auto Flat Field Correction'"
@response="onRecalibrateResponse"
@error="modalError"
/>
@ -63,7 +63,7 @@
:requires-confirmation="false"
thing="camera"
action="flat_lens_shading"
:submit-label="'Disable flat field correction'"
:submit-label="'Disable Flat Field Correction'"
@response="onRecalibrateResponse"
@error="modalError"
/>
@ -78,7 +78,7 @@
:requires-confirmation="false"
thing="camera"
action="reset_lens_shading"
:submit-label="'Reset flat field correction'"
:submit-label="'Reset Flat Field Correction'"
@response="onRecalibrateResponse"
@error="modalError"
/>

90
webapp/src/components/tabContentComponents/settingsComponents/featuresSettings.vue
View file

@ -1,90 +0,0 @@
<template>
<div id="appSettings" class="uk-width-large">
<h3>Additional features</h3>
<p class="uk-margin-small" :class="{ 'uk-text-muted': !imjoyPermitted }">
<label :disabled="!imjoyPermitted">
<input
v-model="imjoyEnabled"
class="uk-checkbox"
type="checkbox"
:disabled="!imjoyPermitted"
/>
Enable ImJoy plugin engine
</label>
</p>
<p v-if="imjoyPermitted" class="uk-margin-small">
<a href="https://imjoy.io/">ImJoy</a> enables integration with a wide
variety of microscopy and image analysis applications, including ImageJ.JS
and Kaibu. Support for ImJoy within the OFM software is currently
experimental, and it may slow down loading of the application.
</p>
<p v-if="!imjoyPermitted" class="uk-margin-small uk-text-muted">
ImJoy plugins are disabled in this build of the OpenFlexure software.
</p>
<p class="uk-margin-small">
<label
><input v-model="galleryEnabled" class="uk-checkbox" type="checkbox" />
Enable Gallery</label
>
</p>
<p class="uk-margin-small">
The "gallery" tab can cause performance issues; un-tick the box above to
disable it.
</p>
</div>
</template>
<script>
// Export main app
export default {
name: "FeaturesSettings",
data: function() {
return {};
},
computed: {
imjoyEnabled: {
get() {
return this.$store.state.imjoyEnabled;
},
set(value) {
this.$store.commit("changeImjoyEnabled", value);
}
},
galleryEnabled: {
get() {
return this.$store.state.galleryEnabled;
},
set(value) {
this.$store.commit("changeGalleryEnabled", value);
}
},
imjoyPermitted: function() {
// ImJoy may be disabled using an environment variable.
// If this function returns false, it is never possible to
// use ImJoy, so we should gray out the option.
return process.env.VUE_APP_ENABLE_IMJOY === "true";
}
},
watch: {
imjoyEnabled: function() {
this.setLocalStorageObj("imjoyEnabled", this.imjoyEnabled);
},
galleryEnabled: function() {
this.setLocalStorageObj("galleryEnabled", this.galleryEnabled);
}
},
mounted() {
// Try loading settings from localStorage. If null, don't change.
this.imjoyEnabled =
this.getLocalStorageObj("imjoyEnabled") || this.imjoyEnabled;
this.galleryEnabled =
this.getLocalStorageObj("galleryEnabled") || this.galleryEnabled;
}
};
</script>
<style lang="less"></style>

4
webapp/src/components/tabContentComponents/settingsComponents/streamSettings.vue
View file

@ -1,10 +1,10 @@
<template>
<div id="streamSettings" class="uk-width-large">
<div>
<h3>Stream settings</h3>
<h3>Stream Settings</h3>
<label
><input v-model="disableStream" class="uk-checkbox" type="checkbox" />
Disable web stream</label
Disable Web Stream</label
>
<p class="uk-margin-small">
This will disable the embedded web stream of the camera.

34
webapp/src/components/tabContentComponents/settingsContent.vue
View file

@ -3,7 +3,7 @@
<div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
<div class="settings-nav">
<ul class="uk-nav uk-nav-default">
<li class="uk-nav-header">Application settings</li>
<li class="uk-nav-header">Application Settings</li>
<li>
<tabIcon
id="settings-display-icon"
@ -17,20 +17,7 @@
Display
</tabIcon>
</li>
<li>
<tabIcon
id="settings-features-icon"
tab-i-d="features"
:show-title="false"
:show-tooltip="false"
:require-connection="false"
:current-tab="currentTab"
@set-tab="setTab"
>
Features
</tabIcon>
</li>
<li class="uk-nav-header">Microscope settings</li>
<li class="uk-nav-header">Microscope Settings</li>
<li>
<tabIcon
id="settings-camera-icon"
@ -67,15 +54,14 @@
:current-tab="currentTab"
@set-tab="setTab"
>
Camera/stage mapping
Camera to Stage Mapping
</tabIcon>
</li>
</ul>
<action-button
thing="settings"
action="save_all_thing_settings"
submit-label="Save all settings"
class="uk-margin"
submit-label="Save All Settings"
/>
</div>
<div class="view-component uk-width-expand uk-padding-small">
@ -90,16 +76,6 @@
</div>
</tabContent>
<tabContent
tab-i-d="features"
:require-connection="false"
:current-tab="currentTab"
>
<div class="settings-pane uk-padding-small">
<featuresSettings />
</div>
</tabContent>
<tabContent
tab-i-d="camera"
:require-connection="true"
@ -137,7 +113,6 @@
import streamSettings from "./settingsComponents/streamSettings.vue";
import cameraSettings from "./settingsComponents/cameraSettings.vue";
import appSettings from "./settingsComponents/appSettings.vue";
import featuresSettings from "./settingsComponents/featuresSettings.vue";
import CSMSettings from "./settingsComponents/CSMSettings.vue";
import stageSettings from "./settingsComponents/stageSettings.vue";
// Import generic components
@ -155,7 +130,6 @@ export default {
stageSettings,
CSMSettings,
appSettings,
featuresSettings,
tabIcon,
tabContent,
ActionButton

14
webapp/src/components/tabContentComponents/slideScanContent.vue
View file

@ -21,7 +21,7 @@
<propertyControl
thing-name="smart_scan"
property-name="autofocus_dz"
label="Autofocus range (steps)"
label="Autofocus Range (steps)"
/>
</div>
<div class="uk-margin">
@ -35,21 +35,21 @@
<propertyControl
thing-name="autofocus"
property-name="stack_images_to_capture"
label="Images in stack to capture"
label="Images in Stack to Capture"
/>
</div>
<div class="uk-margin">
<propertyControl
thing-name="smart_scan"
property-name="overlap"
label="Image overlap (0-1)"
label="Image Overlap (0-1)"
/>
</div>
<div class="uk-margin">
<propertyControl
thing-name="smart_scan"
property-name="stitch_tiff"
label="When stitching, produce a pyramidal tiff"
label="When Stitching, Produce a Pyramidal TIFF"
/>
</div>
</div>
@ -61,14 +61,14 @@
<propertyControl
thing-name="smart_scan"
property-name="skip_background"
label="Detect and skip empty fields"
label="Detect and Skip Empty Fields"
/>
</div>
<div class="uk-margin">
<propertyControl
thing-name="smart_scan"
property-name="stitch_automatically"
label="Automatically stitch images together"
label="Automatically Stitch Images Together"
/>
</div>
</div>
@ -89,7 +89,7 @@
thing="smart_scan"
action="sample_scan"
:submit-data="{ scan_name: scan_name }"
submit-label="Start smart scan"
submit-label="Start Smart Scan"
:can-terminate="true"
@taskStarted="startScanning"
@update:taskStatus="taskStatus = $event"