Merge branch 'fix-movements' into 'v3'

Fix movements axes

Closes #498

See merge request openflexure/openflexure-microscope-server!338

webapp/src/App.vue

@@ -272,15 +272,19 @@ export default {
       var x_rel = 0;
       var y_rel = 0;
       var z_rel = 0;
+      // 37 corresponds to the left key
       if (37 in this.arrowKeysDown) {
-        x_rel = x_rel + 1;
-      }
-      if (39 in this.arrowKeysDown) {
         x_rel = x_rel - 1;
       }
+      // 39 corresponds to the right key
+      if (39 in this.arrowKeysDown) {
+        x_rel = x_rel + 1;
+      }
+      // 38 corresponds to the up key
       if (38 in this.arrowKeysDown) {
         y_rel = y_rel + 1;
       }
+      // 40 corresponds to the down key
       if (40 in this.arrowKeysDown) {
         y_rel = y_rel - 1;
       }

webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue

@@ -5,7 +5,7 @@
         <li>
           <a class="uk-accordion-title" href="#">Configure</a>
           <div class="uk-accordion-content">
-            <b>Step Size</b>
+            <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>
@@ -57,17 +57,9 @@
                     name="inputStepZz"
                   />
                 </div>
-                <label
-                  ><input
-                    v-model="invert.z"
-                    class="uk-checkbox"
-                    type="checkbox"
-                  />
-                  Invert z</label
-                >
               </div>
             </div>
-
+            <br>
             <action-button
               thing="stage"
               action="set_zero_position"

webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue

@@ -1,20 +1,66 @@
 <template>
-  <div id="stageSettings" class="uk-width-large">
-    The microscope stage is a <b>{{ stageType }}</b
-    >. There are no settings to adjust here: to set the geometry of your stage
-    (i.e. switch between delta and cartesian), you will need to adjust the
-    configuration of your microscope, which cannot be done while it is running.
+  <div id="stageSettings" class="uk-width-large" v-observe-visibility="visibilityChanged">
+    The microscope stage is a <b>{{ stageType }}</b>
+    <div>
+      <div class="uk-margin">
+        <p>
+        <br>
+        Your z motor is currently {{ this.z_inverted }} inverted.
+        <br>
+        <br>
+        We expect that moving in +z:
+        <ul>
+        <li> Moves your objective up, towards the sample and illumination</li>
+        <li> Turns the exposed z gear anti-clockwise (when viewed from above)</li>
+        </ul>
+        If this is not the case, click the button below to switch.
+        </p>
+        <div class="uk-margin">
+          <div class="uk-margin">
+          <action-button
+            class="uk-width-1-2"
+            thing="stage"
+            action="invert_axis_direction"
+            :submit-data="{ axis: 'z' }"
+            submit-label="Invert z"
+            @response=readAxis()
+          />
+        </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import ActionButton from "../../labThingsComponents/actionButton.vue";
+
 export default {
   name: "StageSettings",
 
-  components: {},
+  components: {
+    ActionButton,
+  },
 
   data: function() {
-    return {};
+    return {
+      z_inverted: "",
+    };
+  },
+
+  methods:{
+    visibilityChanged(isVisible) {
+      if (isVisible) {
+        this.readAxis();
+      }
+    },
+    async readAxis() {
+      let axes_inverted = await this.readThingProperty(
+        "stage",
+        "axis_inverted"
+      );
+      this.z_inverted = axes_inverted['z'] ? "" : "not ";
+    }
   },
 
   computed: {