From 646645cc1d481fb45fdd984a2d9557b1214c6a8f Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Sun, 5 Jul 2020 16:55:10 +0100
Subject: [PATCH 01/12] Improved tab contrast

---
 .../api/static/src/assets/less/theme.less      | 18 ++++++++++++------
 .../components/genericComponents/tabIcon.vue   |  4 +++-
 .../viewComponents/settingsDisplay.vue         | 10 +++++++++-
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/openflexure_microscope/api/static/src/assets/less/theme.less b/openflexure_microscope/api/static/src/assets/less/theme.less
index 17d014a2..a85a599c 100644
--- a/openflexure_microscope/api/static/src/assets/less/theme.less
+++ b/openflexure_microscope/api/static/src/assets/less/theme.less
@@ -59,6 +59,12 @@
     text-rendering: optimizeLegibility;
 }
 
+//
+// Decorations
+//
+@small-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+@big-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
+
 //
 // Container
 //
@@ -148,6 +154,7 @@
 // Paper
 //
 @paper-border-radius: 4px;
+@button-border-radius: 3px;
 
 
 /* ========================================================================
@@ -187,9 +194,8 @@
 
 .uk-card {
     border-radius: @paper-border-radius;
-    border: 1px solid rgba(180, 180, 180, 0.25);
-    box-shadow: none;
-    -webkit-box-shabox-shadow: none;
+    //border: 1px solid rgba(180, 180, 180, 0.25);
+    box-shadow: @small-shadow;
 }
 
 .uk-card-media-top img {
@@ -228,7 +234,7 @@
  */
 .uk-modal-dialog {
     border-radius: @paper-border-radius;
-    box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
+    box-shadow: @big-shadow;
     transition: 0.3s ease !important;
 }
 
