Added app setting to enable/disable IHI slidescan

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>

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;