From 616e93ef976cac68164df919ec05c15091e6c267 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Tue, 11 Nov 2025 10:24:19 +0000
Subject: [PATCH] Dpad button ids, add warning in positionControl.vue about
 gloabl listeners, deduplicate listener for capture.

---
 .../controlComponents/paneControl.vue         |  1 -
 .../controlComponents/positionControl.vue     |  7 ++++
 .../controlComponents/stageControlButtons.vue | 32 ++++++++++++-------
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
index aa0cd426..c3252679 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
@@ -10,7 +10,6 @@
         action="capture_jpeg"
         :submit-data="{ stream_name: 'main' }"
         :submit-label="'Low Resolution'"
-        :submit-on-event="'globalCaptureEvent'"
         @response="handleCaptureResponse"
         @error="modalError"
       />
diff --git a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
index 11ad1d1b..705cf920 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
@@ -1,3 +1,10 @@
+<!-- This is the main position component for the control tab.
+
+Do not reuse this component until we remove global listeners for move.
+
+This component shows themotor positions in a closed accordion along with the move
+and zero position buttons. It also includes the d-pad.
+-->
 <template>
   <div>
     <ul uk-accordion="multiple: true">
diff --git a/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue b/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
index 64364b11..76b2f983 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
@@ -1,27 +1,35 @@
 <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)">
+      <button id="up-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)">
+      <button id="left-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)">
+      <button id="right-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)">
+      <button id="down-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)">
+      <button
+        id="focus-out-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)">
+      <button
+        id="focus-in-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>
@@ -50,27 +58,27 @@ export default {
 }
 
 /* Place buttons within grid */
-.dpad-grid button:nth-child(1) {
+.dpad-grid #up-button {
   grid-column: 2;
   grid-row: 1;
 }
-.dpad-grid button:nth-child(2) {
+.dpad-grid #left-button {
   grid-column: 1;
   grid-row: 2;
 }
-.dpad-grid button:nth-child(3) {
+.dpad-grid #right-button {
   grid-column: 3;
   grid-row: 2;
 }
-.dpad-grid button:nth-child(4) {
+.dpad-grid #down-button {
   grid-column: 2;
   grid-row: 3;
 }
-.dpad-grid button:nth-child(5) {
+.dpad-grid #focus-out-button {
   grid-column: 1;
   grid-row: 5;
 }
-.dpad-grid button:nth-child(6) {
+.dpad-grid #focus-in-button {
   grid-column: 3;
   grid-row: 5;
 }