@@ -245,7 +251,7 @@
  */
 .uk-notification-message {
     border-radius: @paper-border-radius;
-    box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
+    box-shadow: @big-shadow;
 }
 
 .uk-notification-message-danger {
@@ -287,7 +293,7 @@ a:hover {
  * Buttons
  */
 .uk-button {
-    border-radius: 2px;
+    border-radius: @button-border-radius;
     padding: 0 8px;
 }
 
diff --git a/openflexure_microscope/api/static/src/components/genericComponents/tabIcon.vue b/openflexure_microscope/api/static/src/components/genericComponents/tabIcon.vue
index 15dfd38f..da770a4d 100644
--- a/openflexure_microscope/api/static/src/components/genericComponents/tabIcon.vue
+++ b/openflexure_microscope/api/static/src/components/genericComponents/tabIcon.vue
@@ -93,7 +93,9 @@ export default {
 @import "../../assets/less/theme.less";
 
 .tabicon-active {
-  color: @global-primary-background !important;
+  color: #fff !important;
+  background-color: @global-primary-background !important;
+  box-shadow: @small-shadow;
 }
 
 .hook-inverse() {
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/settingsDisplay.vue b/openflexure_microscope/api/static/src/components/viewComponents/settingsDisplay.vue
index 303c5cf2..c0242cc5 100644
--- a/openflexure_microscope/api/static/src/components/viewComponents/settingsDisplay.vue
+++ b/openflexure_microscope/api/static/src/components/viewComponents/settingsDisplay.vue
@@ -153,7 +153,10 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
+// Custom UIkit CSS modifications
+@import "../../assets/less/theme.less";
+
 .settings-pane {
   border-width: 0 1px 0 0;
   border-style: solid;
@@ -170,4 +173,9 @@ export default {
   border-style: solid;
   border-color: rgba(180, 180, 180, 0.25);
 }
+
+.settings-nav li > a {
+  padding-left: 6px !important;
+  border-radius: @button-border-radius;
+}
 </style>

From 3814a71a0add4e83ceaafcb272d46be1544fef86 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Sun, 5 Jul 2020 18:19:44 +0100
Subject: [PATCH 02/12] Simplified keyboard shortcuts

---
 .../api/static/package-lock.json              |   5 +
 .../api/static/package.json                   |   3 +-
 openflexure_microscope/api/static/src/App.vue | 185 ++++++++----------
 3 files changed, 94 insertions(+), 99 deletions(-)

diff --git a/openflexure_microscope/api/static/package-lock.json b/openflexure_microscope/api/static/package-lock.json
index 8a0083a6..88511dc4 100644
--- a/openflexure_microscope/api/static/package-lock.json
+++ b/openflexure_microscope/api/static/package-lock.json
@@ -9210,6 +9210,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "mousetrap": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
+      "integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
diff --git a/openflexure_microscope/api/static/package.json b/openflexure_microscope/api/static/package.json
index bcdca6a0..055d4b50 100644
--- a/openflexure_microscope/api/static/package.json
+++ b/openflexure_microscope/api/static/package.json
@@ -13,7 +13,8 @@
     "serve": "vue-cli-service serve  --mode development"
   },
   "dependencies": {
-    "material-design-icons": "^3.0.1"
+    "material-design-icons": "^3.0.1",
+    "mousetrap": "^1.6.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.12.1",
diff --git a/openflexure_microscope/api/static/src/App.vue b/openflexure_microscope/api/static/src/App.vue
index 0fc0f38c..a391b778 100644
--- a/openflexure_microscope/api/static/src/App.vue
+++ b/openflexure_microscope/api/static/src/App.vue
@@ -1,9 +1,5 @@
 <template>
-  <div
-    id="app"
-    class="uk-height-1-1 uk-margin-remove uk-padding-remove"
-    :class="handleTheme"
-  >
+  <div id="app" class="uk-height-1-1 uk-margin-remove uk-padding-remove" :class="handleTheme">
     <loadingContent v-if="!$store.getters.ready" />
     <div v-if="$store.getters.ready" id="tour-header"></div>
     <appContent v-if="$store.getters.ready" />
@@ -23,20 +19,26 @@ import appContent from "./components/appContent.vue";
 import loadingContent from "./components/loadingContent.vue";
 
 import axios from "axios";
+var Mousetrap = require("mousetrap");
 
-// Key Codes
-const keyCodes = {
-  pgup: 33,
-  pgdn: 34,
-  left: 37,
-  up: 38,
-  right: 39,
-  down: 40,
-  enter: 13,
-  esc: 27,
-  shift: 16,
-  alt: 18,
-  t: 84
+Mousetrap.prototype.stopCallback = function(e, element, combo) {
+  // if the element has the class "mousetrap" then no need to stop
+  if ((" " + element.className + " ").indexOf(" mousetrap ") > -1) {
+    return false;
+  }
+
+  // if we're in a lightbox, stop mousetrap
+  if (element.classList.contains("lightbox-link")) {
+    return true;
+  }
+
+  // stop for input, select, and textarea
+  return (
+    element.tagName == "INPUT" ||
+    element.tagName == "SELECT" ||
+    element.tagName == "TEXTAREA" ||
+    (element.contentEditable && element.contentEditable == "true")
+  );
 };
 
 // Export main app
@@ -52,6 +54,7 @@ export default {
     return {
       appAvailable: false,
       keysDown: {},
+      arrowKeysDown: {},
       systemDark: undefined,
       themeObserver: undefined,
       tourCallbacks: {
@@ -166,9 +169,7 @@ export default {
 
   created: function() {
     window.addEventListener("beforeunload", this.handleExit);
-    // Key events
-    window.addEventListener("keydown", this.keyDownMonitor);
-    window.addEventListener("keyup", this.keyUpMonitor);
+    // Scrollwheel listener
     window.addEventListener("wheel", this.wheelMonitor);
     // Watch for origin changes
     this.unwatchOriginFunction = this.$store.watch(
@@ -180,6 +181,48 @@ export default {
         console.log(uriV2);
       }
     );
+
+    // Keyboard shortcuts
+
+    // TODO: Shortcut guide
+    Mousetrap.bind("?", function() {
+      console.log("show shortcuts!");
+    });
+
+    // Arrow keys
+    Mousetrap.bind(
+      ["up", "down", "left", "right"],
+      event => {
+        this.arrowKeysDown[event.keyCode] = true; //Add key to array
+        this.navigateKeyHandler();
+      },
+      "keydown"
+    );
+    Mousetrap.bind(
+      ["up", "down", "left", "right"],
+      event => {
+        delete this.arrowKeysDown[event.keyCode]; //Remove key from array
+      },
+      "keyup"
+    );
+
+    // Focus keys
+    Mousetrap.bind("pageup", () => {
+      this.$root.$emit("globalMoveStepEvent", 0, 0, 1);
+    });
+    Mousetrap.bind("pagedown", () => {
+      this.$root.$emit("globalMoveStepEvent", 0, 0, -1);
+    });
+
+    // Capture
+    Mousetrap.bind("c", () => {
+      this.$root.$emit("globalCaptureEvent");
+    });
+
+    // Re-run tour
+    Mousetrap.bind("alt+t", () => {
+      this.$tours["guidedTour"].start();
+    });
   },
 
   beforeDestroy: function() {
@@ -187,14 +230,17 @@ export default {
     if (this.themeObserver) {
       this.themeObserver.disconnect();
     }
-    // Remove key listeners
-    window.removeEventListener("keydown", this.keyDownMonitor);
-    window.removeEventListener("keyup", this.keyUpMonitor);
+    // Remove scrollwheel listener
     window.removeEventListener("wheel", this.wheelMonitor);
     // Remove origin watcher
     this.unwatchOriginFunction();
   },
 
+  destroyed: function() {
+    // Remove key listeners
+    Mousetrap.reset();
+  },
+
   methods: {
     checkConnection: function() {
       var uriV2 = this.$store.getters.uriV2;
@@ -231,84 +277,27 @@ export default {
       }
     },
 
-    // Handle global key press events to be associated with navigation
-    keyDownMonitor: function(event) {
-      this.keysDown[event.keyCode] = true; //Add key to array
-
-      // Convert keyCode dict into a list of key codes
-      var keyCodeList = Object.keys(keyCodes).map(function(key) {
-        return keyCodes[key];
-      });
-
-      if (
-        // If not inside an element we want to ignore
-        !(event.target instanceof HTMLInputElement) &&
-        !event.target.classList.contains("lightbox-link") &&
-        // If it's a recognised key
-        keyCodeList.includes(event.keyCode)
-      ) {
-        this.navigateKeyHandler(keyCodes);
-        this.captureKeyHandler(keyCodes);
-        this.letterKeyHandler(keyCodes);
+    navigateKeyHandler: function() {
+      // Calculate movement array
+      var x_rel = 0;
+      var y_rel = 0;
+      var z_rel = 0;
+      if (37 in this.arrowKeysDown) {
+        x_rel = x_rel + 1;
       }
-    },
-
-    keyUpMonitor: function(event) {
-      delete this.keysDown[event.keyCode]; //Remove key from array
-    },
-
-    navigateKeyHandler: function(keyCodes) {
-      const moveKeys = [
-        keyCodes.left,
-        keyCodes.right,
-        keyCodes.up,
-        keyCodes.down,
-        keyCodes.pgup,
-        keyCodes.pgdn
-      ];
-
-      if (
-        moveKeys.some(r => Object.keys(this.keysDown).includes(r.toString()))
-      ) {
-        // Calculate movement array
-        var x_rel = 0;
-        var y_rel = 0;
-        var z_rel = 0;
-        if (keyCodes.left in this.keysDown) {
-          x_rel = x_rel + 1;
-        }
-        if (keyCodes.right in this.keysDown) {
-          x_rel = x_rel - 1;
-        }
-        if (keyCodes.up in this.keysDown) {
-          y_rel = y_rel + 1;
-        }
-        if (keyCodes.down in this.keysDown) {
-          y_rel = y_rel - 1;
-        }
-        if (keyCodes.pgup in this.keysDown) {
-          z_rel = z_rel - 1;
-        }
-        if (keyCodes.pgdn in this.keysDown) {
-          z_rel = z_rel + 1;
-        }
-        // Make a position request
-        // Emit a signal to move, acted on by panelNavigate.vue
-        this.$root.$emit("globalMoveStepEvent", x_rel, y_rel, z_rel);
+      if (39 in this.arrowKeysDown) {
+        x_rel = x_rel - 1;
       }
-    },
-
-    captureKeyHandler: function(keyCodes) {
-      if (keyCodes.shift in this.keysDown && keyCodes.enter in this.keysDown) {
-        console.log("Capturing");
-        this.$root.$emit("globalCaptureEvent");
+      if (38 in this.arrowKeysDown) {
+        y_rel = y_rel + 1;
       }
-    },
-
-    letterKeyHandler: function(keyCodes) {
-      if (keyCodes.alt in this.keysDown && keyCodes.t in this.keysDown) {
-        this.$tours["guidedTour"].start();
+      if (40 in this.arrowKeysDown) {
+        y_rel = y_rel - 1;
       }
+      // Make a position request
+      // Emit a signal to move, acted on by panelNavigate.vue
+      this.$root.$emit("globalMoveStepEvent", x_rel, y_rel, z_rel);
+
     }
   }
 };

From 84280fd830a73c2c7fded3a2c06d3ac8f13a234b Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Sun, 5 Jul 2020 18:23:10 +0100
Subject: [PATCH 03/12] Fixed new tab theme dark mode

---
 .../api/static/src/components/genericComponents/tabIcon.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/openflexure_microscope/api/static/src/components/genericComponents/tabIcon.vue b/openflexure_microscope/api/static/src/components/genericComponents/tabIcon.vue
index da770a4d..e352f334 100644
--- a/openflexure_microscope/api/static/src/components/genericComponents/tabIcon.vue
+++ b/openflexure_microscope/api/static/src/components/genericComponents/tabIcon.vue
@@ -98,12 +98,6 @@ export default {
   box-shadow: @small-shadow;
 }
 
-.hook-inverse() {
-  .tabicon-active {
-    color: @inverse-primary-muted-color !important;
-  }
-}
-
 .tabtitle {
   max-width: 60px;
   overflow: hidden;

From c987690fab7dd8f87c0a4a1e7e16ac4f075248c0 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 6 Jul 2020 10:33:33 +0100
Subject: [PATCH 04/12] Updated issue link

---
 .../static/src/components/tabContentComponents/aboutContent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/aboutContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/aboutContent.vue
index 5133f558..3f5ebd6e 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/aboutContent.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/aboutContent.vue
@@ -9,7 +9,7 @@
       <a
         class="uk-link"
         target="_blank"
-        href="https://gitlab.com/openflexure/openflexure-microscope-jsclient/-/issues"
+        href="https://gitlab.com/openflexure/openflexure-microscope-server/-/issues"
         >Report an issue</a
       >
     </div>

From 2b9bec24f16b6efee0431aea3d89a7b1d5b0b278 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 6 Jul 2020 10:33:50 +0100
Subject: [PATCH 05/12] Removed settings pane border

---
 .../static/src/components/viewComponents/settingsDisplay.vue   | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/openflexure_microscope/api/static/src/components/viewComponents/settingsDisplay.vue b/openflexure_microscope/api/static/src/components/viewComponents/settingsDisplay.vue
index c0242cc5..9d3266dd 100644
--- a/openflexure_microscope/api/static/src/components/viewComponents/settingsDisplay.vue
+++ b/openflexure_microscope/api/static/src/components/viewComponents/settingsDisplay.vue
@@ -158,9 +158,6 @@ export default {
 @import "../../assets/less/theme.less";
 
 .settings-pane {
-  border-width: 0 1px 0 0;
-  border-style: solid;
-  border-color: rgba(180, 180, 180, 0.25);
 }
 
 .settings-nav {

From 9cf491aeb0e6e5babd2ffca0e911e04b51845c58 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 6 Jul 2020 10:34:00 +0100
Subject: [PATCH 06/12] Added global event listeners to task submitters

---
 .../controlComponents/paneNavigate.vue        |  7 ++++++
 .../genericComponents/taskSubmitter.vue       | 22 +++++++++++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/openflexure_microscope/api/static/src/components/controlComponents/paneNavigate.vue b/openflexure_microscope/api/static/src/components/controlComponents/paneNavigate.vue
index f5040ff5..fbaa567c 100644
--- a/openflexure_microscope/api/static/src/components/controlComponents/paneNavigate.vue
+++ b/openflexure_microscope/api/static/src/components/controlComponents/paneNavigate.vue
@@ -111,6 +111,8 @@
                   :submit-url="fastAutofocusUri"
                   :submit-data="{ dz: 2000 }"
                   :submit-label="'Fast'"
+                  :button-primary="false"
+                  :submit-on-event="'globalFastAutofocusEvent'"
                   @taskStarted="isAutofocusing = 1"
                   @finished="isAutofocusing = 0"
                 ></taskSubmitter>
@@ -122,6 +124,7 @@
                   :submit-url="normalAutofocusUri"
                   :submit-data="{ dz: [-60, -30, 0, 30, 60] }"
                   :submit-label="'Medium'"
+                  :button-primary="false"
                   @taskStarted="isAutofocusing = 2"
                   @finished="isAutofocusing = 0"
                 ></taskSubmitter>
@@ -133,6 +136,7 @@
                   :submit-url="normalAutofocusUri"
                   :submit-data="{ dz: [-20, -10, 0, 10, 20] }"
                   :submit-label="'Fine'"
+                  :button-primary="false"
                   @taskStarted="isAutofocusing = 3"
                   @finished="isAutofocusing = 0"
                 ></taskSubmitter>
@@ -201,6 +205,7 @@ export default {
     this.$root.$on("globalMoveInImageCoordinatesEvent", (x, y, absolute) => {
       this.moveInImageCoordinatesRequest(x, y, absolute);
     });
+    // 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.moveRequest(
         x_steps * this.stepXy,
@@ -219,6 +224,8 @@ export default {
   beforeDestroy() {
     // Remove global signal listener to perform a move action
     this.$root.$off("globalMoveEvent");
+    this.$root.$off("globalMoveInImageCoordinatesEvent");
+    this.$root.$off("globalMoveStepEvent");
   },
 
   methods: {
diff --git a/openflexure_microscope/api/static/src/components/genericComponents/taskSubmitter.vue b/openflexure_microscope/api/static/src/components/genericComponents/taskSubmitter.vue
index 845bad9e..da5e695d 100644
--- a/openflexure_microscope/api/static/src/components/genericComponents/taskSubmitter.vue
+++ b/openflexure_microscope/api/static/src/components/genericComponents/taskSubmitter.vue
@@ -78,7 +78,12 @@ export default {
     buttonPrimary: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
+    },
+    submitOnEvent: {
+      type: String,
+      required: false,
+      default: null
     }
   },
 
@@ -101,7 +106,20 @@ export default {
 
   created() {},
 
-  beforeDestroy() {},
+  mounted() {
+    // A global signal listener to perform a move action
+    if (this.submitOnEvent) {
+      this.$root.$on(this.submitOnEvent, () => {
+        this.bootstrapTask();
+      });
+    }
+  },
+
+  beforeDestroy() {
+    if (this.submitOnEvent) {
+      this.$root.$off(this.submitOnEvent);
+    }
+  },
 
   methods: {
     bootstrapTask: function() {

From 66eed672a536b8a59f2686159891956c25efcb2d Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 6 Jul 2020 10:34:11 +0100
Subject: [PATCH 07/12] Updated VS Code settings

---
 openflexure_microscope/api/static/README.md | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/openflexure_microscope/api/static/README.md b/openflexure_microscope/api/static/README.md
index 1e8fbe26..4e5d9005 100644
--- a/openflexure_microscope/api/static/README.md
+++ b/openflexure_microscope/api/static/README.md
@@ -10,21 +10,11 @@ To prevent the editor from interfering with ESLint, add to your project `setting
 {
     "editor.tabSize": 2,
     "cSpell.enabled": false,
-    "eslint.validate": [{
-            "language": "vue",
-            "autoFix": true
-        },
-        {
-            "language": "javascript",
-            "autoFix": true
-        },
-        {
-            "language": "javascriptreact",
-            "autoFix": true
-        }
-    ],
-    "eslint.autoFixOnSave": true,
+    "eslint.validate": ["vue","javascript", "javascriptreact"],
     "editor.formatOnSave": false,
-    "vetur.validation.template": false
+    "vetur.validation.template": false,
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true
+    }
 }
 ```
\ No newline at end of file

From 6c2bded43e0a3c4a5b95d0822b7bd293f1486b90 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 6 Jul 2020 10:34:17 +0100
Subject: [PATCH 08/12] Updated button theme

---
 .../api/static/src/assets/less/theme.less                   | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/openflexure_microscope/api/static/src/assets/less/theme.less b/openflexure_microscope/api/static/src/assets/less/theme.less
index a85a599c..7ab97249 100644
--- a/openflexure_microscope/api/static/src/assets/less/theme.less
+++ b/openflexure_microscope/api/static/src/assets/less/theme.less
@@ -302,6 +302,12 @@ a:hover {
     border-color: @global-border;
 }
 
+.uk-button-primary {
+    background-color: rgba(180, 180, 180, 0.10);
+    border-color: @global-primary-background;
+    color: @button-text-color;
+}
+
 .uk-button-danger {
     background-color: transparent;
     color: #f0506e;

From 37a40024d821d093e61a0aaf1469c08b7267c831 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 6 Jul 2020 10:34:27 +0100
Subject: [PATCH 09/12] Added autofocus keyboard shortcut

---
 openflexure_microscope/api/static/src/App.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/openflexure_microscope/api/static/src/App.vue b/openflexure_microscope/api/static/src/App.vue
index a391b778..ff6ab0e2 100644
--- a/openflexure_microscope/api/static/src/App.vue
+++ b/openflexure_microscope/api/static/src/App.vue
@@ -1,5 +1,9 @@
 <template>
-  <div id="app" class="uk-height-1-1 uk-margin-remove uk-padding-remove" :class="handleTheme">
+  <div
+    id="app"
+    class="uk-height-1-1 uk-margin-remove uk-padding-remove"
+    :class="handleTheme"
+  >
     <loadingContent v-if="!$store.getters.ready" />
     <div v-if="$store.getters.ready" id="tour-header"></div>
     <appContent v-if="$store.getters.ready" />
@@ -219,6 +223,11 @@ export default {
       this.$root.$emit("globalCaptureEvent");
     });
 
+    // Autofocus
+    Mousetrap.bind("a", () => {
+      this.$root.$emit("globalFastAutofocusEvent");
+    });
+
     // Re-run tour
     Mousetrap.bind("alt+t", () => {
       this.$tours["guidedTour"].start();
@@ -234,10 +243,8 @@ export default {
     window.removeEventListener("wheel", this.wheelMonitor);
     // Remove origin watcher
     this.unwatchOriginFunction();
-  },
-
-  destroyed: function() {
     // Remove key listeners
+    console.log("Resetting Mousetrap");
     Mousetrap.reset();
   },
 
@@ -297,7 +304,6 @@ export default {
       // Make a position request
       // Emit a signal to move, acted on by panelNavigate.vue
       this.$root.$emit("globalMoveStepEvent", x_rel, y_rel, z_rel);
-
     }
   }
 };

From ba091ed11ac7871e9f98e1756bb13518774abf6d Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 6 Jul 2020 11:29:09 +0100
Subject: [PATCH 10/12] Added modal toggle mixin

---
 openflexure_microscope/api/static/src/main.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/openflexure_microscope/api/static/src/main.js b/openflexure_microscope/api/static/src/main.js
index 567298e6..b53b43a4 100644
--- a/openflexure_microscope/api/static/src/main.js
+++ b/openflexure_microscope/api/static/src/main.js
@@ -129,6 +129,10 @@ Vue.mixin({
       UIkit.modal(element).hide();
     },
 
+    toggleModalElement: function(element) {
+      UIkit.modal(element).toggle();
+    },
+
     getLocalStorageObj: function(keyName) {
       if (localStorage.getItem(keyName)) {
         try {

From 3aa5be814dcf31e02c3942700042194cfc3bf5d8 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 6 Jul 2020 11:29:23 +0100
Subject: [PATCH 11/12] Added tab increment/descrement methods

---
 .../api/static/src/components/appContent.vue  | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/openflexure_microscope/api/static/src/components/appContent.vue b/openflexure_microscope/api/static/src/components/appContent.vue
index 319ddc35..24439529 100644
--- a/openflexure_microscope/api/static/src/components/appContent.vue
+++ b/openflexure_microscope/api/static/src/components/appContent.vue
@@ -218,6 +218,18 @@ export default {
         }
       }
       return pluginGuis;
+    },
+    tabOrder: function() {
+      // TODO: There must be a better way to do this, somehow reading the order of the HTML elements?
+      var ind = ["view", "gallery", "navigate", "capture", "settings"];
+      for (const plugin of this.pluginsGuiList) {
+        ind.push(plugin.id);
+      }
+      ind.push("about");
+      return ind;
+    },
+    currentTabIndex: function() {
+      return this.tabOrder.indexOf(this.currentTab);
     }
   },
 
@@ -246,6 +258,14 @@ export default {
     this.$root.$on("globalSwitchTab", tabID => {
       this.currentTab = tabID;
     });
+    // A global signal listener to increment tab
+    this.$root.$on("globalIncrementTab", () => {
+      this.incrementTabBy(1);
+    });
+    // A global signal listener to decrement tab
+    this.$root.$on("globalDecrementTab", () => {
+      this.incrementTabBy(-1);
+    });
   },
 
   beforeDestroy() {
@@ -274,6 +294,14 @@ export default {
         this.currentTab = tab;
       }
     },
+    incrementTabBy: function(n) {
+      const newIndex =
+        (((this.currentTabIndex + n) % this.tabOrder.length) +
+          this.tabOrder.length) %
+        this.tabOrder.length;
+      const newId = this.tabOrder[newIndex];
+      this.currentTab = newId;
+    },
     startModals: function() {
       this.$refs["calibrationModal"].show();
     },

From 4dfb56c10935c1a3c8bdf2cb0ca88d140294d8b7 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 6 Jul 2020 11:29:31 +0100
Subject: [PATCH 12/12] Added basic keyboard shortcut manual

---
 openflexure_microscope/api/static/src/App.vue | 55 ++++++++++++++++++-
 1 file changed, 52 insertions(+), 3 deletions(-)

diff --git a/openflexure_microscope/api/static/src/App.vue b/openflexure_microscope/api/static/src/App.vue
index ff6ab0e2..9e1a31c1 100644
--- a/openflexure_microscope/api/static/src/App.vue
+++ b/openflexure_microscope/api/static/src/App.vue
@@ -7,6 +7,26 @@
     <loadingContent v-if="!$store.getters.ready" />
     <div v-if="$store.getters.ready" id="tour-header"></div>
     <appContent v-if="$store.getters.ready" />
+    <!-- Runtime modals -->
+    <div
+      id="modal-center"
+      ref="keyboardManualModal"
+      class="uk-flex-top"
+      uk-modal
+    >
+      <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
+        <button class="uk-modal-close-default" type="button" uk-close></button>
+        <div
+          v-for="shortcut in keyboardManual"
+          :key="shortcut.shortcut"
+          class="uk-margin-small"
+          uk-grid
+        >
+          <div class="uk-width-small">{{ shortcut.shortcut }}</div>
+          <div class="uk-width-expand">{{ shortcut.description }}</div>
+        </div>
+      </div>
+    </div>
     <v-tour
       v-show="$store.getters.ready"
       name="guidedTour"
@@ -57,8 +77,8 @@ export default {
   data: function() {
     return {
       appAvailable: false,
-      keysDown: {},
       arrowKeysDown: {},
+      keyboardManual: [],
       systemDark: undefined,
       themeObserver: undefined,
       tourCallbacks: {
@@ -189,8 +209,9 @@ export default {
     // Keyboard shortcuts
 
     // TODO: Shortcut guide
-    Mousetrap.bind("?", function() {
-      console.log("show shortcuts!");
+    Mousetrap.bind("?", () => {
+      console.log(this.keyboardManual);
+      this.toggleModalElement(this.$refs["keyboardManualModal"]); // Calls the mixin
     });
 
     // Arrow keys
@@ -209,6 +230,10 @@ export default {
       },
       "keyup"
     );
+    this.keyboardManual.push({
+      shortcut: "←↑→↓",
+      description: "Move the microscope stage"
+    });
 
     // Focus keys
     Mousetrap.bind("pageup", () => {
@@ -217,16 +242,40 @@ export default {
     Mousetrap.bind("pagedown", () => {
       this.$root.$emit("globalMoveStepEvent", 0, 0, -1);
     });
+    this.keyboardManual.push({
+      shortcut: "pgup / pgdn",
+      description: "Move the microscope focus"
+    });
 
     // Capture
     Mousetrap.bind("c", () => {
       this.$root.$emit("globalCaptureEvent");
     });
+    this.keyboardManual.push({
+      shortcut: "c",
+      description: "Take a capture"
+    });
 
     // Autofocus
     Mousetrap.bind("a", () => {
       this.$root.$emit("globalFastAutofocusEvent");
     });
+    this.keyboardManual.push({
+      shortcut: "a",
+      description: "Fast autofocus"
+    });
+
+    // Increment/decrement tab
+    Mousetrap.bind("shift+down", () => {
+      this.$root.$emit("globalIncrementTab");
+    });
+    Mousetrap.bind("shift+up", () => {
+      this.$root.$emit("globalDecrementTab");
+    });
+    this.keyboardManual.push({
+      shortcut: "shift+↑ / shift+↓",
+      description: "Switch tab"
+    });
 
     // Re-run tour
     Mousetrap.bind("alt+t", () => {