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

Add d-pad style buttons

Browse source
This commit is contained in:
Julian Stirling 2025-11-07 18:12:31 +00:00
parent d899e1ba75
commit ef9b337587
2 changed files with 135 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

92
webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
View file

@ -1,58 +1,66 @@
<template>
<ul uk-accordion="multiple: true">
<li class="uk-closed">
<a class="uk-accordion-title" href="#">Position</a>
<div class="uk-accordion-content">
<form>
<!-- Text boxes to set and view position -->
<div class="input-and-buttons-container">
<input
v-for="(_v, key) in setPosition"
:key="`setPosition_${key}`"
v-model="setPosition[key]"
class="uk-form-small numeric-setting-line-input"
type="number"
@keyup.enter="startMoveTask"
/>
<sync-property-button @click="updatePosition" />
<div>
<ul uk-accordion="multiple: true">
<li class="uk-closed">
<a class="uk-accordion-title" href="#">Position</a>
<div class="uk-accordion-content">
<form>
<!-- Text boxes to set and view position -->
<div class="input-and-buttons-container">
<input
v-for="(_v, key) in setPosition"
:key="`setPosition_${key}`"
v-model="setPosition[key]"
class="uk-form-small numeric-setting-line-input"
type="number"
@keyup.enter="startMoveTask"
/>
<sync-property-button @click="updatePosition" />
</div>
<p>
<action-button
ref="moveButton"
thing="stage"
action="move_absolute"
:submit-data="setPosition"
:submit-label="'Move'"
:can-terminate="true"
:poll-interval="0.05"
@finished="moveComplete"
@error="modalError"
/>
</p>
</form>
<action-button
thing="stage"
action="set_zero_position"
submit-label="Zero Coordinates"
:can-terminate="false"
@finished="updatePosition"
@error="modalError"
/>
<div class="uk-flex uk-flex-center uk-margin">
<hr class="uk-divider-small" />
</div>
<p>
<action-button
ref="moveButton"
thing="stage"
action="move_absolute"
:submit-data="setPosition"
:submit-label="'Move'"
:can-terminate="true"
:poll-interval="0.05"
@finished="moveComplete"
@error="modalError"
/>
</p>
</form>
<action-button
thing="stage"
action="set_zero_position"
submit-label="Zero Coordinates"
:can-terminate="false"
@finished="updatePosition"
@error="modalError"
/>
</div>
</li>
</ul>
</div>
</li>
</ul>
<stageControlButtons />
</div>
</template>
<script>
import ActionButton from "../../labThingsComponents/actionButton.vue";
import syncPropertyButton from "../../labThingsComponents/syncPropertyButton.vue";
import stageControlButtons from "./stageControlButtons.vue";
export default {
name: "PaneControl",
components: {
ActionButton,
syncPropertyButton,
stageControlButtons,
},
data: function () {

85
webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue Normal file
View file

@ -0,0 +1,85 @@
<template>
<div class="uk-flex uk-flex-center uk-flex-middle uk-margin">
<div class="dpad-grid">
<button class="uk-button uk-button-primary dpad-btn" @click="move(0, 1, 0)">
<span class="material-symbols-outlined sync-icon"> arrow_upward </span>
</button>
<button class="uk-button uk-button-primary dpad-btn" @click="move(-1, 0, 0)">
<span class="material-symbols-outlined sync-icon"> arrow_back </span>
</button>
<button class="uk-button uk-button-primary dpad-btn" @click="move(1, 0, 0)">
<span class="material-symbols-outlined sync-icon"> arrow_forward </span>
</button>
<button class="uk-button uk-button-primary dpad-btn" @click="move(0, -1, 0)">
<span class="material-symbols-outlined sync-icon"> arrow_downward </span>
</button>
<button class="uk-button uk-button-primary dpad-btn" @click="move(0, 0, -1)">
<span class="material-symbols-outlined sync-icon"> remove </span>
</button>
<button class="uk-button uk-button-primary dpad-btn" @click="move(0, 0, 1)">
<span class="material-symbols-outlined sync-icon"> add </span>
</button>
</div>
</div>
</template>
<script>
export default {
name: "StageControlButtons",
methods: {
move(x, y, z) {
this.$root.$emit("globalMoveStepEvent", x, y, z);
},
},
};
</script>
<style scoped>
.dpad-grid {
display: grid;
grid-template-columns: repeat(3, 40px);
grid-template-rows: 40px 40px 40px 20px 40px;
gap: 1px;
justify-content: center;
align-items: center;
}
/* Place buttons within grid */
.dpad-grid button:nth-child(1) {
grid-column: 2;
grid-row: 1;
}
.dpad-grid button:nth-child(2) {
grid-column: 1;
grid-row: 2;
}
.dpad-grid button:nth-child(3) {
grid-column: 3;
grid-row: 2;
}
.dpad-grid button:nth-child(4) {
grid-column: 2;
grid-row: 3;
}
.dpad-grid button:nth-child(5) {
grid-column: 1;
grid-row: 5;
}
.dpad-grid button:nth-child(6) {
grid-column: 3;
grid-row: 5;
}
.dpad-btn {
width: 40px;
height: 40px;
justify-content: center;
align-items: center;
display: flex;
}
</style>