From e2c2db3d1790fbaae546e75eefb67b5bfae19547 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Fri, 7 Nov 2025 15:39:32 +0000
Subject: [PATCH] Move stage control preferences to settings

---
 .../controlComponents/paneControl.vue         | 90 +++----------------
 .../settingsComponents/displaySettings.vue    |  2 +-
 .../stageControlSettings.vue                  | 69 ++++++++++++++
 .../tabContentComponents/settingsContent.vue  | 13 +--
 4 files changed, 92 insertions(+), 82 deletions(-)
 create mode 100644 webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue

diff --git a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
index 34c4776a..7080daac 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
@@ -2,50 +2,6 @@
   <div id="paneControl" class="uk-padding-small">
     <div v-if="stageAvailable">
       <ul uk-accordion="multiple: true">
-        <li>
-          <a class="uk-accordion-title" href="#">Configure</a>
-          <div class="uk-accordion-content">
-            <b>Keyboard Step Size</b>
-            <div class="uk-grid-small uk-child-width-1-3" uk-grid>
-              <div>
-                <label class="uk-form-label" for="form-stacked-text">x</label>
-                <div class="uk-form-controls">
-                  <input v-model="stepSize.x" class="uk-input uk-form-small" type="number" />
-                </div>
-                <label class="uk-margin-small-right"
-                  ><input v-model="invert.x" class="uk-checkbox" type="checkbox" /> Invert x</label
-                >
-              </div>
-
-              <div>
-                <label class="uk-form-label" for="form-stacked-text">y</label>
-                <div class="uk-form-controls">
-                  <input v-model="stepSize.y" class="uk-input uk-form-small" type="number" />
-                </div>
-                <label class="uk-margin-small-right"
-                  ><input v-model="invert.y" class="uk-checkbox" type="checkbox" /> Invert y</label
-                >
-              </div>
-
-              <div>
-                <label class="uk-form-label" for="form-stacked-text">z</label>
-                <div class="uk-form-controls">
-                  <input v-model="stepSize.z" class="uk-input uk-form-small" type="number" />
-                </div>
-              </div>
-            </div>
-            <br />
-            <action-button
-              thing="stage"
-              action="set_zero_position"
-              submit-label="Zero Coordinates"
-              :can-terminate="false"
-              @finished="updatePosition"
-              @error="modalError"
-            />
-          </div>
-        </li>
-
         <li class="uk-open">
           <a class="uk-accordion-title" href="#">Position</a>
           <div class="uk-accordion-content">
@@ -80,9 +36,16 @@
                 />
               </p>
             </form>
+            <action-button
+              thing="stage"
+              action="set_zero_position"
+              submit-label="Zero Coordinates"
+              :can-terminate="false"
+              @finished="updatePosition"
+              @error="modalError"
+            />
           </div>
         </li>
-
         <!--Show autofocus if default plugin is enabled-->
         <li class="uk-open">
           <a class="uk-accordion-title" href="#">Autofocus</a>
@@ -170,15 +133,6 @@ export default {
     stageAvailable() {
       return this.thingAvailable("stage");
     },
-    // Note that as stepSize and invert are set based on internals we can use
-    // get() and set() to interact with the store. Instead use a deep watcher to
-    // update the store (see ``watch:`` below)
-    stepSize() {
-      return this.$store.state.navigationStepSize;
-    },
-    invert() {
-      return this.$store.state.navigationInvert;
-    },
     baseUri: function () {
       return this.$store.getters.baseUri;
     },
@@ -190,21 +144,6 @@ export default {
     },
   },
 
