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

Ttile case in all buttons and properties, larger settings headers

Browse source
This commit is contained in:
Joe Knapper 2025-05-20 12:59:49 +01:00
parent 241b2ca463
commit 625f9b4001
12 changed files with 45 additions and 47 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
// //
@nav-header-font-size: 12px; @nav-header-font-size: 16px;
.uk-nav-header{
text-transform:none;
}
// //
// Subnav // Subnav
@ -358,6 +362,7 @@ a:hover {
padding: 0 8px; padding: 0 8px;
border-color: @global-border; border-color: @global-border;
margin-bottom: 2px; margin-bottom: 2px;
text-transform:none !important;
} }
.uk-button-default { .uk-button-default {

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

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

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

@ -25,12 +25,6 @@
Apply Apply
</button> </button>
</form> </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> </div>
</template> </template>

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

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

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

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

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

@ -5,9 +5,9 @@
uk-grid uk-grid
> >
<div class="uk-width-large"> <div class="uk-width-large">
<h3>Camera/stage mapping</h3> <h3>Camera to Stage Mapping</h3>
<p> <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 view. This enables functions like click-to-move, and more precise tile
scans. scans.
</p> </p>

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

@ -11,7 +11,7 @@
" "
thing="camera_stage_mapping" thing="camera_stage_mapping"
action="calibrate_xy" action="calibrate_xy"
:submit-label="'Auto-Calibrate using camera'" :submit-label="'Auto-Calibrate Using Camera'"
:modal-progress="true" :modal-progress="true"
@response="onRecalibrateResponse" @response="onRecalibrateResponse"
@error="modalError" @error="modalError"
@ -24,7 +24,7 @@
class="uk-button uk-button-default uk-width-1-1" class="uk-button uk-button-default uk-width-1-1"
@click="getCalibrationData()" @click="getCalibrationData()"
> >
Download calibration data Download Calibration Data
</button> </button>
</div> </div>
</template> </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> <a class="uk-accordion-title" href="#">Pi Camera Settings</a>
<div class="uk-accordion-content"> <div class="uk-accordion-content">
<PropertyControl <PropertyControl
label="Exposure time (0-33251)" label="Exposure Time (0-33251)"
property-name="exposure_time" property-name="exposure_time"
thing-name="camera" thing-name="camera"
:read-back-delay="1000" :read-back-delay="1000"
/> />
<PropertyControl <PropertyControl
label="Analogue gain" label="Analogue Gain"
property-name="analogue_gain" property-name="analogue_gain"
thing-name="camera" thing-name="camera"
:read-back-delay="1000" :read-back-delay="1000"
/> />
<PropertyControl <PropertyControl
label="Colour gains" label="Colour Gains"
property-name="colour_gains" property-name="colour_gains"
thing-name="camera" thing-name="camera"
:read-back-delay="1000" :read-back-delay="1000"
@ -36,13 +36,13 @@
<a class="uk-accordion-title" href="#">Image Quality</a> <a class="uk-accordion-title" href="#">Image Quality</a>
<div class="uk-accordion-content"> <div class="uk-accordion-content">
<PropertyControl <PropertyControl
label="MJPEG stream bit rate" label="MJPEG Stream Bit Rate"
property-name="mjpeg_bitrate" property-name="mjpeg_bitrate"
thing-name="camera" thing-name="camera"
:read-back-delay="100" :read-back-delay="100"
/> />
<PropertyControl <PropertyControl
label="MJPEG stream resolution" label="MJPEG Stream Resolution"
property-name="stream_resolution" property-name="stream_resolution"
thing-name="camera" thing-name="camera"
:read-back-delay="100" :read-back-delay="100"

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

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

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

@ -1,10 +1,10 @@
<template> <template>
<div id="streamSettings" class="uk-width-large"> <div id="streamSettings" class="uk-width-large">
<div> <div>
<h3>Stream settings</h3> <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 web stream</label Disable Web Stream</label
> >
<p class="uk-margin-small"> <p class="uk-margin-small">
This will disable the embedded web stream of the camera. This will disable the embedded web stream of the camera.

9
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 uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
<div class="settings-nav"> <div class="settings-nav">
<ul class="uk-nav uk-nav-default"> <ul class="uk-nav uk-nav-default">
<li class="uk-nav-header">Application settings</li> <li class="uk-nav-header">Application Settings</li>
<li> <li>
<tabIcon <tabIcon
id="settings-display-icon" id="settings-display-icon"
@ -30,7 +30,7 @@
Features Features
</tabIcon> </tabIcon>
</li> </li>
<li class="uk-nav-header">Microscope settings</li> <li class="uk-nav-header">Microscope Settings</li>
<li> <li>
<tabIcon <tabIcon
id="settings-camera-icon" id="settings-camera-icon"
@ -67,15 +67,14 @@
:current-tab="currentTab" :current-tab="currentTab"
@set-tab="setTab" @set-tab="setTab"
> >
Camera/stage mapping Camera to Stage Mapping
</tabIcon> </tabIcon>
</li> </li>
</ul> </ul>
<action-button <action-button
thing="settings" thing="settings"
action="save_all_thing_settings" action="save_all_thing_settings"
submit-label="Save all settings" submit-label="Save All Settings"
class="uk-margin"
/> />
</div> </div>
<div class="view-component uk-width-expand uk-padding-small"> <div class="view-component uk-width-expand uk-padding-small">

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

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