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

Added menu to modal to adjust z height

Browse source
This commit is contained in:
Chish36 2025-08-13 15:42:32 +01:00
parent 3b5df818d3
commit 0de3f6df66
1 changed files with 73 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

80
webapp/src/components/modalComponents/calibrationModal.vue
View file

@ -54,6 +54,51 @@
</div>
<div v-show="stepValue == 2">
<h3>Adjust z height</h3>
<p>
Insert a sample and adjust the z position of
the stage using the buttons below, until the
sample is in focus.
</p>
<p>
You may also adjust the z position with <b>page up</b> and <b>page down</b>.
</p>
<miniStreamDisplay
v-if="stepValue == 2"
class="mini-preview"
></miniStreamDisplay>
<div class="action-button-container">
<action-button
ref="moveZ"
thing="stage"
action="move_relative"
:button-primary="false"
:submit-data="{ x: 0, y: 0, z: -100}"
:submit-label="'-'"
:can-terminate="false"
@finished="
updatePosition();
"
class="action-button"
/>
<action-button
ref="moveZ"
thing="stage"
action="move_relative"
:button-primary="false"
:submit-data="{ x: 0, y: 0, z: 100}"
:submit-label="'+'"
:can-terminate="false"
@finished="
updatePosition();
"
class="action-button"
/>
</div>
</div>
<div v-show="stepValue == 3">
<h3>Camera-stage mapping</h3>
<div v-if="isCSMCalibrated">
<p>
@ -87,7 +132,7 @@
</ul>
<miniStreamDisplay
v-if="stepValue == 2"
v-if="stepValue == 3"
class="mini-preview"
></miniStreamDisplay>
@ -99,7 +144,7 @@
</div>
</div>
<div v-show="stepValue == 3">
<div v-show="stepValue == 4">
<p>
<b>Calibration complete</b>
</p>
@ -118,7 +163,7 @@
Cancel
</button>
<button
v-show="stepValue == 3"
v-show="stepValue == 4"
class="uk-button uk-button-default"
type="button"
@click="restart()"
@ -126,7 +171,7 @@
Restart
</button>
<button
v-show="stepValue < 3"
v-show="stepValue < 4"
class="uk-button uk-button-primary uk-margin-left"
type="button"
@click="increment()"
@ -134,7 +179,7 @@
Next
</button>
<button
v-show="stepValue == 3"
v-show="stepValue == 4"
class="uk-button uk-button-primary uk-margin-left"
type="button"
@click="hide()"
@ -150,6 +195,7 @@
import cameraCalibrationSettings from "../tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue";
import CSMCalibrationSettings from "../tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue";
import miniStreamDisplay from "../genericComponents/miniStreamDisplay.vue";
import ActionButton from "../labThingsComponents/actionButton.vue";
export default {
name: "CalibrationModal",
@ -157,7 +203,8 @@ export default {
components: {
cameraCalibrationSettings,
CSMCalibrationSettings,
miniStreamDisplay
miniStreamDisplay,
ActionButton
},
data: function() {
@ -223,6 +270,11 @@ export default {
this.onHide();
}
},
async updatePosition() {
this.setPosition = await this.readThingProperty("stage", "position");
},
// Forces modal to show on button press
force_show: function() {
this.ready = true;
@ -260,7 +312,7 @@ export default {
increment: function() {
// Upper bound on section number
if (this.stepValue < 3) {
if (this.stepValue < 4) {
this.stepValue = this.stepValue + 1;
return true;
}
@ -275,4 +327,18 @@ export default {
margin-left: auto;
margin-right: auto;
}
.action-button-container {
display: flex;
flex-direction: row; /* Stack vertically */
justify-content: center; /* Left align */
gap: 8px; /* Small space between buttons */
margin-top: 4px; /* Gap from image */
}
.action-button {
padding: 6px 12px; /* Smaller button */
font-size: 22px !important;
margin: 0; /* Remove default margin */
width: 120px;
min-width: 80px;
}
</style>