Use new click-to-move API route

This modifies the client to use the new move_in_image_coordinates API route
provided by the camera_stage_mapping plugin.

NB I've not yet deleted vestigial code relating to the "FoV" property.

src/components/controlComponents/paneNavigate.vue

@@ -185,7 +185,8 @@ export default {
       isAutofocusing: 0,
       moveLock: false,
       fastAutofocusUri: null,
-      normalAutofocusUri: null
+      normalAutofocusUri: null,
+      moveInImageCoordinatesUri: null
     };
   },
 
@@ -215,10 +216,15 @@ export default {
     this.$root.$on("globalMoveEvent", (x, y, z, absolute) => {
       this.moveRequest(x, y, z, absolute);
     });
+    // A global signal listener to perform a move action
+    this.$root.$on("globalMoveInImageCoordinatesEvent", (x, y, absolute) => {
+      this.moveInImageCoordinatesRequest(x, y, absolute);
+    });
     // Update the current position in text boxes
     this.updatePosition();
     // Look for autofocus plugin
     this.updateAutofocusUri();
+    this.updateMoveInImageCoordinatesUri();
   },
 
   beforeDestroy() {
@@ -328,6 +334,35 @@ export default {
       }
     },
 
+    moveInImageCoordinatesRequest: function(x, y) {
+      console.log(`Sending move request in image coordinates: ${x}, ${y}`);
+      // If not movement-locked
+      if (!this.moveLock) {
+        // Lock move requests
+        this.moveLock = true;
+
+        if (!this.moveInImageCoordinatesUri){
+          this.modalError("Moving in image coordinates is not supported - you will need to upgrade your microscope's software.");
+        }
+
+        // Send move request
+        axios
+          .post(this.moveInImageCoordinatesUri, {
+            x: y, // NB the coordinates are numpy/PIL style, meaning X and Y are swapped.
+            y: x,
+          })
+          .then(() => {
+            this.updatePosition(); // Update the position in text boxes
+          })
+          .catch(error => {
+            this.modalError(error); // Let mixin handle error
+          })
+          .then(() => {
+            this.moveLock = false; // Release the move lock
+          });
+      }
+    },
+
     zeroRequest: function() {
       // Send move request
       axios
@@ -369,6 +404,24 @@ export default {
         .catch(error => {
           this.modalError(error); // Let mixin handle error
         });
+    },
+
+    updateMoveInImageCoordinatesUri: function() {
+      axios
+        .get(this.pluginsUri) // Get a list of plugins
+        .then(response => {
+          var plugins = response.data;
+          var foundExtension = plugins.find(
+            e => e.title === "org.openflexure.camera_stage_mapping"
+          );
+          if (foundExtension) {
+            // Get plugin action link
+            this.moveInImageCoordinatesUri = foundExtension.links.move_in_image_coordinates.href;
+          }
+        })
+        .catch(error => {
+          this.modalError(error); // Let mixin handle error
+        });
     }
   }
 };

src/components/viewComponents/streamDisplay.vue

@@ -115,16 +115,13 @@ export default {
 
       let xRelative =
         (0.5 * event.target.offsetWidth - xCoordinate) /
-        event.target.offsetWidth;
+        event.target.offsetWidth * event.target.naturalWidth;
       let yRelative =
         (0.5 * event.target.offsetHeight - yCoordinate) /
-        event.target.offsetHeight;
+        event.target.offsetHeight * event.target.naturalHeight;
-
-      let xSteps = xRelative * this.fov[0];
-      let ySteps = yRelative * this.fov[1];
 
       // Emit a signal to move, acted on by panelNavigate.vue
-      this.$root.$emit("globalMoveEvent", xSteps, ySteps, 0, false);
+      this.$root.$emit("globalMoveInImageCoordinatesEvent", -xRelative, -yRelative);
     },
 
     flashStream: function() {