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

Format the stage control so it isn't so wide

Browse source
This commit is contained in:
Julian Stirling 2025-11-07 22:24:47 +00:00
parent cb9d134ac3
commit 8babf3f17b
1 changed files with 30 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

56
webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
View file

@ -1,34 +1,38 @@
<template>
<div>
<a class="uk-accordion-title" href="#">Configure</a>
<div class="uk-accordion-content">
<b>Keyboard 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>
<div class="uk-form-controls">
<input v-model="stepSize.x" class="uk-input uk-form-small" type="number" />
</div>
<label class="uk-margin-small-right"
><input v-model="invert.x" class="uk-checkbox" type="checkbox" /> Invert x</label
>
<div class="uk-width-large">
<p><b>Single Move Step Size</b></p>
<p>
This sets the size (and direction) of movements within the web app. Including keyboard arrow
keys (and PageUp/PageDown). It also includes the navigation buttons in the control tab.
</p>
<p>These settings do not affect the operation of other actions your microscope performs.</p>
<div class="uk-grid-small uk-child-width-1-3" uk-grid>
<div>
<label class="uk-form-label" for="form-stacked-text">x</label>
<div class="uk-form-controls">
<input v-model="stepSize.x" class="uk-input uk-form-small" type="number" />
</div>
<label class="uk-margin-small-right">
<input v-model="invert.x" class="uk-checkbox" type="checkbox" />
Invert x
</label>
</div>
<div>
<label class="uk-form-label" for="form-stacked-text">y</label>
<div class="uk-form-controls">
<input v-model="stepSize.y" class="uk-input uk-form-small" type="number" />
</div>
<label class="uk-margin-small-right"
><input v-model="invert.y" class="uk-checkbox" type="checkbox" /> Invert y</label
>
<div>
<label class="uk-form-label" for="form-stacked-text">y</label>
<div class="uk-form-controls">
<input v-model="stepSize.y" class="uk-input uk-form-small" type="number" />
</div>
<label class="uk-margin-small-right">
<input v-model="invert.y" class="uk-checkbox" type="checkbox" />
Invert y
</label>
</div>
<div>
<label class="uk-form-label" for="form-stacked-text">z</label>
<div class="uk-form-controls">
<input v-model="stepSize.z" class="uk-input uk-form-small" type="number" />
</div>
<div>
<label class="uk-form-label" for="form-stacked-text">z</label>
<div class="uk-form-controls">
<input v-model="stepSize.z" class="uk-input uk-form-small" type="number" />
</div>
</div>
</div>