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

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

@ -1,4 +1,5 @@
<template>
<div>
<ul uk-accordion="multiple: true">
<li class="uk-closed">
<a class="uk-accordion-title" href="#">Position</a>
@ -38,21 +39,28 @@
@finished="updatePosition"
@error="modalError"
/>
<div class="uk-flex uk-flex-center uk-margin">
<hr class="uk-divider-small" />
</div>
</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>