From 9ed850cc68a6d916bbabb5db16501e5ceee4154e Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Wed, 11 Feb 2026 00:24:40 +0000
Subject: [PATCH] Switch move buttons to use jog

This implements a nicer version of jogging, with a defined interval of 1/3 second. This can be tuned depending on what we think makes sense.

It might be good to re-use this for handling keypresses.
---
 .../things/stage/sangaboard.py                |  4 +-
 .../controlComponents/positionControl.vue     |  1 -
 .../controlComponents/stageControlButtons.vue | 67 ++++++++++++++++---
 3 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/src/openflexure_microscope_server/things/stage/sangaboard.py b/src/openflexure_microscope_server/things/stage/sangaboard.py
index 0b5d42bc..138c17fa 100644
--- a/src/openflexure_microscope_server/things/stage/sangaboard.py
+++ b/src/openflexure_microscope_server/things/stage/sangaboard.py
@@ -366,7 +366,9 @@ class SangaboardThing(BaseStage):
         will terminate, and `self._jog_received` will be set again. This means that
         it should be safe to
         """
-        duration = 1  # How long to wait initially. This shouldn't ever need to be long.
+        duration = (
+            1.0  # How long to wait initially. This shouldn't ever need to be long.
+        )
         # On subsequent loop iterations, we'll wait long enough that we expect the last
         # move to have finished.
         previous_command: Optional[JogCommand] = None
diff --git a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
index dc56e226..4ad060ae 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
@@ -118,7 +118,6 @@ export default {
     },
 
     onMoveStep(payload) {
-      const { x: x_steps, y: y_steps, z: z_steps } = payload;
       const navigationStepSize = this.$store.state.navigationStepSize;
       const navigationInvert = this.$store.state.navigationInvert;
       const x = x_steps * navigationStepSize.x * (navigationInvert.x ? -1 : 1);
diff --git a/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue b/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
index 775ce234..f88b9524 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
@@ -1,26 +1,52 @@
 <template>
   <div class="uk-flex uk-flex-center uk-flex-middle uk-margin">
     <div class="dpad-grid">
-      <button id="up-button" class="uk-button uk-button-primary dpad-btn" @click="move(0, 1, 0)">
+      <button
+        id="up-button"
+        class="uk-button uk-button-primary dpad-btn"
+        @mousedown="jog(0, 1, 0)"
+        @mouseup="jogStop()"
+        @mouseOut="jogStop()"
+      >
         <span class="material-symbols-outlined sync-icon"> arrow_upward </span>
       </button>
 
-      <button id="left-button" class="uk-button uk-button-primary dpad-btn" @click="move(-1, 0, 0)">
+      <button
+        id="left-button"
+        class="uk-button uk-button-primary dpad-btn"
+        @mousedown="jog(-1, 0, 0)"
+        @mouseup="jogStop()"
+        @mouseOut="jogStop()"
+      >
         <span class="material-symbols-outlined sync-icon"> arrow_back </span>
       </button>
 
-      <button id="right-button" class="uk-button uk-button-primary dpad-btn" @click="move(1, 0, 0)">
+      <button
+        id="right-button"
+        class="uk-button uk-button-primary dpad-btn"
+        @mousedown="jog(1, 0, 0)"
+        @mouseup="jogStop()"
+        @mouseOut="jogStop()"
+      >
         <span class="material-symbols-outlined sync-icon"> arrow_forward </span>
       </button>
 
-      <button id="down-button" class="uk-button uk-button-primary dpad-btn" @click="move(0, -1, 0)">
+      <button
+        id="down-button"
+        class="uk-button uk-button-primary dpad-btn"
+        @mousedown="jog(0, -1, 0)"
+        @mouseup="jogStop()"
+        @mouseOut="jogStop()"
+      >
         <span class="material-symbols-outlined sync-icon"> arrow_downward </span>
       </button>
 
       <button
         id="focus-out-button"
         class="uk-button uk-button-primary dpad-btn"
-        @click="move(0, 0, -1)"
+        @mousedown="jog(0, 0, -1)"
+        @mouseup="jogStop()"
+        @mouseOut="jogStop()"
       >
         <span class="material-symbols-outlined sync-icon"> remove </span>
       </button>
@@ -28,7 +54,9 @@
       <button
         id="focus-in-button"
         class="uk-button uk-button-primary dpad-btn"
-        @click="move(0, 0, 1)"
+        @mousedown="jog(0, 0, 1)"
+        @mouseup="jogStop()"
+        @mouseOut="jogStop()"
       >
         <span class="material-symbols-outlined sync-icon"> add </span>
       </button>
@@ -37,13 +65,32 @@
 </template>
 
 <script>
-import { eventBus } from "../../../eventBus.js";
-
 export default {
   name: "StageControlButtons",
+  data: () => ({
+    jogIntervalId: null,
+    jogDistance: 600,
+    jogTime: 300,
+  }),
   methods: {
-    move(x, y, z) {
-      eventBus.emit("globalMoveStepEvent", { x, y, z, absolute: false });
+    jog(x, y, z) {
+      if (this.jogIntervalId) {
+        clearInterval(this.jogIntervalId);
+      }
+      let invokeJog = () =>
+        this.invokeAction("stage", "jog", {
+          x: x * this.jogDistance,
+          y: y * this.jogDistance,
+          z: z * this.jogDistance,
+        });
+      invokeJog();
+      this.jogIntervalId = setInterval(invokeJog, this.jogTime);
+    },
+    jogStop() {
+      if (this.jogIntervalId) {
+        clearInterval(this.jogIntervalId);
+      }
+      this.invokeAction("stage", "jog", { stop: true });
     },
   },
 };