From de7f4f6dfe655fabd4ff4229dae57c8c91d14b8a Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 9 Sep 2020 12:16:06 +0100
Subject: [PATCH 1/5] Drafted integrated slide scan

---
 .../api/static/package.json                   |   2 +-
 .../api/static/src/components/appContent.vue  |  17 +
 .../controlComponents/paneSlideScan.vue       | 312 ++++++++++++++++++
 .../tabContentComponents/slideScanContent.vue |  25 ++
 poetry.lock                                   |  14 +-
 5 files changed, 362 insertions(+), 8 deletions(-)
 create mode 100644 openflexure_microscope/api/static/src/components/controlComponents/paneSlideScan.vue
 create mode 100644 openflexure_microscope/api/static/src/components/tabContentComponents/slideScanContent.vue

diff --git a/openflexure_microscope/api/static/package.json b/openflexure_microscope/api/static/package.json
index af5be7b0..b2cc386c 100644
--- a/openflexure_microscope/api/static/package.json
+++ b/openflexure_microscope/api/static/package.json
@@ -10,7 +10,7 @@
   "license": "GNU General Public License v3.0 ",
   "scripts": {
     "build": "vue-cli-service build --mode production",
-    "serve": "vue-cli-service serve  --mode development"
+    "serve": "vue-cli-service serve --mode development"
   },
   "dependencies": {
     "material-design-icons": "^3.0.1",
diff --git a/openflexure_microscope/api/static/src/components/appContent.vue b/openflexure_microscope/api/static/src/components/appContent.vue
index 24439529..54b89b73 100644
--- a/openflexure_microscope/api/static/src/components/appContent.vue
+++ b/openflexure_microscope/api/static/src/components/appContent.vue
@@ -55,6 +55,15 @@
       >
         <i class="material-icons">camera_alt</i>
       </tabIcon>
+      <tabIcon
+        id="slidescan-tab-icon"
+        tab-i-d="slidescan"
+        :require-connection="true"
+        :current-tab="currentTab"
+        @set-tab="setTab"
+      >
+        <i class="material-icons">camera_alt</i>
+      </tabIcon>
       <tabIcon
         id="settings-tab-icon"
         tab-i-d="settings"
@@ -125,6 +134,13 @@
       >
         <captureContent />
       </tabContent>
+      <tabContent
+        tab-i-d="slidescan"
+        :require-connection="true"
+        :current-tab="currentTab"
+      >
+        <slideScanContent />
+      </tabContent>
       <tabContent
         tab-i-d="settings"
         :require-connection="false"
@@ -170,6 +186,7 @@ import tabContent from "./genericComponents/tabContent";
 // Import new content components
 import navigateContent from "./tabContentComponents/navigateContent.vue";
 import captureContent from "./tabContentComponents/captureContent.vue";
+import slideScanContent from "./tabContentComponents/slideScanContent.vue";
 import viewContent from "./tabContentComponents/viewContent.vue";
 import settingsContent from "./tabContentComponents/settingsContent.vue";
 import galleryContent from "./tabContentComponents/galleryContent.vue";
diff --git a/openflexure_microscope/api/static/src/components/controlComponents/paneSlideScan.vue b/openflexure_microscope/api/static/src/components/controlComponents/paneSlideScan.vue
new file mode 100644
index 00000000..f4c7a270
--- /dev/null
+++ b/openflexure_microscope/api/static/src/components/controlComponents/paneSlideScan.vue
@@ -0,0 +1,312 @@
+<template>
+  <div class="medscan">
+    <div v-show="!scanUri">No scan extension found</div>
+    <div v-show="scanUri">
+      <h1>Sample Scan Wizard</h1>
+
+      <form v-on:submit.prevent v-on:keyup.enter="increment()">
+        <div id="step-user" v-show="stepValue==0">
+          <h2>User information (1/4)</h2>
+
+          <label for="username">Your name:</label>
+          <input type="text" id="username" name="username" v-model="username" required />
+          <br />
+          <label for="currentTime">Current time (check this is correct):</label>
+          <input
+            type="datetime-local"
+            id="currentTime"
+            name="currentTime"
+            v-model="currentTimeForm"
+          />
+        </div>
+
+        <div id="step-patient" v-show="stepValue==1">
+          <h2>Patient information (2/4)</h2>
+
+          <label for="patientID">Patient ID:</label>
+          <input type="text" id="patientID" name="patientID" v-model="patientID" required />
+          <br />
+        </div>
+
+        <div id="step-sample" v-show="stepValue==2">
+          <h2>Sample information (3/4)</h2>
+
+          <label>Sample type:</label>
+          <br />
+          <input type="radio" id="typeThin" value="thin" v-model="sampleType" />
+          <label for="typeThin">Thin smear</label>
+          <br />
+          <input type="radio" id="typeThick" value="thick" v-model="sampleType" />
+          <label for="typeThick">Thick smear</label>
+          <br />
+        </div>
+
+        <div id="step-scan" v-show="stepValue==3">
+          <h2>Start scan (4/4)</h2>
+
+          <label>Check details:</label>
+          <p>
+            <b>Your name:</b>
+            {{ username }}
+          </p>
+          <p>
+            <b>Patient ID:</b>
+            {{ patientID }}
+          </p>
+          <p>
+            <b>Sample type:</b>
+            {{ sampleType }}
+          </p>
+        </div>
+      </form>
+
+      <div id="form-stepper">
+        <p class="warning">{{ message }}</p>
+          <taskSubmitter
+            v-if="scanUri"
+            v-show="stepValue == 3"
+            :base-url="baseURL"
+            :submit-url="scanUri"
+            :submit-data="payload"
+            submit-label="Start scan"
+            @submit="scanRunning=true"
+            @response="scanRunning=false"
+            @error="scanRunning=false"
+          ></taskSubmitter>
+        <br />
+
+        <div class="grid-container">
+          <button
+            :disabled="stepValue <= 0 || scanRunning"
+            type="button"
+            v-on:click="decrement()"
+          >Previous</button>
+          <button
+            :disabled="stepValue >= 3 || scanRunning"
+            type="button"
+            v-on:click="increment()"
+          >Next</button>
+        </div>
+        <p>
+          <button
+            v-show="stepValue == 3"
+            :disabled="scanRunning"
+            type="button"
+            v-on:click="restart()"
+          >Restart</button>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import taskSubmitter from "../genericComponents/taskSubmitter";
+
+export default {
+  components: {
+    taskSubmitter
+  },
+
+  data: function() {
+    return {
+      scanUri: null,
+      stepValue: 0,
+      hostDeviceName: null,
+      message: null,
+      username: "",
+      currentTime: this.getLocalDatetimeString(),
+      patientID: "",
+      sampleType: "thin",
+      scanRunning: false,
+      baseURL: `${window.location.origin}/api/v2`
+    };
+  },
+
+  watch: {
+    baseURL: function (val) {
+      if (this.baseURL) {
+        this.updateScanUri();
+      } else {
+        this.message = "No baseURL given";
+      }
+    },
+  },
+
+  mounted: function() {
+    if (this.baseURL) {
+      this.updateScanUri();
+    } else {
+      this.message = "No baseURL given";
+    }
+  },
+
+  methods: {
+    updateScanUri: function() {
+      axios
+        .get(this.pluginsUri) // Get a list of plugins
+        .then(response => {
+          console.log(response);
+          var plugins = response.data;
+          var foundExtension = plugins.find(
+            e => e.title === "org.openflexure.scan"
+          );
+          // if ScanPlugin is enabled
+          if (foundExtension) {
+            // Get plugin action link
+            this.scanUri = foundExtension.links.tile.href;
+          }
+        })
+        .catch(error => {
+          console.log(error); // Let mixin handle error
+        });
+    },
+
+    decrement: function() {
+      if (this.stepValue > 0) {
+        this.stepValue = this.stepValue - 1;
+      }
+    },
+
+    increment: function() {
+      // Validate sections
+      if (this.stepValue == 0) {
+        if (!this.username) {
+          this.message = "Please enter your name";
+          return false;
+        }
+      }
+      if (this.stepValue == 1) {
+        if (!this.patientID) {
+          this.message = "Please enter a patient ID";
+          return false;
+        }
+      }
+      // Upper bound on section number
+      if (this.stepValue < 3) {
+        this.stepValue = this.stepValue + 1;
+        this.message = "";
+        return true;
+      }
+    },
+
+    restart: function() {
+      this.stepValue = 0;
+      this.patientID = "";
+      this.currentTime = this.getLocalDatetimeString();
+    },
+
+    getLocalDatetimeString: function() {
+      var dt = new Date();
+      var tzo = -dt.getTimezoneOffset(),
+        dif = tzo >= 0 ? "+" : "-",
+        pad = function(num) {
+          var norm = Math.floor(Math.abs(num));
+          return (norm < 10 ? "0" : "") + norm;
+        };
+      return (
+        dt.getFullYear() +
+        "-" +
+        pad(dt.getMonth() + 1) +
+        "-" +
+        pad(dt.getDate()) +
+        "T" +
+        pad(dt.getHours()) +
+        ":" +
+        pad(dt.getMinutes()) +
+        ":" +
+        pad(dt.getSeconds()) +
+        dif +
+        pad(tzo / 60) +
+        ":" +
+        pad(tzo % 60)
+      );
+    }
+  },
+
+  computed: {
+    pluginsUri: function() {
+      return `${this.baseURL}/extensions`;
+    },
+
+    currentTimeForm: {
+      get() {
+        // Chop the timezone information from the end
+        return this.currentTime.substr(0, 19);
+      },
+      set(val) {
+        console.log(val);
+        // Get timezone
+        var dt = new Date();
+        var tzo = -dt.getTimezoneOffset(),
+          dif = tzo >= 0 ? "+" : "-",
+          pad = function(num) {
+            var norm = Math.floor(Math.abs(num));
+            return (norm < 10 ? "0" : "") + norm;
+          };
+        // Stick to the end of the new timestring from the form
+        this.currentTime = val + dif + pad(tzo / 60) + ":" + pad(tzo % 60);
+      }
+    },
+
+    payload: {
+      get() {
+        return {
+          filename: `${this.patientID}_${this.sampleType}`,
+          temporary: false,
+          bayer: false,
+          grid: [10, 10, 9],
+          stride_size: [800, 600, 10],
+          fast_autofocus: true,
+          autofocus_dz: 2000,
+          use_video_port: false,
+          annotations: {
+            patientID: this.patientID,
+            username: this.username,
+            clientDatetime: this.currentTime
+          },
+          tags: ["medscan"]
+        };
+      }
+    }
+  }
+};
+</script>
+
+<style>
+.medscan {
+  font-family: sans-serif;
+  color: #444;
+  text-align: left;
+}
+
+input[type="text"],
+input[type="datetime-local"] {
+  display: block;
+  margin: 0 10px 0 0;
+  width: 100%;
+  height: 25px;
+}
+
+button {
+  display: inline-block;
+  box-sizing: border-box;
+  margin: 0 10px 0 0;
+  width: 100%;
+  height: 25px;
+  min-width: 100px;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-column-gap: 10px;
+}
+
+.warning {
+  color: #c11;
+  font-weight: bold;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/slideScanContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/slideScanContent.vue
new file mode 100644
index 00000000..cf17e76d
--- /dev/null
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/slideScanContent.vue
@@ -0,0 +1,25 @@
+<template>
+  <!-- Grid managing tab content -->
+  <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
+    <div class="control-component">
+      <paneSlideScan />
+    </div>
+    <div class="view-component uk-width-expand">
+      <streamDisplay />
+    </div>
+  </div>
+</template>
+
+<script>
+import paneSlideScan from "../controlComponents/paneSlideScan";
+import streamDisplay from "../viewComponents/streamDisplay.vue";
+
+export default {
+  name: "NavigateContent",
+
+  components: {
+    paneSlideScan,
+    streamDisplay
+  }
+};
+</script>
diff --git a/poetry.lock b/poetry.lock
index 2d480366..a3f4ebfb 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -302,7 +302,7 @@ webargs = "^6.0.0"
 zeroconf = ">=0.24.5,<0.29.0"
 
 [package.source]
-reference = "c79e6f28d5ffbd61dcfe7fc94130db604cdb4e2d"
+reference = "bf41b5009e8e0e465222399f38c0cd2104dbd0b7"
 type = "git"
 url = "https://github.com/labthings/python-labthings.git"
 [[package]]
@@ -718,16 +718,16 @@ description = "Declarative parsing and validation of HTTP request objects, with
 name = "webargs"
 optional = false
 python-versions = ">=3.5"
-version = "6.1.0"
+version = "6.1.1"
 
 [package.dependencies]
 marshmallow = ">=2.15.2"
 
 [package.extras]
-dev = ["pytest", "webtest (2.0.35)", "webtest-aiohttp (2.0.0)", "pytest-aiohttp (>=0.3.0)", "Flask (>=0.12.2)", "Django (>=1.11.16)", "bottle (>=0.12.13)", "tornado (>=4.5.2)", "pyramid (>=1.9.1)", "webapp2 (>=3.0.0b1)", "falcon (>=2.0.0)", "aiohttp (>=3.0.0)", "mypy (0.770)", "flake8 (3.7.9)", "flake8-bugbear (20.1.4)", "pre-commit (>=1.20,<3.0)", "tox", "mock"]
-docs = ["Sphinx (3.0.3)", "sphinx-issues (1.2.0)", "sphinx-typlog-theme (0.8.0)", "Flask (>=0.12.2)", "Django (>=1.11.16)", "bottle (>=0.12.13)", "tornado (>=4.5.2)", "pyramid (>=1.9.1)", "webapp2 (>=3.0.0b1)", "falcon (>=2.0.0)", "aiohttp (>=3.0.0)"]
+dev = ["pytest", "webtest (2.0.35)", "webtest-aiohttp (2.0.0)", "pytest-aiohttp (>=0.3.0)", "Flask (>=0.12.2)", "Django (>=1.11.16)", "bottle (>=0.12.13)", "tornado (>=4.5.2)", "pyramid (>=1.9.1)", "webapp2 (>=3.0.0b1)", "falcon (>=2.0.0)", "aiohttp (>=3.0.0)", "mypy (0.782)", "flake8 (3.8.3)", "flake8-bugbear (20.1.4)", "pre-commit (>=2.4,<3.0)", "tox", "mock"]
+docs = ["Sphinx (3.2.1)", "sphinx-issues (1.2.0)", "sphinx-typlog-theme (0.8.0)", "Flask (>=0.12.2)", "Django (>=1.11.16)", "bottle (>=0.12.13)", "tornado (>=4.5.2)", "pyramid (>=1.9.1)", "webapp2 (>=3.0.0b1)", "falcon (>=2.0.0)", "aiohttp (>=3.0.0)"]
 frameworks = ["Flask (>=0.12.2)", "Django (>=1.11.16)", "bottle (>=0.12.13)", "tornado (>=4.5.2)", "pyramid (>=1.9.1)", "webapp2 (>=3.0.0b1)", "falcon (>=2.0.0)", "aiohttp (>=3.0.0)"]
-lint = ["mypy (0.770)", "flake8 (3.7.9)", "flake8-bugbear (20.1.4)", "pre-commit (>=1.20,<3.0)"]
+lint = ["mypy (0.782)", "flake8 (3.8.3)", "flake8-bugbear (20.1.4)", "pre-commit (>=2.4,<3.0)"]
 tests = ["pytest", "webtest (2.0.35)", "webtest-aiohttp (2.0.0)", "pytest-aiohttp (>=0.3.0)", "Flask (>=0.12.2)", "Django (>=1.11.16)", "bottle (>=0.12.13)", "tornado (>=4.5.2)", "pyramid (>=1.9.1)", "webapp2 (>=3.0.0b1)", "falcon (>=2.0.0)", "aiohttp (>=3.0.0)", "mock"]
 
 [[package]]
@@ -1220,8 +1220,8 @@ urllib3 = [
     {file = "urllib3-1.25.10.tar.gz", hash = "sha256:91056c15fa70756691db97756772bb1eb9678fa585d9184f24534b100dc60f4a"},
 ]
 webargs = [
-    {file = "webargs-6.1.0-py2.py3-none-any.whl", hash = "sha256:cf0b5e2fdfb81f28b9332fce15621069d3fbc910a01c7ca8a5e166371699927b"},
-    {file = "webargs-6.1.0.tar.gz", hash = "sha256:ebb47fb35c3c4fc764213a17d1686e82fec54759ebed2b0715907d566668bb3f"},
+    {file = "webargs-6.1.1-py2.py3-none-any.whl", hash = "sha256:2ead6ce38559152043ab4ada4d389aef6c804b0c169482e7c92b3f498f690b2c"},
+    {file = "webargs-6.1.1.tar.gz", hash = "sha256:412ecadd977afdea0ed6fa5f5b65ddd13a099269e622ec537f9c74c443ce4d0b"},
 ]
 werkzeug = [
     {file = "Werkzeug-1.0.1-py2.py3-none-any.whl", hash = "sha256:2de2a5db0baeae7b2d2664949077c2ac63fbd16d98da0ff71837f7d1dea3fd43"},

From f0ce85fc3f59f433434839c4d9e760c48a14acbe Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 9 Sep 2020 12:54:44 +0100
Subject: [PATCH 2/5] Added app setting to enable/disable IHI slidescan

---
 .../api/static/src/components/appContent.vue  |  45 ++--
 .../controlComponents/paneSlideScan.vue       | 198 +++++++++---------
 .../tabContentComponents/slideScanContent.vue |   2 +-
 .../settingsComponents/featuresSettings.vue   |  55 +++++
 .../viewComponents/settingsDisplay.vue        |  28 ++-
 .../api/static/src/store.js                   |   1 +
 6 files changed, 209 insertions(+), 120 deletions(-)
 create mode 100644 openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/featuresSettings.vue

diff --git a/openflexure_microscope/api/static/src/components/appContent.vue b/openflexure_microscope/api/static/src/components/appContent.vue
index 54b89b73..b4a76edf 100644
--- a/openflexure_microscope/api/static/src/components/appContent.vue
+++ b/openflexure_microscope/api/static/src/components/appContent.vue
@@ -55,24 +55,20 @@
       >
         <i class="material-icons">camera_alt</i>
       </tabIcon>
-      <tabIcon
-        id="slidescan-tab-icon"
-        tab-i-d="slidescan"
-        :require-connection="true"
-        :current-tab="currentTab"
-        @set-tab="setTab"
-      >
-        <i class="material-icons">camera_alt</i>
-      </tabIcon>
-      <tabIcon
-        id="settings-tab-icon"
-        tab-i-d="settings"
-        :require-connection="false"
-        :current-tab="currentTab"
-        @set-tab="setTab"
-      >
-        <i class="material-icons">settings</i>
-      </tabIcon>
+
+      <template v-if="$store.state.globalSettings.IHIEnabled">
+        <hr id="extension-tab-divider" />
+
+        <tabIcon
+          id="slidescan-tab-icon"
+          tab-i-d="slidescan"
+          :require-connection="true"
+          :current-tab="currentTab"
+          @set-tab="setTab"
+        >
+          <i class="material-icons">camera_alt</i>
+        </tabIcon>
+      </template>
 
       <hr id="extension-tab-divider" />
 
@@ -90,8 +86,18 @@
       </tabIcon>
 
       <tabIcon
-        id="about-tab-icon"
+        id="settings-tab-icon"
         class="uk-margin-auto-top"
+        tab-i-d="settings"
+        :require-connection="false"
+        :current-tab="currentTab"
+        @set-tab="setTab"
+      >
+        <i class="material-icons">settings</i>
+      </tabIcon>
+
+      <tabIcon
+        id="about-tab-icon"
         tab-i-d="about"
         :require-connection="false"
         :current-tab="currentTab"
@@ -205,6 +211,7 @@ export default {
     tabContent,
     navigateContent,
     captureContent,
+    slideScanContent,
     viewContent,
     settingsContent,
     galleryContent,
diff --git a/openflexure_microscope/api/static/src/components/controlComponents/paneSlideScan.vue b/openflexure_microscope/api/static/src/components/controlComponents/paneSlideScan.vue
index f4c7a270..17add11e 100644
--- a/openflexure_microscope/api/static/src/components/controlComponents/paneSlideScan.vue
+++ b/openflexure_microscope/api/static/src/components/controlComponents/paneSlideScan.vue
@@ -4,44 +4,61 @@
     <div v-show="scanUri">
       <h1>Sample Scan Wizard</h1>
 
-      <form v-on:submit.prevent v-on:keyup.enter="increment()">
-        <div id="step-user" v-show="stepValue==0">
+      <form @submit.prevent @keyup.enter="increment()">
+        <div v-show="stepValue == 0" id="step-user">
           <h2>User information (1/4)</h2>
 
           <label for="username">Your name:</label>
-          <input type="text" id="username" name="username" v-model="username" required />
+          <input
+            id="username"
+            v-model="username"
+            type="text"
+            name="username"
+            required
+          />
           <br />
           <label for="currentTime">Current time (check this is correct):</label>
           <input
-            type="datetime-local"
             id="currentTime"
-            name="currentTime"
             v-model="currentTimeForm"
+            type="datetime-local"
+            name="currentTime"
           />
         </div>
 
-        <div id="step-patient" v-show="stepValue==1">
+        <div v-show="stepValue == 1" id="step-patient">
           <h2>Patient information (2/4)</h2>
 
           <label for="patientID">Patient ID:</label>
-          <input type="text" id="patientID" name="patientID" v-model="patientID" required />
+          <input
+            id="patientID"
+            v-model="patientID"
+            type="text"
+            name="patientID"
+            required
+          />
           <br />
         </div>
 
-        <div id="step-sample" v-show="stepValue==2">
+        <div v-show="stepValue == 2" id="step-sample">
           <h2>Sample information (3/4)</h2>
 
           <label>Sample type:</label>
           <br />
-          <input type="radio" id="typeThin" value="thin" v-model="sampleType" />
+          <input id="typeThin" v-model="sampleType" type="radio" value="thin" />
           <label for="typeThin">Thin smear</label>
           <br />
-          <input type="radio" id="typeThick" value="thick" v-model="sampleType" />
+          <input
+            id="typeThick"
+            v-model="sampleType"
+            type="radio"
+            value="thick"
+          />
           <label for="typeThick">Thick smear</label>
           <br />
         </div>
 
-        <div id="step-scan" v-show="stepValue==3">
+        <div v-show="stepValue == 3" id="step-scan">
           <h2>Start scan (4/4)</h2>
 
           <label>Check details:</label>
@@ -62,38 +79,44 @@
 
       <div id="form-stepper">
         <p class="warning">{{ message }}</p>
-          <taskSubmitter
-            v-if="scanUri"
-            v-show="stepValue == 3"
-            :base-url="baseURL"
-            :submit-url="scanUri"
-            :submit-data="payload"
-            submit-label="Start scan"
-            @submit="scanRunning=true"
-            @response="scanRunning=false"
-            @error="scanRunning=false"
-          ></taskSubmitter>
+        <taskSubmitter
+          v-if="scanUri"
+          v-show="stepValue == 3"
+          :base-url="baseURL"
+          :submit-url="scanUri"
+          :submit-data="payload"
+          submit-label="Start scan"
+          @submit="scanRunning = true"
+          @response="scanRunning = false"
+          @error="scanRunning = false"
+        ></taskSubmitter>
         <br />
 
         <div class="grid-container">
           <button
             :disabled="stepValue <= 0 || scanRunning"
             type="button"
-            v-on:click="decrement()"
-          >Previous</button>
+            @click="decrement()"
+          >
+            Previous
+          </button>
           <button
             :disabled="stepValue >= 3 || scanRunning"
             type="button"
-            v-on:click="increment()"
-          >Next</button>
+            @click="increment()"
+          >
+            Next
+          </button>
         </div>
         <p>
           <button
             v-show="stepValue == 3"
             :disabled="scanRunning"
             type="button"
-            v-on:click="restart()"
-          >Restart</button>
+            @click="restart()"
+          >
+            Restart
+          </button>
         </p>
       </div>
     </div>
@@ -124,14 +147,60 @@ export default {
     };
   },
 
+  computed: {
+    pluginsUri: function() {
+      return `${this.$store.getters.baseUri}/api/v2/extensions`;
+    },
+    currentTimeForm: {
+      get() {
+        // Chop the timezone information from the end
+        return this.currentTime.substr(0, 19);
+      },
+      set(val) {
+        console.log(val);
+        // Get timezone
+        var dt = new Date();
+        var tzo = -dt.getTimezoneOffset(),
+          dif = tzo >= 0 ? "+" : "-",
+          pad = function(num) {
+            var norm = Math.floor(Math.abs(num));
+            return (norm < 10 ? "0" : "") + norm;
+          };
+        // Stick to the end of the new timestring from the form
+        this.currentTime = val + dif + pad(tzo / 60) + ":" + pad(tzo % 60);
+      }
+    },
+
+    payload: {
+      get() {
+        return {
+          filename: `${this.patientID}_${this.sampleType}`,
+          temporary: false,
+          bayer: false,
+          grid: [10, 10, 9],
+          stride_size: [800, 600, 10],
+          fast_autofocus: true,
+          autofocus_dz: 2000,
+          use_video_port: false,
+          annotations: {
+            patientID: this.patientID,
+            username: this.username,
+            clientDatetime: this.currentTime
+          },
+          tags: ["medscan"]
+        };
+      }
+    }
+  },
+
   watch: {
-    baseURL: function (val) {
+    baseURL: function(val) {
       if (this.baseURL) {
         this.updateScanUri();
       } else {
         this.message = "No baseURL given";
       }
-    },
+    }
   },
 
   mounted: function() {
@@ -147,7 +216,6 @@ export default {
       axios
         .get(this.pluginsUri) // Get a list of plugins
         .then(response => {
-          console.log(response);
           var plugins = response.data;
           var foundExtension = plugins.find(
             e => e.title === "org.openflexure.scan"
@@ -159,7 +227,7 @@ export default {
           }
         })
         .catch(error => {
-          console.log(error); // Let mixin handle error
+          this.modalError(error); // Let mixin handle error
         });
     },
 
@@ -223,53 +291,6 @@ export default {
         pad(tzo % 60)
       );
     }
-  },
-
-  computed: {
-    pluginsUri: function() {
-      return `${this.baseURL}/extensions`;
-    },
-
-    currentTimeForm: {
-      get() {
-        // Chop the timezone information from the end
-        return this.currentTime.substr(0, 19);
-      },
-      set(val) {
-        console.log(val);
-        // Get timezone
-        var dt = new Date();
-        var tzo = -dt.getTimezoneOffset(),
-          dif = tzo >= 0 ? "+" : "-",
-          pad = function(num) {
-            var norm = Math.floor(Math.abs(num));
-            return (norm < 10 ? "0" : "") + norm;
-          };
-        // Stick to the end of the new timestring from the form
-        this.currentTime = val + dif + pad(tzo / 60) + ":" + pad(tzo % 60);
-      }
-    },
-
-    payload: {
-      get() {
-        return {
-          filename: `${this.patientID}_${this.sampleType}`,
-          temporary: false,
-          bayer: false,
-          grid: [10, 10, 9],
-          stride_size: [800, 600, 10],
-          fast_autofocus: true,
-          autofocus_dz: 2000,
-          use_video_port: false,
-          annotations: {
-            patientID: this.patientID,
-            username: this.username,
-            clientDatetime: this.currentTime
-          },
-          tags: ["medscan"]
-        };
-      }
-    }
   }
 };
 </script>
@@ -281,23 +302,6 @@ export default {
   text-align: left;
 }
 
-input[type="text"],
-input[type="datetime-local"] {
-  display: block;
-  margin: 0 10px 0 0;
-  width: 100%;
-  height: 25px;
-}
-
-button {
-  display: inline-block;
-  box-sizing: border-box;
-  margin: 0 10px 0 0;
-  width: 100%;
-  height: 25px;
-  min-width: 100px;
-}
-
 .grid-container {
   display: grid;
   grid-template-columns: auto auto;
@@ -309,4 +313,4 @@ button {
   font-weight: bold;
   text-align: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/slideScanContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/slideScanContent.vue
index cf17e76d..c04a6ce7 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/slideScanContent.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/slideScanContent.vue
@@ -15,7 +15,7 @@ import paneSlideScan from "../controlComponents/paneSlideScan";
 import streamDisplay from "../viewComponents/streamDisplay.vue";
 
 export default {
-  name: "NavigateContent",
+  name: "SlideScanContent",
 
   components: {
     paneSlideScan,
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/featuresSettings.vue b/openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/featuresSettings.vue
new file mode 100644
index 00000000..97e033e7
--- /dev/null
+++ b/openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/featuresSettings.vue
@@ -0,0 +1,55 @@
+<template>
+  <div id="appSettings">
+    <h3>Additional features</h3>
+    <p class="uk-margin-small">
+      <label
+        ><input v-model="IHIEnabled" class="uk-checkbox" type="checkbox" />
+        Enable IHI Slide Scan</label
+      >
+    </p>
+    <p class="uk-margin-small uk-width-xlarge">
+      Enabling IHI Slide Scan will add a new tab designed to simplify
+      acquiring blood smear tile scans. </br>
+      While this may be useful for other applications, it is primarily designed
+      for use in clinics acquiring blood smear samples using a 100x oil-immersion
+      objective, with a Raspberry Pi Camera v2.
+    </p>
+  </div>
+</template>
+
+<script>
+// Export main app
+export default {
+  name: "FeaturesSettings",
+
+  data: function() {
+    return {};
+  },
+
+  computed: {
+    IHIEnabled: {
+      get() {
+        return this.$store.state.globalSettings.IHIEnabled;
+      },
+      set(value) {
+        this.$store.commit("changeSetting", ["IHIEnabled", value]);
+        this.$root.$emit("globalSafeTogglePreview", value);
+      }
+    }
+  },
+
+  watch: {
+    IHIEnabled() {
+      console.log("Saving IHIEnabled setting");
+      this.setLocalStorageObj("IHIEnabled", this.IHIEnabled);
+    }
+  },
+
+  mounted() {
+    // Try loading settings from localStorage. If null, don't change.
+    this.IHIEnabled = this.getLocalStorageObj("IHIEnabled") || this.IHIEnabled;
+  }
+};
+</script>
+
+<style lang="less"></style>
diff --git a/openflexure_microscope/api/static/src/components/viewComponents/settingsDisplay.vue b/openflexure_microscope/api/static/src/components/viewComponents/settingsDisplay.vue
index 9d3266dd..60cd1e0a 100644
--- a/openflexure_microscope/api/static/src/components/viewComponents/settingsDisplay.vue
+++ b/openflexure_microscope/api/static/src/components/viewComponents/settingsDisplay.vue
@@ -17,6 +17,19 @@
             Display
           </tabIcon>
         </li>
+        <li>
+          <tabIcon
+            id="settings-features-icon"
+            tab-i-d="features"
+            :show-title="false"
+            :show-tooltip="false"
+            :require-connection="false"
+            :current-tab="currentTab"
+            @set-tab="setTab"
+          >
+            Features
+          </tabIcon>
+        </li>
         <li class="uk-nav-header">Microscope settings</li>
         <li>
           <tabIcon
@@ -71,6 +84,16 @@
         </div>
       </tabContent>
 
+      <tabContent
+        tab-i-d="features"
+        :require-connection="false"
+        :current-tab="currentTab"
+      >
+        <div class="settings-pane uk-padding-small">
+          <featuresSettings />
+        </div>
+      </tabContent>
+
       <tabContent
         tab-i-d="camera"
         :require-connection="true"
@@ -116,6 +139,7 @@ import streamSettings from "./settingsComponents/streamSettings.vue";
 import microscopeSettings from "./settingsComponents/microscopeSettings.vue";
 import cameraSettings from "./settingsComponents/cameraSettings.vue";
 import appSettings from "./settingsComponents/appSettings.vue";
+import featuresSettings from "./settingsComponents/featuresSettings.vue";
 import cameraStageMappingSettings from "./settingsComponents/cameraStageMappingSettings.vue";
 
 // Import generic components
@@ -132,6 +156,7 @@ export default {
     microscopeSettings,
     cameraStageMappingSettings,
     appSettings,
+    featuresSettings,
     tabIcon,
     tabContent
   },
@@ -157,9 +182,6 @@ export default {
 // Custom UIkit CSS modifications
 @import "../../assets/less/theme.less";
 
-.settings-pane {
-}
-
 .settings-nav {
   overflow-y: auto;
   overflow-x: hidden;
diff --git a/openflexure_microscope/api/static/src/store.js b/openflexure_microscope/api/static/src/store.js
index 00a4de76..961bddfa 100644
--- a/openflexure_microscope/api/static/src/store.js
+++ b/openflexure_microscope/api/static/src/store.js
@@ -13,6 +13,7 @@ export default new Vuex.Store({
       disableStream: false,
       autoGpuPreview: false,
       trackWindow: true,
+      IHIEnabled: false,
       appTheme: "system"
     },
     activeStreams: {}

From a34f98275b40636ff4b9d20e2270c624cd4165f7 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 9 Sep 2020 13:21:21 +0100
Subject: [PATCH 3/5] Updated scan tab icon

---
 .../api/static/src/components/appContent.vue  | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/openflexure_microscope/api/static/src/components/appContent.vue b/openflexure_microscope/api/static/src/components/appContent.vue
index b4a76edf..122adca7 100644
--- a/openflexure_microscope/api/static/src/components/appContent.vue
+++ b/openflexure_microscope/api/static/src/components/appContent.vue
@@ -66,7 +66,7 @@
           :current-tab="currentTab"
           @set-tab="setTab"
         >
-          <i class="material-icons">camera_alt</i>
+          <i class="material-icons">settings_overscan</i>
         </tabIcon>
       </template>
 
@@ -140,13 +140,17 @@
       >
         <captureContent />
       </tabContent>
-      <tabContent
-        tab-i-d="slidescan"
-        :require-connection="true"
-        :current-tab="currentTab"
-      >
-        <slideScanContent />
-      </tabContent>
+
+      <template v-if="$store.state.globalSettings.IHIEnabled">
+        <tabContent
+          tab-i-d="slidescan"
+          :require-connection="true"
+          :current-tab="currentTab"
+        >
+          <slideScanContent />
+        </tabContent>
+      </template>
+
       <tabContent
         tab-i-d="settings"
         :require-connection="false"

From 41eff92e7d2a5b59209c7b6abcdb2c907259b8ec Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 9 Sep 2020 13:21:40 +0100
Subject: [PATCH 4/5] Updated Action status strings

---
 .../genericComponents/taskSubmitter.vue       | 69 +++++++++----------
 1 file changed, 31 insertions(+), 38 deletions(-)

diff --git a/openflexure_microscope/api/static/src/components/genericComponents/taskSubmitter.vue b/openflexure_microscope/api/static/src/components/genericComponents/taskSubmitter.vue
index 0d521b1b..88c1fb29 100644
--- a/openflexure_microscope/api/static/src/components/genericComponents/taskSubmitter.vue
+++ b/openflexure_microscope/api/static/src/components/genericComponents/taskSubmitter.vue
@@ -16,7 +16,7 @@
         class="uk-button uk-button-danger uk-margin-remove uk-float-right uk-width-1-1"
         @click="terminateTask()"
       >
-        Terminate
+        Cancel
       </button>
     </div>
 
@@ -193,32 +193,29 @@ export default {
 
       var checkCondition = (resolve, reject) => {
         // If the condition is met, we're done!
-        axios
-          .get(this.taskUrl)
-          .then(response => {
-            console.log(response.data.status);
-            var result = response.data.status;
-            // If the task ends with success
-            if (result == "completed") {
-              resolve(response.data);
-            }
-            // If task ends with an error
-            else if (result == "error") {
-              // Pass the error string back with reject
-              reject(new Error(response.data.return));
-            }
-            // If task ends with termination
-            else if (result == "cancelled") {
-              // Pass a generic termination error back with reject
-              reject(new Error("Task cancelled"));
-            }
-            else {
-              // Since the task is still running, we can update the progress bar
-              this.progress = response.data.progress;
-              // Check again after timeout
-              setTimeout(checkCondition, interval, resolve, reject);
-            }
-          });
+        axios.get(this.taskUrl).then(response => {
+          console.log(response.data.status);
+          var result = response.data.status;
+          // If the task ends with success
+          if (result == "completed") {
+            resolve(response.data);
+          }
+          // If task ends with an error
+          else if (result == "error") {
+            // Pass the error string back with reject
+            reject(new Error(response.data.return));
+          }
+          // If task ends with termination
+          else if (result == "cancelled") {
+            // Pass a generic termination error back with reject
+            reject(new Error("Task cancelled"));
+          } else {
+            // Since the task is still running, we can update the progress bar
+            this.progress = response.data.progress;
+            // Check again after timeout
+            setTimeout(checkCondition, interval, resolve, reject);
+          }
+        });
       };
 
       return new Promise(checkCondition);
@@ -227,20 +224,16 @@ export default {
     pollProgress: function() {
       console.log("Starting progress polling");
 
-      axios
-        .get(this.taskUrl)
-        .then(response => {
-          console.log("PROGRESS RESPONSE: ", response.data.progress);
-          this.progress = response.data.progress;
-        });
+      axios.get(this.taskUrl).then(response => {
+        console.log("PROGRESS RESPONSE: ", response.data.progress);
+        this.progress = response.data.progress;
+      });
     },
 
     terminateTask: function() {
-      axios
-        .delete(this.taskUrl)
-        .then(response => {
-          console.log("TERMINATION RESPONSE: ", response.data);
-        });
+      axios.delete(this.taskUrl).then(response => {
+        console.log("TERMINATION RESPONSE: ", response.data);
+      });
     }
   }
 };

From 9a3ba335c159908609b3e13bbcedf0f238ce7687 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 9 Sep 2020 13:21:58 +0100
Subject: [PATCH 5/5] Made scan parameters editable (dev only for now)

---
 .../controlComponents/paneSlideScan.vue       | 81 +++++++++----------
 1 file changed, 39 insertions(+), 42 deletions(-)

diff --git a/openflexure_microscope/api/static/src/components/controlComponents/paneSlideScan.vue b/openflexure_microscope/api/static/src/components/controlComponents/paneSlideScan.vue
index 17add11e..78738a6d 100644
--- a/openflexure_microscope/api/static/src/components/controlComponents/paneSlideScan.vue
+++ b/openflexure_microscope/api/static/src/components/controlComponents/paneSlideScan.vue
@@ -1,17 +1,16 @@
 <template>
-  <div class="medscan">
+  <div class="uk-padding-small">
     <div v-show="!scanUri">No scan extension found</div>
     <div v-show="scanUri">
-      <h1>Sample Scan Wizard</h1>
-
       <form @submit.prevent @keyup.enter="increment()">
         <div v-show="stepValue == 0" id="step-user">
-          <h2>User information (1/4)</h2>
+          <h3>User information (1/4)</h3>
 
           <label for="username">Your name:</label>
           <input
             id="username"
             v-model="username"
+            class="uk-input"
             type="text"
             name="username"
             required
@@ -21,18 +20,20 @@
           <input
             id="currentTime"
             v-model="currentTimeForm"
+            class="uk-input"
             type="datetime-local"
             name="currentTime"
           />
         </div>
 
         <div v-show="stepValue == 1" id="step-patient">
-          <h2>Patient information (2/4)</h2>
+          <h3>Patient information (2/4)</h3>
 
           <label for="patientID">Patient ID:</label>
           <input
             id="patientID"
             v-model="patientID"
+            class="uk-input"
             type="text"
             name="patientID"
             required
@@ -41,16 +42,23 @@
         </div>
 
         <div v-show="stepValue == 2" id="step-sample">
-          <h2>Sample information (3/4)</h2>
+          <h3>Sample information (3/4)</h3>
 
           <label>Sample type:</label>
           <br />
-          <input id="typeThin" v-model="sampleType" type="radio" value="thin" />
+          <input
+            id="typeThin"
+            v-model="sampleType"
+            class="uk-radio"
+            type="radio"
+            value="thin"
+          />
           <label for="typeThin">Thin smear</label>
           <br />
           <input
             id="typeThick"
             v-model="sampleType"
+            class="uk-radio"
             type="radio"
             value="thick"
           />
@@ -59,7 +67,7 @@
         </div>
 
         <div v-show="stepValue == 3" id="step-scan">
-          <h2>Start scan (4/4)</h2>
+          <h3>Start scan (4/4)</h3>
 
           <label>Check details:</label>
           <p>
@@ -82,7 +90,6 @@
         <taskSubmitter
           v-if="scanUri"
           v-show="stepValue == 3"
-          :base-url="baseURL"
           :submit-url="scanUri"
           :submit-data="payload"
           submit-label="Start scan"
@@ -92,16 +99,18 @@
         ></taskSubmitter>
         <br />
 
-        <div class="grid-container">
+        <div v-show="!scanRunning" class="grid-container">
           <button
-            :disabled="stepValue <= 0 || scanRunning"
+            class="uk-button uk-button-primary"
+            :disabled="stepValue <= 0"
             type="button"
             @click="decrement()"
           >
             Previous
           </button>
           <button
-            :disabled="stepValue >= 3 || scanRunning"
+            class="uk-button uk-button-primary"
+            :disabled="stepValue >= 3"
             type="button"
             @click="increment()"
           >
@@ -110,7 +119,8 @@
         </div>
         <p>
           <button
-            v-show="stepValue == 3"
+            v-show="stepValue == 3 && !scanRunning"
+            class="uk-button uk-button-danger uk-width-1-1"
             :disabled="scanRunning"
             type="button"
             @click="restart()"
@@ -138,12 +148,19 @@ export default {
       stepValue: 0,
       hostDeviceName: null,
       message: null,
+      // Scan info
       username: "",
       currentTime: this.getLocalDatetimeString(),
       patientID: "",
       sampleType: "thin",
       scanRunning: false,
-      baseURL: `${window.location.origin}/api/v2`
+      // Scan settings
+      bayer: false,
+      grid: [10, 10, 9],
+      stride_size: [800, 600, 10],
+      fast_autofocus: true,
+      autofocus_dz: 2000,
+      use_video_port: false
     };
   },
 
@@ -176,39 +193,25 @@ export default {
         return {
           filename: `${this.patientID}_${this.sampleType}`,
           temporary: false,
-          bayer: false,
-          grid: [10, 10, 9],
-          stride_size: [800, 600, 10],
-          fast_autofocus: true,
-          autofocus_dz: 2000,
-          use_video_port: false,
+          bayer: this.bayer,
+          grid: this.grid,
+          stride_size: this.stride_size,
+          fast_autofocus: this.fast_autofocus,
+          autofocus_dz: this.autofocus_dz,
+          use_video_port: this.use_video_port,
           annotations: {
             patientID: this.patientID,
             username: this.username,
             clientDatetime: this.currentTime
           },
-          tags: ["medscan"]
+          tags: ["slidescan"]
         };
       }
     }
   },
 
-  watch: {
-    baseURL: function(val) {
-      if (this.baseURL) {
-        this.updateScanUri();
-      } else {
-        this.message = "No baseURL given";
-      }
-    }
-  },
-
   mounted: function() {
-    if (this.baseURL) {
-      this.updateScanUri();
-    } else {
-      this.message = "No baseURL given";
-    }
+    this.updateScanUri();
   },
 
   methods: {
@@ -296,12 +299,6 @@ export default {
 </script>
 
 <style>
-.medscan {
-  font-family: sans-serif;
-  color: #444;
-  text-align: left;
-}
-
 .grid-container {
   display: grid;
   grid-template-columns: auto auto;