From f0a312742b5369fe951942c19f847dec366bfecb Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 18 Nov 2020 15:29:33 +0000
Subject: [PATCH] Rearranged settings and added LST download

---
 .../settingsComponents/CSMSettings.vue        |  19 ++-
 .../CSMCalibrationSettings.vue                |   7 --
 .../settingsComponents/appSettings.vue        |   2 +-
 .../settingsComponents/cameraSettings.vue     | 118 +++++++++---------
 .../cameraCalibrationSettings.vue             |  63 +++++++---
 .../settingsComponents/featuresSettings.vue   |   4 +-
 .../settingsComponents/microscopeSettings.vue |   2 +-
 .../settingsComponents/stageSettings.vue      |   2 +-
 .../settingsComponents/streamSettings.vue     |  19 ++-
 .../tabContentComponents/settingsContent.vue  |   6 -
 10 files changed, 143 insertions(+), 99 deletions(-)

diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/CSMSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
index 565278c3..4e3cd78f 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
@@ -1,6 +1,18 @@
 <template>
-  <div id="CSMSettings">
-    <CSMCalibrationSettings />
+  <div
+    id="CSMSettings"
+    class="uk-grid uk-grid-divider uk-child-width-expand"
+    uk-grid
+  >
+    <div class="uk-width-large">
+      <h3>Camera/stage mapping</h3>
+      <p>
+        Camera/stage mapping allows the stage to move relative to the camera
+        view. This enables functions like click-to-move, and more precise tile
+        scans.
+      </p>
+      <CSMCalibrationSettings />
+    </div>
     <div id="mini-stream">
       <miniStreamDisplay />
     </div>
@@ -147,7 +159,8 @@ export default {
   margin-right: auto;
 }
 #mini-stream {
-  width: 500px;
+  min-width: 300px;
+  max-width: 600px;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
index c8544501..8589c0ad 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
@@ -167,11 +167,4 @@ export default {
   margin-left: auto;
   margin-right: auto;
 }
-#mini-stream {
-  width: 500px;
-  text-align: center;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 50px;
-}
 </style>
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/appSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/appSettings.vue
index b47e42ee..2041c16a 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/appSettings.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/appSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="appSettings">
+  <div id="appSettings" class="uk-width-large">
     <h3>Appearance</h3>
     <p>
       <label>
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/cameraSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
index 06fd99cd..bc6a920f 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
@@ -1,67 +1,68 @@
 <template>
   <div v-if="settings" id="cameraSettings">
-    <div>
-      <h3>Manual camera settings</h3>
-      <form @submit.prevent="applyConfigRequest">
-        <div v-if="settings.picamera">
-          <!--PiCamera settings block-->
-          <div v-if="settings.picamera.shutter_speed !== undefined">
-            <label class="uk-form-label" for="form-stacked-text"
-              >Exposure time</label
-            >
-            <div class="uk-form-controls">
-              <input
-                v-model="settings.picamera.shutter_speed"
-                class="uk-input uk-form-small"
-                type="number"
-              />
+    <div class="uk-grid uk-grid-divider uk-child-width-expand" uk-grid>
+      <div class="uk-width-large">
+        <h3>Manual camera settings</h3>
+        <form @submit.prevent="applyConfigRequest">
+          <div v-if="settings.picamera">
+            <!--PiCamera settings block-->
+            <div v-if="settings.picamera.shutter_speed !== undefined">
+              <label class="uk-form-label" for="form-stacked-text"
+                >Exposure time</label
+              >
+              <div class="uk-form-controls">
+                <input
+                  v-model="settings.picamera.shutter_speed"
+                  class="uk-input uk-form-small"
+                  type="number"
+                />
+              </div>
+            </div>
+
+            <div v-if="settings.picamera.analog_gain !== undefined">
+              <label class="uk-form-label" for="form-stacked-text"
+                >Analogue gain</label
+              >
+              <div class="uk-form-controls">
+                <input
+                  v-model="settings.picamera.analog_gain"
+                  class="uk-input uk-form-small"
+                  type="number"
+                  step="0.000001"
+                />
+              </div>
+            </div>
+
+            <div v-if="settings.picamera.digital_gain !== undefined">
+              <label class="uk-form-label" for="form-stacked-text"
+                >Digital gain</label
+              >
+              <div class="uk-form-controls">
+                <input
+                  v-model="settings.picamera.digital_gain"
+                  class="uk-input uk-form-small"
+                  type="number"
+                  step="0.000001"
+                />
+              </div>
             </div>
           </div>
 