-  watch: {
-    stepSize: {
-      deep: true,
-      handler(newVal) {
-        this.$store.commit("changeNavigationStepSize", newVal);
-      },
-    },
-    invert: {
-      deep: true,
-      handler(newVal) {
-        this.$store.commit("changeNavigationInvert", newVal);
-      },
-    },
-  },
-
   async mounted() {
     let self = this;
     // A global signal listener to perform a move action
@@ -215,13 +154,12 @@ export default {
     });
     // A global signal listener to perform a move in multiples of a step size
     this.$root.$on("globalMoveStepEvent", (x_steps, y_steps, z_steps) => {
-      this.$root.$emit(
-        "globalMoveEvent",
-        x_steps * this.stepSize.x * (this.invert.x ? -1 : 1),
-        y_steps * this.stepSize.y * (this.invert.y ? -1 : 1),
-        z_steps * this.stepSize.z * (this.invert.z ? -1 : 1),
-        false,
-      );
+      const navigationStepSize = this.$store.state.navigationStepSize;
+      const navigationInvert = this.$store.state.navigationInvert;
+      const x = x_steps * navigationStepSize.x * (navigationInvert.x ? -1 : 1);
+      const y = y_steps * navigationStepSize.y * (navigationInvert.y ? -1 : 1);
+      const z = z_steps * navigationStepSize.z * (navigationInvert.z ? -1 : 1);
+      this.$root.$emit("globalMoveEvent", x, y, z, false);
     });
     // Update the current position in text boxes
     await this.updatePosition();
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue
index 450c803c..4a5476ba 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue
@@ -11,7 +11,7 @@ import streamSettings from "./displaySetttingsComponents/streamSettings.vue";
 
 // Export main app
 export default {
-  name: "SettingsContent",
+  name: "DisplaySettings",
 
   components: {
     streamSettings,
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
new file mode 100644
index 00000000..d8118876
--- /dev/null
+++ b/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <a class="uk-accordion-title" href="#">Configure</a>
+    <div class="uk-accordion-content">
+      <b>Keyboard Step Size</b>
+      <div class="uk-grid-small uk-child-width-1-3" uk-grid>
+        <div>
+          <label class="uk-form-label" for="form-stacked-text">x</label>
+          <div class="uk-form-controls">
+            <input v-model="stepSize.x" class="uk-input uk-form-small" type="number" />
+          </div>
+          <label class="uk-margin-small-right"
+            ><input v-model="invert.x" class="uk-checkbox" type="checkbox" /> Invert x</label
+          >
+        </div>
+
+        <div>
+          <label class="uk-form-label" for="form-stacked-text">y</label>
+          <div class="uk-form-controls">
+            <input v-model="stepSize.y" class="uk-input uk-form-small" type="number" />
+          </div>
+          <label class="uk-margin-small-right"
+            ><input v-model="invert.y" class="uk-checkbox" type="checkbox" /> Invert y</label
+          >
+        </div>
+
+        <div>
+          <label class="uk-form-label" for="form-stacked-text">z</label>
+          <div class="uk-form-controls">
+            <input v-model="stepSize.z" class="uk-input uk-form-small" type="number" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SatgeControlSettings",
+
+  computed: {
+    // Note that as stepSize and invert are set based on internals we can use
+    // get() and set() to interact with the store. Instead use a deep watcher to
+    // update the store (see ``watch:`` below)
+    stepSize() {
+      return this.$store.state.navigationStepSize;
+    },
+    invert() {
+      return this.$store.state.navigationInvert;
+    },
+  },
+
+  watch: {
+    stepSize: {
+      deep: true,
+      handler(newVal) {
+        this.$store.commit("changeNavigationStepSize", newVal);
+      },
+    },
+    invert: {
+      deep: true,
+      handler(newVal) {
+        this.$store.commit("changeNavigationInvert", newVal);
+      },
+    },
+  },
+};
+</script>
diff --git a/webapp/src/components/tabContentComponents/settingsContent.vue b/webapp/src/components/tabContentComponents/settingsContent.vue
index 51b2867d..97ca3fbc 100644
--- a/webapp/src/components/tabContentComponents/settingsContent.vue
+++ b/webapp/src/components/tabContentComponents/settingsContent.vue
@@ -59,6 +59,7 @@
 
 <script>
 import displaySettings from "./settingsComponents/displaySettings.vue";
+import stageControlSettings from "./settingsComponents/stageControlSettings.vue";
 import calibrationWizard from "../modalComponents/calibrationWizard.vue";
 import cameraSettings from "./settingsComponents/cameraSettings.vue";
 import CSMSettings from "./settingsComponents/CSMSettings.vue";
@@ -72,10 +73,6 @@ export default {
   name: "SettingsContent",
 
   components: {
-    displaySettings,
-    cameraSettings,
-    stageSettings,
-    CSMSettings,
     tabIcon,
     tabContent,
     calibrationWizard,
@@ -93,6 +90,13 @@ export default {
           component: displaySettings,
           requiredThings: [],
         },
+        {
+          id: "stage-control",
+          title: "Stage Control Preferences",
+          requireConnection: false,
+          component: stageControlSettings,
+          requiredThings: ["stage"],
+        },
       ],
       coreCalibrationTabs: [
         {
@@ -125,7 +129,6 @@ export default {
       return [...this.appTabs, ...this.calibrationTabs];
     },
     appTabs() {
-      console.log(this.coreAppTabs);
       // Filter core top tabs based on available Things.
       return this.coreAppTabs.filter((tab) => {
         if (!tab.requiredThings || tab.requiredThings.length === 0) return true;