From ef9b3375876a5a1c0780aeb9f3425da691865d0c Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Fri, 7 Nov 2025 18:12:31 +0000
Subject: [PATCH] Add d-pad style buttons

---
 .../controlComponents/positionControl.vue     | 92 ++++++++++---------
 .../controlComponents/stageControlButtons.vue | 85 +++++++++++++++++
 2 files changed, 135 insertions(+), 42 deletions(-)
 create mode 100644 webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue

diff --git a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
index 91efa9ce..11ad1d1b 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
@@ -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 () {
diff --git a/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue b/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
new file mode 100644
index 00000000..64364b11
--- /dev/null
+++ b/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
@@ -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>