-          <div v-if="settings.picamera.analog_gain !== undefined">
-            <label class="uk-form-label" for="form-stacked-text"
-              >Analogue gain</label
-            >
-            <div class="uk-form-controls">
-              <input
-                v-model="settings.picamera.analog_gain"
-                class="uk-input uk-form-small"
-                type="number"
-                step="0.000001"
-              />
-            </div>
-          </div>
+          <button
+            type="submit"
+            class="uk-button uk-button-primary uk-margin-small uk-width-1-1"
+          >
+            Apply Settings
+          </button>
+        </form>
 
-          <div v-if="settings.picamera.digital_gain !== undefined">
-            <label class="uk-form-label" for="form-stacked-text"
-              >Digital gain</label
-            >
-            <div class="uk-form-controls">
-              <input
-                v-model="settings.picamera.digital_gain"
-                class="uk-input uk-form-small"
-                type="number"
-                step="0.000001"
-              />
-            </div>
-          </div>
-        </div>
+        <h3>Automatic calibration</h3>
+        <cameraCalibrationSettings></cameraCalibrationSettings>
+      </div>
 
-        <button
-          type="submit"
-          class="uk-button uk-button-primary uk-margin-small uk-width-1-1"
-        >
-          Apply Settings
-        </button>
-      </form>
-    </div>
-
-    <!--Show auto calibrate if default plugin is enabled-->
-    <h3>Automatic calibration</h3>
-    <cameraCalibrationSettings></cameraCalibrationSettings>
-
-    <div id="mini-stream">
-      <miniStreamDisplay />
+      <div id="mini-stream">
+        <miniStreamDisplay />
+      </div>
     </div>
   </div>
 </template>
@@ -141,7 +142,8 @@ export default {
 
 <style lang="less">
 #mini-stream {
-  width: 500px;
+  min-width: 300px;
+  max-width: 600px;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
index 1314091a..5b995952 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
@@ -16,24 +16,31 @@
       </taskSubmitter>
     </div>
 
-    <div v-show="showExtraSettings" class="uk-child-width-expand" uk-grid>
-      <div v-if="'flatten_lens_shading_table' in recalibrationLinks">
-        <button
-          class="uk-button uk-button-danger uk-width-1-1"
-          @click="flattenLensShadingTableRequest"
-        >
-          Disable flat-field correction
-        </button>
-      </div>
+    <div v-show="showExtraSettings" class="uk-child-width-expand">
+      <button
+        v-if="'flatten_lens_shading_table' in recalibrationLinks"
+        class="uk-button uk-button-danger uk-width-1-1"
+        @click="flattenLensShadingTableRequest"
+      >
+        Disable flat-field correction
+      </button>
 
-      <div v-if="'delete_lens_shading_table' in recalibrationLinks">
-        <button
-          class="uk-button uk-button-danger uk-width-1-1"
-          @click="deleteLensShadingTableRequest"
-        >
-          Adaptive flat-field correction
-        </button>
-      </div>
+      <button
+        v-if="'delete_lens_shading_table' in recalibrationLinks"
+        class="uk-button uk-button-danger uk-margin-small-top uk-width-1-1"
+        @click="deleteLensShadingTableRequest"
+      >
+        Adaptive flat-field correction
+      </button>
+    </div>
+
+    <div v-if="LstDownloadEnabled">
+      <a
+        class="uk-button uk-button-default uk-width-large uk-margin-small-top uk-align-center"
+        :href="LstDownloadUri"
+        download
+        >Download Lens-Shading Table</a
+      >
     </div>
   </div>
 </template>
@@ -61,18 +68,23 @@ export default {
   data: function() {
     return {
       recalibrationLinks: {},
-      isCalibrating: false
+      isCalibrating: false,
+      LstDownloadEnabled: false
     };
   },
 
   computed: {
     pluginsUri: function() {
       return `${this.$store.getters.baseUri}/api/v2/extensions`;
+    },
+    LstDownloadUri: function() {
+      return `${this.$store.getters.baseUri}/api/v2/instrument/camera/lst`;
     }
   },
 
   mounted() {
     this.updateRecalibrationLinks();
+    this.checkLstDownload();
   },
 
   methods: {
@@ -97,6 +109,21 @@ export default {
         });
     },
 
+    checkLstDownload: function() {
+      axios
+        .get(this.LstDownloadUri) // Get a list of plugins
+        .then(response => {
+          if (response.status === 200) {
+            this.LstDownloadEnabled = true;
+          } else {
+            this.LstDownloadEnabled = false;
+          }
+        })
+        .catch(error => {
+          this.modalError(error); // Let mixin handle error
+        });
+    },
+
     onRecalibrateResponse: function() {
       this.modalNotify("Finished recalibration.");
     },
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/featuresSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/featuresSettings.vue
index 1d6f298a..db0945c3 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/featuresSettings.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/featuresSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="appSettings">
+  <div id="appSettings" class="uk-width-large">
     <h3>Additional features</h3>
     <p class="uk-margin-small">
       <label
@@ -7,7 +7,7 @@
         Enable IHI Slide Scan</label
       >
     </p>
-    <p class="uk-margin-small uk-width-xlarge">
+    <p class="uk-margin-small">
       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
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/microscopeSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/microscopeSettings.vue
index 4a1c77a4..fe58d291 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/microscopeSettings.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/microscopeSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="settings" id="microscopeSettings">
+  <div v-if="settings" id="microscopeSettings" class="uk-width-large">
     <form @submit.prevent="applyConfigRequest">
       <label class="uk-form-label" for="form-stacked-text"
         >Backlash compensation</label
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/stageSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/stageSettings.vue
index bce991fa..f0489b88 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/stageSettings.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/stageSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="stageSettings">
+  <div id="stageSettings" class="uk-width-large">
     <div>
       <h3>Stage settings</h3>
       <p>
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/streamSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/streamSettings.vue
index 5e5ae94e..1d4be9d4 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/streamSettings.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/streamSettings.vue
@@ -1,11 +1,14 @@
 <template>
-  <div id="streamSettings">
+  <div id="streamSettings" class="uk-width-large">
     <div>
       <h3>Stream settings</h3>
       <label
         ><input v-model="disableStream" class="uk-checkbox" type="checkbox" />
-        Disable live stream</label
+        Disable web stream</label
       >
+      <p class="uk-margin-small">
+        This will disable the embedded web stream of the camera.
+      </p>
     </div>
 
     <br />
@@ -30,6 +33,18 @@
           >
         </div>
       </div>
+      <p>
+        Enable GPU preview turns on a low-latency camera preview drawn directly
+        to the Raspberry Pi display output.
+      </p>
+      <p class="uk-margin-small">
+        <b
+          >Content, such as your mouse, won't be visible behind this preview.</b
+        >
+        Track Window will attempt to resize the GPU preview based on the current
+        window size, however this is often imperfect and cannot track window
+        movement.
+      </p>
     </div>
   </div>
 </template>
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsContent.vue
index 1f1ababb..3bcd0039 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsContent.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsContent.vue
@@ -133,12 +133,6 @@
         :current-tab="currentTab"
       >
         <div class="settings-pane uk-padding-small">
-          <h3>Camera/stage mapping</h3>
-          <p>
-            Camera/stage mapping allows the stage to move relative to the camera
-            view. This enables functions like click-to-move, and more precise
-            tile scans.
-          </p>
           <CSMSettings />
         </div>
       </tabContent>